@huma-finance/widgets 0.0.80-beta.1079 → 0.0.80-beta.1083

package/dist/src/components/Lend/stellarAddRedemption/1-ChooseAmount.d.ts

@@ -0,0 +1,10 @@
+import { StellarPoolInfo, TrancheType } from '../../../../../huma-shared/src';
+import { StellarPoolState } from '../../../../../huma-web-shared/src';
+import { default as React } from 'react';
+type Props = {
+    poolInfo: StellarPoolInfo;
+    poolState: StellarPoolState;
+    selectedTranche: TrancheType;
+};
+export declare function ChooseAmount({ poolInfo, poolState, selectedTranche, }: Props): React.ReactElement | null;
+export {};

package/dist/src/components/Lend/stellarAddRedemption/2-Transfer.d.ts

@@ -0,0 +1,8 @@
+import { StellarPoolInfo, TrancheType } from '../../../../../huma-shared/src';
+import { default as React } from 'react';
+type Props = {
+    poolInfo: StellarPoolInfo;
+    selectedTranche: TrancheType;
+};
+export declare function Transfer({ poolInfo, selectedTranche, }: Props): React.ReactElement | null;
+export {};

package/dist/src/components/Lend/stellarAddRedemption/3-Done.d.ts

@@ -0,0 +1,10 @@
+import { StellarPoolInfo } from '../../../../../huma-shared/src';
+import { default as React } from 'react';
+type Props = {
+    poolInfo: StellarPoolInfo;
+    handleAction: (options?: {
+        isSuccess?: boolean;
+    }) => void;
+};
+export declare function Done({ poolInfo, handleAction }: Props): React.ReactElement;
+export {};

package/dist/src/components/Lend/stellarAddRedemption/index.d.ts

@@ -0,0 +1,19 @@
+import { CloseModalOptions, StellarPoolInfo, TrancheType } from '../../../../../huma-shared/src';
+import { StellarPoolState } from '../../../../../huma-web-shared/src';
+import { default as React } from 'react';
+/**
+ * Stellar add redemption props – request to withdraw (redeem) shares from a tranche.
+ * @property {StellarPoolInfo} poolInfo The metadata of the pool.
+ * @property {StellarPoolState} poolState The current state config of the pool.
+ * @property {TrancheType} tranche The tranche to redeem from (junior or senior).
+ * @property {function((CloseModalOptions|undefined)):void} handleClose Function to close the widget modal.
+ * @property {function():void|undefined} handleSuccess Optional callback when redemption request succeeds.
+ */
+export interface StellarLendAddRedemptionProps {
+    poolInfo: StellarPoolInfo;
+    poolState: StellarPoolState;
+    tranche: TrancheType;
+    handleClose: (options?: CloseModalOptions) => void;
+    handleSuccess?: () => void;
+}
+export declare function StellarLendAddRedemption({ poolInfo, poolState, tranche, handleClose, handleSuccess, }: StellarLendAddRedemptionProps): React.ReactElement | null;

package/dist/src/components/Lend/stellarWithdraw/1-Confirm.d.ts

@@ -0,0 +1,9 @@
+import { StellarPoolInfo } from '../../../../../huma-shared/src';
+import { default as React } from 'react';
+type Props = {
+    poolInfo: StellarPoolInfo;
+    withdrawableAmountFormatted: string;
+    onConfirm: () => void;
+};
+export declare function Confirm({ poolInfo, withdrawableAmountFormatted, onConfirm, }: Props): React.ReactElement;
+export {};

package/dist/src/components/Lend/stellarWithdraw/2-Transfer.d.ts

@@ -0,0 +1,9 @@
+import { StellarPoolInfo, TrancheType } from '../../../../../huma-shared/src';
+import { default as React } from 'react';
+type Props = {
+    poolInfo: StellarPoolInfo;
+    tranche: TrancheType;
+    poolIsClosed: boolean;
+};
+export declare function Transfer({ poolInfo, tranche, poolIsClosed, }: Props): React.ReactElement | null;
+export {};

package/dist/src/components/Lend/stellarWithdraw/3-Done.d.ts

