Skip to content

Commit

Permalink
Configure Snap Addresses UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@abhishek-01k
abhishek-01k committed Sep 19, 2023
1 parent 1a917a3 commit dfad7d4
Show file tree
Hide file tree
Showing 2 changed files with 154 additions and 38 deletions.
185 changes: 147 additions & 38 deletions src/components/MetamaskSnap/MetamaskSnapConfigureModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,23 @@ import { ItemHV2, ItemVV2, SpanV2 } from 'components/reusables/SharedStylingV2';
import { device } from 'config/Globals';
import { shortenText } from 'helpers/UtilityHelper';
import React, { useState } from 'react';
import styled from 'styled-components';
import styled, { useTheme } from 'styled-components';
import { ReactComponent as MoreLight } from 'assets/chat/group-chat/more.svg';
import { ReactComponent as MoreDark } from 'assets/chat/group-chat/moredark.svg';
import { ReactComponent as RestrictIcon } from 'assets/PushSnaps/MinusCircle.svg';
import { ReactComponent as MinusCircle } from 'assets/PushSnaps/MinusCircle.svg';
import Switch from 'react-switch';
import { useClickAway } from 'react-use';
import { useWeb3React } from '@web3-react/core';
import Tooltip from 'components/reusables/tooltip/Tooltip';
import InfoImage from "assets/info.svg";
import { AiOutlineMore } from 'react-icons/ai';

