From 4d6036d2b243953ad81e50b0198d513676db120f Mon Sep 17 00:00:00 2001
From: Yuho <yuho@ref.finance>
Date: Tue, 30 Jan 2024 12:55:10 +0800
Subject: [PATCH] update table ui

---
 components/CustomTable/CustomTable.tsx | 12 ++++-
 screens/Dashboard/records.tsx          | 65 +++++++++++++++++++++-----
 2 files changed, 64 insertions(+), 13 deletions(-)

diff --git a/components/CustomTable/CustomTable.tsx b/components/CustomTable/CustomTable.tsx
index 7a12cf96..6cc39488 100644
--- a/components/CustomTable/CustomTable.tsx
+++ b/components/CustomTable/CustomTable.tsx
@@ -11,6 +11,8 @@ type columnType = {
   accessorKey?: string;
   cell?: any;
   size?: number;
+  minSize?: number;
+  maxSize?: number;
 };
 
 interface Props {
@@ -132,17 +134,23 @@ const CustomTable = ({
     } else {
       text = d.header;
     }
-    return { text, size: d.size };
+    return { text, size: d.size, minSize: d.minSize, maxSize: d.maxSize };
   });
 
   const headersWidth = headersRef.current.map((d) => d.getBoundingClientRect().width);
   const headerNode = (
     <div className="custom-table-tr custom-table-header-row">
       {headers?.map((d, i) => {
-        const styles: { flex?: string } = {};
+        const styles: { flex?: string; maxWidth?: string; minWidth?: string } = {};
         if (d.size) {
           styles.flex = `0 0 ${d.size}px`;
         }
+        if (d.minSize) {
+          styles.minWidth = `${d.minSize}px`;
+        }
+        if (d.maxSize) {
+          styles.maxWidth = `${d.maxSize}px`;
+        }
         const keyId = typeof d.text === "string" ? d.text : i;
 
         const assignRef = (el) => {
diff --git a/screens/Dashboard/records.tsx b/screens/Dashboard/records.tsx
index 593d88cd..e112d329 100644
--- a/screens/Dashboard/records.tsx
+++ b/screens/Dashboard/records.tsx
@@ -82,23 +82,63 @@ const Records = ({ isShow }) => {
 const getColumns = ({ showToast, handleTxClick }) => [
   {
     header: "Assets",
+    minSize: 220,
     cell: ({ originalData }) => {
       const { data } = originalData || {};
+      const { metadata } = data || {};
+      const { icon, tokens, symbol } = metadata || {};
+      let iconImg;
+      let symbolNode = symbol;
+      if (icon) {
+        iconImg = (
+          <img
+            src={icon}
+            width={26}
+            height={26}
+            alt="token"
+            className="rounded-full w-[26px] h-[26px]"
+            style={{ marginRight: 6, marginLeft: 3 }}
+          />
+        );
+      } else if (tokens?.length) {
+        symbolNode = "";
+        iconImg = (
+          <div
+            className="grid"
+            style={{ marginRight: 2, gridTemplateColumns: "15px 12px", paddingLeft: 5 }}
+          >
+            {tokens?.map((d, i) => {
+              const isLast = i === tokens.length - 1;
+              symbolNode += `${d.metadata.symbol}${!isLast ? "-" : ""}`;
+              return (
+                <img
+                  key={d.metadata.symbol}
+                  src={d.metadata?.icon}
+                  width={20}
+                  height={20}
+                  alt="token"
+                  className="rounded-full w-[20px] h-[20px] -m-1"
+                  style={{ maxWidth: "none" }}
+                />
+              );
+            })}
+          </div>
+        );
+      }
 
       return (
-        <div className="flex truncate">
+        <div className="flex">
           <div style={{ flex: "0 0 26px" }} className="mr-2">
-            {data?.metadata?.icon && (
-              <img
-                src={data?.metadata?.icon}
-                width={26}
-                height={26}
-                alt="token"
-                className="rounded-full"
-              />
-            )}
+            {iconImg}
+          </div>
+          <div
+            title={symbolNode}
+            style={{
+              whiteSpace: "normal",
+            }}
+          >
+            {symbolNode}
           </div>
-          <div className="truncate">{data?.metadata?.symbol}</div>
         </div>
       );
     },
@@ -106,9 +146,11 @@ const getColumns = ({ showToast, handleTxClick }) => [
   {
     header: "Type",
     accessorKey: "event",
+    maxSize: 180,
   },
   {
     header: "Amount",
+    maxSize: 180,
     cell: ({ originalData }) => {
       const { amount, data } = originalData || {};
       const { metadata, config } = data || {};
@@ -121,6 +163,7 @@ const getColumns = ({ showToast, handleTxClick }) => [
   },
   {
     header: "Time",
+    maxSize: 180,
     cell: ({ originalData }) => {
       const { timestamp } = originalData || {};
       return <div className="text-gray-300 truncate">{getDateString(timestamp / 1000000)}</div>;