mobile ui

burrowHQ · Jan 1, 2024 · 32d0244 · 32d0244
1 parent 31ecec4
commit 32d0244
Show file tree

Hide file tree

Showing 6 changed files with 173 additions and 133 deletions.
diff --git a/components/Modal/CollateralTypeSelector.tsx b/components/Modal/CollateralTypeSelector.tsx
@@ -51,7 +51,7 @@ export function CollateralTypeSelectorBorrow({
             setShow(!show);
           }}
         >
-          <span className="text-sm text-gray-300 mr-2.5 whitespace-nowrap">
+          <span className="text-sm text-gray-300 mr-2.5 whitespace-nowrap xsm:max-w-[120px] overflow-hidden text-ellipsis">
             {getName(selectedCollateralType)}
           </span>
           <ArrowDownIcon className={`${show ? " transform rotate-180" : ""}`} />

diff --git a/components/Modal/TokenBox.tsx b/components/Modal/TokenBox.tsx
@@ -4,6 +4,7 @@ import { ArrowDownIcon } from "./svg";
 import SelectToken, { IAssetType } from "../SelectToken";
 import { IToken } from "../../interfaces/asset";
 import { standardizeAsset } from "../../utils";
+import { isMobileDevice } from "../../helpers/helpers";
 
 export default function TokenBox({ asset, action }: { asset: UIAsset; action: string }) {
   const [open, setOpen] = useState<boolean>(false);
@@ -59,10 +60,12 @@ export default function TokenBox({ asset, action }: { asset: UIAsset; action: st
   }
   return (
     <div
-      className="relative"
+      className="relative flex-shrink-0"
       tabIndex={0}
       onBlur={() => {
-        setOpen(false);
+        if (!isMobileDevice()) {
+          setOpen(false);
+        }
       }}
     >
       <div

diff --git a/components/Modal/index.tsx b/components/Modal/index.tsx
@@ -74,7 +74,7 @@ const Modal = () => {
   const activePosition =
     action === "Repay" || action === "Borrow"
       ? selectedCollateralType
-      : tokenId.indexOf(lpTokenPrefix) > -1
+      : tokenId?.indexOf(lpTokenPrefix) > -1
       ? tokenId
       : DEFAULT_POSITION;
   const { maxBorrowAmount = 0, maxBorrowValue = 0 } =

diff --git a/components/SelectToken/index.tsx b/components/SelectToken/index.tsx
@@ -230,7 +230,7 @@ function TokenList() {
     <>
       {rows.map((asset: IUIAsset) => (
         <GetBalance
-          key={asset.symbol}
+          key={asset.tokenId}
           asset={asset}
           updateAsset={updateAsset}
           setUpdateAsset={setUpdateAsset}

diff --git a/screens/Market/table.tsx b/screens/Market/table.tsx
@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { TableProps } from "../../components/Table";
 import { ArrowDownIcon, ArrowUpIcon, ArrowLineDownIcon, CheckIcon, NewTagIcon } from "./svg";
 import type { UIAsset } from "../../interfaces";
@@ -262,42 +262,6 @@ function TableRow({
   }, [Object.keys(borrowApyMap).length]);
   const is_native = NATIVE_TOKENS?.includes(row.tokenId);
   const is_new = NEW_TOKENS?.includes(row.tokenId);
-  return (
-    <div>
-      {isMobile ? (
-        <TableRowMobile
-          key={row.tokenId}
-          row={row}
-          lastRow={lastRow}
-          depositAPY={depositAPY}
-          borrowAPY={borrowAPY}
-          is_native={is_native}
-          is_new={is_new}
-        />
-      ) : (
-        <TableRowPc
-          key={row.tokenId}
-          row={row}
-          lastRow={lastRow}
-          is_native={is_native}
-          is_new={is_new}
-        />
-      )}
-    </div>
-  );
-}
-
-function TableRowPc({
-  row,
-  lastRow,
-  is_native,
-  is_new,
-}: {
-  row: UIAsset;
-  lastRow: boolean;
-  is_native: boolean;
-  is_new: boolean;
-}) {
   function getIcons() {
     const { isLpToken, tokens } = row;
     return (
@@ -316,7 +280,7 @@ function TableRowPc({
             );
           })
         ) : (
-          <img src={row.icon} alt="" className="w-[27px] h-[27px] rounded-full" />
+          <img src={row.icon} alt="" className="w-[26px] h-[26px] rounded-full" />
         )}
       </div>
     );
@@ -338,7 +302,7 @@ function TableRowPc({
             );
           })
         ) : (
-          <span className="text-sm text-white">
+          <span className="text-sm text-white xsm:text-base">
             {row.symbol}
             {is_native ? (
               <span className="text-gray-300 italic text-xs transform -translate-y-0.5 ml-0.5">
@@ -350,6 +314,50 @@ function TableRowPc({
       </div>
     );
   }
+  return (
+    <div>
+      {isMobile ? (
+        <TableRowMobile
+          key={row.tokenId}
+          row={row}
+          lastRow={lastRow}
+          depositAPY={depositAPY}
+          borrowAPY={borrowAPY}
+          is_native={is_native}
+          is_new={is_new}
+          getIcons={getIcons}
+          getSymbols={getSymbols}
+        />
+      ) : (
+        <TableRowPc
+          key={row.tokenId}
+          row={row}
+          lastRow={lastRow}
+          is_native={is_native}
+          is_new={is_new}
+          getIcons={getIcons}
+          getSymbols={getSymbols}
+        />
+      )}
+    </div>
+  );
+}
+
+function TableRowPc({
+  row,
+  lastRow,
+  is_native,
+  is_new,
+  getIcons,
+  getSymbols,
+}: {
+  row: UIAsset;
+  lastRow: boolean;
+  is_native: boolean;
+  is_new: boolean;
+  getIcons: () => React.ReactNode;
+  getSymbols: () => React.ReactNode;
+}) {
   return (
     <Link key={row.tokenId} href={`/tokenDetail/${row.tokenId}`}>
       <div
@@ -454,39 +462,38 @@ function TableRowMobile({
   borrowAPY,
   is_native,
   is_new,
+  getIcons,
+  getSymbols,
 }: {
   row: UIAsset;
   lastRow: boolean;
   depositAPY: number;
   borrowAPY: number;
   is_native: boolean;
   is_new: boolean;
+  getIcons: () => React.ReactNode;
+  getSymbols: () => React.ReactNode;
 }) {
   return (
     <Link key={row.tokenId} href={`/tokenDetail/${row.tokenId}`}>
       <div className={`bg-gray-800 rounded-xl p-3.5 ${lastRow ? "" : "mb-4"}`}>
-        <div className="relative flex items-center pb-4 border-b border-dark-950">
-          <img src={row.icon} alt="" className="w-[26px] h-[26px]  rounded-full" />
-          <div className="flex">
-            <span className="text-base text-white font-bold ml-2">{row.symbol}</span>
-            {is_native ? (
-              <span className="text-gray-300 italic text-xs transform translate-y-1.5 ml-0.5">
-                Native
-              </span>
-            ) : null}
-          </div>
-          {is_new ? <NewTagIcon className="absolute bottom-2 transform -translate-x-1" /> : null}
+        <div className="relative flex items-center pb-4 border-b border-dark-950 -ml-1">
+          {getIcons()}
+          <div className="flex ml-2">{getSymbols()}</div>
+          {is_new ? (
+            <NewTagIcon
+              className={`absolute transform -translate-x-[1px] z-20 ${
+                row.isLpToken && row?.tokens?.length > 2 ? "bottom-2" : "bottom-1"
+              }`}
+            />
+          ) : null}
         </div>
         <div className="grid grid-cols-2 gap-y-5 pt-4">
           <TemplateMobile
             title="Total Supplied"
             value={toInternationalCurrencySystem_number(row.totalSupply)}
             subValue={toInternationalCurrencySystem_usd(row.totalSupplyMoney)}
           />
-          {/* <TemplateMobile
-            title="Supply APY"
-            value={row.can_deposit ? format_apy(depositAPY) : "-"}
-          /> */}
           <TemplateMobileAPY title="Supply APY" row={row} canShow={row.can_deposit} />
           <TemplateMobile
             title="Total Borrowed"