push-protocol · 0xNilesh · Jan 11, 2024 · Jan 10, 2024 · Jan 11, 2024 · Jan 11, 2024
diff --git a/...MetamaskSnap/InstallMetamaskSnapModal.tsx → ...ponents/PushSnap/InstallPushSnapModal.tsx b/...MetamaskSnap/InstallMetamaskSnapModal.tsx → ...ponents/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 ? (
                         <InstallButton onClick={() => {
                             setSnapState(3)
-                            navigate('/snap')
+                            // navigate('/snap')
                         }}>
                             Configure
                         </InstallButton>
@@ -91,7 +92,9 @@ const InstallMetamaskSnapModal = ({
                         Push Browser Extension
                     </SpanV2>
                 </SnapInner>
-                <InstallButton>Install</InstallButton>
+                <a href='https://chromewebstore.google.com/detail/push-protocol-alpha/lbdcbpaldalgiieffakjhiccoeebchmg' target='_blank'>
+                    <InstallButton>Install</InstallButton>
+                </a>
             </SnapContainer>
             <SnapContainer>
                 <SnapInner>
@@ -203,7 +206,7 @@ const InstallMetamaskSnapModal = ({
     );
 };
 
-export default InstallMetamaskSnapModal;
+export default InstallPushSnapModal;
 
 const SnapContainer = styled(ItemHV2)`
     border-radius: 14px;

diff --git a/...tamaskSnap/MetamaskSnapConfigureModal.tsx → ...nents/PushSnap/PushSnapConfigureModal.tsx b/...tamaskSnap/MetamaskSnapConfigureModal.tsx → ...nents/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 (
     <Container >
-      <SpanV2
-        fontSize="22px"
-        fontWeight="500"
-        color={theme.modalMessageColor}
-        alignSelf={title === 'Push Snap Settings' ? 'baseline' : 'center'}
-      >
-        {title}   
-      </SpanV2>
+
 
       <ItemVV2
         alignItems="baseline"
@@ -249,7 +239,7 @@ const MetamaskSnapConfigureModal = ({
   );
 };
 
-export default MetamaskSnapConfigureModal;
+export default PushSnapConfigureModal;
 
 const InfoToolTip = () => {
 

diff --git a/...ponents/MetamaskSnap/PushSnapSettings.tsx → src/components/PushSnap/PushSnapSettings.tsx b/...ponents/MetamaskSnap/PushSnapSettings.tsx → 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 ? <InstallSnap /> : (
-                <MetamaskSnapConfigureModal title={'Push Snap Settings'}/>
+                <>
+                <SpanV2
+                    fontWeight="500"
+                    fontSize="22px"
+                    color={theme.modalMessageColor}
+                    flex="1"
+                    padding='0px 0px 0px 9px'
+                >
+                    Push Snap Settings
+                </SpanV2>
+                <PushSnapConfigureModal/>
+                </>
             )}
 
         </>

diff --git a/...nts/MetamaskSnap/SnapInformationModal.tsx → ...ponents/PushSnap/SnapInformationModal.tsx b/...nts/MetamaskSnap/SnapInformationModal.tsx → ...ponents/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
@@ -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
@@ -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 (
         <Container padding="20px 15px" >
             <ItemHV2 justifyContent='space-between'>
 
-                {SnapState !== 1 && <Back width='24px' cursor='pointer' onClick={() => setSnapState(1)} />}
+                {(SnapState !== 1 && !isSnapRoute) && <Back width='24px' cursor='pointer' onClick={() => setSnapState(1)} />}
 
                 {SnapState === 1 && <SpanV2
                     fontWeight="500"
@@ -58,17 +62,26 @@ const MetamaskPushSnapModal = ({
                 >
                     Receive Notifications
                 </SpanV2>}
-                {closeEnabled && 
+                {SnapState === 3 && <SpanV2
+                    fontWeight="500"
+                    fontSize="22px"
+                    color={theme.modalMessageColor}
+                    flex="1"
+                >
+                    Settings
+                </SpanV2>}
+
+                {closeEnabled &&
                     <Close
                         onClick={handleCloseModal}
                         style={{ cursor: 'pointer' }}
                     />
                 }
             </ItemHV2>
 
-            {SnapState == 1 && <InstallMetamaskSnapModal setSnapState={setSnapState} setConfigure={setConfigure} configure={configure} />}
-            {SnapState == 2 && <SnapInformationModal />}
-            {SnapState == 3 && <MetamaskSnapConfigureModal title={'Settings'}/>}
+            {SnapState == 1 && <InstallPushSnapModal setSnapState={setSnapState} setConfigure={setConfigure} configure={configure} />}
+            {SnapState == 2 && <SnapInformationModal handleCloseModal={handleCloseModal} />}
+            {SnapState == 3 && <PushSnapConfigureModal/>}
 
 
         </Container>

diff --git a/src/modules/snap/SnapModule.tsx b/src/modules/snap/SnapModule.tsx
@@ -7,14 +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';
-
-// 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 +15,17 @@ 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
 import GLOBALS, { device, globalsMargin } from 'config/Globals';
 import useModalBlur, { MODAL_POSITION } from 'hooks/useModalBlur';
-import AboutSnapModal from './AboutSnapModal';
 
 
 const SnapModule = () => {
@@ -264,18 +264,32 @@ const SnapModule = () => {
               </SpanV2>
             </ItemHV2>
           ) : (
-            <ItemVV2>
-              {loading ? (
-                <LoaderSpinner
-                  type={LOADER_TYPE.SEAMLESS}
-                  spinnerSize={44}
-                />
-              ) : (
-                <ConnectButton onClick={() => connectToMetaMask()}>
-                  {!snapInstalled ? 'Connect Snap' : 'Connect Using MetaMask '}
-                </ConnectButton>
-              )}
-            </ItemVV2>
+            <ItemHV2 gap="16px">
+              <ItemVV2>
+                {loading && !snapInstalled ? (
+                  <LoaderSpinner
+                    type={LOADER_TYPE.SEAMLESS}
+                    spinnerSize={44}
+                  />
+                ) : (
+                  <ConnectButton disabled={!snapInstalled ? false : true} onClick={() => connectToMetaMask()} >
+                    {!snapInstalled ? 'Step 1: Install Snap' : 'Step 1: Completed'}
+                  </ConnectButton>
+                )}
+              </ItemVV2>
+              <ItemVV2>
+                {loading && snapInstalled ? (
+                  <LoaderSpinner
+                    type={LOADER_TYPE.SEAMLESS}
+                    spinnerSize={44}
+                  />
+                ) : (
+                  <ConnectButton disabled={snapInstalled ? false : true} signOnMM={snapInstalled ? true : false} onClick={() => connectToMetaMask()} >
+                    Step 2: Sign In with Metamask 🦊
+                  </ConnectButton>
+                )}
+              </ItemVV2>
+            </ItemHV2>
           )}
 
           {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)`

diff --git 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";