diff --git a/src/App.tsx b/src/App.tsx index 10a67ea5a9..bf249d9665 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -103,7 +103,7 @@ export default function App() { const {authError, setAuthError } = useContext(ErrorContext); const { run, stepIndex, tutorialContinous } = useSelector((state: any) => state.userJourney); - const location = useLocation(); + // const location = useLocation(); // Build takes care of this now // const [title, setTitle] = useState(EnvHelper.dappTitle()); @@ -225,6 +225,9 @@ export default function App() { // const { spaceUI } = useSpaceComponents(); + const location = useLocation(); + const isSnapPage = location?.pathname === '/snap'; + return ( {!isActive && ( @@ -280,11 +283,11 @@ export default function App() { bg={darkMode ? themeDark.backgroundBG : !isActive ? themeLight.connectWalletBg : themeLight.backgroundBG} headerHeight={GLOBALS.CONSTANTS.HEADER_HEIGHT} > - + {!isSnapPage && - + } - + {/* Shared among all pages, load universal things here */} diff --git a/src/components/MetamaskSnap/InstallMetamaskSnapModal.tsx b/src/components/MetamaskSnap/InstallMetamaskSnapModal.tsx index 8f064e6b04..ee6ff314c3 100644 --- a/src/components/MetamaskSnap/InstallMetamaskSnapModal.tsx +++ b/src/components/MetamaskSnap/InstallMetamaskSnapModal.tsx @@ -1,14 +1,19 @@ -import { Button } from 'components/SharedStyling'; -import { ItemHV2, ItemVV2, SpanV2 } from 'components/reusables/SharedStylingV2'; +// React + Web3 Essentials import React, { useEffect } from 'react'; + +// External Packages import styled,{useTheme} from 'styled-components'; + +// Internal Compoonents +import { A } from 'primaries/SharedStyling'; +import { ItemHV2, ItemVV2, SpanV2 } from 'components/reusables/SharedStylingV2'; +import { Button } from 'components/SharedStyling'; import Metamask from 'assets/PushSnaps/metamasksnap.svg'; import PushIcon from 'assets/PushSnaps/PushIcon.svg'; import AppStoreQRCode from 'assets/PushSnaps/AppStoreQRCode.svg'; import PlayStoreQRCode from 'assets/PushSnaps/PlayStoreQRCode.svg'; import AppleIcon from 'assets/PushSnaps/AppleIcon.svg'; import PlayStore from 'assets/PushSnaps/PlayStore.svg'; -import { A } from 'primaries/SharedStyling'; const InstallMetamaskSnapModal = ({ @@ -28,7 +33,7 @@ const InstallMetamaskSnapModal = ({ method: 'wallet_getSnaps' }); Object.keys(installedSnaps).forEach((snap) => { - if (snap == 'npm:push-v1') { + if (snap == 'npm:@pushprotocol/snaps') { setConfigure(true); } } diff --git a/src/components/MetamaskSnap/MetamaskSnapConfigureModal.tsx b/src/components/MetamaskSnap/MetamaskSnapConfigureModal.tsx index 24cef95e8b..86e2f20222 100644 --- a/src/components/MetamaskSnap/MetamaskSnapConfigureModal.tsx +++ b/src/components/MetamaskSnap/MetamaskSnapConfigureModal.tsx @@ -1,27 +1,52 @@ -import { Button } from 'components/SharedStyling'; -import { ItemHV2, ItemVV2, SpanV2 } from 'components/reusables/SharedStylingV2'; -import { device } from 'config/Globals'; -import { shortenText } from 'helpers/UtilityHelper'; -import React, { useState } from 'react'; -import styled from 'styled-components'; -import { ReactComponent as MoreLight } from 'assets/chat/group-chat/more.svg'; -import { ReactComponent as MoreDark } from 'assets/chat/group-chat/moredark.svg'; -import { ReactComponent as RestrictIcon } from 'assets/PushSnaps/MinusCircle.svg'; +// React + Web3 Essentials +import React, { useEffect, useState } from 'react'; +import { useWeb3React } from '@web3-react/core'; + +// External Packages +import styled, { useTheme } from 'styled-components'; import Switch from 'react-switch'; import { useClickAway } from 'react-use'; -import { useWeb3React } from '@web3-react/core'; +import { AiOutlineMore } from 'react-icons/ai'; + +// Internal Compoonents +import { ItemHV2, ItemVV2, SpanV2 } from 'components/reusables/SharedStylingV2'; import Tooltip from 'components/reusables/tooltip/Tooltip'; +import { Button } from 'components/SharedStyling'; import InfoImage from "assets/info.svg"; +import { shortenText } from 'helpers/UtilityHelper'; +import { ReactComponent as MinusCircle } from 'assets/PushSnaps/MinusCircle.svg'; + +// Internal Configs +import { device } from 'config/Globals'; + const MetamaskSnapConfigureModal = () => { const [walletAddresses, setWalletAddresses] = useState([]); + const [addresses, setAddresses] = useState([]); const [searchedUser, setSearchedUser] = useState(''); const [showRemove, setShowRemove] = useState(); + const[toggleStatus, setToggleStatus] = useState(0); + const theme = useTheme(); - const defaultSnapOrigin = 'npm:push-v1'; + const defaultSnapOrigin = 'npm:@pushprotocol/snaps'; const { chainId, account, provider } = useWeb3React(); + useEffect(async () => { + const res = await window.ethereum?.request({ + method: 'wallet_invokeSnap', + params: { + snapId: defaultSnapOrigin, + request: { + method: 'pushproto_gettogglestatus', + params: { address: searchedUser }, + }, + }, + }); + console.log('res', res); + setToggleStatus(res); + }, [toggleStatus]) + async function getSignature(mode: number) { if (mode == 1) { const signer = provider.getSigner(account); @@ -30,7 +55,7 @@ const MetamaskSnapConfigureModal = () => { } if (mode == 2) { const signer = provider.getSigner(account); - const signature = await signer.signMessage(`Remove address ${account }to stop receive notifications via Push Snap in MetaMask`); + const signature = await signer.signMessage(`Remove address ${account}to stop receive notifications via Push Snap in MetaMask`); return signature; } } @@ -67,19 +92,24 @@ const MetamaskSnapConfigureModal = () => { request: { method: 'pushproto_togglepopup' }, }, }); + if(toggleStatus<40){ + setToggleStatus(42); + }else{ + setToggleStatus(0); + } }; - const removeWalletAddresses = async () => { + const removeWalletAddresses = async (walletSelected:string) => { const signatureResult = await getSignature(2); if (signatureResult) { - if (searchedUser) { + if (walletSelected) { await window.ethereum?.request({ method: 'wallet_invokeSnap', params: { snapId: defaultSnapOrigin, request: { method: 'pushproto_removeaddress', - params: { address: searchedUser }, + params: { address: walletSelected }, }, }, }); @@ -98,20 +128,28 @@ const MetamaskSnapConfigureModal = () => { }, }); console.log('result', result); - setWalletAddresses(result); + setAddresses(result); } const containerRef = React.useRef(null); useClickAway(containerRef, () => { console.log('Set show to be null'); + setWalletSelected(null); setShowRemove(null); }); + + const [walletSelected, setWalletSelected] = useState(); + + const handleWalletSelect = (address) => { + setWalletSelected(address); + } return ( - + Settings @@ -119,6 +157,7 @@ const MetamaskSnapConfigureModal = () => { Notification Address Add or remove wallet address to receive notifications @@ -129,28 +168,49 @@ const MetamaskSnapConfigureModal = () => { setSearchedUser(e.target.value); }} placeholder="0x123 .... 4567" - // color={theme.modalPrimaryTextColor} /> - Add + Add Get Addresses + + + + {addresses?.map((wallet) => ( + + {shortenText(wallet, 8)} + handleWalletSelect(wallet)} color={theme.default.color}/> + + {walletSelected === wallet && + + removeWalletAddresses(walletSelected)}>Remove + + } + + ))} + + + Snooze Notifications - + Toggle notification pop-ups on or off @@ -162,7 +222,7 @@ const MetamaskSnapConfigureModal = () => { > { - {checked ? 'On' : 'Off'} + {toggleStatus<40 ? 'On' : 'Off'} @@ -184,40 +245,40 @@ const MetamaskSnapConfigureModal = () => { export default MetamaskSnapConfigureModal; -const InfoToolTip = () =>{ +const InfoToolTip = () => { - return( + return ( - Toggle popups in case of frequent incoming notifications - - } - > - - - - + wrapperProps={{ + width: 'fit-content', + maxWidth: 'fit-content', + minWidth: 'fit-content', + // zIndex: "10", + }} + placementProps={{ + background: 'none', + bottom: "20px", + // top: '20px', + // right: "-175px", + left: '5px', + }} + tooltipContent={ + + Toggle popups in case of frequent incoming notifications + + } + > + + + + ) } const Container = styled(ItemVV2)` - padding: 0px 9px 12px 9px; + padding: 0px 0px 12px 9px; `; const ToolTipContainer = styled(ItemVV2)` @@ -245,6 +306,7 @@ const PrimaryText = styled.p` font-size: 18px; font-weight: 500; align-self: baseline; + color:${(props)=>props.theme.modalMessageColor}; `; const SecondaryText = styled.p` @@ -252,8 +314,8 @@ const SecondaryText = styled.p` font-size: 16px; font-weight: 400; line-height: 24px; - color: #62626a; text-align: left; + color:${(props)=>props.theme.snapSecondaryText}; `; const ToolTipText = styled.p` @@ -262,7 +324,7 @@ const ToolTipText = styled.p` font-weight: 400; line-height: 24px; color: #62626a; - color: ${(props)=>props.theme.modalMessageColor}; + color: ${(props) => props.theme.modalMessageColor}; text-align: left; ` @@ -300,14 +362,12 @@ const Input = styled.input` height: 48px; padding: 13px 16px; margin: 10px 0px 0px; - // border: 1px solid; - // border-color: ${(props) => props.theme.modalSearchBarBorderColor}; background: ${(props) => props.theme.modalSearchBarBackground}; border-radius: 12px; border: 1px solid #bac4d6; - color: ${(props) => props.color || '#000'}; + color: ${(props) => props.theme.default.secondaryColor || '#000'}; &:focus { outline: none; background-origin: border; @@ -315,9 +375,66 @@ const Input = styled.input` background-clip: padding-box, border-box; } &::placeholder { - color: #657795; + color: ${(props) => props.theme.default.secondaryColor || '#000'}; } @media ${device.mobileL} { min-width: 300px; } `; + +const AddressesContainer = styled.div` + display:flex; + flex-direction:column; + width: -webkit-fill-available; + overflow-y: scroll; + gap: 8px; + margin:8px 0 0 0; + max-height: 250px; + flex-wrap: nowrap; + padding:5px 5px 5px 0; + &::-webkit-scrollbar-track { + border-radius: 10px; + } + + &::-webkit-scrollbar { + width: 5px; + } + + &::-webkit-scrollbar-thumb { + border-radius: 10px; + background-image: -webkit-gradient( + linear, + left top, + left bottom, + color-stop(0.44, #cf1c84), + color-stop(0.72, #cf1c84), + color-stop(0.86, #cf1c84) + ); + } +` + +const AddressesSubContainer = styled(ItemHV2)` + max-height: 42px; + padding: 13px 16px; + border-radius: 12px; + background: ${(props)=>props.theme.snapBackground}; + justify-content: space-between; +` + +const MoreOptions = styled(AiOutlineMore)` + width:24px; + height:24px; +` + +const RemoveDiv = styled(ItemHV2)` + border-radius: 12px; + border: 1px solid #BAC4D6; + background: #FFF; + box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.05); + padding: 8px 12px 8px 8px; + align-items: center; + gap: 9px; + position: absolute; + right: 0; + top: 3px; +` diff --git a/src/components/MetamaskSnap/SnapInformationModal.tsx b/src/components/MetamaskSnap/SnapInformationModal.tsx index 66f54e12be..426ca30a0a 100644 --- a/src/components/MetamaskSnap/SnapInformationModal.tsx +++ b/src/components/MetamaskSnap/SnapInformationModal.tsx @@ -1,21 +1,23 @@ -import { ItemHV2, ItemVV2, SpanV2 } from 'components/reusables/SharedStylingV2'; +// React + Web3 Essentials import React from 'react'; + +// External Packages import styled, { useTheme } from 'styled-components'; -import PushIcon from 'assets/PushSnaps/PushIcon.svg'; + +// Internal Compoonents +import { ItemHV2, ItemVV2, SpanV2 } from 'components/reusables/SharedStylingV2'; +import { Button } from 'components/SharedStyling'; import PushLogoLight from 'assets/pushLight.svg'; import PushLogoDark from 'assets/pushDark.svg'; -// import { ReactComponent as PushLogoLight } from '../../assets/pushLight.svg'; - import HandTap from 'assets/PushSnaps/HandTap.svg'; import WalletLogo from 'assets/PushSnaps/Wallet.svg'; import NotificationLogo from 'assets/PushSnaps/Notification.svg'; import Metamask from 'assets/PushSnaps/metamasksnap.svg'; -import { Button } from 'components/SharedStyling'; const SnapInformationModal = () => { const theme = useTheme(); - const defaultSnapOrigin = 'npm:push-v1'; + const defaultSnapOrigin = 'npm:@pushprotocol/snaps'; const connectSnap = async (snapId = defaultSnapOrigin, params = {}) => { await window.ethereum?.request({ @@ -57,6 +59,7 @@ const SnapInformationModal = () => { fontSize="22px" fontWeight="500" letterSpacing="-0.44px" + color={theme.modalMessageColor} > Connect to Metamask Push Snap @@ -134,6 +137,7 @@ const PrimaryText = styled.p` font-size: 18px; font-weight: 500; align-self: baseline; + color:${(props)=>props.theme.modalMessageColor}; `; const SecondaryText = styled.p` @@ -141,7 +145,7 @@ const SecondaryText = styled.p` font-size: 16px; font-weight: 400; line-height: 24px; - color: #62626a; + color:${(props)=>props.theme.snapSecondaryText}; text-align: left; `; diff --git a/src/config/Themization.js b/src/config/Themization.js index 74f2590585..b4aa0f7d6d 100644 --- a/src/config/Themization.js +++ b/src/config/Themization.js @@ -263,6 +263,9 @@ const themeLight = { snapUIBackground:'#F9F9F9', snapButtonBackground:'#1E1E1E', + snapPrimaryText:'', + snapSecondaryText:'#62626a', + snapBackground:'#F2F2F2', }; @@ -535,6 +538,10 @@ const themeDark = { snapUIBackground:'transparent', snapButtonBackground:'#404650', + snapPrimaryText:'', + snapSecondaryText:'#787E99', + snapBackground:'#404650', + }; module.exports = { diff --git a/src/modules/receiveNotifs/MetamaskPushSnapModal.tsx b/src/modules/receiveNotifs/MetamaskPushSnapModal.tsx index 23b038e6ce..9ab7d43e95 100644 --- a/src/modules/receiveNotifs/MetamaskPushSnapModal.tsx +++ b/src/modules/receiveNotifs/MetamaskPushSnapModal.tsx @@ -1,12 +1,17 @@ -import { ItemHV2, ItemVV2, SpanV2 } from 'components/reusables/SharedStylingV2'; +// React + Web3 Essentials import React, { useState } from 'react'; + +// External Packages import styled, { useTheme } from 'styled-components'; -import { ReactComponent as Close } from 'assets/chat/group-chat/close.svg'; + +// Internal Compoonents +import { ItemHV2, ItemVV2, SpanV2 } from 'components/reusables/SharedStylingV2'; import { Button } from 'components/SharedStyling'; +import { ReactComponent as Close } from 'assets/chat/group-chat/close.svg'; +import { ReactComponent as Back } from 'assets/chat/arrowleft.svg'; import InstallMetamaskSnapModal from 'components/MetamaskSnap/InstallMetamaskSnapModal'; import SnapInformationModal from 'components/MetamaskSnap/SnapInformationModal'; import MetamaskSnapConfigureModal from 'components/MetamaskSnap/MetamaskSnapConfigureModal'; -import { ReactComponent as Back } from 'assets/chat/arrowleft.svg'; const MetamaskPushSnapModal = ({ @@ -21,7 +26,7 @@ const MetamaskPushSnapModal = ({ return ( - + {SnapState !== 1 && setSnapState(1)}/>} @@ -45,8 +50,17 @@ const MetamaskPushSnapModal = ({ {SnapState == 3 && } - + ); }; -export default MetamaskPushSnapModal; \ No newline at end of file +export default MetamaskPushSnapModal; + +const Container = styled(ItemVV2)` + min-width:420px; + + @media(max-width:476px){ + min-width:360px; + } + +` \ No newline at end of file diff --git a/src/modules/snap/SnapModule.tsx b/src/modules/snap/SnapModule.tsx index d80e7ca781..b3a952ac07 100644 --- a/src/modules/snap/SnapModule.tsx +++ b/src/modules/snap/SnapModule.tsx @@ -23,12 +23,15 @@ import { ReactComponent as Gear } from 'assets/PushSnaps/Gear.svg'; import PushSnapModal from './PushSnapModal'; import AboutSnapModal from './AboutSnapModal'; +import { AppContext } from 'contexts/AppContext'; const SnapModule = () => { const [loading, setLoading] = useState(false); const [walletConnected, setWalletConnected] = useState(false); const [snapInstalled, setSnapInstalled] = useState(false); + const { showMetamaskPushSnap } = React.useContext(AppContext); + const { account, provider } = useWeb3React(); useEffect(() => { @@ -40,13 +43,13 @@ const SnapModule = () => { method: 'wallet_getSnaps', }); Object.keys(installedSnaps).forEach((snap) => { - if (snap == 'npm:push-v1') { + if (snap == 'npm:@pushprotocol/snaps') { setSnapInstalled(true); } }); } - const defaultSnapOrigin = `npm:push-v1`; + const defaultSnapOrigin = `npm:@pushprotocol/snaps`; async function connectSnap ( snapId = defaultSnapOrigin, @@ -214,7 +217,7 @@ const SnapModule = () => { {walletConnected ? ( - + props.theme.default.bg}; - background: #f4f5fa; - border-radius: ${GLOBALS.ADJUSTMENTS.RADIUS.LARGE}; - box-shadow: ${GLOBALS.ADJUSTMENTS.MODULE_BOX_SHADOW}; display: flex; flex-direction: column; flex: initial; @@ -268,24 +267,7 @@ const Container = styled(Section)` padding: ${GLOBALS.ADJUSTMENTS.PADDING.BIG}; position: relative; margin: ${GLOBALS.ADJUSTMENTS.MARGIN.MINI_MODULES.DESKTOP}; - - @media ${device.laptop} { - margin: ${GLOBALS.ADJUSTMENTS.MARGIN.MINI_MODULES.TABLET}; - padding: ${GLOBALS.ADJUSTMENTS.PADDING.DEFAULT}; - width: calc( - 100% - ${globalsMargin.MINI_MODULES.TABLET.RIGHT} - ${globalsMargin.MINI_MODULES.TABLET.LEFT} - - ${GLOBALS.ADJUSTMENTS.PADDING.DEFAULT} - ${GLOBALS.ADJUSTMENTS.PADDING.DEFAULT} - ); - } - - @media ${device.mobileL} { - margin: ${GLOBALS.ADJUSTMENTS.MARGIN.MINI_MODULES.MOBILE}; - padding: ${GLOBALS.ADJUSTMENTS.PADDING.DEFAULT}; - width: calc( - 100% - ${globalsMargin.MINI_MODULES.MOBILE.RIGHT} - ${globalsMargin.MINI_MODULES.MOBILE.LEFT} - - ${GLOBALS.ADJUSTMENTS.PADDING.DEFAULT} - ${GLOBALS.ADJUSTMENTS.PADDING.DEFAULT} - ); - } + `; const SubContainer = styled(Section)`