@huma-finance/widgets 0.0.62-beta.718 → 0.0.62-beta.720

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huma-finance/widgets",
-  "version": "0.0.62-beta.718+109f130",
+  "version": "0.0.62-beta.720+a8e676c",
   "publishConfig": {
     "access": "public"
   },
@@ -31,7 +31,7 @@
     "@ethersproject/units": "^5.6.0",
     "@huma-finance/sdk": "^0.0.61",
     "@huma-finance/shared": "^0.0.61",
-    "@huma-finance/web-shared": "^0.0.61",
+    "@huma-finance/web-shared": "^0.0.62-beta.720+a8e676c",
     "@mui/icons-material": "^5.3.0",
     "@mui/material": "^5.0.6",
     "@mui/styles": "^5.0.2",
@@ -203,5 +203,5 @@
   "optionalDependencies": {
     "encoding": "^0.1.13"
   },
-  "gitHead": "109f130a1429b7d091f76547fc72e20a8dfa2f09"
+  "gitHead": "a8e676c365b2ad2658475a83b59f04a95ad2fd18"
 }

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

@@ -0,0 +1,61 @@
+import { timeUtil } from '@huma-finance/shared'
+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'
+import { WrapperModal } from '../../WrapperModal'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { setStep } from '../../../store/widgets.reducers'
+import { BottomButton } from '../../BottomButton'
+import { AutoPaybackImg } from '../../images'
+
+type Props = {
+  poolState: SolanaPoolState
+}
+
+export function ApproveAllowance({ poolState }: Props): React.ReactElement {
+  const theme = useTheme()
+  const dispatch = useAppDispatch()
+  const handleNext = useCallback(() => {
+    dispatch(setStep(WIDGET_STEP.Transfer))
+  }, [dispatch])
+
+  const styles = {
+    iconWrapper: css`
+      ${theme.cssMixins.rowCentered};
+      margin-top: ${theme.spacing(6)};
+      & > img {
+        width: 220px;
+      }
+    `,
+    description: css`
+      margin-top: ${theme.spacing(4)};
+      font-weight: 400;
+      font-size: 16px;
+      color: ${theme.palette.text.secondary};
+      padding: ${theme.spacing(0, 1)};
+    `,
+  }
+
+  const { lockupEndTimeUnix, withdrawTimeUnix } = getLenderLockupDates(
+    poolState.withdrawalLockupPeriodDays ?? 0,
+  )
+
+  return (
+    <WrapperModal title='Auto-Redemption'>
+      <Box css={styles.iconWrapper}>
+        <img src={AutoPaybackImg} alt='auto-payback' />
+      </Box>
+      <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(lockupEndTimeUnix)}. Your deposit can be
+        redeemed and yield rewards will stop on{' '}
+        {timeUtil.timestampToLL(withdrawTimeUnix)}.
+      </Box>
+      <BottomButton variant='contained' onClick={handleNext}>
+        APPROVE ALLOWANCE
+      </BottomButton>
+    </WrapperModal>
+  )
+}

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

