SOV-5215: add Amount renderer component

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;
 };

apps/web-app/src/components/MoneyMarket/components/BorrowAssetsList/components/AssetsTable/AssetsTable.constants.tsx

@@ -7,23 +7,23 @@ export const BORROW_ASSETS: BorrowAsset[] = [
   {
     symbol: 'USDT',
     balance: '10.5',
-    balanceUsd: '10.5',
+    balanceUsd: 10.5,
     apy: '50.90',
     icon: iconUsdt,
     isSortable: true,
   },
   {
     symbol: 'WBTC',
     balance: '0.09',
-    balanceUsd: '150.0',
+    balanceUsd: 150.0,
     apy: '2.75',
     icon: iconWbtc,
     isSortable: true,
   },
   {
     symbol: 'USDC',
     balance: '1.566',
-    balanceUsd: '1.566',
+    balanceUsd: 1.566,
     apy: '15.34',
     icon: iconUsdc,
     isSortable: true,

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<AssetsTableProps> = ({ assets }) => {
-  const [sortDirection, setSortDirection] = useState<OrderSorting>(
-    OrderType.ASC,
-  );
   const [sortedAssets, setSortedAssets] =
     useState<MoneyMarketPoolReserve[]>(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<AssetsTableProps> = ({ assets }) => {
     console.log('Transaction Request:', msg);
 
     if (msg.length) {
-      const data = await writeContractAsync<any>(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<AssetsTableProps> = ({ assets }) => {
       </TableHeader>
       <TableBody>
         {sortedAssets.map((asset, index) => (
-          <React.Fragment key={asset.token.address}>
+          <React.Fragment key={asset.id}>
             <TableRow className="hover:bg-transparent">
               <TableCell className="border-neutral-800 border-y border-l rounded-tl-[1.25rem] rounded-bl-[1.25rem]">
                 <div className="flex items-center min-w-24">
@@ -167,12 +132,25 @@ export const AssetsTable: FC<AssetsTableProps> = ({ assets }) => {
                 </div>
               </TableCell>
               <TableCell className="border-neutral-800 border-y">
-                <p className="text-gray-50 font-medium">
-                  {Decimal.from(asset.totalLiquidity).toString()}{' '}
+                <span className="flex items-center gap-1">
+                  <AmountRenderer
+                    value={
+                      Number(asset.totalLiquidity) /
+                      Math.pow(10, asset.token.decimals)
+                    }
+                  />
                   {asset.token.symbol}
-                </p>
+                </span>
                 <p className="text-neutral-500 font-medium text-xs">
-                  ~${asset.totalLiquidity}
+                  <AmountRenderer
+                    value={
+                      Number(asset.totalLiquidity) /
+                      Math.pow(10, asset.token.decimals)
+                    }
+                    prefix="$"
+                    decimals={2}
+                    showApproxSign
+                  />
                 </p>
               </TableCell>
               <TableCell className="border-neutral-800 border-y">

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<BorrowPositionsListProps> = ({
       <div className="flex flex-col gap-2 mb-2 lg:flex-row lg:gap-6 lg:mb-6">
         <PoolPositionStat
           label="Balance"
-          value={`$${supplyBalance.toFixed(2)}`}
+          value={
+            <AmountRenderer value={supplyBalance} decimals={2} prefix="$" />
+          }
         />
         <PoolPositionStat
           label="APY"
           labelInfo="Compounding interest accrued by deposit or borrowing on the lending pool"
-          value={`${supplyWeightedApy.toFixed(2)}%`}
+          value={
+            <AmountRenderer value={supplyWeightedApy} decimals={2} suffix="%" />
+          }
         />
         <PoolPositionStat
           label="Borrow power used"
           labelInfo="The percentage of your borrow power that is currently being used."
-          value={`${borrowPower.toFixed(2)}%`}
+          value={<AmountRenderer value={borrowPower} decimals={2} suffix="%" />}
         />
       </div>
 

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;

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,

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<AssetsTableProps> = ({ assets }) => {
                 </TableCell>
 
                 <TableCell className="border-neutral-800 border-y">
-                  <p className="text-gray-50 font-medium">{asset.balance}</p>
+                  <AmountRenderer value={asset.balance} />
                   <p className="text-neutral-500 font-medium text-xs">
-                    ~${asset.balanceUsd}
+                    <AmountRenderer value={asset.balanceUsd} prefix="$" />
                   </p>
                 </TableCell>
 
                 <TableCell className="border-neutral-800 border-y">
                   <div className="flex items-center">
-                    <p className="text-gray-50 font-medium">{selected}%</p>
+                    <AmountRenderer value={selected} suffix="%" />
                   </div>
                 </TableCell>
 

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;

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,

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<AssetsTableProps> = ({ assets }) => {
                 </div>
               </TableCell>
               <TableCell className="border-neutral-800 border-y">
-                <p className="text-gray-50 font-medium">{asset.balance}</p>
+                <AmountRenderer value={asset.balance} />
               </TableCell>
               <TableCell className="border-neutral-800 border-y">
                 <div className="flex items-center">
-                  <p className="text-gray-50 font-medium">{asset.apy}%</p>
+                  <AmountRenderer value={asset.apy} suffix="%" />
                 </div>
               </TableCell>
               <TableCell className="border-neutral-800 border-y">

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<LendPositionsListProps> = ({
       <div className="flex flex-col gap-2 mb-2 lg:flex-row lg:gap-6 lg:mb-6">
         <PoolPositionStat
           label="Balance"
-          value={`$${supplyBalance.toFixed(2)}`}
+          value={
+            <AmountRenderer value={supplyBalance} decimals={2} prefix="$" />
+          }
         />
         <PoolPositionStat
           label="APY"
           labelInfo="Compounding interest accrued by deposit or borrowing on the lending pool"
-          value={`${supplyWeightedApy.toFixed(2)}%`}
+          value={
+            <AmountRenderer value={supplyWeightedApy} decimals={2} suffix="%" />
+          }
         />
         <PoolPositionStat
           label="Collateral"
           labelInfo="The total amount of your assets denominated in USD that can be used as collateral for borrowing assets."
-          value={`$${collateralBalance.toFixed(2)}`}
+          value={
+            <AmountRenderer value={collateralBalance} decimals={2} prefix="$" />
+          }
         />
       </div>
 

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;

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,

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<AssetsTableProps> = ({ assets }) => {
                 </div>
               </TableCell>
               <TableCell className="border-neutral-800 border-y">
-                <p className="text-gray-50 font-medium">{asset.balance}</p>
+                <AmountRenderer value={asset.balance} />
                 <p className="text-neutral-500 font-medium text-xs">
-                  ~${asset.balanceUsd}
+                  <AmountRenderer
+                    value={asset.balanceUsd}
+                    prefix="$"
+                    showApproxSign
+                  />
                 </p>
               </TableCell>
               <TableCell className="border-neutral-800 border-y">

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<PoolPositionStatProps> = ({