@huma-finance/widgets 0.0.62-beta.630 → 0.0.62-beta.633

package/src/components/CreditLine/solanaBorrow/index.tsx

@@ -1,90 +0,0 @@
-import { SolanaPoolInfo } from '@huma-finance/shared'
-import { SolanaPoolState, useBorrowerAccounts } from '@huma-finance/web-shared'
-import React, { useEffect } from 'react'
-import { useDispatch } from 'react-redux'
-
-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 { ChooseAmount } from './1-ChooseAmount'
-import { Transfer } from './2-Transfer'
-import { Done } from './3-Done'
-
-/**
- * Lend pool supply props
- * @typedef {Object} SolanaBorrowProps
- * @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 SolanaBorrowProps {
-  poolInfo: SolanaPoolInfo
-  poolState: SolanaPoolState
-  handleClose: () => void
-  handleSuccess?: () => void
-}
-
-export function SolanaBorrow({
-  poolInfo,
-  poolState,
-  handleClose,
-  handleSuccess,
-}: SolanaBorrowProps): React.ReactElement | null {
-  const dispatch = useDispatch()
-  const { creditConfigAccount, loading: isLoadingBorrowerAccounts } =
-    useBorrowerAccounts(poolInfo.chainId, poolInfo.poolName)
-  const { step, errorMessage } = useAppSelector(selectWidgetState)
-  useEffect(() => {
-    if (!step) {
-      dispatch(setStep(WIDGET_STEP.ChooseAmount))
-    }
-  }, [dispatch, step])
-
-  const title = 'Borrow'
-  if (isLoadingBorrowerAccounts) {
-    return (
-      <WidgetWrapper
-        isOpen
-        isLoading
-        loadingTitle={title}
-        handleClose={handleClose}
-        handleSuccess={handleSuccess}
-      />
-    )
-  }
-
-  return (
-    <WidgetWrapper
-      isOpen
-      loadingTitle={title}
-      handleClose={handleClose}
-      handleSuccess={handleSuccess}
-    >
-      {step === WIDGET_STEP.ChooseAmount && creditConfigAccount && (
-        <ChooseAmount
-          poolInfo={poolInfo}
-          creditConfigAccount={creditConfigAccount}
-        />
-      )}
-      {step === WIDGET_STEP.Transfer && <Transfer poolInfo={poolInfo} />}
-      {step === WIDGET_STEP.Done && (
-        <Done
-          poolInfo={poolInfo}
-          poolState={poolState}
-          handleAction={handleClose}
-        />
-      )}
-      {step === WIDGET_STEP.Error && (
-        <ErrorModal
-          title={title}
-          errorReason='Sorry there was an error'
-          errorMessage={errorMessage}
-          handleOk={handleClose}
-        />
-      )}
-    </WidgetWrapper>
-  )
-}

package/src/components/CreditLine/solanaPayment/1-ChooseAmount.tsx

@@ -1,75 +0,0 @@
-import {
-  formatNumber,
-  SolanaPoolInfo,
-  SolanaTokenUtils,
-} from '@huma-finance/shared'
-import { CreditStateAccount } from '@huma-finance/web-shared'
-import React, { useCallback, useEffect, useMemo, useState } from 'react'
-
-import { useAppDispatch } from '../../../hooks/useRedux'
-import { setPaymentAmount, setStep } from '../../../store/widgets.reducers'
-import { WIDGET_STEP } from '../../../store/widgets.store'
-import { InputAmountModal } from '../../InputAmountModal'
-
-type Props = {
-  poolInfo: SolanaPoolInfo
-  creditStateAccount: CreditStateAccount
-}
-
-export function ChooseAmount({
-  poolInfo,
-  creditStateAccount,
-}: Props): React.ReactElement {
-  const dispatch = useAppDispatch()
-  const { symbol, decimals } = poolInfo.underlyingMint
-  const [currentAmount, setCurrentAmount] = useState<number>(0)
-  const totalDueAmount = useMemo(
-    () =>
-      Number(
-        SolanaTokenUtils.formatUnits(
-          creditStateAccount.creditRecord.totalDueAmount,
-          decimals,
-        ),
-      ),
-    [creditStateAccount.creditRecord.totalDueAmount, decimals],
-  )
-  const payoffAmount = useMemo(
-    () =>
-      Number(
-        SolanaTokenUtils.formatUnits(
-          creditStateAccount.creditRecord.payoffAmount,
-          decimals,
-        ),
-      ),
-    [creditStateAccount.creditRecord.payoffAmount, decimals],
-  )
-
-  useEffect(() => {
-    setCurrentAmount(totalDueAmount)
-    dispatch(setPaymentAmount({ paymentAmount: totalDueAmount }))
-  }, [dispatch, totalDueAmount])
-
-  const handleChangeAmount = (newAmount: number) => {
-    setCurrentAmount(newAmount)
-    dispatch(setPaymentAmount({ paymentAmount: newAmount }))
-  }
-
-  const handleAction = useCallback(() => {
-    dispatch(setStep(WIDGET_STEP.Transfer))
-  }, [dispatch])
-
-  return (
-    <InputAmountModal
-      title='Make Payment'
-      subTitle='Choose Amount'
-      tokenSymbol={symbol}
-      currentAmount={currentAmount}
-      handleChangeAmount={handleChangeAmount}
-      maxAmount={payoffAmount}
-      maxAmountText='Pay Off'
-      infos={[`${formatNumber(totalDueAmount.toFixed(0))} Due`]}
-      handleAction={handleAction}
-      actionText='PAY'
-    />
-  )
-}

package/src/components/CreditLine/solanaPayment/2-Transfer.tsx

@@ -1,92 +0,0 @@
-import {
-  getCreditAccounts,
-  getTokenAccounts,
-  SolanaPoolInfo,
-  SolanaTokenUtils,
-} from '@huma-finance/shared'
-import React, { useCallback, useEffect, useState } from 'react'
-
-import { TOKEN_2022_PROGRAM_ID } from '@solana/spl-token'
-import { useConnection, useWallet } from '@solana/wallet-adapter-react'
-import { Transaction } from '@solana/web3.js'
-import { useHumaProgram } from '@huma-finance/web-shared'
-import { useAppDispatch, useAppSelector } from '../../../hooks/useRedux'
-import { SolanaTxSendModal } from '../../SolanaTxSendModal'
-import { setStep } from '../../../store/widgets.reducers'
-import { WIDGET_STEP } from '../../../store/widgets.store'
-import { selectWidgetState } from '../../../store/widgets.selectors'
-
-type Props = {
-  poolInfo: SolanaPoolInfo
-}
-
-export function Transfer({ poolInfo }: Props): React.ReactElement | null {
-  const dispatch = useAppDispatch()
-  const { wallet, publicKey } = useWallet()
-  const { connection } = useConnection()
-  const [transaction, setTransaction] = useState<Transaction>()
-  const program = useHumaProgram(poolInfo.chainId)
-  const { paymentAmount } = useAppSelector(selectWidgetState)
-  const { decimals } = poolInfo.underlyingMint
-
-  const handleSuccess = useCallback(() => {
-    dispatch(setStep(WIDGET_STEP.Done))
-  }, [dispatch])
-
-  useEffect(() => {
-    async function getTx() {
-      if (!wallet || !publicKey || !connection || !paymentAmount) {
-        return
-      }
-
-      const { underlyingTokenATA } = getTokenAccounts(poolInfo, publicKey)
-
-      const { creditConfigAccount, creditStateAccount } = getCreditAccounts(
-        poolInfo,
-        publicKey,
-      )
-      const paymentAmountBN = SolanaTokenUtils.parseUnits(
-        paymentAmount.toString(),
-        decimals,
-      )
-      const tx = await program.methods
-        .makePayment(paymentAmountBN)
-        .accountsPartial({
-          signer: publicKey,
-          humaConfig: poolInfo.humaConfig,
-          poolConfig: poolInfo.poolConfig,
-          poolState: poolInfo.poolState,
-          creditConfig: creditConfigAccount,
-          creditState: creditStateAccount,
-          poolAuthority: poolInfo.poolAuthority,
-          underlyingMint: poolInfo.underlyingMint.address,
-          poolUnderlyingToken: poolInfo.poolUnderlyingTokenAccount,
-          borrowerUnderlyingToken: underlyingTokenATA,
-          tokenProgram: TOKEN_2022_PROGRAM_ID,
-        })
-        .transaction()
-
-      setTransaction(tx)
-    }
-    getTx()
-  }, [
-    connection,
-    decimals,
-    dispatch,
-    paymentAmount,
-    poolInfo,
-    poolInfo.underlyingMint.address,
-    poolInfo.underlyingMint.decimals,
-    program.methods,
-    publicKey,
-    wallet,
-  ])
-
-  return (
-    <SolanaTxSendModal
-      tx={transaction}
-      chainId={poolInfo.chainId}
-      handleSuccess={handleSuccess}
-    />
-  )
-}

package/src/components/CreditLine/solanaPayment/3-Done.tsx

@@ -1,59 +0,0 @@
-import { formatNumber, SolanaPoolInfo } from '@huma-finance/shared'
-import React, { useEffect, useMemo, useState } from 'react'
-
-import { useConnection } from '@solana/wallet-adapter-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 { solanaSignature } = useAppSelector(selectWidgetState)
-  const { symbol } = poolInfo.underlyingMint
-  const { connection } = useConnection()
-  const [tokensPaid, setTokensPaid] = useState<number | null>(null)
-
-  useEffect(() => {
-    const fetchTokensPaid = async () => {
-      if (!solanaSignature) {
-        return
-      }
-
-      const txData = await connection.getTransaction(solanaSignature, {
-        maxSupportedTransactionVersion: 2,
-      })
-
-      const preTokenBalance =
-        txData?.meta?.preTokenBalances?.[1]?.uiTokenAmount?.uiAmount
-      const postTokenBalance =
-        txData?.meta?.postTokenBalances?.[1]?.uiTokenAmount?.uiAmount
-      if (preTokenBalance && postTokenBalance) {
-        setTokensPaid(preTokenBalance - postTokenBalance)
-      }
-    }
-
-    fetchTokensPaid()
-  }, [connection, solanaSignature])
-
-  const content = useMemo(() => {
-    if (tokensPaid !== null) {
-      return [`You successfully paid ${formatNumber(tokensPaid)} ${symbol}.`]
-    }
-
-    return ['Your payment to the pool was successful']
-  }, [tokensPaid, symbol])
-
-  return (
-    <SolanaTxDoneModal
-      handleAction={handleAction}
-      content={content}
-      chainId={poolInfo.chainId}
-      solanaSignature={solanaSignature}
-      buttonText='DONE'
-    />
-  )
-}

package/src/components/CreditLine/solanaPayment/index.tsx

@@ -1,83 +0,0 @@
-import { SolanaPoolInfo } from '@huma-finance/shared'
-import { useBorrowerAccounts } from '@huma-finance/web-shared'
-import React, { useEffect } from 'react'
-import { useDispatch } from 'react-redux'
-
-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 { ChooseAmount } from './1-ChooseAmount'
-import { Transfer } from './2-Transfer'
-import { Done } from './3-Done'
-
-/**
- * Lend pool supply props
- * @typedef {Object} SolanaPaymentProps
- * @property {SolanaPoolInfo} poolInfo The metadata of the pool.
- * @property {function():void|undefined} handleSuccess Optional function to notify that the lending pool supply action is successful.
- */
-export interface SolanaPaymentProps {
-  poolInfo: SolanaPoolInfo
-  handleClose: () => void
-  handleSuccess?: () => void
-}
-
-export function SolanaPayment({
-  poolInfo,
-  handleClose,
-  handleSuccess,
-}: SolanaPaymentProps): React.ReactElement | null {
-  const dispatch = useDispatch()
-  const { creditStateAccount, loading: isLoadingBorrowerAccounts } =
-    useBorrowerAccounts(poolInfo.chainId, poolInfo.poolName)
-  const { step, errorMessage } = useAppSelector(selectWidgetState)
-  useEffect(() => {
-    if (!step) {
-      dispatch(setStep(WIDGET_STEP.ChooseAmount))
-    }
-  }, [dispatch, step])
-
-  const title = 'Make Payment'
-  if (isLoadingBorrowerAccounts) {
-    return (
-      <WidgetWrapper
-        isOpen
-        isLoading
-        loadingTitle={title}
-        handleClose={handleClose}
-        handleSuccess={handleSuccess}
-      />
-    )
-  }
-
-  return (
-    <WidgetWrapper
-      isOpen
-      loadingTitle={title}
-      handleClose={handleClose}
-      handleSuccess={handleSuccess}
-    >
-      {step === WIDGET_STEP.ChooseAmount && creditStateAccount && (
-        <ChooseAmount
-          poolInfo={poolInfo}
-          creditStateAccount={creditStateAccount}
-        />
-      )}
-      {step === WIDGET_STEP.Transfer && <Transfer poolInfo={poolInfo} />}
-      {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/solanaAddRedemption/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='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/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?.toString() ?? 0)
-        : new BN(juniorTokenAccount?.amount?.toString() ?? 0),
-      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.toString()),
-        mintAccount.decimals,
-      ),
-    )
-
-    if (mintSupplyFormatted === 0) {
-      return 0
-    }
-
-    const seniorTrancheAssetsFormatted = Number(
-      SolanaTokenUtils.formatUnits(
-        new BN(poolState?.seniorTrancheAssets ?? 0),
-        mintAccount.decimals,
-      ),
-    )
-
-    if (selectedTranche === 'senior') {
-      return seniorTrancheAssetsFormatted / mintSupplyFormatted
-    }
-
-    const juniorTrancheAssetsFormatted = Number(
-      SolanaTokenUtils.formatUnits(
-        new BN(poolState?.juniorTrancheAssets ?? 0),
-        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'
-    />
-  )
-}