@huma-finance/widgets 0.0.48-beta.202 → 0.0.48-beta.279

package/src/components/CreditLine/supplyFLC/index.tsx

@@ -0,0 +1,121 @@
+import {
+  FirstLossCoverIndex,
+  POOL_NAME,
+  useFirstLossCoverAllowanceV2,
+  useFirstLossCoverRequirement,
+  usePoolInfoV2,
+  usePoolUnderlyingTokenInfoV2,
+} from '@huma-finance/shared'
+import { useWeb3React } from '@web3-react/core'
+import React, { useEffect } from 'react'
+import { useDispatch } from 'react-redux'
+
+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 { ApproveAllowance } from './1-ApproveAllowance'
+import { Success } from './3-Success'
+import { Transfer } from './2-Transfer'
+
+/**
+ * Supply first loss cover props
+ * @typedef {Object} SupplyFirstLossCoverProps
+ * @property {POOL_NAME} poolName The name of the pool.
+ * @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 credit line pool borrow action is successful.
+ */
+export interface SupplyFirstLossCoverProps {
+  poolName: keyof typeof POOL_NAME
+  handleClose: () => void
+  handleSuccess?: (blockNumber?: number) => void
+}
+
+export function SupplyFirstLossCover({
+  poolName: poolNameStr,
+  handleClose,
+  handleSuccess,
+}: SupplyFirstLossCoverProps): React.ReactElement | null {
+  const dispatch = useDispatch()
+  const poolName = POOL_NAME[poolNameStr]
+  const { account, chainId, provider } = useWeb3React()
+  const poolInfo = usePoolInfoV2(poolName, chainId)
+  const poolUnderlyingToken = usePoolUnderlyingTokenInfoV2(poolName, provider)
+  const { step, errorMessage } = useAppSelector(selectWidgetState)
+  const [requirement] = useFirstLossCoverRequirement(
+    poolName,
+    FirstLossCoverIndex.borrower,
+    account,
+    provider,
+  )
+  const [allowance] = useFirstLossCoverAllowanceV2(
+    poolName,
+    FirstLossCoverIndex.borrower,
+    account,
+    provider,
+  )
+  const { minAmountToDeposit } = requirement || {}
+  const title = 'Deposit First Loss Cover'
+
+  useEffect(() => {
+    if (!step && minAmountToDeposit && allowance) {
+      if (minAmountToDeposit.gt(allowance!)) {
+        dispatch(setStep(WIDGET_STEP.ApproveAllowance))
+      } else {
+        dispatch(setStep(WIDGET_STEP.Transfer))
+      }
+    }
+  }, [allowance, dispatch, minAmountToDeposit, step])
+
+  if (!poolInfo || !poolUnderlyingToken || !minAmountToDeposit || !allowance) {
+    return (
+      <WidgetWrapper
+        isOpen
+        isLoading
+        loadingTitle={title}
+        handleClose={handleClose}
+        handleSuccess={handleSuccess}
+      />
+    )
+  }
+
+  return (
+    <WidgetWrapper
+      isOpen
+      loadingTitle={title}
+      handleClose={handleClose}
+      handleSuccess={handleSuccess}
+    >
+      {step === WIDGET_STEP.ApproveAllowance && (
+        <ApproveAllowance
+          poolInfo={poolInfo}
+          poolUnderlyingToken={poolUnderlyingToken}
+          amountToDeposit={minAmountToDeposit}
+        />
+      )}
+      {step === WIDGET_STEP.Transfer && (
+        <Transfer
+          poolInfo={poolInfo}
+          amountToDeposit={minAmountToDeposit}
+          title={title}
+        />
+      )}
+      {step === WIDGET_STEP.Done && (
+        <Success
+          poolUnderlyingToken={poolUnderlyingToken}
+          handleAction={handleClose}
+          amountToDeposit={minAmountToDeposit}
+        />
+      )}
+      {step === WIDGET_STEP.Error && (
+        <ErrorModal
+          title={title}
+          errorMessage={errorMessage}
+          handleOk={handleClose}
+        />
+      )}
+    </WidgetWrapper>
+  )
+}

package/src/components/Factoring/FactoredList.tsx

