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

simplify amoutwithvalue component

This commit is contained in:
saml33 2023-01-29 12:13:36 +11:00
parent 1f1c10134e
commit 1288f6f659
11 changed files with 107 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
components/BorrowForm.tsx
View File

@ -39,9 +39,9 @@ import useMangoGroup from 'hooks/useMangoGroup'
import TokenVaultWarnings from '@components/shared/TokenVaultWarnings'
import { useWallet } from '@solana/wallet-adapter-react'
import { useEnhancedWallet } from './wallet/EnhancedWalletProvider'
import AmountWithValue from './shared/AmountWithValue'
import FormatNumericValue from './shared/FormatNumericValue'
import { floorToDecimal } from 'utils/numbers'
import BankAmountWithValue from './shared/BankAmountWithValue'
interface BorrowFormProps {
onSuccess: () => void
@ -320,35 +320,26 @@ function BorrowForm({ onSuccess, token }: BorrowFormProps) {
<div className="flex justify-between">
<p>{t('withdraw-amount')}</p>
{isBorrow ? (
<AmountWithValue
amount={tokenBalance}
amountDecimals={bank.mintDecimals}
value={bank.uiPrice * tokenBalance.toNumber()}
/>
) : inputAmount ? (
<AmountWithValue
amount={inputAmount}
amountDecimals={bank.mintDecimals}
value={bank.uiPrice * parseFloat(inputAmount)}
/>
<BankAmountWithValue amount={tokenBalance} bank={bank} />
) : (
<AmountWithValue amount="0" amountDecimals={0} value={0} />
<BankAmountWithValue
amount={inputAmount}
bank={bank}
fixDecimals={!!inputAmount}
/>
)}
</div>
<div className="flex justify-between">
<p>{t('borrow-amount')}</p>
{isBorrow ? (
<AmountWithValue
amount={Number(inputAmount) - Number(tokenBalance)}
amountDecimals={bank.mintDecimals}
value={
bank.uiPrice *
(parseFloat(inputAmount) - tokenBalance.toNumber())
}
/>
) : (
<AmountWithValue amount="0" amountDecimals={0} value={0} />
)}
<BankAmountWithValue
amount={
isBorrow
? Number(inputAmount) - tokenBalance.toNumber()
: 0
}
bank={bank}
fixDecimals={isBorrow}
/>
</div>
<div className="flex justify-between">
<Tooltip content={t('loan-origination-fee-tooltip')}>

12
components/DepositForm.tsx
View File

@ -35,10 +35,10 @@ import useJupiterMints from 'hooks/useJupiterMints'
import useMangoGroup from 'hooks/useMangoGroup'
import { useEnhancedWallet } from './wallet/EnhancedWalletProvider'
import useSolBalance from 'hooks/useSolBalance'
import AmountWithValue from './shared/AmountWithValue'
import FormatNumericValue from './shared/FormatNumericValue'
import Decimal from 'decimal.js'
import { floorToDecimal } from 'utils/numbers'
import BankAmountWithValue from './shared/BankAmountWithValue'
interface DepositFormProps {
onSuccess: () => void
@ -327,15 +327,7 @@ function DepositForm({ onSuccess, token }: DepositFormProps) {
/>
<div className="flex justify-between">
<p>{t('deposit-amount')}</p>
{inputAmount ? (
<AmountWithValue
amount={inputAmount}
amountDecimals={bank.mintDecimals}
value={bank.uiPrice * Number(inputAmount)}
/>
) : (
<AmountWithValue amount="0" amountDecimals={0} value={0} />
)}
<BankAmountWithValue amount={inputAmount} bank={bank} />
</div>
{/* <div className="flex justify-between">
<div className="flex items-center">

12
components/RepayForm.tsx
View File

@ -33,7 +33,7 @@ import {
INPUT_TOKEN_DEFAULT,
} from 'utils/constants'
import ConnectEmptyState from './shared/ConnectEmptyState'
import AmountWithValue from './shared/AmountWithValue'
import BankAmountWithValue from './shared/BankAmountWithValue'
interface RepayFormProps {
onSuccess: () => void
@ -306,15 +306,7 @@ function RepayForm({ onSuccess, token }: RepayFormProps) {
/>
<div className="flex justify-between">
<p>{t('repayment-amount')}</p>
{inputAmount ? (
<AmountWithValue
amount={inputAmount}
amountDecimals={bank.mintDecimals}
value={bank.uiPrice * Number(inputAmount)}
/>
) : (
<AmountWithValue amount="0" amountDecimals={0} value={0} />
)}
<BankAmountWithValue amount={inputAmount} bank={bank} />
</div>
<div className="flex justify-between">
<div className="flex items-center">

39
components/TokenList.tsx
View File

@ -30,8 +30,8 @@ import { WRAPPED_SOL_MINT } from '@project-serum/serum/lib/token-instructions'
import { USDC_MINT } from 'utils/constants'
import { PublicKey } from '@solana/web3.js'
import ActionsLinkButton from './account/ActionsLinkButton'
import AmountWithValue from './shared/AmountWithValue'
import FormatNumericValue from './shared/FormatNumericValue'
import BankAmountWithValue from './shared/BankAmountWithValue'
const TokenList = () => {
const { t } = useTranslation(['common', 'token', 'trade'])
@ -136,7 +136,6 @@ const TokenList = () => {
<tbody>
{banks.map(({ key, value }) => {
const bank = value[0]
const oraclePrice = bank.uiPrice
let logoURI
if (mangoTokens?.length) {
@ -183,34 +182,31 @@ const TokenList = () => {
</div>
</Td>
<Td className="text-right">
<AmountWithValue
<BankAmountWithValue
amount={tokenBalance}
amountDecimals={bank.mintDecimals}
value={tokenBalance * oraclePrice}
bank={bank}
stacked
/>
</Td>
<Td className="text-right">
<AmountWithValue
<BankAmountWithValue
amount={inOrders}
amountDecimals={bank.mintDecimals}
value={inOrders * oraclePrice}
bank={bank}
stacked
/>
</Td>
<Td className="text-right">
<AmountWithValue
<BankAmountWithValue
amount={unsettled}
amountDecimals={bank.mintDecimals}
value={unsettled * oraclePrice}
bank={bank}
stacked
/>
</Td>
<Td>
<div className="flex flex-col text-right">
<AmountWithValue
<BankAmountWithValue
amount={interestAmount}
amountDecimals={bank.mintDecimals}
bank={bank}
value={interestValue}
stacked
/>
@ -275,7 +271,6 @@ const MobileTokenListItem = ({ bank }: { bank: Bank }) => {
(s) => s.mangoAccount.interestTotals.data
)
const symbol = bank.name
const oraclePrice = bank.uiPrice
const router = useRouter()
let logoURI
@ -361,25 +356,17 @@ const MobileTokenListItem = ({ bank }: { bank: Bank }) => {
<div className="mt-4 grid grid-cols-2 gap-4 border-t border-th-bkg-3 pt-4">
<div className="col-span-1">
<p className="text-xs text-th-fgd-3">{t('trade:in-orders')}</p>
<AmountWithValue
amount={inOrders}
amountDecimals={bank.mintDecimals}
value={inOrders * oraclePrice}
/>
<BankAmountWithValue amount={inOrders} bank={bank} />
</div>
<div className="col-span-1">
<p className="text-xs text-th-fgd-3">{t('trade:unsettled')}</p>
<AmountWithValue
amount={unsettled}
amountDecimals={bank.mintDecimals}
value={unsettled * oraclePrice}
/>
<BankAmountWithValue amount={unsettled} bank={bank} />
</div>
<div className="col-span-1">
<p className="text-xs text-th-fgd-3">{t('interest-earned-paid')}</p>
<AmountWithValue
<BankAmountWithValue
amount={interestAmount}
amountDecimals={bank.mintDecimals}
bank={bank}
value={interestValue}
/>
</div>

12
components/WithdrawForm.tsx
View File

@ -35,8 +35,8 @@ import useMangoGroup from 'hooks/useMangoGroup'
import TokenVaultWarnings from '@components/shared/TokenVaultWarnings'
import { useWallet } from '@solana/wallet-adapter-react'
import { useEnhancedWallet } from './wallet/EnhancedWalletProvider'
import AmountWithValue from './shared/AmountWithValue'
import { floorToDecimal } from 'utils/numbers'
import BankAmountWithValue from './shared/BankAmountWithValue'
interface WithdrawFormProps {
onSuccess: () => void
@ -293,15 +293,7 @@ function WithdrawForm({ onSuccess, token }: WithdrawFormProps) {
/>
<div className="flex justify-between">
<p>{t('withdraw-amount')}</p>
{inputAmount ? (
<AmountWithValue
amount={inputAmount}
amountDecimals={bank.mintDecimals}
value={bank.uiPrice * Number(inputAmount)}
/>
) : (
<AmountWithValue amount="0" amountDecimals={0} value={0} />
)}
<BankAmountWithValue amount={inputAmount} bank={bank} />
</div>
</div>
) : null}

20
components/borrow/AssetsBorrowsTable.tsx
View File

@ -14,10 +14,10 @@ import useJupiterMints from 'hooks/useJupiterMints'
import { Table, Td, Th, TrBody, TrHead } from '@components/shared/TableElements'
import useMangoGroup from 'hooks/useMangoGroup'
import mangoStore from '@store/mangoStore'
import AmountWithValue from '@components/shared/AmountWithValue'
import { getMaxWithdrawForBank } from '@components/swap/useTokenMax'
import useMangoAccount from 'hooks/useMangoAccount'
import BorrowRepayModal from '@components/modals/BorrowRepayModal'
import BankAmountWithValue from '@components/shared/BankAmountWithValue'
const AssetsBorrowsTable = () => {
const { t } = useTranslation(['common', 'token'])
@ -85,7 +85,6 @@ const AssetsBorrowsTable = () => {
)?.logoURI
}
const borrows = bank.uiBorrows()
const price = bank.uiPrice
const available =
group && mangoAccount
@ -113,19 +112,19 @@ const AssetsBorrowsTable = () => {
</Td>
<Td>
<div className="flex flex-col text-right">
<AmountWithValue
<BankAmountWithValue
amount={borrows}
value={borrows * price}
bank={bank}
fixDecimals={false}
stacked
/>
</div>
</Td>
<Td>
<div className="flex flex-col text-right">
<AmountWithValue
<BankAmountWithValue
amount={available}
amountDecimals={bank.mintDecimals}
value={available * price}
bank={bank}
stacked
/>
</div>
@ -163,7 +162,6 @@ const AssetsBorrowsTable = () => {
(t) => t.address === bank.mint.toString()
)?.logoURI
}
const price = bank.uiPrice
const available =
group && mangoAccount
@ -193,11 +191,7 @@ const AssetsBorrowsTable = () => {
<p className="mb-0.5 text-right text-xs">
{t('available')}
</p>
<AmountWithValue
amount={available}
amountDecimals={bank.mintDecimals}
value={available * price}
/>
<BankAmountWithValue amount={available} bank={bank} />
</div>
<div>
<p className="mb-0.5 text-right text-xs">{t('rate')}</p>

27
components/borrow/YourBorrowsTable.tsx
View File

@ -14,7 +14,6 @@ import { formatNumericValue } from 'utils/numbers'
import { breakpoints } from 'utils/theme'
import { Table, Td, Th, TrBody, TrHead } from '../shared/TableElements'
import useMangoGroup from 'hooks/useMangoGroup'
import AmountWithValue from '../shared/AmountWithValue'
import ConnectEmptyState from '../shared/ConnectEmptyState'
import { useWallet } from '@solana/wallet-adapter-react'
import Decimal from 'decimal.js'
@ -23,6 +22,7 @@ import { IconButton } from '@components/shared/Button'
import { useCallback, useState } from 'react'
import BorrowRepayModal from '@components/modals/BorrowRepayModal'
import Tooltip from '@components/shared/Tooltip'
import BankAmountWithValue from '@components/shared/BankAmountWithValue'
interface BankWithBalance {
balance: number
@ -111,22 +111,16 @@ const YourBorrowsTable = ({ banks }: { banks: BankWithBalance[] }) => {
</div>
</Td>
<Td className="text-right">
{mangoAccount ? (
<AmountWithValue
amount={borrowedAmount}
amountDecimals={bank.mintDecimals}
value={borrowedAmount * bank.uiPrice}
stacked
/>
) : (
<AmountWithValue amount={0} value={'0'} />
)}
<BankAmountWithValue
amount={borrowedAmount}
bank={bank}
stacked
/>
</Td>
<Td className="text-right">
<AmountWithValue
<BankAmountWithValue
amount={available}
amountDecimals={bank.mintDecimals}
value={available.toNumber() * bank.uiPrice}
bank={bank}
stacked
/>
</Td>
@ -204,10 +198,9 @@ const YourBorrowsTable = ({ banks }: { banks: BankWithBalance[] }) => {
<p className="mb-0.5 text-right text-xs">
{t('borrow:borrowed-amount')}
</p>
<AmountWithValue
<BankAmountWithValue
amount={borrowedAmount}
amountDecimals={bank.mintDecimals}
value={borrowedAmount * bank.uiPrice}
bank={bank}
/>
</div>
<div>

27
components/shared/AmountWithValue.tsx
View File

@ -1,27 +0,0 @@
import Decimal from 'decimal.js'
import FormatNumericValue from './FormatNumericValue'
const AmountWithValue = ({
amount,
amountDecimals,
value,
stacked,
}: {
amount: Decimal | number | string
amountDecimals?: number
value: number | string
stacked?: boolean
}) => {
return (
<p className={`font-mono text-th-fgd-2 ${stacked ? 'text-right' : ''}`}>
<>
<FormatNumericValue value={amount} decimals={amountDecimals} />{' '}
<span className={`text-th-fgd-4 ${stacked ? 'block' : ''}`}>
<FormatNumericValue value={value} decimals={2} isUsd={true} />
</span>
</>
</p>
)
}
export default AmountWithValue

16
components/shared/BalancesTable.tsx
View File

@ -19,11 +19,11 @@ import { LinkButton } from './Button'
import { Table, Td, Th, TrBody, TrHead } from './TableElements'
import useSelectedMarket from 'hooks/useSelectedMarket'
import useMangoGroup from 'hooks/useMangoGroup'
import AmountWithValue from './AmountWithValue'
import ConnectEmptyState from './ConnectEmptyState'
import { useWallet } from '@solana/wallet-adapter-react'
import Decimal from 'decimal.js'
import FormatNumericValue from './FormatNumericValue'
import BankAmountWithValue from './BankAmountWithValue'
const BalancesTable = () => {
const { t } = useTranslation(['common', 'trade'])
@ -119,20 +119,10 @@ const BalancesTable = () => {
</p>
</Td>
<Td className="text-right">
<AmountWithValue
amount={inOrders}
amountDecimals={bank.mintDecimals}
value={inOrders * bank.uiPrice}
stacked
/>
<BankAmountWithValue amount={inOrders} bank={bank} stacked />
</Td>
<Td className="text-right">
<AmountWithValue
amount={unsettled}
amountDecimals={bank.mintDecimals}
value={unsettled * bank.uiPrice}
stacked
/>
<BankAmountWithValue amount={unsettled} bank={bank} stacked />
</Td>
</TrBody>
)

37
components/shared/BankAmountWithValue.tsx Normal file
View File

@ -0,0 +1,37 @@
import { Bank } from '@blockworks-foundation/mango-v4'
import Decimal from 'decimal.js'
import FormatNumericValue from './FormatNumericValue'
const BankAmountWithValue = ({
amount = 0,
bank,
fixDecimals = true,
stacked,
value,
}: {
amount: Decimal | number | string
bank: Bank
fixDecimals?: boolean
stacked?: boolean
value?: number
}) => {
return (
<p className={`font-mono text-th-fgd-2 ${stacked ? 'text-right' : ''}`}>
<>
<FormatNumericValue
value={amount}
decimals={amount && fixDecimals ? bank.mintDecimals : undefined}
/>{' '}
<span className={`text-th-fgd-4 ${stacked ? 'block' : ''}`}>
<FormatNumericValue
value={value ? value : Number(amount) * bank.uiPrice}
decimals={2}
isUsd={true}
/>
</span>
</>
</p>
)
}
export default BankAmountWithValue

28
components/stats/TokenStats.tsx
View File

@ -18,8 +18,8 @@ import useJupiterMints from 'hooks/useJupiterMints'
import { Table, Td, Th, TrBody, TrHead } from '@components/shared/TableElements'
import useMangoGroup from 'hooks/useMangoGroup'
import mangoStore from '@store/mangoStore'
import AmountWithValue from '@components/shared/AmountWithValue'
import FormatNumericValue from '@components/shared/FormatNumericValue'
import BankAmountWithValue from '@components/shared/BankAmountWithValue'
const TokenStats = () => {
const { t } = useTranslation(['common', 'token'])
@ -111,7 +111,6 @@ const TokenStats = () => {
}
const deposits = bank.uiDeposits()
const borrows = bank.uiBorrows()
const price = bank.uiPrice
const available =
deposits - deposits * bank.minVaultToDepositsRatio - borrows
@ -131,28 +130,29 @@ const TokenStats = () => {
</Td>
<Td>
<div className="flex flex-col text-right">
<AmountWithValue
<BankAmountWithValue
amount={deposits.toFixed(4)}
value={(deposits * price).toFixed(2)}
bank={bank}
fixDecimals={false}
stacked
/>
</div>
</Td>
<Td>
<div className="flex flex-col text-right">
<AmountWithValue
<BankAmountWithValue
amount={borrows.toFixed(4)}
value={(borrows * price).toFixed(2)}
bank={bank}
fixDecimals={false}
stacked
/>
</div>
</Td>
<Td>
<div className="flex flex-col text-right">
<AmountWithValue
<BankAmountWithValue
amount={available}
amountDecimals={bank.mintDecimals}
value={(available * price).toFixed(2)}
bank={bank}
stacked
/>
</div>
@ -244,9 +244,10 @@ const TokenStats = () => {
<p className="mb-0.5 text-right text-xs">
{t('total-deposits')}
</p>
<AmountWithValue
<BankAmountWithValue
amount={deposits.toFixed(4)}
value={(deposits * price).toFixed(2)}
bank={bank}
fixDecimals={false}
stacked
/>
</div>
@ -254,9 +255,10 @@ const TokenStats = () => {
<p className="mb-0.5 text-right text-xs">
{t('total-borrows')}
</p>
<AmountWithValue
<BankAmountWithValue
amount={borrows.toFixed(4)}
value={(borrows * price).toFixed(2)}
bank={bank}
fixDecimals={false}
stacked
/>
</div>