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

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

@@ -0,0 +1,135 @@
+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
+  poolIsClosed: boolean
+}
+
+export function ConfirmTransfer({
+  poolInfo,
+  tranche,
+  poolUnderlyingToken,
+  redemptionStatus,
+  poolIsClosed,
+}: 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}>
+        {!poolIsClosed && (
+          <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,50 @@
+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
+  poolIsClosed: boolean
+}
+
+export function Transfer({
+  poolInfo,
+  tranche,
+  poolIsClosed,
+}: 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={poolIsClosed ? 'withdrawAfterPoolClosure' : 'disburse'}
+      params={[]}
+      handleSuccess={handleSuccess}
+    />
+  )
+}

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

@@ -1,16 +1,13 @@
 import {
-  capitalizeFirstLetter,
-  FirstLossCoverIndex,
-  formatBNFixed,
+  getPoolContractV2,
+  getTrancheRedemptionStatusV2,
   POOL_NAME,
-  useFirstLossCoverStatsV2,
+  TrancheRedemptionStatus,
+  TrancheType,
   usePoolInfoV2,
-  usePoolIsReadyForFlcWithdrawalV2,
   usePoolUnderlyingTokenInfoV2,
-  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'
 
@@ -20,33 +17,28 @@ import { selectWidgetState } from '../../../store/widgets.selectors'
 import { WIDGET_STEP } from '../../../store/widgets.store'
 import { ErrorModal } from '../../ErrorModal'
 import { WidgetWrapper } from '../../WidgetWrapper'
-import { ChooseTranche } from './1-ChooseTranche'
-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
-}
+import { ConfirmTransfer } from './1-ConfirmTransfer'
+import { Transfer } from './2-Transfer'
+import { Done } from './3-Done'
 
 /**
  * Lend pool withdraw props
  * @typedef {Object} LendWithdrawPropsV2
  * @property {POOL_NAME} poolName The name of the pool.
+ * @property {TrancheType} trancheType The type of the tranche.
  * @property {function():void} handleClose Function to notify to close the widget modal when user clicks the 'x' close button.
  * @property {function((number|undefined)):void|undefined} handleSuccess Optional function to notify that the lending pool withdraw action is successful.
  */
 export type LendWithdrawPropsV2 = {
   poolName: keyof typeof POOL_NAME
+  trancheType: TrancheType
   handleClose: () => void
   handleSuccess?: (blockNumber?: number) => void
 }
 
 export function LendWithdrawV2({
   poolName: poolNameStr,
+  trancheType,
   handleClose,
   handleSuccess,
 }: LendWithdrawPropsV2): React.ReactElement | null {
@@ -55,159 +47,126 @@ 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] =
-    useTrancheWithdrawableAssetsV2(poolName, 'senior', account, provider)
-  const [juniorWithdrawableAmount, refreshJuniorWithdrawableAmount] =
-    useTrancheWithdrawableAssetsV2(poolName, 'junior', account, provider)
-  const isReadyForFlcWithdrawal = usePoolIsReadyForFlcWithdrawalV2(
-    poolName,
-    provider,
-  )
-  const [flcStats, refreshFlcStats] = useFirstLossCoverStatsV2(
-    poolName,
-    account,
-    provider,
-  )
-
   const poolUnderlyingToken = usePoolUnderlyingTokenInfoV2(poolName, provider)
-  const { symbol, decimals } = poolUnderlyingToken || {}
+  const title = poolUnderlyingToken
+    ? `Withdraw ${poolUnderlyingToken.symbol}`
+    : 'Withdraw'
 
-  const isLoading =
-    !poolInfo ||
-    !poolUnderlyingToken ||
-    isReadyForFlcWithdrawal === undefined ||
-    !seniorWithdrawableAmount ||
-    !juniorWithdrawableAmount ||
-    !flcStats
+  const [redemptionStatus, setRedemptionStatus] = React.useState<
+    TrancheRedemptionStatus | undefined
+  >()
+  const [poolIsClosed, setPoolIsClosed] = useState<boolean | undefined>(
+    undefined,
+  )
 
   useEffect(() => {
-    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,
-        })
+    const fetchData = async () => {
+      if (account && provider) {
+        const result = await getTrancheRedemptionStatusV2(
+          poolName,
+          trancheType,
+          account,
+          provider,
+        )
+        setRedemptionStatus(result)
       }
-      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,
-            })
-          })
+    }
+    fetchData()
+  }, [account, poolName, provider, trancheType])
+
+  useEffect(() => {
+    const fetchData = async () => {
+      if (account && provider) {
+        const result = await getTrancheRedemptionStatusV2(
+          poolName,
+          trancheType,
+          account,
+          provider,
+        )
+        setRedemptionStatus(result)
       }
+    }
+    fetchData()
+  }, [account, poolName, provider, trancheType])
 
