@huma-finance/widgets 0.0.62-beta.622 → 0.0.62-beta.627

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huma-finance/widgets",
-  "version": "0.0.62-beta.622+137e1dc",
+  "version": "0.0.62-beta.627+ed48d14",
   "publishConfig": {
     "access": "public"
   },
@@ -28,9 +28,9 @@
     "@ethersproject/experimental": "^5.7.0",
     "@ethersproject/providers": "^5.6.0",
     "@ethersproject/units": "^5.6.0",
-    "@huma-finance/sdk": "^0.0.62-beta.622+137e1dc",
-    "@huma-finance/shared": "^0.0.62-beta.622+137e1dc",
-    "@huma-finance/web-shared": "^0.0.61",
+    "@huma-finance/sdk": "^0.0.62-beta.627+ed48d14",
+    "@huma-finance/shared": "^0.0.62-beta.627+ed48d14",
+    "@huma-finance/web-shared": "^0.0.62-beta.627+ed48d14",
     "@notifi-network/notifi-frontend-client": "^0.91.1",
     "@reduxjs/toolkit": "^1.8.6",
     "@types/utf8": "^3.0.1",
@@ -200,5 +200,5 @@
   "optionalDependencies": {
     "encoding": "^0.1.13"
   },
-  "gitHead": "137e1dc3d62ae552c1f93c6c489440ccc0e569d7"
+  "gitHead": "ed48d14997b960c2036daba1b6f303fcda551c26"
 }

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

