@huma-finance/widgets 0.0.62-beta.597 → 0.0.62-beta.611

package/src/components/Lend/solanaAddRedemption/3-Transfer.tsx

@@ -0,0 +1,102 @@
+import {
+  getTokenAccounts,
+  SolanaPoolInfo,
+  SolanaTokenUtils,
+  TrancheType,
+} from '@huma-finance/shared'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
+
+import { TOKEN_2022_PROGRAM_ID } from '@solana/spl-token'
+import { useWallet } from '@solana/wallet-adapter-react'
+import {
+  useHumaProgram,
+  useTrancheMintAccounts,
+} from '@huma-finance/web-shared'
+import { Transaction } from '@solana/web3.js'
+import { useAppDispatch, useAppSelector } from '../../../hooks/useRedux'
+import { setStep } from '../../../store/widgets.reducers'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { selectWidgetState } from '../../../store/widgets.selectors'
+import { SolanaTxSendModal } from '../../SolanaTxSendModal'
+
+type Props = {
+  poolInfo: SolanaPoolInfo
+  selectedTranche: TrancheType
+}
+
+export function Transfer({
+  poolInfo,
+  selectedTranche,
+}: Props): React.ReactElement | null {
+  const dispatch = useAppDispatch()
+  const { publicKey } = useWallet()
+  const { redeemShares } = useAppSelector(selectWidgetState)
+  const { mintAccount } = useTrancheMintAccounts(poolInfo, selectedTranche)
+  const [transaction, setTransaction] = useState<Transaction>()
+  const program = useHumaProgram(poolInfo.chainId)
+  const redeemBN = useMemo(() => {
+    if (!mintAccount) {
+      return null
+    }
+    return SolanaTokenUtils.parseUnits(
+      String(redeemShares),
+      mintAccount?.decimals,
+    )
+  }, [mintAccount, redeemShares])
+
+  const handleSuccess = useCallback(() => {
+    dispatch(setStep(WIDGET_STEP.Done))
+  }, [dispatch])
+
+  useEffect(() => {
+    async function getTx() {
+      if (!publicKey || !redeemBN || transaction) {
+        return
+      }
+
+      const {
+        seniorTrancheATA,
+        juniorTrancheATA,
+        poolSeniorTrancheATA,
+        poolJuniorTrancheATA,
+      } = getTokenAccounts(poolInfo, publicKey)
+      const tx = await program.methods
+        .addRedemptionRequest(redeemBN)
+        .accountsPartial({
+          lender: publicKey,
+          humaConfig: poolInfo.humaConfig,
+          poolConfig: poolInfo.poolConfig,
+          trancheMint:
+            selectedTranche === 'senior'
+              ? poolInfo.seniorTrancheMint
+              : poolInfo.juniorTrancheMint,
+          poolTrancheToken:
+            selectedTranche === 'senior'
+              ? poolSeniorTrancheATA
+              : poolJuniorTrancheATA,
+          lenderTrancheToken:
+            selectedTranche === 'senior' ? seniorTrancheATA : juniorTrancheATA,
+          tokenProgram: TOKEN_2022_PROGRAM_ID,
+        })
+        .transaction()
+
+      setTransaction(tx)
+    }
+    getTx()
+  }, [
+    poolInfo,
+    program.methods,
+    publicKey,
+    redeemBN,
+    selectedTranche,
+    transaction,
+  ])
+
+  return (
+    <SolanaTxSendModal
+      tx={transaction}
+      chainId={poolInfo.chainId}
+      handleSuccess={handleSuccess}
+    />
+  )
+}

package/src/components/Lend/solanaAddRedemption/4-Done.tsx

@@ -0,0 +1,29 @@
+import { formatNumber, SolanaPoolInfo } from '@huma-finance/shared'
+import React from 'react'
+
+import { useAppSelector } from '../../../hooks/useRedux'
+import { selectWidgetState } from '../../../store/widgets.selectors'
+import { SolanaTxDoneModal } from '../../SolanaTxDoneModal'
+
+type Props = {
+  poolInfo: SolanaPoolInfo
+  handleAction: () => void
+}
+
+export function Done({ poolInfo, handleAction }: Props): React.ReactElement {
+  const { redeemShares, solanaSignature } = useAppSelector(selectWidgetState)
+
+  const content = [
+    `${formatNumber(redeemShares)} shares requested for redemption`,
+  ]
+
+  return (
+    <SolanaTxDoneModal
+      handleAction={handleAction}
+      content={content}
+      chainId={poolInfo.chainId}
+      solanaSignature={solanaSignature}
+      buttonText='DONE'
+    />
+  )
+}

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

