diff --git a/src/components/Borrow/BorrowActionButtons.tsx b/src/components/Borrow/BorrowActionButtons.tsx index 22fd6e5d..ab902d15 100644 --- a/src/components/Borrow/BorrowActionButtons.tsx +++ b/src/components/Borrow/BorrowActionButtons.tsx @@ -1,7 +1,7 @@ import { useCallback } from 'react' import Button from 'components/Button' -import { Plus } from 'components/Icons' +import { Plus, ReceiptCheck } from 'components/Icons' import useStore from 'store' import { getEnabledMarketAssets } from 'utils/assets' @@ -29,13 +29,15 @@ export default function BorrowActionButtons(props: Props) { return (
) } diff --git a/src/components/Borrow/BorrowTable.tsx b/src/components/Borrow/BorrowTable.tsx index 2efc2b01..aa7fcf1d 100644 --- a/src/components/Borrow/BorrowTable.tsx +++ b/src/components/Borrow/BorrowTable.tsx @@ -33,7 +33,7 @@ export default function BorrowTable(props: Props) { resetExpanded={table.resetExpanded} rowData={row} expandedActionButtons={} - expandedDetails={} + expandedDetails={} /> ) }, diff --git a/src/components/Earn/Lend/LendingMarketsTable.tsx b/src/components/Earn/Lend/LendingMarketsTable.tsx index e0db01f7..06025a94 100644 --- a/src/components/Earn/Lend/LendingMarketsTable.tsx +++ b/src/components/Earn/Lend/LendingMarketsTable.tsx @@ -32,7 +32,7 @@ export default function LendingMarketsTable(props: Props) { resetExpanded={table.resetExpanded} rowData={row} expandedActionButtons={} - expandedDetails={} + expandedDetails={} /> ) }, diff --git a/src/components/Icons/ReceiptCheck.svg b/src/components/Icons/ReceiptCheck.svg new file mode 100644 index 00000000..23e97c01 --- /dev/null +++ b/src/components/Icons/ReceiptCheck.svg @@ -0,0 +1,8 @@ + + + diff --git a/src/components/Icons/index.ts b/src/components/Icons/index.ts index 016320b7..0e763712 100644 --- a/src/components/Icons/index.ts +++ b/src/components/Icons/index.ts @@ -31,6 +31,7 @@ export { default as OverlayMark } from 'components/Icons/OverlayMark.svg' export { default as Plus } from 'components/Icons/Plus.svg' export { default as PlusCircled } from 'components/Icons/PlusCircled.svg' export { default as Questionmark } from 'components/Icons/Questionmark.svg' +export { default as ReceiptCheck } from 'components/Icons/ReceiptCheck.svg' export { default as Search } from 'components/Icons/Search.svg' export { default as Shield } from 'components/Icons/Shield.svg' export { default as SortAsc } from 'components/Icons/SortAsc.svg' @@ -41,6 +42,6 @@ export { default as StarOutlined } from 'components/Icons/StarOutlined.svg' export { default as Subtract } from 'components/Icons/Subtract.svg' export { default as SwapIcon } from 'components/Icons/SwapIcon.svg' export { default as TrashBin } from 'components/Icons/TrashBin.svg' -export { default as Wallet } from 'components/Icons/Wallet.svg' export { default as VerticalThreeLine } from 'components/Icons/VerticalThreeLine.svg' +export { default as Wallet } from 'components/Icons/Wallet.svg' // @endindex diff --git a/src/components/MarketAssetTable/MarketDetails.tsx b/src/components/MarketAssetTable/MarketDetails.tsx index cc9344c6..896171ae 100644 --- a/src/components/MarketAssetTable/MarketDetails.tsx +++ b/src/components/MarketAssetTable/MarketDetails.tsx @@ -6,6 +6,7 @@ import useDisplayCurrencyPrice from 'hooks/useDisplayCurrencyPrice' interface Props { data: BorrowMarketTableData | LendingMarketTableData + type: 'borrow' | 'lend' } interface Detail { @@ -14,12 +15,13 @@ interface Detail { title: string } -export default function MarketDetails({ data }: Props) { +export default function MarketDetails({ data, type }: Props) { const { convertAmount, getConversionRate, symbol: displayCurrencySymbol, } = useDisplayCurrencyPrice() + const { asset, marketMaxLtv, @@ -30,48 +32,73 @@ export default function MarketDetails({ data }: Props) { const totalBorrowed = marketDepositAmount.minus(marketLiquidityAmount) - const details: Detail[] = useMemo( - () => [ - { - amount: convertAmount(asset, marketDepositAmount).toNumber(), - options: { abbreviated: true, suffix: ` ${displayCurrencySymbol}` }, - title: 'Total Supplied', - }, - { - amount: marketMaxLtv * 100, - options: { minDecimals: 2, maxDecimals: 2, suffix: '%' }, - title: 'Max LTV', - }, - { - amount: marketLiquidationThreshold * 100, - options: { minDecimals: 2, maxDecimals: 2, suffix: '%' }, - title: 'Liquidation Threshold', - }, - { - amount: getConversionRate(asset.denom).toNumber(), - options: { minDecimals: 2, maxDecimals: 2, suffix: ` ${displayCurrencySymbol}` }, - title: 'Oracle Price', - }, - { - amount: totalBorrowed.dividedBy(marketDepositAmount).multipliedBy(100).toNumber(), - options: { minDecimals: 2, maxDecimals: 2, suffix: '%' }, - title: 'Utilization Rate', - }, - ], - [ - asset, - marketDepositAmount, - marketLiquidationThreshold, - marketMaxLtv, - displayCurrencySymbol, - convertAmount, - getConversionRate, - totalBorrowed, - ], - ) + const details: Detail[] = useMemo(() => { + function getLendingMarketDetails() { + return [ + { + amount: convertAmount(asset, marketDepositAmount).toNumber(), + options: { abbreviated: true, suffix: ` ${displayCurrencySymbol}` }, + title: 'Total Supplied', + }, + { + amount: marketMaxLtv * 100, + options: { minDecimals: 2, maxDecimals: 2, suffix: '%' }, + title: 'Max LTV', + }, + { + amount: marketLiquidationThreshold * 100, + options: { minDecimals: 2, maxDecimals: 2, suffix: '%' }, + title: 'Liquidation Threshold', + }, + { + amount: getConversionRate(asset.denom).toNumber(), + options: { minDecimals: 2, maxDecimals: 2, suffix: ` ${displayCurrencySymbol}` }, + title: 'Oracle Price', + }, + { + amount: totalBorrowed.dividedBy(marketDepositAmount).multipliedBy(100).toNumber(), + options: { minDecimals: 2, maxDecimals: 2, suffix: '%' }, + title: 'Utilization Rate', + }, + ] + } + + function getBorrowMarketDetails() { + return [ + { + amount: convertAmount(asset, totalBorrowed).toNumber(), + options: { abbreviated: true, suffix: ` ${displayCurrencySymbol}` }, + title: 'Total Borrowed', + }, + { + amount: getConversionRate(asset.denom).toNumber(), + options: { minDecimals: 2, maxDecimals: 2, suffix: ` ${displayCurrencySymbol}` }, + title: 'Oracle Price', + }, + { + amount: totalBorrowed.dividedBy(marketDepositAmount).multipliedBy(100).toNumber(), + options: { minDecimals: 2, maxDecimals: 2, suffix: '%' }, + title: 'Utilization Rate', + }, + ] + } + + if (type === 'lend') return getLendingMarketDetails() + return getBorrowMarketDetails() + }, [ + type, + asset, + marketDepositAmount, + marketMaxLtv, + marketLiquidationThreshold, + totalBorrowed, + displayCurrencySymbol, + convertAmount, + getConversionRate, + ]) return ( -
+
{details.map((detail, index) => ( () - const [selectedAccount, setSelectedAccount] = useState(currentAccount) const [isConfirming, setIsConfirming] = useToggle() + const [borrowToWallet, setBorrowToWallet] = useToggle() const modal = useStore((s) => s.borrowModal) const borrow = useStore((s) => s.borrow) const repay = useStore((s) => s.repay) const asset = modal?.asset ?? ASSETS[0] - const accounts = useStore((s) => s.accounts) - const accountOptions = accounts?.map((account) => { - return { value: account.id, label: `Account ${account.id}` } - }) const isRepay = modal?.isRepay ?? false function resetState() { @@ -53,21 +49,22 @@ export default function BorrowModal() { } async function onConfirmClick() { - if (!modal?.asset) return + if (!modal?.asset || !currentAccount) return setIsConfirming(true) let result if (isRepay) { result = await repay({ fee: hardcodedFee, - accountId: selectedAccount?.id ?? '0', + accountId: currentAccount.id, coin: BNCoin.fromDenomAndBigNumber(modal.asset.denom, amount), accountBalance: percentage === 100, }) } else { result = await borrow({ fee: hardcodedFee, - accountId: selectedAccount?.id ?? '0', + accountId: currentAccount.id, coin: { denom: modal.asset.denom, amount: amount.toString() }, + borrowToWallet, }) } @@ -95,10 +92,6 @@ export default function BorrowModal() { const max = BN(isRepay ? getDebtAmount(modal) : modal?.marketData?.liquidity?.amount ?? '0') - useEffect(() => { - if (!selectedAccount) setSelectedAccount(currentAccount) - }, [selectedAccount, currentAccount]) - useEffect(() => { if (!modal?.asset) return @@ -167,19 +160,17 @@ export default function BorrowModal() { maxText='Max' /> - - {isRepay ? 'Repay for' : 'Borrow to'} - -
-