@huma-finance/widgets 0.0.62-beta.612 → 0.0.62-beta.616

package/src/components/Lend/solanaAddRedemption/2-ChooseAmount.tsx

@@ -1,183 +0,0 @@
-import {
-  formatNumber,
-  SolanaPoolInfo,
-  SolanaTokenUtils,
-  timestampToLL,
-  TrancheType,
-} from '@huma-finance/shared'
-import {
-  LenderStateAccount,
-  SolanaPoolState,
-  useTrancheMintAccounts,
-  useTrancheTokenAccounts,
-} from '@huma-finance/web-shared'
-import dayjs from 'dayjs'
-import React, { useEffect, useMemo, useState } from 'react'
-
-import { BN } from '@coral-xyz/anchor'
-import { useAppDispatch } from '../../../hooks/useRedux'
-import {
-  setError,
-  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: SolanaPoolInfo
-  poolState: SolanaPoolState
-  selectedTranche: TrancheType
-  lenderState: LenderStateAccount | null | undefined
-}
-
-export function ChooseAmount({
-  poolInfo,
-  poolState,
-  selectedTranche,
-  lenderState,
-}: Props): React.ReactElement {
-  const dispatch = useAppDispatch()
-  const { symbol } = poolInfo.underlyingMint
-  const [currentAmount, setCurrentAmount] = useState<number>(0)
-  const [currentShares, setCurrentShares] = useState<number>(0)
-  const { mintAccount, loading: isLoadingTrancheMintAccounts } =
-    useTrancheMintAccounts(poolInfo, selectedTranche)
-  const {
-    seniorTokenAccount,
-    juniorTokenAccount,
-    loading: isLoadingTokenAccounts,
-  } = useTrancheTokenAccounts(poolInfo)
-
-  const maxSharesFormatted = useMemo(() => {
-    if (!mintAccount?.decimals) {
-      return 0
-    }
-
-    return SolanaTokenUtils.formatUnits(
-      selectedTranche === 'senior'
-        ? new BN(seniorTokenAccount?.amount)
-        : new BN(juniorTokenAccount?.amount),
-      mintAccount.decimals,
-    )
-  }, [
-    mintAccount,
-    juniorTokenAccount?.amount,
-    selectedTranche,
-    seniorTokenAccount?.amount,
-  ])
-
-  const sharePrice = useMemo(() => {
-    if (!mintAccount?.decimals || !mintAccount?.supply) {
-      return 0
-    }
-
-    const mintSupplyFormatted = Number(
-      SolanaTokenUtils.formatUnits(
-        new BN(mintAccount.supply),
-        mintAccount.decimals,
-      ),
-    )
-
-    if (mintSupplyFormatted === 0) {
-      return 0
-    }
-
-    const seniorTrancheAssetsFormatted = Number(
-      SolanaTokenUtils.formatUnits(
-        new BN(poolState?.seniorTrancheAssets),
-        mintAccount.decimals,
-      ),
-    )
-
-    if (selectedTranche === 'senior') {
-      return seniorTrancheAssetsFormatted / mintSupplyFormatted
-    }
-
-    const juniorTrancheAssetsFormatted = Number(
-      SolanaTokenUtils.formatUnits(
-        new BN(poolState?.juniorTrancheAssets),
-        mintAccount.decimals,
-      ),
-    )
-
-    return juniorTrancheAssetsFormatted / mintSupplyFormatted
-  }, [
-    mintAccount?.decimals,
-    mintAccount?.supply,
-    poolState?.juniorTrancheAssets,
-    poolState?.seniorTrancheAssets,
-    selectedTranche,
-  ])
-
-  useEffect(() => {
-    if (
-      poolState?.withdrawalLockupPeriodDays &&
-      poolState?.epochEndTime &&
-      lenderState
-    ) {
-      const SECONDS_IN_A_DAY = 24 * 60 * 60
-      const lastDepositTime = Number(lenderState.depositRecord.lastDepositTime)
-      const lockupEndTime =
-        lastDepositTime +
-        poolState.withdrawalLockupPeriodDays * SECONDS_IN_A_DAY
-      if (poolState.epochEndTime < lockupEndTime) {
-        const lockupEndTimeDayjs = dayjs.unix(lockupEndTime).date(1)
-        dispatch(setStep(WIDGET_STEP.Error))
-        dispatch(
-          setError({
-            errorReason: 'Redemption too soon',
-            errorMessage: `Your last deposit was on ${timestampToLL(
-              lastDepositTime,
-            )}. You can redeem on ${timestampToLL(lockupEndTimeDayjs.unix())}.`,
-          }),
-        )
-      }
-    }
-  }, [
-    dispatch,
-    lenderState,
-    poolState.epochEndTime,
-    poolState.withdrawalLockupPeriodDays,
-  ])
-
-  const handleChangeShares = (newShares: number) => {
-    const amount = Number(newShares) * sharePrice
-    setCurrentShares(Number(newShares))
-    setCurrentAmount(amount)
-    dispatch(setRedeemShares(Number(newShares)))
-    dispatch(setRedeemAmount(amount))
-  }
-
-  const handleAction = () => {
-    dispatch(setStep(WIDGET_STEP.Transfer))
-  }
-
-  if (
-    isLoadingTokenAccounts ||
-    isLoadingTrancheMintAccounts ||
-    !lenderState ||
-    poolState?.withdrawalLockupPeriodDays === undefined || // withdrawalLockupPeriodDays can be 0
-    !poolState?.epochEndTime
-  ) {
-    return <LoadingModal title='Redemption' />
-  }
-
-  return (
-    <InputAmountModal
-      title='Redemption'
-      subTitle={`Enter number of shares to redeem from the ${selectedTranche} tranche`}
-      tokenSymbol={symbol}
-      currentAmount={currentShares}
-      handleChangeAmount={handleChangeShares}
-      maxAmount={maxSharesFormatted}
-      infos={[`${String(formatNumber(currentAmount))} ${symbol}`]}
-      maxAmountTitle={`${formatNumber(maxSharesFormatted)} Shares`}
-      suffix='Shares'
-      handleAction={handleAction}
-      actionText='REQUEST'
-    />
-  )
-}

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

@@ -1,102 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,140 +0,0 @@
-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

@@ -1,114 +0,0 @@
-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

@@ -1,99 +0,0 @@
-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}
-    />
-  )
-}