@@ -0,0 +1,167 @@
+import {
+  getSentinelAddress,
+  getTokenAccounts,
+  SolanaPoolInfo,
+} from '@huma-finance/shared'
+import React, { useCallback, useEffect, useState } from 'react'
+
+import {
+  notEnabledAutoRedeem,
+  SolanaPoolState,
+  useHumaProgram,
+  useLenderAccounts,
+  useTrancheTokenAccounts,
+} from '@huma-finance/web-shared'
+import {
+  createApproveCheckedInstruction,
+  TOKEN_2022_PROGRAM_ID,
+} from '@solana/spl-token'
+import { useWallet } from '@solana/wallet-adapter-react'
+import { PublicKey, Transaction } from '@solana/web3.js'
+import { useAppDispatch } from '../../../hooks/useRedux'
+import { setError, setStep } from '../../../store/widgets.reducers'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { LoadingModal } from '../../LoadingModal'
+import { SolanaTxSendModal } from '../../SolanaTxSendModal'
+
+type Props = {
+  poolInfo: SolanaPoolInfo
+  poolState: SolanaPoolState
+}
+
+export function Transfer({
+  poolInfo,
+  poolState,
+}: Props): React.ReactElement | null {
+  const dispatch = useAppDispatch()
+  const { publicKey } = useWallet()
+  const sentinel = getSentinelAddress(poolInfo.chainId)
+  const [transaction, setTransaction] = useState<Transaction>()
+  const {
+    juniorLenderApprovedAccountPDA,
+    seniorLenderApprovedAccountPDA,
+    seniorLenderStateAccount,
+    juniorLenderStateAccount,
+    seniorTrancheMintSupply,
+    juniorTrancheMintSupply,
+    loading: isLoadingLenderAccounts,
+  } = useLenderAccounts(poolInfo.chainId, poolInfo.poolName)
+  const {
+    seniorTokenAccount,
+    juniorTokenAccount,
+    loading: isLoadingTrancheTokenAccounts,
+  } = useTrancheTokenAccounts(poolInfo)
+  const program = useHumaProgram(poolInfo.chainId)
+
+  const handleSuccess = useCallback(() => {
+    dispatch(setStep(WIDGET_STEP.Done))
+  }, [dispatch])
+
+  useEffect(() => {
+    async function getTx() {
+      if (
+        !publicKey ||
+        transaction ||
+        isLoadingLenderAccounts ||
+        isLoadingTrancheTokenAccounts
+      ) {
+        return
+      }
+
+      const tx = new Transaction()
+
+      const { seniorTrancheATA, juniorTrancheATA } = getTokenAccounts(
+        poolInfo,
+        publicKey,
+      )
+      const poolAuthorityPubkey = new PublicKey(poolInfo.poolAuthority)
+
+      if (!seniorTokenAccount?.amount && !juniorTokenAccount?.amount) {
+        dispatch(
+          setError({ errorMessage: 'Error reading tranche token balance' }),
+        )
+        return
+      }
+      if (
+        notEnabledAutoRedeem(
+          seniorTokenAccount,
+          poolAuthorityPubkey,
+          seniorTokenAccount?.amount,
+        )
+      ) {
+        tx.add(
+          createApproveCheckedInstruction(
+            seniorTrancheATA,
+            new PublicKey(poolInfo.seniorTrancheMint),
+            poolAuthorityPubkey, // delegate
+            publicKey, // owner of the wallet
+            BigInt(seniorTokenAccount?.amount.toString() ?? 0), // amount
+            poolInfo.trancheDecimals,
+            undefined, // multiSigners
+            TOKEN_2022_PROGRAM_ID,
+          ),
+        )
+      }
+      if (
+        notEnabledAutoRedeem(
+          juniorTokenAccount,
+          poolAuthorityPubkey,
+          juniorTokenAccount?.amount,
+        )
+      ) {
+        tx.add(
+          createApproveCheckedInstruction(
+            juniorTrancheATA,
+            new PublicKey(poolInfo.juniorTrancheMint),
+            poolAuthorityPubkey, // delegate
+            publicKey, // owner of the wallet
+            BigInt(juniorTokenAccount?.amount.toString() ?? 0), // amount
+            poolInfo.trancheDecimals,
+            undefined, // multiSigners
+            TOKEN_2022_PROGRAM_ID,
+          ),
+        )
+      }
+      if (!tx.instructions.length) {
+        dispatch(
+          setError({ errorMessage: 'No tranches require Auto-Redemption' }),
+        )
+        return
+      }
+
+      setTransaction(tx)
+    }
+    getTx()
+  }, [
+    dispatch,
+    isLoadingLenderAccounts,
+    isLoadingTrancheTokenAccounts,
+    juniorLenderApprovedAccountPDA,
+    juniorLenderStateAccount,
+    juniorTokenAccount,
+    juniorTrancheMintSupply,
+    poolInfo,
+    poolState.juniorTrancheAssets,
+    poolState.seniorTrancheAssets,
+    program.methods,
+    publicKey,
+    seniorLenderApprovedAccountPDA,
+    seniorLenderStateAccount,
+    seniorTokenAccount,
+    seniorTrancheMintSupply,
+    sentinel,
+    transaction,
+  ])
+
+  if (isLoadingLenderAccounts || isLoadingTrancheTokenAccounts) {
+    return <LoadingModal title='Auto-Redeem' />
+  }
+
+  return (
+    <SolanaTxSendModal
+      tx={transaction}
+      chainId={poolInfo.chainId}
+      handleSuccess={handleSuccess}
+    />
+  )
+}

