@huma-finance/widgets 0.0.69-beta.840 → 0.0.69-beta.845

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huma-finance/widgets",
-  "version": "0.0.69-beta.840+6cc345b",
+  "version": "0.0.69-beta.845+96de165",
   "publishConfig": {
     "access": "public"
   },
@@ -29,9 +29,9 @@
     "@ethersproject/experimental": "^5.7.0",
     "@ethersproject/providers": "^5.6.0",
     "@ethersproject/units": "^5.6.0",
-    "@huma-finance/sdk": "^0.0.69-beta.840+6cc345b",
-    "@huma-finance/shared": "^0.0.69-beta.840+6cc345b",
-    "@huma-finance/web-shared": "^0.0.69-beta.840+6cc345b",
+    "@huma-finance/sdk": "^0.0.69-beta.845+96de165",
+    "@huma-finance/shared": "^0.0.69-beta.845+96de165",
+    "@huma-finance/web-shared": "^0.0.69-beta.845+96de165",
     "@mui/x-date-pickers": "^5.0.7",
     "@notifi-network/notifi-frontend-client": "^1.1.2",
     "@notifi-network/notifi-react": "^1.1.2",
@@ -201,5 +201,5 @@
   "optionalDependencies": {
     "encoding": "^0.1.13"
   },
-  "gitHead": "6cc345ba537842807a0c5744bbc0e0d20314d24e"
+  "gitHead": "96de165c93226572df1a2e5f3189efecf7540b78"
 }

package/src/components/Lend/solanaWithdraw/1-ConfirmTransfer.tsx

