Merge pull request #1254 from ethereum-push-notification-service/Meta…

…mask-Snap-Updated-UI

Created /snap route

src/config/NavigationList.js

@@ -187,7 +187,6 @@ const NavigationList = {
       },
     },
 
-
     receiveNotifs: {
       src: 'navigation/receiveNotifOffIcon.svg',
       activeSrc: 'navigation/receiveNotifOnIcon.svg',

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 (
+        <Container>
+
+            <Close
+                onClick={() => onClose()}
+                style={{ cursor: 'pointer' }}
+            />
+
+            <ItemVV2 gap='24px'>
+
+                <ItemVV2>
+                    <H2V2 fontSize='22px' fontWeight='500' letterSpacing='-0.44px'>Installing Push Snap</H2V2>
+                </ItemVV2>
+
+                {InfoDetails.map((detail) => (
+                    <ItemVV2 alignItems='baseline'>
+                        <H2V2 fontSize='18px' fontWeight='500' >{detail.title}</H2V2>
+                        <SpanV2 textAlign='left' fontSize='16px' fontWeight='400' color='#62626A'>{detail.info}</SpanV2>
+                    </ItemVV2>
+                ))}
+
+            </ItemVV2>
+
+
+
+        </Container>
+    );
+};
+
+export default AboutSnapModal;
+
+const Container = styled(ItemVV2)`
+    width: 375px;
+    padding: 32px 24px;
+    border-radius: 16px;
+    background: #FFF;
+    align-items: end;
+`

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 (
+        <Container>
+
+            <ItemVV2>
+                <Image src={SnapExample} width='276px' height='202px' />
+            </ItemVV2>
+
+            <ItemVV2 gap='24px'>
+                <ItemVV2 gap='12px'>
+                    <ItemVV2>
+                        <H2V2 fontSize='34px' fontWeight='500' color='#1E1E1E' letterSpacing='-1.02px'>
+                            Push Snap
+                        </H2V2>
+                        <SpanV2 fontSize='12px' fontWeight='400' color='#657795'>powered by MetaMask</SpanV2>
+                    </ItemVV2>
+                    <ItemVV2>
+                        <SpanV2 fontSize='14px' fontWeight='400' color='#000'>
+                            You’re about to install Push Snap which allows you to receive notifications from Push directly on MetaMask!
+                        </SpanV2>
+                    </ItemVV2>
+                </ItemVV2>
+
+
+                <ItemVV2 onClick={connectToMetamask}>
+                    {loading ? (
+                        <LoaderSpinner type={LOADER_TYPE.SEAMLESS} spinnerSize={44} />
+                    ) : (
+                        <FilledButton onClick={connectToMetamask}>Connect Using MetaMask</FilledButton>
+                    )}
+                </ItemVV2>
+
+                <ItemHV2 gap='7px'>
+                    <Image src={InfoLogo} width={16} />
+                    <SpanV2>About this Snap</SpanV2>
+                </ItemHV2>
+            </ItemVV2>
+
+
+        </Container>
+    );
+};
+
+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;
+    }
+    
+`;