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

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

@@ -0,0 +1,86 @@
+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 title = 'Make Payment'
+  const dispatch = useDispatch()
+  const { step, errorMessage } = useAppSelector(selectWidgetState)
+  const { creditStateAccount } = useBorrowerAccounts(
+    poolInfo.chainId,
+    poolInfo.poolName,
+  )
+
+  useEffect(() => {
+    if (!step && creditStateAccount) {
+      dispatch(setStep(WIDGET_STEP.ChooseAmount))
+    }
+  }, [creditStateAccount, dispatch, step])
+
+  if (!creditStateAccount) {
+    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/InputAmountModal.tsx

@@ -20,6 +20,7 @@ type Props = {
   tokenSymbol: string
   suffix?: string
   currentAmount: number | string
+  minimumAmount?: number
   maxAmount: number | string
   maxAmountText?: string
   maxAmountTitle?: string
@@ -35,6 +36,7 @@ export function InputAmountModal({
   tokenSymbol,
   suffix: defaultSuffix,
   currentAmount,
+  minimumAmount,
   maxAmount,
   maxAmountText = 'MAX',
   maxAmountTitle,
@@ -91,6 +93,7 @@ export function InputAmountModal({
       font-size: 13px;
       line-height: 22px;
       letter-spacing: 0.46px;
+      white-space: nowrap;
     `,
     info: css`
       color: ${theme.palette.text.secondary};
@@ -125,6 +128,9 @@ export function InputAmountModal({
     if (!isEmpty(maxAmount) && Number(currentAmount) > Number(maxAmount)) {
       return true
     }
+    if (!isEmpty(minimumAmount) && Number(currentAmount) < minimumAmount!) {
+      return true
+    }
     return false
   }
 
@@ -157,7 +163,6 @@ export function InputAmountModal({
           />
         </Box>
       </Box>
-
       {infos && (
         <Box>
           {infos.map((info) => (
@@ -167,7 +172,13 @@ export function InputAmountModal({
           ))}
         </Box>
       )}
-
+      {!!minimumAmount && minimumAmount > 0 && (
+        <Box>
+          <Typography css={styles.info} key='minDeposit'>
+            Minimum deposit: {minimumAmount} {tokenSymbol}
+          </Typography>
+        </Box>
+      )}
       <BottomButton
         variant='contained'
         onClick={handleAction}

package/src/components/Lend/{supplyV2/components → components}/PersonaEvaluation.tsx

@@ -1,33 +1,38 @@
 import {
   CAMPAIGN_REFERENCE_CODE,
   CampaignService,
+  CHAIN_TYPE,
   checkIsDev,
   IdentityServiceV2,
   IdentityVerificationStatusV2,
   KYCCopy,
-  PoolInfoV2,
+  KYCType,
   TrancheType,
   VerificationStatusResultV2,
 } from '@huma-finance/shared'
-import { useAuthErrorHandling } from '@huma-finance/web-shared'
+import { useAuthErrorHandling, useChainInfo } from '@huma-finance/web-shared'
 import { Box, css, useTheme } from '@mui/material'
-import { useWeb3React } from '@web3-react/core'
 import Persona, { Client } from 'persona'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 
-import { Campaign } from '..'
-import { useAppDispatch } from '../../../../hooks/useRedux'
-import { setError, setStep } from '../../../../store/widgets.reducers'
-import { WIDGET_STEP } from '../../../../store/widgets.store'
-import { BottomButton } from '../../../BottomButton'
-import { ApproveLenderImg } from '../../../images'
-import { LoadingModal } from '../../../LoadingModal'
-import { WrapperModal } from '../../../WrapperModal'
+import { useAppDispatch } from '../../../hooks/useRedux'
+import { setError, setStep } from '../../../store/widgets.reducers'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { BottomButton } from '../../BottomButton'
+import { ApproveLenderImg } from '../../images'
+import { LoadingModal } from '../../LoadingModal'
+import { WrapperModal } from '../../WrapperModal'
+import { Campaign } from '../supplyV2'
 
 type LoadingType = 'verificationStatus' | 'startKYC' | 'approveLender'
 
 type Props = {
-  poolInfo: PoolInfoV2
+  poolInfo: {
+    KYC?: KYCType
+    juniorTrancheVault: string
+    seniorTrancheVault: string
+  }
+  chainType: CHAIN_TYPE
   isUniTranche: boolean
   pointsTestnetExperience: boolean
   campaign?: Campaign
@@ -40,13 +45,14 @@ export function PersonaEvaluation({
   isUniTranche,
   campaign,
   pointsTestnetExperience,
+  chainType,
   changeTranche,
   handleClose,
 }: Props): React.ReactElement | null {
   const theme = useTheme()
   const isDev = checkIsDev()
   const dispatch = useAppDispatch()
-  const { account, chainId } = useWeb3React()
+  const { account, chainId } = useChainInfo(isDev, chainType)
   const {
     errorType,
     setError: setAuthError,

package/src/components/Lend/{supplyV2/components → components}/SecuritizeEvaluation.tsx

@@ -14,14 +14,13 @@ import { useAuthErrorHandling, useParamsSearch } from '@huma-finance/web-shared'
 import { Box, css, useTheme } from '@mui/material'
 import { useWeb3React } from '@web3-react/core'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
-
-import { useAppDispatch } from '../../../../hooks/useRedux'
-import { setError } from '../../../../store/widgets.reducers'
-import { BottomButton } from '../../../BottomButton'
-import { HumaSnackBar } from '../../../HumaSnackBar'
-import { ApproveLenderImg } from '../../../images'
-import { LoadingModal } from '../../../LoadingModal'
-import { WrapperModal } from '../../../WrapperModal'
+import { useAppDispatch } from '../../../hooks/useRedux'
+import { setError } from '../../../store/widgets.reducers'
+import { HumaSnackBar } from '../../HumaSnackBar'
+import { WrapperModal } from '../../WrapperModal'
+import { ApproveLenderImg } from '../../images'
+import { BottomButton } from '../../BottomButton'
+import { LoadingModal } from '../../LoadingModal'
 
 const LoadingCopiesByType: {
   [key: string]: {

package/src/components/Lend/solanaAddRedemption/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='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

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

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'
+    />
+  )
+}