@huma-finance/widgets 0.0.62-beta.719 → 0.0.62-beta.721

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huma-finance/widgets",
-  "version": "0.0.62-beta.719+d4756b7",
+  "version": "0.0.62-beta.721+2f8c02b",
   "publishConfig": {
     "access": "public"
   },
@@ -29,13 +29,9 @@
     "@ethersproject/experimental": "^5.7.0",
     "@ethersproject/providers": "^5.6.0",
     "@ethersproject/units": "^5.6.0",
-    "@huma-finance/sdk": "^0.0.61",
-    "@huma-finance/shared": "^0.0.61",
-    "@huma-finance/web-shared": "^0.0.62-beta.719+d4756b7",
-    "@mui/icons-material": "^5.3.0",
-    "@mui/material": "^5.0.6",
-    "@mui/styles": "^5.0.2",
-    "@mui/system": "^5.0.6",
+    "@huma-finance/sdk": "^0.0.62-beta.721+2f8c02b",
+    "@huma-finance/shared": "^0.0.62-beta.721+2f8c02b",
+    "@huma-finance/web-shared": "^0.0.62-beta.721+2f8c02b",
     "@mui/x-date-pickers": "^5.0.7",
     "@notifi-network/notifi-frontend-client": "^1.1.2",
     "@notifi-network/notifi-react": "^1.1.2",
@@ -185,6 +181,7 @@
     "@coral-xyz/anchor": "^0.30.1",
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
+    "@huma-finance/soroban-tranche-vault": "0.0.15",
     "@mui/icons-material": "^5.3.0",
     "@mui/material": "^5.0.6",
     "@mui/styles": "^5.0.2",
@@ -194,6 +191,7 @@
     "@solana/wallet-adapter-base": "^0.9.23",
     "@solana/wallet-adapter-react": "^0.15.35",
     "@solana/web3.js": "^1.95.3",
+    "@soroban-react/core": "^9.3.0",
     "ethers": "^5.6.1",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
@@ -203,5 +201,5 @@
   "optionalDependencies": {
     "encoding": "^0.1.13"
   },
-  "gitHead": "d4756b72702a52dc37fde2cc07b421755f63eb84"
+  "gitHead": "2f8c02b7b55e44fd3175096a22a04121e3510ae4"
 }

package/src/components/Lend/solanaEnableAutoRedemption/1-ApproveAllowance.tsx

@@ -1,6 +1,5 @@
 import { timeUtil } from '@huma-finance/shared'
-import { SolanaPoolState } from '@huma-finance/web-shared'
-import dayjs from 'dayjs'
+import { getLenderLockupDates, SolanaPoolState } from '@huma-finance/web-shared'
 import React, { useCallback } from 'react'
 import { Box, css, useTheme } from '@mui/material'
 import { useAppDispatch } from '../../../hooks/useRedux'
