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

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

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

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

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

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

package/src/components/Lend/solanaSupply/index.tsx

@@ -0,0 +1,143 @@
+import { SolanaPoolInfo, TrancheType } from '@huma-finance/shared'
+import {
+  SolanaPoolState,
+  useLenderAccounts,
+  useTokenAccount,
+} from '@huma-finance/web-shared'
+import React, { useEffect, useState } 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 { ChooseTranche } from './1-ChooseTranche'
+import { ChooseAmount } from './3-ChooseAmount'
+import { setStep } from '../../../store/widgets.reducers'
+import { ErrorModal } from '../../ErrorModal'
+import { Transfer } from './4-Transfer'
+import { Success } from './5-Success'
+
+/**
+ * Lend pool supply props
+ * @typedef {Object} SolanaLendSupplyProps
+ * @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 SolanaLendSupplyProps {
+  poolInfo: SolanaPoolInfo
+  poolState: SolanaPoolState
+  handleClose: () => void
+  handleSuccess?: () => void
+}
+
+export function SolanaLendSupply({
+  poolInfo,
+  poolState,
+  handleClose,
+  handleSuccess,
+}: SolanaLendSupplyProps): React.ReactElement | null {
+  const dispatch = useDispatch()
+  const {
+    seniorLenderApproved,
+    juniorLenderApproved,
+    loading: isLoadingLenderAccounts,
+  } = useLenderAccounts(poolInfo.chainId, poolInfo.poolName)
+  const [tokenAccount, isLoadingTokenAccount] = useTokenAccount(poolInfo)
+  const { step, errorMessage } = useAppSelector(selectWidgetState)
+  const isUniTranche = poolState.maxSeniorJuniorRatio === 0
+  const [selectedTranche, setSelectedTranche] = useState<TrancheType>()
+
+  useEffect(() => {
+    if (!step && !isLoadingLenderAccounts && !isLoadingTokenAccount) {
+      if (juniorLenderApproved && !seniorLenderApproved) {
+        setSelectedTranche('junior')
+        dispatch(setStep(WIDGET_STEP.ChooseAmount))
+        return
+      }
+
+      if (seniorLenderApproved && !juniorLenderApproved) {
+        setSelectedTranche('senior')
+        dispatch(setStep(WIDGET_STEP.ChooseAmount))
+        return
+      }
+
+      if (juniorLenderApproved && seniorLenderApproved) {
+        dispatch(setStep(WIDGET_STEP.ChooseTranche))
+        // return
+      }
+
+      //   if (poolInfo.supplyLink) {
+      //     openInNewTab(poolInfo.supplyLink)
+      //     handleClose()
+      //   }
+    }
+  }, [
+    dispatch,
+    handleClose,
+    poolInfo,
+    step,
+    isLoadingLenderAccounts,
+    juniorLenderApproved,
+    seniorLenderApproved,
+    isLoadingTokenAccount,
+  ])
+
+  if (isLoadingLenderAccounts || isLoadingTokenAccount) {
+    return (
+      <WidgetWrapper
+        isOpen
+        isLoading
+        loadingTitle='Supply'
+        handleClose={handleClose}
+        handleSuccess={handleSuccess}
+      />
+    )
+  }
+
+  return (
+    <WidgetWrapper
+      isOpen
+      loadingTitle={`Supply ${poolInfo.underlyingMint.symbol}`}
+      handleClose={handleClose}
+      handleSuccess={handleSuccess}
+    >
+      {step === WIDGET_STEP.ChooseTranche && (
+        <ChooseTranche
+          poolUnderlyingToken={poolInfo.underlyingMint}
+          selectedTranche={selectedTranche}
+          changeTranche={setSelectedTranche}
+        />
+      )}
+      {step === WIDGET_STEP.ChooseAmount && (
+        <ChooseAmount
+          poolInfo={poolInfo}
+          poolState={poolState}
+          tokenAccount={tokenAccount!}
+          selectedTranche={selectedTranche}
+          isUniTranche={isUniTranche}
+        />
+      )}
+      {step === WIDGET_STEP.Transfer && selectedTranche && (
+        <Transfer poolInfo={poolInfo} selectedTranche={selectedTranche} />
+      )}
+      {step === WIDGET_STEP.Done && (
+        <Success
+          poolInfo={poolInfo}
+          poolState={poolState}
+          handleAction={handleClose}
+        />
+      )}
+      {step === WIDGET_STEP.Error && (
+        <ErrorModal
+          title='Supply'
+          errorReason='Sorry there was an error'
+          errorMessage={errorMessage}
+          handleOk={handleClose}
+        />
+      )}
+    </WidgetWrapper>
+  )
+}

package/src/components/SolanaTxDoneModal.tsx

@@ -0,0 +1,115 @@
+import { Box, Button, css, Typography, useTheme } from '@mui/material'
+import React, { useCallback } from 'react'
+
+import { SolanaChainEnum } from '@huma-finance/shared'
+import { useAppDispatch } from '../hooks/useRedux'
+import { resetState } from '../store/widgets.reducers'
+import { CheckIcon } from './icons'
+import { SolanaViewOnExplorer } from './SolanaViewOnExplorer'
+
+type Props = {
+  content: string[]
+  subContent?: string[]
+  buttonText?: string
+  solanaSignature?: string
+  chainId?: SolanaChainEnum
+  handleAction: () => void
+}
+
+export function SolanaTxDoneModal({
+  content,
+  subContent,
+  handleAction,
+  solanaSignature,
+  chainId,
+  buttonText,
+}: Props): React.ReactElement {
+  const theme = useTheme()
+  const dispatch = useAppDispatch()
+
+  const styles = {
+    wrapper: css`
+      height: 518px;
+      position: relative;
+    `,
+    header: css`
+      ${theme.cssMixins.rowHCentered};
+      margin-top: ${theme.spacing(-0.5)};
+    `,
+    content: css`
+      ${theme.cssMixins.colVCentered};
+      font-weight: ${subContent ? 700 : 400};
+      font-size: 18px;
+      color: ${theme.palette.text.secondary};
+      margin-top: ${theme.spacing(8)};
+      text-align: center;
+    `,
+    subContent: css`
+      ${theme.cssMixins.colVCentered};
+      font-weight: 400;
+      font-size: 18px;
+      color: ${theme.palette.text.primary};
+      margin-top: ${theme.spacing(2)};
+      text-align: center;
+    `,
+    check: css`
+      width: 100%;
+      ${theme.cssMixins.rowHCentered};
+      margin-top: ${theme.spacing(10)};
+    `,
+    bottomButtonGroup: css`
+      width: 100%;
+      position: absolute;
+      bottom: 0;
+    `,
+    bottomButton: css`
+      margin-top: ${theme.spacing(1)};
+    `,
+  }
+
+  const handleCloseModal = useCallback(() => {
+    dispatch(resetState())
+    handleAction()
+  }, [dispatch, handleAction])
+
+  return (
+    <Box css={styles.wrapper}>
+      <Typography variant='h6' css={styles.header}>
+        Transaction Completed
+      </Typography>
+      <Box css={styles.check}>
+        <CheckIcon />
+      </Box>
+      <Box css={styles.content}>
+        {content.map((item) => (
+          <Box sx={{ marginTop: theme.spacing(1) }} key={item}>
+            {item}
+          </Box>
+        ))}
+      </Box>
+      {subContent && (
+        <Box css={styles.subContent}>
+          {subContent.map((item) => (
+            <Box sx={{ marginTop: theme.spacing(1) }} key={item}>
+              {item}
+            </Box>
+          ))}
+        </Box>
+      )}
+      <Box css={styles.bottomButtonGroup}>
+        {solanaSignature && chainId && (
+          <SolanaViewOnExplorer signature={solanaSignature} chainId={chainId} />
+        )}
+        <Button
+          className='transaction-done-modal-close-btn'
+          variant='contained'
+          fullWidth
+          css={styles.bottomButton}
+          onClick={handleCloseModal}
+        >
+          {!buttonText ? 'DONE' : buttonText}
+        </Button>
+      </Box>
+    </Box>
+  )
+}

package/src/components/SolanaTxSendModal.tsx

@@ -0,0 +1,61 @@
+import { SolanaChainEnum } from '@huma-finance/shared'
+import React, { useEffect, useState } from 'react'
+
+import { useConnection, useWallet } from '@solana/wallet-adapter-react'
+import { Transaction } from '@solana/web3.js'
+import { setError, setSolanaSignature } from '../store/widgets.reducers'
+import { LoadingModal } from './LoadingModal'
+import { SolanaViewOnExplorer } from './SolanaViewOnExplorer'
+import { useAppDispatch } from '../hooks/useRedux'
+
+type Props = {
+  chainId: SolanaChainEnum
+  tx?: Transaction
+  handleSuccess: () => void
+}
+
+export function SolanaTxSendModal({
+  chainId,
+  tx,
+  handleSuccess,
+}: Props): React.ReactElement | null {
+  const dispatch = useAppDispatch()
+  const { sendTransaction } = useWallet()
+  const { connection } = useConnection()
+  const [signature, setSignature] = useState<string>('')
+
+  useEffect(() => {
+    async function sendTx() {
+      if (!connection || !tx) {
+        return
+      }
+
+      try {
+        const latestBlockHash = await connection.getLatestBlockhash()
+        const signature = await sendTransaction(tx, connection)
+        setSignature(signature)
+        dispatch(setSolanaSignature(signature))
+
+        await connection.confirmTransaction({
+          blockhash: latestBlockHash.blockhash,
+          lastValidBlockHeight: latestBlockHash.lastValidBlockHeight,
+          signature,
+        })
+        handleSuccess()
+      } catch (error: unknown) {
+        const err = error as Error
+        dispatch(setError({ errorMessage: err?.message || '' }))
+      }
+    }
+    sendTx()
+  }, [connection, dispatch, handleSuccess, sendTransaction, tx])
+
+  return (
+    <LoadingModal
+      title='Transaction Pending'
+      description='Waiting for confirmation...'
+    >
+      <SolanaViewOnExplorer chainId={chainId} signature={signature} />
+    </LoadingModal>
+  )
+}