Adding supply warning for non-update-to-date pairs

earn/src/components/markets/modal/SupplyModal.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 
 import { type WriteContractReturnType } from '@wagmi/core';
 import { routerAbi } from 'shared/lib/abis/Router';
+import AlertTriangle from 'shared/lib/assets/svg/AlertTriangle';
 import { FilledStylizedButton } from 'shared/lib/components/common/Buttons';
 import Modal from 'shared/lib/components/common/Modal';
 import TokenAmountInput from 'shared/lib/components/common/TokenAmountInput';
@@ -15,6 +16,7 @@ import { Token } from 'shared/lib/data/Token';
 import useChain from 'shared/lib/hooks/UseChain';
 import { Permit2State, usePermit2 } from 'shared/lib/hooks/UsePermit2';
 import { formatNumberInput, roundPercentage } from 'shared/lib/util/Numbers';
+import styled from 'styled-components';
 import { Address, Hash } from 'viem';
 import { useAccount, useBalance, useSimulateContract, useWriteContract } from 'wagmi';
 
@@ -30,6 +32,7 @@ enum ConfirmButtonState {
   APPROVE_ASSET,
   WAITING_FOR_TRANSACTION,
   WAITING_FOR_USER,
+  WAITING_FOR_CONFIRMATION,
   LOADING,
   READY,
 }
@@ -44,6 +47,12 @@ const permit2StateToButtonStateMap = {
   [Permit2State.WAITING_FOR_TRANSACTION]: ConfirmButtonState.WAITING_FOR_TRANSACTION,
 };
 
