Snap banner UI (#1361)

* Snap banner UI * Routing to channels page is done * fixed the navigate line * tweaks in snap * Resolved few useEffect issues --------- Co-authored-by: harshrajat <[email protected]> Co-authored-by: Nilesh Gupta <[email protected]>
push-protocol · Jan 5, 2024 · f668be5 · f668be5
1 parent fa97739
commit f668be5
Show file tree

Hide file tree

Showing 5 changed files with 142 additions and 54 deletions.
diff --git a/src/assets/PushSnaps/BellRinging.svg b/src/assets/PushSnaps/BellRinging.svg
diff --git a/src/assets/PushSnaps/GasPump.svg b/src/assets/PushSnaps/GasPump.svg
diff --git a/src/components/MetamaskSnap/MetamaskSnapConfigureModal.tsx b/src/components/MetamaskSnap/MetamaskSnapConfigureModal.tsx
@@ -2,18 +2,18 @@
 import React, { useEffect, useState } from 'react';
 
 // External Packages
-import styled, { useTheme } from 'styled-components';
+import { AiOutlineMore } from 'react-icons/ai';
 import Switch from 'react-switch';
 import { useClickAway } from 'react-use';
-import { AiOutlineMore } from 'react-icons/ai';
+import styled, { useTheme } from 'styled-components';
 
 // Internal Compoonents
+import { ReactComponent as MinusCircle } from 'assets/PushSnaps/MinusCircle.svg';
+import InfoImage from "assets/info.svg";
+import { Button } from 'components/SharedStyling';
 import { ItemHV2, ItemVV2, SpanV2 } from 'components/reusables/SharedStylingV2';
 import Tooltip from 'components/reusables/tooltip/Tooltip';
-import { Button } from 'components/SharedStyling';
-import InfoImage from "assets/info.svg";
 import { shortenText } from 'helpers/UtilityHelper';
-import { ReactComponent as MinusCircle } from 'assets/PushSnaps/MinusCircle.svg';
 import { useAccount } from 'hooks';
 
 // Internal Configs
@@ -34,20 +34,26 @@ const MetamaskSnapConfigureModal = ({
 
  const { chainId, account, provider } = useAccount();
 
- useEffect(async () => {
- const res = await window.ethereum?.request({
- method: 'wallet_invokeSnap',
- params: {
- snapId: defaultSnapOrigin,
- request: {
- method: 'pushproto_gettogglestatus',
- params: { address: searchedUser },
+ useEffect(() => {
+ (async function () {
+ const res = await window.ethereum?.request({
+ method: 'wallet_invokeSnap',
+ params: {
+ snapId: defaultSnapOrigin,
+ request: {
+ method: 'pushproto_gettogglestatus',
+ params: { address: searchedUser },
+ },
  },
- },
- });
- console.log('res', res);
- setToggleStatus(res);
- }, [toggleStatus])
+ });
+ console.log('res', res);
+ setToggleStatus(res);
+ })();
+ }, [toggleStatus]);
+
+ useEffect(() => {
+ getWalletAddresses();
+ }, []);
 
  async function getSignature(mode: number) {
  if (mode == 1) {
@@ -181,7 +187,6 @@ const MetamaskSnapConfigureModal = ({
  onClick={addWalletAddresses}
  // onClick={addAddresses}
  >Add</FilledButton>
- <EnptyButton onClick={getWalletAddresses}>Show All</EnptyButton>
  </ItemHV2>
  </ItemVV2>
 

diff --git a/src/modules/receiveNotifs/MetamaskPushSnapModal.tsx b/src/modules/receiveNotifs/MetamaskPushSnapModal.tsx
@@ -5,15 +5,15 @@ import React, { useEffect, useState } from 'react';
 import styled, { useTheme } from 'styled-components';
 
 // Internal Compoonents
-import { ItemHV2, ItemVV2, SpanV2 } from 'components/reusables/SharedStylingV2';
-import { Button } from 'components/SharedStyling';
-import { ReactComponent as Close } from 'assets/chat/group-chat/close.svg';
 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 SnapInformationModal from 'components/MetamaskSnap/SnapInformationModal';
 import MetamaskSnapConfigureModal from 'components/MetamaskSnap/MetamaskSnapConfigureModal';
-import { AppContext } from 'contexts/AppContext';
+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";
+import { AppContext } from 'contexts/AppContext';
 import { useLocation } from 'react-router-dom';
 
 const MetamaskPushSnapModal = ({

diff --git a/src/modules/snap/SnapModule.tsx b/src/modules/snap/SnapModule.tsx
@@ -3,27 +3,30 @@ import React, { useEffect, useState } from 'react';
 
 // External Packages
 import ReactGA from 'react-ga';
+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 { H2, Image, Item, Section, Span } from '../../primaries/SharedStyling';
 import LoaderSpinner, { LOADER_TYPE } from 'components/reusables/loaders/LoaderSpinner';
-import Info from 'segments/Info';
+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 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 BellRinging from 'assets/PushSnaps/BellRinging.svg';
+import GasPump from 'assets/PushSnaps/GasPump.svg';
 import { ReactComponent as Gear } from 'assets/PushSnaps/Gear.svg';
-
-import PushSnapModal from './PushSnapModal';
+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 useModalBlur, { MODAL_POSITION } from 'hooks/useModalBlur';
 import AboutSnapModal from './AboutSnapModal';
-import { AppContext } from 'contexts/AppContext';
+
 
 const SnapModule = () => {
  const [loading, setLoading] = useState(false);
@@ -141,7 +144,7 @@ const SnapModule = () => {
  };
 
  const theme = useTheme();
-
+ const navigate = useNavigate();
  return (
  <Container>
  <AboutPushSnapModalComponent
@@ -187,22 +190,50 @@ const SnapModule = () => {
  </ItemVV2>
 
  <ItemVV2>
- {walletConnected ? (
+ {walletConnected || addedAddress ? (
  <>
- <SpanV2
- fontSize="14px"
- fontWeight="400"
- color={theme.snapSecondaryText}
- >
- Get started by opting in to channels on Push.{' '}
- </SpanV2>
- <SpanV2
- fontSize="14px"
- fontWeight="400"
- color={theme.snapSecondaryText}
+ <ItemVV2
+ gap="24px"
+ margin="12px 0"
  >
- Once you opt-in you will receive notifications on MetaMask.
- </SpanV2>
+ <ItemHV2 alignItems="baseline">
+ <Image
+ src={BellRinging}
+ height="32px"
+ width="auto"
+ />
+ <ItemVV2 margin="0 0 0 16px">
+ <PrimaryText>Subscribe for Notifications</PrimaryText>
+ <SecondaryText>Subscribe to protocols that you want notification from. You can see all {" "}
+ <ChannelSpan onClick={() => navigate('/channels')}>protocol channels and subscribe to them from here.</ChannelSpan>
+ </SecondaryText>
+ </ItemVV2>
+ </ItemHV2>
+
+ <ItemHV2 alignItems="baseline">
+ <Image
+ src={GasPump}
+ height="32px"
+ width="auto"
+ />
+ <ItemVV2 margin="0 0 0 16px">
+ <PrimaryText>Gasless Opt-ins</PrimaryText>
+ <SecondaryText>Subscribing / Opting-in to a channel is gasless and completely free.</SecondaryText>
+ </ItemVV2>
+ </ItemHV2>
+
+ <ItemHV2 alignItems="baseline">
+ <Image
+ src={NotificationLogo}
+ height="32px"
+ width="auto"
+ />
+ <ItemVV2 margin="0 0 0 16px">
+ <PrimaryText>Notifications directly in MetaMask</PrimaryText>
+ <SecondaryText>Once subscribed, the channels can send you notifications directly in your MetaMask.</SecondaryText>
+ </ItemVV2>
+ </ItemHV2>
+ </ItemVV2>
  </>
  ) : (
  <SpanV2
@@ -249,15 +280,13 @@ const SnapModule = () => {
 
  {walletConnected || addedAddress ? (
  <ButtonContainer gap="12px" >
-
  <SettingsButton onClick={handleSettingsClick}>
  <Gear
  height="20px"
  width="20px"
  />
  Settings
  </SettingsButton>
- <FilledButton onClick={() => (window.location.href = '/channels')}>Get Started</FilledButton>
  </ButtonContainer>
  ) : (
  <InfoDiv
@@ -277,6 +306,7 @@ const SnapModule = () => {
  </SpanV2>
  </InfoDiv>
  )}
+
  </ItemVV2>
  </SubContainer>
  </Container>
@@ -316,7 +346,7 @@ const Container = styled(Section)`
 const SubContainer = styled(Section)`
  width: 438px;
  height: 423px;
- padding: 48px 24px;
+ padding: 24px;
  border-radius: 32px;
  background: #fff;
  background: ${(props) => props.theme.default.bg};
@@ -364,9 +394,9 @@ const SettingsButton = styled(SnapButton)`
  flex-direction: row;
  color: ${(props) => props.theme.default.secondaryColor};
  text-align: center;
- width: 135px;
+ width: 279px;
  padding: 16px 24px;
- border: 1px solid ${(props)=>props.theme.snapBorderColor};
+ border: 1px solid ${(props) => props.theme.snapBorderColor};
  background: ${(props) => props.theme.default.bg};
  gap: 4px;
 
@@ -375,6 +405,33 @@ const SettingsButton = styled(SnapButton)`
  }
 `;
 
+const PrimaryText = styled.p`
+ margin: 0px;
+ font-size: 18px;
+ font-weight: 500;
+ line-height: 24px; 
+ align-self: baseline;
+ color:${(props) => props.theme.snapPrimaryText};
+`;
+
+const SecondaryText = styled.p`
+ margin: 0px;
+ font-size: 16px;
+ font-weight: 400;
+ line-height: 24px;
+ color:${(props) => props.theme.snapSecondaryText};
+ text-align: left;
+`;
+
+const ChannelSpan = styled(SpanV2)`
+ font-weight: 500;
+ color:#D53A94;
+ cursor:pointer;
+ &:hover{
+ text-decoration:underline;
+ }
+`
+
 const FilledButton = styled(SnapButton)`
  width: 135px;
  padding: 16px 24px;