@huma-finance/widgets 0.0.48-beta.292 → 0.0.48-beta.296

package/src/components/Lend/withdrawV2/1-ChooseTranche.tsx

@@ -1,10 +1,4 @@
-import {
-  formatBNFixed,
-  getTrancheVaultContractV2,
-  PoolInfoV2,
-  TrancheType,
-  UnderlyingTokenInfo,
-} from '@huma-finance/shared'
+import { UnderlyingTokenInfo } from '@huma-finance/shared'
 import {
   css,
   FormControl,
@@ -14,86 +8,31 @@ import {
   RadioGroup,
   useTheme,
 } from '@mui/material'
-import { useWeb3React } from '@web3-react/core'
-import { BigNumber } from 'ethers'
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 
+import { WithdrawType } from '.'
 import { useAppDispatch } from '../../../hooks/useRedux'
 import { setStep } from '../../../store/widgets.reducers'
 import { WIDGET_STEP } from '../../../store/widgets.store'
 import { BottomButton } from '../../BottomButton'
-import { LoadingModal } from '../../LoadingModal'
 import { WrapperModal } from '../../WrapperModal'
 
 type Props = {
-  poolInfo: PoolInfoV2
   poolUnderlyingToken: UnderlyingTokenInfo
-  selectedTranche: TrancheType | undefined
-  seniorWithdrawableAmount: BigNumber | undefined
-  juniorWithdrawableAmount: BigNumber | undefined
-  changeTranche: (tranche: TrancheType) => void
+  selectedWithdrawType: WithdrawType | undefined
+  withdrawTypes: WithdrawType[]
+  changeWithdrawType: (WithdrawType: WithdrawType) => void
 }
 
 export function ChooseTranche({
-  poolInfo,
   poolUnderlyingToken,
-  selectedTranche,
-  seniorWithdrawableAmount,
-  juniorWithdrawableAmount,
-  changeTranche,
+  selectedWithdrawType,
+  withdrawTypes,
+  changeWithdrawType,
 }: Props): React.ReactElement | null {
   const theme = useTheme()
   const dispatch = useAppDispatch()
-  const { provider } = useWeb3React()
-  const { symbol, decimals } = poolUnderlyingToken
-  const [seniorWithdrawableShares, setSeniorWithdrawableShares] = useState(
-    BigNumber.from(0),
-  )
-  const [juniorWithdrawableShares, setJuniorWithdrawableShares] = useState(
-    BigNumber.from(0),
-  )
-
-  const isLoading =
-    seniorWithdrawableAmount === undefined ||
-    juniorWithdrawableAmount === undefined
-
-  useEffect(() => {
-    const fetchData = async () => {
-      if (seniorWithdrawableAmount?.gt(0)) {
-        const seniorVaultContract = await getTrancheVaultContractV2(
-          poolInfo.poolName,
-          'senior',
-          provider,
-        )
-        if (seniorVaultContract) {
-          const shares = await seniorVaultContract.convertToShares(
-            seniorWithdrawableAmount,
-          )
-          setSeniorWithdrawableShares(shares)
-        }
-      }
-    }
-    fetchData()
-  }, [poolInfo.poolName, provider, seniorWithdrawableAmount])
-
-  useEffect(() => {
-    const fetchData = async () => {
-      if (juniorWithdrawableAmount?.gt(0)) {
-        const juniorVaultContract = await getTrancheVaultContractV2(
-          poolInfo.poolName,
-          'senior',
-          provider,
-        )
-        if (juniorVaultContract) {
-          const shares = await juniorVaultContract.convertToShares(
-            juniorWithdrawableAmount,
-          )
-          setJuniorWithdrawableShares(shares)
-        }
-      }
-    }
-    fetchData()
-  }, [poolInfo.poolName, provider, juniorWithdrawableAmount])
+  const { symbol } = poolUnderlyingToken
 
   const styles = {
     subTitle: css`
@@ -122,41 +61,21 @@ export function ChooseTranche({
     `,
   }
 
-  const handleNext = () => {
-    dispatch(setStep(WIDGET_STEP.Transfer))
+  const handleChangeWithdrawType = (withdrawTypeValue: string | number) => {
+    const withdrawType = withdrawTypes.find(
+      (item) => item.value === withdrawTypeValue,
+    )
+    if (withdrawType) {
+      changeWithdrawType(withdrawType)
+    }
   }
 
-  const items: {
-    label: string
-    value: TrancheType
-    disabled: boolean | undefined
-  }[] = [
-    {
-      label: `Withdraw ${formatBNFixed(
-        seniorWithdrawableAmount,
-        decimals,
-      )} ${symbol} from Senior vault (${formatBNFixed(
-        seniorWithdrawableShares,
-        decimals,
-      )} shares)`,
-      value: 'senior',
-      disabled: seniorWithdrawableAmount?.lte(0) ?? true,
-    },
-    {
-      label: `Withdraw ${formatBNFixed(
-        juniorWithdrawableAmount,
-        decimals,
-      )} ${symbol} from Junior vault (${formatBNFixed(
-        juniorWithdrawableShares,
-        decimals,
-      )} shares)`,
-      value: 'junior',
-      disabled: juniorWithdrawableAmount?.lte(0) ?? true,
-    },
-  ]
-
-  if (isLoading) {
-    return <LoadingModal title={`Withdraw ${symbol}`} />
+  const handleNext = () => {
+    if (selectedWithdrawType?.type === 'firstLossCover') {
+      dispatch(setStep(WIDGET_STEP.ChooseAmount))
+    } else {
+      dispatch(setStep(WIDGET_STEP.Transfer))
+    }
   }
 
   return (
@@ -167,13 +86,12 @@ export function ChooseTranche({
           aria-labelledby='buttons-group-label'
           name='radio-buttons-group'
           css={styles.radioGroup}
-          onChange={(e) => changeTranche(e.target.value as TrancheType)}
+          onChange={(e) => handleChangeWithdrawType(e.target.value)}
         >
-          {items.map((item) => (
+          {withdrawTypes.map((item) => (
             <FormControlLabel
               key={item.label}
               value={item.value}
-              disabled={item.disabled}
               control={
                 <Radio
                   sx={{
@@ -191,7 +109,7 @@ export function ChooseTranche({
       </FormControl>
       <BottomButton
         variant='contained'
-        disabled={!selectedTranche}
+        disabled={!selectedWithdrawType}
         onClick={handleNext}
       >
         NEXT

package/src/components/Lend/withdrawV2/2-ChooseAmount.tsx

@@ -0,0 +1,88 @@
+import {
+  FirstLossCoverIndex,
+  getFirstLossCoverContractV2,
+  PoolInfoV2,
+  UnderlyingTokenInfo,
+} from '@huma-finance/shared'
+import { useWeb3React } from '@web3-react/core'
+import { ethers } from 'ethers'
+import React, { useEffect, useState } from 'react'
+
+import { WithdrawType } from '.'
+import { useAppDispatch } from '../../../hooks/useRedux'
+import { setStep, setWithdrawAmount } from '../../../store/widgets.reducers'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { InputAmountModal } from '../../InputAmountModal'
+
+type Props = {
+  poolInfo: PoolInfoV2
+  poolUnderlyingToken: UnderlyingTokenInfo
+  selectedWithdrawType: WithdrawType
+}
+
+export function ChooseAmount({
+  poolInfo,
+  poolUnderlyingToken,
+  selectedWithdrawType,
+}: Props): React.ReactElement | null {
+  const dispatch = useAppDispatch()
+  const { provider } = useWeb3React()
+  const { symbol } = poolUnderlyingToken
+  const [sharePrice, setSharePrice] = useState(0)
+  const [currentAmount, setCurrentAmount] = useState<number>(0)
+  const [currentShares, setCurrentShares] = useState<number>(0)
+  const maxAmountFormatted = ethers.utils.formatUnits(
+    selectedWithdrawType.withdrawableAmount,
+    poolUnderlyingToken.decimals,
+  )
+
+  useEffect(() => {
+    if (selectedWithdrawType.withdrawableAmount.gt(0)) {
+      const fetchData = async () => {
+        const firstLossCoverContract = await getFirstLossCoverContractV2(
+          poolInfo.poolName,
+          Number(selectedWithdrawType.value) as FirstLossCoverIndex,
+          provider,
+        )
+        if (firstLossCoverContract) {
+          const shares = await firstLossCoverContract.convertToShares(
+            selectedWithdrawType.withdrawableAmount,
+          )
+          const price = selectedWithdrawType.withdrawableAmount.div(shares)
+          setSharePrice(price.toNumber())
+        }
+      }
+      fetchData()
+    }
+  }, [
+    poolInfo.poolName,
+    provider,
+    selectedWithdrawType.value,
+    selectedWithdrawType.withdrawableAmount,
+  ])
+
+  const handleChangeAmount = (newAmount: number) => {
+    const shares = Number(newAmount) / sharePrice
+    setCurrentShares(shares)
+    setCurrentAmount(newAmount)
+    dispatch(setWithdrawAmount(Number(newAmount)))
+  }
+
+  const handleAction = () => {
+    dispatch(setStep(WIDGET_STEP.Transfer))
+  }
+
+  return (
+    <InputAmountModal
+      title={`Withdraw ${symbol}`}
+      subTitle={selectedWithdrawType.label}
+      tokenSymbol={symbol}
+      currentAmount={currentAmount}
+      handleChangeAmount={handleChangeAmount}
+      maxAmount={maxAmountFormatted}
+      info={`${currentShares.toFixed(1)} Shares`}
+      handleAction={handleAction}
+      actionText='WITHDRAW'
+    />
+  )
+}

package/src/components/Lend/withdrawV2/3-Transfer.tsx

@@ -0,0 +1,110 @@
+import {
+  FirstLossCoverIndex,
+  getFirstLossCoverContractV2,
+  getTrancheVaultContractV2,
+  PoolInfoV2,
+  TrancheType,
+  UnderlyingTokenInfo,
+} from '@huma-finance/shared'
+import { useWeb3React } from '@web3-react/core'
+import { BigNumber, ethers } from 'ethers'
+import React, { useCallback, useEffect, useState } from 'react'
+
+import { WithdrawType } from '.'
+import { useAppDispatch, useAppSelector } from '../../../hooks/useRedux'
+import { setStep } from '../../../store/widgets.reducers'
+import { selectWidgetState } from '../../../store/widgets.selectors'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { LoadingModal } from '../../LoadingModal'
+import { TxSendModalV2 } from '../../TxSendModalV2'
+
+type Props = {
+  poolInfo: PoolInfoV2
+  poolUnderlyingToken: UnderlyingTokenInfo
+  selectedWithdrawType: WithdrawType
+}
+
+export function Transfer({
+  poolInfo,
+  poolUnderlyingToken,
+  selectedWithdrawType,
+}: Props): React.ReactElement | null {
+  const dispatch = useAppDispatch()
+  const { account, provider } = useWeb3React()
+  const { withdrawAmount } = useAppSelector(selectWidgetState)
+  const [firstLossCoverShares, setFirstLossCoverShares] = React.useState<
+    BigNumber | undefined
+  >(undefined)
+  const [contract, setContract] = useState<ethers.Contract | undefined>(
+    undefined,
+  )
+
+  useEffect(() => {
+    const fetchData = async () => {
+      if (account) {
+        if (selectedWithdrawType.type === 'tranche') {
+          const trancheVaultContract = await getTrancheVaultContractV2(
+            poolInfo.poolName,
+            selectedWithdrawType.value as TrancheType,
+            provider,
+            account,
+          )
+          if (trancheVaultContract) {
+            setContract(trancheVaultContract)
+          }
+        }
+        if (selectedWithdrawType.type === 'firstLossCover') {
+          const firstLossCoverContract = await getFirstLossCoverContractV2(
+            poolInfo.poolName,
+            Number(selectedWithdrawType.value) as FirstLossCoverIndex,
+            provider,
+            account,
+          )
+          if (firstLossCoverContract) {
+            const shares = await firstLossCoverContract.convertToShares(
+              ethers.utils.parseUnits(
+                String(withdrawAmount),
+                poolUnderlyingToken.decimals,
+              ),
+            )
+            setFirstLossCoverShares(shares)
+            setContract(firstLossCoverContract)
+          }
+        }
+      }
+    }
+    fetchData()
+  }, [
+    account,
+    poolInfo.poolName,
+    poolUnderlyingToken.decimals,
+    provider,
+    selectedWithdrawType.type,
+    selectedWithdrawType.value,
+    withdrawAmount,
+  ])
+
+  const method =
+    selectedWithdrawType.type === 'tranche' ? 'disburse' : 'redeemCover'
+  const params =
+    selectedWithdrawType.type === 'tranche'
+      ? []
+      : [firstLossCoverShares, account]
+
+  const handleSuccess = useCallback(() => {
+    dispatch(setStep(WIDGET_STEP.Done))
+  }, [dispatch])
+
+  if (!account || !contract) {
+    return <LoadingModal title='Transaction Pending' />
+  }
+
+  return (
+    <TxSendModalV2
+      contract={contract}
+      method={method}
+      params={params}
+      handleSuccess={handleSuccess}
+    />
+  )
+}

package/src/components/Lend/withdrawV2/index.tsx

@@ -1,15 +1,19 @@
 import {
+  capitalizeFirstLetter,
+  FirstLossCoverIndex,
+  formatBNFixed,
   POOL_NAME,
-  TrancheType,
+  useFirstLossCoverStatsV2,
   usePoolInfoV2,
+  usePoolIsReadyForFlcWithdrawalV2,
   usePoolUnderlyingTokenInfoV2,
-  useWithdrawableAssetsV2,
+  useTrancheWithdrawableAssetsV2,
 } from '@huma-finance/shared'
 import { useWeb3React } from '@web3-react/core'
+import { BigNumber } from 'ethers'
 import React, { useCallback, useEffect, useState } from 'react'
 import { useDispatch } from 'react-redux'
 
-import { BigNumber } from 'ethers'
 import { useAppSelector } from '../../../hooks/useRedux'
 import { setStep } from '../../../store/widgets.reducers'
 import { selectWidgetState } from '../../../store/widgets.selectors'
@@ -17,8 +21,16 @@ import { WIDGET_STEP } from '../../../store/widgets.store'
 import { ErrorModal } from '../../ErrorModal'
 import { WidgetWrapper } from '../../WidgetWrapper'
 import { ChooseTranche } from './1-ChooseTranche'
-import { Transfer } from './2-Transfer'
-import { Done } from './3-Done'
+import { ChooseAmount } from './2-ChooseAmount'
+import { Transfer } from './3-Transfer'
+import { Done } from './4-Done'
+
+export type WithdrawType = {
+  label: string
+  value: string
+  type: 'tranche' | 'firstLossCover'
+  withdrawableAmount: BigNumber
+}
 
 /**
  * Lend pool withdraw props
@@ -43,49 +55,117 @@ export function LendWithdrawV2({
   const poolName = POOL_NAME[poolNameStr]
   const poolInfo = usePoolInfoV2(poolName, chainId)
   const { step, errorMessage } = useAppSelector(selectWidgetState)
+  const [withdrawTypes, setWithdrawTypes] = useState<WithdrawType[]>([])
+  const [selectedWithdrawType, setSelectedWithdrawType] =
+    useState<WithdrawType>()
+
   const [seniorWithdrawableAmount, refreshSeniorWithdrawableAmount] =
-    useWithdrawableAssetsV2(poolName, 'senior', account, provider)
+    useTrancheWithdrawableAssetsV2(poolName, 'senior', account, provider)
   const [juniorWithdrawableAmount, refreshJuniorWithdrawableAmount] =
-    useWithdrawableAssetsV2(poolName, 'junior', account, provider)
+    useTrancheWithdrawableAssetsV2(poolName, 'junior', account, provider)
+  const isReadyForFlcWithdrawal = usePoolIsReadyForFlcWithdrawalV2(
+    poolName,
+    provider,
+  )
+  const [flcStats, refreshFlcStats] = useFirstLossCoverStatsV2(
+    poolName,
+    account,
+    provider,
+  )
+
   const poolUnderlyingToken = usePoolUnderlyingTokenInfoV2(poolName, provider)
-  const [selectedTranche, setSelectedTranche] = useState<TrancheType>()
-  const [withdrawAmount, setWithdrawAmount] = useState<BigNumber>()
+  const { symbol, decimals } = poolUnderlyingToken || {}
+
+  const isLoading =
+    !poolInfo ||
+    !poolUnderlyingToken ||
+    isReadyForFlcWithdrawal === undefined ||
+    !seniorWithdrawableAmount ||
+    !juniorWithdrawableAmount ||
+    !flcStats
 
   useEffect(() => {
-    if (!step) {
-      dispatch(setStep(WIDGET_STEP.ChooseTranche))
+    if (!step && !isLoading) {
+      const items: WithdrawType[] = []
+      if (seniorWithdrawableAmount.gt(0)) {
+        items.push({
+          label: `Withdraw ${formatBNFixed(
+            seniorWithdrawableAmount,
+            decimals!,
+          )} ${symbol} from Senior Tranche`,
+          value: 'senior',
+          type: 'tranche',
+          withdrawableAmount: seniorWithdrawableAmount,
+        })
+      }
+      if (juniorWithdrawableAmount.gt(0)) {
+        items.push({
+          label: `Withdraw ${formatBNFixed(
+            juniorWithdrawableAmount,
+            decimals!,
+          )} ${symbol} from Junior Tranche`,
+          value: 'junior',
+          type: 'tranche',
+          withdrawableAmount: juniorWithdrawableAmount,
+        })
+      }
+      if (isReadyForFlcWithdrawal) {
+        flcStats
+          .filter((flc) => flc.totalAssets.gt(0))
+          .forEach((flc) => {
+            items.push({
+              label: `Withdraw ${symbol} from ${capitalizeFirstLetter(
+                FirstLossCoverIndex[flc.firstLossCoverIndex],
+              )} First Loss Cover`,
+              value: String(flc.firstLossCoverIndex),
+              type: 'firstLossCover',
+              withdrawableAmount: flc.totalAssets,
+            })
+          })
+      }
+
+      setWithdrawTypes(items)
+      if (items.length === 1) {
+        setSelectedWithdrawType(items[0])
+        const step =
+          items[0].type === 'firstLossCover'
+            ? WIDGET_STEP.ChooseAmount
+            : WIDGET_STEP.Transfer
+        dispatch(setStep(step))
+      } else if (items.length > 1) {
+        dispatch(setStep(WIDGET_STEP.ChooseTranche))
+      }
     }
-  }, [dispatch, step])
+  }, [
+    decimals,
+    dispatch,
+    flcStats,
+    isLoading,
+    isReadyForFlcWithdrawal,
+    juniorWithdrawableAmount,
+    seniorWithdrawableAmount,
+    step,
+    symbol,
+  ])
 
   const handleWithdrawSuccess = useCallback(
     (blockNumber: number) => {
       refreshSeniorWithdrawableAmount()
       refreshJuniorWithdrawableAmount()
+      refreshFlcStats()
       if (handleSuccess) {
         handleSuccess(blockNumber)
       }
     },
     [
       handleSuccess,
+      refreshFlcStats,
       refreshJuniorWithdrawableAmount,
       refreshSeniorWithdrawableAmount,
     ],
   )
 
-  const handleChangeTranche = useCallback(
-    (tranche: TrancheType) => {
-      setSelectedTranche(tranche)
-      if (tranche === 'senior') {
-        setWithdrawAmount(seniorWithdrawableAmount)
-      }
-      if (tranche === 'junior') {
-        setWithdrawAmount(juniorWithdrawableAmount)
-      }
-    },
-    [juniorWithdrawableAmount, seniorWithdrawableAmount],
-  )
-
-  if (!poolInfo || !poolUnderlyingToken) {
+  if (isLoading) {
     return null
   }
 
@@ -98,21 +178,30 @@ export function LendWithdrawV2({
     >
       {step === WIDGET_STEP.ChooseTranche && (
         <ChooseTranche
+          poolUnderlyingToken={poolUnderlyingToken}
+          selectedWithdrawType={selectedWithdrawType}
+          withdrawTypes={withdrawTypes}
+          changeWithdrawType={setSelectedWithdrawType}
+        />
+      )}
+      {step === WIDGET_STEP.ChooseAmount && selectedWithdrawType && (
+        <ChooseAmount
           poolInfo={poolInfo}
           poolUnderlyingToken={poolUnderlyingToken}
-          selectedTranche={selectedTranche}
-          changeTranche={handleChangeTranche}
-          seniorWithdrawableAmount={seniorWithdrawableAmount}
-          juniorWithdrawableAmount={juniorWithdrawableAmount}
+          selectedWithdrawType={selectedWithdrawType}
         />
       )}
-      {step === WIDGET_STEP.Transfer && selectedTranche && (
-        <Transfer poolInfo={poolInfo} selectedTranche={selectedTranche} />
+      {step === WIDGET_STEP.Transfer && selectedWithdrawType && (
+        <Transfer
+          poolInfo={poolInfo}
+          poolUnderlyingToken={poolUnderlyingToken}
+          selectedWithdrawType={selectedWithdrawType}
+        />
       )}
-      {step === WIDGET_STEP.Done && withdrawAmount && (
+      {step === WIDGET_STEP.Done && selectedWithdrawType && (
         <Done
           poolUnderlyingToken={poolUnderlyingToken}
-          withdrawAmount={withdrawAmount}
+          withdrawAmount={selectedWithdrawType.withdrawableAmount}
           handleAction={handleClose}
         />
       )}

package/src/components/Lend/withdrawV2/2-Transfer.tsx

@@ -1,48 +0,0 @@
-import {
-  PoolInfoV2,
-  TrancheType,
-  useTrancheVaultContractV2,
-} from '@huma-finance/shared'
-import { useWeb3React } from '@web3-react/core'
-import React, { useCallback } from 'react'
-
-import { useAppDispatch } from '../../../hooks/useRedux'
-import { setStep } from '../../../store/widgets.reducers'
-import { WIDGET_STEP } from '../../../store/widgets.store'
-import { TxSendModalV2 } from '../../TxSendModalV2'
-
-type Props = {
-  poolInfo: PoolInfoV2
-  selectedTranche: TrancheType
-}
-
-export function Transfer({
-  poolInfo,
-  selectedTranche,
-}: Props): React.ReactElement | null {
-  const dispatch = useAppDispatch()
-  const { account, provider } = useWeb3React()
-  const trancheVaultContract = useTrancheVaultContractV2(
-    poolInfo.poolName,
-    selectedTranche,
-    provider,
-    account,
-  )
-
-  const handleSuccess = useCallback(() => {
-    dispatch(setStep(WIDGET_STEP.Done))
-  }, [dispatch])
-
-  if (!trancheVaultContract || !account) {
-    return null
-  }
-
-  return (
-    <TxSendModalV2
-      contract={trancheVaultContract}
-      method='disburse'
-      params={[]}
-      handleSuccess={handleSuccess}
-    />
-  )
-}