From 10105305e3d3d3ed8775f244038c6b1c8808dea3 Mon Sep 17 00:00:00 2001 From: samepant Date: Fri, 19 Jan 2024 13:33:56 -0500 Subject: [PATCH] update nftItem component --- .../src/components/NFTGrid/NFTGrid.module.css | 10 +++++++ frontend/src/components/NFTGrid/index.tsx | 8 +++++ .../src/components/NFTItem/NFTItem.module.css | 9 ++++-- frontend/src/components/NFTItem/index.tsx | 29 +++++++++---------- frontend/src/hooks/useCollection.ts | 3 +- frontend/src/hooks/useDeployMech.tsx | 1 + frontend/src/routes/Mech/Mech.module.css | 4 +-- frontend/src/utils/shortenAddress.ts | 12 ++++---- 8 files changed, 47 insertions(+), 29 deletions(-) diff --git a/frontend/src/components/NFTGrid/NFTGrid.module.css b/frontend/src/components/NFTGrid/NFTGrid.module.css index df33d9c..f12c8a4 100644 --- a/frontend/src/components/NFTGrid/NFTGrid.module.css +++ b/frontend/src/components/NFTGrid/NFTGrid.module.css @@ -31,3 +31,13 @@ border-radius: 10px; width: fit-content; } + +.noNfts { + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; + background: var(--box-bg); + padding: 20px; + font-size: 12px; +} diff --git a/frontend/src/components/NFTGrid/index.tsx b/frontend/src/components/NFTGrid/index.tsx index 53a077c..08c3868 100644 --- a/frontend/src/components/NFTGrid/index.tsx +++ b/frontend/src/components/NFTGrid/index.tsx @@ -37,6 +37,14 @@ export const AccountNftGrid: React.FC = ({ address }) => { if (isLoading) return + if (nfts.length === 0) { + return ( +
+

No NFTs found

+
+ ) + } + return (
    {nfts.map((nft, index) => ( diff --git a/frontend/src/components/NFTItem/NFTItem.module.css b/frontend/src/components/NFTItem/NFTItem.module.css index bb969b3..7287245 100644 --- a/frontend/src/components/NFTItem/NFTItem.module.css +++ b/frontend/src/components/NFTItem/NFTItem.module.css @@ -84,10 +84,11 @@ } .itemContainer label { - border: 2px solid var(--button-border); + background: var(--box-bg); border-radius: 7px; padding: 5px 10px; width: fit-content; + font-size: 12px; } .info .infoItem { @@ -100,6 +101,7 @@ padding: 5px 7px; box-shadow: 1px 1px 4px 0px rgba(157, 212, 0, 0.2); font-family: monospace; + font-size: 12px; } .info li { @@ -113,8 +115,8 @@ } .indicator { - width: 15px; - height: 15px; + width: 10px; + height: 10px; border-radius: 50%; filter: blur(4px); background-color: rgb(189 192 179); @@ -172,6 +174,7 @@ .asset { display: flex; justify-content: space-between; + font-size: 12px; } .asset .value { diff --git a/frontend/src/components/NFTItem/index.tsx b/frontend/src/components/NFTItem/index.tsx index 34b37ae..45b8c41 100644 --- a/frontend/src/components/NFTItem/index.tsx +++ b/frontend/src/components/NFTItem/index.tsx @@ -12,6 +12,7 @@ import { calculateMechAddress } from "../../utils/calculateMechAddress" import { formatUnits } from "viem" import { MoralisNFT } from "../../types/Token" import { getNFTContext } from "../../utils/getNFTContext" +import { AccountNftGrid } from "../NFTGrid" interface Props { nft: MoralisNFT @@ -33,10 +34,10 @@ const NFTItem: React.FC = ({ nft, chainId }) => { chainId, }) - console.log(data) const mechBalances = data ? [data.native, ...data.erc20s] : [] const { deployed } = useDeployMech(getNFTContext(nft), chainId) - const name = nft.name || nft.metadata?.name || "..." + const metadata = JSON.parse(nft.metadata || "{}") + const name = nft.name || metadata?.name || "..." return (
    @@ -47,13 +48,13 @@ const NFTItem: React.FC = ({ nft, chainId }) => {

    - {(imageError || !nft.metadata?.image) && ( + {(imageError || !metadata?.image) && (
    )} - {!imageError && nft.metadata?.image && ( + {!imageError && metadata?.image && (
    {name} setImageError(true)} @@ -81,7 +82,7 @@ const NFTItem: React.FC = ({ nft, chainId }) => { onClick={() => copy(mechAddress)} title={mechAddress} > - {shortenAddress(mechAddress)} + {shortenAddress(mechAddress, 6)}
  • @@ -96,21 +97,15 @@ const NFTItem: React.FC = ({ nft, chainId }) => { title={operatorAddress} >
    - {operatorAddress ? shortenAddress(operatorAddress) : "\u2014"} + {operatorAddress + ? shortenAddress(operatorAddress, 6) + : "\u2014"}
    • - {/*
  • - -
    - {assetsError || !assetsData - ? "n/a" - : `$ ${assetsData.totalBalanceUSD}`} -
    -
    • */}
- +
= ({ nft, chainId }) => { ))}
+ + ) } diff --git a/frontend/src/hooks/useCollection.ts b/frontend/src/hooks/useCollection.ts index d1dd6cf..840e26c 100644 --- a/frontend/src/hooks/useCollection.ts +++ b/frontend/src/hooks/useCollection.ts @@ -4,13 +4,14 @@ import { MoralisApiListResponse, MoralisNFT } from "../types/Token" interface Props { tokenAddress: string chainId: number + page?: number } if (!process.env.REACT_APP_PROXY_URL) { throw new Error("REACT_APP_PROXY_URL not set") } -const useCollection = ({ tokenAddress, chainId }: Props) => { +const useCollection = ({ tokenAddress, chainId, page = 0 }: Props) => { return useQuery({ queryKey: ["collection", chainId, tokenAddress], queryFn: async () => { diff --git a/frontend/src/hooks/useDeployMech.tsx b/frontend/src/hooks/useDeployMech.tsx index 5e92db4..b9f2ef8 100644 --- a/frontend/src/hooks/useDeployMech.tsx +++ b/frontend/src/hooks/useDeployMech.tsx @@ -81,6 +81,7 @@ export const useDeployedMechs = (nfts: NFTContext[], chainId: number) => { }, ]) .catch((e) => { + console.error(e) /* when switching networks, this might throw an error (`Missing queryFn for queryKey`) */ }) }) diff --git a/frontend/src/routes/Mech/Mech.module.css b/frontend/src/routes/Mech/Mech.module.css index feda08f..b9f8d74 100644 --- a/frontend/src/routes/Mech/Mech.module.css +++ b/frontend/src/routes/Mech/Mech.module.css @@ -3,9 +3,7 @@ align-items: flex-start; justify-content: center; gap: 50px; - width: 72%; - max-width: 2000px; - margin: 0 auto; + width: 100%; } /* @media (max-width: 800px) { diff --git a/frontend/src/utils/shortenAddress.ts b/frontend/src/utils/shortenAddress.ts index 7b3a627..090bd65 100644 --- a/frontend/src/utils/shortenAddress.ts +++ b/frontend/src/utils/shortenAddress.ts @@ -1,11 +1,11 @@ import { validateAddress } from "./addressValidation" -const VISIBLE_END = 4 -const VISIBLE_START = 4 - -export const shortenAddress = (address: string): string => { +export const shortenAddress = ( + address: string, + visibleDigits: number = 4 +): string => { const checksumAddress = validateAddress(address) - const start = checksumAddress.substring(0, VISIBLE_START + 2) - const end = checksumAddress.substring(42 - VISIBLE_END, 42) + const start = checksumAddress.substring(0, visibleDigits + 2) + const end = checksumAddress.substring(42 - visibleDigits, 42) return `${start}...${end}` }