blockworks-foundation
/
mango-v4-ui
mirror of https://github.com/blockworks-foundation/mango-v4-ui.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

add to token list mobile

This commit is contained in:
saml33 2023-01-24 21:56:04 +11:00
parent e64129e2d1
commit 63d7d4ca42
1 changed files with 44 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
components/TokenList.tsx
View File

@ -13,11 +13,6 @@ import { useRouter } from 'next/router'
import { Fragment, useCallback, useEffect, useMemo, useState } from 'react' import { Fragment, useCallback, useEffect, useMemo, useState } from 'react'
import { useViewport } from '../hooks/useViewport' import { useViewport } from '../hooks/useViewport'
import mangoStore from '@store/mangoStore' import mangoStore from '@store/mangoStore'
import {
floorToDecimal,
formatDecimal,
formatFixedDecimals,
} from '../utils/numbers'
import { breakpoints } from '../utils/theme' import { breakpoints } from '../utils/theme'
import Switch from './forms/Switch' import Switch from './forms/Switch'
import { IconButton, LinkButton } from './shared/Button' import { IconButton, LinkButton } from './shared/Button'
@ -188,55 +183,28 @@ const TokenList = () => {
</div> </div>
</Td> </Td>
<Td className="text-right"> <Td className="text-right">
{tokenBalance ? ( <AmountWithValue
<AmountWithValue amount={tokenBalance}
amount={tokenBalance} amountDecimals={bank.mintDecimals}
amountDecimals={bank.mintDecimals} value={tokenBalance * oraclePrice}
value={tokenBalance * oraclePrice} stacked
stacked />
/>
) : (
<AmountWithValue
amount="0"
amountDecimals={0}
value={0}
stacked
/>
)}
</Td> </Td>
<Td className="text-right"> <Td className="text-right">
{inOrders ? ( <AmountWithValue
<AmountWithValue amount={inOrders}
amount={inOrders} amountDecimals={bank.mintDecimals}
amountDecimals={bank.mintDecimals} value={inOrders * oraclePrice}
value={inOrders * oraclePrice} stacked
stacked />
/>
) : (
<AmountWithValue
amount="0"
amountDecimals={0}
value={0}
stacked
/>
)}
</Td> </Td>
<Td className="text-right"> <Td className="text-right">
{unsettled ? ( <AmountWithValue
<AmountWithValue amount={unsettled}
amount={unsettled} amountDecimals={bank.mintDecimals}
amountDecimals={bank.mintDecimals} value={unsettled * oraclePrice}
value={unsettled * oraclePrice} stacked
stacked />
/>
) : (
<AmountWithValue
amount="0"
amountDecimals={0}
value={0}
stacked
/>
)}
</Td> </Td>
<Td> <Td>
<div className="flex flex-col text-right"> <div className="flex flex-col text-right">
@ -329,15 +297,10 @@ const MobileTokenListItem = ({ bank }: { bank: Bank }) => {
const interestValue = hasInterestEarned const interestValue = hasInterestEarned
? hasInterestEarned.borrow_interest_usd * -1 + ? hasInterestEarned.borrow_interest_usd * -1 +
hasInterestEarned.deposit_interest_usd hasInterestEarned.deposit_interest_usd
: 0.0
const tokenBalance = mangoAccount
? floorToDecimal(
mangoAccount.getTokenBalanceUi(bank),
bank.mintDecimals
).toNumber()
: 0 : 0
const tokenBalance = mangoAccount ? mangoAccount.getTokenBalanceUi(bank) : 0
const inOrders = spotBalances[bank.mint.toString()]?.inOrders || 0 const inOrders = spotBalances[bank.mint.toString()]?.inOrders || 0
const unsettled = spotBalances[bank.mint.toString()]?.unsettled || 0 const unsettled = spotBalances[bank.mint.toString()]?.unsettled || 0
@ -363,9 +326,10 @@ const MobileTokenListItem = ({ bank }: { bank: Bank }) => {
<span className="mr-1 font-body text-th-fgd-4"> <span className="mr-1 font-body text-th-fgd-4">
{t('balance')}: {t('balance')}:
</span> </span>
{tokenBalance <FormatNumericValue
? formatDecimal(tokenBalance, bank.mintDecimals) value={tokenBalance}
: '0'} decimals={bank.mintDecimals}
/>
</p> </p>
</div> </div>
</div> </div>
@ -398,41 +362,45 @@ const MobileTokenListItem = ({ bank }: { bank: Bank }) => {
<div className="col-span-1"> <div className="col-span-1">
<p className="text-xs text-th-fgd-3">{t('trade:in-orders')}</p> <p className="text-xs text-th-fgd-3">{t('trade:in-orders')}</p>
<AmountWithValue <AmountWithValue
amount={ amount={inOrders}
inOrders ? formatDecimal(inOrders, bank.mintDecimals) : '0' amountDecimals={bank.mintDecimals}
} value={inOrders * oraclePrice}
value={formatFixedDecimals(inOrders * oraclePrice, true, true)}
/> />
</div> </div>
<div className="col-span-1"> <div className="col-span-1">
<p className="text-xs text-th-fgd-3">{t('trade:unsettled')}</p> <p className="text-xs text-th-fgd-3">{t('trade:unsettled')}</p>
<AmountWithValue <AmountWithValue
amount={ amount={unsettled}
unsettled ? formatDecimal(unsettled, bank.mintDecimals) : '0' amountDecimals={bank.mintDecimals}
} value={unsettled * oraclePrice}
value={formatFixedDecimals(unsettled * oraclePrice, true, true)}
/> />
</div> </div>
<div className="col-span-1"> <div className="col-span-1">
<p className="text-xs text-th-fgd-3">{t('interest-earned-paid')}</p> <p className="text-xs text-th-fgd-3">{t('interest-earned-paid')}</p>
<AmountWithValue <AmountWithValue
amount={ amount={interestAmount}
interestAmount amountDecimals={bank.mintDecimals}
? formatDecimal(interestAmount, bank.mintDecimals) value={interestValue}
: '0'
}
value={formatFixedDecimals(interestValue, true, true)}
/> />
</div> </div>
<div className="col-span-1"> <div className="col-span-1">
<p className="text-xs text-th-fgd-3">{t('rates')}</p> <p className="text-xs text-th-fgd-3">{t('rates')}</p>
<p className="space-x-2 font-mono"> <p className="space-x-2 font-mono">
<span className="text-th-up"> <span className="text-th-up">
{formatDecimal(bank.getDepositRate().toNumber(), 2)}% <FormatNumericValue
value={bank.getDepositRateUi()}
decimals={2}
/>
%
</span> </span>
<span className="font-normal text-th-fgd-4">|</span> <span className="font-normal text-th-fgd-4">|</span>
<span className="text-th-down"> <span className="text-th-down">
{formatDecimal(bank.getBorrowRate().toNumber(), 2)}% <FormatNumericValue
value={bank.getBorrowRateUi()}
decimals={2}
roundUp
/>
%
</span> </span>
</p> </p>
</div> </div>