Skip to content

Commit

Permalink
Merge pull request #183 from SnickerdoodleLabs/feature/accountDetails…
Browse files Browse the repository at this point in the history 
…Fixes

AccountDetails select chain feature and NFT card
  • Loading branch information
@TtheBC01
TtheBC01 authored Aug 14, 2022
2 parents 43441f2 + 01efb9f commit ff6dec3
Show file tree
Hide file tree
Showing 5 changed files with 119 additions and 33 deletions.
Binary file added packages/extension-onboarding/src/assets/images/polygon-circle.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
19 changes: 17 additions & 2 deletions packages/extension-onboarding/src/components/NFTItem/NFTItem.style.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,21 @@
import { makeStyles } from "@material-ui/core/styles";

export const useStyles = makeStyles((theme) => ({


card: {
borderRadius: 8,
border: "1px solid #ECECEC",
padding: 0,
},
nftName: {
fontFamily: "Space Grotesk",
fontWeight: 600,
fontSize: 14,
color: "rgba(35, 32, 57, 0.87)",
},
nftTokenId: {
fontFamily: "Space Grotesk",
fontWeight: 600,
fontSize: 14,
color: "rgba(93, 90, 116, 0.8)",
},
}));
23 changes: 17 additions & 6 deletions packages/extension-onboarding/src/components/NFTItem/NFTItem.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { IEVMNFT } from "@snickerdoodlelabs/objects";
import { useStyles } from "@extension-onboarding/components/BalanceItem/BalanceItem.style";
import { Box } from "@material-ui/core";
import { useStyles } from "@extension-onboarding/components/NFTItem/NFTItem.style";
import { Box, Grid, Typography } from "@material-ui/core";
import React, { FC, useMemo } from "react";

