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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huma-finance/widgets",
-  "version": "0.0.62-beta.597+bf9d9fc",
+  "version": "0.0.62-beta.611+4c13dfb",
   "publishConfig": {
     "access": "public"
   },
@@ -30,9 +30,9 @@
     "@ethersproject/experimental": "^5.7.0",
     "@ethersproject/providers": "^5.6.0",
     "@ethersproject/units": "^5.6.0",
-    "@huma-finance/sdk": "^0.0.62-beta.597+bf9d9fc",
-    "@huma-finance/shared": "^0.0.62-beta.597+bf9d9fc",
-    "@huma-finance/web-shared": "^0.0.61",
+    "@huma-finance/sdk": "^0.0.61",
+    "@huma-finance/shared": "^0.0.61",
+    "@huma-finance/web-shared": "^0.0.62-beta.611+4c13dfb",
     "@mui/icons-material": "^5.3.0",
     "@mui/material": "^5.0.6",
     "@mui/styles": "^5.0.2",
@@ -76,7 +76,7 @@
     "react-router-dom": "^5.3.0",
     "react-scripts": "5.0.1",
     "tslib": "^2.5.0",
-    "typescript": "^4.8.4",
+    "typescript": "^5.0.0",
     "utf8": "^3.0.0",
     "web-vitals": "^2.1.4",
     "yup": "^0.32.11"
@@ -186,6 +186,11 @@
     "wagmi": "^0.12.10"
   },
   "peerDependencies": {
+    "@coral-xyz/anchor": "^0.30.1",
+    "@solana/spl-token": "^0.4.8",
+    "@solana/wallet-adapter-base": "^0.9.23",
+    "@solana/wallet-adapter-react": "^0.15.35",
+    "@solana/web3.js": "^1.95.3",
     "ethers": "^5.6.1",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
@@ -195,5 +200,5 @@
   "optionalDependencies": {
     "encoding": "^0.1.13"
   },
-  "gitHead": "bf9d9fc16e7624e4af65434c712e37e75cb438d4"
+  "gitHead": "4c13dfb9c79496003f715a370cbed5573a53e57f"
 }

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

@@ -0,0 +1,86 @@
+import {
+  formatNumber,
+  getSentinelAddress,
+  SolanaPoolInfo,
+  SolanaTokenUtils,
+} from '@huma-finance/shared'
+import { CreditConfigAccount } from '@huma-finance/web-shared'
+import React, { useCallback, useMemo, useState } from 'react'
+
+import { BN } from '@coral-xyz/anchor'
+import { Account } from '@solana/spl-token'
+import { useAppDispatch } from '../../../hooks/useRedux'
+import { setBorrowInfo } from '../../../store/widgets.reducers'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { InputAmountModal } from '../../InputAmountModal'
+
+type Props = {
+  poolInfo: SolanaPoolInfo
+  creditConfigAccount: CreditConfigAccount
+  tokenAccount: Account
+}
+
+export function ChooseAmount({
+  poolInfo,
+  creditConfigAccount,
+  tokenAccount,
+}: Props): React.ReactElement {
+  const dispatch = useAppDispatch()
+  const { symbol, decimals } = poolInfo.underlyingMint
+  const sentinel = useMemo(
+    () => getSentinelAddress(poolInfo.chainId),
+    [poolInfo.chainId],
+  )
+  const [currentAmount, setCurrentAmount] = useState<number>(0)
+  const creditAvailable = useMemo(
+    () =>
+      SolanaTokenUtils.formatUnits(
+        creditConfigAccount.creditAvailable,
+        decimals,
+      ),
+    [creditConfigAccount.creditAvailable, decimals],
+  )
+
+  const handleChangeAmount = (newAmount: number) => {
+    setCurrentAmount(newAmount)
+  }
+
+  const handleAction = useCallback(() => {
+    if (!tokenAccount) {
+      return
+    }
+
+    const borrowAmountBN = SolanaTokenUtils.parseUnits(
+      String(currentAmount),
+      decimals,
+    )
+    const nextStep =
+      borrowAmountBN.gt(new BN(tokenAccount.delegatedAmount)) ||
+      tokenAccount.delegate?.toString() !== sentinel
+        ? WIDGET_STEP.ApproveAllowance
+        : WIDGET_STEP.Transfer
+
+    dispatch(
+      setBorrowInfo({
+        borrowAmount: currentAmount,
+        borrowAmountBN,
+        chargedFees: 0,
+        nextStep,
+      }),
+    )
+  }, [currentAmount, decimals, dispatch, sentinel, tokenAccount])
+
+  return (
+    <InputAmountModal
+      title='Borrow'
+      subTitle='Choose Amount'
+      tokenSymbol={symbol}
+      currentAmount={currentAmount}
+      handleChangeAmount={handleChangeAmount}
+      maxAmount={creditAvailable}
+      infos={[`${String(formatNumber(creditAvailable))} ${symbol} Available`]}
+      handleAction={handleAction}
+      actionText='BORROW'
+    />
+  )
+}

package/src/components/CreditLine/solanaBorrow/2-ApproveAllowance.tsx

