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