66 lines
1.9 KiB
TypeScript
66 lines
1.9 KiB
TypeScript
import { Bank } from '@blockworks-foundation/mango-v4'
|
|
import FormatNumericValue from '@components/shared/FormatNumericValue'
|
|
import TokenLogo from '@components/shared/TokenLogo'
|
|
|
|
const ActionTokenItem = ({
|
|
bank,
|
|
customValue,
|
|
onSelect,
|
|
roundUp,
|
|
showBorrowRates,
|
|
showDepositRates,
|
|
}: {
|
|
bank: Bank
|
|
customValue: number
|
|
onSelect: (x: string) => void
|
|
roundUp?: boolean
|
|
showBorrowRates?: boolean
|
|
showDepositRates?: boolean
|
|
}) => {
|
|
const { name } = bank
|
|
|
|
return (
|
|
<button
|
|
className="flex w-full items-center rounded-md border border-th-bkg-4 bg-th-bkg-1 px-4 py-3 focus-visible:border-th-fgd-4 disabled:cursor-not-allowed disabled:opacity-30 md:hover:border-th-fgd-4 md:disabled:hover:border-th-bkg-4"
|
|
onClick={() => onSelect(name)}
|
|
disabled={customValue <= 0}
|
|
>
|
|
<div
|
|
className={`flex ${
|
|
!showBorrowRates && !showDepositRates ? 'w-1/2' : 'w-1/4'
|
|
} items-center`}
|
|
>
|
|
<div className="mr-2.5 flex flex-shrink-0 items-center">
|
|
<TokenLogo bank={bank} />
|
|
</div>
|
|
<p className="text-left text-th-fgd-1">{name}</p>
|
|
</div>
|
|
{showDepositRates ? (
|
|
<div className="w-1/4 text-right font-mono">
|
|
<p className="text-th-up">
|
|
<FormatNumericValue value={bank.getDepositRateUi()} decimals={2} />%
|
|
</p>
|
|
</div>
|
|
) : null}
|
|
{showBorrowRates ? (
|
|
<div className="w-1/4 text-right font-mono">
|
|
<p className="text-th-down">
|
|
<FormatNumericValue value={bank.getBorrowRateUi()} decimals={2} />%
|
|
</p>
|
|
</div>
|
|
) : null}
|
|
<div className="w-1/2 pl-3 text-right">
|
|
<p className="truncate font-mono text-th-fgd-1">
|
|
<FormatNumericValue
|
|
value={customValue}
|
|
decimals={bank.mintDecimals}
|
|
roundUp={roundUp}
|
|
/>
|
|
</p>
|
|
</div>
|
|
</button>
|
|
)
|
|
}
|
|
|
|
export default ActionTokenItem
|