export interface INFTItemProps {
Expand Down Expand Up @@ -29,15 +29,26 @@ const NFTItem: FC<INFTItemProps> = ({ item }: INFTItemProps) => {
return (
<>
{nftImages?.length ? (
<Box display="flex" justifyContent="space-between" mt={2}>
<Grid item className={classes.card}>
<Box>
<img
width={175}
height={175}
width={165}
height={165}
style={{ borderRadius: "8px 8px 0px 0px" }}
src={nftImages[0].replace("ipfs://", "https://ipfs.io/ipfs/")}
/>
<Box height={68} mt={-0.5} bgcolor="rgba(253, 243, 225, 0.6)">
<Box p={2}>
<Typography className={classes.nftName}>
{item?.name}
</Typography>
<Typography className={classes.nftTokenId}>
Token ID: {item?.tokenId}
</Typography>
</Box>
</Box>
</Box>
</Box>
</Grid>
) : null}
</>
);
Expand Down
12 changes: 8 additions & 4 deletions .../extension-onboarding/src/pages/Onboarding/ViewAccountDetails/ViewAccountDetails.style.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export const useStyles = makeStyles((theme) => ({
border: "1px solid #ECECEC",
},
cardBackground2: {
background: "rgba(253, 243, 225, 0.5)",
background: "rgba(185, 182, 211, 0.2)",
border: "1px solid #ECECEC",
},
cardTokenText: {
Expand All @@ -58,7 +58,7 @@ export const useStyles = makeStyles((theme) => ({
background: "none",
},
selectChain: {
width: 220,
width: 240,
height: 55,
border: "1px solid #D9D9D9",
borderRadius: 8,
Expand All @@ -70,7 +70,7 @@ export const useStyles = makeStyles((theme) => ({

accountAddressText: {
paddingLeft: "4px",
paddingTop: "10px",
paddingTop: "7px",
fontFamily: "'Space Grotesk', sans-serif",
fontWeight: 500,
fontSize: "16px",
Expand All @@ -87,5 +87,9 @@ export const useStyles = makeStyles((theme) => ({
fontSize: 22,
fontWeight: 700,
},

nftContainer: {
display: "flex",
marginTop: "16px",
gap: 10,
},
}));
98 changes: 77 additions & 21 deletions packages/extension-onboarding/src/pages/Onboarding/ViewAccountDetails/ViewAccountDetails.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import {
Box,
CircularProgress,
Grid,
MenuItem,
Select,
Typography,
Expand All @@ -11,6 +12,8 @@ import { useAppContext } from "@extension-onboarding/context/App";
import { useStyles } from "@extension-onboarding/pages/Onboarding/ViewAccountDetails/ViewAccountDetails.style";
import coinbaseSmall from "@extension-onboarding/assets/icons/coinbaseSmall.svg";
import ethereumCircle from "@extension-onboarding/assets/icons/ethereum-circle.svg";
import avaxCircle from "@extension-onboarding/assets/images/avax-circle.png";
import polygonCircle from "@extension-onboarding/assets/images/polygon-circle.png";
import metamaskLogo from "@extension-onboarding/assets/icons/metamaskSmall.svg";
import {
EVMAccountAddress,
Expand Down Expand Up @@ -51,7 +54,7 @@ const ViewAccountDetails: FC = () => {
const [accountSelect, setAccountSelect] = useState<EVMAccountAddress>(
viewDetailsAccountAddress ?? linkedAccounts[0].accountAddress,
);
const [chainSelect, setChainSelect] = useState("ETH");
const [chainSelect, setChainSelect] = useState("1");

useEffect(() => {
initiliaze();
Expand Down Expand Up @@ -154,13 +157,63 @@ const ViewAccountDetails: FC = () => {
value={chainSelect}
onChange={handleChainChange}
>
<MenuItem value="ETH">
<MenuItem value="1">
<Box display="flex">
<Box>
<img width={40} height={40} src={ethereumCircle} />
<img width={35} height={35} src={ethereumCircle} />
</Box>
<Typography className={classes.accountAddressText}>
Ethereum
Ethereum Mainnet
</Typography>
</Box>
</MenuItem>
<MenuItem value="42">
<Box display="flex">
<Box>
<img width={35} height={35} src={ethereumCircle} />
</Box>
<Typography className={classes.accountAddressText}>
Ethereum Kovan
</Typography>
</Box>
</MenuItem>
<MenuItem value="43113">
<Box display="flex">
<Box>
<img width={35} height={35} src={avaxCircle} />
</Box>
<Typography className={classes.accountAddressText}>
Avalanche Fuji
</Typography>
</Box>
</MenuItem>
<MenuItem value="43114">
<Box display="flex">
<Box>
<img width={35} height={35} src={avaxCircle} />
</Box>
<Typography className={classes.accountAddressText}>
Avalanche Mainnet
</Typography>
</Box>
</MenuItem>
<MenuItem value="137">
<Box display="flex">
<Box>
<img width={35} height={35} src={polygonCircle} />
</Box>
<Typography className={classes.accountAddressText}>
Polygon Mainnet
</Typography>
</Box>
</MenuItem>
<MenuItem value="80001">
<Box display="flex">
<Box>
<img width={35} height={35} src={polygonCircle} />
</Box>
<Typography className={classes.accountAddressText}>
Polygon Mumbai
</Typography>
</Box>
</MenuItem>
Expand Down Expand Up @@ -245,7 +298,7 @@ const ViewAccountDetails: FC = () => {
width={580}
height={536}
borderRadius={8}
style={{ border: "1px solid #ECECEC" }}
border="1px solid #ECECEC"
>
<Box m={3}>
<Typography className={classes.tokenText}>Your Tokens</Typography>
Expand All @@ -260,13 +313,17 @@ const ViewAccountDetails: FC = () => {
</Box>
) : (
accountBalances?.[accountSelect].map((balanceItem, index) => {
return (
<BalanceItem
key={index}
item={balanceItem}
currency={currencies[balanceItem.ticker] ?? 1}
/>
);
if (balanceItem.chainId.toString() === chainSelect) {
return (
<BalanceItem
key={index}
item={balanceItem}
currency={currencies[balanceItem.ticker] ?? 1}
/>
);
} else {
return null;
}
})
)}
</Box>
Expand All @@ -278,20 +335,19 @@ const ViewAccountDetails: FC = () => {
height="100%"
borderRadius={8}
ml={5}
style={{ border: "1px solid #ECECEC" }}
border="1px solid #ECECEC"
>
<Box m={3}>
<Typography className={classes.tokenText}>Your NFTs</Typography>
<Box
display="flex"
justifyContent="space-between"
flexWrap="wrap"
mt={2}
>
<Grid container className={classes.nftContainer}>
{accountNFTs?.[accountSelect]?.map((nftItem, index) => {
return <NFTItem key={index} item={nftItem} />;
if (nftItem.chain.toString() === chainSelect) {
return <NFTItem key={index} item={nftItem} />;
} else {
return null;
}
})}
</Box>
</Grid>
</Box>
</Box>
</Box>
Expand Down

0 comments on commit ff6dec3

Please sign in to comment.