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

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

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

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

package/src/components/Lend/solanaSupply/1-ChooseTranche.tsx

@@ -1,116 +0,0 @@
-import { TrancheType, UnderlyingTokenInfo } 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 = {
-  poolUnderlyingToken: UnderlyingTokenInfo
-  selectedTranche: TrancheType | undefined
-  changeTranche: (tranche: TrancheType) => void
-}
-
-export function ChooseTranche({
-  poolUnderlyingToken,
-  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={`Supply ${poolUnderlyingToken.symbol}`}>
-      <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/solanaSupply/3-ChooseAmount.tsx

@@ -1,130 +0,0 @@
-import {
-  formatNumber,
-  SolanaPoolInfo,
-  SolanaTokenUtils,
-  TrancheType,
-} from '@huma-finance/shared'
-import { SolanaPoolState } from '@huma-finance/web-shared'
-import React, { useMemo, useState } from 'react'
-import { BN } from '@coral-xyz/anchor'
-import { Account } from '@solana/spl-token'
-import { useAppDispatch } from '../../../hooks/useRedux'
-import { setStep, setSupplyAmount } from '../../../store/widgets.reducers'
-import { WIDGET_STEP } from '../../../store/widgets.store'
-import { InputAmountModal } from '../../InputAmountModal'
-
-type Props = {
-  poolInfo: SolanaPoolInfo
-  poolState: SolanaPoolState
-  tokenAccount: Account
-  selectedTranche: TrancheType | undefined
-  isUniTranche: boolean
-}
-
-export function ChooseAmount({
-  poolInfo,
-  poolState,
-  tokenAccount,
-  selectedTranche,
-  isUniTranche,
-}: Props): React.ReactElement | null {
-  const dispatch = useAppDispatch()
-  const { symbol, decimals } = poolInfo.underlyingMint
-  const [currentAmount, setCurrentAmount] = useState<number | string>(0)
-  const balance = useMemo(
-    () => new BN(tokenAccount.amount),
-    [tokenAccount.amount],
-  )
-
-  const { juniorAvailableCapBN, seniorAvailableCapBN } = useMemo(() => {
-    const {
-      maxSeniorJuniorRatio,
-      liquidityCap,
-      seniorTrancheAssets,
-      juniorTrancheAssets,
-    } = poolState
-    const juniorTrancheAssetsBN = new BN(juniorTrancheAssets)
-    const seniorTrancheAssetsBN = new BN(seniorTrancheAssets)
-    const totalDeployedBN = seniorTrancheAssetsBN.add(juniorTrancheAssetsBN)
-    const totalAvailableCapBN = new BN(liquidityCap).sub(totalDeployedBN)
-    const maxSeniorAssetsBN = juniorTrancheAssetsBN.muln(maxSeniorJuniorRatio)
-    let seniorAvailableCapBN = maxSeniorAssetsBN.sub(seniorTrancheAssetsBN)
-    seniorAvailableCapBN = seniorAvailableCapBN.gt(totalAvailableCapBN)
-      ? totalAvailableCapBN
-      : seniorAvailableCapBN
-
-    return {
-      juniorAvailableCapBN: totalAvailableCapBN.sub(seniorAvailableCapBN),
-      seniorAvailableCapBN,
-    }
-  }, [poolState])
-
-  const handleChangeAmount = (newAmount: number) => {
-    setCurrentAmount(newAmount)
-    dispatch(setSupplyAmount(Number(newAmount)))
-  }
-
-  const handleAction = () => {
-    dispatch(setStep(WIDGET_STEP.Transfer))
-  }
-
-  const getTrancheCap = () => {
-    if (selectedTranche === 'junior') {
-      return juniorAvailableCapBN
-    }
-    return seniorAvailableCapBN
-  }
-
-  const getMinAmount = (): number => {
-    const minAmount = poolState.minDepositAmount
-      ? SolanaTokenUtils.formatUnits(
-          new BN(poolState.minDepositAmount),
-          decimals,
-        )
-      : 0
-    return Math.max(0, Math.ceil(Number(minAmount)))
-  }
-
-  const getMaxAmount = (): BN => {
-    const trancheCap = getTrancheCap()
-    return balance.gt(trancheCap) ? trancheCap : balance
-  }
-
-  const getInfos = () => {
-    const trancheCap = getTrancheCap()
-    const currentAmountBN = SolanaTokenUtils.parseUnits(
-      String(currentAmount),
-      decimals,
-    )
-    const remainingCap = trancheCap.sub(currentAmountBN)
-
-    if (remainingCap.ltn(0)) {
-      return ['0 remaining capacity']
-    }
-    return [
-      `${formatNumber(
-        SolanaTokenUtils.formatUnits(remainingCap, decimals),
-      )} remaining capacity`,
-    ]
-  }
-
-  return (
-    <InputAmountModal
-      title='Enter Amount'
-      subTitle={`Depositing to ${
-        isUniTranche ? 'uni tranche' : selectedTranche
-      } tranche`}
-      tokenSymbol={symbol}
-      currentAmount={currentAmount}
-      handleChangeAmount={handleChangeAmount}
-      minimumAmount={getMinAmount()}
-      maxAmount={Number(SolanaTokenUtils.formatUnits(getMaxAmount(), decimals))}
-      maxAmountTitle={`${formatNumber(
-        SolanaTokenUtils.formatUnits(balance, decimals),
-      )} balance`}
-      infos={getInfos()}
-      handleAction={handleAction}
-      actionText='SUPPLY'
-    />
-  )
-}

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

@@ -1,89 +0,0 @@
-import {
-  getTokenAccounts,
-  SolanaPoolInfo,
-  SolanaTokenUtils,
-  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 { useHumaProgram } 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 { supplyAmount } = useAppSelector(selectWidgetState)
-  const { decimals } = poolInfo.underlyingMint
-  const supplyBigNumber = SolanaTokenUtils.parseUnits(
-    String(supplyAmount),
-    decimals,
-  )
-  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 || transaction) {
-        return
-      }
-
-      const { underlyingTokenATA, seniorTrancheATA, juniorTrancheATA } =
-        getTokenAccounts(poolInfo, publicKey)
-      const tx = await program.methods
-        .deposit(supplyBigNumber)
-        .accountsPartial({
-          depositor: publicKey,
-          poolConfig: poolInfo.poolConfig,
-          underlyingMint: poolInfo.underlyingMint.address,
-          trancheMint:
-            selectedTranche === 'senior'
-              ? poolInfo.seniorTrancheMint
-              : poolInfo.juniorTrancheMint,
-          poolUnderlyingToken: poolInfo.poolUnderlyingTokenAccount,
-          depositorUnderlyingToken: underlyingTokenATA,
-          depositorTrancheToken:
-            selectedTranche === 'senior' ? seniorTrancheATA : juniorTrancheATA,
-          humaConfig: poolInfo.humaConfig,
-          tokenProgram: TOKEN_2022_PROGRAM_ID,
-        })
-        .transaction()
-
-      setTransaction(tx)
-    }
-    getTx()
-  }, [
-    poolInfo,
-    program.methods,
-    publicKey,
-    selectedTranche,
-    supplyBigNumber,
-    transaction,
-  ])
-
-  return (
-    <SolanaTxSendModal
-      tx={transaction}
-      chainId={poolInfo.chainId}
-      handleSuccess={handleSuccess}
-    />
-  )
-}

