add amount with value component
This commit is contained in:
saml33
parent
93738b0dcc
commit
8b00e67159
|
|
@ -44,6 +44,7 @@ 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'
|
||||
|
||||
interface BorrowFormProps {
|
||||
onSuccess: () => void
|
||||
|
|
@ -330,62 +331,49 @@ function BorrowForm({ onSuccess, token }: BorrowFormProps) {
|
|||
<p>{t('withdraw-amount')}</p>
|
||||
<p className="font-mono text-th-fgd-2">
|
||||
{isBorrow ? (
|
||||
<>
|
||||
{formatDecimal(Number(tokenBalance), bank.mintDecimals)}{' '}
|
||||
<span className="text-xs text-th-fgd-3">
|
||||
(
|
||||
{formatFixedDecimals(
|
||||
bank.uiPrice * tokenBalance.toNumber(),
|
||||
true
|
||||
)}
|
||||
)
|
||||
</span>
|
||||
</>
|
||||
<AmountWithValue
|
||||
amount={formatDecimal(
|
||||
Number(tokenBalance),
|
||||
bank.mintDecimals
|
||||
)}
|
||||
value={formatFixedDecimals(
|
||||
bank.uiPrice * tokenBalance.toNumber(),
|
||||
true
|
||||
)}
|
||||
/>
|
||||
) : inputAmount ? (
|
||||
<>
|
||||
{formatDecimal(Number(inputAmount), bank.mintDecimals)}{' '}
|
||||
<span className="text-xs text-th-fgd-3">
|
||||
(
|
||||
{formatFixedDecimals(
|
||||
bank.uiPrice * parseFloat(inputAmount),
|
||||
true
|
||||
)}
|
||||
)
|
||||
</span>
|
||||
</>
|
||||
<AmountWithValue
|
||||
amount={formatDecimal(
|
||||
Number(inputAmount),
|
||||
bank.mintDecimals
|
||||
)}
|
||||
value={formatFixedDecimals(
|
||||
bank.uiPrice * parseFloat(inputAmount),
|
||||
true
|
||||
)}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
0 <span className="text-xs text-th-fgd-3">($0.00)</span>
|
||||
</>
|
||||
<AmountWithValue amount="0" value="$0.00" />
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<p>{t('borrow-amount')}</p>
|
||||
<p className="font-mono text-th-fgd-2">
|
||||
{isBorrow ? (
|
||||
<>
|
||||
{formatDecimal(
|
||||
Number(inputAmount) - Number(tokenBalance),
|
||||
bank.mintDecimals
|
||||
)}{' '}
|
||||
<span className="text-xs text-th-fgd-3">
|
||||
(
|
||||
{formatFixedDecimals(
|
||||
bank.uiPrice *
|
||||
(parseFloat(inputAmount) -
|
||||
tokenBalance.toNumber()),
|
||||
true
|
||||
)}
|
||||
)
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
0 <span className="text-xs text-th-fgd-3">($0.00)</span>
|
||||
</>
|
||||
)}
|
||||
</p>
|
||||
{isBorrow ? (
|
||||
<AmountWithValue
|
||||
amount={formatDecimal(
|
||||
Number(inputAmount) - Number(tokenBalance),
|
||||
bank.mintDecimals
|
||||
)}
|
||||
value={formatFixedDecimals(
|
||||
bank.uiPrice *
|
||||
(parseFloat(inputAmount) - tokenBalance.toNumber()),
|
||||
true
|
||||
)}
|
||||
/>
|
||||
) : (
|
||||
<AmountWithValue amount="0" value="$0.00" />
|
||||
)}
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<Tooltip content={t('loan-origination-fee-tooltip')}>
|
||||
|
|
|
|||
|
|
@ -42,6 +42,7 @@ 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'
|
||||
|
||||
interface DepositFormProps {
|
||||
onSuccess: () => void
|
||||
|
|
@ -259,7 +260,7 @@ function DepositForm({ onSuccess, token }: DepositFormProps) {
|
|||
/>
|
||||
<SolBalanceWarnings
|
||||
amount={inputAmount}
|
||||
className="mt-4"
|
||||
className="mt-2"
|
||||
setAmount={setInputAmount}
|
||||
selectedToken={selectedToken}
|
||||
/>
|
||||
|
|
@ -336,25 +337,20 @@ function DepositForm({ onSuccess, token }: DepositFormProps) {
|
|||
/>
|
||||
<div className="flex justify-between">
|
||||
<p>{t('deposit-amount')}</p>
|
||||
<p className="font-mono text-th-fgd-2">
|
||||
{inputAmount ? (
|
||||
<>
|
||||
{formatDecimal(Number(inputAmount), bank.mintDecimals)}{' '}
|
||||
<span className="text-xs text-th-fgd-3">
|
||||
(
|
||||
{formatFixedDecimals(
|
||||
bank.uiPrice * Number(inputAmount),
|
||||
true
|
||||
)}
|
||||
)
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
0 <span className="text-xs text-th-fgd-3">($0.00)</span>
|
||||
</>
|
||||
)}
|
||||
</p>
|
||||
{inputAmount ? (
|
||||
<AmountWithValue
|
||||
amount={formatDecimal(
|
||||
Number(inputAmount),
|
||||
bank.mintDecimals
|
||||
)}
|
||||
value={formatFixedDecimals(
|
||||
bank.uiPrice * Number(inputAmount),
|
||||
true
|
||||
)}
|
||||
/>
|
||||
) : (
|
||||
<AmountWithValue amount="0" value="$0.00" />
|
||||
)}
|
||||
</div>
|
||||
{/* <div className="flex justify-between">
|
||||
<div className="flex items-center">
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@ import {
|
|||
INPUT_TOKEN_DEFAULT,
|
||||
} from 'utils/constants'
|
||||
import ConnectEmptyState from './shared/ConnectEmptyState'
|
||||
import AmountWithValue from './shared/AmountWithValue'
|
||||
|
||||
interface RepayFormProps {
|
||||
onSuccess: () => void
|
||||
|
|
@ -297,25 +298,20 @@ function RepayForm({ onSuccess, token }: RepayFormProps) {
|
|||
/>
|
||||
<div className="flex justify-between">
|
||||
<p>{t('repayment-amount')}</p>
|
||||
<p className="font-mono text-th-fgd-2">
|
||||
{inputAmount ? (
|
||||
<>
|
||||
{formatDecimal(Number(inputAmount), bank.mintDecimals)}{' '}
|
||||
<span className="text-xs text-th-fgd-3">
|
||||
(
|
||||
{formatFixedDecimals(
|
||||
bank.uiPrice * Number(inputAmount),
|
||||
true
|
||||
)}
|
||||
)
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
0 <span className="text-xs text-th-fgd-3">($0.00)</span>
|
||||
</>
|
||||
)}
|
||||
</p>
|
||||
{inputAmount ? (
|
||||
<AmountWithValue
|
||||
amount={formatDecimal(
|
||||
Number(inputAmount),
|
||||
bank.mintDecimals
|
||||
)}
|
||||
value={formatFixedDecimals(
|
||||
bank.uiPrice * Number(inputAmount),
|
||||
true
|
||||
)}
|
||||
/>
|
||||
) : (
|
||||
<AmountWithValue amount="0" value="$0.00" />
|
||||
)}
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<div className="flex items-center">
|
||||
|
|
|
|||
|
|
@ -35,6 +35,7 @@ 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'
|
||||
|
||||
const TokenList = () => {
|
||||
const { t } = useTranslation(['common', 'token', 'trade'])
|
||||
|
|
@ -193,59 +194,65 @@ const TokenList = () => {
|
|||
</div>
|
||||
</Td>
|
||||
<Td className="text-right">
|
||||
<p>
|
||||
{tokenBalance
|
||||
? formatDecimal(tokenBalance, bank.mintDecimals)
|
||||
: '0'}
|
||||
</p>
|
||||
<p className="text-sm text-th-fgd-4">
|
||||
{tokenBalance
|
||||
? `${formatFixedDecimals(
|
||||
tokenBalance * oraclePrice,
|
||||
false,
|
||||
true
|
||||
)}`
|
||||
: '$0.00'}
|
||||
</p>
|
||||
{tokenBalance ? (
|
||||
<AmountWithValue
|
||||
amount={formatDecimal(tokenBalance, bank.mintDecimals)}
|
||||
value={formatFixedDecimals(
|
||||
tokenBalance * oraclePrice,
|
||||
true,
|
||||
true
|
||||
)}
|
||||
stacked
|
||||
/>
|
||||
) : (
|
||||
<AmountWithValue amount="0" value="$0.00" stacked />
|
||||
)}
|
||||
</Td>
|
||||
<Td className="text-right">
|
||||
<p>
|
||||
{inOrders
|
||||
? formatDecimal(inOrders, bank.mintDecimals)
|
||||
: '0'}
|
||||
</p>
|
||||
<p className="text-sm text-th-fgd-4">
|
||||
{formatFixedDecimals(inOrders * oraclePrice, true, true)}
|
||||
</p>
|
||||
{inOrders ? (
|
||||
<AmountWithValue
|
||||
amount={formatDecimal(inOrders, bank.mintDecimals)}
|
||||
value={formatFixedDecimals(
|
||||
inOrders * oraclePrice,
|
||||
true,
|
||||
true
|
||||
)}
|
||||
stacked
|
||||
/>
|
||||
) : (
|
||||
<AmountWithValue amount="0" value="$0.00" stacked />
|
||||
)}
|
||||
</Td>
|
||||
<Td className="text-right">
|
||||
<p>
|
||||
{unsettled
|
||||
? formatDecimal(unsettled, bank.mintDecimals)
|
||||
: '0'}
|
||||
</p>
|
||||
<p className="text-sm text-th-fgd-4">
|
||||
{formatFixedDecimals(
|
||||
unsettled * oraclePrice,
|
||||
false,
|
||||
true
|
||||
)}
|
||||
</p>
|
||||
{unsettled ? (
|
||||
<AmountWithValue
|
||||
amount={formatDecimal(unsettled, bank.mintDecimals)}
|
||||
value={formatFixedDecimals(
|
||||
unsettled * oraclePrice,
|
||||
true,
|
||||
true
|
||||
)}
|
||||
stacked
|
||||
/>
|
||||
) : (
|
||||
<AmountWithValue amount="0" value="$0.00" stacked />
|
||||
)}
|
||||
</Td>
|
||||
<Td>
|
||||
<div className="flex flex-col text-right">
|
||||
<p>
|
||||
{interestAmount
|
||||
? formatDecimal(interestAmount, bank.mintDecimals)
|
||||
: '0'}
|
||||
</p>
|
||||
<p className="text-sm text-th-fgd-4">
|
||||
{formatFixedDecimals(interestValue, true, true)}
|
||||
</p>
|
||||
<AmountWithValue
|
||||
amount={
|
||||
interestAmount
|
||||
? formatDecimal(interestAmount, bank.mintDecimals)
|
||||
: '0'
|
||||
}
|
||||
value={formatFixedDecimals(interestValue, true, true)}
|
||||
stacked
|
||||
/>
|
||||
</div>
|
||||
</Td>
|
||||
<Td>
|
||||
<div className="flex justify-end space-x-2">
|
||||
<div className="flex justify-end space-x-1.5">
|
||||
<p className="text-th-up">
|
||||
{formatDecimal(bank.getDepositRateUi(), 2, {
|
||||
fixed: true,
|
||||
|
|
@ -390,38 +397,32 @@ 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>
|
||||
<div className="flex font-mono">
|
||||
<p className="text-th-fgd-2">
|
||||
{inOrders ? formatDecimal(inOrders, bank.mintDecimals) : '0'}
|
||||
</p>
|
||||
<p className="ml-1 text-th-fgd-4">
|
||||
({formatFixedDecimals(inOrders * oraclePrice, true, true)})
|
||||
</p>
|
||||
</div>
|
||||
<AmountWithValue
|
||||
amount={
|
||||
inOrders ? formatDecimal(inOrders, bank.mintDecimals) : '0'
|
||||
}
|
||||
value={formatFixedDecimals(inOrders * oraclePrice, true, true)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-1">
|
||||
<p className="text-xs text-th-fgd-3">{t('trade:unsettled')}</p>
|
||||
<div className="flex font-mono">
|
||||
<p className="text-th-fgd-2">
|
||||
{unsettled ? formatDecimal(unsettled, bank.mintDecimals) : '0'}
|
||||
</p>
|
||||
<p className="ml-1 text-th-fgd-4">
|
||||
({formatFixedDecimals(unsettled * oraclePrice, true, true)})
|
||||
</p>
|
||||
</div>
|
||||
<AmountWithValue
|
||||
amount={
|
||||
unsettled ? formatDecimal(unsettled, bank.mintDecimals) : '0'
|
||||
}
|
||||
value={formatFixedDecimals(unsettled * oraclePrice, true, true)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-1">
|
||||
<p className="text-xs text-th-fgd-3">{t('interest-earned-paid')}</p>
|
||||
<div className="flex font-mono">
|
||||
<p className="text-th-fgd-2">
|
||||
{interestAmount
|
||||
<AmountWithValue
|
||||
amount={
|
||||
interestAmount
|
||||
? formatDecimal(interestAmount, bank.mintDecimals)
|
||||
: '0'}
|
||||
</p>
|
||||
<p className="ml-1 text-th-fgd-4">
|
||||
({formatFixedDecimals(interestValue, true, true)})
|
||||
</p>
|
||||
</div>
|
||||
: '0'
|
||||
}
|
||||
value={formatFixedDecimals(interestValue, true, true)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-1">
|
||||
<p className="text-xs text-th-fgd-3">{t('rates')}</p>
|
||||
|
|
|
|||
|
|
@ -40,6 +40,7 @@ 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'
|
||||
|
||||
interface WithdrawFormProps {
|
||||
onSuccess: () => void
|
||||
|
|
@ -292,25 +293,20 @@ function WithdrawForm({ onSuccess, token }: WithdrawFormProps) {
|
|||
/>
|
||||
<div className="flex justify-between">
|
||||
<p>{t('withdraw-amount')}</p>
|
||||
<p className="font-mono text-th-fgd-2">
|
||||
{inputAmount ? (
|
||||
<>
|
||||
{formatDecimal(Number(inputAmount), bank.mintDecimals)}{' '}
|
||||
<span className="text-xs text-th-fgd-3">
|
||||
(
|
||||
{formatFixedDecimals(
|
||||
bank.uiPrice * Number(inputAmount),
|
||||
true
|
||||
)}
|
||||
)
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
0 <span className="text-xs text-th-fgd-3">($0.00)</span>
|
||||
</>
|
||||
)}
|
||||
</p>
|
||||
{inputAmount ? (
|
||||
<AmountWithValue
|
||||
amount={formatDecimal(
|
||||
Number(inputAmount),
|
||||
bank.mintDecimals
|
||||
)}
|
||||
value={formatFixedDecimals(
|
||||
bank.uiPrice * Number(inputAmount),
|
||||
true
|
||||
)}
|
||||
/>
|
||||
) : (
|
||||
<AmountWithValue amount="0" value="$0.00" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,24 @@
|
|||
import Decimal from 'decimal.js'
|
||||
|
||||
const AmountWithValue = ({
|
||||
amount,
|
||||
value,
|
||||
stacked,
|
||||
}: {
|
||||
amount: Decimal | number | string
|
||||
value: string
|
||||
stacked?: boolean
|
||||
}) => {
|
||||
return (
|
||||
<p className={`font-mono text-th-fgd-2 ${stacked ? 'text-right' : ''}`}>
|
||||
<>
|
||||
{amount}{' '}
|
||||
<span className={`text-th-fgd-4 ${stacked ? 'block' : ''}`}>
|
||||
{value}
|
||||
</span>
|
||||
</>
|
||||
</p>
|
||||
)
|
||||
}
|
||||
|
||||
export default AmountWithValue
|
||||
|
|
@ -21,6 +21,7 @@ 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'
|
||||
|
||||
const BalancesTable = () => {
|
||||
const { t } = useTranslation(['common', 'trade'])
|
||||
|
|
@ -113,25 +114,35 @@ const BalancesTable = () => {
|
|||
: '$0.00'}
|
||||
</p>
|
||||
</Td>
|
||||
<Td className="text-right font-mono">
|
||||
<p>
|
||||
{inOrders
|
||||
? formatDecimal(Number(inOrders), bank.mintDecimals)
|
||||
: '0'}
|
||||
</p>
|
||||
<p className="text-sm text-th-fgd-4">
|
||||
{formatFixedDecimals(inOrders * bank.uiPrice, true, true)}
|
||||
</p>
|
||||
<Td className="text-right">
|
||||
<AmountWithValue
|
||||
amount={
|
||||
inOrders
|
||||
? formatDecimal(Number(inOrders), bank.mintDecimals)
|
||||
: '0'
|
||||
}
|
||||
value={formatFixedDecimals(
|
||||
inOrders * bank.uiPrice,
|
||||
true,
|
||||
true
|
||||
)}
|
||||
stacked
|
||||
/>
|
||||
</Td>
|
||||
<Td className="text-right font-mono">
|
||||
<p>
|
||||
{unsettled
|
||||
? formatDecimal(Number(unsettled), bank.mintDecimals)
|
||||
: '0'}
|
||||
</p>
|
||||
<p className="text-sm text-th-fgd-4">
|
||||
{formatFixedDecimals(unsettled * bank.uiPrice, true, true)}
|
||||
</p>
|
||||
<Td className="text-right">
|
||||
<AmountWithValue
|
||||
amount={
|
||||
unsettled
|
||||
? formatDecimal(Number(unsettled), bank.mintDecimals)
|
||||
: '0'
|
||||
}
|
||||
value={formatFixedDecimals(
|
||||
unsettled * bank.uiPrice,
|
||||
true,
|
||||
true
|
||||
)}
|
||||
stacked
|
||||
/>
|
||||
</Td>
|
||||
</TrBody>
|
||||
)
|
||||
|
|
@ -172,7 +183,6 @@ const BalancesTable = () => {
|
|||
<div className="mb-0.5 flex justify-end space-x-1.5">
|
||||
<Balance bank={bank} />
|
||||
<span className="text-sm text-th-fgd-4">
|
||||
(
|
||||
{mangoAccount
|
||||
? `${formatFixedDecimals(
|
||||
mangoAccount.getTokenBalanceUi(bank) * bank.uiPrice,
|
||||
|
|
@ -180,7 +190,6 @@ const BalancesTable = () => {
|
|||
true
|
||||
)}`
|
||||
: '$0.00'}
|
||||
)
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex space-x-2">
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@ 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'
|
||||
|
||||
const TokenStats = () => {
|
||||
const { t } = useTranslation(['common', 'token'])
|
||||
|
|
@ -228,23 +229,25 @@ const TokenStats = () => {
|
|||
<p className="mb-0.5 text-right text-xs">
|
||||
{t('total-deposits')}
|
||||
</p>
|
||||
<p className="text-right font-mono text-th-fgd-1">
|
||||
{formatFixedDecimals(deposits)}
|
||||
</p>
|
||||
<p className="text-right text-th-fgd-4">
|
||||
{formatFixedDecimals(deposits * price, true, true)}
|
||||
</p>
|
||||
<AmountWithValue
|
||||
amount={formatFixedDecimals(deposits)}
|
||||
value={formatFixedDecimals(
|
||||
deposits * price,
|
||||
true,
|
||||
true
|
||||
)}
|
||||
stacked
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p className="mb-0.5 text-right text-xs">
|
||||
{t('total-borrows')}
|
||||
</p>
|
||||
<p className="text-right font-mono text-th-fgd-1">
|
||||
{formatFixedDecimals(borrows)}
|
||||
</p>
|
||||
<p className="text-right text-th-fgd-4">
|
||||
{formatFixedDecimals(borrows * price, true, true)}
|
||||
</p>
|
||||
<AmountWithValue
|
||||
amount={formatFixedDecimals(borrows)}
|
||||
value={formatFixedDecimals(borrows * price, true, true)}
|
||||
stacked
|
||||
/>
|
||||
</div>
|
||||
<IconButton
|
||||
onClick={() => handleShowTokenDetails(bank.name)}
|
||||
|
|
|
|||
Loading…
Reference in New Issue