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

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

@@ -1,4 +1,4 @@
-import { UnderlyingTokenInfo } from '@huma-finance/shared'
+import { TrancheType, UnderlyingTokenInfo } from '@huma-finance/shared'
 import {
   css,
   FormControl,
@@ -10,7 +10,6 @@ import {
 } from '@mui/material'
 import React from 'react'
 
-import { SupplyType } from '.'
 import { useAppDispatch } from '../../../hooks/useRedux'
 import { setStep } from '../../../store/widgets.reducers'
 import { WIDGET_STEP } from '../../../store/widgets.store'
@@ -19,16 +18,14 @@ import { WrapperModal } from '../../WrapperModal'
 
 type Props = {
   poolUnderlyingToken: UnderlyingTokenInfo
-  selectedSupplyType: SupplyType | undefined
-  supplyTypes: SupplyType[]
-  changeSupplyType: (supplyType: SupplyType) => void
+  selectedTranche: TrancheType | undefined
+  changeTranche: (tranche: TrancheType) => void
 }
 
-export function ChooseSupplyType({
+export function ChooseTranche({
   poolUnderlyingToken,
-  selectedSupplyType,
-  supplyTypes,
-  changeSupplyType,
+  selectedTranche,
+  changeTranche,
 }: Props): React.ReactElement | null {
   const theme = useTheme()
   const dispatch = useAppDispatch()
@@ -60,19 +57,24 @@ export function ChooseSupplyType({
     `,
   }
 
-  const handleChangeSupplyType = (supplyTypeValue: string | number) => {
-    const supplyType = supplyTypes.find(
-      (item) => item.value === supplyTypeValue,
-    )
-    if (supplyType) {
-      changeSupplyType(supplyType)
-    }
-  }
-
   const handleNext = () => {
     dispatch(setStep(WIDGET_STEP.ChooseAmount))
   }
 
+  const items: {
+    label: string
+    value: TrancheType
+  }[] = [
+    {
+      label: 'Senior',
+      value: 'senior',
+    },
+    {
+      label: 'Junior',
+      value: 'junior',
+    },
+  ]
+
   return (
     <WrapperModal title={`Supply ${poolUnderlyingToken.symbol}`}>
       <FormControl>
@@ -81,9 +83,9 @@ export function ChooseSupplyType({
           aria-labelledby='buttons-group-label'
           name='radio-buttons-group'
           css={styles.radioGroup}
-          onChange={(e) => handleChangeSupplyType(e.target.value)}
+          onChange={(e) => changeTranche(e.target.value as TrancheType)}
         >
-          {supplyTypes.map((item) => (
+          {items.map((item) => (
             <FormControlLabel
               key={item.label}
               value={item.value}
@@ -104,7 +106,7 @@ export function ChooseSupplyType({
       </FormControl>
       <BottomButton
         variant='contained'
-        disabled={!selectedSupplyType}
+        disabled={!selectedTranche}
         onClick={handleNext}
       >
         NEXT

package/src/components/Lend/supplyV2/3-ChooseAmount.tsx

@@ -1,9 +1,8 @@
 import {
-  FirstLossCoverIndex,
-  formatNumber,
   PoolInfoV2,
+  TrancheType,
   UnderlyingTokenInfo,
-  useFirstLossCoverAllowanceV2,
+  formatNumber,
   usePoolSafeAllowanceV2,
   usePoolUnderlyingTokenBalanceV2,
 } from '@huma-finance/shared'
@@ -11,7 +10,6 @@ import { useWeb3React } from '@web3-react/core'
 import { BigNumber, ethers } from 'ethers'
 import React, { useState } from 'react'
 
-import { SupplyType } from '.'
 import { useAppDispatch } from '../../../hooks/useRedux'
 import { setStep, setSupplyAmount } from '../../../store/widgets.reducers'
 import { WIDGET_STEP } from '../../../store/widgets.store'
@@ -20,31 +18,30 @@ import { InputAmountModal } from '../../InputAmountModal'
 type Props = {
   poolInfo: PoolInfoV2
   poolUnderlyingToken: UnderlyingTokenInfo
-  selectedSupplyType: SupplyType
+  selectedTranche: TrancheType | undefined
 }
 
 export function ChooseAmount({
   poolInfo,
   poolUnderlyingToken,
-  selectedSupplyType,
+  selectedTranche,
 }: Props): React.ReactElement | null {
   const dispatch = useAppDispatch()
   const { account, provider } = useWeb3React()
   const { symbol, decimals } = poolUnderlyingToken
   const [currentAmount, setCurrentAmount] = useState<number | string>(0)
-  const { allowance: poolSafeAllowance = BigNumber.from(0) } =
-    usePoolSafeAllowanceV2(poolInfo.poolName, account, provider)
-  const [firstLossCoverAllowance = BigNumber.from(0)] =
-    useFirstLossCoverAllowanceV2(
-      poolInfo.poolName,
-      Number(selectedSupplyType.value) as FirstLossCoverIndex,
-      account,
-      provider,
-    )
-  const [underlyingTokenBalance = BigNumber.from(0)] =
-    usePoolUnderlyingTokenBalanceV2(poolInfo.poolName, account, provider)
+  const { allowance = BigNumber.from(0) } = usePoolSafeAllowanceV2(
+    poolInfo.poolName,
+    account,
+    provider,
+  )
+  const [balance] = usePoolUnderlyingTokenBalanceV2(
+    poolInfo.poolName,
+    account,
+    provider,
+  )
   const maxAmountFormatted = ethers.utils.formatUnits(
-    underlyingTokenBalance,
+    balance,
     poolUnderlyingToken.decimals,
   )
 
@@ -58,23 +55,16 @@ export function ChooseAmount({
       String(currentAmount),
       decimals,
     )
-    if (selectedSupplyType.type === 'tranche') {
-      const step = currentAmountBN.gt(poolSafeAllowance)
-        ? WIDGET_STEP.ApproveAllowance
-        : WIDGET_STEP.Transfer
-      dispatch(setStep(step))
-    } else {
-      const step = currentAmountBN.gt(firstLossCoverAllowance)
-        ? WIDGET_STEP.ApproveAllowance
-        : WIDGET_STEP.Transfer
-      dispatch(setStep(step))
-    }
+    const step = currentAmountBN.gt(allowance)
+      ? WIDGET_STEP.ApproveAllowance
+      : WIDGET_STEP.Transfer
+    dispatch(setStep(step))
   }
 
   return (
     <InputAmountModal
       title='Enter Amount'
-      subTitle={`Supplying ${symbol} with ${selectedSupplyType?.label}`}
+      subTitle={`Supplying ${symbol} with ${selectedTranche}`}
       tokenSymbol={symbol}
       currentAmount={currentAmount}
       handleChangeAmount={handleChangeAmount}

package/src/components/Lend/supplyV2/4-ApproveAllowance.tsx

@@ -1,11 +1,6 @@
-import {
-  FirstLossCoverIndex,
-  PoolInfoV2,
-  UnderlyingTokenInfo,
-} from '@huma-finance/shared'
+import { PoolInfoV2, UnderlyingTokenInfo } from '@huma-finance/shared'
 import React, { useCallback } from 'react'
 
-import { SupplyType } from '.'
 import { useAppDispatch } from '../../../hooks/useRedux'
 import { setStep } from '../../../store/widgets.reducers'
 import { WIDGET_STEP } from '../../../store/widgets.store'
@@ -14,22 +9,14 @@ import { ApproveAllowanceModalV2 } from '../../ApproveAllowanceModalV2'
 type Props = {
   poolInfo: PoolInfoV2
   poolUnderlyingToken: UnderlyingTokenInfo
-  selectedSupplyType: SupplyType
 }
 
 export function ApproveAllowance({
   poolInfo,
   poolUnderlyingToken,
-  selectedSupplyType,
 }: Props): React.ReactElement | null {
   const dispatch = useAppDispatch()
-  let spender = poolInfo.poolSafe
-  if (selectedSupplyType.type === 'firstLossCover') {
-    spender =
-      poolInfo.firstLossCovers[
-        Number(selectedSupplyType.value) as FirstLossCoverIndex
-      ]
-  }
+  const spender = poolInfo.poolSafe
 
   const handleSuccess = useCallback(() => {
     dispatch(setStep(WIDGET_STEP.Transfer))

package/src/components/Lend/supplyV2/5-Transfer.tsx

@@ -1,34 +1,30 @@
 import {
-  FirstLossCoverIndex,
-  getFirstLossCoverContractV2,
-  getTrancheVaultContractV2,
   PoolInfoV2,
+  useTrancheVaultContractV2,
   TrancheType,
   UnderlyingTokenInfo,
 } from '@huma-finance/shared'
 import { useWeb3React } from '@web3-react/core'
 import { ethers } from 'ethers'
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useCallback } from 'react'
 
-import { SupplyType } 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
-  selectedSupplyType: SupplyType
+  trancheType: TrancheType
 }
 
 export function Transfer({
   poolInfo,
   poolUnderlyingToken,
-  selectedSupplyType,
-}: Props): React.ReactElement {
+  trancheType,
+}: Props): React.ReactElement | null {
   const dispatch = useAppDispatch()
   const { account, provider } = useWeb3React()
   const { supplyAmount } = useAppSelector(selectWidgetState)
@@ -37,66 +33,26 @@ export function Transfer({
     String(supplyAmount),
     decimals,
   )
-  const [contract, setContract] = useState<ethers.Contract | undefined>(
-    undefined,
-  )
-
-  useEffect(() => {
-    const fetchData = async () => {
-      if (account) {
-        if (selectedSupplyType.type === 'tranche') {
-          const trancheVaultContract = await getTrancheVaultContractV2(
-            poolInfo.poolName,
-            selectedSupplyType.value as TrancheType,
-            provider,
-            account,
-          )
-          if (trancheVaultContract) {
-            setContract(trancheVaultContract)
-          }
-        }
-        if (selectedSupplyType.type === 'firstLossCover') {
-          const firstLossCoverContract = await getFirstLossCoverContractV2(
-            poolInfo.poolName,
-            Number(selectedSupplyType.value) as FirstLossCoverIndex,
-            provider,
-            account,
-          )
-          if (firstLossCoverContract) {
-            setContract(firstLossCoverContract)
-          }
-        }
-      }
-    }
-    fetchData()
-  }, [
-    account,
+  const trancheVaultContract = useTrancheVaultContractV2(
     poolInfo.poolName,
+    trancheType,
     provider,
-    selectedSupplyType.type,
-    selectedSupplyType.value,
-  ])
-
-  const method =
-    selectedSupplyType.type === 'tranche' ? 'deposit' : 'depositCover'
-  const params =
-    selectedSupplyType.type === 'tranche'
-      ? [supplyBigNumber, account]
-      : [supplyBigNumber]
+    account,
+  )
 
   const handleSuccess = useCallback(() => {
     dispatch(setStep(WIDGET_STEP.Done))
   }, [dispatch])
 
-  if (!contract) {
-    return <LoadingModal title='Transaction Pending' />
+  if (!trancheVaultContract || !account) {
+    return null
   }
 
   return (
     <TxSendModalV2
-      contract={contract}
-      method={method}
-      params={params}
+      contract={trancheVaultContract}
+      method='deposit'
+      params={[supplyBigNumber, account]}
       handleSuccess={handleSuccess}
     />
   )

package/src/components/Lend/supplyV2/6-Success.tsx

@@ -45,8 +45,11 @@ export function Success({
       const events = decodeLogs(txReceipt.logs, TRANSFER_ABI)
       if (events) {
         events.forEach((event) => {
-          const { from, value } = event.args
-          if (from.toLowerCase() === account?.toLowerCase()) {
+          const { from, to, value } = event.args
+          if (
+            from.toLowerCase() === account?.toLowerCase() &&
+            to.toLowerCase() === poolInfo.poolSafe.toLowerCase()
+          ) {
             setSupplyAmount(downScale(value.toString(), decimals))
           }
         })

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

@@ -1,9 +1,7 @@
 import {
-  capitalizeFirstLetter,
-  FirstLossCoverIndex,
-  openInNewTab,
   POOL_NAME,
-  useFirstLossCoverStatsV2,
+  TrancheType,
+  openInNewTab,
   useLenderApprovedV2,
   usePoolInfoV2,
   usePoolUnderlyingTokenInfoV2,
@@ -18,7 +16,7 @@ import { selectWidgetState } from '../../../store/widgets.selectors'
 import { WIDGET_STEP } from '../../../store/widgets.store'
 import { ErrorModal } from '../../ErrorModal'
 import { WidgetWrapper } from '../../WidgetWrapper'
-import { ChooseSupplyType } from './1-ChooseTranche'
+import { ChooseTranche } from './1-ChooseTranche'
 import { Evaluation } from './2-Evaluation'
 import { ChooseAmount } from './3-ChooseAmount'
 import { ApproveAllowance } from './4-ApproveAllowance'
@@ -26,12 +24,6 @@ import { Transfer } from './5-Transfer'
 import { Success } from './6-Success'
 import { Notifications } from './7-Notifications'
 
-export type SupplyType = {
-  label: string
-  value: string
-  type: 'tranche' | 'firstLossCover'
-}
-
 /**
  * Lend pool supply props
  * @typedef {Object} LendSupplyPropsV2
@@ -55,8 +47,7 @@ export function LendSupplyV2({
   const { chainId, provider, account } = useWeb3React()
   const poolInfo = usePoolInfoV2(poolName, chainId)
   const { step, errorMessage } = useAppSelector(selectWidgetState)
-  const [supplyTypes, setSupplyTypes] = useState<SupplyType[]>([])
-  const [selectedSupplyType, setSelectedSupplyType] = useState<SupplyType>()
+  const [selectedTranche, setSelectedTranche] = useState<TrancheType>()
   const poolUnderlyingToken = usePoolUnderlyingTokenInfoV2(poolName, provider)
 
   const [lenderApprovedSenior] = useLenderApprovedV2(
@@ -71,57 +62,40 @@ export function LendSupplyV2({
     account,
     provider,
   )
-  const [flcStats] = useFirstLossCoverStatsV2(poolName, account, provider)
 
   const lenderApproveStatusFetched =
-    lenderApprovedSenior !== undefined &&
-    lenderApprovedJunior !== undefined &&
-    flcStats !== undefined
+    lenderApprovedSenior !== undefined && lenderApprovedJunior !== undefined
 
   useEffect(() => {
     if (!step && poolInfo && lenderApproveStatusFetched) {
-      const items: SupplyType[] = []
-      if (lenderApprovedSenior) {
-        items.push({
-          label: 'Senior Tranche',
-          value: 'senior',
-          type: 'tranche',
-        })
-      }
-      if (lenderApprovedJunior) {
-        items.push({
-          label: 'Junior Tranche',
-          value: 'junior',
-          type: 'tranche',
-        })
+      if (lenderApprovedJunior && !lenderApprovedSenior) {
+        setSelectedTranche('junior')
+        dispatch(setStep(WIDGET_STEP.ChooseAmount))
+        return
       }
-      flcStats
-        .filter((flc) => flc.isApproved)
-        .forEach((flc) => {
-          items.push({
-            label: `${capitalizeFirstLetter(
-              FirstLossCoverIndex[flc.firstLossCoverIndex],
-            )} First Loss Cover`,
-            value: String(flc.firstLossCoverIndex),
-            type: 'firstLossCover',
-          })
-        })
 
-      if (items.length === 1) {
-        setSelectedSupplyType(items[0])
+      if (lenderApprovedSenior && !lenderApprovedJunior) {
+        setSelectedTranche('senior')
         dispatch(setStep(WIDGET_STEP.ChooseAmount))
-      } else if (items.length > 1) {
-        setSupplyTypes(items)
+        return
+      }
+
+      if (lenderApprovedJunior && lenderApprovedSenior) {
         dispatch(setStep(WIDGET_STEP.ChooseTranche))
-      } else if (poolInfo.KYC) {
+        return
+      }
+
+      if (poolInfo.KYC) {
         dispatch(setStep(WIDGET_STEP.Evaluation))
-      } else if (poolInfo.supplyLink) {
+        return
+      }
+
+      if (poolInfo.supplyLink) {
         openInNewTab(poolInfo.supplyLink)
       }
     }
   }, [
     dispatch,
-    flcStats,
     lenderApproveStatusFetched,
     lenderApprovedJunior,
     lenderApprovedSenior,
@@ -149,35 +123,33 @@ export function LendSupplyV2({
       handleSuccess={handleSuccess}
     >
       {step === WIDGET_STEP.ChooseTranche && (
-        <ChooseSupplyType
+        <ChooseTranche
           poolUnderlyingToken={poolUnderlyingToken}
-          selectedSupplyType={selectedSupplyType}
-          supplyTypes={supplyTypes}
-          changeSupplyType={setSelectedSupplyType}
+          selectedTranche={selectedTranche}
+          changeTranche={setSelectedTranche}
         />
       )}
       {step === WIDGET_STEP.Evaluation && (
         <Evaluation poolInfo={poolInfo} handleClose={handleClose} />
       )}
-      {step === WIDGET_STEP.ChooseAmount && selectedSupplyType && (
+      {step === WIDGET_STEP.ChooseAmount && (
         <ChooseAmount
           poolInfo={poolInfo}
           poolUnderlyingToken={poolUnderlyingToken}
-          selectedSupplyType={selectedSupplyType}
+          selectedTranche={selectedTranche}
         />
       )}
-      {step === WIDGET_STEP.ApproveAllowance && selectedSupplyType && (
+      {step === WIDGET_STEP.ApproveAllowance && (
         <ApproveAllowance
           poolInfo={poolInfo}
           poolUnderlyingToken={poolUnderlyingToken}
-          selectedSupplyType={selectedSupplyType}
         />
       )}
-      {step === WIDGET_STEP.Transfer && selectedSupplyType && (
+      {step === WIDGET_STEP.Transfer && selectedTranche && (
         <Transfer
           poolInfo={poolInfo}
           poolUnderlyingToken={poolUnderlyingToken}
-          selectedSupplyType={selectedSupplyType}
+          trancheType={selectedTranche}
         />
       )}
       {step === WIDGET_STEP.Done && (

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

@@ -0,0 +1,131 @@
+import {
+  PoolInfoV2,
+  TrancheRedemptionStatus,
+  TrancheType,
+  UnderlyingTokenInfo,
+  formatAmount,
+  getTrancheVaultContractV2,
+} from '@huma-finance/shared'
+import { Box, Divider, css, useTheme } from '@mui/material'
+import React, { useEffect, useState } from 'react'
+import { useDispatch } from 'react-redux'
+
+import { useWeb3React } from '@web3-react/core'
+import { setStep } from '../../../store/widgets.reducers'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { BottomButton } from '../../BottomButton'
+import { WrapperModal } from '../../WrapperModal'
+
+type Props = {
+  poolInfo: PoolInfoV2
+  tranche: TrancheType
+  poolUnderlyingToken: UnderlyingTokenInfo
+  redemptionStatus: TrancheRedemptionStatus
+}
+
+export function ConfirmTransfer({
+  poolInfo,
+  tranche,
+  poolUnderlyingToken,
+  redemptionStatus,
+}: Props): React.ReactElement {
+  const theme = useTheme()
+  const dispatch = useDispatch()
+  const { provider } = useWeb3React()
+  const { symbol, decimals } = poolUnderlyingToken
+  const { lenderRedemptionRecords, cancellableRedemptionShares } =
+    redemptionStatus
+  const { numSharesRequested } = lenderRedemptionRecords
+  const sharesProcessed = formatAmount(
+    numSharesRequested.sub(cancellableRedemptionShares),
+    decimals,
+  )
+  const withdrawableAmount = formatAmount(
+    redemptionStatus.withdrawableAssets,
+    decimals,
+  )
+  const [sharePrice, setSharePrice] = useState(0)
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const vaultContract = await getTrancheVaultContractV2(
+        poolInfo.poolName,
+        tranche,
+        provider,
+      )
+      if (vaultContract) {
+        const shares = await vaultContract.convertToShares(
+          redemptionStatus.withdrawableAssets,
+        )
+        setSharePrice(
+          redemptionStatus.withdrawableAssets.toNumber() / shares.toNumber(),
+        )
+      }
+    }
+    fetchData()
+  }, [
+    poolInfo.poolName,
+    provider,
+    redemptionStatus.withdrawableAssets,
+    tranche,
+  ])
+
+  const goToWithdraw = () => {
+    dispatch(setStep(WIDGET_STEP.Transfer))
+  }
+
+  const styles = {
+    itemWrapper: css`
+      margin-top: ${theme.spacing(9)};
+      color: ${theme.palette.text.primary};
+      font-family: 'Uni-Neue-Regular';
+      font-size: 16px;
+      line-height: 175%;
+      letter-spacing: 0.15px;
+    `,
+    item: css`
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: ${theme.spacing(3)};
+    `,
+    itemValue: css`
+      font-size: 20px;
+      font-family: 'Uni-Neue-Bold';
+    `,
+    divider: css`
+      border-color: #eae6f0;
+      margin-bottom: ${theme.spacing(3)};
+    `,
+  }
+
+  return (
+    <WrapperModal
+      title={`Withdraw ${symbol}`}
+      subTitle='Withdraw all the available amount'
+    >
+      <Box css={styles.itemWrapper}>
+        <Box css={styles.item}>
+          <Box>Shares processed</Box>
+          <Box css={styles.itemValue}>{sharesProcessed}</Box>
+        </Box>
+        <Box css={styles.item}>
+          <Box>Price Per Share</Box>
+          <Box css={styles.itemValue}>
+            {sharePrice.toFixed(1)} {symbol}
+          </Box>
+        </Box>
+        <Divider css={styles.divider} orientation='horizontal' />
+        <Box css={styles.item}>
+          <Box fontWeight={700}>Available to withdraw</Box>
+          <Box css={styles.itemValue}>
+            {withdrawableAmount} {symbol}
+          </Box>
+        </Box>
+      </Box>
+      <BottomButton variant='contained' onClick={goToWithdraw}>
+        WITHDRAW
+      </BottomButton>
+    </WrapperModal>
+  )
+}

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

@@ -0,0 +1,48 @@
+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
+  tranche: TrancheType
+}
+
+export function Transfer({
+  poolInfo,
+  tranche,
+}: Props): React.ReactElement | null {
+  const dispatch = useAppDispatch()
+  const { account, provider } = useWeb3React()
+  const trancheVaultContract = useTrancheVaultContractV2(
+    poolInfo.poolName,
+    tranche,
+    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}
+    />
+  )
+}