@@ -0,0 +1,11 @@
+import { StellarPoolInfo } from '../../../../../huma-shared/src';
+import { default as React } from 'react';
+type Props = {
+    poolInfo: StellarPoolInfo;
+    withdrawAmount?: number;
+    handleAction: (options?: {
+        isSuccess?: boolean;
+    }) => void;
+};
+export declare function Done({ poolInfo, withdrawAmount, handleAction, }: Props): React.ReactElement;
+export {};

package/dist/src/components/Lend/stellarWithdraw/index.d.ts

@@ -0,0 +1,19 @@
+import { CloseModalOptions, StellarPoolInfo, TrancheType } from '../../../../../huma-shared/src';
+import { StellarPoolState } from '../../../../../huma-web-shared/src';
+import { default as React } from 'react';
+/**
+ * Stellar lend pool withdraw props – disburse (pool open) or withdraw after pool closure.
+ * @property {StellarPoolInfo} poolInfo The metadata of the pool.
+ * @property {StellarPoolState} poolState The current state config of the pool.
+ * @property {TrancheType} tranche The tranche to withdraw from (junior or senior).
+ * @property {function((CloseModalOptions|undefined)):void} handleClose Function to close the widget modal.
+ * @property {function():void|undefined} handleSuccess Optional callback when withdraw succeeds.
+ */
+export interface StellarLendWithdrawProps {
+    poolInfo: StellarPoolInfo;
+    poolState: StellarPoolState;
+    tranche: TrancheType;
+    handleClose: (options?: CloseModalOptions) => void;
+    handleSuccess?: () => void;
+}
+export declare function StellarLendWithdraw({ poolInfo, poolState, tranche, handleClose, handleSuccess, }: StellarLendWithdrawProps): React.ReactElement | null;

package/dist/src/index.d.ts

@@ -17,7 +17,9 @@ import { SolanaLendCancelRedemptionProps } from './components/Lend/solanaCancelR
 import { SolanaEnableAutoRedemptionProps } from './components/Lend/solanaEnableAutoRedemption';
 import { SolanaLendSupplyProps } from './components/Lend/solanaSupply';
 import { SolanaLendWithdrawProps } from './components/Lend/solanaWithdraw';
+import { StellarLendAddRedemptionProps } from './components/Lend/stellarAddRedemption';
 import { StellarLendSupplyProps } from './components/Lend/stellarSupply';
+import { StellarLendWithdrawProps } from './components/Lend/stellarWithdraw';
 import { LendSupplyProps } from './components/Lend/supply';
 import { LendSupplyPropsV2 } from './components/Lend/supplyV2';
 import { LendWithdrawProps } from './components/Lend/withdraw';
@@ -372,6 +374,28 @@ type StellarLendSupplyWidgetProps = StellarLendSupplyProps & GenericWidgetProps;
  * @param {StellarLendSupplyWidgetProps} props - Widget props
  */
 export declare function StellarLendSupplyWidget(props: StellarLendSupplyWidgetProps): import("@emotion/react/jsx-runtime").JSX.Element;
