diff --git a/src/components/MetamaskSnap/InstallMetamaskSnapModal.tsx b/src/components/PushSnap/InstallPushSnapModal.tsx similarity index 96% rename from src/components/MetamaskSnap/InstallMetamaskSnapModal.tsx rename to src/components/PushSnap/InstallPushSnapModal.tsx index 9af39d7238..e8ea2961e8 100644 --- a/src/components/MetamaskSnap/InstallMetamaskSnapModal.tsx +++ b/src/components/PushSnap/InstallPushSnapModal.tsx @@ -3,6 +3,8 @@ import React, { useEffect } from 'react'; // External Packages import styled, { useTheme } from 'styled-components'; +import { useNavigate } from 'react-router-dom'; + // Internal Compoonents import { A } from 'primaries/SharedStyling'; @@ -16,10 +18,9 @@ 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 { useNavigate } from 'react-router-dom'; -const InstallMetamaskSnapModal = ({ +const InstallPushSnapModal = ({ setSnapState, configure, setConfigure @@ -65,7 +66,7 @@ const InstallMetamaskSnapModal = ({ configure ? ( { setSnapState(3) - navigate('/snap') + // navigate('/snap') }}> Configure @@ -91,7 +92,9 @@ const InstallMetamaskSnapModal = ({ Push Browser Extension - Install + + Install + @@ -203,7 +206,7 @@ const InstallMetamaskSnapModal = ({ ); }; -export default InstallMetamaskSnapModal; +export default InstallPushSnapModal; const SnapContainer = styled(ItemHV2)` border-radius: 14px; diff --git a/src/components/MetamaskSnap/MetamaskSnapConfigureModal.tsx b/src/components/PushSnap/PushSnapConfigureModal.tsx similarity index 94% rename from src/components/MetamaskSnap/MetamaskSnapConfigureModal.tsx rename to src/components/PushSnap/PushSnapConfigureModal.tsx index 519e64cb24..b14fab4240 100644 --- a/src/components/MetamaskSnap/MetamaskSnapConfigureModal.tsx +++ b/src/components/PushSnap/PushSnapConfigureModal.tsx @@ -20,9 +20,7 @@ import { useAccount } from 'hooks'; import { device } from 'config/Globals'; -const MetamaskSnapConfigureModal = ({ - title -}) => { +const PushSnapConfigureModal = () => { const [walletAddresses, setWalletAddresses] = useState([]); const [addresses, setAddresses] = useState([]); const [searchedUser, setSearchedUser] = useState(''); @@ -46,7 +44,6 @@ const MetamaskSnapConfigureModal = ({ }, }, }); - console.log('res', res); setToggleStatus(res); })(); }, [toggleStatus]); @@ -83,7 +80,8 @@ const MetamaskSnapConfigureModal = ({ }, }, }); - console.debug('Added', searchedUser); + setSearchedUser(''); + getWalletAddresses(); } } else { console.error('Signature Validation Failed'); @@ -109,6 +107,7 @@ const MetamaskSnapConfigureModal = ({ const removeWalletAddresses = async (walletSelected: string) => { const signatureResult = await getSignature(2); + console.log("Ran",signatureResult) if (signatureResult) { if (walletSelected) { await window.ethereum?.request({ @@ -121,6 +120,7 @@ const MetamaskSnapConfigureModal = ({ }, }, }); + getWalletAddresses(); } } else { console.error('Signature Validation Failed'); @@ -154,15 +154,6 @@ const MetamaskSnapConfigureModal = ({ return ( - - {title} - - ( {shortenText(wallet, 8)} - handleWalletSelect(wallet)} color={theme.default.color} /> + handleWalletSelect(wallet)} color={theme.default.color} /> {walletSelected === wallet && - removeWalletAddresses(walletSelected)}>Remove + removeWalletAddresses(walletSelected)}>Remove } @@ -249,7 +240,7 @@ const MetamaskSnapConfigureModal = ({ ); }; -export default MetamaskSnapConfigureModal; +export default PushSnapConfigureModal; const InfoToolTip = () => { @@ -444,12 +435,14 @@ const AddressesSubContainer = styled(ItemHV2)` const MoreOptions = styled(AiOutlineMore)` width:24px; height:24px; + cursor:pointer; ` const RemoveDiv = styled(ItemHV2)` border-radius: 12px; border: 1px solid #BAC4D6; background: #FFF; + cursor: pointer; box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.05); padding: 8px 12px 8px 8px; align-items: center; diff --git a/src/components/MetamaskSnap/PushSnapSettings.tsx b/src/components/PushSnap/PushSnapSettings.tsx similarity index 93% rename from src/components/MetamaskSnap/PushSnapSettings.tsx rename to src/components/PushSnap/PushSnapSettings.tsx index 089ce6fc9f..b93a413b36 100644 --- a/src/components/MetamaskSnap/PushSnapSettings.tsx +++ b/src/components/PushSnap/PushSnapSettings.tsx @@ -8,7 +8,7 @@ import { device } from 'config/Globals'; import LoaderSpinner, { LOADER_TYPE } from 'components/reusables/loaders/LoaderSpinner'; import InfoLogo from 'assets/PushSnaps/spam-icon.svg'; import { useAccount } from 'hooks'; -import MetamaskSnapConfigureModal from './MetamaskSnapConfigureModal'; +import PushSnapConfigureModal from './PushSnapConfigureModal'; import useModalBlur, { MODAL_POSITION } from 'hooks/useModalBlur'; import AboutSnapModal from 'modules/snap/AboutSnapModal'; @@ -182,7 +182,18 @@ const PushSnapSettings = () => { return ( <> {!snapInstalled ? : ( - + <> + + Push Snap Settings + + + )} diff --git a/src/components/MetamaskSnap/SnapFAQModal.tsx b/src/components/PushSnap/SnapFAQModal.tsx similarity index 100% rename from src/components/MetamaskSnap/SnapFAQModal.tsx rename to src/components/PushSnap/SnapFAQModal.tsx diff --git a/src/components/MetamaskSnap/SnapInformationModal.tsx b/src/components/PushSnap/SnapInformationModal.tsx similarity index 88% rename from src/components/MetamaskSnap/SnapInformationModal.tsx rename to src/components/PushSnap/SnapInformationModal.tsx index 80cff0041b..8735467067 100644 --- a/src/components/MetamaskSnap/SnapInformationModal.tsx +++ b/src/components/PushSnap/SnapInformationModal.tsx @@ -3,6 +3,7 @@ import React from 'react'; // External Packages import styled, { useTheme } from 'styled-components'; +import { useNavigate } from 'react-router-dom'; // Internal Compoonents import { ItemHV2, ItemVV2, SpanV2 } from 'components/reusables/SharedStylingV2'; @@ -14,8 +15,11 @@ import WalletLogo from 'assets/PushSnaps/Wallet.svg'; import NotificationLogo from 'assets/PushSnaps/Notification.svg'; import Metamask from 'assets/PushSnaps/metamasksnap.svg'; -const SnapInformationModal = () => { +const SnapInformationModal = ({ + handleCloseModal +}) => { const theme = useTheme(); + const navigate = useNavigate(); const defaultSnapOrigin = 'npm:@pushprotocol/snap'; @@ -29,18 +33,22 @@ const SnapInformationModal = () => { }; const installSnap = async () => { - await connectSnap(); - const res = await window.ethereum?.request({ - method: 'wallet_invokeSnap', - params: { - snapId: defaultSnapOrigin, - request: { method: 'pushproto_welcome' }, - }, - }); - if (res) { - window.open("/snap", '_self'); - } + handleCloseModal(); + navigate('/snap'); + + // await connectSnap(); + // const res = await window.ethereum?.request({ + // method: 'wallet_invokeSnap', + // params: { + // snapId: defaultSnapOrigin, + // request: { method: 'pushproto_welcome' }, + // }, + // }); + + // if (res) { + // window.open("/snap", '_self'); + // } }; return ( diff --git a/src/components/MetamaskSnap/SnapKnowledgeModal.tsx b/src/components/PushSnap/SnapKnowledgeModal.tsx similarity index 100% rename from src/components/MetamaskSnap/SnapKnowledgeModal.tsx rename to src/components/PushSnap/SnapKnowledgeModal.tsx diff --git a/src/components/userSettings/UserSettings.tsx b/src/components/userSettings/UserSettings.tsx index 8e8fc587d5..1428434684 100644 --- a/src/components/userSettings/UserSettings.tsx +++ b/src/components/userSettings/UserSettings.tsx @@ -21,7 +21,7 @@ import ManageNotifSettingDropdown from 'components/dropdowns/ManageNotifSettingD // Internal Configs import { device } from 'config/Globals'; import ChannelListSettings from 'components/channel/ChannelListSettings'; -import PushSnapSettings from 'components/MetamaskSnap/PushSnapSettings'; +import PushSnapSettings from 'components/PushSnap/PushSnapSettings'; import EmptyNotificationSettings from 'components/channel/EmptyNotificationSettings'; interface ChannelListItem { diff --git a/src/modules/receiveNotifs/MetamaskPushSnapModal.tsx b/src/modules/receiveNotifs/MetamaskPushSnapModal.tsx index ac1e7e88f6..d2f94cc56d 100644 --- a/src/modules/receiveNotifs/MetamaskPushSnapModal.tsx +++ b/src/modules/receiveNotifs/MetamaskPushSnapModal.tsx @@ -3,18 +3,20 @@ import React, { useEffect, useState } from 'react'; // External Packages import styled, { useTheme } from 'styled-components'; +import { useLocation } from 'react-router-dom'; // Internal Compoonents +import InstallPushSnapModal from 'components/PushSnap/InstallPushSnapModal'; +import PushSnapConfigureModal from 'components/PushSnap/PushSnapConfigureModal'; +import SnapInformationModal from 'components/PushSnap/SnapInformationModal'; +import { Button } from 'components/SharedStyling'; import { ReactComponent as Back } from 'assets/chat/arrowleft.svg'; import { ReactComponent as Close } from 'assets/chat/group-chat/close.svg'; -import InstallMetamaskSnapModal from 'components/MetamaskSnap/InstallMetamaskSnapModal'; -import MetamaskSnapConfigureModal from 'components/MetamaskSnap/MetamaskSnapConfigureModal'; -import SnapInformationModal from 'components/MetamaskSnap/SnapInformationModal'; -import { Button } from 'components/SharedStyling'; import { ItemHV2, ItemVV2, SpanV2 } from 'components/reusables/SharedStylingV2'; -import GLOBALS, { device, globalsMargin } from "config/Globals"; + +// Internal Configs import { AppContext } from 'contexts/AppContext'; -import { useLocation } from 'react-router-dom'; + const MetamaskPushSnapModal = ({ onClose, @@ -35,20 +37,22 @@ const MetamaskPushSnapModal = ({ var uri = window.location.toString(); if (uri.indexOf("#") > 0) { - var clean_uri = uri.substring(0,uri.indexOf("#")); + var clean_uri = uri.substring(0, uri.indexOf("#")); - window.history.replaceState({},document.title, clean_uri); + window.history.replaceState({}, document.title, clean_uri); } setSnapState(1); onClose(); } + const isSnapRoute = location?.pathname === '/snap'; + return ( - {SnapState !== 1 && setSnapState(1)} />} + {(SnapState !== 1 && !isSnapRoute) && setSnapState(1)} />} {SnapState === 1 && Receive Notifications } - {closeEnabled && + {SnapState === 3 && + Settings + } + + {closeEnabled && - {SnapState == 1 && } - {SnapState == 2 && } - {SnapState == 3 && } + {SnapState == 1 && } + {SnapState == 2 && } + {SnapState == 3 && } diff --git a/src/modules/snap/SnapModule.tsx b/src/modules/snap/SnapModule.tsx index 58a37e2336..fdb0fbbaad 100644 --- a/src/modules/snap/SnapModule.tsx +++ b/src/modules/snap/SnapModule.tsx @@ -7,6 +7,8 @@ import { useNavigate } from 'react-router-dom'; import styled, { useTheme } from 'styled-components'; // Internal Components +import SnapFAQModal from 'components/PushSnap/SnapFAQModal'; +import SnapKnowledgeModal from 'components/PushSnap/SnapKnowledgeModal'; import { ButtonV2, H2V2, ItemHV2, ItemVV2, SpanV2 } from 'components/reusables/SharedStylingV2'; import LoaderSpinner, { LOADER_TYPE } from 'components/reusables/loaders/LoaderSpinner'; import { AppContext } from 'contexts/AppContext'; @@ -14,11 +16,8 @@ import { useAccount } from 'hooks'; import useModalBlur, { MODAL_POSITION } from 'hooks/useModalBlur'; import Info from 'segments/Info'; import { H2, Image, Item, Section, Span } from '../../primaries/SharedStyling'; -import SnapFAQModal from 'components/MetamaskSnap/SnapFAQModal'; -import SnapKnowledgeModal from 'components/MetamaskSnap/SnapKnowledgeModal'; // Internal Configs -import GLOBALS, { device, globalsMargin } from 'config/Globals'; import ActiveIcon from 'assets/PushSnaps/ActiveIcon.svg'; import BellRinging from 'assets/PushSnaps/BellRinging.svg'; import GasPump from 'assets/PushSnaps/GasPump.svg'; @@ -27,6 +26,7 @@ import NotificationLogo from 'assets/PushSnaps/Notification.svg'; import PushMetamaskLogo from 'assets/PushSnaps/PushMetamaskLogo.svg'; import SnapExample from 'assets/PushSnaps/SnapExample.svg'; import InfoLogo from 'assets/PushSnaps/spam-icon.svg'; +import GLOBALS, { device, globalsMargin } from 'config/Globals'; import AboutSnapModal from './AboutSnapModal'; @@ -42,10 +42,13 @@ const SnapModule = ({ const { account, provider } = useAccount(); + const theme = useTheme(); + const navigate = useNavigate(); + useEffect(() => { getInstalledSnaps(); getWalletAddresses(); - }, [account, walletConnected]); + }, [account, walletConnected, snapInstalled]); async function getInstalledSnaps() { const installedSnaps = await window.ethereum.request({ @@ -73,6 +76,7 @@ const SnapModule = ({ console.debug(walletConnected); if (result.includes(account)) { setAddedAddress(true); + setWalletConnected(true); } else { setAddedAddress(false); } @@ -159,9 +163,6 @@ const SnapModule = ({ showMetamaskPushSnap(); }; - const theme = useTheme(); - const navigate = useNavigate(); - useEffect(() => { if (route == 'faq') { showSnapFAQModal(); @@ -304,22 +305,32 @@ const SnapModule = ({ fontWeight="400" > Connected to Push Snap - - - ) : ( - - {loading ? ( - - ) : ( - connectToMetaMask()}> - {!snapInstalled ? 'Connect Snap' : 'Connect Using MetaMask '} - - )} - - )} + + + ) : ( + + {loading && !snapInstalled ? ( + + ) : ( + connectToMetaMask()} > + {!snapInstalled ? 'Step 1: Install Snap' : 'Step 1: Completed'} + + )} + {loading && snapInstalled ? ( + + ) : ( + connectToMetaMask()} > + Step 2: Sign In with Metamask 🦊 + + )} + + )} {walletConnected || addedAddress ? ( @@ -429,19 +440,25 @@ const SnapButton = styled(ButtonV2)` @media (max-width: 600px) { font-size: 14px; } +`; - - +const Steps = styled(ItemVV2)` + flex-wrap: wrap; -`; + &::after { + content: ""; + width: 100%; + } +` const ConnectButton = styled(SnapButton)` - min-width: 230px; + min-width: 280px; padding: 16px 24px; - background: #d53a94; - border: 1px solid #d53a94; - - + background: ${props => props.signOnMM ? '#222222' : '#d53a94'}; + border: ${props => props.signOnMM ? '1px solid #2a2a2a' : '1px solid #d53a94'}; + opacity: ${props => props.disabled ? '0.5' : '1'}; + pointer-events: ${props => props.disabled ? 'none' : 'auto'}; + cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'}; `; const SettingsButton = styled(SnapButton)` diff --git a/src/pages/SnapPage.tsx b/src/pages/SnapPage.tsx index c2fc257bba..14357feede 100644 --- a/src/pages/SnapPage.tsx +++ b/src/pages/SnapPage.tsx @@ -7,7 +7,6 @@ import styled from 'styled-components'; // Internal Components import { SectionV2 } from 'components/reusables/SharedStylingV2'; -import ReceiveNotifsModule from "modules/receiveNotifs/ReceiveNotifsModule"; // Internal Configs import GLOBALS from "config/Globals";