Stellar withdraw

packages/huma-widget/API.md

@@ -3,6 +3,8 @@
 <dl>
 <dt><a href="#StellarLendAddRedemption">StellarLendAddRedemption()</a></dt>
 <dd><p>Stellar add redemption props – request to withdraw (redeem) shares from a tranche.</p></dd>
+<dt><a href="#StellarLendWithdraw">StellarLendWithdraw()</a></dt>
+<dd><p>Stellar lend pool withdraw props – disburse (pool open) or withdraw after pool closure.</p></dd>
 <dt><a href="#InvoiceFactoringBorrowWidget">InvoiceFactoringBorrowWidget(props)</a> ⇒</dt>
 <dd><p>Invoice factoring borrow widget</p></dd>
 <dt><a href="#InvoiceFactoringPaymentWidget">InvoiceFactoringPaymentWidget(props)</a> ⇒</dt>
@@ -56,6 +58,8 @@ To be used when re-enabling autopay and other pool actions that require allowanc
 <dd><p>Lend pool supply widget for Stellar pools</p></dd>
 <dt><a href="#StellarLendAddRedemptionWidget">StellarLendAddRedemptionWidget(props)</a></dt>
 <dd><p>Lend pool add redemption widget for Stellar pools</p></dd>
+<dt><a href="#StellarLendWithdrawWidget">StellarLendWithdrawWidget(props)</a></dt>
+<dd><p>Lend pool withdraw widget for Stellar pools (disburse when pool open, withdraw_after_pool_closure when closed)</p></dd>
 <dt><a href="#StellarBorrowWidget">StellarBorrowWidget(props)</a></dt>
 <dd><p>Borrow widget for Stellar pools</p></dd>
 <dt><a href="#SolanaEnableAutoRedemptionWidget">SolanaEnableAutoRedemptionWidget(props)</a></dt>
@@ -171,6 +175,8 @@ To be used when re-enabling autopay and other pool actions that require allowanc
 <dd><p>Lend pool supply widget props for Stellar pools</p></dd>
 <dt><a href="#StellarLendAddRedemptionWidgetProps">StellarLendAddRedemptionWidgetProps</a> : <code>Object</code></dt>
 <dd><p>Lend pool add redemption widget props for Stellar pools</p></dd>
+<dt><a href="#StellarLendWithdrawWidgetProps">StellarLendWithdrawWidgetProps</a> : <code>Object</code></dt>
+<dd><p>Lend pool withdraw widget props for Stellar pools</p></dd>
 <dt><a href="#StellarLendSupplyWidgetProps">StellarLendSupplyWidgetProps</a> : <code>Object</code></dt>
 <dd><p>Borrow widget props for Stellar pools</p></dd>
 <dt><a href="#SolanaEnableAutoRedemptionWidgetProps">SolanaEnableAutoRedemptionWidgetProps</a> : <code>Object</code></dt>
@@ -193,6 +199,22 @@ To be used when re-enabling autopay and other pool actions that require allowanc
 | handleClose | <code>function</code> | <p>Function to close the widget modal.</p> |
 | handleSuccess | <code>function</code> | <p>Optional callback when redemption request succeeds.</p> |
 
+<a name="StellarLendWithdraw"></a>
+
+## StellarLendWithdraw()
+<p>Stellar lend pool withdraw props – disburse (pool open) or withdraw after pool closure.</p>
+
+**Kind**: global function  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| poolInfo | <code>StellarPoolInfo</code> | <p>The metadata of the pool.</p> |
+| poolState | <code>StellarPoolState</code> | <p>The current state config of the pool.</p> |
+| tranche | <code>TrancheType</code> | <p>The tranche to withdraw from (junior or senior).</p> |
+| handleClose | <code>function</code> | <p>Function to close the widget modal.</p> |
+| handleSuccess | <code>function</code> | <p>Optional callback when withdraw succeeds.</p> |
+
 <a name="InvoiceFactoringBorrowWidget"></a>
 
 ## InvoiceFactoringBorrowWidget(props) ⇒
@@ -499,6 +521,17 @@ To be used when re-enabling autopay and other pool actions that require allowanc
 | --- | --- | --- |
 | props | [<code>StellarLendAddRedemptionWidgetProps</code>](#StellarLendAddRedemptionWidgetProps) | <p>Widget props</p> |
 
+<a name="StellarLendWithdrawWidget"></a>
+
+## StellarLendWithdrawWidget(props)
+<p>Lend pool withdraw widget for Stellar pools (disburse when pool open, withdraw_after_pool_closure when closed)</p>
+
+**Kind**: global function  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| props | [<code>StellarLendWithdrawWidgetProps</code>](#StellarLendWithdrawWidgetProps) | <p>Widget props</p> |
+
 <a name="StellarBorrowWidget"></a>
 
 ## StellarBorrowWidget(props)
@@ -1213,6 +1246,12 @@ To be used when re-enabling autopay and other pool actions that require allowanc
 ## StellarLendAddRedemptionWidgetProps : <code>Object</code>
 <p>Lend pool add redemption widget props for Stellar pools</p>
 
+**Kind**: global typedef  
+<a name="StellarLendWithdrawWidgetProps"></a>
+
+## StellarLendWithdrawWidgetProps : <code>Object</code>
+<p>Lend pool withdraw widget props for Stellar pools</p>
+
 **Kind**: global typedef  
 <a name="StellarLendSupplyWidgetProps"></a>
 

packages/huma-widget/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>
+  )
+}

packages/huma-widget/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} />
+}

packages/huma-widget/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'
+    />
+  )
+}