+/**
+ * Lend pool add redemption widget props for Stellar pools
+ * @typedef {Object} StellarLendAddRedemptionWidgetProps
+ */
+type StellarLendAddRedemptionWidgetProps = StellarLendAddRedemptionProps & GenericWidgetProps;
+/**
+ * Lend pool add redemption widget for Stellar pools
+ *
+ * @param {StellarLendAddRedemptionWidgetProps} props - Widget props
+ */
+export declare function StellarLendAddRedemptionWidget(props: StellarLendAddRedemptionWidgetProps): import("@emotion/react/jsx-runtime").JSX.Element;
+/**
+ * Lend pool withdraw widget props for Stellar pools
+ * @typedef {Object} StellarLendWithdrawWidgetProps
+ */
+type StellarLendWithdrawWidgetProps = StellarLendWithdrawProps & GenericWidgetProps;
+/**
+ * Lend pool withdraw widget for Stellar pools (disburse when pool open, withdraw_after_pool_closure when closed)
+ *
+ * @param {StellarLendWithdrawWidgetProps} props - Widget props
+ */
+export declare function StellarLendWithdrawWidget(props: StellarLendWithdrawWidgetProps): import("@emotion/react/jsx-runtime").JSX.Element;
 /**
  * Borrow widget props for Stellar pools
  * @typedef {Object} StellarLendSupplyWidgetProps

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huma-finance/widgets",
-  "version": "0.0.80-beta.1079+8d198fb",
+  "version": "0.0.80-beta.1083+3658a09",
   "publishConfig": {
     "access": "public"
   },
@@ -22,9 +22,9 @@
     "@ethersproject/contracts": "^5.7.0",
     "@ethersproject/experimental": "^5.7.0",
     "@ethersproject/units": "^5.6.0",
-    "@huma-finance/sdk": "^0.0.80-beta.1079+8d198fb",
-    "@huma-finance/shared": "^0.0.80-beta.1079+8d198fb",
-    "@huma-finance/web-shared": "^0.0.80-beta.1079+8d198fb",
+    "@huma-finance/sdk": "^0.0.80-beta.1083+3658a09",
+    "@huma-finance/shared": "^0.0.80-beta.1083+3658a09",
+    "@huma-finance/web-shared": "^0.0.80-beta.1083+3658a09",
     "@mui/x-date-pickers": "^5.0.7",
     "@notifi-network/notifi-frontend-client": "^1.1.2",
     "@notifi-network/notifi-react": "^1.1.2",
@@ -190,5 +190,5 @@
   "optionalDependencies": {
     "encoding": "^0.1.13"
   },
-  "gitHead": "8d198fb139436a4c983f7d5b845ab446445072cd"
+  "gitHead": "3658a098a3c2b0d732685d4f0aacb3fbac42028d"
 }

package/src/components/Lend/stellarAddRedemption/1-ChooseAmount.tsx

@@ -0,0 +1,137 @@
+import {
+  formatNumber,
+  StellarPoolInfo,
+  tokenDecimalUtils,
+  TrancheType,
+} from '@huma-finance/shared'
+import {
+  fetchStellarDepositRecord,
+  getStellarSharesFromUnderlyingTokenAmount,
+  StellarConnectionContext,
+  StellarPoolState,
+} from '@huma-finance/web-shared'
+import React, { useCallback, useContext, useEffect, useState } from 'react'
+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: StellarPoolInfo
+  poolState: StellarPoolState
+  selectedTranche: TrancheType
+}
+
+export function ChooseAmount({
+  poolInfo,
+  poolState,
+  selectedTranche,
+}: Props): React.ReactElement | null {
+  const dispatch = useAppDispatch()
+  const { address: stellarAddress } = useContext(StellarConnectionContext)
+  const [currentAmount, setCurrentAmount] = useState<number | string>(0)
+  const [principal, setPrincipal] = useState<bigint | null>(null)
+  const [isLoadingDepositRecord, setIsLoadingDepositRecord] = useState(true)
+
+  const { symbol, decimals: underlyingDecimals } = poolInfo.underlyingToken
+  const { trancheDecimals } = poolInfo
+
+  const totalAssets = BigInt(
+    selectedTranche === 'senior'
+      ? poolState.seniorTrancheAssets ?? 0
+      : poolState.juniorTrancheAssets ?? 0,
+  )
+  const totalSupply = BigInt(
+    selectedTranche === 'senior'
+      ? poolState.seniorTrancheTokenSupply ?? 0
+      : poolState.juniorTrancheTokenSupply ?? 0,
+  )
+
+  useEffect(() => {
+    let cancelled = false
+    async function load() {
+      if (!stellarAddress) {
+        setIsLoadingDepositRecord(false)
+        return
+      }
+      setIsLoadingDepositRecord(true)
+      try {
+        const record = await fetchStellarDepositRecord(
+          poolInfo,
+          selectedTranche,
+          stellarAddress,
+        )
+        if (!cancelled) {
+          setPrincipal(record?.principal ?? 0n)
+        }
+      } finally {
+        if (!cancelled) {
+          setIsLoadingDepositRecord(false)
+        }
+      }
+    }
+    load()
+    return () => {
+      cancelled = true
+    }
+  }, [poolInfo, selectedTranche, stellarAddress])
+
+  const maxUnderlyingFormatted = useCallback(() => {
+    if (principal == null) return 0
+    return Number(tokenDecimalUtils.formatUnits(principal, underlyingDecimals))
+  }, [principal, underlyingDecimals])
+
+  const handleChangeAmount = useCallback(
+    (amount: number) => {
+      setCurrentAmount(amount)
+      dispatch(setRedeemAmount(amount))
+      if (amount <= 0 || totalAssets <= 0n) {
+        dispatch(setRedeemShares(0))
+        return
+      }
+      const underlyingRaw = tokenDecimalUtils.parseUnits(
+        String(amount),
+        underlyingDecimals,
+      )
+      const sharesRaw = getStellarSharesFromUnderlyingTokenAmount(
+        underlyingRaw,
+        totalAssets,
+        totalSupply,
+      )
+      const sharesFormatted = Number(
+        tokenDecimalUtils.formatUnits(sharesRaw, trancheDecimals),
+      )
+      dispatch(setRedeemShares(sharesFormatted))
+    },
+    [dispatch, underlyingDecimals, trancheDecimals, totalAssets, totalSupply],
+  )
+
+  const handleAction = useCallback(() => {
+    dispatch(setStep(WIDGET_STEP.Transfer))
+  }, [dispatch])
+
+  if (isLoadingDepositRecord) {
+    return <LoadingModal title='Redemption' />
+  }
+
+  const maxUnderlying = maxUnderlyingFormatted()
+
+  return (
+    <InputAmountModal
+      title='Redemption'
+      subTitle={`Enter amount of ${symbol} to withdraw from the ${selectedTranche} tranche`}
+      tokenSymbol={symbol}
+      currentAmount={currentAmount}
+      handleChangeAmount={handleChangeAmount}
+      maxAmount={maxUnderlying}
+      maxAmountTitle={`${formatNumber(maxUnderlying)} ${symbol} requestable`}
+      handleAction={handleAction}
+      actionText='REQUEST'
+    />
+  )
+}

package/src/components/Lend/stellarAddRedemption/2-Transfer.tsx

@@ -0,0 +1,70 @@
+import {
+  STELLAR_CHAINS_INFO,
+  StellarPoolInfo,
+  tokenDecimalUtils,
+  TrancheType,
+} from '@huma-finance/shared'
+import { Client as TrancheVaultClient } from '@huma-finance/soroban-tranche-vault'
+import AssembledTransaction from '@stellar/stellar-sdk'
+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 { redeemShares } = useAppSelector(selectWidgetState)
+  const decimals = poolInfo.trancheDecimals
+  const sharesBN = tokenDecimalUtils.parseUnits(
+    String(redeemShares ?? 0),
+    decimals,
+  )
+
+  const handleSuccess = useCallback(async () => {
+    dispatch(setStep(WIDGET_STEP.Done))
+  }, [dispatch])
+
+  useEffect(() => {
+    async function getTx() {
+      if (!stellarAddress || sharesBN <= BigInt(0)) {
+        return
+      }
+
+      const chainMetadata = STELLAR_CHAINS_INFO[poolInfo.chainId]
+      const trancheVaultClient = new TrancheVaultClient({
+        publicKey: stellarAddress,
+        contractId:
+          selectedTranche === 'senior'
+            ? poolInfo.seniorTranche!
+            : poolInfo.juniorTranche,
+        ...getClientCommonParams(chainMetadata, stellarAddress),
+      })
+      const assembledTx = await trancheVaultClient.add_redemption_request({
+        caller: stellarAddress,
+        lender: stellarAddress,
+        shares: sharesBN,
+      })
+      setTx(assembledTx)
+    }
+    getTx()
+  }, [poolInfo, selectedTranche, stellarAddress, sharesBN])
+
+  return <StellarTxSendModal tx={tx} handleSuccess={handleSuccess} />
+}

package/src/components/Lend/stellarAddRedemption/3-Done.tsx

@@ -0,0 +1,33 @@
+import { formatNumber, StellarPoolInfo } from '@huma-finance/shared'
+import React, { useCallback } from 'react'
+import { useAppSelector } from '../../../hooks/useRedux'
+import { selectWidgetState } from '../../../store/widgets.selectors'
+import { StellarTxDoneModal } from '../../StellarTxDoneModal'
+
+type Props = {
+  poolInfo: StellarPoolInfo
+  handleAction: (options?: { isSuccess?: boolean }) => void
+}
+
+export function Done({ poolInfo, handleAction }: Props): React.ReactElement {
+  const { redeemAmount, txHash } = useAppSelector(selectWidgetState)
+  const { symbol } = poolInfo.underlyingToken
+
+  const content = [
+    `${formatNumber(redeemAmount ?? 0)} ${symbol} requested for withdrawal`,
+  ]
+
+  const handleUserAction = useCallback(() => {
+    handleAction({ isSuccess: true })
+  }, [handleAction])
+
+  return (
+    <StellarTxDoneModal
+      chainId={poolInfo.chainId}
+      handleAction={handleUserAction}
+      content={content}
+      txHash={txHash}
+      buttonText='DONE'
+    />
+  )
+}

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

@@ -0,0 +1,88 @@
+import {
+  CloseModalOptions,
+  StellarPoolInfo,
+  TrancheType,
+} from '@huma-finance/shared'
+import {
+  StellarConnectionContext,
+  StellarPoolState,
+} from '@huma-finance/web-shared'
+import React, { useContext, 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 { ChooseAmount } from './1-ChooseAmount'
+import { Transfer } from './2-Transfer'
+import { Done } from './3-Done'
+
+/**
+ * Stellar add redemption props – request to withdraw (redeem) shares from a tranche.
+ * @property {StellarPoolInfo} poolInfo The metadata of the pool.
+ * @property {StellarPoolState} poolState The current state config of the pool.
+ * @property {TrancheType} tranche The tranche to redeem from (junior or senior).
+ * @property {function((CloseModalOptions|undefined)):void} handleClose Function to close the widget modal.
+ * @property {function():void|undefined} handleSuccess Optional callback when redemption request succeeds.
+ */
+export interface StellarLendAddRedemptionProps {
+  poolInfo: StellarPoolInfo
+  poolState: StellarPoolState
+  tranche: TrancheType
+  handleClose: (options?: CloseModalOptions) => void
+  handleSuccess?: () => void
+}
+
+export function StellarLendAddRedemption({
+  poolInfo,
+  poolState,
+  tranche,
+  handleClose,
+  handleSuccess,
+}: StellarLendAddRedemptionProps): React.ReactElement | null {
+  const dispatch = useDispatch()
+  const { address: stellarAddress } = useContext(StellarConnectionContext)
+  const { step, errorMessage } = useAppSelector(selectWidgetState)
+
+  useEffect(() => {
+    if (!step && stellarAddress) {
+      dispatch(setStep(WIDGET_STEP.ChooseAmount))
+    }
+  }, [dispatch, step, stellarAddress])
+
+  const title = 'Redemption'
+
+  return (
+    <WidgetWrapper
+      isOpen
+      loadingTitle={title}
+      handleClose={handleClose}
+      handleSuccess={handleSuccess}
+    >
+      {step === WIDGET_STEP.ChooseAmount && (
+        <ChooseAmount
+          poolInfo={poolInfo}
+          poolState={poolState}
+          selectedTranche={tranche}
+        />
+      )}
+      {step === WIDGET_STEP.Transfer && (
+        <Transfer poolInfo={poolInfo} selectedTranche={tranche} />
+      )}
+      {step === WIDGET_STEP.Done && (
+        <Done poolInfo={poolInfo} handleAction={handleClose} />
+      )}
+      {step === WIDGET_STEP.Error && (
+        <ErrorModal
+          title={title}
+          errorReason='Sorry there was an error'
+          errorMessage={errorMessage}
+          handleOk={handleClose}
+        />
+      )}
+    </WidgetWrapper>
+  )
+}

