@huma-finance/widgets 0.0.78-beta.1034 → 0.0.78-beta.1044

package/src/components/Lend/solanaWithdraw/4-TransferAndDeposit.tsx

@@ -0,0 +1,274 @@
+import { BN } from '@coral-xyz/anchor'
+import {
+  getSolanaNetworkType,
+  getTokenAccounts,
+  PermissionlessDepositCommitment,
+  PermissionlessDepositMode,
+  PermissionlessService,
+  SOLANA_CHAIN_INFO_PERMISSIONLESS,
+  SolanaPoolInfo,
+  TrancheType,
+} from '@huma-finance/shared'
+import {
+  checkIsDev,
+  logErrorRaw,
+  useHumaProgram,
+  usePermissionlessLenderModeATA,
+  usePermissionlessLenderStateAccount,
+  usePermissionlessProgram,
+} from '@huma-finance/web-shared'
+import {
+  ASSOCIATED_TOKEN_PROGRAM_ID,
+  createAssociatedTokenAccountIdempotentInstruction,
+  createAssociatedTokenAccountInstruction,
+  getAccount,
+  TOKEN_2022_PROGRAM_ID,
+  TOKEN_PROGRAM_ID,
+  TokenAccountNotFoundError,
+  TokenInvalidAccountOwnerError,
+} from '@solana/spl-token'
+import { useConnection, useWallet } from '@solana/wallet-adapter-react'
+import { ComputeBudgetProgram, PublicKey, Transaction } from '@solana/web3.js'
+import React, { useCallback, useEffect, useState } from 'react'
+import useLogOnFirstMount from '../../../hooks/useLogOnFirstMount'
+import { useAppDispatch } from '../../../hooks/useRedux'
+import { setStep } from '../../../store/widgets.reducers'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { SolanaTxSendModal } from '../../SolanaTxSendModal'
+
+type Props = {
+  poolInfo: SolanaPoolInfo
+  selectedTranche: TrancheType
+  poolIsClosed: boolean
+  permissionlessMode: PermissionlessDepositMode
+  withdrawableAmount: BN
+  depositCommitment: PermissionlessDepositCommitment
+}
+
+export function TransferAndDeposit({
+  poolInfo,
+  selectedTranche,
+  poolIsClosed,
+  permissionlessMode,
+  withdrawableAmount,
+  depositCommitment,
+}: Props): React.ReactElement | null {
+  useLogOnFirstMount('RedepositTransaction')
+  const { publicKey } = useWallet()
+  const dispatch = useAppDispatch()
+  const { connection } = useConnection()
+  const program = useHumaProgram(poolInfo.chainId)
+  const programPermissionless = usePermissionlessProgram()
+  const [transaction, setTransaction] = useState<Transaction>()
+  const { lenderStateAccount, isLoaded: isLoadedLenderStateAccount } =
+    usePermissionlessLenderStateAccount(poolInfo.chainId, permissionlessMode)
+  const solanaChainInfoPermissionless =
+    SOLANA_CHAIN_INFO_PERMISSIONLESS[poolInfo.chainId]
+  const { lenderClassicModeTokenATA, lenderMaxiModeTokenATA } =
+    usePermissionlessLenderModeATA(poolInfo.chainId)
+
+  useEffect(() => {
+    async function getTx() {
+      if (
+        !publicKey ||
+        transaction ||
+        !connection ||
+        !isLoadedLenderStateAccount ||
+        !lenderClassicModeTokenATA ||
+        !lenderMaxiModeTokenATA
+      ) {
+        return
+      }
+
+      const tx = new Transaction()
+      const { underlyingTokenATA, seniorTrancheATA, juniorTrancheATA } =
+        getTokenAccounts(poolInfo, publicKey)
+      const trancheMint =
+        selectedTranche === 'senior'
+          ? poolInfo.seniorTrancheMint
+          : poolInfo.juniorTrancheMint
+      const lenderTrancheToken =
+        selectedTranche === 'senior' ? seniorTrancheATA : juniorTrancheATA
+
+      // Create user token account if it doesn't exist
+      let createdAccounts = false
+      try {
+        await getAccount(
+          connection,
+          underlyingTokenATA,
+          undefined,
+          TOKEN_PROGRAM_ID,
+        )
+      } catch (error: unknown) {
+        // TokenAccountNotFoundError can be possible if the associated address has already received some lamports,
+        // becoming a system account. Assuming program derived addressing is safe, this is the only case for the
+        // TokenInvalidAccountOwnerError in this code path.
+        // Source: https://solana.stackexchange.com/questions/802/checking-to-see-if-a-token-account-exists-using-anchor-ts
+        if (
+          error instanceof TokenAccountNotFoundError ||
+          error instanceof TokenInvalidAccountOwnerError
+        ) {
+          // As this isn't atomic, it's possible others can create associated accounts meanwhile.
+          createdAccounts = true
+          tx.add(
+            createAssociatedTokenAccountInstruction(
+              publicKey,
+              underlyingTokenATA,
+              publicKey,
+              new PublicKey(poolInfo.underlyingMint.address),
+              TOKEN_PROGRAM_ID,
+              ASSOCIATED_TOKEN_PROGRAM_ID,
+            ),
+          )
+        }
+      }
+
+      if (!poolIsClosed) {
+        const disburseTx = await program.methods
+          .disburse()
+          .accountsPartial({
+            lender: publicKey,
+            humaConfig: poolInfo.humaConfig,
+            poolConfig: poolInfo.poolConfig,
+            underlyingMint: poolInfo.underlyingMint.address,
+            trancheMint,
+            poolUnderlyingToken: poolInfo.poolUnderlyingTokenAccount,
+            lenderUnderlyingToken: underlyingTokenATA,
+            tokenProgram: TOKEN_PROGRAM_ID,
+          })
+          .transaction()
+        tx.add(disburseTx)
+      } else {
+        const withdrawAfterPoolClosureTx = await program.methods
+          .withdrawAfterPoolClosure()
+          .accountsPartial({
+            lender: publicKey,
+            humaConfig: poolInfo.humaConfig,
+            poolConfig: poolInfo.poolConfig,
+            underlyingMint: poolInfo.underlyingMint.address,
+            trancheMint,
+            poolUnderlyingToken: poolInfo.poolUnderlyingTokenAccount,
+            lenderUnderlyingToken: underlyingTokenATA,
+            lenderTrancheToken,
+            underlyingTokenProgram: TOKEN_PROGRAM_ID,
+            trancheTokenProgram: TOKEN_2022_PROGRAM_ID,
+          })
+          .transaction()
+        tx.add(withdrawAfterPoolClosureTx)
+      }
+
+      const permissionlessModeConfig =
+        permissionlessMode === PermissionlessDepositMode.CLASSIC
+          ? solanaChainInfoPermissionless.classicModeConfig
+          : solanaChainInfoPermissionless.maxiModeConfig
+      const permissonlessLenderModeTokenATA =
+        permissionlessMode === PermissionlessDepositMode.CLASSIC
+          ? lenderClassicModeTokenATA
+          : lenderMaxiModeTokenATA
+
+      if (!lenderStateAccount) {
+        const createLenderAccountInstruction =
+          await programPermissionless.methods
+            .createLenderAccounts()
+            .accountsPartial({
+              lender: publicKey,
+              humaConfig: solanaChainInfoPermissionless.humaConfig,
+              poolConfig: solanaChainInfoPermissionless.poolConfig,
+              modeConfig: permissionlessModeConfig,
+              lenderModeToken: permissonlessLenderModeTokenATA,
+              tokenProgram: TOKEN_PROGRAM_ID,
+            })
+            .transaction()
+        tx.add(createLenderAccountInstruction)
+      }
+
+      tx.add(
+        createAssociatedTokenAccountIdempotentInstruction(
+          publicKey,
+          permissonlessLenderModeTokenATA,
+          publicKey,
+          new PublicKey(
+            permissionlessMode === PermissionlessDepositMode.CLASSIC
+              ? solanaChainInfoPermissionless.classicModeMint
+              : solanaChainInfoPermissionless.maxiModeMint,
+          ),
+          TOKEN_PROGRAM_ID,
+        ),
+      )
+
+      const depositTx = await programPermissionless.methods
+        .deposit(withdrawableAmount, depositCommitment, false)
+        .accountsPartial({
+          depositor: publicKey,
+          humaConfig: solanaChainInfoPermissionless.humaConfig,
+          poolConfig: solanaChainInfoPermissionless.poolConfig,
+          modeConfig: permissionlessModeConfig,
+          underlyingMint: solanaChainInfoPermissionless.underlyingMint,
+          underlyingTokenProgram: TOKEN_PROGRAM_ID,
+          modeTokenProgram: TOKEN_PROGRAM_ID,
+        })
+        .transaction()
+      tx.add(depositTx)
+
+      if (createdAccounts) {
+        tx.instructions.unshift(
+          ComputeBudgetProgram.setComputeUnitLimit({
+            units: poolIsClosed ? 145_000 : 105_000,
+          }),
+        )
+      }
+
+      setTransaction(tx)
+    }
+    getTx()
+  }, [
+    connection,
+    depositCommitment,
+    isLoadedLenderStateAccount,
+    lenderClassicModeTokenATA,
+    lenderMaxiModeTokenATA,
+    lenderStateAccount,
+    permissionlessMode,
+    poolInfo,
+    poolIsClosed,
+    program.methods,
+    programPermissionless.methods,
+    publicKey,
+    selectedTranche,
+    solanaChainInfoPermissionless,
+    transaction,
+    withdrawableAmount,
+  ])
+
+  const handleSuccess = useCallback(
+    async (options?: { signature: string }) => {
+      const isDev = checkIsDev()
+      if (publicKey && options?.signature) {
+        try {
+          await PermissionlessService.updatePermissionlessDeposit(
+            getSolanaNetworkType(poolInfo.chainId),
+            isDev,
+            publicKey.toString(),
+            poolInfo.chainId,
+            options?.signature,
+          )
+        } catch (error) {
+          logErrorRaw(error, {
+            message: 'Failed to update permissionless deposit',
+          })
+          console.error('Failed to update permissionless deposit', error)
+        }
+      }
+      dispatch(setStep(WIDGET_STEP.Done))
+    },
+    [dispatch, poolInfo.chainId, publicKey],
+  )
+
+  return (
+    <SolanaTxSendModal
+      tx={transaction}
+      chainId={poolInfo.chainId}
+      handleSuccess={handleSuccess}
+    />
+  )
+}