@@ -45,6 +45,7 @@ export function ChooseAmount({
     ethers.utils.formatUnits(payoffAmountBN, decimals),
   )
 
+  // TODO: Remove redundant useEffect
   useEffect(() => {
     setCurrentAmount(totalDueAmount)
   }, [totalDueAmount])

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

@@ -1,14 +1,11 @@
 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'
@@ -17,20 +14,14 @@ 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(
     () =>
@@ -46,29 +37,19 @@ export function ChooseAmount({
   }
 
   const handleAction = useCallback(() => {
-    if (!tokenAccount) {
-      return
-    }
-
     const borrowAmountBN = SolanaTokenUtils.parseUnits(
       String(currentAmount),
       decimals,
     )
-    const nextStep =
-      borrowAmountBN.gt(new BN(tokenAccount.delegatedAmount.toString())) ||
-      tokenAccount.delegate?.toString() !== sentinel
-        ? WIDGET_STEP.ApproveAllowance
-        : WIDGET_STEP.Transfer
-
     dispatch(
       setBorrowInfo({
         borrowAmount: currentAmount,
         borrowAmountBN: JSON.parse(borrowAmountBN.toString()),
         chargedFees: 0,
-        nextStep,
+        nextStep: WIDGET_STEP.Transfer,
       }),
     )
-  }, [currentAmount, decimals, dispatch, sentinel, tokenAccount])
+  }, [currentAmount, decimals, dispatch])
 
   return (
     <InputAmountModal

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

@@ -0,0 +1,159 @@
+import {
+  getCreditAccounts,
+  getSentinelAddress,
+  getTokenAccounts,
+  SolanaPoolInfo,
+  SolanaTokenUtils,
+} from '@huma-finance/shared'
+import React, { useCallback, useEffect, useState } from 'react'
+
+import {
+  ASSOCIATED_TOKEN_PROGRAM_ID,
+  createApproveCheckedInstruction,
+  createAssociatedTokenAccountInstruction,
+  getAccount,
+  TOKEN_2022_PROGRAM_ID,
+  TokenAccountNotFoundError,
+  TokenInvalidAccountOwnerError,
+} from '@solana/spl-token'
+import { useConnection, useWallet } from '@solana/wallet-adapter-react'
+import { PublicKey, Transaction } from '@solana/web3.js'
+import { useHumaProgram } from '@huma-finance/web-shared'
+import { BN } from '@coral-xyz/anchor'
+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 sentinel = getSentinelAddress(poolInfo.chainId)
+  const { connection } = useConnection()
+  const [transaction, setTransaction] = useState<Transaction>()
+  const program = useHumaProgram(poolInfo.chainId)
+  const { borrowAmountBN: borrowAmountBNJson } =
+    useAppSelector(selectWidgetState)
+
+  const handleSuccess = useCallback(() => {
+    dispatch(setStep(WIDGET_STEP.Done))
+  }, [dispatch])
+
+  useEffect(() => {
+    async function getTx() {
+      if (!wallet || !publicKey || !connection) {
+        return
+      }
+
+      const { underlyingTokenATA } = getTokenAccounts(poolInfo, publicKey)
+      const tx = new Transaction()
+
+      // Create user token account if it doesn't exist
+      let tokenAccount
+      try {
+        tokenAccount = await getAccount(
+          connection,
+          underlyingTokenATA,
+          undefined,
+          TOKEN_2022_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.
+        if (
+          error instanceof TokenAccountNotFoundError ||
+          error instanceof TokenInvalidAccountOwnerError
+        ) {
+          // As this isn't atomic, it's possible others can create associated accounts meanwhile.
+          tx.add(
+            createAssociatedTokenAccountInstruction(
+              publicKey,
+              underlyingTokenATA,
+              publicKey,
+              new PublicKey(poolInfo.underlyingMint.address),
+              TOKEN_2022_PROGRAM_ID,
+              ASSOCIATED_TOKEN_PROGRAM_ID,
+            ),
+          )
+        }
+      }
+
+      // Approve allowance to the sentinel if the account is new or delegated amount is not enough
+      const borrowAmountBN = new BN(borrowAmountBNJson?.toString() ?? '0')
+      if (
+        !tokenAccount ||
+        borrowAmountBN.gt(new BN(tokenAccount.delegatedAmount.toString())) ||
+        tokenAccount.delegate?.toString() !== sentinel
+      ) {
+        tx.add(
+          createApproveCheckedInstruction(
+            underlyingTokenATA,
+            new PublicKey(poolInfo.underlyingMint.address),
+            new PublicKey(sentinel), // delegate
+            publicKey, // owner of the wallet
+            BigInt(
+              SolanaTokenUtils.parseUnits(
+                '100000000000', // 100 billion
+                poolInfo.underlyingMint.decimals,
+              ).toString(),
+            ), // amount
+            poolInfo.underlyingMint.decimals,
+            undefined, // multiSigners
+            TOKEN_2022_PROGRAM_ID,
+          ),
+        )
+      }
+
+      const { creditConfigAccount, creditStateAccount } = getCreditAccounts(
+        poolInfo,
+        publicKey,
+      )
+      // borrowAmountBNJson is stored as a raw number string in this flow
+      const programTx = await program.methods
+        .drawdown(borrowAmountBN)
+        .accountsPartial({
+          borrower: 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()
+      tx.add(programTx)
+
+      setTransaction(tx)
+    }
+    getTx()
+  }, [
+    borrowAmountBNJson,
+    connection,
+    dispatch,
+    poolInfo,
+    poolInfo.underlyingMint.address,
+    poolInfo.underlyingMint.decimals,
+    program.methods,
+    publicKey,
+    sentinel,
+    wallet,
+  ])
+
+  return (
+    <SolanaTxSendModal
+      tx={transaction}
+      chainId={poolInfo.chainId}
+      handleSuccess={handleSuccess}
+    />
+  )
+}

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

@@ -0,0 +1,38 @@
+import { formatNumber, SolanaPoolInfo, timeUtil } from '@huma-finance/shared'
+import React from 'react'
+
+import { SolanaPoolState } from '@huma-finance/web-shared'
+import { useAppSelector } from '../../../hooks/useRedux'
+import { selectWidgetState } from '../../../store/widgets.selectors'
+import { SolanaTxDoneModal } from '../../SolanaTxDoneModal'
+
+type Props = {
+  poolInfo: SolanaPoolInfo
+  poolState: SolanaPoolState
+  handleAction: () => void
+}
+
+export function Done({
+  poolInfo,
+  poolState,
+  handleAction,
+}: Props): React.ReactElement {
+  const { borrowAmount, solanaSignature } = useAppSelector(selectWidgetState)
+  const { symbol } = poolInfo.underlyingMint
+  const dueDate = timeUtil.timestampToLL(poolState.epochEndTime)
+
+  const content = [
+    `${formatNumber(borrowAmount)} ${symbol} is now in your wallet.`,
+    `Note: your first automatic payment will occur after ${dueDate}.`,
+  ]
+
+  return (
+    <SolanaTxDoneModal
+      handleAction={handleAction}
+      content={content}
+      chainId={poolInfo.chainId}
+      solanaSignature={solanaSignature}
+      buttonText='DONE'
+    />
+  )
+}

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

@@ -1,8 +1,5 @@
 import { SolanaPoolInfo } from '@huma-finance/shared'
-import {
-  useBorrowerAccounts,
-  usePoolUnderlyingTokenAccount,
-} from '@huma-finance/web-shared'
+import { SolanaPoolState, useBorrowerAccounts } from '@huma-finance/web-shared'
 import React, { useEffect } from 'react'
 import { useDispatch } from 'react-redux'
 
@@ -13,7 +10,8 @@ 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'
+import { Transfer } from './2-Transfer'
+import { Done } from './3-Done'
 
 /**
  * Lend pool supply props
@@ -24,20 +22,20 @@ import { ApproveAllowance } from './2-ApproveAllowance'
  */
 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 { account: tokenAccount, loading: isLoadingTokenAccounts } =
-    usePoolUnderlyingTokenAccount(poolInfo)
   const { step, errorMessage } = useAppSelector(selectWidgetState)
   useEffect(() => {
     if (!step) {
@@ -45,8 +43,8 @@ export function SolanaBorrow({
     }
   }, [dispatch, step])
 
-  const title = 'Redemption'
-  if (isLoadingBorrowerAccounts || isLoadingTokenAccounts) {
+  const title = 'Borrow'
+  if (isLoadingBorrowerAccounts) {
     return (
       <WidgetWrapper
         isOpen
@@ -65,24 +63,20 @@ export function SolanaBorrow({
       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.ChooseAmount && creditConfigAccount && (
+        <ChooseAmount
+          poolInfo={poolInfo}
+          creditConfigAccount={creditConfigAccount}
+        />
       )}
+      {step === WIDGET_STEP.Transfer && <Transfer poolInfo={poolInfo} />}
       {step === WIDGET_STEP.Done && (
-        <Done poolInfo={poolInfo} handleAction={handleClose} />
-      )} */}
+        <Done
+          poolInfo={poolInfo}
+          poolState={poolState}
+          handleAction={handleClose}
+        />
+      )}
       {step === WIDGET_STEP.Error && (
         <ErrorModal
           title={title}

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

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

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

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