package/src/components/Lend/stellarWithdraw/1-Confirm.tsx

@@ -0,0 +1,60 @@
+import { StellarPoolInfo } from '@huma-finance/shared'
+import { Box, css, useTheme } from '@mui/material'
+import React from 'react'
+import { BottomButton } from '../../BottomButton'
+import { WrapperModal } from '../../WrapperModal'
+
+type Props = {
+  poolInfo: StellarPoolInfo
+  withdrawableAmountFormatted: string
+  onConfirm: () => void
+}
+
+export function Confirm({
+  poolInfo,
+  withdrawableAmountFormatted,
+  onConfirm,
+}: Props): React.ReactElement {
+  const theme = useTheme()
+  const { symbol } = poolInfo.underlyingToken
+
+  const styles = {
+    itemWrapper: css`
+      margin-top: ${theme.spacing(9)};
+      color: ${theme.palette.text.primary};
+      font-weight: 400;
+      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-weight: 700;
+    `,
+  }
+
+  return (
+    <WrapperModal
+      title={`Withdraw ${symbol}`}
+      subTitle='Withdraw all the available amount'
+    >
+      <Box css={styles.itemWrapper}>
+        <Box css={styles.item}>
+          <Box fontWeight={700}>Available to withdraw</Box>
+          <Box css={styles.itemValue}>
+            {withdrawableAmountFormatted} {symbol}
+          </Box>
+        </Box>
+      </Box>
+      <BottomButton variant='contained' onClick={onConfirm}>
+        WITHDRAW
+      </BottomButton>
+    </WrapperModal>
+  )
+}

