From 30b62b911d5cefa41fab8a3162b10671b5aee506 Mon Sep 17 00:00:00 2001
From: samepant <sampanter@gmail.com>
Date: Mon, 29 Jan 2024 16:21:09 -0500
Subject: [PATCH] add token thumbnail to mech invetory

---
 .../src/components/NFTItem/NFTItem.module.css | 14 ++++++++
 frontend/src/components/NFTItem/index.tsx     | 33 ++++++++++++-------
 2 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/NFTItem/NFTItem.module.css b/frontend/src/components/NFTItem/NFTItem.module.css
index 64dd07d..4367f75 100644
--- a/frontend/src/components/NFTItem/NFTItem.module.css
+++ b/frontend/src/components/NFTItem/NFTItem.module.css
@@ -136,6 +136,9 @@
 }
 
 .assetList {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
   width: 100%;
 }
 
@@ -145,6 +148,17 @@
   font-size: 12px;
 }
 
+.assetName {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+.assetName img {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+}
+
 .asset .value {
   display: flex;
   gap: 10px;
diff --git a/frontend/src/components/NFTItem/index.tsx b/frontend/src/components/NFTItem/index.tsx
index 8a612d1..dabcdb6 100644
--- a/frontend/src/components/NFTItem/index.tsx
+++ b/frontend/src/components/NFTItem/index.tsx
@@ -33,7 +33,8 @@ const NFTItem: React.FC<Props> = ({ nft, chainId }) => {
     chainId,
   })
 
-  const mechBalances = data ? [data.native, ...data.erc20s] : []
+  const mechNativeBalance = data ? data.native : null
+  const mechErc20Balances = data ? data.erc20s : []
   const { deployed } = useDeployMech(getNFTContext(nft), chainId)
   const metadata = JSON.parse(nft.metadata || "{}")
   const name = nft.name || metadata?.name || "..."
@@ -98,20 +99,30 @@ const NFTItem: React.FC<Props> = ({ nft, chainId }) => {
         </ul>
       </div>
       <label>Inventory</label>
-      <div
-        className={clsx(
-          classes.assetsContainer,
-          mechBalances.length === 0 && classes.empty
-        )}
-      >
+      <div className={clsx(classes.assetsContainer)}>
         {mechBalancesError && <p>Failed to load assets</p>}
         {mechBalancesLoading && <Loading />}
-
-        {mechBalances.length === 0 && <p>No assets found</p>}
         <ul className={classes.assetList}>
-          {mechBalances.map((balance, index) => (
+          {!mechBalancesLoading && !mechBalancesError && mechNativeBalance && (
+            <li className={classes.asset}>
+              <div>{mechNativeBalance.name}</div>
+              <div className={classes.value}>
+                <p>
+                  {formatUnits(
+                    BigInt(mechNativeBalance.balance),
+                    mechNativeBalance.decimals || 0
+                  )}
+                </p>
+                <p>{mechNativeBalance.symbol}</p>
+              </div>
+            </li>
+          )}
+          {mechErc20Balances.map((balance, index) => (
             <li key={index} className={classes.asset}>
-              <div>{balance.name}</div>
+              <div className={classes.assetName}>
+                <img src={balance.logo} alt={`logo for ${balance.name}`} />
+                <div>{balance.name}</div>
+              </div>
               <div className={classes.value}>
                 <p>
                   {formatUnits(BigInt(balance.balance), balance.decimals || 0)}