From ed157d7d09cc2d1fc283133cdce5868b85db4a42 Mon Sep 17 00:00:00 2001 From: saml33 Date: Sat, 18 Mar 2023 23:15:01 +1100 Subject: [PATCH] use disclosure for mobile expanding rows --- components/TokenList.tsx | 199 ++++++++++--------- components/shared/BalancesTable.tsx | 146 +++++++------- components/stats/TokenStats.tsx | 296 ++++++++++++++-------------- 3 files changed, 326 insertions(+), 315 deletions(-) diff --git a/components/TokenList.tsx b/components/TokenList.tsx index f9372604..530c9aed 100644 --- a/components/TokenList.tsx +++ b/components/TokenList.tsx @@ -1,5 +1,5 @@ import { Bank, MangoAccount } from '@blockworks-foundation/mango-v4' -import { Transition } from '@headlessui/react' +import { Disclosure, Transition } from '@headlessui/react' import { ChevronDownIcon, EllipsisHorizontalIcon, @@ -9,7 +9,7 @@ import { useWallet } from '@solana/wallet-adapter-react' import { useTranslation } from 'next-i18next' import Image from 'next/legacy/image' import { useRouter } from 'next/router' -import { Fragment, useCallback, useEffect, useMemo, useState } from 'react' +import { useCallback, useEffect, useMemo, useState } from 'react' import { useViewport } from '../hooks/useViewport' import mangoStore from '@store/mangoStore' import { breakpoints } from '../utils/theme' @@ -215,7 +215,7 @@ const TokenList = () => { ) : ( -
+
{filteredBanks.map((b) => { return })} @@ -229,7 +229,6 @@ export default TokenList const MobileTokenListItem = ({ bank }: { bank: BankWithBalance }) => { const { t } = useTranslation(['common', 'token']) - const [showTokenDetails, setShowTokenDetails] = useState(false) const { mangoTokens } = useJupiterMints() const spotBalances = mangoStore((s) => s.mangoAccount.spotBalances) const { mangoAccount } = useMangoAccount() @@ -240,7 +239,7 @@ const MobileTokenListItem = ({ bank }: { bank: BankWithBalance }) => { const mint = tokenBank.mint const symbol = tokenBank.name - let logoURI + let logoURI: string | undefined if (mangoTokens?.length) { logoURI = mangoTokens.find( (t) => t.address === tokenBank.mint.toString() @@ -266,98 +265,106 @@ const MobileTokenListItem = ({ bank }: { bank: BankWithBalance }) => { const unsettled = spotBalances[mint.toString()]?.unsettled || 0 return ( - +
+
+ + + +
+
+

+ {t('trade:in-orders')} +

+ +
+
+

+ {t('trade:unsettled')} +

+ +
+
+

+ {t('interest-earned-paid')} +

+ +
+
+

{t('rates')}

+

+ + + % + + | + + + % + +

+
+
+ + + + )} + ) } diff --git a/components/shared/BalancesTable.tsx b/components/shared/BalancesTable.tsx index 961680e2..9ed1f003 100644 --- a/components/shared/BalancesTable.tsx +++ b/components/shared/BalancesTable.tsx @@ -11,7 +11,7 @@ import { useViewport } from 'hooks/useViewport' import { useTranslation } from 'next-i18next' import Image from 'next/legacy/image' import { useRouter } from 'next/router' -import { Fragment, useCallback, useMemo, useState } from 'react' +import { useCallback, useMemo } from 'react' import { floorToDecimal, formatNumericValue, @@ -30,11 +30,10 @@ import useBanksWithBalances, { BankWithBalance, } from 'hooks/useBanksWithBalances' import useUnownedAccount from 'hooks/useUnownedAccount' -import { Transition } from '@headlessui/react' +import { Disclosure, Transition } from '@headlessui/react' const BalancesTable = () => { const { t } = useTranslation(['common', 'trade']) - const [showTokenDetails, setShowTokenDetails] = useState('') const { mangoAccount, mangoAccountAddress } = useMangoAccount() const spotBalances = mangoStore((s) => s.mangoAccount.spotBalances) const { mangoTokens } = useJupiterMints() @@ -57,14 +56,6 @@ const BalancesTable = () => { return [] }, [banks]) - const toggleTokenDetails = (token: string) => { - if (showTokenDetails === token) { - setShowTokenDetails('') - } else { - setShowTokenDetails(token) - } - } - return filteredBanks.length ? ( showTableView ? ( @@ -127,11 +118,11 @@ const BalancesTable = () => {
) : ( - <> +
{filteredBanks.map((b, i) => { const bank = b.bank - let logoURI + let logoURI: string | undefined if (mangoTokens.length) { logoURI = mangoTokens.find( (t) => t.address === bank.mint.toString() @@ -142,69 +133,78 @@ const BalancesTable = () => { const unsettled = spotBalances[bank.mint.toString()]?.unsettled || 0 return ( - +
+ + + +
+
+

+ {t('trade:in-orders')} +

+ +
+
+

+ {t('trade:unsettled')} +

+ +
+
+ + + + )} + ) })} - + ) ) : mangoAccountAddress || connected ? (
diff --git a/components/stats/TokenStats.tsx b/components/stats/TokenStats.tsx index 6cf11c16..e85fd958 100644 --- a/components/stats/TokenStats.tsx +++ b/components/stats/TokenStats.tsx @@ -1,4 +1,4 @@ -import { Transition } from '@headlessui/react' +import { Disclosure, Transition } from '@headlessui/react' import { ChevronDownIcon, ChevronRightIcon, @@ -6,7 +6,7 @@ import { } from '@heroicons/react/20/solid' import { useTranslation } from 'next-i18next' import Image from 'next/legacy/image' -import { Fragment, useEffect, useState } from 'react' +import { useEffect } from 'react' import { useViewport } from '../../hooks/useViewport' import { breakpoints } from '../../utils/theme' import { LinkButton } from '../shared/Button' @@ -27,7 +27,6 @@ const TokenStats = () => { const { t } = useTranslation(['common', 'token']) const actions = mangoStore.getState().actions const initialStatsLoad = mangoStore((s) => s.tokenStats.initialLoad) - const [showTokenDetails, setShowTokenDetails] = useState('') const { group } = useMangoGroup() const { mangoTokens } = useJupiterMints() const { width } = useViewport() @@ -41,12 +40,6 @@ const TokenStats = () => { } }, [group]) - const handleShowTokenDetails = (bank: Bank) => { - showTokenDetails === bank.name - ? setShowTokenDetails('') - : setShowTokenDetails(bank.name) - } - const goToTokenPage = (bank: Bank) => { router.push(`/token/${bank.name}`, undefined, { shallow: true }) } @@ -244,9 +237,9 @@ const TokenStats = () => {
) : (
- {banks.map((b) => { + {banks.map((b, i) => { const bank = b.bank - let logoURI + let logoURI: string | undefined if (mangoTokens?.length) { logoURI = mangoTokens.find( (t) => t.address === bank.mint.toString() @@ -266,142 +259,153 @@ const TokenStats = () => { bank.mintDecimals ) return ( - <> - - -
-
-

{t('total-deposits')}

- -
-
-

{t('total-borrows')}

- -
-
- -

- {t('available')} -

- - -
-
- -

{t('fees')}

- - -
-
-

{t('rates')}

-

- - - % - - | - - - % - -

-
-
-

{t('utilization')}

-

- {bank.uiDeposits() > 0 - ? ( - (bank.uiBorrows() / bank.uiDeposits()) * - 100 - ).toFixed(1) - : '0.0'} - % -

-
-
- -

- {t('asset-liability-weight')} -

- -
-

- {bank.initAssetWeight.toFixed(2)} -

- | -

- {bank.initLiabWeight.toFixed(2)} -

-
-
-
- goToTokenPage(bank)} - > - {t('token:token-details')} - - -
-
- - + + + +
+
+

+ {t('total-deposits')} +

+ +
+
+

+ {t('total-borrows')} +

+ +
+
+ +

+ {t('available')} +

+ + +
+
+ +

+ {t('fees')} +

+ + +
+
+

{t('rates')}

+

+ + + % + + + | + + + + % + +

+
+
+

{t('utilization')}

+

+ {bank.uiDeposits() > 0 + ? ( + (bank.uiBorrows() / bank.uiDeposits()) * + 100 + ).toFixed(1) + : '0.0'} + % +

+
+
+ +

+ {t('asset-liability-weight')} +

+ +
+

+ {bank.initAssetWeight.toFixed(2)} +

+ | +

+ {bank.initLiabWeight.toFixed(2)} +

+
+
+
+ goToTokenPage(bank)} + > + {t('token:token-details')} + + +
+
+ + + + )} + ) })}