Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Snaps Issues resolved #1272

Merged
merged 2 commits into from
Oct 16, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 14 additions & 8 deletions src/components/MetamaskSnap/InstallMetamaskSnapModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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 = ({
Expand All @@ -40,6 +41,8 @@ const InstallMetamaskSnapModal = ({
)
}

const navigate = useNavigate();

return (
<ItemVV2 margin='30px 0 20px 0' gap='14px'>
<SnapContainer>
Expand All @@ -58,8 +61,11 @@ const InstallMetamaskSnapModal = ({
</SnapInner>
{
configure ? (
<InstallButton onClick={() => setSnapState(3)}>
Settings
<InstallButton onClick={() => {
setSnapState(3)
navigate('/snap')
}}>
Configure
</InstallButton>
) : (
<InstallButton onClick={() => setSnapState(2)}>
Expand Down Expand Up @@ -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`
Expand Down Expand Up @@ -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{
Expand All @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion src/config/NavigationList.js
Original file line number Diff line number Diff line change
Expand Up @@ -196,7 +196,7 @@ const NavigationList = {
name: 'Receive Notifications',
title: 'Receive Notifications',
alt: 'Receive Notifications',
href: '',
href: '#receive-notifications',
hasOnClickFunction:true,
newTab: false,
isRoute: true,
Expand Down
17 changes: 14 additions & 3 deletions src/modules/receiveNotifs/MetamaskPushSnapModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}
Expand All @@ -33,7 +44,7 @@ const MetamaskPushSnapModal = ({
<Container padding="20px 15px" >
<ItemHV2 justifyContent='space-between'>

{SnapState !== 1 && <Back width='24px' cursor='pointer' onClick={()=>setSnapState(1)}/>}
{SnapState !== 1 && <Back width='24px' cursor='pointer' onClick={() => setSnapState(1)} />}

{SnapState === 1 && <SpanV2
fontWeight="500"
Expand Down
44 changes: 24 additions & 20 deletions src/structure/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -131,25 +131,29 @@ function Header({ isDarkMode, darkModeToggle }) {
};

const isMobile = useDeviceWidthCheck(600);

const isSnapPage = location?.pathname === '/snap';

return (
<Container direction="row" padding="0px 15px">
<ItemH justify="flex-start" flex="0">
<RightBarContainer justify="flex-start" flex="0">
<RightBarDesktop justify="flex-start" flex="0">
<Logo src={!isDarkMode ? 'push.svg' : 'pushDark.svg'} />
<a href='/channels'>
<Logo src={!isDarkMode ? 'push.svg' : 'pushDark.svg'} />
</a>
</RightBarDesktop>

<LogoMobile justify="flex-start" flex="0">
<Logo src={!isDarkMode ? 'logo512.png' : 'logo512.png'} />
</LogoMobile>
</RightBarContainer>

{/* mobile navbar */}
{navigationSetup && showNavBar && isActive && !error && (
<NavMenuContainer ref={navRef} tabletAlign="flex-start">
<NavMenu>
<ChainIndicator isDarkMode={isDarkMode}/>
<ChainIndicator isDarkMode={isDarkMode} />
<Profile isDarkMode={isDarkMode} />

<NavMenuInner tabletAlign="flex-start">
Expand All @@ -161,13 +165,13 @@ function Header({ isDarkMode, darkModeToggle }) {
</ItemH>

<ItemH justify="flex-end">
{headerTag && isActive && !error && (
{headerTag && isActive && !error && !isSnapPage && (
<HeaderTag align="flex-start" overflow="hidden">
<Span
textTransform="capitalize"
spacing="-0.02em"
weight="normal"
padding={isMobile ? "8px 7px" : "8px 20px" }
padding={isMobile ? "8px 7px" : "8px 20px"}
className='text'
color={!isDarkMode ? headerTag.light.fg : headerTag.dark.fg}>
{headerTag.title}
Expand All @@ -186,26 +190,26 @@ function Header({ isDarkMode, darkModeToggle }) {
/>
)}

{isActive && !error && (
<RightBarMobile>
<Button
bg="transparent"
padding="5px"
radius="4px"
onClick={() => {
setShowNavBar(!showNavBar);
}}>
<AiOutlineMenu size={30} color={theme.headerIconsBg} />
</Button>
</RightBarMobile>
)}
{isActive && !error && (
<RightBarMobile>
<Button
bg="transparent"
padding="5px"
radius="4px"
onClick={() => {
setShowNavBar(!showNavBar);
}}>
<AiOutlineMenu size={30} color={theme.headerIconsBg} />
</Button>
</RightBarMobile>
)}

<ItemH justify="flex-end" flex="initial">
{!!error && <PrimaryTheme>{getErrorMessage(error)}</PrimaryTheme>}
{!isActive && !error && <ThirdTheme>Please connect to a Web3 Network</ThirdTheme>}
{isActive && !showLoginControls && !error && (
<RightBarDesktop justify="flex-end" flex="initial">
<ChainIndicator isDarkMode={isDarkMode}/>
<ChainIndicator isDarkMode={isDarkMode} />
<Profile isDarkMode={isDarkMode} />
</RightBarDesktop>
)}{' '}
Expand Down Expand Up @@ -246,7 +250,7 @@ const RightBarMobile = styled(ItemH)`
}
`;

const LogoMobile = styled(ItemH)`
const LogoMobile = styled(ItemH)`
@media (min-width: 993px) {
display: none;
}
Expand Down
11 changes: 10 additions & 1 deletion src/structure/MasterInterfacePage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,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 (
<Container>
Expand Down Expand Up @@ -132,10 +140,11 @@ function MasterInterfacePage() {
draggable
/>

{/* Modal displaying ReceiveNotifications */}
<MetamaskPushSnapModalComponent
id='receive-notifications'
InnerComponent={MetamaskPushSnapModal}
modalPadding='0px'
// InnerComponentProps={}
modalPosition={MODAL_POSITION.ON_ROOT}
/>

Expand Down
20 changes: 20 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -5625,9 +5625,15 @@ __metadata:
languageName: node
linkType: hard

<<<<<<< HEAD
"@pushprotocol/restapi@npm:1.4.21":
version: 1.4.21
resolution: "@pushprotocol/restapi@npm:1.4.21"
=======
"@pushprotocol/restapi@npm:0.0.1-alpha.49":
version: 0.0.1-alpha.49
resolution: "@pushprotocol/restapi@npm:0.0.1-alpha.49"
>>>>>>> main
dependencies:
"@ambire/signature-validator": ^1.3.1
"@metamask/eth-sig-util": ^5.0.2
Expand All @@ -5648,7 +5654,11 @@ __metadata:
viem: ^1.3.0
peerDependencies:
ethers: ^5.6.8
<<<<<<< HEAD
checksum: e466b817bf19087d8b7bac25ac60354ad804fd964c668eac547d012d1a52cfe9ded2ffb74b67bb8c0ac40bb148410aa8c8b1269fcb7efb9a83bd211f84e1184c
=======
checksum: 835229af4889c88573593ee19c97e9a73d3e67e70003ddcdd6ad16f65fe0bde1fd2f08adc6cb3fdb583cf8ef8746edd100fb20aada1578bb1a16f85ab6ab5ca5
>>>>>>> main
languageName: node
linkType: hard

Expand Down Expand Up @@ -5688,9 +5698,15 @@ __metadata:
languageName: node
linkType: hard

<<<<<<< HEAD
"@pushprotocol/uiweb@npm:1.1.14":
version: 1.1.14
resolution: "@pushprotocol/uiweb@npm:1.1.14"
=======
"@pushprotocol/uiweb@npm:0.0.1-alpha.20":
version: 0.0.1-alpha.20
resolution: "@pushprotocol/uiweb@npm:0.0.1-alpha.20"
>>>>>>> main
dependencies:
"@livekit/components-react": ^1.2.2
"@livekit/components-styles": ^1.0.6
Expand Down Expand Up @@ -5721,7 +5737,11 @@ __metadata:
axios: ^0.27.2
react: ">=16.8.0"
styled-components: ^5.3.5
<<<<<<< HEAD
checksum: c06f684851892d3c71e4c8f38210a4b04e8e1f039d82a2bda728f3cc1414d059989c6ef91a5f6bf07e945ad61fd84a630c6e2ac72cba9493f138387396eda421
=======
checksum: 1845fc427cca2ac9cafe92de9c16af4aa6d94312f391032afee8ffc9d6efdfb5c9fa3cfe085eec1d6a20d4d423b461db5537c331ef03f0844d8abd6e90bd5e7a
>>>>>>> main
languageName: node
linkType: hard

Expand Down