diff --git a/src/assets/PushSnaps/ActiveIcon.svg b/src/assets/PushSnaps/ActiveIcon.svg
new file mode 100644
index 0000000000..db239e604d
--- /dev/null
+++ b/src/assets/PushSnaps/ActiveIcon.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/PushSnaps/Gear.svg b/src/assets/PushSnaps/Gear.svg
new file mode 100644
index 0000000000..026e4fa06e
--- /dev/null
+++ b/src/assets/PushSnaps/Gear.svg
@@ -0,0 +1,11 @@
+
diff --git a/src/assets/PushSnaps/PushMetamaskLogo.svg b/src/assets/PushSnaps/PushMetamaskLogo.svg
new file mode 100644
index 0000000000..47852c1700
--- /dev/null
+++ b/src/assets/PushSnaps/PushMetamaskLogo.svg
@@ -0,0 +1,52 @@
+
diff --git a/src/assets/PushSnaps/SnapExample.svg b/src/assets/PushSnaps/SnapExample.svg
new file mode 100644
index 0000000000..3e50667143
--- /dev/null
+++ b/src/assets/PushSnaps/SnapExample.svg
@@ -0,0 +1,72 @@
+
diff --git a/src/assets/PushSnaps/spam-icon.svg b/src/assets/PushSnaps/spam-icon.svg
new file mode 100644
index 0000000000..ce27ccf84a
--- /dev/null
+++ b/src/assets/PushSnaps/spam-icon.svg
@@ -0,0 +1,4 @@
+
diff --git a/src/config/NavigationList.js b/src/config/NavigationList.js
index ca8a9a532b..a33c67668a 100644
--- a/src/config/NavigationList.js
+++ b/src/config/NavigationList.js
@@ -187,7 +187,6 @@ const NavigationList = {
},
},
-
receiveNotifs: {
src: 'navigation/receiveNotifOffIcon.svg',
activeSrc: 'navigation/receiveNotifOnIcon.svg',
diff --git a/src/modules/snap/AboutSnapModal.tsx b/src/modules/snap/AboutSnapModal.tsx
new file mode 100644
index 0000000000..c517464008
--- /dev/null
+++ b/src/modules/snap/AboutSnapModal.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import { ReactComponent as Close } from 'assets/chat/group-chat/close.svg';
+import { H2V2, ItemVV2, SpanV2 } from 'components/reusables/SharedStylingV2';
+import styled from 'styled-components';
+
+
+const AboutSnapModal = ({
+ onClose
+}) => {
+
+ const InfoDetails = [
+ {
+ title: 'Step 1',
+ info: 'Install MetaMask Snaps by going to app.push.org/snap'
+ },
+ {
+ title: 'Step 2',
+ info: 'Connect your wallet using MetaMask to receive notifications'
+ },
+ {
+ title: 'Step 3',
+ info: 'Opt-in channels on app.push.org/channels and you’re all set.'
+ },
+ {
+ title: 'Step 4 (optional)',
+ info: 'You can visit app.push.org/snap, click on Settings and Add/Remove Wallets or Snooze Notifications. '
+ }
+ ]
+
+
+
+ return (
+
+
+ onClose()}
+ style={{ cursor: 'pointer' }}
+ />
+
+
+
+
+ Installing Push Snap
+
+
+ {InfoDetails.map((detail) => (
+
+ {detail.title}
+ {detail.info}
+
+ ))}
+
+
+
+
+
+
+ );
+};
+
+export default AboutSnapModal;
+
+const Container = styled(ItemVV2)`
+ width: 375px;
+ padding: 32px 24px;
+ border-radius: 16px;
+ background: #FFF;
+ align-items: end;
+`
\ No newline at end of file
diff --git a/src/modules/snap/PushSnapModal.tsx b/src/modules/snap/PushSnapModal.tsx
new file mode 100644
index 0000000000..9e4dad7253
--- /dev/null
+++ b/src/modules/snap/PushSnapModal.tsx
@@ -0,0 +1,91 @@
+import { Image, Section } from 'components/SharedStyling';
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import SnapExample from 'assets/PushSnaps/SnapExample.svg'
+import { ButtonV2, H2V2, ItemHV2, ItemVV2, SpanV2 } from 'components/reusables/SharedStylingV2';
+import InfoLogo from 'assets/PushSnaps/spam-icon.svg';
+import LoaderSpinner, { LOADER_TYPE } from 'components/reusables/loaders/LoaderSpinner';
+
+const PushSnapModal = () => {
+
+ const [loading, setLoading] = useState(false);
+ const [walletConnected,setWalletConnected] = useState(false);
+
+ const connectToMetamask = () => {
+ setLoading(!loading);
+ }
+
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ Push Snap
+
+ powered by MetaMask
+
+
+
+ You’re about to install Push Snap which allows you to receive notifications from Push directly on MetaMask!
+
+
+
+
+
+
+ {loading ? (
+
+ ) : (
+ Connect Using MetaMask
+ )}
+
+
+
+
+ About this Snap
+
+
+
+
+
+ );
+};
+
+export default PushSnapModal;
+
+const Container = styled(Section)`
+ width:438px;
+ height:423px;
+ padding:48px 24px;
+`
+
+const FilledButton = styled(ButtonV2)`
+ min-width:230px;
+ height:44px;
+ padding: 16px 24px;
+ background: #D53A94;
+ border: 1px solid #D53A94;
+ border-radius: 8px;
+ font-size: 16px;
+ line-height: 141%;
+ letter-spacing: -0.03em;
+ color: #FFFFFF;
+ flex:none;
+ cursor:pointer;
+ border-radius: 15px;
+ & > div{
+ display:block;
+ }
+
+ @media(max-width:600px){
+ font-size: 14px;
+ }
+
+`;
\ No newline at end of file
diff --git a/src/modules/snap/SnapModule.tsx b/src/modules/snap/SnapModule.tsx
new file mode 100644
index 0000000000..027e2c7067
--- /dev/null
+++ b/src/modules/snap/SnapModule.tsx
@@ -0,0 +1,223 @@
+// React + Web3 Essentials
+import React, { useState } from "react";
+
+// External Packages
+import ReactGA from "react-ga";
+import styled, { useTheme } from "styled-components";
+
+// Internal Components
+import { ButtonV2, H2V2, ItemHV2, ItemVV2, SpanV2 } from 'components/reusables/SharedStylingV2';
+import { H2, Image, Item, Section, Span } from "../../primaries/SharedStyling";
+import LoaderSpinner, { LOADER_TYPE } from 'components/reusables/loaders/LoaderSpinner';
+import Info from "segments/Info";
+
+// Internal Configs
+import GLOBALS, { device, globalsMargin } from "config/Globals";
+import useModalBlur, { MODAL_POSITION } from "hooks/useModalBlur";
+import SnapExample from 'assets/PushSnaps/SnapExample.svg'
+import InfoLogo from 'assets/PushSnaps/spam-icon.svg';
+import PushMetamaskLogo from 'assets/PushSnaps/PushMetamaskLogo.svg';
+import ActiveIcon from 'assets/PushSnaps/ActiveIcon.svg';
+import { ReactComponent as Gear } from 'assets/PushSnaps/Gear.svg';
+
+import PushSnapModal from "./PushSnapModal";
+import AboutSnapModal from "./AboutSnapModal";
+
+const SnapModule = () => {
+
+ const [loading, setLoading] = useState(false);
+ const [walletConnected, setWalletConnected] = useState(false);
+ const [snapInstalled,setSnapInstalled] = useState(false);
+
+ const connectToMetamask = () => {
+ setLoading(!loading);
+ }
+
+ //About Snap Info Modal
+ const {
+ isModalOpen: isMetamaskPushSnapOpen,
+ showModal: showPushSnapAbout,
+ ModalComponent: AboutPushSnapModalComponent,
+ } = useModalBlur();
+
+
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Push Snap
+
+ powered by MetaMask
+
+
+
+ {walletConnected ? (
+ <>
+ Get started by opting in to channels on Push.
+ Once you opt-in you will receive notifications on MetaMask.
+
+ ) : (
+
+ You’re about to install Push Snap which allows you to receive notifications from Push directly on MetaMask!
+
+ )}
+
+
+
+
+
+ {walletConnected ? (
+
+
+ Connected to Push Snap
+
+ ) : (
+
+ {loading ? (
+
+ ) : (
+
+ {snapInstalled ? 'Install Snap' : 'Connect Using MetaMask '}
+
+ )}
+
+ )}
+
+ {walletConnected ? (
+
+
+
+ Settings
+
+ Get Started
+
+ ) : (
+
+
+ About this Snap
+
+ )}
+
+
+
+
+
+
+ );
+};
+
+export default SnapModule;
+
+const Container = styled(Section)`
+ align-items: center;
+ align-self: center;
+ // background: ${(props) => props.theme.default.bg};
+ background:#F4F5FA;
+ border-radius: ${GLOBALS.ADJUSTMENTS.RADIUS.LARGE};
+ box-shadow: ${GLOBALS.ADJUSTMENTS.MODULE_BOX_SHADOW};
+ display: flex;
+ flex-direction: column;
+ flex: initial;
+ justify-content: center;
+ max-width: 1200px;
+ width: calc(100% - ${globalsMargin.MINI_MODULES.DESKTOP.RIGHT} - ${globalsMargin.MINI_MODULES.DESKTOP.LEFT} - ${GLOBALS.ADJUSTMENTS.PADDING.BIG} - ${GLOBALS.ADJUSTMENTS.PADDING.BIG});
+ padding: ${GLOBALS.ADJUSTMENTS.PADDING.BIG};
+ position: relative;
+ margin: ${GLOBALS.ADJUSTMENTS.MARGIN.MINI_MODULES.DESKTOP};
+
+ @media ${device.laptop} {
+ margin: ${GLOBALS.ADJUSTMENTS.MARGIN.MINI_MODULES.TABLET};
+ padding: ${GLOBALS.ADJUSTMENTS.PADDING.DEFAULT};
+ width: calc(100% - ${globalsMargin.MINI_MODULES.TABLET.RIGHT} - ${globalsMargin.MINI_MODULES.TABLET.LEFT} - ${GLOBALS.ADJUSTMENTS.PADDING.DEFAULT} - ${GLOBALS.ADJUSTMENTS.PADDING.DEFAULT});
+ }
+
+ @media ${device.mobileL} {
+ margin: ${GLOBALS.ADJUSTMENTS.MARGIN.MINI_MODULES.MOBILE};
+ padding: ${GLOBALS.ADJUSTMENTS.PADDING.DEFAULT};
+ width: calc(100% - ${globalsMargin.MINI_MODULES.MOBILE.RIGHT} - ${globalsMargin.MINI_MODULES.MOBILE.LEFT} - ${GLOBALS.ADJUSTMENTS.PADDING.DEFAULT} - ${GLOBALS.ADJUSTMENTS.PADDING.DEFAULT});
+ }
+`;
+
+
+const SubContainer = styled(Section)`
+ width:438px;
+ height:423px;
+ padding:48px 24px;
+ border-radius: 32px;
+ background: #FFF;
+ box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.05);
+ margin: 24px auto;
+`
+
+const SnapButton = styled(ButtonV2)`
+ height:44px;
+ border-radius: 15px;
+ font-size: 16px;
+ font-weight:500;
+ line-height: 141%;
+ letter-spacing: -0.03em;
+ color: #FFFFFF;
+ flex:none;
+ cursor:pointer;
+
+ & > div{
+ display:block;
+ }
+
+ @media(max-width:600px){
+ font-size: 14px;
+ }
+
+`
+
+const ConnectButton = styled(SnapButton)`
+ min-width:230px;
+ padding: 16px 24px;
+ background: #D53A94;
+ border: 1px solid #D53A94;
+`;
+
+const SettingsButton = styled(SnapButton)`
+ flex-direction:row;
+ color: #657795;
+ text-align: center;
+ width:135px;
+ padding: 16px 24px;
+ border: 1px solid #BAC4D6;
+ background: #FFF;
+ gap:4px;
+`
+
+const FilledButton = styled(SnapButton)`
+ width:135px;
+ padding: 16px 24px;
+ background: #D53A94;
+`
+
+const InfoDiv = styled(ItemHV2)`
+ cursor:pointer;
+`
+
+const ButtonContainer = styled(ItemHV2)`
+
+`
\ No newline at end of file
diff --git a/src/pages/SnapPage.tsx b/src/pages/SnapPage.tsx
new file mode 100644
index 0000000000..5f0fe5a532
--- /dev/null
+++ b/src/pages/SnapPage.tsx
@@ -0,0 +1,34 @@
+// React + Web3 Essentials
+import React, { useState } from "react";
+
+// External Packages
+import ReactGA from "react-ga";
+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";
+import SnapModule from "modules/snap/SnapModule";
+
+// Other Information section
+const SnapPage = () => {
+ // RENDER
+ return (
+
+
+
+ );
+}
+export default SnapPage;
+
+// This defines the page settings, toggle align-self to center if not covering entire stuff, align-items to place them at center
+// justify content flex start to start from top, height is defined by module as well as amount of margin, padding
+const Container = styled(SectionV2)`
+ flex: 1;
+ flex-direction: column;
+ align-self: stretch;
+ justify-content: flex-start;
+`;
\ No newline at end of file
diff --git a/src/structure/MasterInterfacePage.tsx b/src/structure/MasterInterfacePage.tsx
index 6e331847b4..f12c092a42 100644
--- a/src/structure/MasterInterfacePage.tsx
+++ b/src/structure/MasterInterfacePage.tsx
@@ -57,6 +57,7 @@ import { ethers } from 'ethers';
import CryptoHelper from 'helpers/CryptoHelper';
import * as w2wHelper from 'helpers/w2w';
import { ConnectedUser, Feeds, User } from 'types/chat';
+import SnapPage from 'pages/SnapPage';
// Create Header
function MasterInterfacePage() {
@@ -93,6 +94,7 @@ function MasterInterfacePage() {
} />
} />
+ } />
{/* } /> */}
} />