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

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

@@ -1,17 +1,13 @@
 import {
-  capitalizeFirstLetter,
-  FirstLossCoverIndex,
-  formatBNFixed,
+  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 React, { useCallback, useEffect } from 'react'
 import { useDispatch } from 'react-redux'
 
 import { useAppSelector } from '../../../hooks/useRedux'
@@ -20,33 +16,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 +46,85 @@ 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
+  >()
 
   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,
-        })
-      }
-      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,
-            })
-          })
+    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(() => {
+    if (!step) {
+      dispatch(setStep(WIDGET_STEP.ConfirmTransfer))
     }
-  }, [
-    decimals,
-    dispatch,
-    flcStats,
-    isLoading,
-    isReadyForFlcWithdrawal,
-    juniorWithdrawableAmount,
-    seniorWithdrawableAmount,
-    step,
-    symbol,
-  ])
+  }, [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) {
+    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}
         />
       )}
-      {step === WIDGET_STEP.Transfer && selectedWithdrawType && (
-        <Transfer
-          poolInfo={poolInfo}
-          poolUnderlyingToken={poolUnderlyingToken}
-          selectedWithdrawType={selectedWithdrawType}
-        />
+      {step === WIDGET_STEP.Transfer && (
+        <Transfer poolInfo={poolInfo} tranche={trancheType} />
       )}
-      {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>
   )
 }

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>
-  )
-}

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

@@ -1,101 +0,0 @@
-import {
-  getTrancheVaultContractV2,
-  PoolInfoV2,
-  UnderlyingTokenInfo,
-} from '@huma-finance/shared'
-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 { InputAmountModal } from '../../InputAmountModal'
-import { LoadingModal } from '../../LoadingModal'
-
-type Props = {
-  poolInfo: PoolInfoV2
-  poolUnderlyingToken: UnderlyingTokenInfo
-  redemptionType: REDEMPTION_TYPE
-  maxAmount: BigNumber
-}
-
-export function ChooseAmount({
-  poolInfo,
-  poolUnderlyingToken,
-  redemptionType,
-  maxAmount,
-}: 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 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 handleChangeAmount = (newAmount: 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 (
-    <InputAmountModal
-      title={`${redemptionActionInfo.action} Redemption Request`}
-      subTitle={
-        redemptionActionInfo.action === 'Create'
-          ? `Input ${symbol} amount to redeem from ${redemptionActionInfo.tranche} tranche`
-          : `Input the amount of the redemption request in ${symbol} that you wish to cancel from the ${redemptionActionInfo.tranche} tranche`
-      }
-      tokenSymbol={symbol}
-      currentAmount={currentAmount}
-      handleChangeAmount={handleChangeAmount}
-      maxAmount={maxAmountFormatted}
-      info={`${currentShares.toFixed(1)} Shares`}
-      handleAction={handleAction}
-      actionText='SUBMIT'
-    />
-  )
-}