From 4a7ac2673916ce439d155535a2b97902e11e5556 Mon Sep 17 00:00:00 2001 From: abhishek-01k Date: Tue, 10 Oct 2023 19:43:55 +0530 Subject: [PATCH] Snaps Issues resolved --- .../MetamaskSnap/InstallMetamaskSnapModal.tsx | 22 ++++++---- src/config/NavigationList.js | 2 +- .../receiveNotifs/MetamaskPushSnapModal.tsx | 17 +++++-- src/structure/Header.tsx | 44 ++++++++++--------- src/structure/MasterInterfacePage.tsx | 11 ++++- yarn.lock | 20 ++++----- 6 files changed, 73 insertions(+), 43 deletions(-) diff --git a/src/components/MetamaskSnap/InstallMetamaskSnapModal.tsx b/src/components/MetamaskSnap/InstallMetamaskSnapModal.tsx index 8098ad5ca4..02aee66a82 100644 --- a/src/components/MetamaskSnap/InstallMetamaskSnapModal.tsx +++ b/src/components/MetamaskSnap/InstallMetamaskSnapModal.tsx @@ -2,7 +2,7 @@ import React, { useEffect } from 'react'; // External Packages -import styled,{useTheme} from 'styled-components'; +import styled, { useTheme } from 'styled-components'; // Internal Compoonents import { A } from 'primaries/SharedStyling'; @@ -14,6 +14,7 @@ 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 = ({ @@ -40,6 +41,8 @@ const InstallMetamaskSnapModal = ({ ) } + const navigate = useNavigate(); + return ( @@ -58,8 +61,11 @@ const InstallMetamaskSnapModal = ({ { configure ? ( - setSnapState(3)}> - Settings + { + setSnapState(3) + navigate('/snap') + }}> + Configure ) : ( setSnapState(2)}> @@ -154,9 +160,9 @@ export default InstallMetamaskSnapModal; const SnapContainer = styled(ItemHV2)` border-radius: 14px; padding:7px 14px; - background:${(props)=>props.theme.snapUIBackground}; + background:${(props) => props.theme.snapUIBackground}; justify-content:space-between; - border: 1px solid ${(props)=>props.theme.default.border}; + border: 1px solid ${(props) => props.theme.default.border}; ` const SnapInner = styled.div` @@ -191,8 +197,8 @@ const InstallButton = styled(Button)` const QRCodeContainer = styled(ItemVV2)` border-radius: 14px; padding:7px 14px; - background:${(props)=>props.theme.snapUIBackground}; - border: 1px solid ${(props)=>props.theme.default.border}; + background:${(props) => props.theme.snapUIBackground}; + border: 1px solid ${(props) => props.theme.default.border}; padding-bottom:15px; gap:4px; &:hover{ @@ -204,7 +210,7 @@ const QRCodeContainer = styled(ItemVV2)` const DownloadContainer = styled.div` display:flex; border-radius: 8px; - background: ${(props)=>props.theme.snapButtonBackground}; + background: ${(props) => props.theme.snapButtonBackground}; padding: 4px 11px; gap: 8px; height:36px; diff --git a/src/config/NavigationList.js b/src/config/NavigationList.js index 4d0df7653d..9be0005ed1 100644 --- a/src/config/NavigationList.js +++ b/src/config/NavigationList.js @@ -195,7 +195,7 @@ const NavigationList = { name: 'Receive Notifications', title: 'Receive Notifications', alt: 'Receive Notifications', - href: '', + href: '#receive-notifications', hasOnClickFunction:true, newTab: false, isRoute: true, diff --git a/src/modules/receiveNotifs/MetamaskPushSnapModal.tsx b/src/modules/receiveNotifs/MetamaskPushSnapModal.tsx index 2b4f044bb8..a210206243 100644 --- a/src/modules/receiveNotifs/MetamaskPushSnapModal.tsx +++ b/src/modules/receiveNotifs/MetamaskPushSnapModal.tsx @@ -14,17 +14,28 @@ import SnapInformationModal from 'components/MetamaskSnap/SnapInformationModal'; import MetamaskSnapConfigureModal from 'components/MetamaskSnap/MetamaskSnapConfigureModal'; import { AppContext } from 'contexts/AppContext'; import GLOBALS, { device, globalsMargin } from "config/Globals"; +import { useLocation } from 'react-router-dom'; const MetamaskPushSnapModal = ({ onClose }) => { const theme = useTheme(); + const location = useLocation(); const [configure, setConfigure] = useState(false); - const {setSnapState,SnapState } = React.useContext(AppContext); + const { setSnapState, SnapState } = React.useContext(AppContext); + + const handleCloseModal = () => { + + var uri = window.location.toString(); + + if (uri.indexOf("#") > 0) { + var clean_uri = uri.substring(0,uri.indexOf("#")); + + window.history.replaceState({},document.title, clean_uri); + } - const handleCloseModal = ()=>{ setSnapState(1); onClose(); } @@ -33,7 +44,7 @@ const MetamaskPushSnapModal = ({ - {SnapState !== 1 && setSnapState(1)}/>} + {SnapState !== 1 && setSnapState(1)} />} {SnapState === 1 && - + + + - + {/* mobile navbar */} {navigationSetup && showNavBar && isActive && !error && ( - + @@ -130,13 +134,13 @@ function Header({ isDarkMode, darkModeToggle }) { - {headerTag && isActive && !error && ( + {headerTag && isActive && !error && !isSnapPage && ( {headerTag.title} @@ -155,26 +159,26 @@ function Header({ isDarkMode, darkModeToggle }) { /> )} - {isActive && !error && ( - - - - )} + {isActive && !error && ( + + + + )} {!!error && {getErrorMessage(error)}} {!isActive && !error && Please connect to a Web3 Network} {isActive && !showLoginControls && !error && ( - + )}{' '} @@ -215,7 +219,7 @@ const RightBarMobile = styled(ItemH)` } `; - const LogoMobile = styled(ItemH)` +const LogoMobile = styled(ItemH)` @media (min-width: 993px) { display: none; } diff --git a/src/structure/MasterInterfacePage.tsx b/src/structure/MasterInterfacePage.tsx index b34e610825..4d5cc162cc 100644 --- a/src/structure/MasterInterfacePage.tsx +++ b/src/structure/MasterInterfacePage.tsx @@ -71,6 +71,14 @@ function MasterInterfacePage() { const { MetamaskPushSnapModalComponent }:AppContextType = React.useContext(AppContext); + const { showMetamaskPushSnap } = React.useContext(AppContext); + + React.useEffect(()=>{ + if(location.hash == '#receive-notifications'){ + showMetamaskPushSnap(); + } + },[location]) + // Render return ( @@ -127,10 +135,11 @@ function MasterInterfacePage() { draggable /> + {/* Modal displaying ReceiveNotifications */} diff --git a/yarn.lock b/yarn.lock index b10c26aed1..edb9046573 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5345,9 +5345,9 @@ __metadata: "@mui/lab": ^5.0.0-alpha.72 "@mui/material": ^5.5.0 "@pushprotocol/ledgerlive": latest - "@pushprotocol/restapi": 1.4.18 + "@pushprotocol/restapi": 1.4.21 "@pushprotocol/socket": latest - "@pushprotocol/uiweb": 1.1.13 + "@pushprotocol/uiweb": 1.1.14 "@reduxjs/toolkit": ^1.7.1 "@testing-library/dom": ^6.12.2 "@testing-library/jest-dom": ^4.2.4 @@ -5546,9 +5546,9 @@ __metadata: languageName: node linkType: hard -"@pushprotocol/restapi@npm:1.4.18": - version: 1.4.18 - resolution: "@pushprotocol/restapi@npm:1.4.18" +"@pushprotocol/restapi@npm:1.4.21": + version: 1.4.21 + resolution: "@pushprotocol/restapi@npm:1.4.21" dependencies: "@ambire/signature-validator": ^1.3.1 "@metamask/eth-sig-util": ^5.0.2 @@ -5566,7 +5566,7 @@ __metadata: video-stream-merger: ^4.0.1 peerDependencies: ethers: ^5.6.8 - checksum: a350b385db72c5ce106ed940d77acfac11cec1960409b18698d63d3359a84788da503b62fa3fd01f94b7a7d3634614e26346432d833eb0d69b717c00bb627415 + checksum: e466b817bf19087d8b7bac25ac60354ad804fd964c668eac547d012d1a52cfe9ded2ffb74b67bb8c0ac40bb148410aa8c8b1269fcb7efb9a83bd211f84e1184c languageName: node linkType: hard @@ -5594,9 +5594,9 @@ __metadata: languageName: node linkType: hard -"@pushprotocol/uiweb@npm:1.1.13": - version: 1.1.13 - resolution: "@pushprotocol/uiweb@npm:1.1.13" +"@pushprotocol/uiweb@npm:1.1.14": + version: 1.1.14 + resolution: "@pushprotocol/uiweb@npm:1.1.14" dependencies: "@livepeer/react": ^2.6.0 "@pushprotocol/socket": ^0.5.0 @@ -5617,7 +5617,7 @@ __metadata: ethers: ^5.7.1 react: ">=16.8.0" styled-components: ^5.3.5 - checksum: a03933a5e2c010435aad2bf36657198276b75025521146a64e66847f9f7f492ff85ec4612cf190758d6fac873634feb7250ccf2f3034f399859f478716a96c8e + checksum: c06f684851892d3c71e4c8f38210a4b04e8e1f039d82a2bda728f3cc1414d059989c6ef91a5f6bf07e945ad61fd84a630c6e2ac72cba9493f138387396eda421 languageName: node linkType: hard