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.

Sign up for GitHub

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

Push snap qa fixes #1261

Merged
merged 9 commits into from
Oct 3, 2023
Merged

Push snap qa fixes #1261

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
e55bcfc
Snap UI fixes from QA-1
abhishek-01k Sep 20, 2023
a621e96
fix: connected snap address detection
Arch0125 Sep 20, 2023
c69ca01
fix: snooze toggle
Arch0125 Sep 20, 2023
875d63b
fix: address detection bug
Arch0125 Sep 20, 2023
5838bbf
fix: spacing in signature
Arch0125 Sep 20, 2023
7bade47
update: route bug
Arch0125 Sep 21, 2023
8611bfa
Snap Dark mode fix and responsiveness added
abhishek-01k Sep 27, 2023
43f950e
Merge branch 'main' into push-snap-qa-fixes
abhishek-01k Sep 27, 2023
22fb0bf
Added dark mode to Snap QA
abhishek-01k Oct 3, 2023
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
2 changes: 1 addition & 1 deletion src/modules/receiveNotifs/MetamaskPushSnapModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import InstallMetamaskSnapModal from 'components/MetamaskSnap/InstallMetamaskSna
import SnapInformationModal from 'components/MetamaskSnap/SnapInformationModal';
import MetamaskSnapConfigureModal from 'components/MetamaskSnap/MetamaskSnapConfigureModal';
import { AppContext } from 'contexts/AppContext';

import GLOBALS, { device, globalsMargin } from "config/Globals";

const MetamaskPushSnapModal = ({
onClose
Expand Down
12 changes: 7 additions & 5 deletions src/modules/snap/AboutSnapModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
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';
import styled, { useTheme } from 'styled-components';


const AboutSnapModal = ({
onClose
}) => {

const theme = useTheme();

const InfoDetails = [
{
title: 'Step 1',
Expand Down Expand Up @@ -40,13 +42,13 @@ const AboutSnapModal = ({
<ItemVV2 gap='24px'>

<ItemVV2>
<H2V2 fontSize='22px' fontWeight='500' letterSpacing='-0.44px'>Installing Push Snap</H2V2>
<H2V2 fontSize='22px' fontWeight='500' letterSpacing='-0.44px' color={theme.modalMessageColor}>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>
<H2V2 fontSize='18px' fontWeight='500' color={theme.modalMessageColor}>{detail.title}</H2V2>
<SpanV2 textAlign='left' fontSize='16px' fontWeight='400' color={theme.snapSecondaryText}>{detail.info}</SpanV2>
</ItemVV2>
))}

Expand All @@ -64,6 +66,6 @@ const Container = styled(ItemVV2)`
width: 375px;
padding: 32px 24px;
border-radius: 16px;
background: #FFF;
align-items: end;
background: ${(props) => props.theme.default.bg};
`
57 changes: 46 additions & 11 deletions src/modules/snap/SnapModule.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ const SnapModule = () => {
useEffect(() => {
getInstalledSnaps();
getWalletAddresses();
},[account,walletConnected]);
}, [account, walletConnected]);

async function getInstalledSnaps() {
const installedSnaps = await window.ethereum.request({
Expand Down Expand Up @@ -66,7 +66,7 @@ const SnapModule = () => {
console.log(walletConnected);
if (result.includes(account)) {
setAddedAddress(true);
}else{
} else {
setAddedAddress(false);
}
}
Expand All @@ -82,10 +82,9 @@ const SnapModule = () => {
});
console.log('Snap Installed');
}

async function connectToMetaMask() {
setLoading(true);

try {
if (!snapInstalled) {
await connectSnap();
Expand Down Expand Up @@ -141,6 +140,8 @@ const SnapModule = () => {
showMetamaskPushSnap();
};

const theme = useTheme();

return (
<Container>
<AboutPushSnapModalComponent
Expand Down Expand Up @@ -171,7 +172,7 @@ const SnapModule = () => {
<H2V2
fontSize="34px"
fontWeight="500"
color="#1E1E1E"
color={theme.modalMessageColor}
letterSpacing="-1.02px"
>
Push Snap
Expand All @@ -191,14 +192,14 @@ const SnapModule = () => {
<SpanV2
fontSize="14px"
fontWeight="400"
color="#000"
color={theme.snapSecondaryText}
>
Get started by opting in to channels on Push.{' '}
</SpanV2>
<SpanV2
fontSize="14px"
fontWeight="400"
color="#000"
color={theme.snapSecondaryText}
>
Once you opt-in you will receive notifications on MetaMask.
</SpanV2>
Expand All @@ -207,7 +208,7 @@ const SnapModule = () => {
<SpanV2
fontSize="14px"
fontWeight="400"
color="#000"
color={theme.snapSecondaryText}
>
You’re about to install Push Snap which allows you to receive notifications from Push directly on
MetaMask!
Expand Down Expand Up @@ -247,7 +248,8 @@ const SnapModule = () => {
)}

{walletConnected || addedAddress ? (
<ItemHV2 gap="12px">
<ButtonContainer gap="12px" >

<SettingsButton onClick={handleSettingsClick}>
<Gear
height="20px"
Expand All @@ -256,7 +258,7 @@ const SnapModule = () => {
Settings
</SettingsButton>
<FilledButton onClick={() => (window.location.href = '/channels')}>Get Started</FilledButton>
</ItemHV2>
</ButtonContainer>
) : (
<InfoDiv
gap="7px"
Expand Down Expand Up @@ -298,6 +300,17 @@ const Container = styled(Section)`
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)`
Expand All @@ -306,8 +319,12 @@ const SubContainer = styled(Section)`
padding: 48px 24px;
border-radius: 32px;
background: #fff;
background: ${(props) => props.theme.default.bg};
box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.05);
margin: 24px auto;
@media ${device.mobileL} {
width: 330px;
}
`;

const SnapButton = styled(ButtonV2)`
Expand All @@ -328,13 +345,19 @@ const SnapButton = styled(ButtonV2)`
@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)`
Expand All @@ -346,16 +369,28 @@ const SettingsButton = styled(SnapButton)`
border: 1px solid #bac4d6;
background: ${(props) => props.theme.default.bg};
gap: 4px;

@media ${device.mobileL} {
min-width: 246px;
}
`;

const FilledButton = styled(SnapButton)`
width: 135px;
padding: 16px 24px;
background: #d53a94;

@media ${device.mobileL} {
min-width: 246px;
}
`;

const InfoDiv = styled(ItemHV2)`
cursor: pointer;
`;

const ButtonContainer = styled(ItemHV2)``;
const ButtonContainer = styled(ItemHV2)`
@media ${device.mobileL} {
flex-direction:column;
}
`;