package/src/components/Lend/stellarWithdraw/2-Transfer.tsx

@@ -0,0 +1,67 @@
+import {
+  STELLAR_CHAINS_INFO,
+  StellarPoolInfo,
+  TrancheType,
+} from '@huma-finance/shared'
+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 } from '../../../hooks/useRedux'
+import { setStep } from '../../../store/widgets.reducers'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { StellarTxSendModal } from '../../StellarTxSendModal'
+
+type Props = {
+  poolInfo: StellarPoolInfo
+  tranche: TrancheType
+  poolIsClosed: boolean
+}
+
+export function Transfer({
+  poolInfo,
+  tranche,
+  poolIsClosed,
+}: Props): React.ReactElement | null {
+  const dispatch = useAppDispatch()
+  const { address: stellarAddress } = useContext(StellarConnectionContext)
+  const [tx, setTx] = useState<Awaited<
+    ReturnType<TrancheVaultClient['disburse']>
+  > | null>(null)
+
+  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 contractId =
+        tranche === 'senior' ? poolInfo.seniorTranche! : poolInfo.juniorTranche
+      const trancheVaultClient = new TrancheVaultClient({
+        publicKey: stellarAddress,
+        contractId,
+        ...getClientCommonParams(chainMetadata, stellarAddress),
+      })
+
+      const assembledTx = poolIsClosed
+        ? await trancheVaultClient.withdraw_after_pool_closure({
+            lender: stellarAddress,
+          })
+        : await trancheVaultClient.disburse({
+            lender: stellarAddress,
+          })
+      setTx(assembledTx)
+    }
+    getTx()
+  }, [poolInfo, tranche, poolIsClosed, stellarAddress])
+
+  return <StellarTxSendModal tx={tx} handleSuccess={handleSuccess} />
+}