@@ -0,0 +1,87 @@
+import {
+  getSentinelAddress,
+  SolanaPoolInfo,
+  SolanaTokenUtils,
+} from '@huma-finance/shared'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
+
+import {
+  Account,
+  createApproveCheckedInstruction,
+  TOKEN_2022_PROGRAM_ID,
+} from '@solana/spl-token'
+import { useConnection, useWallet } from '@solana/wallet-adapter-react'
+import { PublicKey, Transaction } from '@solana/web3.js'
+import { useAppDispatch } from '../../../hooks/useRedux'
+import { SolanaTxSendModal } from '../../SolanaTxSendModal'
+import { setStep } from '../../../store/widgets.reducers'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+
+type Props = {
+  poolInfo: SolanaPoolInfo
+  tokenAccount: Account
+}
+
+export function ApproveAllowance({
+  poolInfo,
+  tokenAccount,
+}: Props): React.ReactElement | null {
+  const dispatch = useAppDispatch()
+  const { wallet, publicKey, sendTransaction, signTransaction } = useWallet()
+  const sentinel = useMemo(
+    () => getSentinelAddress(poolInfo.chainId),
+    [poolInfo.chainId],
+  )
+  const { connection } = useConnection()
+  const [transaction, setTransaction] = useState<Transaction>()
+
+  const handleSuccess = useCallback(() => {
+    dispatch(setStep(WIDGET_STEP.Transfer))
+  }, [dispatch])
+
+  useEffect(() => {
+    async function getTx() {
+      if (!wallet || !publicKey || !connection || !signTransaction) {
+        return
+      }
+
+      const tx = new Transaction().add(
+        createApproveCheckedInstruction(
+          tokenAccount.address,
+          new PublicKey(poolInfo.underlyingMint.address),
+          new PublicKey(sentinel), // delegate
+          publicKey, // owner of the wallet
+          SolanaTokenUtils.parseUnits(
+            '100000000000', // 100 billion
+            poolInfo.underlyingMint.decimals,
+          ), // amount
+          poolInfo.underlyingMint.decimals,
+          undefined, // multiSigners
+          TOKEN_2022_PROGRAM_ID,
+        ),
+      )
+
+      setTransaction(tx)
+    }
+    getTx()
+  }, [
+    connection,
+    dispatch,
+    poolInfo.underlyingMint.address,
+    poolInfo.underlyingMint.decimals,
+    publicKey,
+    sendTransaction,
+    sentinel,
+    signTransaction,
+    tokenAccount.address,
+    wallet,
+  ])
+
+  return (
+    <SolanaTxSendModal
+      tx={transaction}
+      chainId={poolInfo.chainId}
+      handleSuccess={handleSuccess}
+    />
+  )
+}

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

@@ -0,0 +1,96 @@
+import { SolanaPoolInfo } from '@huma-finance/shared'
+import {
+  useBorrowerAccounts,
+  usePoolUnderlyingTokenAccount,
+} 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 { ApproveAllowance } from './2-ApproveAllowance'
+
+/**
+ * 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
+  handleClose: () => void
+  handleSuccess?: () => void
+}
+
+export function SolanaBorrow({
+  poolInfo,
+  handleClose,
+  handleSuccess,
+}: SolanaBorrowProps): React.ReactElement | null {
+  const dispatch = useDispatch()
+  const { creditConfigAccount, loading: isLoadingBorrowerAccounts } =
+    useBorrowerAccounts(poolInfo.chainId, poolInfo.poolName)
+  const { account: tokenAccount, loading: isLoadingTokenAccounts } =
+    usePoolUnderlyingTokenAccount(poolInfo)
+  const { step, errorMessage } = useAppSelector(selectWidgetState)
+  useEffect(() => {
+    if (!step) {
+      dispatch(setStep(WIDGET_STEP.ChooseAmount))
+    }
+  }, [dispatch, step])
+
+  const title = 'Redemption'
+  if (isLoadingBorrowerAccounts || isLoadingTokenAccounts) {
+    return (
+      <WidgetWrapper
+        isOpen
+        isLoading
+        loadingTitle={title}
+        handleClose={handleClose}
+        handleSuccess={handleSuccess}
+      />
+    )
+  }
+
+  return (
+    <WidgetWrapper
+      isOpen
+      loadingTitle={title}
+      handleClose={handleClose}
+      handleSuccess={handleSuccess}
+    >
+      {step === WIDGET_STEP.ChooseAmount &&
+        creditConfigAccount &&
+        tokenAccount && (
+          <ChooseAmount
+            poolInfo={poolInfo}
+            creditConfigAccount={creditConfigAccount}
+            tokenAccount={tokenAccount}
+          />
+        )}
+      {step === WIDGET_STEP.ApproveAllowance && tokenAccount && (
+        <ApproveAllowance poolInfo={poolInfo} tokenAccount={tokenAccount} />
+      )}
+      {/* {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/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,
@@ -125,6 +127,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 +162,6 @@ export function InputAmountModal({
           />
         </Box>
       </Box>
-
       {infos && (
         <Box>
           {infos.map((info) => (
@@ -167,7 +171,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/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)
+        : 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'
+    />
+  )
+}