package/src/components/Lend/solanaSupply/5-Success.tsx

@@ -1,50 +0,0 @@
-import { formatMoney, SolanaPoolInfo, timeUtil } from '@huma-finance/shared'
-import { SolanaPoolState } from '@huma-finance/web-shared'
-import moment from 'moment'
-import React from 'react'
-
-import { selectWidgetState } from '../../../store/widgets.selectors'
-import { useAppSelector } from '../../../hooks/useRedux'
-import { SolanaTxDoneModal } from '../../SolanaTxDoneModal'
-
-type Props = {
-  poolInfo: SolanaPoolInfo
-  poolState: SolanaPoolState
-  handleAction: () => void
-}
-
-export function Success({
-  poolInfo,
-  poolState,
-  handleAction,
-}: Props): React.ReactElement {
-  const { supplyAmount, solanaSignature } = useAppSelector(selectWidgetState)
-  const { symbol } = poolInfo.underlyingMint
-
-  const content = [
-    `You successfully supplied ${formatMoney(supplyAmount)} ${symbol}.`,
-  ]
-
-  const getSubContent = () => {
-    const currentTime = moment().add(
-      poolState.withdrawalLockupPeriodDays,
-      'days',
-    )
-    return [
-      `First redemption date: ${timeUtil.timestampToLL(
-        currentTime.unix(),
-      )}. You can redeem end of each month after.`,
-    ]
-  }
-
-  return (
-    <SolanaTxDoneModal
-      handleAction={handleAction}
-      content={content}
-      subContent={getSubContent()}
-      chainId={poolInfo.chainId}
-      solanaSignature={solanaSignature}
-      buttonText='DONE'
-    />
-  )
-}