@@ -38,10 +37,9 @@ export function ApproveAllowance({ poolState }: Props): React.ReactElement {
     `,
   }
 
-  const lockupEndTime = dayjs()
-    .add(poolState.withdrawalLockupPeriodDays ?? 0, 'day')
-    .date(1)
-  const withdrawTime = lockupEndTime.add(1, 'month')
+  const { lockupEndTimeUnix, withdrawTimeUnix } = getLenderLockupDates(
+    poolState.withdrawalLockupPeriodDays ?? 0,
+  )
 
   return (
     <WrapperModal title='Auto-Redemption'>
@@ -51,9 +49,9 @@ export function ApproveAllowance({ poolState }: Props): React.ReactElement {
       <Box css={styles.description}>
         This allowance transaction will enable auto-redemption for your existing
         tranche shares. Redemption requests will be automatically submitted on{' '}
-        {timeUtil.timestampToLL(lockupEndTime.unix())}. Your deposit can be
+        {timeUtil.timestampToLL(lockupEndTimeUnix)}. Your deposit can be
         redeemed and yield rewards will stop on{' '}
-        {timeUtil.timestampToLL(withdrawTime.unix())}.
+        {timeUtil.timestampToLL(withdrawTimeUnix)}.
       </Box>
       <BottomButton variant='contained' onClick={handleNext}>
         APPROVE ALLOWANCE

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

@@ -113,7 +113,7 @@ export function ChooseAmount({
     <InputAmountModal
       title='Enter Amount'
       subTitle={`Depositing to ${
-        isUniTranche ? 'uni tranche' : selectedTranche
+        isUniTranche ? 'uni' : selectedTranche
       } tranche`}
       tokenSymbol={symbol}
       currentAmount={currentAmount}

package/src/components/Lend/solanaSupply/4-Transfer.tsx

@@ -22,7 +22,6 @@ import {
 } from '@solana/spl-token'
 import { useWallet } from '@solana/wallet-adapter-react'
 import { PublicKey, Transaction } from '@solana/web3.js'
-import { BN } from '@coral-xyz/anchor'
 import { useAppDispatch, useAppSelector } from '../../../hooks/useRedux'
 import { setPointsAccumulated, setStep } from '../../../store/widgets.reducers'
 import { selectWidgetState } from '../../../store/widgets.selectors'
@@ -167,23 +166,23 @@ export function Transfer({
       // Approve automatic redemptions
       const sharesAmount = convertToShares(
         selectedTranche === 'senior'
-          ? new BN(poolState.seniorTrancheAssets ?? 0)
-          : new BN(poolState.juniorTrancheAssets ?? 0),
+          ? BigInt(poolState.seniorTrancheAssets ?? 0)
+          : BigInt(poolState.juniorTrancheAssets ?? 0),
         selectedTranche === 'senior'
-          ? seniorTrancheMintSupply ?? new BN(0)
-          : juniorTrancheMintSupply ?? new BN(0),
-        supplyBigNumber,
+          ? BigInt(seniorTrancheMintSupply?.toString() ?? 0)
+          : BigInt(juniorTrancheMintSupply?.toString() ?? 0),
+        BigInt(supplyBigNumber.toString()),
       )
       const existingShares = convertToShares(
         selectedTranche === 'senior'
-          ? new BN(poolState.seniorTrancheAssets ?? 0)
-          : new BN(poolState.juniorTrancheAssets ?? 0),
+          ? BigInt(poolState.seniorTrancheAssets ?? 0)
+          : BigInt(poolState.juniorTrancheAssets ?? 0),
         selectedTranche === 'senior'
-          ? seniorTrancheMintSupply ?? new BN(0)
-          : juniorTrancheMintSupply ?? new BN(0),
+          ? BigInt(seniorTrancheMintSupply?.toString() ?? 0)
+          : BigInt(juniorTrancheMintSupply?.toString() ?? 0),
         selectedTranche === 'senior'
-          ? new BN(seniorTokenAccount?.amount.toString() ?? '0')
-          : new BN(juniorTokenAccount?.amount.toString() ?? '0'),
+          ? BigInt(seniorTokenAccount?.amount.toString() ?? '0')
+          : BigInt(juniorTokenAccount?.amount.toString() ?? '0'),
       )
       tx.add(
         createApproveCheckedInstruction(
@@ -195,7 +194,7 @@ export function Transfer({
           ),
           new PublicKey(poolInfo.poolAuthority), // delegate
           publicKey, // owner of the wallet
-          BigInt(sharesAmount.muln(1.1).add(existingShares).toString()), // amount
+          (sharesAmount * BigInt(11)) / BigInt(10) + existingShares, // amount
           poolInfo.trancheDecimals,
           undefined, // multiSigners
           TOKEN_2022_PROGRAM_ID,

package/src/components/Lend/stellarSupply/1-Evaluation.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+type Props = {}
+
+// eslint-disable-next-line no-empty-pattern
+export function Evaluation({}: Props): React.ReactElement | null {
+  // TODO
+  return null
+}

package/src/components/Lend/stellarSupply/2-ChooseTranche.tsx

@@ -0,0 +1,116 @@
+import { TrancheType, UnderlyingTokenInfo } from '@huma-finance/shared'
+import {
+  css,
+  FormControl,
+  FormControlLabel,
+  FormLabel,
+  Radio,
+  RadioGroup,
+  useTheme,
+} from '@mui/material'
+import React from 'react'
+
+import { useAppDispatch } from '../../../hooks/useRedux'
+import { setStep } from '../../../store/widgets.reducers'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { BottomButton } from '../../BottomButton'
+import { WrapperModal } from '../../WrapperModal'
+
+type Props = {
+  poolUnderlyingToken: UnderlyingTokenInfo
+  selectedTranche: TrancheType | undefined
+  changeTranche: (tranche: TrancheType) => void
+}
+
+export function ChooseTranche({
+  poolUnderlyingToken,
+  selectedTranche,
+  changeTranche,
+}: Props): React.ReactElement | null {
+  const theme = useTheme()
+  const dispatch = useAppDispatch()
+
+  const styles = {
+    subTitle: css`
+      color: ${theme.palette.text.primary} !important;
+      font-weight: 400;
+      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-weight: 400;
+        font-size: 16px;
+        line-height: 150%;
+        letter-spacing: 0.15px;
+      }
+    `,
+  }
+
+  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>
+        <FormLabel css={styles.subTitle}>Select Tranche Type</FormLabel>
+        <RadioGroup
+          aria-labelledby='buttons-group-label'
+          name='radio-buttons-group'
+          css={styles.radioGroup}
+          onChange={(e) => changeTranche(e.target.value as TrancheType)}
+        >
+          {items.map((item) => (
+            <FormControlLabel
+              key={item.label}
+              value={item.value}
+              control={
+                <Radio
+                  sx={{
+                    '& .MuiSvgIcon-root': {
+                      fontSize: 24,
+                    },
+                  }}
+                />
+              }
+              label={item.label}
+              css={styles.formControl}
+            />
+          ))}
+        </RadioGroup>
+      </FormControl>
+      <BottomButton
+        variant='contained'
+        disabled={!selectedTranche}
+        onClick={handleNext}
+      >
+        NEXT
+      </BottomButton>
+    </WrapperModal>
+  )
+}

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

@@ -0,0 +1,129 @@
+import {
+  formatNumber,
+  StellarPoolInfo,
+  tokenDecimalUtils,
+  TrancheType,
+} from '@huma-finance/shared'
+import { StellarPoolState } from '@huma-finance/web-shared'
+import React, { useMemo, useState } from 'react'
+import { useAppDispatch } from '../../../hooks/useRedux'
+import { setStep, setSupplyAmount } from '../../../store/widgets.reducers'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { InputAmountModal } from '../../InputAmountModal'
+
+type Props = {
+  poolInfo: StellarPoolInfo
+  poolState: StellarPoolState
+  tokenBalance: number | null
+  selectedTranche: TrancheType | undefined
+  isUniTranche?: boolean
+}
+
+export function ChooseAmount({
+  poolInfo,
+  poolState,
+  tokenBalance,
+  selectedTranche,
+  isUniTranche,
+}: Props): React.ReactElement | null {
+  const dispatch = useAppDispatch()
+  const { symbol, decimals } = poolInfo.underlyingToken
+  const [currentAmount, setCurrentAmount] = useState<number | string>(0)
+  const balance = tokenBalance ? BigInt(tokenBalance) : BigInt(0)
+
+  const { juniorAvailableCapBN, seniorAvailableCapBN } = useMemo(() => {
+    const {
+      maxSeniorJuniorRatio,
+      liquidityCap,
+      seniorTrancheAssets,
+      juniorTrancheAssets,
+    } = poolState
+    const juniorTrancheAssetsBN = BigInt(juniorTrancheAssets ?? 0)
+    const seniorTrancheAssetsBN = BigInt(seniorTrancheAssets ?? 0)
+    const totalDeployedBN = seniorTrancheAssetsBN + juniorTrancheAssetsBN
+    const totalAvailableCapBN = BigInt(liquidityCap ?? 0) - totalDeployedBN
+    const maxSeniorAssetsBN =
+      juniorTrancheAssetsBN * BigInt(maxSeniorJuniorRatio ?? 0)
+    let seniorAvailableCapBN = maxSeniorAssetsBN - seniorTrancheAssetsBN
+    seniorAvailableCapBN =
+      seniorAvailableCapBN > totalAvailableCapBN
+        ? totalAvailableCapBN
+        : seniorAvailableCapBN
+
+    return {
+      juniorAvailableCapBN: totalAvailableCapBN - seniorAvailableCapBN,
+      seniorAvailableCapBN,
+    }
+  }, [poolState])
+
+  const handleChangeAmount = (newAmount: number) => {
+    setCurrentAmount(newAmount)
+    dispatch(setSupplyAmount(Number(newAmount)))
+  }
+
+  const handleAction = () => {
+    dispatch(setStep(WIDGET_STEP.Transfer))
+  }
+
+  const getTrancheCap = () => {
+    if (selectedTranche === 'junior') {
+      return juniorAvailableCapBN
+    }
+    return seniorAvailableCapBN
+  }
+
+  const getMinAmount = (): number => {
+    const minAmount = poolState.minDepositAmount
+      ? tokenDecimalUtils.formatUnits(
+          BigInt(poolState.minDepositAmount),
+          decimals,
+        )
+      : 0
+    return Math.max(0, Math.ceil(Number(minAmount)))
+  }
+
+  const getMaxAmount = (): bigint => {
+    const trancheCap = getTrancheCap()
+    return balance > trancheCap ? trancheCap : balance
+  }
+
+  const getInfos = () => {
+    const trancheCap = getTrancheCap()
+    const currentAmountBN = tokenDecimalUtils.parseUnits(
+      String(currentAmount),
+      decimals,
+    )
+    const remainingCap = trancheCap - currentAmountBN
+
+    if (remainingCap <= BigInt(0)) {
+      return ['0 remaining capacity']
+    }
+    return [
+      `${formatNumber(
+        tokenDecimalUtils.formatUnits(remainingCap, decimals),
+      )} remaining capacity`,
+    ]
+  }
+
+  return (
+    <InputAmountModal
+      title='Enter Amount'
+      subTitle={`Depositing to ${
+        isUniTranche ? 'uni' : selectedTranche
+      } tranche`}
+      tokenSymbol={symbol}
+      currentAmount={currentAmount}
+      handleChangeAmount={handleChangeAmount}
+      minimumAmount={getMinAmount()}
+      maxAmount={Number(
+        tokenDecimalUtils.formatUnits(getMaxAmount(), decimals),
+      )}
+      maxAmountTitle={`${formatNumber(
+        tokenDecimalUtils.formatUnits(balance, decimals),
+      )} balance`}
+      infos={getInfos()}
+      handleAction={handleAction}
+      actionText='SUPPLY'
+    />
+  )
+}

package/src/components/Lend/stellarSupply/4-Transfer.tsx

@@ -0,0 +1,69 @@
+import {
+  STELLAR_CHAINS_INFO,
+  StellarPoolInfo,
+  tokenDecimalUtils,
+  TrancheType,
+} from '@huma-finance/shared'
+import AssembledTransaction from '@stellar/stellar-sdk'
+import { Client as TrancheVaultClient } from '@huma-finance/soroban-tranche-vault'
+import React, { useCallback, useContext, useEffect, useState } from 'react'
+
+import {
+  getClientCommonParams,
+  StellarConnectionContext,
+} from '@huma-finance/web-shared'
+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 { StellarTxSendModal } from '../../StellarTxSendModal'
+
+type Props = {
+  poolInfo: StellarPoolInfo
+  selectedTranche: TrancheType
+}
+
+export function Transfer({
+  poolInfo,
+  selectedTranche,
+}: Props): React.ReactElement | null {
+  const dispatch = useAppDispatch()
+  const [tx, setTx] = useState<typeof AssembledTransaction | null>(null)
+  const { address: stellarAddress } = useContext(StellarConnectionContext)
+  const { supplyAmount } = useAppSelector(selectWidgetState)
+  const { decimals } = poolInfo.underlyingToken
+  const supplyBigNumber = tokenDecimalUtils.parseUnits(
+    String(supplyAmount),
+    decimals,
+  )
+
+  const handleSuccess = useCallback(async () => {
+    dispatch(setStep(WIDGET_STEP.Done))
+  }, [dispatch])
+
+  useEffect(() => {
+    async function getTx() {
+      if (!stellarAddress) {
+        return
+      }
+
+      const chainMetadata = STELLAR_CHAINS_INFO[poolInfo.chainId]
+      const trancheVaultClient = new TrancheVaultClient({
+        publicKey: stellarAddress,
+        contractId:
+          selectedTranche === 'senior'
+            ? poolInfo.seniorTranche!
+            : poolInfo.juniorTranche,
+        ...getClientCommonParams(chainMetadata),
+      })
+      const tx = await trancheVaultClient.deposit({
+        lender: stellarAddress,
+        assets: supplyBigNumber,
+      })
+      setTx(tx)
+    }
+    getTx()
+  }, [poolInfo, selectedTranche, stellarAddress, supplyBigNumber])
+
+  return <StellarTxSendModal tx={tx} handleSuccess={handleSuccess} />
+}

package/src/components/Lend/stellarSupply/5-Success.tsx

@@ -0,0 +1,61 @@
+import {
+  CloseModalOptions,
+  formatMoney,
+  StellarPoolInfo,
+  timeUtil,
+} from '@huma-finance/shared'
+import React, { useCallback } from 'react'
+import {
+  getLenderLockupDates,
+  StellarPoolState,
+} from '@huma-finance/web-shared'
+import { useAppSelector } from '../../../hooks/useRedux'
+import { selectWidgetState } from '../../../store/widgets.selectors'
+import { StellarTxDoneModal } from '../../StellarTxDoneModal'
+
+type Props = {
+  poolInfo: StellarPoolInfo
+  poolState: StellarPoolState
+  handleAction: (options?: CloseModalOptions) => void
+}
+
+export function Success({
+  poolInfo,
+  poolState,
+  handleAction,
+}: Props): React.ReactElement {
+  const { supplyAmount, txHash } = useAppSelector(selectWidgetState)
+  const { symbol } = poolInfo.underlyingToken
+
+  const content = [
+    `You successfully supplied ${formatMoney(supplyAmount)} ${symbol}.`,
+  ]
+
+  const getSubContent = () => {
+    const { lockupEndTimeUnix, withdrawTimeUnix } = getLenderLockupDates(
+      poolState.withdrawalLockupPeriodDays ?? 0,
+    )
+    return [
+      `You can begin submitting redemption requests on ${timeUtil.timestampToLL(
+        lockupEndTimeUnix,
+      )}, which can be redeemed starting ${timeUtil.timestampToLL(
+        withdrawTimeUnix,
+      )}.`,
+    ]
+  }
+
+  const handleUserAction = useCallback(() => {
+    handleAction({ isSuccess: true })
+  }, [handleAction])
+
+  return (
+    <StellarTxDoneModal
+      chainId={poolInfo.chainId}
+      handleAction={handleUserAction}
+      content={content}
+      subContent={getSubContent()}
+      txHash={txHash}
+      buttonText='DONE'
+    />
+  )
+}

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

@@ -0,0 +1,159 @@
+import {
+  CloseModalOptions,
+  STELLAR_CHAINS_INFO,
+  StellarPoolInfo,
+  TrancheType,
+} from '@huma-finance/shared'
+import {
+  StellarConnectionContext,
+  StellarPoolState,
+  useStellarLender,
+  useStellarTokenBalance,
+} from '@huma-finance/web-shared'
+import React, { useContext, useEffect, useState } 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 { ChooseTranche } from './2-ChooseTranche'
+import { ChooseAmount } from './3-ChooseAmount'
+import { Transfer } from './4-Transfer'
+import { Success } from './5-Success'
+
+export interface Campaign {
+  id: string
+  campaignGroupId: string
+}
+
+/**
+ * Lend pool supply props
+ * @typedef {Object} StellarLendSupplyProps
+ * @property {StellarPoolInfo} poolInfo The metadata of the pool.
+ * @property {StellarPoolState} poolState The current state config of the pool.
+ * @property {function((CloseModalOptions|undefined)):void} handleClose Function to notify to close the widget modal when user clicks the 'x' close button.
+ * @property {function():void|undefined} handleSuccess Optional function to notify that the lending pool supply action is successful.
+ */
+export interface StellarLendSupplyProps {
+  poolInfo: StellarPoolInfo
+  poolState: StellarPoolState
+  handleClose: (options?: CloseModalOptions) => void
+  handleSuccess?: () => void
+}
+
+export function StellarLendSupply({
+  poolInfo,
+  poolState,
+  handleClose,
+  handleSuccess,
+}: StellarLendSupplyProps): React.ReactElement | null {
+  const dispatch = useDispatch()
+  const { isUniTranche } = poolState
+  const { address: stellarAddress } = useContext(StellarConnectionContext)
+  const {
+    isLoadingStellarLender,
+    isJuniorApprovedLender,
+    isSeniorApprovedLender,
+  } = useStellarLender(stellarAddress, poolInfo)
+  const chainMetadata = STELLAR_CHAINS_INFO[poolInfo.chainId]
+  const { tokenBalance, isLoadingTokenBalance } = useStellarTokenBalance(
+    chainMetadata,
+    poolInfo.underlyingToken.address,
+    stellarAddress,
+  )
+  const { step, errorMessage } = useAppSelector(selectWidgetState)
+  const [selectedTranche, setSelectedTranche] = useState<TrancheType>()
+
+  useEffect(() => {
+    if (!step && !isLoadingStellarLender && !isLoadingTokenBalance) {
+      // if (!isJuniorApprovedLender && !isSeniorApprovedLender) {
+      //   dispatch(setStep(WIDGET_STEP.Evaluation))
+      //   return
+      // }
+
+      if (isJuniorApprovedLender && !isSeniorApprovedLender) {
+        setSelectedTranche('junior')
+        dispatch(setStep(WIDGET_STEP.ChooseAmount))
+        return
+      }
+
+      if (isSeniorApprovedLender && !isJuniorApprovedLender) {
+        setSelectedTranche('senior')
+        dispatch(setStep(WIDGET_STEP.ChooseAmount))
+        return
+      }
+
+      if (isJuniorApprovedLender && isSeniorApprovedLender) {
+        dispatch(setStep(WIDGET_STEP.ChooseTranche))
+      }
+    }
+  }, [
+    dispatch,
+    handleClose,
+    poolInfo,
+    step,
+    isLoadingStellarLender,
+    isJuniorApprovedLender,
+    isSeniorApprovedLender,
+    isLoadingTokenBalance,
+  ])
+
+  if (isLoadingStellarLender || isLoadingTokenBalance) {
+    return (
+      <WidgetWrapper
+        isOpen
+        isLoading
+        loadingTitle='Supply'
+        handleClose={handleClose}
+        handleSuccess={handleSuccess}
+      />
+    )
+  }
+
+  return (
+    <WidgetWrapper
+      isOpen
+      loadingTitle={`Supply ${poolInfo.underlyingToken.symbol}`}
+      handleClose={handleClose}
+      handleSuccess={handleSuccess}
+    >
+      {step === WIDGET_STEP.ChooseTranche && (
+        <ChooseTranche
+          poolUnderlyingToken={poolInfo.underlyingToken}
+          selectedTranche={selectedTranche}
+          changeTranche={setSelectedTranche}
+        />
+      )}
+      {step === WIDGET_STEP.ChooseAmount && (
+        <ChooseAmount
+          poolInfo={poolInfo}
+          poolState={poolState}
+          tokenBalance={tokenBalance}
+          selectedTranche={selectedTranche}
+          isUniTranche={isUniTranche}
+        />
+      )}
+      {step === WIDGET_STEP.Transfer && selectedTranche && (
+        <Transfer poolInfo={poolInfo} selectedTranche={selectedTranche} />
+      )}
+      {step === WIDGET_STEP.Done && (
+        <Success
+          poolInfo={poolInfo}
+          poolState={poolState}
+          handleAction={handleClose}
+        />
+      )}
+      {step === WIDGET_STEP.Error && (
+        <ErrorModal
+          title='Supply'
+          errorReason='Sorry there was an error'
+          errorMessage={errorMessage}
+          handleOk={handleClose}
+        />
+      )}
+    </WidgetWrapper>
+  )
+}