update nftItem component

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;
+}

frontend/src/components/NFTGrid/index.tsx

@@ -37,6 +37,14 @@ export const AccountNftGrid: React.FC<Props> = ({ address }) => {
 
   if (isLoading) return <Spinner />
 
+  if (nfts.length === 0) {
+    return (
+      <div className={classes.noNfts}>
+        <p>No NFTs found</p>
+      </div>
+    )
+  }
+
   return (
     <ul className={classes.grid}>
       {nfts.map((nft, index) => (

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 {

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<Props> = ({ 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 (
     <div className={classes.itemContainer}>
       <div className={classes.header}>
@@ -47,13 +48,13 @@ const NFTItem: React.FC<Props> = ({ nft, chainId }) => {
         </p>
       </div>
       <div className={classes.main}>
-        {(imageError || !nft.metadata?.image) && (
+        {(imageError || !metadata?.image) && (
           <div className={classes.noImage}></div>
         )}
-        {!imageError && nft.metadata?.image && (
+        {!imageError && metadata?.image && (
           <div className={classes.imageContainer}>
             <img
-              src={nft.metadata?.image}
+              src={metadata?.image}
               alt={name}
               className={classes.image}
               onError={() => setImageError(true)}
@@ -81,7 +82,7 @@ const NFTItem: React.FC<Props> = ({ nft, chainId }) => {
               onClick={() => copy(mechAddress)}
               title={mechAddress}
             >
-              {shortenAddress(mechAddress)}
+              {shortenAddress(mechAddress, 6)}
             </div>
           </li>
           <li>
@@ -96,21 +97,15 @@ const NFTItem: React.FC<Props> = ({ nft, chainId }) => {
               title={operatorAddress}
             >
               <div className={classes.ellipsis}>
-                {operatorAddress ? shortenAddress(operatorAddress) : "\u2014"}
+                {operatorAddress
+                  ? shortenAddress(operatorAddress, 6)
+                  : "\u2014"}
               </div>
             </div>
           </li>
-          {/* <li>
-            <label>Balance</label>
-            <div className={clsx(classes.infoItem)}>
-              {assetsError || !assetsData
-                ? "n/a"
-                : `$ ${assetsData.totalBalanceUSD}`}
-            </div>
-          </li> */}
         </ul>
       </div>
-      <label>Assets</label>
+      <label>Inventory</label>
       <div
         className={clsx(
           classes.assetsContainer,
@@ -135,6 +130,8 @@ const NFTItem: React.FC<Props> = ({ nft, chainId }) => {
           ))}
         </ul>
       </div>
+      <label>NFTs</label>
+      <AccountNftGrid address={mechAddress} />
     </div>
   )
 }

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 () => {

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`) */
         })
     })

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) {

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}`
 }