@@ -0,0 +1,79 @@
+import { UnderlyingTokenInfo } from '@huma-finance/shared'
+import { Box, Divider, css, useTheme } from '@mui/material'
+import React from 'react'
+import { useDispatch } from 'react-redux'
+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
+  withdrawableAmountFormatted: string | number
+  sharePrice: number
+}
+
+export function ConfirmTransfer({
+  poolUnderlyingToken,
+  withdrawableAmountFormatted,
+  sharePrice,
+}: Props): React.ReactElement {
+  const theme = useTheme()
+  const dispatch = useDispatch()
+  const { symbol } = poolUnderlyingToken
+
+  const goToWithdraw = () => {
+    dispatch(setStep(WIDGET_STEP.Transfer))
+  }
+
+  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;
+    `,
+    divider: css`
+      border-color: ${theme.palette.divider};
+      margin-bottom: ${theme.spacing(3)};
+    `,
+  }
+
+  return (
+    <WrapperModal
+      title={`Withdraw ${symbol}`}
+      subTitle='Withdraw all the available amount'
+    >
+      <Box css={styles.itemWrapper}>
+        <Box css={styles.item}>
+          <Box>Price Per Share</Box>
+          <Box css={styles.itemValue}>
+            {sharePrice.toFixed(1)} {symbol}
+          </Box>
+        </Box>
+        <Divider css={styles.divider} orientation='horizontal' />
+        <Box css={styles.item}>
+          <Box fontWeight={700}>Available to withdraw</Box>
+          <Box css={styles.itemValue}>
+            {withdrawableAmountFormatted} {symbol}
+          </Box>
+        </Box>
+      </Box>
+      <BottomButton variant='contained' onClick={goToWithdraw}>
+        WITHDRAW
+      </BottomButton>
+    </WrapperModal>
+  )
+}

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

@@ -0,0 +1,105 @@
+import {
+  getTokenAccounts,
+  SolanaPoolInfo,
+  TrancheType,
+} from '@huma-finance/shared'
+import { useHumaProgram } from '@huma-finance/web-shared'
+import { TOKEN_2022_PROGRAM_ID, TOKEN_PROGRAM_ID } from '@solana/spl-token'
+import { useWallet } from '@solana/wallet-adapter-react'
+import { Transaction } from '@solana/web3.js'
+import React, { useCallback, useEffect, useState } from 'react'
+import { useAppDispatch } from '../../../hooks/useRedux'
+import { setStep } from '../../../store/widgets.reducers'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { SolanaTxSendModal } from '../../SolanaTxSendModal'
+
+type Props = {
+  poolInfo: SolanaPoolInfo
+  selectedTranche: TrancheType
+  poolIsClosed: boolean
+}
+
+export function Transfer({
+  poolInfo,
+  selectedTranche,
+  poolIsClosed,
+}: Props): React.ReactElement | null {
+  const { publicKey } = useWallet()
+  const dispatch = useAppDispatch()
+  const program = useHumaProgram(poolInfo.chainId)
+  const [transaction, setTransaction] = useState<Transaction>()
+
+  useEffect(() => {
+    async function getTx() {
+      if (!publicKey || transaction) {
+        return
+      }
+
+      const tx = new Transaction()
+      const { underlyingTokenATA, seniorTrancheATA, juniorTrancheATA } =
+        getTokenAccounts(poolInfo, publicKey)
+      const trancheMint =
+        selectedTranche === 'senior'
+          ? poolInfo.seniorTrancheMint
+          : poolInfo.juniorTrancheMint
+      const lenderTrancheToken =
+        selectedTranche === 'senior' ? seniorTrancheATA : juniorTrancheATA
+
+      if (!poolIsClosed) {
+        const disburseTx = await program.methods
+          .disburse()
+          .accountsPartial({
+            lender: publicKey,
+            humaConfig: poolInfo.humaConfig,
+            poolConfig: poolInfo.poolConfig,
+            underlyingMint: poolInfo.underlyingMint.address,
+            trancheMint,
+            poolUnderlyingToken: poolInfo.poolUnderlyingTokenAccount,
+            lenderUnderlyingToken: underlyingTokenATA,
+            tokenProgram: TOKEN_PROGRAM_ID,
+          })
+          .transaction()
+        tx.add(disburseTx)
+      } else {
+        const withdrawAfterPoolClosureTx = await program.methods
+          .withdrawAfterPoolClosure()
+          .accountsPartial({
+            lender: publicKey,
+            humaConfig: poolInfo.humaConfig,
+            poolConfig: poolInfo.poolConfig,
+            underlyingMint: poolInfo.underlyingMint.address,
+            trancheMint,
+            poolUnderlyingToken: poolInfo.poolUnderlyingTokenAccount,
+            lenderUnderlyingToken: underlyingTokenATA,
+            lenderTrancheToken,
+            underlyingTokenProgram: TOKEN_PROGRAM_ID,
+            trancheTokenProgram: TOKEN_2022_PROGRAM_ID,
+          })
+          .transaction()
+        tx.add(withdrawAfterPoolClosureTx)
+      }
+
+      setTransaction(tx)
+    }
+    getTx()
+  }, [
+    poolInfo,
+    poolIsClosed,
+    program.methods,
+    publicKey,
+    selectedTranche,
+    transaction,
+  ])
+
+  const handleSuccess = useCallback(() => {
+    dispatch(setStep(WIDGET_STEP.Done))
+  }, [dispatch])
+
+  return (
+    <SolanaTxSendModal
+      tx={transaction}
+      chainId={poolInfo.chainId}
+      handleSuccess={handleSuccess}
+    />
+  )
+}

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

@@ -0,0 +1,32 @@
+import { BN } from '@coral-xyz/anchor'
+import {
+  formatMoneyFixed,
+  SolanaTokenUtils,
+  UnderlyingTokenInfo,
+} from '@huma-finance/shared'
+import React from 'react'
+import { TxDoneModal } from '../../TxDoneModal'
+
+type Props = {
+  poolUnderlyingToken: UnderlyingTokenInfo
+  withdrawAmount: BN
+  handleAction: () => void
+}
+
+export function Done({
+  poolUnderlyingToken,
+  withdrawAmount,
+  handleAction,
+}: Props): React.ReactElement {
+  const { symbol } = poolUnderlyingToken
+  const withdrawAmountFormatted = formatMoneyFixed(
+    SolanaTokenUtils.formatUnits(withdrawAmount, poolUnderlyingToken.decimals),
+    2,
+  )
+
+  const content = [
+    `You successfully withdrew ${withdrawAmountFormatted} ${symbol}.`,
+  ]
+
+  return <TxDoneModal handleAction={handleAction} content={content} />
+}

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

@@ -0,0 +1,138 @@
+import {
+  formatNumberFixed,
+  SolanaPoolInfo,
+  SolanaTokenUtils,
+  TrancheType,
+} from '@huma-finance/shared'
+import { LenderStateAccount, SolanaPoolState } from '@huma-finance/web-shared'
+import React, { useCallback, useEffect, useState } from 'react'
+import { useDispatch } from 'react-redux'
+
+import { BN } from '@coral-xyz/anchor'
+import { Mint } from '@solana/spl-token'
+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 { ConfirmTransfer } from './1-ConfirmTransfer'
+import { Transfer } from './2-Transfer'
+import { Done } from './3-Done'
+
+/**
+ * Solana lend pool withdraw props
+ * @typedef {Object} SolanaLendWithdrawProps
+ * @property {SolanaPoolInfo} poolInfo The metadata of the pool.
+ * @property {SolanaPoolState} poolState The current state config of the pool.
+ * @property {LenderStateAccount} lenderStateAccount The lender state account of the user.
+ * @property {Mint} trancheMintAccount The mint account of the tranche.
+ * @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 SolanaLendWithdrawProps = {
+  poolInfo: SolanaPoolInfo
+  poolState: SolanaPoolState
+  lenderStateAccount: LenderStateAccount
+  trancheMintAccount: Mint
+  trancheType: TrancheType
+  handleClose: () => void
+  handleSuccess?: (blockNumber?: number) => void
+}
+
+export function SolanaLendWithdraw({
+  poolInfo,
+  poolState,
+  lenderStateAccount,
+  trancheMintAccount,
+  trancheType,
+  handleClose,
+  handleSuccess,
+}: SolanaLendWithdrawProps): React.ReactElement | null {
+  const dispatch = useDispatch()
+  const { step, errorMessage } = useAppSelector(selectWidgetState)
+  const { symbol, decimals } = poolInfo.underlyingMint
+  const title = `Withdraw ${symbol}`
+  const poolIsClosed = poolState.status === 'closed'
+  const [sharePrice, setSharePrice] = useState(0)
+  const { totalAmountProcessed, totalAmountWithdrawn } =
+    lenderStateAccount.redemptionRecord
+  const withdrawableAmount = totalAmountProcessed.sub(totalAmountWithdrawn)
+  const withdrawableAmountFormatted = formatNumberFixed(
+    SolanaTokenUtils.formatUnits(withdrawableAmount, decimals),
+    2,
+  )
+
+  useEffect(() => {
+    if (!step) {
+      dispatch(setStep(WIDGET_STEP.ConfirmTransfer))
+    }
+  }, [dispatch, step])
+
+  useEffect(() => {
+    const trancheAssets =
+      trancheType === 'senior'
+        ? poolState.seniorTrancheAssets
+        : poolState.juniorTrancheAssets
+
+    const trancheAssetsVal = new BN(trancheAssets ?? 1)
+    const trancheSupplyVal = new BN(trancheMintAccount.supply.toString() ?? 1)
+    const sharePrice =
+      trancheAssetsVal.muln(100000).div(trancheSupplyVal).toNumber() / 100000
+    setSharePrice(sharePrice)
+  }, [
+    poolState.juniorTrancheAssets,
+    poolState.seniorTrancheAssets,
+    trancheMintAccount.supply,
+    trancheType,
+  ])
+
+  const handleWithdrawSuccess = useCallback(
+    (blockNumber: number) => {
+      if (handleSuccess) {
+        handleSuccess(blockNumber)
+      }
+    },
+    [handleSuccess],
+  )
+
+  return (
+    <WidgetWrapper
+      isOpen
+      loadingTitle={title}
+      handleClose={handleClose}
+      handleSuccess={handleWithdrawSuccess}
+    >
+      {step === WIDGET_STEP.ConfirmTransfer && (
+        <ConfirmTransfer
+          poolUnderlyingToken={poolInfo.underlyingMint}
+          withdrawableAmountFormatted={withdrawableAmountFormatted ?? '--'}
+          sharePrice={sharePrice}
+        />
+      )}
+      {step === WIDGET_STEP.Transfer && (
+        <Transfer
+          poolInfo={poolInfo}
+          selectedTranche={trancheType}
+          poolIsClosed={poolIsClosed}
+        />
+      )}
+      {step === WIDGET_STEP.Done && (
+        <Done
+          poolUnderlyingToken={poolInfo.underlyingMint}
+          withdrawAmount={withdrawableAmount}
+          handleAction={handleClose}
+        />
+      )}
+      {step === WIDGET_STEP.Error && (
+        <ErrorModal
+          title={title}
+          errorReason='Sorry there was an error'
+          errorMessage={errorMessage}
+          handleOk={handleClose}
+        />
+      )}
+    </WidgetWrapper>
+  )
+}

package/src/index.tsx

@@ -30,6 +30,14 @@ import {
   CreditLinePaymentPropsV2,
   CreditLinePaymentV2,
 } from './components/CreditLine/paymentV2'
+import {
+  SolanaBorrow,
+  SolanaBorrowProps,
+} from './components/CreditLine/solanaBorrow'
+import {
+  SolanaPayment,
+  SolanaPaymentProps,
+} from './components/CreditLine/solanaPayment'
 import {
   SupplyFirstLossCover,
   SupplyFirstLossCoverProps,
@@ -50,6 +58,30 @@ import {
   CancelRedemptionPropsV2,
   CancelRedemptionV2,
 } from './components/Lend/cancelRedemptionV2 '
+import {
+  SolanaLendAddRedemption,
+  SolanaLendAddRedemptionProps,
+} from './components/Lend/solanaAddRedemption'
+import {
+  SolanaLendCancelRedemption,
+  SolanaLendCancelRedemptionProps,
+} from './components/Lend/solanaCancelRedemption'
+import {
+  SolanaEnableAutoRedemption,
+  SolanaEnableAutoRedemptionProps,
+} from './components/Lend/solanaEnableAutoRedemption'
+import {
+  SolanaLendSupply,
+  SolanaLendSupplyProps,
+} from './components/Lend/solanaSupply'
+import {
+  SolanaLendWithdraw,
+  SolanaLendWithdrawProps,
+} from './components/Lend/solanaWithdraw'
+import {
+  StellarLendSupply,
+  StellarLendSupplyProps,
+} from './components/Lend/stellarSupply'
 import { LendSupply, LendSupplyProps } from './components/Lend/supply'
 import { LendSupplyPropsV2, LendSupplyV2 } from './components/Lend/supplyV2'
 import { LendWithdraw, LendWithdrawProps } from './components/Lend/withdraw'
@@ -57,6 +89,7 @@ import {
   LendWithdrawPropsV2,
   LendWithdrawV2,
 } from './components/Lend/withdrawV2'
+import { NotifiContextWrapper } from './components/Notifi/NotifiContextWrapper'
 import {
   ReceivableBackedCreditLineBorrowPropsV2,
   ReceivableBackedCreditLineBorrowV2,
@@ -69,35 +102,6 @@ import { SuperfluidFactoring } from './components/SuperfluidFactoring'
 import { store } from './store'
 import { themeHuma } from './theme'
 import { WCProps } from './utilTypes'
-import {
-  SolanaLendSupply,
-  SolanaLendSupplyProps,
-} from './components/Lend/solanaSupply'
-import {
-  SolanaLendAddRedemption,
-  SolanaLendAddRedemptionProps,
-} from './components/Lend/solanaAddRedemption'
-import {
-  SolanaLendCancelRedemption,
-  SolanaLendCancelRedemptionProps,
-} from './components/Lend/solanaCancelRedemption'
-import {
-  SolanaBorrow,
-  SolanaBorrowProps,
-} from './components/CreditLine/solanaBorrow'
-import {
-  SolanaPayment,
-  SolanaPaymentProps,
-} from './components/CreditLine/solanaPayment'
-import { NotifiContextWrapper } from './components/Notifi/NotifiContextWrapper'
-import {
-  StellarLendSupply,
-  StellarLendSupplyProps,
-} from './components/Lend/stellarSupply'
-import {
-  SolanaEnableAutoRedemption,
-  SolanaEnableAutoRedemptionProps,
-} from './components/Lend/solanaEnableAutoRedemption'
 
 /**
  * Mapping of your JSON-RPC connections indexed by chainId
@@ -675,6 +679,20 @@ export function SolanaPaymentWidget(props: SolanaPaymentWidgetProps) {
   )
 }
 
+/**
+ * Solana lend withdraw widget
+ *
+ * @param {SolanaLendWithdrawProps} props - The solana lend pool withdraw widget props.
+ * @returns Solana lend pool withdraw widget component
+ */
+export function SolanaLendWithdrawWidget(props: SolanaLendWithdrawProps) {
+  return (
+    <GenericWidget {...props}>
+      <SolanaLendWithdraw {...props} />
+    </GenericWidget>
+  )
+}
+
 /**
  * Lend pool supply widget props for Stellar pools
  * @typedef {Object} StellarLendSupplyWidgetProps