Fixed some snap flow issue (#1374)

* Fixed some snap flow issue * Snap Wallet Address issue fixed * added two step process in metamask snap --------- Co-authored-by: harshrajat <[email protected]>
push-protocol · Jan 11, 2024 · 4eeebf1 · 4eeebf1
1 parent 154dde4
commit 4eeebf1
Show file tree

Hide file tree

Showing 10 changed files with 126 additions and 82 deletions.
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('');
@@ -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 (
  <Container >
- <SpanV2
- fontSize="22px"
- fontWeight="500"
- color={theme.modalMessageColor}
- alignSelf={title === 'Push Snap Settings' ? 'baseline' : 'center'}
- >
- {title} 
- </SpanV2>
-
  <ItemVV2
  alignItems="baseline"
  margin="24px 0 0 0"
@@ -196,11 +187,11 @@ const MetamaskSnapConfigureModal = ({
  {addresses?.map((wallet) => (
  <AddressesSubContainer>
  <SpanV2 fontSize='15px' fontWeight='500' color={walletSelected === wallet ? '#D53A94' : theme.default.color}>{shortenText(wallet, 8)}</SpanV2>
- <MoreOptions onClick={() => handleWalletSelect(wallet)} color={theme.default.color} />
+ <MoreOptions  onClick={() => handleWalletSelect(wallet)} color={theme.default.color} />
 
  {walletSelected === wallet && <RemoveDiv >
  <MinusCircle />
- <SpanV2 fontSize='16px' fontWeight='400' color='#657795' onClick={() => removeWalletAddresses(walletSelected)}>Remove</SpanV2>
+ <SpanV2 fontSize='16px' cursor='pointer' fontWeight='400' color='#657795' onClick={() => removeWalletAddresses(walletSelected)}>Remove</SpanV2>
  </RemoveDiv>
  }
  </AddressesSubContainer>
@@ -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/...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/src/components/MetamaskSnap/SnapFAQModal.tsx → src/components/PushSnap/SnapFAQModal.tsx b/src/components/MetamaskSnap/SnapFAQModal.tsx → src/components/PushSnap/SnapFAQModal.tsx
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/...nents/MetamaskSnap/SnapKnowledgeModal.tsx → ...omponents/PushSnap/SnapKnowledgeModal.tsx b/...nents/MetamaskSnap/SnapKnowledgeModal.tsx → ...omponents/PushSnap/SnapKnowledgeModal.tsx
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>