package/src/components/Lend/solanaWithdraw/{3-Done.tsx → 6-Done.tsx}

@@ -1,25 +1,34 @@
 import { BN } from '@coral-xyz/anchor'
 import {
+  configUtil,
   formatMoneyFixed,
   SolanaTokenUtils,
   UnderlyingTokenInfo,
 } from '@huma-finance/shared'
+import { Link } from '@mui/material'
 import React from 'react'
-import { TxDoneModal } from '../../TxDoneModal'
+import { ClaimAndStakeOption, WithdrawOption } from '.'
 import useLogOnFirstMount from '../../../hooks/useLogOnFirstMount'
+import { TxDoneModal } from '../../TxDoneModal'
 
 type Props = {
   poolUnderlyingToken: UnderlyingTokenInfo
   withdrawAmount: BN
+  option: ClaimAndStakeOption
   handleAction: () => void
 }
 
 export function Done({
   poolUnderlyingToken,
   withdrawAmount,
+  option,
   handleAction,
 }: Props): React.ReactElement {
-  useLogOnFirstMount('Success')
+  useLogOnFirstMount(
+    option.id === WithdrawOption.WITHDRAW_AND_REDEPOSIT
+      ? 'RedepositSuccess'
+      : 'WithdrawSuccess',
+  )
   const { symbol } = poolUnderlyingToken
   const withdrawAmountFormatted = formatMoneyFixed(
     SolanaTokenUtils.formatUnits(withdrawAmount, poolUnderlyingToken.decimals),
@@ -27,7 +36,22 @@ export function Done({
   )
 
   const content = [
-    `You successfully withdrew ${withdrawAmountFormatted} ${symbol}.`,
+    option.id === WithdrawOption.WITHDRAW_AND_REDEPOSIT ? (
+      <>
+        You have withdrawn {withdrawAmountFormatted} {symbol} and redeposited to
+        Huma Permissionless.{' '}
+        <Link
+          href={configUtil.dappLink}
+          target='_blank'
+          rel='noopener noreferrer'
+        >
+          Go to Huma Permissionless
+        </Link>{' '}
+        to view your deposit.
+      </>
+    ) : (
+      `You successfully withdrew ${withdrawAmountFormatted} ${symbol}.`
+    ),
   ]
 
   return <TxDoneModal handleAction={handleAction} content={content} />

package/src/components/Lend/solanaWithdraw/components/Apy.tsx

@@ -0,0 +1,126 @@
+import { toPercentage } from '@huma-finance/shared'
+import InfoOutlineIcon from '@mui/icons-material/InfoOutlined'
+import { Box, css, Tooltip, useTheme } from '@mui/material'
+import React from 'react'
+import { HumaNoEmptySpaceIcon, UsdcIcon } from '../../../icons'
+
+type Props = {
+  usdcApy: number | undefined
+  humaRewardsApy: number | undefined
+}
+
+export function Apy({ usdcApy, humaRewardsApy }: Props): React.ReactElement {
+  const theme = useTheme()
+
+  const styles = {
+    container: css`
+      display: flex;
+      flex-direction: column;
+      margin-top: ${theme.spacing(2)};
+    `,
+    usdcApy: css`
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: ${theme.spacing(0.5)};
+    `,
+    usdcApyTitle: css`
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: ${theme.spacing(0.5)};
+      color: #b8b8b8;
+      font-size: 16px;
+      font-weight: 500;
+      line-height: 150%;
+      letter-spacing: 0.15px;
+    `,
+    usdcApyValue: css`
+      display: flex;
+      align-items: center;
+      gap: ${theme.spacing(0.5)};
+      color: #b8b8b8;
+      font-size: 16px;
+      font-weight: 500;
+      line-height: 150%;
+      letter-spacing: 0.15px;
+
+      & > svg {
+        width: 16px;
+        height: 16px;
+      }
+    `,
+    humaRewardsApy: css`
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: ${theme.spacing(0.5)};
+    `,
+    humaRewardsApyValue: css`
+      display: flex;
+      align-items: center;
+      gap: ${theme.spacing(0.5)};
+      color: #b8b8b8;
+      font-size: 16px;
+      font-weight: 500;
+      line-height: 150%;
+      letter-spacing: 0.15px;
+
+      & > svg {
+        width: 16px;
+        height: 16px;
+      }
+    `,
+    infoIcon: css`
+      width: 16px;
+      height: 16px;
+      color: #686868;
+    `,
+    humaRewardsApyTitle: css`
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: ${theme.spacing(0.5)};
+      color: #b8b8b8;
+      font-size: 16px;
+      font-weight: 500;
+      line-height: 150%;
+      letter-spacing: 0.15px;
+    `,
+  }
+
+  return (
+    <Box css={styles.container}>
+      <Box css={styles.usdcApy}>
+        <Box css={styles.usdcApyTitle}>
+          <Box>USDC yield</Box>
+          <Tooltip
+            title='Current monthly USDC APY for Classic mode.'
+            placement='top'
+          >
+            <InfoOutlineIcon css={styles.infoIcon} />
+          </Tooltip>
+        </Box>
+        <Box css={styles.usdcApyValue}>
+          <Box>{toPercentage(usdcApy, 1)}</Box>
+          <UsdcIcon />
+        </Box>
+      </Box>
+      <Box css={styles.humaRewardsApy}>
+        <Box css={styles.humaRewardsApyTitle}>
+          <Box>Huma rewards</Box>
+          <Tooltip
+            title='Returns are estimated based on the 7-day average price of $HUMA.'
+            placement='top'
+          >
+            <InfoOutlineIcon css={styles.infoIcon} />
+          </Tooltip>
+        </Box>
+        <Box css={styles.humaRewardsApyValue}>
+          <Box>{toPercentage(humaRewardsApy, 1)}</Box>
+          <HumaNoEmptySpaceIcon />
+        </Box>
+      </Box>
+    </Box>
+  )
+}

package/src/components/Lend/solanaWithdraw/components/Benefit.tsx

@@ -0,0 +1,63 @@
+import { Box, css, Link, useTheme } from '@mui/material'
+import React from 'react'
+
+export function Benefit(): React.ReactElement {
+  const theme = useTheme()
+
+  const styles = {
+    container: css`
+      display: flex;
+      flex-direction: column;
+      margin-top: ${theme.spacing(2)};
+    `,
+    title: css`
+      color: #b8b8b8;
+      font-size: 16px;
+      font-weight: 700;
+      line-height: 175%;
+      letter-spacing: 0.15px;
+    `,
+    list: css`
+      margin-top: ${theme.spacing(0)};
+      padding-left: ${theme.spacing(2)};
+    `,
+    listItem: css`
+      color: #686868;
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 143%;
+      letter-spacing: 0.17px;
+    `,
+    link: css`
+      color: #686868;
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 143%;
+      letter-spacing: 0.17px;
+    `,
+  }
+
+  return (
+    <Box css={styles.container}>
+      <Box css={styles.title}>Permissionless benefits</Box>
+      <ul css={styles.list}>
+        <li css={styles.listItem}>
+          Keep your OG status and unlock boosted yield forever
+        </li>
+        <li css={styles.listItem}>Choose your own investment lockup periods</li>
+        <li css={styles.listItem}>Earn incentives for longer commitments</li>
+        <li css={styles.listItem}>
+          <Link
+            href='https://app.huma.finance/faqs'
+            target='_blank'
+            rel='noopener noreferrer'
+            css={styles.link}
+          >
+            Read more
+          </Link>{' '}
+          about the Permissionless benefits
+        </li>
+      </ul>
+    </Box>
+  )
+}