From d3bc47e5b16cbc7fbfb23e7e87717901982ab836 Mon Sep 17 00:00:00 2001
From: Yuho <yuho@ref.finance>
Date: Fri, 5 Jan 2024 13:12:48 +0800
Subject: [PATCH] update mobile ui

---
 components/CustomTable/CustomTable.tsx       | 51 ++++++++++++--------
 components/Header/stats/components.tsx       |  3 +-
 screens/Dashboard/dashboardOverview.tsx      | 12 +++--
 screens/Dashboard/index.tsx                  | 37 ++++++++++----
 screens/Dashboard/supplyBorrowListMobile.tsx | 45 +++++++++++++++--
 5 files changed, 109 insertions(+), 39 deletions(-)

diff --git a/components/CustomTable/CustomTable.tsx b/components/CustomTable/CustomTable.tsx
index 5a98d31e..21264932 100644
--- a/components/CustomTable/CustomTable.tsx
+++ b/components/CustomTable/CustomTable.tsx
@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import React, { useEffect } from "react";
+import React, { useEffect, useRef } from "react";
 import { twMerge } from "tailwind-merge";
 import CustomPagination from "./CustomPagination";
 import CustomTableMobile from "./CustomTableMobile";
@@ -47,6 +47,7 @@ const CustomTable = ({
   selectedRowIndex,
 }: Props) => {
   const isMobile = isMobileDevice();
+  const headersRef = useRef<any>([]);
 
   if (isMobile) {
     return (
@@ -116,29 +117,33 @@ const CustomTable = ({
     }
     return { text, size: d.size };
   });
+
+  const headersWidth = headersRef.current.map((d) => d.getBoundingClientRect().width);
   const headerNode = (
-    <div className="custom-table-thead">
-      <div className="custom-table-tr">
-        {headers?.map((d, i) => {
-          const styles: { flex?: string } = {};
-          if (d.size) {
-            styles.flex = `0 0 ${d.size}px`;
-          }
-          const keyId = typeof d.text === "string" ? d.text : i;
-          return (
-            <div key={keyId} className="custom-table-th text-gray-400" style={styles}>
-              {d.text}
-            </div>
-          );
-        })}
-      </div>
+    <div className="custom-table-tr custom-table-header-row">
+      {headers?.map((d, i) => {
+        const styles: { flex?: string } = {};
+        if (d.size) {
+          styles.flex = `0 0 ${d.size}px`;
+        }
+        const keyId = typeof d.text === "string" ? d.text : i;
+
+        const assignRef = (el) => {
+          headersRef.current[i] = el;
+        };
+        return (
+          <div key={keyId} className="custom-table-th text-gray-400" style={styles} ref={assignRef}>
+            {d.text}
+          </div>
+        );
+      })}
     </div>
   );
 
   let bodyNodes;
   if (data?.length) {
     bodyNodes = data?.map((d, i) => {
-      const tdNode = columns?.map((col) => {
+      const tdNode = columns?.map((col, colIndex) => {
         let content = null;
         if (typeof col.cell === "function") {
           content = col.cell({
@@ -148,8 +153,12 @@ const CustomTable = ({
           content = d[col.accessorKey];
         }
         const styles: { flex?: string } = {};
-        if (col.size) {
-          styles.flex = `0 0 ${col.size}px`;
+        const colSize = headersWidth[colIndex];
+        // if (col.size) {
+        //   styles.flex = `0 0 ${col.size}px`;
+        // }
+        if (colSize) {
+          styles.flex = `0 0 ${colSize}px`;
         }
         return (
           <div className="custom-table-td" key={col.id || col.header} style={styles}>
@@ -238,7 +247,7 @@ const StyledTable = styled.div`
 
     .custom-table-th {
       text-align: left;
-      padding: 10px 5px;
+      padding: 10px 5px 10px 0;
     }
   }
 
@@ -246,7 +255,7 @@ const StyledTable = styled.div`
     min-height: 85px;
 
     .custom-table-td {
-      padding: 15px 5px;
+      padding: 15px 5px 15px 0;
       justify-content: center;
       display: flex;
       flex-direction: column;
diff --git a/components/Header/stats/components.tsx b/components/Header/stats/components.tsx
index 3fab4fa3..e298001f 100644
--- a/components/Header/stats/components.tsx
+++ b/components/Header/stats/components.tsx
@@ -86,7 +86,8 @@ export const Stat = ({
   onClick?: () => void;
 }) => {
   return (
-    <div onClick={() => onClick && onClick()} style={{ minHeight: 81 }} className="md:w-[351px]">
+    <div onClick={() => onClick && onClick()} style={{ minHeight: 81 }}>
+      {/* <div onClick={() => onClick && onClick()} style={{ minHeight: 81 }} className="md:w-[351px]"> */}
       <div className="flex items-center gap-1">
         {typeof title === "string" ? <div className="h6 text-gray-300">{title}</div> : title}
         {titleTooltip && <ReactToolTip content={titleTooltip} />}
diff --git a/screens/Dashboard/dashboardOverview.tsx b/screens/Dashboard/dashboardOverview.tsx
index e0f94e6d..290604f1 100644
--- a/screens/Dashboard/dashboardOverview.tsx
+++ b/screens/Dashboard/dashboardOverview.tsx
@@ -114,6 +114,7 @@ const DashboardOverview = ({ suppliedRows, borrowedRows }) => {
     });
   };
 
+  const hasMultiHealths = userHealth?.allHealths?.length > 1 && userHealth?.hasBorrow;
   return (
     <>
       <div className="flex gap-2 justify-between items-center mb-4 lg3:hidden">
@@ -125,14 +126,15 @@ const DashboardOverview = ({ suppliedRows, borrowedRows }) => {
       </div>
       <ContentBox className="mb-8">
         <div className="lg3:flex lg3:justify-between">
-          <div className="mb-4 lg3:max-w-[640px] lg3:mb-0">
-            <div className="flex gap-2 justify-between lg3:gap-6 lg3:gap-8">
-              <div className="gap-6 flex flex-col flex-2">
+          <div className={`mb-4 lg3:mb-0 ${!hasMultiHealths && "lg3:max-w-[640px]"}`}>
+            {/* <div className="mb-4 lg3:max-w-[640px] lg3:mb-0"> */}
+            <div className="flex gap-6 lg3:justify-between lg3:gap-6 lg3:gap-8">
+              <div className="gap-6 flex flex-col">
                 <UserLiquidity />
                 <UserDailyRewards />
               </div>
 
-              <div className="gap-6 flex flex-col flex-1">
+              <div className="gap-6 flex flex-col">
                 <APY />
                 <div className="flex flex-col">
                   {/* <OverviewItem */}
@@ -199,7 +201,7 @@ const DashboardOverview = ({ suppliedRows, borrowedRows }) => {
 
             <div className="relative flex xsm2:flex-col xsm:items-center items-end gap-4">
               <HealthFactor userHealth={userHealthCur} />
-              {userHealth?.allHealths?.length > 1 && userHealth?.hasBorrow ? (
+              {hasMultiHealths ? (
                 <div className="lp-healths flex flex-col items-center gap-2 mt-4">
                   {userHealth.allHealths.map((value: any) => {
                     const isActive = value.id === userHealthCur?.id;
diff --git a/screens/Dashboard/index.tsx b/screens/Dashboard/index.tsx
index 0197b12f..dbb00f2d 100644
--- a/screens/Dashboard/index.tsx
+++ b/screens/Dashboard/index.tsx
@@ -88,13 +88,13 @@ const StyledSupplyBorrow = styled.div`
 const yourSuppliedColumns = [
   {
     header: "Assets",
+    size: 160,
     cell: ({ originalData }) => {
       const { metadata } = originalData || {};
       const { icon, tokens, symbol } = metadata || {};
       let iconImg;
-      let symbolNode = "";
+      let symbolNode = symbol;
       if (icon) {
-        symbolNode = symbol;
         iconImg = (
           <img
             src={icon}
@@ -102,12 +102,16 @@ const yourSuppliedColumns = [
             height={26}
             alt="token"
             className="rounded-full w-[26px] h-[26px]"
-            style={{ marginRight: 3 }}
+            style={{ marginRight: 6, marginLeft: 3 }}
           />
         );
       } else if (tokens?.length) {
+        symbolNode = "";
         iconImg = (
-          <div className="grid" style={{ marginRight: 2, gridTemplateColumns: "15px 12px" }}>
+          <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 ? "-" : ""}`;
@@ -129,7 +133,12 @@ const yourSuppliedColumns = [
       return (
         <div className="flex gap-2 items-center">
           {iconImg}
-          <div className="truncate" title={symbolNode}>
+          <div
+            title={symbolNode}
+            style={{
+              whiteSpace: "normal",
+            }}
+          >
             {symbolNode}
           </div>
         </div>
@@ -244,11 +253,11 @@ const YourSupplied = ({ suppliedRows, accountId, total }) => {
 
 const StyledCustomTable = styled(CustomTable)`
   .custom-table-tbody {
-    margin: -2px -30px 0;
+    margin-top: -2px;
 
     .custom-table-row {
-      padding-left: 30px;
-      padding-right: 30px;
+      //padding-left: 20px;
+      //padding-right: 20px;
       cursor: pointer;
 
       .custom-table-action {
@@ -270,11 +279,21 @@ const StyledCustomTable = styled(CustomTable)`
       }
     }
   }
+
+  .custom-table-thead,
+  .custom-table-tbody {
+    margin: 0 -30px;
+  }
+  .custom-table-header-row,
+  .custom-table-row {
+    padding: 0 20px;
+  }
 `;
 
 const yourBorrowedColumns = [
   {
     header: "Assets",
+    size: 140,
     cell: ({ originalData }) => {
       return (
         <div className="flex gap-2 items-center">
@@ -292,7 +311,7 @@ const yourBorrowedColumns = [
   },
   {
     header: "Collateral Type",
-    size: 140,
+    size: 130,
     cell: ({ originalData }) => {
       const { collateralType, metadataLP } = originalData || {};
       let tokenNames = "";
diff --git a/screens/Dashboard/supplyBorrowListMobile.tsx b/screens/Dashboard/supplyBorrowListMobile.tsx
index 997108e1..e1afec46 100644
--- a/screens/Dashboard/supplyBorrowListMobile.tsx
+++ b/screens/Dashboard/supplyBorrowListMobile.tsx
@@ -125,7 +125,35 @@ const StyledTabActiveBall = styled.div`
 `;
 
 const SupplyItem = ({ data }) => {
-  const { canUseAsCollateral } = data || {};
+  const { canUseAsCollateral, 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" />;
+  } else if (tokens?.length) {
+    symbolNode = "";
+    iconImg = (
+      <div className="grid" style={{ marginRight: 2, gridTemplateColumns: "15px 12px" }}>
+        {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>
       <div
@@ -133,9 +161,9 @@ const SupplyItem = ({ data }) => {
         style={{ padding: "16px", borderColor: "#31344C" }}
       >
         <div className="flex gap-2 items-center">
-          <img src={data?.icon} width={26} height={26} alt="token" className="rounded-full" />
+          {iconImg}
           <div className="flex flex-col">
-            <div className="truncate h4b">{data?.symbol}</div>
+            <div className="truncate h4b">{symbolNode}</div>
             {hiddenAssets.includes(data?.tokenId || "") ? null : (
               <MarketButton
                 tokenId={data?.tokenId}
@@ -183,6 +211,12 @@ const SupplyItem = ({ data }) => {
 };
 
 const BorrowItem = ({ data }) => {
+  const { metadataLP, collateralType } = data || {};
+  let tokenNames = "";
+  metadataLP?.tokens?.forEach((d, i) => {
+    const isLast = i === metadataLP.tokens.length - 1;
+    tokenNames += `${d.metadata.symbol}${!isLast ? "-" : ""}`;
+  });
   return (
     <div>
       <div
@@ -193,6 +227,11 @@ const BorrowItem = ({ data }) => {
           <img src={data?.icon} width={26} height={26} alt="token" className="rounded-full" />
           <div className="flex flex-col">
             <div className="truncate h4b">{data?.symbol}</div>
+            {tokenNames && (
+              <div className="text-gray-300" style={{ fontSize: 12 }}>
+                {tokenNames}
+              </div>
+            )}
             <MarketButton
               tokenId={data?.tokenId}
               style={{