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

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

@@ -13,18 +13,18 @@ import { TxSendModalV2 } from '../../TxSendModalV2'
 
 type Props = {
   poolInfo: PoolInfoV2
-  selectedTranche: TrancheType
+  tranche: TrancheType
 }
 
 export function Transfer({
   poolInfo,
-  selectedTranche,
+  tranche,
 }: Props): React.ReactElement | null {
   const dispatch = useAppDispatch()
   const { account, provider } = useWeb3React()
   const trancheVaultContract = useTrancheVaultContractV2(
     poolInfo.poolName,
-    selectedTranche,
+    tranche,
     provider,
     account,
   )

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

@@ -1,22 +1,22 @@
 import {
+  getTrancheRedemptionStatusV2,
   POOL_NAME,
+  TrancheRedemptionStatus,
   TrancheType,
   usePoolInfoV2,
   usePoolUnderlyingTokenInfoV2,
-  useWithdrawableAssetsV2,
 } from '@huma-finance/shared'
 import { useWeb3React } from '@web3-react/core'
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useEffect } 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'
 import { WIDGET_STEP } from '../../../store/widgets.store'
 import { ErrorModal } from '../../ErrorModal'
 import { WidgetWrapper } from '../../WidgetWrapper'
-import { ChooseTranche } from './1-ChooseTranche'
+import { ConfirmTransfer } from './1-ConfirmTransfer'
 import { Transfer } from './2-Transfer'
 import { Done } from './3-Done'
 
