From d1c5b5b366a18061317ed7b4a5b9a4fbbe3e9b40 Mon Sep 17 00:00:00 2001
From: BenRey <br@massa.net>
Date: Fri, 11 Oct 2024 10:55:06 +0200
Subject: [PATCH] feat: enhance ScheduleTable with improved address display and
 centralized token info retrieval

---
 front/src/components/ScheduleTable.tsx | 64 ++++++++++++++------------
 front/src/store/store.ts               | 10 +---
 front/src/utils/assets.ts              | 21 +++++++++
 3 files changed, 57 insertions(+), 38 deletions(-)
 create mode 100644 front/src/utils/assets.ts

diff --git a/front/src/components/ScheduleTable.tsx b/front/src/components/ScheduleTable.tsx
index afaedab..95a375a 100644
--- a/front/src/components/ScheduleTable.tsx
+++ b/front/src/components/ScheduleTable.tsx
@@ -6,15 +6,17 @@ import CheckBox from './CheckBox';
 import useSchedule from '@/services/useSchedule';
 import { MasToken, supportedTokens } from '../const/assets';
 import ScheduleHistory from '@/components/ScheduleHistory';
+import { getTokenInfo } from '@/utils/assets';
 
 interface ScheduleTableProps {
   schedules: Schedule[];
 }
 