-      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))
+  useEffect(() => {
+    const fetchData = async () => {
+      if (account && provider) {
+        const poolContract = await getPoolContractV2(poolName, provider)
+        if (poolContract) {
+          const poolIsClosed = await poolContract.isPoolClosed()
+          setPoolIsClosed(poolIsClosed)
+        }
       }
     }
-  }, [
-    decimals,
-    dispatch,
-    flcStats,
-    isLoading,
-    isReadyForFlcWithdrawal,
-    juniorWithdrawableAmount,
-    seniorWithdrawableAmount,
-    step,
-    symbol,
-  ])
+    fetchData()
+  }, [account, poolName, provider])
+
+  useEffect(() => {
+    if (!step) {
+      dispatch(setStep(WIDGET_STEP.ConfirmTransfer))
+    }
+  }, [dispatch, step])
 
   const handleWithdrawSuccess = useCallback(
     (blockNumber: number) => {
-      refreshSeniorWithdrawableAmount()
-      refreshJuniorWithdrawableAmount()
-      refreshFlcStats()
       if (handleSuccess) {
         handleSuccess(blockNumber)
       }
     },
-    [
-      handleSuccess,
-      refreshFlcStats,
-      refreshJuniorWithdrawableAmount,
-      refreshSeniorWithdrawableAmount,
-    ],
+    [handleSuccess],
   )
 