const MetamaskSnapConfigureModal = () => {
const [walletAddresses, setWalletAddresses] = useState([]);
const [searchedUser, setSearchedUser] = useState('');
const [showRemove, setShowRemove] = useState();
const theme = useTheme();

const defaultSnapOrigin = 'npm:push-v1';

Expand All @@ -30,7 +33,7 @@ const MetamaskSnapConfigureModal = () => {
}
if (mode == 2) {
const signer = provider.getSigner(account);
const signature = await signer.signMessage(`Remove address ${account }to stop receive notifications via Push Snap in MetaMask`);
const signature = await signer.signMessage(`Remove address ${account}to stop receive notifications via Push Snap in MetaMask`);
return signature;
}
}
Expand Down Expand Up @@ -104,21 +107,49 @@ const MetamaskSnapConfigureModal = () => {
const containerRef = React.useRef(null);
useClickAway(containerRef, () => {
console.log('Set show to be null');
setWalletSelected(null);
setShowRemove(null);
});


const [addresses, setAddresses] = useState([]);
const addAddresses = () => {
console.log('Searched User', searchedUser);
if (searchedUser) {
setAddresses((prev) => [...prev, searchedUser])
}
}
const [walletSelected, setWalletSelected] = useState();

const wallets = [
'0x6D2a0194bD791CADd7a3F5c9464cE9fC24a49e71',
'0x6D2a0194bD791CADd7a3F5c9464cE9fC24a49e71',
'0x6D2a0194bD791CADd7a3F5c9464cE9fC24a49e71',
'0x6D2a0194bD791CADd7a3F5c9464cE9fC24a49e71',
'0x6D2a0194bD791CADd7a3F5c9464cE9fC24a49e71',
'0x6D2a0194bD791CADd7a3F5c9464cE9fC24a49e71',
'0x6D2a0194bD791CADd7a3F5c9464cE9fC24a49e71',
'0x6D2a0194bD791CADd7a3F5c9464cE9fC24a49e71'
]

const handleWalletSelect = (address) => {
setWalletSelected(address);
}

return (
<Container>
<Container >
<SpanV2
fontSize="22px"
fontWeight="500"
color={theme.modalMessageColor}
>
Settings
</SpanV2>

<ItemVV2
alignItems="baseline"
margin="24px 0 0 0"
padding='0 9px 0 0'
>
<PrimaryText>Notification Address</PrimaryText>
<SecondaryText>Add or remove wallet address to receive notifications</SecondaryText>
Expand All @@ -129,28 +160,49 @@ const MetamaskSnapConfigureModal = () => {
setSearchedUser(e.target.value);
}}
placeholder="0x123 .... 4567"
// color={theme.modalPrimaryTextColor}
/>
<ItemHV2
margin="14px 0 0 0"
justifyContent="end"
gap="5px"
>
<AddButton onClick={addWalletAddresses}>Add</AddButton>
<AddButton
// onClick={addWalletAddresses}
onClick={addAddresses}
>Add</AddButton>
<AddButton onClick={getWalletAddresses}>Get Addresses</AddButton>
</ItemHV2>
</ItemVV2>



<AddressesContainer ref={containerRef}>
{addresses?.map((wallet) => (
<AddressesSubContainer>
<SpanV2 fontSize='15px' fontWeight='500' color={walletSelected === wallet ? '#D53A94' : theme.default.color}>{shortenText(wallet, 8)}</SpanV2>
<MoreOptions onClick={() => handleWalletSelect(wallet)} color={theme.default.color}/>

{walletSelected === wallet && <RemoveDiv >
<MinusCircle />
<SpanV2 fontSize='16px' fontWeight='400' color='#657795'>Remove</SpanV2>
</RemoveDiv>
}
</AddressesSubContainer>
))}
</AddressesContainer>


<ItemVV2
alignItems="flex-start"
margin="24px 0 0 0"

>
<ItemHV2 justifyContent='flex-start'>
<PrimaryText>
Snooze Notifications
</PrimaryText>

<InfoToolTip/>
<InfoToolTip />
</ItemHV2>

<SecondaryText>Toggle notification pop-ups on or off</SecondaryText>
Expand All @@ -173,6 +225,7 @@ const MetamaskSnapConfigureModal = () => {
<SpanV2
fontSize="18px"
fontWeight="500"
color={theme.modalMessageColor}
>
{checked ? 'On' : 'Off'}
</SpanV2>
Expand All @@ -184,40 +237,40 @@ const MetamaskSnapConfigureModal = () => {

export default MetamaskSnapConfigureModal;

const InfoToolTip = () =>{
const InfoToolTip = () => {


return(
return (
<Tooltip
wrapperProps={{
width: 'fit-content',
maxWidth: 'fit-content',
minWidth: 'fit-content',
// zIndex: "10",
}}
placementProps={{
background: 'none',
bottom: "20px",
// top: '20px',
// right: "-175px",
left: '5px',
}}
tooltipContent={
<ToolTipContainer>
<ToolTipText>Toggle popups in case of frequent incoming notifications</ToolTipText>
</ToolTipContainer>
}
>
<ItemVV2 margin='0 0 0 5px'>
<ImageInfo src={InfoImage} />
</ItemVV2>
</Tooltip>
wrapperProps={{
width: 'fit-content',
maxWidth: 'fit-content',
minWidth: 'fit-content',
// zIndex: "10",
}}
placementProps={{
background: 'none',
bottom: "20px",
// top: '20px',
// right: "-175px",
left: '5px',
}}
tooltipContent={
<ToolTipContainer>
<ToolTipText>Toggle popups in case of frequent incoming notifications</ToolTipText>
</ToolTipContainer>
}
>
<ItemVV2 margin='0 0 0 5px'>
<ImageInfo src={InfoImage} />
</ItemVV2>
</Tooltip>

)
}

const Container = styled(ItemVV2)`
padding: 0px 9px 12px 9px;
padding: 0px 0px 12px 9px;
`;

const ToolTipContainer = styled(ItemVV2)`
Expand Down Expand Up @@ -245,15 +298,16 @@ const PrimaryText = styled.p`
font-size: 18px;
font-weight: 500;
align-self: baseline;
color:${(props)=>props.theme.modalMessageColor};
`;

const SecondaryText = styled.p`
margin: 0px;
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: #62626a;
text-align: left;
color:${(props)=>props.theme.snapSecondaryText};
`;

const ToolTipText = styled.p`
Expand All @@ -262,7 +316,7 @@ const ToolTipText = styled.p`
font-weight: 400;
line-height: 24px;
color: #62626a;
color: ${(props)=>props.theme.modalMessageColor};
color: ${(props) => props.theme.modalMessageColor};
text-align: left;
`

Expand Down Expand Up @@ -300,24 +354,79 @@ const Input = styled.input`
height: 48px;
padding: 13px 16px;
margin: 10px 0px 0px;
// border: 1px solid;
// border-color: ${(props) => props.theme.modalSearchBarBorderColor};
background: ${(props) => props.theme.modalSearchBarBackground};
border-radius: 12px;
border: 1px solid #bac4d6;
color: ${(props) => props.color || '#000'};
color: ${(props) => props.theme.default.secondaryColor || '#000'};
&:focus {
outline: none;
background-origin: border;
border: 1px solid #bac4d6 !important;
background-clip: padding-box, border-box;
}
&::placeholder {
color: #657795;
color: ${(props) => props.theme.default.secondaryColor || '#000'};
}
@media ${device.mobileL} {
min-width: 300px;
}
`;

const AddressesContainer = styled.div`
display:flex;
flex-direction:column;
width: -webkit-fill-available;
overflow-y: scroll;
gap: 8px;
margin:8px 0 0 0;
max-height: 250px;
flex-wrap: nowrap;
padding:5px 5px 5px 0;
&::-webkit-scrollbar-track {
border-radius: 10px;
}
&::-webkit-scrollbar {
width: 5px;
}
&::-webkit-scrollbar-thumb {
border-radius: 10px;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.44, #cf1c84),
color-stop(0.72, #cf1c84),
color-stop(0.86, #cf1c84)
);
}
`

const AddressesSubContainer = styled(ItemHV2)`
max-height: 42px;
padding: 13px 16px;
border-radius: 12px;
background: ${(props)=>props.theme.snapBackground};
justify-content: space-between;
`

const MoreOptions = styled(AiOutlineMore)`
width:24px;
height:24px;
`

const RemoveDiv = styled(ItemHV2)`
border-radius: 12px;
border: 1px solid #BAC4D6;
background: #FFF;
box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.05);
padding: 8px 12px 8px 8px;
align-items: center;
gap: 9px;
position: absolute;
right: 0;
top: 3px;
`
7 changes: 7 additions & 0 deletions src/config/Themization.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -263,6 +263,9 @@ const themeLight = {

snapUIBackground:'#F9F9F9',
snapButtonBackground:'#1E1E1E',
snapPrimaryText:'',
snapSecondaryText:'#62626a',
snapBackground:'#F2F2F2',

};

Expand Down Expand Up @@ -535,6 +538,10 @@ const themeDark = {

snapUIBackground:'transparent',
snapButtonBackground:'#404650',
snapPrimaryText:'',
snapSecondaryText:'#787E99',
snapBackground:'#404650',

};

module.exports = {
Expand Down

0 comments on commit dfad7d4

Please sign in to comment.