@@ -0,0 +1,140 @@
+import { SolanaPoolInfo, TrancheType } from '@huma-finance/shared'
+import {
+  SolanaPoolState,
+  useLenderAccounts,
+  useTrancheTokenAccounts,
+} from '@huma-finance/web-shared'
+import React, { useEffect, useState } from 'react'
+import { useDispatch } from 'react-redux'
+
+import { BN } from '@coral-xyz/anchor'
+import { useAppSelector } from '../../../hooks/useRedux'
+import { selectWidgetState } from '../../../store/widgets.selectors'
+import { WidgetWrapper } from '../../WidgetWrapper'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { ChooseAmount } from './2-ChooseAmount'
+import { setStep } from '../../../store/widgets.reducers'
+import { ErrorModal } from '../../ErrorModal'
+import { ChooseTranche } from './1-ChooseTranche'
+import { Done } from './4-Done'
+import { Transfer } from './3-Transfer'
+
+/**
+ * Lend pool supply props
+ * @typedef {Object} SolanaLendAddRedemptionProps
+ * @property {SolanaPoolInfo} poolInfo The metadata of the pool.
+ * @property {SolanaPoolState} poolState The current state config of the pool. * @property {function():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 SolanaLendAddRedemptionProps {
+  poolInfo: SolanaPoolInfo
+  poolState: SolanaPoolState
+  handleClose: () => void
+  handleSuccess?: () => void
+}
+
+export function SolanaLendAddRedemption({
+  poolInfo,
+  poolState,
+  handleClose,
+  handleSuccess,
+}: SolanaLendAddRedemptionProps): React.ReactElement | null {
+  const dispatch = useDispatch()
+  const {
+    seniorLenderStateAccount,
+    juniorLenderStateAccount,
+    loading: isLoadingLenderAccounts,
+  } = useLenderAccounts(poolInfo.chainId, poolInfo.poolName)
+  const {
+    seniorTokenAccount,
+    juniorTokenAccount,
+    loading: isLoadingTokenAccounts,
+  } = useTrancheTokenAccounts(poolInfo)
+  const { step, errorMessage } = useAppSelector(selectWidgetState)
+  const [selectedTranche, setSelectedTranche] = useState<TrancheType>()
+
+  useEffect(() => {
+    if (!step && !isLoadingLenderAccounts && !isLoadingTokenAccounts) {
+      const seniorTrancheShares = new BN(seniorTokenAccount?.amount)
+      const juniorTrancheShares = new BN(juniorTokenAccount?.amount)
+
+      if (juniorTrancheShares.gtn(0) && seniorTrancheShares.lten(0)) {
+        setSelectedTranche('junior')
+        dispatch(setStep(WIDGET_STEP.ChooseAmount))
+        return
+      }
+
+      if (seniorTrancheShares.gtn(0) && juniorTrancheShares.lten(0)) {
+        setSelectedTranche('senior')
+        dispatch(setStep(WIDGET_STEP.ChooseAmount))
+        return
+      }
+
+      if (seniorTrancheShares.gtn(0) && juniorTrancheShares.gtn(0)) {
+        dispatch(setStep(WIDGET_STEP.ChooseTranche))
+      }
+    }
+  }, [
+    dispatch,
+    step,
+    isLoadingLenderAccounts,
+    isLoadingTokenAccounts,
+    seniorTokenAccount?.amount,
+    juniorTokenAccount?.amount,
+  ])
+
+  const title = 'Redemption'
+  if (isLoadingLenderAccounts || isLoadingTokenAccounts) {
+    return (
+      <WidgetWrapper
+        isOpen
+        isLoading
+        loadingTitle={title}
+        handleClose={handleClose}
+        handleSuccess={handleSuccess}
+      />
+    )
+  }
+
+  return (
+    <WidgetWrapper
+      isOpen
+      loadingTitle={title}
+      handleClose={handleClose}
+      handleSuccess={handleSuccess}
+    >
+      {step === WIDGET_STEP.ChooseTranche && (
+        <ChooseTranche
+          selectedTranche={selectedTranche}
+          changeTranche={setSelectedTranche}
+        />
+      )}
+      {step === WIDGET_STEP.ChooseAmount && selectedTranche && (
+        <ChooseAmount
+          poolInfo={poolInfo}
+          poolState={poolState}
+          lenderState={
+            selectedTranche === 'senior'
+              ? seniorLenderStateAccount
+              : juniorLenderStateAccount
+          }
+          selectedTranche={selectedTranche}
+        />
+      )}
+      {step === WIDGET_STEP.Transfer && selectedTranche && (
+        <Transfer poolInfo={poolInfo} selectedTranche={selectedTranche} />
+      )}
+      {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/solanaCancelRedemption/1-ChooseTranche.tsx

@@ -0,0 +1,114 @@
+import { TrancheType } from '@huma-finance/shared'
+import {
+  css,
+  FormControl,
+  FormControlLabel,
+  FormLabel,
+  Radio,
+  RadioGroup,
+  useTheme,
+} from '@mui/material'
+import React from 'react'
+
+import { useAppDispatch } from '../../../hooks/useRedux'
+import { setStep } from '../../../store/widgets.reducers'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { BottomButton } from '../../BottomButton'
+import { WrapperModal } from '../../WrapperModal'
+
+type Props = {
+  selectedTranche: TrancheType | undefined
+  changeTranche: (tranche: TrancheType) => void
+}
+
+export function ChooseTranche({
+  selectedTranche,
+  changeTranche,
+}: Props): React.ReactElement | null {
+  const theme = useTheme()
+  const dispatch = useAppDispatch()
+
+  const styles = {
+    subTitle: css`
+      color: ${theme.palette.text.primary} !important;
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 150%;
+      letter-spacing: 0.15px;
+      margin-top: ${theme.spacing(5)};
+      margin-left: ${theme.spacing(2)};
+    `,
+    radioGroup: css`
+      margin-left: ${theme.spacing(3)};
+      margin-top: ${theme.spacing(3)};
+    `,
+    formControl: css`
+      margin-bottom: ${theme.spacing(1)};
+
+      .MuiFormControlLabel-label {
+        color: ${theme.palette.text.primary};
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 150%;
+        letter-spacing: 0.15px;
+      }
+    `,
+  }
+
+  const handleNext = () => {
+    dispatch(setStep(WIDGET_STEP.ChooseAmount))
+  }
+
+  const items: {
+    label: string
+    value: TrancheType
+  }[] = [
+    {
+      label: 'Senior',
+      value: 'senior',
+    },
+    {
+      label: 'Junior',
+      value: 'junior',
+    },
+  ]
+
+  return (
+    <WrapperModal title='Cancel Redemption'>
+      <FormControl>
+        <FormLabel css={styles.subTitle}>Select Tranche Type</FormLabel>
+        <RadioGroup
+          aria-labelledby='buttons-group-label'
+          name='radio-buttons-group'
+          css={styles.radioGroup}
+          onChange={(e) => changeTranche(e.target.value as TrancheType)}
+        >
+          {items.map((item) => (
+            <FormControlLabel
+              key={item.label}
+              value={item.value}
+              control={
+                <Radio
+                  sx={{
+                    '& .MuiSvgIcon-root': {
+                      fontSize: 24,
+                    },
+                  }}
+                />
+              }
+              label={item.label}
+              css={styles.formControl}
+            />
+          ))}
+        </RadioGroup>
+      </FormControl>
+      <BottomButton
+        variant='contained'
+        disabled={!selectedTranche}
+        onClick={handleNext}
+      >
+        NEXT
+      </BottomButton>
+    </WrapperModal>
+  )
+}

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

@@ -0,0 +1,99 @@
+import {
+  getTokenAccounts,
+  SolanaPoolInfo,
+  TrancheType,
+} from '@huma-finance/shared'
+import React, { useCallback, useEffect, useState } from 'react'
+
+import { TOKEN_2022_PROGRAM_ID } from '@solana/spl-token'
+import { useWallet } from '@solana/wallet-adapter-react'
+import { LenderStateAccount, useHumaProgram } from '@huma-finance/web-shared'
+import { Transaction } from '@solana/web3.js'
+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
+  lenderState: LenderStateAccount | null | undefined
+  lenderStatePDA: string | null | undefined
+  selectedTranche: TrancheType
+}
+
+export function Transfer({
+  poolInfo,
+  lenderState,
+  lenderStatePDA,
+  selectedTranche,
+}: Props): React.ReactElement | null {
+  const dispatch = useAppDispatch()
+  const { publicKey } = useWallet()
+  const [transaction, setTransaction] = useState<Transaction>()
+  const program = useHumaProgram(poolInfo.chainId)
+
+  const handleSuccess = useCallback(() => {
+    dispatch(setStep(WIDGET_STEP.Done))
+  }, [dispatch])
+
+  useEffect(() => {
+    async function getTx() {
+      if (!publicKey || !lenderState || !lenderStatePDA || transaction) {
+        return
+      }
+
+      const {
+        seniorTrancheATA,
+        juniorTrancheATA,
+        poolSeniorTrancheATA,
+        poolJuniorTrancheATA,
+      } = getTokenAccounts(poolInfo, publicKey)
+      const tx = await program.methods
+        .cancelRedemptionRequest(
+          lenderState.redemptionRecord.numSharesRequested,
+        )
+        .accountsPartial({
+          lender: publicKey,
+          humaConfig: poolInfo.humaConfig,
+          poolConfig: poolInfo.poolConfig,
+          trancheMint:
+            selectedTranche === 'senior'
+              ? poolInfo.seniorTrancheMint
+              : poolInfo.juniorTrancheMint,
+          trancheState:
+            selectedTranche === 'senior'
+              ? poolInfo.seniorTrancheState
+              : poolInfo.juniorTrancheState,
+          lenderState: lenderStatePDA,
+          poolAuthority: poolInfo.poolAuthority,
+          poolTrancheToken:
+            selectedTranche === 'senior'
+              ? poolSeniorTrancheATA
+              : poolJuniorTrancheATA,
+          lenderTrancheToken:
+            selectedTranche === 'senior' ? seniorTrancheATA : juniorTrancheATA,
+          tokenProgram: TOKEN_2022_PROGRAM_ID,
+        })
+        .transaction()
+
+      setTransaction(tx)
+    }
+    getTx()
+  }, [
+    lenderState,
+    lenderStatePDA,
+    poolInfo,
+    program.methods,
+    publicKey,
+    selectedTranche,
+    transaction,
+  ])
+
+  return (
+    <SolanaTxSendModal
+      tx={transaction}
+      chainId={poolInfo.chainId}
+      handleSuccess={handleSuccess}
+    />
+  )
+}

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

@@ -0,0 +1,55 @@
+import {
+  formatNumber,
+  SolanaPoolInfo,
+  SolanaTokenUtils,
+  TrancheType,
+} from '@huma-finance/shared'
+import React from 'react'
+
+import {
+  LenderStateAccount,
+  useTrancheMintAccounts,
+} from '@huma-finance/web-shared'
+import { SolanaTxDoneModal } from '../../SolanaTxDoneModal'
+import { useAppSelector } from '../../../hooks/useRedux'
+import { selectWidgetState } from '../../../store/widgets.selectors'
+
+type Props = {
+  poolInfo: SolanaPoolInfo
+  lenderState: LenderStateAccount | null | undefined
+  selectedTranche: TrancheType
+  handleAction: () => void
+}
+
+export function Done({
+  poolInfo,
+  lenderState,
+  selectedTranche,
+  handleAction,
+}: Props): React.ReactElement | null {
+  const { mintAccount, loading: isLoadingTrancheMintAccounts } =
+    useTrancheMintAccounts(poolInfo, selectedTranche)
+  const { solanaSignature } = useAppSelector(selectWidgetState)
+
+  const content =
+    !lenderState || isLoadingTrancheMintAccounts || !mintAccount
+      ? ['']
+      : [
+          `Your request to cancel the redemption of ${formatNumber(
+            SolanaTokenUtils.formatUnits(
+              lenderState.redemptionRecord.numSharesRequested,
+              mintAccount.decimals,
+            ),
+          )} shares has been successfully processed.`,
+        ]
+
+  return (
+    <SolanaTxDoneModal
+      handleAction={handleAction}
+      content={content}
+      chainId={poolInfo.chainId}
+      solanaSignature={solanaSignature}
+      buttonText='DONE'
+    />
+  )
+}

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

@@ -0,0 +1,152 @@
+import { SolanaPoolInfo, TrancheType } from '@huma-finance/shared'
+import { useLenderAccounts } from '@huma-finance/web-shared'
+import React, { useEffect, useState } from 'react'
+import { useDispatch } from 'react-redux'
+
+import { BN } from '@coral-xyz/anchor'
+import { useAppSelector } from '../../../hooks/useRedux'
+import { selectWidgetState } from '../../../store/widgets.selectors'
+import { WidgetWrapper } from '../../WidgetWrapper'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { setStep } from '../../../store/widgets.reducers'
+import { ErrorModal } from '../../ErrorModal'
+import { Transfer } from './2-Transfer'
+import { ChooseTranche } from './1-ChooseTranche'
+import { Done } from './3-Done'
+
+/**
+ * Lend pool supply props
+ * @typedef {Object} SolanaLendCancelRedemptionProps
+ * @property {SolanaPoolInfo} poolInfo The metadata of the pool.
+ * @property {SolanaPoolState} poolState The current state config of the pool. * @property {function():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 SolanaLendCancelRedemptionProps {
+  poolInfo: SolanaPoolInfo
+  handleClose: () => void
+  handleSuccess?: () => void
+}
+
+export function SolanaLendCancelRedemption({
+  poolInfo,
+  handleClose,
+  handleSuccess,
+}: SolanaLendCancelRedemptionProps): React.ReactElement | null {
+  const dispatch = useDispatch()
+  const {
+    seniorLenderStateAccount,
+    juniorLenderStateAccount,
+    juniorLenderStateAccountPDA,
+    seniorLenderStateAccountPDA,
+    loading: isLoadingLenderAccounts,
+  } = useLenderAccounts(poolInfo.chainId, poolInfo.poolName)
+  const { step, errorMessage } = useAppSelector(selectWidgetState)
+  const [selectedTranche, setSelectedTranche] = useState<TrancheType>()
+
+  useEffect(() => {
+    if (!step && !isLoadingLenderAccounts) {
+      const seniorTrancheSharesRequested = new BN(
+        seniorLenderStateAccount?.redemptionRecord.numSharesRequested,
+      )
+      const juniorTrancheSharesRequested = new BN(
+        juniorLenderStateAccount?.redemptionRecord.numSharesRequested,
+      )
+
+      if (
+        juniorTrancheSharesRequested.gtn(0) &&
+        seniorTrancheSharesRequested.lten(0)
+      ) {
+        setSelectedTranche('junior')
+        dispatch(setStep(WIDGET_STEP.Transfer))
+        return
+      }
+
+      if (
+        seniorTrancheSharesRequested.gtn(0) &&
+        juniorTrancheSharesRequested.lten(0)
+      ) {
+        setSelectedTranche('senior')
+        dispatch(setStep(WIDGET_STEP.Transfer))
+        return
+      }
+
+      if (
+        seniorTrancheSharesRequested.gtn(0) &&
+        juniorTrancheSharesRequested.gtn(0)
+      ) {
+        dispatch(setStep(WIDGET_STEP.ChooseTranche))
+      }
+    }
+  }, [
+    dispatch,
+    step,
+    isLoadingLenderAccounts,
+    seniorLenderStateAccount?.redemptionRecord.numSharesRequested,
+    juniorLenderStateAccount?.redemptionRecord.numSharesRequested,
+  ])
+
+  const title = 'Cancel Redemption'
+  if (isLoadingLenderAccounts) {
+    return (
+      <WidgetWrapper
+        isOpen
+        isLoading
+        loadingTitle={title}
+        handleClose={handleClose}
+        handleSuccess={handleSuccess}
+      />
+    )
+  }
+
+  return (
+    <WidgetWrapper
+      isOpen
+      loadingTitle={title}
+      handleClose={handleClose}
+      handleSuccess={handleSuccess}
+    >
+      {step === WIDGET_STEP.ChooseTranche && (
+        <ChooseTranche
+          selectedTranche={selectedTranche}
+          changeTranche={setSelectedTranche}
+        />
+      )}
+      {step === WIDGET_STEP.Transfer && selectedTranche && (
+        <Transfer
+          poolInfo={poolInfo}
+          lenderState={
+            selectedTranche === 'senior'
+              ? seniorLenderStateAccount
+              : juniorLenderStateAccount
+          }
+          lenderStatePDA={
+            selectedTranche === 'senior'
+              ? seniorLenderStateAccountPDA
+              : juniorLenderStateAccountPDA
+          }
+          selectedTranche={selectedTranche}
+        />
+      )}
+      {step === WIDGET_STEP.Done && selectedTranche && (
+        <Done
+          poolInfo={poolInfo}
+          lenderState={
+            selectedTranche === 'senior'
+              ? seniorLenderStateAccount
+              : juniorLenderStateAccount
+          }
+          selectedTranche={selectedTranche}
+          handleAction={handleClose}
+        />
+      )}
+      {step === WIDGET_STEP.Error && (
+        <ErrorModal
+          title={title}
+          errorReason='Sorry there was an error'
+          errorMessage={errorMessage}
+          handleOk={handleClose}
+        />
+      )}
+    </WidgetWrapper>
+  )
+}