diff --git a/apps/web-app/src/components/MoneyMarket/components/BorrowAssetsList/BorrowAssetsList.types.tsx b/apps/web-app/src/components/MoneyMarket/components/BorrowAssetsList/BorrowAssetsList.types.tsx index 072bcac..57d7386 100644 --- a/apps/web-app/src/components/MoneyMarket/components/BorrowAssetsList/BorrowAssetsList.types.tsx +++ b/apps/web-app/src/components/MoneyMarket/components/BorrowAssetsList/BorrowAssetsList.types.tsx @@ -2,7 +2,7 @@ export type BorrowAsset = { icon: string; symbol: string; balance: string; - balanceUsd: string; + balanceUsd: number; apy: string; isSortable?: boolean; }; diff --git a/apps/web-app/src/components/MoneyMarket/components/BorrowAssetsList/components/AssetsTable/AssetsTable.constants.tsx b/apps/web-app/src/components/MoneyMarket/components/BorrowAssetsList/components/AssetsTable/AssetsTable.constants.tsx index 3ac7b1b..900ff62 100644 --- a/apps/web-app/src/components/MoneyMarket/components/BorrowAssetsList/components/AssetsTable/AssetsTable.constants.tsx +++ b/apps/web-app/src/components/MoneyMarket/components/BorrowAssetsList/components/AssetsTable/AssetsTable.constants.tsx @@ -7,7 +7,7 @@ export const BORROW_ASSETS: BorrowAsset[] = [ { symbol: 'USDT', balance: '10.5', - balanceUsd: '10.5', + balanceUsd: 10.5, apy: '50.90', icon: iconUsdt, isSortable: true, @@ -15,7 +15,7 @@ export const BORROW_ASSETS: BorrowAsset[] = [ { symbol: 'WBTC', balance: '0.09', - balanceUsd: '150.0', + balanceUsd: 150.0, apy: '2.75', icon: iconWbtc, isSortable: true, @@ -23,7 +23,7 @@ export const BORROW_ASSETS: BorrowAsset[] = [ { symbol: 'USDC', balance: '1.566', - balanceUsd: '1.566', + balanceUsd: 1.566, apy: '15.34', icon: iconUsdc, isSortable: true, diff --git a/apps/web-app/src/components/MoneyMarket/components/BorrowAssetsList/components/AssetsTable/AssetsTable.tsx b/apps/web-app/src/components/MoneyMarket/components/BorrowAssetsList/components/AssetsTable/AssetsTable.tsx index 8227a86..9ef39ed 100644 --- a/apps/web-app/src/components/MoneyMarket/components/BorrowAssetsList/components/AssetsTable/AssetsTable.tsx +++ b/apps/web-app/src/components/MoneyMarket/components/BorrowAssetsList/components/AssetsTable/AssetsTable.tsx @@ -6,14 +6,11 @@ import { TableHeader, TableRow, } from '@/components/ui/table/table'; -import React, { useCallback, useEffect, useState, type FC } from 'react'; +import React, { useEffect, useState, type FC } from 'react'; +import { AmountRenderer } from '@/components/ui/amount-renderer'; import { Button } from '@/components/ui/button'; import { InfoButton } from '@/components/ui/info-button'; -import { - OrderType, - type OrderSorting, -} from '@/components/ui/table/table.types'; import { sdk } from '@/lib/sdk'; import { BorrowRateMode, @@ -28,45 +25,12 @@ type AssetsTableProps = { }; export const AssetsTable: FC = ({ assets }) => { - const [sortDirection, setSortDirection] = useState( - OrderType.ASC, - ); const [sortedAssets, setSortedAssets] = useState(assets); useEffect(() => { setSortedAssets(assets); }, [assets]); - const sortAssets = useCallback( - (column: keyof MoneyMarketPoolReserve) => { - const newSortDirection = - sortDirection === OrderType.ASC ? OrderType.DESC : OrderType.ASC; - setSortDirection(newSortDirection); - - // const sorted = [...sortedAssets].sort((a, b) => { - // if (column === OrderColumn.SYMBOL) { - // return newSortDirection === OrderType.ASC - // ? a[column].localeCompare(b[column]) - // : b[column].localeCompare(a[column]); - // } else if (column === OrderColumn.BALANCE) { - // const balanceA = parseFloat(a.balance.replace(/,/g, '')); - // const balanceB = parseFloat(b.balance.replace(/,/g, '')); - // return newSortDirection === OrderType.ASC - // ? balanceA - balanceB - // : balanceB - balanceA; - // } else if (column === OrderColumn.APY) { - // const apyA = parseFloat(a.apy.replace('%', '')); - // const apyB = parseFloat(b.apy.replace('%', '')); - // return newSortDirection === OrderType.ASC ? apyA - apyB : apyB - apyA; - // } - // return 0; - // }); - - // setSortedAssets(sorted); - }, - [sortDirection], - ); - const { address } = useAccount(); const { writeContractAsync } = useWriteContract(); @@ -83,7 +47,8 @@ export const AssetsTable: FC = ({ assets }) => { console.log('Transaction Request:', msg); if (msg.length) { - const data = await writeContractAsync(msg[0]); + const { chain, ...contractParams } = msg[0]; + const data = await writeContractAsync(contractParams); console.log('Transaction Response:', data); } // const d = await signMessageAsync(msg); @@ -150,7 +115,7 @@ export const AssetsTable: FC = ({ assets }) => { {sortedAssets.map((asset, index) => ( - +
@@ -167,12 +132,25 @@ export const AssetsTable: FC = ({ assets }) => {
-

- {Decimal.from(asset.totalLiquidity).toString()}{' '} + + {asset.token.symbol} -

+

- ~${asset.totalLiquidity} +

diff --git a/apps/web-app/src/components/MoneyMarket/components/BorrowPositionsList/BorrowPositionsList.tsx b/apps/web-app/src/components/MoneyMarket/components/BorrowPositionsList/BorrowPositionsList.tsx index 403035d..2d674f2 100644 --- a/apps/web-app/src/components/MoneyMarket/components/BorrowPositionsList/BorrowPositionsList.tsx +++ b/apps/web-app/src/components/MoneyMarket/components/BorrowPositionsList/BorrowPositionsList.tsx @@ -1,6 +1,7 @@ import { Accordion } from '@/components/ui/accordion'; import { Settings, Zap } from 'lucide-react'; import { useState, type FC } from 'react'; +import { AmountRenderer } from '../../../ui/amount-renderer'; import { PoolPositionStat } from '../PoolPositionStat/PoolPositionStat'; import type { BorrowPosition } from './BorrowPositionsList.types'; import { AssetsTable } from './components/AssetsTable/AssetsTable'; @@ -46,17 +47,21 @@ export const BorrowPositionsList: FC = ({
+ } /> + } /> } />
diff --git a/apps/web-app/src/components/MoneyMarket/components/BorrowPositionsList/BorrowPositionsList.types.tsx b/apps/web-app/src/components/MoneyMarket/components/BorrowPositionsList/BorrowPositionsList.types.tsx index 52660b9..eab9b00 100644 --- a/apps/web-app/src/components/MoneyMarket/components/BorrowPositionsList/BorrowPositionsList.types.tsx +++ b/apps/web-app/src/components/MoneyMarket/components/BorrowPositionsList/BorrowPositionsList.types.tsx @@ -2,7 +2,7 @@ export type BorrowPosition = { icon: string; symbol: string; balance: string; - balanceUsd: string; + balanceUsd: number; apy: string; apyType: [number, number]; isSortable?: boolean; diff --git a/apps/web-app/src/components/MoneyMarket/components/BorrowPositionsList/components/AssetsTable/AssetsTable.constants.tsx b/apps/web-app/src/components/MoneyMarket/components/BorrowPositionsList/components/AssetsTable/AssetsTable.constants.tsx index 1251fed..1463265 100644 --- a/apps/web-app/src/components/MoneyMarket/components/BorrowPositionsList/components/AssetsTable/AssetsTable.constants.tsx +++ b/apps/web-app/src/components/MoneyMarket/components/BorrowPositionsList/components/AssetsTable/AssetsTable.constants.tsx @@ -5,7 +5,7 @@ export const BORROW_POSITIONS: BorrowPosition[] = [ { symbol: 'USDT', balance: '1.01234566', - balanceUsd: '159,489.70', + balanceUsd: 159489.7, apy: '15.34', apyType: [0, 5.12], icon: iconTether, @@ -14,7 +14,7 @@ export const BORROW_POSITIONS: BorrowPosition[] = [ { symbol: 'USDT', balance: '2.01234566', - balanceUsd: '159,489.70', + balanceUsd: 159489.7, apy: '4.4', apyType: [1, 6.12], icon: iconTether, diff --git a/apps/web-app/src/components/MoneyMarket/components/BorrowPositionsList/components/AssetsTable/AssetsTable.tsx b/apps/web-app/src/components/MoneyMarket/components/BorrowPositionsList/components/AssetsTable/AssetsTable.tsx index 0157ca0..3c8f7f1 100644 --- a/apps/web-app/src/components/MoneyMarket/components/BorrowPositionsList/components/AssetsTable/AssetsTable.tsx +++ b/apps/web-app/src/components/MoneyMarket/components/BorrowPositionsList/components/AssetsTable/AssetsTable.tsx @@ -16,6 +16,7 @@ import { } from 'react'; import iconSort from '@/assets/lend/icon-sort.svg'; +import { AmountRenderer } from '@/components/ui/amount-renderer'; import { Button } from '@/components/ui/button'; import { InfoButton } from '@/components/ui/info-button'; import { @@ -228,15 +229,15 @@ export const AssetsTable: FC = ({ assets }) => { -

{asset.balance}

+

- ~${asset.balanceUsd} +

-

{selected}%

+
diff --git a/apps/web-app/src/components/MoneyMarket/components/LendAssetsList/LendAssetsList.types.tsx b/apps/web-app/src/components/MoneyMarket/components/LendAssetsList/LendAssetsList.types.tsx index cac1eba..ff52218 100644 --- a/apps/web-app/src/components/MoneyMarket/components/LendAssetsList/LendAssetsList.types.tsx +++ b/apps/web-app/src/components/MoneyMarket/components/LendAssetsList/LendAssetsList.types.tsx @@ -2,6 +2,7 @@ export type LendAsset = { icon: string; symbol: string; balance: string; + balanceUsd?: number; apy: string; canBeCollateral: boolean; isSortable?: boolean; diff --git a/apps/web-app/src/components/MoneyMarket/components/LendAssetsList/components/AssetsTable/AssetsTable.constants.tsx b/apps/web-app/src/components/MoneyMarket/components/LendAssetsList/components/AssetsTable/AssetsTable.constants.tsx index f644bfb..416042d 100644 --- a/apps/web-app/src/components/MoneyMarket/components/LendAssetsList/components/AssetsTable/AssetsTable.constants.tsx +++ b/apps/web-app/src/components/MoneyMarket/components/LendAssetsList/components/AssetsTable/AssetsTable.constants.tsx @@ -7,6 +7,7 @@ export const LEND_ASSETS: LendAsset[] = [ { symbol: 'USDC', balance: '1.01234566', + balanceUsd: 159489.7, apy: '15.34', icon: iconUsdc, isSortable: true, @@ -15,6 +16,7 @@ export const LEND_ASSETS: LendAsset[] = [ { symbol: 'USDT', balance: '0', + balanceUsd: 0, apy: '12.50', icon: iconUsdt, isSortable: true, @@ -23,6 +25,7 @@ export const LEND_ASSETS: LendAsset[] = [ { symbol: 'WBTC', balance: '0.005', + balanceUsd: 1.23, apy: '8.75', icon: iconWbtc, isSortable: true, diff --git a/apps/web-app/src/components/MoneyMarket/components/LendAssetsList/components/AssetsTable/AssetsTable.tsx b/apps/web-app/src/components/MoneyMarket/components/LendAssetsList/components/AssetsTable/AssetsTable.tsx index d16aba5..ef2f1ce 100644 --- a/apps/web-app/src/components/MoneyMarket/components/LendAssetsList/components/AssetsTable/AssetsTable.tsx +++ b/apps/web-app/src/components/MoneyMarket/components/LendAssetsList/components/AssetsTable/AssetsTable.tsx @@ -9,6 +9,7 @@ import { import { Fragment, useCallback, useEffect, useState, type FC } from 'react'; import iconSort from '@/assets/lend/icon-sort.svg'; +import { AmountRenderer } from '@/components/ui/amount-renderer'; import { Button } from '@/components/ui/button'; import { InfoButton } from '@/components/ui/info-button'; import { @@ -139,11 +140,11 @@ export const AssetsTable: FC = ({ assets }) => { -

{asset.balance}

+
-

{asset.apy}%

+
diff --git a/apps/web-app/src/components/MoneyMarket/components/LendPositionsList/LendPositionsList.tsx b/apps/web-app/src/components/MoneyMarket/components/LendPositionsList/LendPositionsList.tsx index fee3bff..17b9659 100644 --- a/apps/web-app/src/components/MoneyMarket/components/LendPositionsList/LendPositionsList.tsx +++ b/apps/web-app/src/components/MoneyMarket/components/LendPositionsList/LendPositionsList.tsx @@ -1,6 +1,7 @@ import { Accordion } from '@/components/ui/accordion'; import type { MoneyMarketPoolReserve } from '@sovryn/slayer-sdk'; import { useState, type FC } from 'react'; +import { AmountRenderer } from '../../../ui/amount-renderer'; import { PoolPositionStat } from '../PoolPositionStat/PoolPositionStat'; import { AssetsTable } from './components/AssetsTable/AssetsTable'; @@ -33,17 +34,23 @@ export const LendPositionsList: FC = ({
+ } /> + } /> + } />
diff --git a/apps/web-app/src/components/MoneyMarket/components/LendPositionsList/LendPositionsList.types.tsx b/apps/web-app/src/components/MoneyMarket/components/LendPositionsList/LendPositionsList.types.tsx index 64c33b2..16f9a61 100644 --- a/apps/web-app/src/components/MoneyMarket/components/LendPositionsList/LendPositionsList.types.tsx +++ b/apps/web-app/src/components/MoneyMarket/components/LendPositionsList/LendPositionsList.types.tsx @@ -2,7 +2,7 @@ export type LendPosition = { icon: string; symbol: string; balance: string; - balanceUsd: string; + balanceUsd: number; apy: string; collateral: boolean; canToggleCollateral: boolean; diff --git a/apps/web-app/src/components/MoneyMarket/components/LendPositionsList/components/AssetsTable/AssetsTable.constants.tsx b/apps/web-app/src/components/MoneyMarket/components/LendPositionsList/components/AssetsTable/AssetsTable.constants.tsx index 3f17a48..228bd18 100644 --- a/apps/web-app/src/components/MoneyMarket/components/LendPositionsList/components/AssetsTable/AssetsTable.constants.tsx +++ b/apps/web-app/src/components/MoneyMarket/components/LendPositionsList/components/AssetsTable/AssetsTable.constants.tsx @@ -5,7 +5,7 @@ export const LEND_POSITIONS: LendPosition[] = [ { symbol: 'USDC', balance: '1.01234566', - balanceUsd: '159,489.70', + balanceUsd: 159489.7, apy: '15.34', icon: iconUsdc, isSortable: true, diff --git a/apps/web-app/src/components/MoneyMarket/components/LendPositionsList/components/AssetsTable/AssetsTable.tsx b/apps/web-app/src/components/MoneyMarket/components/LendPositionsList/components/AssetsTable/AssetsTable.tsx index cdb2da1..961e1d3 100644 --- a/apps/web-app/src/components/MoneyMarket/components/LendPositionsList/components/AssetsTable/AssetsTable.tsx +++ b/apps/web-app/src/components/MoneyMarket/components/LendPositionsList/components/AssetsTable/AssetsTable.tsx @@ -9,6 +9,7 @@ import { import { Fragment, useCallback, useEffect, useState, type FC } from 'react'; import iconSort from '@/assets/lend/icon-sort.svg'; +import { AmountRenderer } from '@/components/ui/amount-renderer'; import { Button } from '@/components/ui/button'; import { InfoButton } from '@/components/ui/info-button'; import { Switch } from '@/components/ui/switch'; @@ -149,9 +150,13 @@ export const AssetsTable: FC = ({ assets }) => { -

{asset.balance}

+

- ~${asset.balanceUsd} +

diff --git a/apps/web-app/src/components/MoneyMarket/components/PoolPositionStat/PoolPositionStat.tsx b/apps/web-app/src/components/MoneyMarket/components/PoolPositionStat/PoolPositionStat.tsx index 780e598..e71bb09 100644 --- a/apps/web-app/src/components/MoneyMarket/components/PoolPositionStat/PoolPositionStat.tsx +++ b/apps/web-app/src/components/MoneyMarket/components/PoolPositionStat/PoolPositionStat.tsx @@ -1,13 +1,13 @@ import { cn } from '@/lib/utils'; import { InfoButton } from '@/components/ui/info-button'; -import type { FC } from 'react'; +import type { FC, ReactNode } from 'react'; type PoolPositionStatProps = { label: string; labelInfo?: string; className?: string; - value: string | number; + value: ReactNode; }; export const PoolPositionStat: FC = ({ diff --git a/apps/web-app/src/components/MoneyMarket/components/TopPanel/TopPanel.tsx b/apps/web-app/src/components/MoneyMarket/components/TopPanel/TopPanel.tsx index 3fecb6d..a11de77 100644 --- a/apps/web-app/src/components/MoneyMarket/components/TopPanel/TopPanel.tsx +++ b/apps/web-app/src/components/MoneyMarket/components/TopPanel/TopPanel.tsx @@ -1,4 +1,5 @@ import type { FC } from 'react'; +import { AmountRenderer } from '../../../ui/amount-renderer'; import { StatisticsCard } from '../StatisticsCard/StatisticsCard'; type TopPanelProps = { @@ -17,17 +18,29 @@ export const TopPanel: FC = ({
${netWorth.toFixed(2)}} + value={ + + + + } />
{netApy.toFixed(2)}%} + value={ + + + + } help="Net APY is the combined effect of all supply and borrow positions on net worth, including incentives. It is possible to have a negative net APY if debt APY is higher than supply APY." /> {healthFactor.toFixed(2)}} + value={ + + + + } />
diff --git a/apps/web-app/src/components/ui/amount-renderer.tsx b/apps/web-app/src/components/ui/amount-renderer.tsx new file mode 100644 index 0000000..1bfc767 --- /dev/null +++ b/apps/web-app/src/components/ui/amount-renderer.tsx @@ -0,0 +1,86 @@ +import { Decimal } from '@sovryn/slayer-shared'; +import { CopyIcon } from 'lucide-react'; +import { type FC, useCallback } from 'react'; +import { Tooltip, TooltipContent, TooltipTrigger } from './tooltip'; + +export type AmountRendererProps = { + value: string | number | bigint; + decimals?: number; + suffix?: string; + prefix?: string; + className?: string; + showTooltip?: boolean; + showApproxSign?: boolean; +}; + +function formatAmount(value: string | number | bigint, decimals = 4) { + try { + const dec = Decimal.from(value); + let str = dec.d.toFixed(decimals); + str = str.replace(/\.?(0+)$/, ''); + return str; + } catch { + return '-'; + } +} + +export const AmountRenderer: FC = ({ + value, + decimals = 4, + suffix = '', + prefix = '', + className = '', + showTooltip = true, + showApproxSign = false, +}) => { + const formatted = formatAmount(value, decimals); + + const copyToClipboard = useCallback(() => { + navigator.clipboard.writeText(String(value)); + }, [value]); + + const approxSign = showApproxSign ? ( + + ∼ + + ) : null; + + if (!showTooltip) { + return ( + + {approxSign} + {prefix} + {formatted} + {suffix && {suffix}} + + ); + } + + return ( + + + + {approxSign} + {prefix} + {formatted} + {suffix && {suffix}} + + + + + {String(value)} + + + + + ); +};