-  if (isLoading) {
-    return null
+  if (
+    !poolInfo ||
+    !poolUnderlyingToken ||
+    !redemptionStatus ||
+    poolIsClosed === undefined
+  ) {
+    return (
+      <WidgetWrapper
+        isOpen
+        isLoading
+        loadingTitle={title}
+        handleClose={handleClose}
+        handleSuccess={handleSuccess}
+      />
+    )
   }
 
   return (
     <WidgetWrapper
       isOpen
-      loadingTitle='Withdraw'
+      loadingTitle={title}
       handleClose={handleClose}
       handleSuccess={handleWithdrawSuccess}
     >
-      {step === WIDGET_STEP.ChooseTranche && (
-        <ChooseTranche
-          poolUnderlyingToken={poolUnderlyingToken}
-          selectedWithdrawType={selectedWithdrawType}
-          withdrawTypes={withdrawTypes}
-          changeWithdrawType={setSelectedWithdrawType}
-        />
-      )}
-      {step === WIDGET_STEP.ChooseAmount && selectedWithdrawType && (
-        <ChooseAmount
+      {step === WIDGET_STEP.ConfirmTransfer && (
+        <ConfirmTransfer
           poolInfo={poolInfo}
+          tranche={trancheType}
+          redemptionStatus={redemptionStatus}
           poolUnderlyingToken={poolUnderlyingToken}
-          selectedWithdrawType={selectedWithdrawType}
+          poolIsClosed={poolIsClosed}
         />
       )}
-      {step === WIDGET_STEP.Transfer && selectedWithdrawType && (
+      {step === WIDGET_STEP.Transfer && (
         <Transfer
           poolInfo={poolInfo}
-          poolUnderlyingToken={poolUnderlyingToken}
-          selectedWithdrawType={selectedWithdrawType}
+          tranche={trancheType}
+          poolIsClosed={poolIsClosed}
         />
       )}
-      {step === WIDGET_STEP.Done && selectedWithdrawType && (
+      {step === WIDGET_STEP.Done && (
         <Done
           poolUnderlyingToken={poolUnderlyingToken}
-          withdrawAmount={selectedWithdrawType.withdrawableAmount}
+          withdrawAmount={redemptionStatus.withdrawableAssets}
           handleAction={handleClose}
         />
       )}
       {step === WIDGET_STEP.Error && (
         <ErrorModal
-          title='Withdraw'
+          title={title}
           errorReason='Sorry there was an error'
           errorMessage={errorMessage}
           handleOk={handleClose}

package/src/index.tsx

@@ -48,7 +48,14 @@ import {
   InvoiceFactoringPayment,
   InvoiceFactoringPaymentProps,
 } from './components/InvoiceFactoring/payment'
-import { LendRedeemPropsV2, LendRedeemV2 } from './components/Lend/redeemV2'
+import {
+  AddRedemptionPropsV2,
+  AddRedemptionV2,
+} from './components/Lend/addRedemptionV2'
+import {
+  CancelRedemptionPropsV2,
+  CancelRedemptionV2,
+} from './components/Lend/cancelRedemptionV2 '
 import { LendSupply, LendSupplyProps } from './components/Lend/supply'
 import { LendSupplyPropsV2, LendSupplyV2 } from './components/Lend/supplyV2'
 import { LendWithdraw, LendWithdrawProps } from './components/Lend/withdraw'
@@ -60,14 +67,14 @@ import {
   ReceivableBackedCreditLineBorrowPropsV2,
   ReceivableBackedCreditLineBorrowV2,
 } from './components/ReceivableBackedCreditLine/borrow'
-import { SuperfluidFactoring } from './components/SuperfluidFactoring'
-import { store } from './store'
-import { themeHuma } from './theme'
-import { WCProps } from './utilTypes'
 import {
   ReceivableBackedCreditLinePaymentPropsV2,
   ReceivableBackedCreditLinePaymentV2,
 } from './components/ReceivableBackedCreditLine/payment'
+import { SuperfluidFactoring } from './components/SuperfluidFactoring'
+import { store } from './store'
+import { themeHuma } from './theme'
+import { WCProps } from './utilTypes'
 
 /**
  * Mapping of your JSON-RPC connections indexed by chainId
@@ -350,7 +357,7 @@ export function LendWithdrawWidget(props: LendWithdrawWidgetProps) {
 
 /**
  * Lend pool supply widget props V2
- * @typedef {Object} LendSupplyWidgetPropsV2
+ * @typedef {Object} LendWithdrawWidgetPropsV2
  * @property {LendWithdrawPropsV2} LendSupplyPropsV2 - Lend pool supply props V2.
  * @property {WidgetProps} WidgetProps - Widget general props.
  */
@@ -371,23 +378,45 @@ export function LendWithdrawWidgetV2(props: LendWithdrawWidgetPropsV2) {
 }
 
 /**
- * Lend pool redeem widget props V2
- * @typedef {Object} LendRedeemWidgetPropsV2
- * @property {LendRedeemPropsV2} LendRedeemPropsV2 - Lend pool redeem props V2.
+ * Lend pool add redemption widget props V2
+ * @typedef {Object} AddRedemptionWidgetPropsV2
+ * @property {AddRedemptionWidgetPropsV2} AddRedemptionWidgetPropsV2 - Lend pool add redemption props V2.
+ * @property {WidgetProps} WidgetProps - Widget general props.
+ */
+type AddRedemptionWidgetPropsV2 = AddRedemptionPropsV2 & WidgetProps
+
+/**
+ * Add redemption widget V2
+ *
+ * @param {AddRedemptionWidgetPropsV2} props - The lend pool add redemption widget props V2.
+ * @returns Lend pool add redemption widget component V2
+ */
+export function AddRedemptionWidgetV2(props: AddRedemptionWidgetPropsV2) {
+  return (
+    <Widget {...props}>
+      <AddRedemptionV2 {...props} />
+    </Widget>
+  )
+}
+
+/**
+ * Lend pool cancel redemption widget props V2
+ * @typedef {Object} CancelRedemptionWidgetPropsV2
+ * @property {CancelRedemptionWidgetPropsV2} CancelRedemptionWidgetPropsV2 - Lend pool cancel redemption props V2.
  * @property {WidgetProps} WidgetProps - Widget general props.
  */
-type LendRedeemWidgetPropsV2 = LendRedeemPropsV2 & WidgetProps
+type CancelRedemptionWidgetPropsV2 = CancelRedemptionPropsV2 & WidgetProps
 
 /**
- * Lend redeem widget V2
+ * Cancel redemption widget V2
  *
- * @param {LendRedeemWidgetPropsV2} props - The lend pool redeem widget props V2.
- * @returns Lend pool redeem widget component V2
+ * @param {CancelRedemptionWidgetPropsV2} props - The lend pool cancel redemption widget props V2.
+ * @returns Lend pool cancel redemption widget component V2
  */
-export function LendRedeemWidgetV2(props: LendRedeemWidgetPropsV2) {
+export function CancelRedemptionWidgetV2(props: CancelRedemptionWidgetPropsV2) {
   return (
     <Widget {...props}>
-      <LendRedeemV2 {...props} />
+      <CancelRedemptionV2 {...props} />
     </Widget>
   )
 }