action buttons & supply/borrow balance data

ionicprotocol · Nov 22, 2024 · 81a1e92 · 81a1e92
1 parent d9dfe4d
commit 81a1e92
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 50 deletions.
diff --git a/packages/ui/app/market/page.tsx b/packages/ui/app/market/page.tsx
@@ -1,4 +1,3 @@
-// Market.tsx
 'use client';
 
 import { useState } from 'react';
@@ -139,15 +138,25 @@ export default function Market() {
       header: 'SUPPLY BALANCE',
       sortingFn: 'numerical',
       cell: ({ row }: MarketCellProps) => (
-        <span className="text-right">{row.original.supplyBalance}</span>
+        <div className="flex flex-col items-end">
+          <span className="text-right">{row.original.supply.balance}</span>
+          <span className="text-right text-white/50 text-xs">
+            ${row.original.supply.balanceUSD}
+          </span>
+        </div>
       )
     },
     {
       id: 'borrowBalance',
       header: 'BORROW BALANCE',
       sortingFn: 'numerical',
       cell: ({ row }: MarketCellProps) => (
-        <span className="text-right">{row.original.borrowBalance}</span>
+        <div className="flex flex-col items-end">
+          <span className="text-right">{row.original.borrow.balance}</span>
+          <span className="text-right text-white/50 text-xs">
+            ${row.original.borrow.balanceUSD}
+          </span>
+        </div>
       )
     },
     {
@@ -163,9 +172,11 @@ export default function Market() {
       header: 'ACTIONS',
       enableSorting: false,
       cell: ({ row }: MarketCellProps) => (
-        <div className="flex gap-2">
+        <div className="flex gap-2 w-full">
           <button
-            className="rounded-md bg-accent text-black py-1.5 px-4 uppercase truncate disabled:opacity-50"
+            className={`rounded-md bg-accent text-black py-2.5 px-4 capitalize truncate disabled:opacity-50 ${
+              row.original.loopPossible ? 'w-1/2' : 'w-full'
+            }`}
             onClick={async () => {
               const result = await handleSwitchOriginChain(+chain, chainId);
               if (result) {
@@ -182,7 +193,7 @@ export default function Market() {
           </button>
           {row.original.loopPossible && (
             <button
-              className="rounded-md bg-white/10 text-white py-1.5 px-4 uppercase truncate disabled:opacity-50 hover:bg-white/20"
+              className="rounded-md bg-lime text-black py-2.5 px-4 capitalize truncate disabled:opacity-50 hover:bg-lime-400 w-1/2"
               onClick={async () => {
                 const result = await handleSwitchOriginChain(+chain, chainId);
                 if (result) {

diff --git a/packages/ui/hooks/market/useMarketData.ts b/packages/ui/hooks/market/useMarketData.ts
@@ -23,10 +23,18 @@ import type { FlywheelReward } from '@ionicprotocol/types';
 export type MarketRowData = MarketData & {
   asset: string;
   logo: string;
-  supplyBalance: string;
-  totalSupplied: string;
-  borrowBalance: string;
-  totalBorrowing: string;
+  supply: {
+    balance: string;
+    balanceUSD: string;
+    total: string;
+    totalUSD: string;
+  };
+  borrow: {
+    balance: string;
+    balanceUSD: string;
+    total: string;
+    totalUSD: string;
+  };
   supplyAPR: number;
   borrowAPR: number;
   collateralFactor: number;
@@ -40,6 +48,7 @@ export type MarketRowData = MarketData & {
   supplyAPRTotal: number | undefined;
   borrowAPRTotal: number | undefined;
   isBorrowDisabled: boolean;
+  underlyingSymbol: string;
 };
 
 export const useMarketData = (
@@ -85,6 +94,15 @@ export const useMarketData = (
     +chain
   );
 
+  const formatNumber = (value: bigint | number, decimals: number): string => {
+    const parsedValue =
+      typeof value === 'bigint'
+        ? parseFloat(formatUnits(value, decimals))
+        : value;
+
+    return parsedValue.toLocaleString('en-US', { maximumFractionDigits: 2 });
+  };
+
   const marketData = useMemo(() => {
     if (!assets) return [];
 
@@ -130,50 +148,36 @@ export const useMarketData = (
         // Get borrow caps for this specific asset from the bulk query result
         const assetBorrowCaps = borrowCapsData?.[asset.cToken];
 
+        const supply = {
+          balance:
+            typeof asset.supplyBalance === 'bigint'
+              ? `${formatNumber(asset.supplyBalance, asset.underlyingDecimals)} ${asset.underlyingSymbol}`
+              : `0 ${asset.underlyingSymbol}`,
+          balanceUSD: formatNumber(asset.supplyBalanceFiat, 0),
+          total: asset.totalSupplyNative
+            ? `${formatNumber(asset.totalSupply, asset.underlyingDecimals)} ${asset.underlyingSymbol}`
+            : `0 ${asset.underlyingSymbol}`,
+          totalUSD: formatNumber(asset.totalSupplyFiat, 0)
+        };
+
+        const borrow = {
+          balance:
+            typeof asset.borrowBalance === 'bigint'
+              ? `${formatNumber(asset.borrowBalance, asset.underlyingDecimals)} ${asset.underlyingSymbol}`
+              : `0 ${asset.underlyingSymbol}`,
+          balanceUSD: formatNumber(asset.borrowBalanceFiat, 0),
+          total: asset.totalBorrowNative
+            ? `${formatNumber(asset.totalBorrow, asset.underlyingDecimals)} ${asset.underlyingSymbol}`
+            : `0 ${asset.underlyingSymbol}`,
+          totalUSD: formatNumber(asset.totalBorrowFiat, 0)
+        };
+
         return {
           ...asset,
           asset: asset.underlyingSymbol,
           logo: `/img/symbols/32/color/${asset.underlyingSymbol.toLowerCase()}.png`,
-          supplyBalance: `${
-            typeof asset.supplyBalance === 'bigint'
-              ? parseFloat(
-                  formatUnits(asset.supplyBalance, asset.underlyingDecimals)
-                ).toLocaleString('en-US', { maximumFractionDigits: 2 })
-              : '0'
-          } ${asset.underlyingSymbol} / $${asset.supplyBalanceFiat.toLocaleString(
-            'en-US',
-            { maximumFractionDigits: 2 }
-          )}`,
-          totalSupplied: `${
-            asset.totalSupplyNative
-              ? parseFloat(
-                  formatUnits(asset.totalSupply, asset.underlyingDecimals)
-                ).toLocaleString('en-US', { maximumFractionDigits: 2 })
-              : '0'
-          } ${asset.underlyingSymbol} / $${asset.totalSupplyFiat.toLocaleString(
-            'en-US',
-            { maximumFractionDigits: 2 }
-          )}`,
-          borrowBalance: `${
-            typeof asset.borrowBalance === 'bigint'
-              ? parseFloat(
-                  formatUnits(asset.borrowBalance, asset.underlyingDecimals)
-                ).toLocaleString('en-US', { maximumFractionDigits: 2 })
-              : '0'
-          } ${asset.underlyingSymbol} / $${asset.borrowBalanceFiat.toLocaleString(
-            'en-US',
-            { maximumFractionDigits: 2 }
-          )}`,
-          totalBorrowing: `${
-            asset.totalBorrowNative
-              ? parseFloat(
-                  formatUnits(asset.totalBorrow, asset.underlyingDecimals)
-                ).toLocaleString('en-US', { maximumFractionDigits: 2 })
-              : '0'
-          } ${asset.underlyingSymbol} / $${asset.totalBorrowFiat.toLocaleString(
-            'en-US',
-            { maximumFractionDigits: 2 }
-          )}`,
+          supply,
+          borrow,
           supplyAPR: supplyRates?.[asset.cToken]
             ? supplyRates[asset.cToken] * 100
             : 0,