@huma-finance/widgets 0.0.79 → 0.0.80-beta.1081

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/index.d.ts

@@ -17,6 +17,7 @@ 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 { LendSupplyProps } from './components/Lend/supply';
 import { LendSupplyPropsV2 } from './components/Lend/supplyV2';
@@ -372,6 +373,17 @@ 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;
 /**
  * Borrow widget props for Stellar pools
  * @typedef {Object} StellarLendSupplyWidgetProps

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huma-finance/widgets",
-  "version": "0.0.79",
+  "version": "0.0.80-beta.1081+4c21b05",
   "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.79",
-    "@huma-finance/shared": "^0.0.79",
-    "@huma-finance/web-shared": "^0.0.79",
+    "@huma-finance/sdk": "^0.0.80-beta.1081+4c21b05",
+    "@huma-finance/shared": "^0.0.80-beta.1081+4c21b05",
+    "@huma-finance/web-shared": "^0.0.80-beta.1081+4c21b05",
     "@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": "abf1c7b3b79f984bdb33383ada83360bf1cc4fdc"
+  "gitHead": "4c21b05f4e272d6e91d0eb286d518b2c7b71d5c4"
 }

package/src/components/Lend/solanaWithdraw/5-Transfer.tsx

@@ -6,6 +6,7 @@ import {
 import { useHumaProgram } from '@huma-finance/web-shared'
 import {
   ASSOCIATED_TOKEN_PROGRAM_ID,
+  createAssociatedTokenAccountIdempotentInstruction,
   createAssociatedTokenAccountInstruction,
   getAccount,
   TOKEN_2022_PROGRAM_ID,
@@ -89,6 +90,16 @@ export function Transfer({
         }
       }
 
+      tx.add(
+        createAssociatedTokenAccountIdempotentInstruction(
+          publicKey,
+          lenderTrancheToken,
+          publicKey,
+          new PublicKey(trancheMint),
+          TOKEN_2022_PROGRAM_ID,
+        ),
+      )
+
       if (!poolIsClosed) {
         const disburseTx = await program.methods
           .disburse()

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/index.tsx

@@ -77,6 +77,10 @@ import {
   SolanaLendWithdraw,
   SolanaLendWithdrawProps,
 } from './components/Lend/solanaWithdraw'
+import {
+  StellarLendAddRedemption,
+  StellarLendAddRedemptionProps,
+} from './components/Lend/stellarAddRedemption'
 import {
   StellarLendSupply,
   StellarLendSupplyProps,
@@ -713,6 +717,28 @@ export function StellarLendSupplyWidget(props: StellarLendSupplyWidgetProps) {
   )
 }
 
+/**
+ * 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 function StellarLendAddRedemptionWidget(
+  props: StellarLendAddRedemptionWidgetProps,
+) {
+  return (
+    <GenericWidget {...props}>
+      <StellarLendAddRedemption {...props} />
+    </GenericWidget>
+  )
+}
+
 /**
  * Borrow widget props for Stellar pools
  * @typedef {Object} StellarLendSupplyWidgetProps