package/src/components/Lend/solanaEnableAutoRedemption/3-Success.tsx

@@ -0,0 +1,45 @@
+import {
+  CloseModalOptions,
+  SolanaPoolInfo,
+  timeUtil,
+} from '@huma-finance/shared'
+import { getLenderLockupDates, SolanaPoolState } from '@huma-finance/web-shared'
+import React from 'react'
+import { useAppSelector } from '../../../hooks/useRedux'
+import { selectWidgetState } from '../../../store/widgets.selectors'
+import { SolanaTxDoneModal } from '../../SolanaTxDoneModal'
+
+type Props = {
+  poolInfo: SolanaPoolInfo
+  poolState: SolanaPoolState
+  handleAction: (options?: CloseModalOptions) => void
+}
+
+export function Success({
+  poolInfo,
+  poolState,
+  handleAction,
+}: Props): React.ReactElement {
+  const { solanaSignature } = useAppSelector(selectWidgetState)
+
+  const { lockupEndTimeUnix, withdrawTimeUnix } = getLenderLockupDates(
+    poolState.withdrawalLockupPeriodDays ?? 0,
+  )
+  const content = [
+    `Redemption request will be automatically submitted on ${timeUtil.timestampToLL(
+      lockupEndTimeUnix,
+    )}. Your deposit can be redeemed and yield rewards will stop on ${timeUtil.timestampToLL(
+      withdrawTimeUnix,
+    )}.`,
+  ]
+
+  return (
+    <SolanaTxDoneModal
+      handleAction={handleAction}
+      content={content}
+      chainId={poolInfo.chainId}
+      solanaSignature={solanaSignature}
+      buttonText='DONE'
+    />
+  )
+}

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

