From daeb9b9ea33e2ecc3381a13ff34810a9bd40a341 Mon Sep 17 00:00:00 2001 From: abhishek-01k Date: Wed, 10 Jan 2024 17:31:39 +0530 Subject: [PATCH 1/3] Fixed some snap flow issue --- .../InstallPushSnapModal.tsx} | 13 ++++--- .../PushSnapConfigureModal.tsx} | 16 ++------ .../PushSnapSettings.tsx | 15 ++++++- .../SnapInformationModal.tsx | 32 +++++++++------ src/components/userSettings/UserSettings.tsx | 2 +- .../receiveNotifs/MetamaskPushSnapModal.tsx | 39 ++++++++++++------- src/modules/snap/SnapModule.tsx | 6 +-- src/pages/SnapPage.tsx | 1 - 8 files changed, 74 insertions(+), 50 deletions(-) rename src/components/{MetamaskSnap/InstallMetamaskSnapModal.tsx => PushSnap/InstallPushSnapModal.tsx} (96%) rename src/components/{MetamaskSnap/MetamaskSnapConfigureModal.tsx => PushSnap/PushSnapConfigureModal.tsx} (96%) rename src/components/{MetamaskSnap => PushSnap}/PushSnapSettings.tsx (93%) rename src/components/{MetamaskSnap => PushSnap}/SnapInformationModal.tsx (88%) 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 96% rename from src/components/MetamaskSnap/MetamaskSnapConfigureModal.tsx rename to src/components/PushSnap/PushSnapConfigureModal.tsx index 7786a73096..084d43f4fa 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(''); @@ -141,7 +139,6 @@ const MetamaskSnapConfigureModal = ({ const containerRef = React.useRef(null); useClickAway(containerRef, () => { - console.log('Set show to be null'); setWalletSelected(null); setShowRemove(null); }); @@ -154,14 +151,7 @@ const MetamaskSnapConfigureModal = ({ return ( - - {title} - + { 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 6d6bee60b2..20c4e918c8 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/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/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 1d7164be74..0952c02a40 100644 --- a/src/modules/snap/SnapModule.tsx +++ b/src/modules/snap/SnapModule.tsx @@ -13,8 +13,6 @@ import { AppContext } from 'contexts/AppContext'; import { useAccount } from 'hooks'; import Info from 'segments/Info'; import { H2, Image, Item, Section, Span } from '../../primaries/SharedStyling'; - -// Internal Configs import ActiveIcon from 'assets/PushSnaps/ActiveIcon.svg'; import BellRinging from 'assets/PushSnaps/BellRinging.svg'; import GasPump from 'assets/PushSnaps/GasPump.svg'; @@ -23,9 +21,11 @@ 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 AboutSnapModal from './AboutSnapModal'; + +// Internal Configs import GLOBALS, { device, globalsMargin } from 'config/Globals'; import useModalBlur, { MODAL_POSITION } from 'hooks/useModalBlur'; -import AboutSnapModal from './AboutSnapModal'; const SnapModule = () => { diff --git a/src/pages/SnapPage.tsx b/src/pages/SnapPage.tsx index 5f0fe5a532..63763a394e 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"; From 3e92257928e52b63fa37c0c5d0f1e80dacfcdd38 Mon Sep 17 00:00:00 2001 From: abhishek-01k Date: Thu, 11 Jan 2024 17:16:23 +0530 Subject: [PATCH 2/3] Snap Wallet Address issue fixed --- .../PushSnap/PushSnapConfigureModal.tsx | 16 ++++++++-------- src/modules/snap/SnapModule.tsx | 13 ++++++------- 2 files changed, 14 insertions(+), 15 deletions(-) diff --git a/src/components/PushSnap/PushSnapConfigureModal.tsx b/src/components/PushSnap/PushSnapConfigureModal.tsx index 084d43f4fa..c81590fdbe 100644 --- a/src/components/PushSnap/PushSnapConfigureModal.tsx +++ b/src/components/PushSnap/PushSnapConfigureModal.tsx @@ -44,7 +44,6 @@ const PushSnapConfigureModal = () => { }, }, }); - console.log('res', res); setToggleStatus(res); })(); }, [toggleStatus]); @@ -67,7 +66,6 @@ const PushSnapConfigureModal = () => { } const addWalletAddresses = async () => { - console.log('searchedUser', searchedUser); const signatureResult = await getSignature(1); if (signatureResult) { if (searchedUser) { @@ -81,7 +79,8 @@ const PushSnapConfigureModal = () => { }, }, }); - console.log('Added', searchedUser); + setSearchedUser(''); + getWalletAddresses(); } } else { console.log('Signature Validation Failed'); @@ -107,6 +106,7 @@ const PushSnapConfigureModal = () => { const removeWalletAddresses = async (walletSelected: string) => { const signatureResult = await getSignature(2); + console.log("Ran",signatureResult) if (signatureResult) { if (walletSelected) { await window.ethereum?.request({ @@ -119,6 +119,7 @@ const PushSnapConfigureModal = () => { }, }, }); + getWalletAddresses(); } } else { console.log('Signature Validation Failed'); @@ -133,7 +134,6 @@ const PushSnapConfigureModal = () => { request: { method: 'pushproto_getaddresses' }, }, }); - console.log('result', result); setAddresses(result); } @@ -151,8 +151,6 @@ const PushSnapConfigureModal = () => { return ( - - { {addresses?.map((wallet) => ( {shortenText(wallet, 8)} - handleWalletSelect(wallet)} color={theme.default.color} /> + handleWalletSelect(wallet)} color={theme.default.color} /> {walletSelected === wallet && - removeWalletAddresses(walletSelected)}>Remove + removeWalletAddresses(walletSelected)}>Remove } @@ -434,12 +432,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/modules/snap/SnapModule.tsx b/src/modules/snap/SnapModule.tsx index 0952c02a40..3e06fdf27e 100644 --- a/src/modules/snap/SnapModule.tsx +++ b/src/modules/snap/SnapModule.tsx @@ -38,10 +38,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({ @@ -65,10 +68,9 @@ const SnapModule = () => { }, }); - console.log(account); - console.log(walletConnected); if (result.includes(account)) { setAddedAddress(true); + setWalletConnected(true); } else { setAddedAddress(false); } @@ -142,9 +144,6 @@ const SnapModule = () => { setSnapState(3); showMetamaskPushSnap(); }; - - const theme = useTheme(); - const navigate = useNavigate(); return ( { /> ) : ( connectToMetaMask()}> - {!snapInstalled ? 'Connect Snap' : 'Connect Using MetaMask '} + {!snapInstalled ? 'Connect Snap' : 'Connect Using MetaMask'} )} From aadf410ba7da37a0217e4b3b027c584ab290fe09 Mon Sep 17 00:00:00 2001 From: harshrajat Date: Thu, 11 Jan 2024 16:00:20 +0400 Subject: [PATCH 3/3] added two step process in metamask snap --- src/modules/snap/SnapModule.tsx | 61 ++++++++++++++++++++------------- 1 file changed, 38 insertions(+), 23 deletions(-) diff --git a/src/modules/snap/SnapModule.tsx b/src/modules/snap/SnapModule.tsx index 0952c02a40..f525e7ef1d 100644 --- a/src/modules/snap/SnapModule.tsx +++ b/src/modules/snap/SnapModule.tsx @@ -7,12 +7,6 @@ import { useNavigate } from 'react-router-dom'; import styled, { useTheme } from 'styled-components'; // Internal Components -import { ButtonV2, H2V2, ItemHV2, ItemVV2, SpanV2 } from 'components/reusables/SharedStylingV2'; -import LoaderSpinner, { LOADER_TYPE } from 'components/reusables/loaders/LoaderSpinner'; -import { AppContext } from 'contexts/AppContext'; -import { useAccount } from 'hooks'; -import Info from 'segments/Info'; -import { H2, Image, Item, Section, Span } from '../../primaries/SharedStyling'; import ActiveIcon from 'assets/PushSnaps/ActiveIcon.svg'; import BellRinging from 'assets/PushSnaps/BellRinging.svg'; import GasPump from 'assets/PushSnaps/GasPump.svg'; @@ -21,6 +15,12 @@ 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 { ButtonV2, H2V2, ItemHV2, ItemVV2, SpanV2 } from 'components/reusables/SharedStylingV2'; +import LoaderSpinner, { LOADER_TYPE } from 'components/reusables/loaders/LoaderSpinner'; +import { AppContext } from 'contexts/AppContext'; +import { useAccount } from 'hooks'; +import Info from 'segments/Info'; +import { H2, Image, Item, Section, Span } from '../../primaries/SharedStyling'; import AboutSnapModal from './AboutSnapModal'; // Internal Configs @@ -264,18 +264,32 @@ const SnapModule = () => { ) : ( - - {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 ? ( @@ -382,12 +396,13 @@ const SnapButton = styled(ButtonV2)` `; 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)`