@@ -39,10 +39,11 @@ export function FactoredList<T>({
 }: Props<T>): React.ReactElement {
   const theme = useTheme()
   const { isMdSize } = useMQ()
-  const { isActive } = useWeb3React()
+  const { isActive, chainId } = useWeb3React()
   const { decimals } = usePoolUnderlyingToken(
     poolInfo.poolName,
     poolInfo.poolType,
+    chainId,
   )
   const [factoredItem, setFactoredItem] = useState<Partial<T>>()
   const { creditRecord, receivableInfo } = accountStats

package/src/components/InvoiceFactoring/borrow/2-ChooseAmount.tsx

@@ -2,6 +2,7 @@ import { AccountStats, PoolInfoType, useFeeManager } from '@huma-finance/shared'
 import React, { useCallback, useState } from 'react'
 import { ethers } from 'ethers'
 
+import { useWeb3React } from '@web3-react/core'
 import { useAppDispatch, useAppSelector } from '../../../hooks/useRedux'
 import { setBorrowInfo } from '../../../store/widgets.reducers'
 import { selectWidgetState } from '../../../store/widgets.selectors'
@@ -19,10 +20,16 @@ export function ChooseAmount({
 }: Props): React.ReactElement | null {
   const dispatch = useAppDispatch()
   const { creditRecord } = accountStats
+  const { chainId, provider } = useWeb3React()
   const [chargedFees, setChargedFees] = useState(0)
   const [currentAmount, setCurrentAmount] = useState(0)
   const { approval } = useAppSelector(selectWidgetState)
-  const { getFeesCharged } = useFeeManager(poolInfo.poolName, poolInfo.poolType)
+  const { getFeesCharged } = useFeeManager(
+    poolInfo.poolName,
+    poolInfo.poolType,
+    chainId,
+    provider,
+  )
   const [remainder, setRemainder] = useState<string | number | undefined>(
     approval!.receivable?.amountFormatted,
   )

package/src/components/InvoiceFactoring/borrow/4-ApproveNFT.tsx

@@ -23,10 +23,14 @@ type Props = {
 
 export function ApproveNFT({ poolInfo, tokenId }: Props): React.ReactElement {
   const dispatch = useAppDispatch()
-  const { provider } = useWeb3React()
+  const { chainId, provider } = useWeb3React()
   const [{ state, txHash }, send] = useAtom(sendTxAtom)
   const reset = useResetAtom(txAtom)
-  const invoiceNFTContract = useInvoiceNFTContract(poolInfo.poolName)
+  const invoiceNFTContract = useInvoiceNFTContract(
+    poolInfo.poolName,
+    chainId,
+    provider,
+  )
 
   useEffect(() => {
     if (state === TxStateType.Success) {

package/src/components/InvoiceFactoring/borrow/index.tsx

@@ -47,12 +47,18 @@ export function InvoiceFactoringBorrow({
   handleSuccess,
 }: InvoiceFactoringBorrowProps): React.ReactElement | null {
   const dispatch = useDispatch()
-  const { account } = useWeb3React()
+  const { account, chainId, provider } = useWeb3React()
   const poolName = POOL_NAME[poolNameStr]
   const poolType = POOL_TYPE[poolTypeStr]
-  const poolInfo = usePoolInfo(poolName, poolType)
+  const poolInfo = usePoolInfo(poolName, poolType, chainId)
   const { step, errorMessage } = useAppSelector(selectWidgetState)
-  const [accountStats] = useAccountStats(poolName, poolType, account)
+  const [accountStats] = useAccountStats(
+    poolName,
+    poolType,
+    chainId,
+    account,
+    provider,
+  )
 
   useEffect(() => {
     dispatch(setStep(WIDGET_STEP.Evaluation))

package/src/components/InvoiceFactoring/payment/1-ChooseAmount.tsx

@@ -23,10 +23,15 @@ export function ChooseAmount({
   poolInfo,
 }: Props): React.ReactElement | null {
   const dispatch = useAppDispatch()
-  const { account } = useWeb3React()
+  const { account, chainId, provider } = useWeb3React()
   const { symbol, decimals } = poolInfo.poolUnderlyingToken
   const totalDue = downScale<number>(creditRecord.totalDue.toNumber(), decimals)
-  const { allowance } = useRFPoolAllowance(poolInfo.poolName, account)
+  const { allowance } = useRFPoolAllowance(
+    poolInfo.poolName,
+    chainId,
+    account,
+    provider,
+  )
   const [remainingDue, setRemainingDue] = useState(totalDue)
   const [currentAmount, setCurrentAmount] = useState(0)
 

package/src/components/InvoiceFactoring/payment/index.tsx

@@ -41,12 +41,18 @@ export function InvoiceFactoringPayment({
   handleSuccess,
 }: InvoiceFactoringPaymentProps): React.ReactElement | null {
   const dispatch = useDispatch()
-  const { account } = useWeb3React()
+  const { account, chainId, provider } = useWeb3React()
   const poolName = POOL_NAME[poolNameStr]
   const poolType = POOL_TYPE[poolTypeStr]
-  const poolInfo = usePoolInfo(poolName, poolType)
+  const poolInfo = usePoolInfo(poolName, poolType, chainId)
   const { step, errorMessage } = useAppSelector(selectWidgetState)
-  const [{ creditRecord }] = useAccountStats(poolName, poolType, account)
+  const [{ creditRecord }] = useAccountStats(
+    poolName,
+    poolType,
+    chainId,
+    account,
+    provider,
+  )
 
   useEffect(() => {
     dispatch(setStep(WIDGET_STEP.ChooseAmount))

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

@@ -0,0 +1,236 @@
+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>
+  )
+}

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

@@ -0,0 +1,162 @@
+import {
+  formatMoney,
+  getTrancheVaultContractV2,
+  PoolInfoV2,
+  UnderlyingTokenInfo,
+} from '@huma-finance/shared'
+import { Box, css, Slider, useTheme } from '@mui/material'
+import { useWeb3React } from '@web3-react/core'
+import { BigNumber, ethers } from 'ethers'
+import React, { useEffect, useState } from 'react'
+
+import { REDEMPTION_TYPE, RedemptionActionInfo } from '.'
+import { useAppDispatch } from '../../../hooks/useRedux'
+import {
+  setRedeemAmount,
+  setRedeemShares,
+  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
+  redemptionType: REDEMPTION_TYPE
+  maxAmount: BigNumber
+}
+
+export function ChooseAmount({
+  poolInfo,
+  poolUnderlyingToken,
+  redemptionType,
+  maxAmount,
+}: Props): React.ReactElement | null {
+  const theme = useTheme()
+  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 redemptionActionInfo = RedemptionActionInfo[redemptionType]
+  const maxAmountFormatted = ethers.utils.formatUnits(
+    maxAmount,
+    poolUnderlyingToken.decimals,
+  )
+
+  useEffect(() => {
+    if (maxAmount.gt(0)) {
+      const fetchData = async () => {
+        const vaultContract = await getTrancheVaultContractV2(
+          poolInfo.poolName,
+          redemptionActionInfo.tranche,
+          provider,
+        )
+        if (vaultContract) {
+          const shares = await vaultContract.convertToShares(maxAmount)
+          const price = maxAmount.div(shares)
+          setSharePrice(price.toNumber())
+        }
+      }
+      fetchData()
+    }
+  }, [maxAmount, poolInfo.poolName, provider, redemptionActionInfo.tranche])
+
+  const styles = {
+    sliderWrapper: css`
+      margin-bottom: ${theme.spacing(1)};
+      margin-top: ${theme.spacing(14)};
+    `,
+    currentAmount: css`
+      font-size: 32px;
+      font-family: 'Uni-Neue-Bold';
+      text-align: center;
+      background: linear-gradient(233deg, #b246ff 4.17%, #ff6a8a 178.69%);
+      background-clip: text;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    `,
+    slider: css`
+      &.MuiSlider-root {
+        height: 8px !important;
+        color: #e9e9e9;
+      }
+      & .MuiSlider-track {
+        height: 8px !important;
+        background: linear-gradient(232.71deg, #a363f4 4.17%, #ff6a8a 178.69%);
+        border-radius: 8px;
+      }
+      & .MuiSlider-thumb::before {
+        background: #ffffff;
+        border: 1px solid #f9f9f9;
+        box-shadow: 1px 1px 12px 2px rgba(163, 100, 244, 0.6);
+        border-radius: 50px;
+        width: 24px;
+        height: 24px;
+      }
+    `,
+    shares: css`
+      color: ${theme.palette.text.primary};
+      font-family: 'Uni-Neue-Bold';
+      font-size: 20px;
+      line-height: 160%;
+      letter-spacing: 0.15px;
+    `,
+  }
+
+  const handleChangeAmount = (event: Event, newAmount: number | number[]) => {
+    const shares = Number(newAmount) / sharePrice
+    setCurrentShares(shares)
+    setCurrentAmount(Number(newAmount))
+    dispatch(setRedeemAmount(Number(newAmount)))
+    dispatch(setRedeemShares(shares))
+  }
+
+  const handleAction = () => {
+    dispatch(setStep(WIDGET_STEP.Transfer))
+  }
+
+  if (sharePrice === 0) {
+    return (
+      <LoadingModal
+        title={`${redemptionActionInfo.action} Redemption Request`}
+      />
+    )
+  }
+
+  return (
+    <WrapperModal
+      title={redemptionActionInfo.action}
+      subTitle={
+        redemptionActionInfo.action === 'Create'
+          ? `Select ${symbol} amount to redeem from ${redemptionActionInfo.tranche} tranche`
+          : `Cancel ${symbol} amount from ${redemptionActionInfo.tranche} tranche redemption request`
+      }
+    >
+      <Box css={styles.sliderWrapper}>
+        <Box css={styles.currentAmount}>
+          {formatMoney(currentAmount)} {poolUnderlyingToken.symbol}
+        </Box>
+        <Slider
+          max={Number(maxAmountFormatted)}
+          min={0}
+          css={styles.slider}
+          aria-label='Amount'
+          value={currentAmount}
+          onChange={handleChangeAmount}
+        />
+        <Box css={styles.shares}>{currentShares.toFixed(1)} Shares</Box>
+      </Box>
+      <BottomButton
+        variant='contained'
+        onClick={handleAction}
+        disabled={Number(currentAmount) <= 0}
+      >
+        SUBMIT
+      </BottomButton>
+    </WrapperModal>
+  )
+}

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

@@ -0,0 +1,61 @@
+import {
+  PoolInfoV2,
+  UnderlyingTokenInfo,
+  useTrancheVaultContractV2,
+} from '@huma-finance/shared'
+import { useWeb3React } from '@web3-react/core'
+import React, { useCallback } from 'react'
+
+import { ethers } from 'ethers'
+import { REDEMPTION_TYPE, RedemptionActionInfo } 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 { TxSendModalV2 } from '../../TxSendModalV2'
+
+type Props = {
+  poolInfo: PoolInfoV2
+  poolUnderlyingToken: UnderlyingTokenInfo
+  redemptionType: REDEMPTION_TYPE
+}
+
+export function Transfer({
+  poolInfo,
+  poolUnderlyingToken,
+  redemptionType,
+}: Props): React.ReactElement | null {
+  const dispatch = useAppDispatch()
+  const { decimals } = poolUnderlyingToken
+  const { account, provider } = useWeb3React()
+  const { redeemShares } = useAppSelector(selectWidgetState)
+  const redemptionActionInfo = RedemptionActionInfo[redemptionType]
+  const trancheVaultContract = useTrancheVaultContractV2(
+    poolInfo.poolName,
+    redemptionActionInfo.tranche,
+    provider,
+    account,
+  )
+  const redeemSharesBN = ethers.utils.parseUnits(String(redeemShares), decimals)
+  const method =
+    redemptionActionInfo.action === 'Create'
+      ? 'addRedemptionRequest'
+      : 'cancelRedemptionRequest'
+
+  const handleSuccess = useCallback(() => {
+    dispatch(setStep(WIDGET_STEP.Done))
+  }, [dispatch])
+
+  if (!trancheVaultContract || !account) {
+    return null
+  }
+
+  return (
+    <TxSendModalV2
+      contract={trancheVaultContract}
+      method={method}
+      params={[redeemSharesBN]}
+      handleSuccess={handleSuccess}
+    />
+  )
+}