@@ -24,17 +24,20 @@ 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 {
@@ -43,82 +46,85 @@ export function LendWithdrawV2({
   const poolName = POOL_NAME[poolNameStr]
   const poolInfo = usePoolInfoV2(poolName, chainId)
   const { step, errorMessage } = useAppSelector(selectWidgetState)
-  const [seniorWithdrawableAmount, refreshSeniorWithdrawableAmount] =
-    useWithdrawableAssetsV2(poolName, 'senior', account, provider)
-  const [juniorWithdrawableAmount, refreshJuniorWithdrawableAmount] =
-    useWithdrawableAssetsV2(poolName, 'junior', account, provider)
   const poolUnderlyingToken = usePoolUnderlyingTokenInfoV2(poolName, provider)
-  const [selectedTranche, setSelectedTranche] = useState<TrancheType>()
-  const [withdrawAmount, setWithdrawAmount] = useState<BigNumber>()
+  const title = poolUnderlyingToken
+    ? `Withdraw ${poolUnderlyingToken.symbol}`
+    : 'Withdraw'
+
+  const [redemptionStatus, setRedemptionStatus] = React.useState<
+    TrancheRedemptionStatus | undefined
+  >()
+
+  useEffect(() => {
+    const fetchData = async () => {
+      if (account && provider) {
+        const result = await getTrancheRedemptionStatusV2(
+          poolName,
+          trancheType,
+          account,
+          provider,
+        )
+        setRedemptionStatus(result)
+      }
+    }
+    fetchData()
+  }, [account, poolName, provider, trancheType])
 
   useEffect(() => {
     if (!step) {
-      dispatch(setStep(WIDGET_STEP.ChooseTranche))
+      dispatch(setStep(WIDGET_STEP.ConfirmTransfer))
     }
   }, [dispatch, step])
 
   const handleWithdrawSuccess = useCallback(
     (blockNumber: number) => {
-      refreshSeniorWithdrawableAmount()
-      refreshJuniorWithdrawableAmount()
       if (handleSuccess) {
         handleSuccess(blockNumber)
       }
     },
-    [
-      handleSuccess,
-      refreshJuniorWithdrawableAmount,
-      refreshSeniorWithdrawableAmount,
-    ],
-  )
-
-  const handleChangeTranche = useCallback(
-    (tranche: TrancheType) => {
-      setSelectedTranche(tranche)
-      if (tranche === 'senior') {
-        setWithdrawAmount(seniorWithdrawableAmount)
-      }
-      if (tranche === 'junior') {
-        setWithdrawAmount(juniorWithdrawableAmount)
-      }
-    },
-    [juniorWithdrawableAmount, seniorWithdrawableAmount],
+    [handleSuccess],
   )
 
-  if (!poolInfo || !poolUnderlyingToken) {
-    return null
+  if (!poolInfo || !poolUnderlyingToken || !redemptionStatus) {
+    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
+      {step === WIDGET_STEP.ConfirmTransfer && (
+        <ConfirmTransfer
           poolInfo={poolInfo}
+          tranche={trancheType}
+          redemptionStatus={redemptionStatus}
           poolUnderlyingToken={poolUnderlyingToken}
-          selectedTranche={selectedTranche}
-          changeTranche={handleChangeTranche}
-          seniorWithdrawableAmount={seniorWithdrawableAmount}
-          juniorWithdrawableAmount={juniorWithdrawableAmount}
         />
       )}
-      {step === WIDGET_STEP.Transfer && selectedTranche && (
-        <Transfer poolInfo={poolInfo} selectedTranche={selectedTranche} />
+      {step === WIDGET_STEP.Transfer && (
+        <Transfer poolInfo={poolInfo} tranche={trancheType} />
       )}
-      {step === WIDGET_STEP.Done && withdrawAmount && (
+      {step === WIDGET_STEP.Done && (
         <Done
           poolUnderlyingToken={poolUnderlyingToken}
-          withdrawAmount={withdrawAmount}
+          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>
   )
 }

package/src/components/Lend/redeemV2/1-ChooseAction.tsx

@@ -1,237 +0,0 @@
-import {
-  PoolInfoV2,
-  timestampToLL,
-  UnderlyingTokenInfo,
-  useLenderDepositRecordV2,
-  useLPConfigV2,
-  useNextEpochStartTimeV2,
-} from '@huma-finance/shared'
-import {
-  Box,
-  css,
-  FormControl,
-  FormControlLabel,
-  FormLabel,
-  Radio,
-  RadioGroup,
-  useTheme,
-} from '@mui/material'
-import { useWeb3React } from '@web3-react/core'
-import { BigNumber, ethers } from 'ethers'
-import React from 'react'
-
-import { REDEMPTION_TYPE, RedemptionInfo } from '.'
-import { useAppDispatch } from '../../../hooks/useRedux'
-import { setError, 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
-  seniorRedemptionInfo: RedemptionInfo | undefined
-  juniorRedemptionInfo: RedemptionInfo | undefined
-  redemptionType: REDEMPTION_TYPE | undefined
-  seniorPosition: BigNumber | undefined
-  juniorPosition: BigNumber | undefined
-  changeRedemptionType: (tranche: REDEMPTION_TYPE) => void
-}
-
-export function ChooseAction({
-  poolInfo,
-  poolUnderlyingToken,
-  seniorRedemptionInfo,
-  juniorRedemptionInfo,
-  redemptionType,
-  seniorPosition,
-  juniorPosition,
-  changeRedemptionType,
-}: Props): React.ReactElement | null {
-  const theme = useTheme()
-  const dispatch = useAppDispatch()
-  const { symbol } = poolUnderlyingToken
-  const { account, provider } = useWeb3React()
-  const [seniorDepositRecord] = useLenderDepositRecordV2(
-    poolInfo.poolName,
-    'senior',
-    account,
-    provider,
-  )
-  const [juniorDepositRecord] = useLenderDepositRecordV2(
-    poolInfo.poolName,
-    'junior',
-    account,
-    provider,
-  )
-  const lpConfig = useLPConfigV2(poolInfo.poolName, provider)
-  const nextEpochStartTime = useNextEpochStartTimeV2(
-    poolInfo.poolName,
-    provider,
-  )
-
-  const isLoading =
-    seniorRedemptionInfo === undefined ||
-    juniorRedemptionInfo === undefined ||
-    seniorDepositRecord === undefined ||
-    juniorDepositRecord === undefined ||
-    lpConfig === undefined ||
-    nextEpochStartTime === undefined
-
-  const styles = {
-    subTitle: css`
-      color: ${theme.palette.text.primary} !important;
-      font-family: 'Uni-Neue-Regular';
-      font-size: 16px;
-      line-height: 150%;
-      letter-spacing: 0.15px;
-      margin-top: ${theme.spacing(5)};
-      margin-left: ${theme.spacing(2)};
-    `,
-    radioGroup: css`
-      margin-left: ${theme.spacing(3)};
-      margin-top: ${theme.spacing(3)};
-    `,
-    formControl: css`
-      margin-bottom: ${theme.spacing(1)};
-
-      .MuiFormControlLabel-label {
-        color: ${theme.palette.text.primary};
-        font-family: 'Uni-Neue-Regular';
-        font-size: 16px;
-        line-height: 150%;
-        letter-spacing: 0.15px;
-      }
-    `,
-  }
-
-  const handleNext = () => {
-    if (isLoading) {
-      return
-    }
-
-    const depositRecord =
-      redemptionType === REDEMPTION_TYPE.AddSeniorRedemption
-        ? seniorDepositRecord
-        : juniorDepositRecord
-
-    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 request too soon',
-          errorMessage: `Your last deposit was on ${timestampToLL(
-            depositRecord.lastDepositTime.toNumber(),
-          )}. Depositors need to wait ${
-            lpConfig.withdrawalLockoutPeriodInDays
-          } days before redemption request`,
-        }),
-      )
-      return
-    }
-
-    dispatch(setStep(WIDGET_STEP.ChooseAmount))
-  }
-
-  const formatAmount = (amount?: BigNumber) => {
-    if (!amount || amount.lte(0)) {
-      return undefined
-    }
-    return ethers.utils.formatUnits(amount, poolUnderlyingToken.decimals)
-  }
-
-  const items: {
-    label: string
-    value: REDEMPTION_TYPE
-    amount?: string
-    show: boolean
-  }[] = [
-    {
-      label: 'Request Senior Tranche Redemption',
-      value: REDEMPTION_TYPE.AddSeniorRedemption,
-      show: seniorPosition?.gt(0) ?? false,
-    },
-    {
-      label: 'Cancel Senior Tranche Redemption',
-      value: REDEMPTION_TYPE.CancelSeniorRedemption,
-      amount: formatAmount(seniorRedemptionInfo?.amount),
-      show: seniorRedemptionInfo?.amount.gt(0) ?? false,
-    },
-    {
-      label: 'Request Junior Tranche Redemption',
-      value: REDEMPTION_TYPE.AddJuniorRedemption,
-      show: juniorPosition?.gt(0) ?? false,
-    },
-    {
-      label: 'Cancel Junior Tranche Redemption',
-      value: REDEMPTION_TYPE.CancelJuniorRedemption,
-      amount: formatAmount(juniorRedemptionInfo?.amount),
-      show: juniorRedemptionInfo?.amount.gt(0) ?? false,
-    },
-  ]
-
-  if (isLoading) {
-    return <LoadingModal title={`Redeem ${symbol}`} />
-  }
-
-  return (
-    <WrapperModal title={`Redeem ${symbol}`}>
-      <FormControl>
-        <FormLabel css={styles.subTitle}>Select Redemption Type</FormLabel>
-        <RadioGroup
-          aria-labelledby='buttons-group-label'
-          name='radio-buttons-group'
-          css={styles.radioGroup}
-          onChange={(e) => changeRedemptionType(Number(e.target.value))}
-        >
-          {items
-            .filter((item) => item.show)
-            .map((item) => {
-              const { label } = item
-              let labelNode = <Box>{label}</Box>
-              if (item.amount) {
-                labelNode = (
-                  <>
-                    <Box>{label}</Box>
-                    <Box>
-                      ({item.amount} {symbol} available)
-                    </Box>
-                  </>
-                )
-              }
-              return (
-                <FormControlLabel
-                  key={item.label}
-                  value={item.value}
-                  control={
-                    <Radio
-                      sx={{
-                        '& .MuiSvgIcon-root': {
-                          fontSize: 24,
-                        },
-                      }}
-                    />
-                  }
-                  label={labelNode}
-                  css={styles.formControl}
-                />
-              )
-            })}
-        </RadioGroup>
-      </FormControl>
-      <BottomButton
-        variant='contained'
-        disabled={redemptionType === undefined}
-        onClick={handleNext}
-      >
-        NEXT
-      </BottomButton>
-    </WrapperModal>
-  )
-}