From 1d7d7f881fde050eeb179c6d2cea93574cf730ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9lix=20C=2E=20Morency?=
 <1102868+fmorency@users.noreply.github.com>
Date: Wed, 13 Nov 2024 16:22:35 -0500
Subject: [PATCH] fix: factory page rendering (#36)

---
 components/factory/components/MyDenoms.tsx | 36 +++++++++-------------
 1 file changed, 14 insertions(+), 22 deletions(-)

diff --git a/components/factory/components/MyDenoms.tsx b/components/factory/components/MyDenoms.tsx
index 631d0e02..59d77964 100644
--- a/components/factory/components/MyDenoms.tsx
+++ b/components/factory/components/MyDenoms.tsx
@@ -149,11 +149,10 @@ export default function MyDenoms({
             <table className="table w-full border-separate border-spacing-y-3">
               <thead className="sticky top-0 bg-[#F0F0FF] dark:bg-[#0E0A1F]">
                 <tr className="text-sm font-medium">
-                  <th className="bg-transparent w-1/5 lg:table-cell hidden">Token</th>
-                  <th className="bg-transparent w-1/5 sm:table-cell hidden">Symbol</th>
-                  <th className="bg-transparent w-1/5 md:table-cell hidden">Total Supply</th>
-                  <th className="bg-transparent w-2/5">Your Balance</th>
-                  <th className="bg-transparent w-1/5">Actions</th>
+                  <th className="bg-transparent w-1/4 lg:table-cell hidden">Token Symbol</th>
+                  <th className="bg-transparent w-2/5 lg:table-cell hidden">Name</th>
+                  <th className="bg-transparent w-2/5 md:table-cell hidden">Total Supply</th>
+                  <th className="bg-transparent w-1/4">Actions</th>
                 </tr>
               </thead>
               <tbody className="space-y-4">
@@ -162,22 +161,19 @@ export default function MyDenoms({
                       .fill(0)
                       .map((_, index) => (
                         <tr key={index} aria-label={`skeleton-${index}`}>
-                          <td className="dark:bg-[#FFFFFF0F] bg-[#FFFFFF] rounded-l-[12px] w-1/5 lg:table-cell hidden">
+                          <td className="dark:bg-[#FFFFFF0F] bg-[#FFFFFF] rounded-l-[12px] w-1/4 lg:table-cell hidden">
                             <div className="flex items-center space-x-3">
                               <div className="skeleton w-10 h-8 rounded-full shrink-0"></div>
                               <div className="skeleton h-3 w-24"></div>
                             </div>
                           </td>
-                          <td className="dark:bg-[#FFFFFF0F] bg-[#FFFFFF] w-1/5 sm:table-cell hidden">
-                            <div className="skeleton h-2 w-8"></div>
-                          </td>
                           <td className="dark:bg-[#FFFFFF0F] bg-[#FFFFFF] w-2/5 md:table-cell hidden">
                             <div className="skeleton h-2 w-24"></div>
                           </td>
                           <td className="dark:bg-[#FFFFFF0F] bg-[#FFFFFF] w-2/5">
                             <div className="skeleton h-2 w-32"></div>
                           </td>
-                          <td className="dark:bg-[#FFFFFF0F] bg-[#FFFFFF] rounded-r-[12px] w-1/5">
+                          <td className="dark:bg-[#FFFFFF0F] bg-[#FFFFFF] rounded-r-[12px] w-1/4">
                             <div className="skeleton h-2 w-32"></div>
                           </td>
                         </tr>
@@ -301,23 +297,19 @@ function TokenRow({
       <td className="rounded-l-[12px] w-1/4 lg:table-cell hidden">
         <div className="flex items-center space-x-3">
           <DenomImage denom={denom} />
-          <span className="font-medium">{truncateString(denom.display, 24)}</span>
-        </div>
-      </td>
-      <td className="w-1/4 sm:table-cell hidden">{truncateString(denom.symbol, 20)}</td>
-      <td className="w-2/4 sm:w-1/4">
-        <div className="flex flex-col sm:flex-row sm:items-center">
-          <span className="sm:mr-2">{formatAmount(totalSupply)}</span>
-          <span className="font-extralight">
-            {truncateString(denom?.display ?? '', 10).toUpperCase()}
+          <span className="font-medium">
+            {truncateString(denom?.display ?? 'No ticker provided', 24).toUpperCase()}
           </span>
         </div>
       </td>
-      <td className="w-2/4 sm:w-1/4">
+      <td className="w-2/5 sm:table-cell hidden">
+        {truncateString(denom?.name ?? 'No name provided', 20)}
+      </td>
+      <td className="w-2/5 sm:w-1/4">
         <div className="flex flex-col sm:flex-row sm:items-center">
-          <span className="sm:mr-2">{formatAmount(balance)}</span>
+          <span className="sm:mr-2">{formatAmount(totalSupply)}</span>
           <span className="font-extralight">
-            {truncateString(denom?.display ?? '', 10).toUpperCase()}
+            {truncateString(denom?.display ?? 'No ticker provided', 10).toUpperCase()}
           </span>
         </div>
       </td>