From ca1ef70bc1c215703f3fe4dccedd870b16157a35 Mon Sep 17 00:00:00 2001
From: shan <shan@57blocks.com>
Date: Mon, 18 Mar 2024 16:16:57 +0800
Subject: [PATCH] ui improvements

---
 packages/huma-shared/src/utils/number.ts      |  4 +-
 .../Lend/addRedemptionV2/2-ChooseAmount.tsx   | 56 ++++++++++++++++++-
 .../components/Lend/addRedemptionV2/index.tsx |  1 +
 .../Lend/supplyV2/3-ChooseAmount.tsx          | 12 +++-
 4 files changed, 69 insertions(+), 4 deletions(-)

diff --git a/packages/huma-shared/src/utils/number.ts b/packages/huma-shared/src/utils/number.ts
index b960a6f..e3a0283 100644
--- a/packages/huma-shared/src/utils/number.ts
+++ b/packages/huma-shared/src/utils/number.ts
@@ -2,7 +2,9 @@ import { BigNumber, BigNumberish, ethers } from 'ethers'
 import { isEmpty } from './common'
 import { scientificToDecimal } from './scientificToDecimal'
 
-const numberFormatter = new Intl.NumberFormat('en-US')
+const numberFormatter = new Intl.NumberFormat('en-US', {
+  maximumFractionDigits: 2,
+})
 
 export const formatMoney = (
   num: number | string | undefined,
diff --git a/packages/huma-widget/src/components/Lend/addRedemptionV2/2-ChooseAmount.tsx b/packages/huma-widget/src/components/Lend/addRedemptionV2/2-ChooseAmount.tsx
index e8e2d55..3987e76 100644
--- a/packages/huma-widget/src/components/Lend/addRedemptionV2/2-ChooseAmount.tsx
+++ b/packages/huma-widget/src/components/Lend/addRedemptionV2/2-ChooseAmount.tsx
@@ -1,28 +1,42 @@
-import { formatNumber, UnderlyingTokenInfo } from '@huma-finance/shared'
+import {
+  formatNumber,
+  PoolInfoV2,
+  timestampToLL,
+  UnderlyingTokenInfo,
+  useLenderDepositRecordV2,
+  useLPConfigV2,
+  useNextEpochStartTimeV2,
+} from '@huma-finance/shared'
 import { ethers } from 'ethers'
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 
+import { useWeb3React } from '@web3-react/core'
 import { TrancheInfo } from '.'
 import { useAppDispatch } from '../../../hooks/useRedux'
 import {
+  setError,
   setRedeemAmount,
   setRedeemShares,
   setStep,
 } from '../../../store/widgets.reducers'
 import { WIDGET_STEP } from '../../../store/widgets.store'
 import { InputAmountModal } from '../../InputAmountModal'
+import { LoadingModal } from '../../LoadingModal'
 
 type Props = {
+  poolInfo: PoolInfoV2
   poolUnderlyingToken: UnderlyingTokenInfo
   trancheInfo: TrancheInfo
 }
 
 export function ChooseAmount({
+  poolInfo,
   poolUnderlyingToken,
   trancheInfo,
 }: Props): React.ReactElement | null {
   const dispatch = useAppDispatch()
   const { symbol } = poolUnderlyingToken
+  const { account, provider } = useWeb3React()
   const [currentAmount, setCurrentAmount] = useState<number>(0)
   const [currentShares, setCurrentShares] = useState<number>(0)
   const maxSharesFormatted = ethers.utils.formatUnits(
@@ -31,6 +45,40 @@ export function ChooseAmount({
   )
   const sharePrice =
     trancheInfo.assets.toNumber() / trancheInfo.shares.toNumber()
+  const [depositRecord] = useLenderDepositRecordV2(
+    poolInfo.poolName,
+    trancheInfo.tranche,
+    account,
+    provider,
+  )
+  const lpConfig = useLPConfigV2(poolInfo.poolName, provider)
+  const nextEpochStartTime = useNextEpochStartTimeV2(
+    poolInfo.poolName,
+    provider,
+  )
+
+  useEffect(() => {
+    if (depositRecord && lpConfig && nextEpochStartTime) {
+      const SECONDS_IN_A_DAY = 24 * 60 * 60
+      if (
+        nextEpochStartTime <
+        depositRecord.lastDepositTime.toNumber() +
+          lpConfig.withdrawalLockoutPeriodInDays * SECONDS_IN_A_DAY
+      ) {
+        dispatch(setStep(WIDGET_STEP.Error))
+        dispatch(
+          setError({
+            errorReason: 'Redemption too soon',
+            errorMessage: `Your last deposit was on ${timestampToLL(
+              depositRecord!.lastDepositTime.toNumber(),
+            )}. Depositors need to wait ${
+              lpConfig!.withdrawalLockoutPeriodInDays
+            } days before redemption`,
+          }),
+        )
+      }
+    }
+  }, [depositRecord, dispatch, lpConfig, nextEpochStartTime])
 
   const handleChangeShares = (newShares: number) => {
     const amount = Number(newShares) * sharePrice
@@ -44,6 +92,10 @@ export function ChooseAmount({
     dispatch(setStep(WIDGET_STEP.Transfer))
   }
 
+  if (!depositRecord || !lpConfig || !nextEpochStartTime) {
+    return <LoadingModal title='Redemption' />
+  }
+
   return (
     <InputAmountModal
       title='Redemption'
diff --git a/packages/huma-widget/src/components/Lend/addRedemptionV2/index.tsx b/packages/huma-widget/src/components/Lend/addRedemptionV2/index.tsx
index ad2f1a0..05b188c 100644
--- a/packages/huma-widget/src/components/Lend/addRedemptionV2/index.tsx
+++ b/packages/huma-widget/src/components/Lend/addRedemptionV2/index.tsx
@@ -145,6 +145,7 @@ export function AddRedemptionV2({
       )}
       {step === WIDGET_STEP.ChooseAmount && trancheInfo && (
         <ChooseAmount
+          poolInfo={poolInfo}
           poolUnderlyingToken={poolUnderlyingToken}
           trancheInfo={trancheInfo}
         />
diff --git a/packages/huma-widget/src/components/Lend/supplyV2/3-ChooseAmount.tsx b/packages/huma-widget/src/components/Lend/supplyV2/3-ChooseAmount.tsx
index bd03788..adff8fa 100644
--- a/packages/huma-widget/src/components/Lend/supplyV2/3-ChooseAmount.tsx
+++ b/packages/huma-widget/src/components/Lend/supplyV2/3-ChooseAmount.tsx
@@ -3,6 +3,7 @@ import {
   TrancheType,
   UnderlyingTokenInfo,
   formatNumber,
+  useLPConfigV2,
   usePoolSafeAllowanceV2,
   usePoolUnderlyingTokenBalanceV2,
 } from '@huma-finance/shared'
@@ -14,6 +15,7 @@ import { useAppDispatch } from '../../../hooks/useRedux'
 import { setStep, setSupplyAmount } from '../../../store/widgets.reducers'
 import { WIDGET_STEP } from '../../../store/widgets.store'
 import { InputAmountModal } from '../../InputAmountModal'
+import { LoadingModal } from '../../LoadingModal'
 
 type Props = {
   poolInfo: PoolInfoV2
@@ -44,6 +46,8 @@ export function ChooseAmount({
     balance,
     poolUnderlyingToken.decimals,
   )
+  const lpConfig = useLPConfigV2(poolInfo.poolName, provider)
+  const isUniTranche = lpConfig?.maxSeniorJuniorRatio === 0
 
   const handleChangeAmount = (newAmount: number) => {
     setCurrentAmount(newAmount)
@@ -61,10 +65,16 @@ export function ChooseAmount({
     dispatch(setStep(step))
   }
 
+  if (!lpConfig) {
+    return <LoadingModal title='Supply' />
+  }
+
   return (
     <InputAmountModal
       title='Enter Amount'
-      subTitle={`Supplying ${symbol} with ${selectedTranche}`}
+      subTitle={`Supplying ${symbol} with ${
+        isUniTranche ? 'uni tranche' : selectedTranche
+      }`}
       tokenSymbol={symbol}
       currentAmount={currentAmount}
       handleChangeAmount={handleChangeAmount}