From 32d0244bc5faa3cd8b3594b934e71661da407f2a Mon Sep 17 00:00:00 2001 From: "nature.xie" Date: Mon, 1 Jan 2024 15:41:22 +0800 Subject: [PATCH] mobile ui --- components/Modal/CollateralTypeSelector.tsx | 2 +- components/Modal/TokenBox.tsx | 7 +- components/Modal/index.tsx | 2 +- components/SelectToken/index.tsx | 2 +- screens/Market/table.tsx | 115 +++++++------ screens/TokenDetail/index.tsx | 178 ++++++++++++-------- 6 files changed, 173 insertions(+), 133 deletions(-) diff --git a/components/Modal/CollateralTypeSelector.tsx b/components/Modal/CollateralTypeSelector.tsx index 100ee376..30a4d83a 100644 --- a/components/Modal/CollateralTypeSelector.tsx +++ b/components/Modal/CollateralTypeSelector.tsx @@ -51,7 +51,7 @@ export function CollateralTypeSelectorBorrow({ setShow(!show); }} > - + {getName(selectedCollateralType)} diff --git a/components/Modal/TokenBox.tsx b/components/Modal/TokenBox.tsx index 696c6fb9..0623f35e 100644 --- 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(false); @@ -59,10 +60,12 @@ export default function TokenBox({ asset, action }: { asset: UIAsset; action: st } return (
{ - setOpen(false); + if (!isMobileDevice()) { + setOpen(false); + } }} >
{ 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 index 6fb4f8a6..63aa6b20 100644 --- a/components/SelectToken/index.tsx +++ b/components/SelectToken/index.tsx @@ -230,7 +230,7 @@ function TokenList() { <> {rows.map((asset: IUIAsset) => ( - {isMobile ? ( - - ) : ( - - )} -
- ); -} - -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({ ); }) ) : ( - + )}
); @@ -338,7 +302,7 @@ function TableRowPc({ ); }) ) : ( - + {row.symbol} {is_native ? ( @@ -350,6 +314,50 @@ function TableRowPc({ ); } + return ( +
+ {isMobile ? ( + + ) : ( + + )} +
+ ); +} + +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 (
React.ReactNode; + getSymbols: () => React.ReactNode; }) { return (
-
- -
- {row.symbol} - {is_native ? ( - - Native - - ) : null} -
- {is_new ? : null} +
+ {getIcons()} +
{getSymbols()}
+ {is_new ? ( + 2 ? "bottom-2" : "bottom-1" + }`} + /> + ) : null}
- {/* */} { @@ -140,7 +139,74 @@ function TokenDetailView({ tokenRow, assets }: { tokenRow: UIAsset; assets: UIAs const is_native = NATIVE_TOKENS?.includes(tokenRow.tokenId); const is_new = NEW_TOKENS?.includes(tokenRow.tokenId); - + function getIcons() { + const { isLpToken, tokens } = tokenRow; + return ( +
+ {isLpToken ? ( + tokens.map((token: IToken, index) => { + if (isMobile) { + return ( + 1 ? "-mt-1.5" : "z-10"}`} + /> + ); + } else { + return ( + + ); + } + }) + ) : ( + + )} +
+ ); + } + function getSymbols() { + const { isLpToken, tokens } = tokenRow; + return ( +
+ {isLpToken ? ( + tokens.map((token: IToken, index) => { + return ( + + {token?.metadata?.symbol} + {index === tokens.length - 1 ? "" : "-"} + {index === tokens.length - 1 ? ( + + LP token + + ) : null} + + ); + }) + ) : ( + + {tokenRow?.symbol} + {is_native ? ( + + Native + + ) : null} + + )} +
+ ); + } return ( {isMobile ? ( @@ -168,7 +236,7 @@ function TokenDetailView({ tokenRow, assets }: { tokenRow: UIAsset; assets: UIAs } function DetailMobile({ tokenDetails, handlePeriodClick }) { - const { router, is_new, is_native, tokenRow } = useContext(DetailData) as any; + const { router, is_new, tokenRow, getIcons, getSymbols } = useContext(DetailData) as any; const [activeTab, setActiveTab] = useState<"market" | "your">("market"); const [open, setOpen] = useState(false); @@ -179,7 +247,16 @@ function DetailMobile({ tokenDetails, handlePeriodClick }) { function openGetTokenModal() { setOpen(true); } - + function getPositionSymbols() { + const { isLpToken, tokens } = tokenRow; + if (isLpToken) { + return tokens?.reduce((acc, token: IToken, index) => { + return `${acc}-${token?.metadata?.symbol}`; + }, ""); + } else { + return tokenRow?.symbol; + } + } const isMarket = activeTab === "market"; const isYour = activeTab === "your"; return ( @@ -199,26 +276,23 @@ function DetailMobile({ tokenDetails, handlePeriodClick }) {
- + {getIcons()} {is_new ? ( - - ) : null} -
-
- {tokenRow?.symbol} - {is_native ? ( - - Native - + 2 ? "-bottom-2.5" : "-bottom-2" + }`} + /> ) : null}
+
{getSymbols()}
- - Get {tokenRow?.symbol} - + Get {getPositionSymbols()} +
{/* Tab */}
@@ -362,7 +436,7 @@ function DetailPc({ tokenDetails, handlePeriodClick }) { } function TokenOverviewMobile() { - const { tokenRow, depositAPY, suppliers_number, borrowers_number } = useContext( + const { tokenRow, suppliers_number, borrowers_number, getIcons, getSymbols } = useContext( DetailData, ) as any; return ( @@ -412,60 +486,17 @@ function TokenOverviewMobile() { } function TokenOverview() { - const { suppliers_number, borrowers_number, tokenRow, depositAPY, borrowAPY, is_native, is_new } = - useContext(DetailData) as any; - function getIcons() { - const { isLpToken, tokens } = tokenRow; - return ( -
- {isLpToken ? ( - tokens.map((token: IToken, index) => { - return ( - - ); - }) - ) : ( - - )} -
- ); - } - function getSymbols() { - const { isLpToken, tokens } = tokenRow; - return ( -
- {isLpToken ? ( - tokens.map((token: IToken, index) => { - return ( - - {token?.metadata?.symbol} - {index === tokens.length - 1 ? "" : "-"} - {index === tokens.length - 1 ? ( - - LP token - - ) : null} - - ); - }) - ) : ( - - {tokenRow?.symbol} - {is_native ? ( - - Native - - ) : null} - - )} -
- ); - } + const { + suppliers_number, + borrowers_number, + tokenRow, + depositAPY, + borrowAPY, + is_native, + is_new, + getIcons, + getSymbols, + } = useContext(DetailData) as any; return (
@@ -638,7 +669,6 @@ function TokenSupplyChart({ tokenDetails, handlePeriodClick }) { disableControl={supplyAnimating} onPeriodClick={(v) => handlePeriodClick({ supplyPeriod: v })} /> - {/* Chart is coming soon */}
);