package/src/components/Lend/stellarWithdraw/3-Done.tsx

@@ -0,0 +1,38 @@
+import { formatNumber, StellarPoolInfo } from '@huma-finance/shared'
+import React, { useCallback } from 'react'
+import { useAppSelector } from '../../../hooks/useRedux'
+import { selectWidgetState } from '../../../store/widgets.selectors'
+import { StellarTxDoneModal } from '../../StellarTxDoneModal'
+
+type Props = {
+  poolInfo: StellarPoolInfo
+  withdrawAmount?: number
+  handleAction: (options?: { isSuccess?: boolean }) => void
+}
+
+export function Done({
+  poolInfo,
+  withdrawAmount,
+  handleAction,
+}: Props): React.ReactElement {
+  const { txHash } = useAppSelector(selectWidgetState)
+  const { symbol } = poolInfo.underlyingToken
+
+  const content = [
+    `${formatNumber(withdrawAmount ?? 0)} ${symbol} withdrawn to your wallet`,
+  ]
+
+  const handleUserAction = useCallback(() => {
+    handleAction({ isSuccess: true })
+  }, [handleAction])
+
+  return (
+    <StellarTxDoneModal
+      chainId={poolInfo.chainId}
+      handleAction={handleUserAction}
+      content={content}
+      txHash={txHash}
+      buttonText='DONE'
+    />
+  )
+}