@@ -0,0 +1,76 @@
+import { CloseModalOptions, SolanaPoolInfo } from '@huma-finance/shared'
+import { SolanaPoolState } from '@huma-finance/web-shared'
+import React, { 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 { Transfer } from './2-Transfer'
+import { Success } from './3-Success'
+import { ApproveAllowance } from './1-ApproveAllowance'
+
+/**
+ * Lend pool supply props
+ * @typedef {Object} SolanaEnableAutoRedemptionProps
+ * @property {SolanaPoolInfo} poolInfo The metadata of the pool.
+ * @property {SolanaPoolState} 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 SolanaEnableAutoRedemptionProps {
+  poolInfo: SolanaPoolInfo
+  poolState: SolanaPoolState
+  handleClose: (options?: CloseModalOptions) => void
+  handleSuccess?: () => void
+}
+
+export function SolanaEnableAutoRedemption({
+  poolInfo,
+  poolState,
+  handleClose,
+  handleSuccess,
+}: SolanaEnableAutoRedemptionProps): React.ReactElement | null {
+  const dispatch = useDispatch()
+  const { step, errorMessage } = useAppSelector(selectWidgetState)
+
+  useEffect(() => {
+    if (!step) {
+      dispatch(setStep(WIDGET_STEP.ApproveAllowance))
+    }
+  }, [dispatch, step])
+
+  return (
+    <WidgetWrapper
+      isOpen
+      loadingTitle='Auto-Redemption'
+      handleClose={handleClose}
+      handleSuccess={handleSuccess}
+    >
+      {step === WIDGET_STEP.ApproveAllowance && (
+        <ApproveAllowance poolState={poolState} />
+      )}
+      {step === WIDGET_STEP.Transfer && (
+        <Transfer poolInfo={poolInfo} poolState={poolState} />
+      )}
+      {step === WIDGET_STEP.Done && (
+        <Success
+          poolInfo={poolInfo}
+          poolState={poolState}
+          handleAction={handleClose}
+        />
+      )}
+      {step === WIDGET_STEP.Error && (
+        <ErrorModal
+          title='Auto-Redemption'
+          errorReason='Sorry there was an error'
+          errorMessage={errorMessage}
+          handleOk={handleClose}
+        />
+      )}
+    </WidgetWrapper>
+  )
+}

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

@@ -66,7 +66,7 @@ export function ChooseAmount({
   }
 
   const handleAction = () => {
-    dispatch(setStep(WIDGET_STEP.Transfer))
+    dispatch(setStep(WIDGET_STEP.ApproveAllowance))
   }
 
   const getTrancheCap = () => {
@@ -125,7 +125,7 @@ export function ChooseAmount({
       )} balance`}
       infos={getInfos()}
       handleAction={handleAction}
-      actionText='SUPPLY'
+      actionText='NEXT'
     />
   )
 }

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

@@ -0,0 +1,59 @@
+import React, { useCallback } from 'react'
+import { Box, css, useTheme } from '@mui/material'
+import { getLenderLockupDates, SolanaPoolState } from '@huma-finance/web-shared'
+import { timeUtil } from '@huma-finance/shared'
+import { useAppDispatch } from '../../../hooks/useRedux'
+import { WrapperModal } from '../../WrapperModal'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { setStep } from '../../../store/widgets.reducers'
+import { BottomButton } from '../../BottomButton'
+import { AutoPaybackImg } from '../../images'
+
+type Props = {
+  poolState: SolanaPoolState
+}
+
+export function ApproveAllowance({ poolState }: Props): React.ReactElement {
+  const theme = useTheme()
+  const dispatch = useAppDispatch()
+  const handleNext = useCallback(() => {
+    dispatch(setStep(WIDGET_STEP.Transfer))
+  }, [dispatch])
+
+  const styles = {
+    iconWrapper: css`
+      ${theme.cssMixins.rowCentered};
+      margin-top: ${theme.spacing(6)};
+      & > img {
+        width: 220px;
+      }
+    `,
+    description: css`
+      margin-top: ${theme.spacing(4)};
+      font-weight: 400;
+      font-size: 16px;
+      color: ${theme.palette.text.secondary};
+      padding: ${theme.spacing(0, 1)};
+    `,
+  }
+
+  const { lockupEndTimeUnix } = getLenderLockupDates(
+    poolState.withdrawalLockupPeriodDays ?? 0,
+  )
+  return (
+    <WrapperModal title='Auto-Redemption'>
+      <Box css={styles.iconWrapper}>
+        <img src={AutoPaybackImg} alt='auto-payback' />
+      </Box>
+      <Box css={styles.description}>
+        This transaction will also enable auto-redemption for your tranche
+        shares by approving our automation account as a delegate. Redemption
+        requests will be automatically submitted on{' '}
+        {timeUtil.timestampToLL(lockupEndTimeUnix)}.
+      </Box>
+      <BottomButton variant='contained' onClick={handleNext}>
+        SUPPLY
+      </BottomButton>
+    </WrapperModal>
+  )
+}

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

@@ -2,7 +2,6 @@ import {
   CampaignService,
   checkIsDev,
   convertToShares,
-  getSentinelAddress,
   getTokenAccounts,
   SolanaPoolInfo,
   SolanaTokenUtils,
@@ -14,6 +13,7 @@ import {
   SolanaPoolState,
   useHumaProgram,
   useLenderAccounts,
+  useTrancheTokenAccounts,
 } from '@huma-finance/web-shared'
 import {
   createApproveCheckedInstruction,
@@ -62,6 +62,11 @@ export function Transfer({
     juniorTrancheMintSupply,
     loading: isLoadingLenderAccounts,
   } = useLenderAccounts(poolInfo.chainId, poolInfo.poolName)
+  const {
+    seniorTokenAccount,
+    juniorTokenAccount,
+    loading: isLoadingTrancheTokenAccounts,
+  } = useTrancheTokenAccounts(poolInfo)
   const program = useHumaProgram(poolInfo.chainId)
 
   const handleSuccess = useCallback(
@@ -94,7 +99,12 @@ export function Transfer({
 
   useEffect(() => {
     async function getTx() {
-      if (!publicKey || transaction || isLoadingLenderAccounts) {
+      if (
+        !publicKey ||
+        transaction ||
+        isLoadingLenderAccounts ||
+        isLoadingTrancheTokenAccounts
+      ) {
         return
       }
 
@@ -164,6 +174,17 @@ export function Transfer({
           : juniorTrancheMintSupply ?? new BN(0),
         supplyBigNumber,
       )
+      const existingShares = convertToShares(
+        selectedTranche === 'senior'
+          ? new BN(poolState.seniorTrancheAssets ?? 0)
+          : new BN(poolState.juniorTrancheAssets ?? 0),
+        selectedTranche === 'senior'
+          ? seniorTrancheMintSupply ?? new BN(0)
+          : juniorTrancheMintSupply ?? new BN(0),
+        selectedTranche === 'senior'
+          ? new BN(seniorTokenAccount?.amount.toString() ?? '0')
+          : new BN(juniorTokenAccount?.amount.toString() ?? '0'),
+      )
       tx.add(
         createApproveCheckedInstruction(
           selectedTranche === 'senior' ? seniorTrancheATA : juniorTrancheATA,
@@ -174,7 +195,7 @@ export function Transfer({
           ),
           new PublicKey(poolInfo.poolAuthority), // delegate
           publicKey, // owner of the wallet
-          BigInt(sharesAmount.muln(1.1).toString()), // amount
+          BigInt(sharesAmount.muln(1.1).add(existingShares).toString()), // amount
           poolInfo.trancheDecimals,
           undefined, // multiSigners
           TOKEN_2022_PROGRAM_ID,
@@ -186,8 +207,10 @@ export function Transfer({
     getTx()
   }, [
     isLoadingLenderAccounts,
+    isLoadingTrancheTokenAccounts,
     juniorLenderApprovedAccountPDA,
     juniorLenderStateAccount,
+    juniorTokenAccount?.amount,
     juniorTrancheMintSupply,
     poolInfo,
     poolState.juniorTrancheAssets,
@@ -197,12 +220,13 @@ export function Transfer({
     selectedTranche,
     seniorLenderApprovedAccountPDA,
     seniorLenderStateAccount,
+    seniorTokenAccount?.amount,
     seniorTrancheMintSupply,
     supplyBigNumber,
     transaction,
   ])
 
-  if (isLoadingLenderAccounts) {
+  if (isLoadingLenderAccounts || isLoadingTrancheTokenAccounts) {
     return <LoadingModal title='Supply' />
   }
 

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

@@ -23,6 +23,7 @@ import { ChooseTranche } from './2-ChooseTranche'
 import { ChooseAmount } from './3-ChooseAmount'
 import { Transfer } from './4-Transfer'
 import { Success } from './5-Success'
+import { ApproveAllowance } from './4-ApproveAllowance'
 
 export interface Campaign {
   id: string
@@ -143,6 +144,9 @@ export function SolanaLendSupply({
           isUniTranche={isUniTranche}
         />
       )}
+      {step === WIDGET_STEP.ApproveAllowance && (
+        <ApproveAllowance poolState={poolState} />
+      )}
       {step === WIDGET_STEP.Transfer && selectedTranche && (
         <Transfer
           poolInfo={poolInfo}

package/src/index.tsx

@@ -90,6 +90,10 @@ import {
   SolanaPaymentProps,
 } from './components/CreditLine/solanaPayment'
 import { NotifiContextWrapper } from './components/Notifi/NotifiContextWrapper'
+import {
+  SolanaEnableAutoRedemption,
+  SolanaEnableAutoRedemptionProps,
+} from './components/Lend/solanaEnableAutoRedemption'
 
 /**
  * Mapping of your JSON-RPC connections indexed by chainId
@@ -667,4 +671,26 @@ export function SolanaPaymentWidget(props: SolanaPaymentWidgetProps) {
   )
 }
 
+/**
+ * Lend pool supply widget props for Solana pools
+ * @typedef {Object} SolanaEnableAutoRedemptionWidgetProps
+ */
+type SolanaEnableAutoRedemptionWidgetProps = SolanaEnableAutoRedemptionProps &
+  SolanaWidgetProps
+
+/**
+ * Lend pool supply widget for Solana pools
+ *
+ * @param {SolanaEnableAutoRedemptionWidgetProps} props - Widget props
+ */
+export function SolanaEnableAutoRedemptionWidget(
+  props: SolanaEnableAutoRedemptionWidgetProps,
+) {
+  return (
+    <SolanaWidget {...props}>
+      <SolanaEnableAutoRedemption {...props} />
+    </SolanaWidget>
+  )
+}
+
 export * from './components/Notifi/NotifiContextWrapper'