From 018372da2996df36be42c6e94ad087af080a8c24 Mon Sep 17 00:00:00 2001 From: abhishek-01k Date: Sun, 17 Sep 2023 22:35:32 +0530 Subject: [PATCH 1/3] Created Snap Route --- src/assets/PushSnaps/ActiveIcon.svg | 3 + src/assets/PushSnaps/Gear.svg | 11 ++ src/assets/PushSnaps/PushMetamaskLogo.svg | 52 +++++ src/assets/PushSnaps/SnapExample.svg | 72 +++++++ src/assets/PushSnaps/spam-icon.svg | 4 + src/config/NavigationList.js | 25 +++ src/modules/snap/AboutSnapModal.tsx | 69 +++++++ src/modules/snap/PushSnapModal.tsx | 91 +++++++++ src/modules/snap/SnapModule.tsx | 227 ++++++++++++++++++++++ src/pages/SnapPage.tsx | 34 ++++ src/structure/MasterInterfacePage.tsx | 2 + 11 files changed, 590 insertions(+) create mode 100644 src/assets/PushSnaps/ActiveIcon.svg create mode 100644 src/assets/PushSnaps/Gear.svg create mode 100644 src/assets/PushSnaps/PushMetamaskLogo.svg create mode 100644 src/assets/PushSnaps/SnapExample.svg create mode 100644 src/assets/PushSnaps/spam-icon.svg create mode 100644 src/modules/snap/AboutSnapModal.tsx create mode 100644 src/modules/snap/PushSnapModal.tsx create mode 100644 src/modules/snap/SnapModule.tsx create mode 100644 src/pages/SnapPage.tsx 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..44e3e39a48 100644 --- a/src/config/NavigationList.js +++ b/src/config/NavigationList.js @@ -187,6 +187,31 @@ const NavigationList = { }, }, + pushSnaps: { + src: 'navigation/receiveNotifOffIcon.svg', + activeSrc: 'navigation/receiveNotifOnIcon.svg', + iconFactory: null, + name: 'Push Snap', + title: 'Push Snap', + alt: 'Push Snap', + href: '/snap', + newTab: false, + isRoute: true, + hasMenuLogic: true, + hidden: false, + headerTag: { + title: 'Push Snap', + light: { + bg: GLOBALS.COLORS.GRADIENT_THIRD, + fg: themeLight.headerTagFg, + }, + dark: { + bg: themeDark.headerTagBg, + fg: themeDark.headerTagFg, + }, + }, + }, + receiveNotifs: { src: 'navigation/receiveNotifOffIcon.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..85ed18f6c6 --- /dev/null +++ b/src/modules/snap/SnapModule.tsx @@ -0,0 +1,227 @@ +// 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); + } + + //notification modal + const { + isModalOpen: isMetamaskPushSnapOpen, + showModal: showPushSnapAbout, + ModalComponent: AboutPushSnapModalComponent, + } = useModalBlur(); + + // React.useEffect(() => { + // showMetamaskPushSnap(); + // }, []) + + return ( + + + + + +
setWalletConnected(!walletConnected)}> Dummy Connect button
+ + + + + + + + + + + + + + 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: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() { } /> } /> + } /> {/* } /> */} } /> From ac8c0ed09567833bc171408a3ed93a11818f5d0b Mon Sep 17 00:00:00 2001 From: abhishek-01k Date: Mon, 18 Sep 2023 17:52:18 +0530 Subject: [PATCH 2/3] Rremoved Push Snap from the navigation section --- src/config/NavigationList.js | 26 -------------------------- src/modules/snap/SnapModule.tsx | 12 ++++-------- 2 files changed, 4 insertions(+), 34 deletions(-) diff --git a/src/config/NavigationList.js b/src/config/NavigationList.js index 44e3e39a48..a33c67668a 100644 --- a/src/config/NavigationList.js +++ b/src/config/NavigationList.js @@ -187,32 +187,6 @@ const NavigationList = { }, }, - pushSnaps: { - src: 'navigation/receiveNotifOffIcon.svg', - activeSrc: 'navigation/receiveNotifOnIcon.svg', - iconFactory: null, - name: 'Push Snap', - title: 'Push Snap', - alt: 'Push Snap', - href: '/snap', - newTab: false, - isRoute: true, - hasMenuLogic: true, - hidden: false, - headerTag: { - title: 'Push Snap', - light: { - bg: GLOBALS.COLORS.GRADIENT_THIRD, - fg: themeLight.headerTagFg, - }, - dark: { - bg: themeDark.headerTagBg, - fg: themeDark.headerTagFg, - }, - }, - }, - - receiveNotifs: { src: 'navigation/receiveNotifOffIcon.svg', activeSrc: 'navigation/receiveNotifOnIcon.svg', diff --git a/src/modules/snap/SnapModule.tsx b/src/modules/snap/SnapModule.tsx index 85ed18f6c6..09fcbba23e 100644 --- a/src/modules/snap/SnapModule.tsx +++ b/src/modules/snap/SnapModule.tsx @@ -33,16 +33,14 @@ const SnapModule = () => { setLoading(!loading); } - //notification modal + //About Snap Info Modal const { isModalOpen: isMetamaskPushSnapOpen, showModal: showPushSnapAbout, ModalComponent: AboutPushSnapModalComponent, } = useModalBlur(); - // React.useEffect(() => { - // showMetamaskPushSnap(); - // }, []) + return ( @@ -55,11 +53,9 @@ const SnapModule = () => { /> -
setWalletConnected(!walletConnected)}> Dummy Connect button
- - + @@ -96,7 +92,7 @@ const SnapModule = () => { Connected to Push Snap ) : ( - + {loading ? ( ) : ( From b69107d9f4685c4e985483e93bf4db66f5ba346d Mon Sep 17 00:00:00 2001 From: abhishek-01k Date: Mon, 18 Sep 2023 17:53:13 +0530 Subject: [PATCH 3/3] Minor Ui fix --- src/modules/snap/SnapModule.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/modules/snap/SnapModule.tsx b/src/modules/snap/SnapModule.tsx index 09fcbba23e..027e2c7067 100644 --- a/src/modules/snap/SnapModule.tsx +++ b/src/modules/snap/SnapModule.tsx @@ -55,7 +55,7 @@ const SnapModule = () => { - + @@ -166,7 +166,7 @@ const SubContainer = styled(Section)` border-radius: 32px; background: #FFF; box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.05); - margin:auto; + margin: 24px auto; ` const SnapButton = styled(ButtonV2)`