+const AlertTriangleWrapper = styled.div`
+  path {
+    stroke: rgb(255, 122, 0);
+  }
+`;
+
 function getConfirmButton(state: ConfirmButtonState, token: Token): { text: string; enabled: boolean } {
   switch (state) {
     case ConfirmButtonState.INSUFFICIENT_ASSET:
@@ -67,6 +76,8 @@ function getConfirmButton(state: ConfirmButtonState, token: Token): { text: stri
       return { text: 'Check Wallet', enabled: false };
     case ConfirmButtonState.READY:
       return { text: 'Confirm', enabled: true };
+    case ConfirmButtonState.WAITING_FOR_CONFIRMATION:
+      return { text: 'Please Confirm', enabled: false };
     case ConfirmButtonState.LOADING:
     default:
       return { text: 'Confirm', enabled: false };
@@ -244,10 +255,21 @@ export default function SupplyModal(props: SupplyModalProps) {
     type: 'disjunction',
   });
   const formattedCollateral = format.format(selectedRow.collateralAssets.map((token) => token.symbol));
+  const wasUpdatedInPast2Weeks = selectedRow.lastUpdated > Date.now() - 14 * 24 * 60 * 60 * 1000;
 
   return (
-    <Modal isOpen={isOpen} setIsOpen={setIsOpen} title='Supply'>
+    <Modal isOpen={isOpen} setIsOpen={setIsOpen} title='Supply' maxHeight='650px'>
       <div className='w-full flex flex-col gap-4'>
+        {!wasUpdatedInPast2Weeks && (
+          <div className='border-2 border-caution flex items-center p-2 gap-2 rounded-lg'>
+            <AlertTriangleWrapper>
+              <AlertTriangle width={24} height={24} />
+            </AlertTriangleWrapper>
+            <Text size='XS' className='w-full'>
+              This market hasn't been updated in the past 2 weeks.
+            </Text>
+          </div>
+        )}
         <TokenAmountInput
           token={selectedRow.asset}
           value={amount}

earn/src/components/markets/supply/SupplyTable.tsx

@@ -113,6 +113,7 @@ export type SupplyTableRow = {
   suppliableBalanceUsd?: number;
   withdrawableBalance: number;
   isOptimized: boolean;
+  lastUpdated: number;
 };
 
 export type SupplyTableProps = {

earn/src/pages/MarketsPage.tsx

@@ -199,50 +199,46 @@ export default function MarketsPage() {
       const kitty0Balance = balancesMap.get(pair.kitty0.address)?.value || 0;
       const kitty1Balance = balancesMap.get(pair.kitty1.address)?.value || 0;
 
-      const oracleHasBeenUpdatedInPast2Weeks = pair.lastWrite.getTime() > Date.now() - 14 * 24 * 60 * 60 * 1000;
-
-      if (kitty0Balance > 0 || oracleHasBeenUpdatedInPast2Weeks) {
-        rows.push({
-          asset: pair.token0,
-          kitty: pair.kitty0,
-          apy: pair.kitty0Info.lendAPY * 100,
-          rewardsRate: pair.rewardsRate0,
-          collateralAssets: [pair.token0, pair.token1],
-          totalSupply: pair.kitty0Info.totalAssets.toNumber(),
-          suppliedBalance: kitty0Balance,
-          suppliableBalance: token0Balance,
-          withdrawableBalance: pair.kitty0Info.availableAssets.toNumber(),
-          isOptimized: true,
-          ...(token0Price > 0
-            ? {
-                totalSupplyUsd: pair.kitty0Info.totalAssets.toNumber() * token0Price,
-                suppliedBalanceUsd: kitty0Balance * token0Price,
-                suppliableBalanceUsd: token0Balance * token0Price,
-              }
-            : {}),
-        });
-      }
-      if (kitty1Balance > 0 || oracleHasBeenUpdatedInPast2Weeks) {
-        rows.push({
-          asset: pair.token1,
-          kitty: pair.kitty1,
-          apy: pair.kitty1Info.lendAPY * 100,
-          rewardsRate: pair.rewardsRate1,
-          collateralAssets: [pair.token1, pair.token0],
-          totalSupply: pair.kitty1Info.totalAssets.toNumber(),
-          suppliedBalance: kitty1Balance,
-          suppliableBalance: token1Balance,
-          withdrawableBalance: pair.kitty1Info.availableAssets.toNumber(),
-          isOptimized: true,
-          ...(token1Price > 0
-            ? {
-                totalSupplyUsd: pair.kitty1Info.totalAssets.toNumber() * token1Price,
-                suppliedBalanceUsd: kitty1Balance * token1Price,
-                suppliableBalanceUsd: token1Balance * token1Price,
-              }
-            : {}),
-        });
-      }
+      rows.push({
+        asset: pair.token0,
+        kitty: pair.kitty0,
+        apy: pair.kitty0Info.lendAPY * 100,
+        rewardsRate: pair.rewardsRate0,
+        collateralAssets: [pair.token0, pair.token1],
+        totalSupply: pair.kitty0Info.totalAssets.toNumber(),
+        suppliedBalance: kitty0Balance,
+        suppliableBalance: token0Balance,
+        withdrawableBalance: pair.kitty0Info.availableAssets.toNumber(),
+        isOptimized: true,
+        lastUpdated: pair.lastWrite.getTime(),
+        ...(token0Price > 0
+          ? {
+              totalSupplyUsd: pair.kitty0Info.totalAssets.toNumber() * token0Price,
+              suppliedBalanceUsd: kitty0Balance * token0Price,
+              suppliableBalanceUsd: token0Balance * token0Price,
+            }
+          : {}),
+      });
+      rows.push({
+        asset: pair.token1,
+        kitty: pair.kitty1,
+        apy: pair.kitty1Info.lendAPY * 100,
+        rewardsRate: pair.rewardsRate1,
+        collateralAssets: [pair.token1, pair.token0],
+        totalSupply: pair.kitty1Info.totalAssets.toNumber(),
+        suppliedBalance: kitty1Balance,
+        suppliableBalance: token1Balance,
+        withdrawableBalance: pair.kitty1Info.availableAssets.toNumber(),
+        isOptimized: true,
+        lastUpdated: pair.lastWrite.getTime(),
+        ...(token1Price > 0
+          ? {
+              totalSupplyUsd: pair.kitty1Info.totalAssets.toNumber() * token1Price,
+              suppliedBalanceUsd: kitty1Balance * token1Price,
+              suppliableBalanceUsd: token1Balance * token1Price,
+            }
+          : {}),
+      });
     });
     return rows;
   }, [balancesMap, lendingPairs, tokenQuotes]);

shared/src/assets/svg/AlertTriangle.tsx

@@ -0,0 +1,18 @@
+/* eslint-disable max-len */
+import { SVGProps } from '.';
+
+export default function Bell(props: SVGProps) {
+  return (
+    <svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
+      <path
+        d='M10.2898 3.85996L1.81978 18C1.64514 18.3024 1.55274 18.6453 1.55177 18.9945C1.55079 19.3437 1.64127 19.6871 1.8142 19.9905C1.98714 20.2939 2.2365 20.5467 2.53748 20.7238C2.83847 20.9009 3.18058 20.9961 3.52978 21H20.4698C20.819 20.9961 21.1611 20.9009 21.4621 20.7238C21.7631 20.5467 22.0124 20.2939 22.1854 19.9905C22.3583 19.6871 22.4488 19.3437 22.4478 18.9945C22.4468 18.6453 22.3544 18.3024 22.1798 18L13.7098 3.85996C13.5315 3.56607 13.2805 3.32308 12.981 3.15444C12.6814 2.98581 12.3435 2.89722 11.9998 2.89722C11.656 2.89722 11.3181 2.98581 11.0186 3.15444C10.7191 3.32308 10.468 3.56607 10.2898 3.85996V3.85996Z'
+        stroke='#070E12'
+        strokeWidth='2'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path d='M12 9V13' stroke='#070E12' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' />
+      <path d='M12 17H12.01' stroke='#070E12' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' />
+    </svg>
+  );
+}

shared/src/util/Numbers.ts

@@ -177,25 +177,34 @@ export function formatTokenAmountCompact(amount: number, length = 4): string {
   amount = Math.abs(amount);
 
   if (amount > 1e6) {
-    return sign + amount.toLocaleString('en-US', {
-      style: 'decimal',
-      notation: 'compact',
-      compactDisplay: 'short',
-      maximumSignificantDigits: length,
-      minimumSignificantDigits: 2,
-    });
+    return (
+      sign +
+      amount.toLocaleString('en-US', {
+        style: 'decimal',
+        notation: 'compact',
+        compactDisplay: 'short',
+        maximumSignificantDigits: length,
+        minimumSignificantDigits: 2,
+      })
+    );
   } else if (amount > 10 ** -(length / 2) || amount === 0) {
-    return sign + amount.toLocaleString('en-US', {
-      style: 'decimal',
-      maximumSignificantDigits: length + 1,
-      minimumSignificantDigits: 2,
-    });
+    return (
+      sign +
+      amount.toLocaleString('en-US', {
+        style: 'decimal',
+        maximumSignificantDigits: length + 1,
+        minimumSignificantDigits: 2,
+      })
+    );
   } else {
-    return sign + amount.toLocaleString('en-US', {
-      style: 'decimal',
-      notation: 'scientific',
-      maximumSignificantDigits: length - 1,
-    });
+    return (
+      sign +
+      amount.toLocaleString('en-US', {
+        style: 'decimal',
+        notation: 'scientific',
+        maximumSignificantDigits: length - 1,
+      })
+    );
   }
 }