-const CopyableAddress: React.FC<{ address: string; label: string }> = ({
-  address,
-  label,
-}) => (
+const CopyableAddress: React.FC<{
+  address: string;
+  label: string;
+  value: string;
+}> = ({ value, address, label }) => (
   <span
     title={address}
     className="hover:text-blue-500 cursor-pointer"
@@ -23,7 +25,7 @@ const CopyableAddress: React.FC<{ address: string; label: string }> = ({
       toast.success(`${label} copied to clipboard`);
     }}
   >
-    {truncateAddress(address)}
+    {value}
   </span>
 );
 
@@ -47,7 +49,7 @@ const TableHeader: React.FC = () => (
       ].map((header, index) => (
         <th
           key={index}
-          className="px-6 py-6 text-left text-xs font-medium uppercase"
+          className="px-4 py-6 text-left text-xs font-medium uppercase"
         >
           {header}
         </th>
@@ -75,55 +77,59 @@ const TableRow: React.FC<TableRowProps> = ({
 
   return (
     <tr>
-      <td className="px-6 py-4">
+      <td className="text-center px-2 py-4">
         <CheckBox
           isSelected={isSelected}
           onChange={onCheckboxChange}
           id={schedule.id}
         />
       </td>
-      <td className="px-6 py-4 whitespace-nowrap">{schedule.id.toString()}</td>
-      <td className="px-6 py-4 whitespace-nowrap">
-        <CopyableAddress address={schedule.operationId} label="Operation ID" />
+      <td className="text-center px-2 py-4">{schedule.id.toString()}</td>
+      <td className="text-center px-2 py-4">
+        <CopyableAddress
+          address={schedule.operationId}
+          label="Operation ID"
+          value={truncateAddress(schedule.operationId)}
+        />
       </td>
-      <td className="px-6 py-4 whitespace-nowrap">
+      <td className="text-center px-2 py-4">
         {schedule.isVesting ? 'Vesting' : 'Tips'}
       </td>
-      <td className="px-6 py-4 whitespace-nowrap">
+      <td className="text-center px-2 py-4">
         {isMas ? (
           'MAS'
         ) : (
           <CopyableAddress
-            address={schedule.tokenAddress}
             label="Token address"
+            address={asset.address}
+            value={getTokenInfo(asset.address).symbol}
           />
         )}
       </td>
-      <td className="px-6 py-4 whitespace-nowrap">
-        <CopyableAddress address={schedule.spender} label="Spender address" />
+      <td className="text-center px-2 py-4">
+        <CopyableAddress
+          address={schedule.spender}
+          label="Spender address"
+          value={truncateAddress(schedule.spender)}
+        />
       </td>
-      <td className="px-6 py-4 whitespace-nowrap">
+      <td className="text-center px-2 py-4">
         <CopyableAddress
           address={schedule.recipient}
           label="Recipient address"
+          value={truncateAddress(schedule.recipient)}
         />
       </td>
-      <td className="px-6 py-4 whitespace-nowrap">
+      <td className="text-center px-2 py-4">
         <span title={formattedAmount.full}>{formattedAmount.preview}</span>
       </td>
-      <td className="px-6 py-4 whitespace-nowrap">
-        {schedule.interval.toString()}
-      </td>
-      <td className="px-6 py-4 whitespace-nowrap">
+      <td className="text-center px-2 py-4">{schedule.interval.toString()}</td>
+      <td className="text-center px-2 py-4">
         {schedule.occurrences.toString()}
       </td>
-      <td className="px-6 py-4 whitespace-nowrap">
-        {schedule.remaining.toString()}
-      </td>
-      <td className="px-6 py-4 whitespace-nowrap">
-        {schedule.tolerance.toString()}
-      </td>
-      <td className="px-6 py-4 whitespace-nowrap">
+      <td className="text-center px-2 py-4">{schedule.remaining.toString()}</td>
+      <td className="text-center px-2 py-4">{schedule.tolerance.toString()}</td>
+      <td className="text-center px-2 py-4">
         <ScheduleHistory schedule={schedule} />
       </td>
     </tr>
@@ -172,7 +178,7 @@ const ScheduleTable: React.FC<ScheduleTableProps> = ({ schedules }) => {
         <SelectedInfo count={selected.length} onCancel={handleCancel} />
       )}
 
-      <table className="min-w-full overflow-hidden rounded-2xl shadow-lg bg-secondary">
+      <table className="overflow-hidden rounded-2xl shadow-lg bg-secondary w-full">
         <TableHeader />
         <tbody className="text-sm divide-y divide-zinc-300">
           {schedules.map((schedule) => (
diff --git a/front/src/store/store.ts b/front/src/store/store.ts
index f7fc453..ab518b4 100644
--- a/front/src/store/store.ts
+++ b/front/src/store/store.ts
@@ -6,6 +6,7 @@ import { truncateAddress } from '@/utils/address';
 import { useAccountStore, formatAmount, toast } from '@massalabs/react-ui-kit';
 import { useSchedulerStore } from './scheduler';
 import { useTokenStore } from './token';
+import { getTokenInfo } from '@/utils/assets';
 
 export async function initApp() {
   const { connectedAccount } = useAccountStore.getState();
@@ -80,12 +81,3 @@ function handleTransferEvents(data: SCEvent[], schedules: Schedule[]) {
     }
   }
 }
-
-function getTokenInfo(tokenAddress: string | null) {
-  if (!tokenAddress) return { decimals: 9, symbol: 'MAS' };
-
-  const token = supportedTokens.find((t) => t.address === tokenAddress);
-  return token
-    ? { decimals: token.decimals, symbol: token.symbol }
-    : { decimals: 9, symbol: 'MAS' };
-}
diff --git a/front/src/utils/assets.ts b/front/src/utils/assets.ts
new file mode 100644
index 0000000..11d98f2
--- /dev/null
+++ b/front/src/utils/assets.ts
@@ -0,0 +1,21 @@
+import { MasToken, supportedTokens } from '@/const/assets';
+
+export function getTokenInfo(tokenAddress: string | null) {
+  if (!tokenAddress) return MasToken;
+
+  const token = supportedTokens.find((t) => t.address === tokenAddress);
+
+  if (!token) {
+    return {
+      name: 'Unknown',
+      address: tokenAddress,
+      symbol: 'Unknown',
+      decimals: 18,
+      balance: 0n,
+      allowance: 0n,
+      chainId: 0,
+    };
+  }
+
+  return token;
+}