feat: Show APY in my assets

src/components/AssetsModal/PositionsView.tsx

@@ -1,7 +1,7 @@
 import { Button } from '@components/Button';
 import { usePools } from '@contexts/pool-context';
 import { useWallet } from '@contexts/wallet-context';
-import { formatAmount, toDollarsFormatted } from '@lib/formatting';
+import { formatAPY, formatAmount, toDollarsFormatted } from '@lib/formatting';
 import type { SupportedCurrency } from 'currencies';
 import { isNil } from 'ramda';
 import { CURRENCY_BINDINGS } from 'src/currency-bindings';
@@ -21,8 +21,8 @@ const PositionsView = ({ onClose, onWithdraw }: PositionsViewProps) => {
           <tr>
             <th className="w-20" />
             <th>Asset</th>
-            <th>Amount</th>
-            <th>Value</th>
+            <th>Balance</th>
+            <th>APY</th>
             <th />
           </tr>
         </thead>
@@ -53,12 +53,13 @@ interface TableRowProps {
 }
 
 const TableRow = ({ receivables, ticker, onWithdraw }: TableRowProps) => {
-  const { prices } = usePools();
+  const { prices, pools } = usePools();
 
   if (receivables === 0n) return null;
 
   const { icon, name } = CURRENCY_BINDINGS[ticker];
   const price = prices?.[ticker];
+  const pool = pools?.[ticker];
 
   const handleWithdrawClick = () => onWithdraw(ticker);
 
@@ -75,8 +76,11 @@ const TableRow = ({ receivables, ticker, onWithdraw }: TableRowProps) => {
           <p className="text-base">{ticker}</p>
         </div>
       </td>
-      <td className="text-lg font-semibold">{formatAmount(receivables)}</td>
-      <td className="text-lg font-semibold">{!isNil(price) && toDollarsFormatted(price, receivables)}</td>
+      <td>
+        <p className="text-lg font-semibold leading-5">{formatAmount(receivables)}</p>
+        <p className="text-base">{!isNil(price) && toDollarsFormatted(price, receivables)}</p>
+      </td>
+      <td className="text-lg font-semibold">{pool && formatAPY(pool.apr)}</td>
       <td>
         <Button onClick={handleWithdrawClick}>Withdraw</Button>
       </td>