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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huma-finance/widgets",
-  "version": "0.0.62-beta.633+de08f40",
+  "version": "0.0.62-beta.635+3697d5c",
   "publishConfig": {
     "access": "public"
   },
@@ -21,8 +21,6 @@
   "dependencies": {
     "@apollo/client": "^3.7.2",
     "@coinbase/wallet-sdk": "^3.5.3",
-    "@emotion/react": "^11.5.0",
-    "@emotion/styled": "^11.3.0",
     "@ethersproject/address": "^5.7.0",
     "@ethersproject/bignumber": "^5.6.0",
     "@ethersproject/bytes": "^5.7.0",
@@ -31,9 +29,9 @@
     "@ethersproject/experimental": "^5.7.0",
     "@ethersproject/providers": "^5.6.0",
     "@ethersproject/units": "^5.6.0",
-    "@huma-finance/sdk": "^0.0.62-beta.633+de08f40",
-    "@huma-finance/shared": "^0.0.61",
-    "@huma-finance/web-shared": "^0.0.61",
+    "@huma-finance/sdk": "^0.0.62-beta.635+3697d5c",
+    "@huma-finance/shared": "^0.0.62-beta.635+3697d5c",
+    "@huma-finance/web-shared": "^0.0.62-beta.635+3697d5c",
     "@mui/icons-material": "^5.3.0",
     "@mui/material": "^5.0.6",
     "@mui/styles": "^5.0.2",
@@ -78,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"
@@ -188,6 +186,18 @@
     "wagmi": "^0.12.10"
   },
   "peerDependencies": {
+    "@coral-xyz/anchor": "^0.30.1",
+    "@emotion/react": "^11.5.0",
+    "@emotion/styled": "^11.3.0",
+    "@mui/icons-material": "^5.3.0",
+    "@mui/material": "^5.0.6",
+    "@mui/styles": "^5.0.2",
+    "@mui/system": "^5.0.6",
+    "@mui/x-date-pickers": "^5.0.7",
+    "@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",
@@ -197,5 +207,5 @@
   "optionalDependencies": {
     "encoding": "^0.1.13"
   },
-  "gitHead": "de08f401ed13fbb79a89ccb48e066ad217d6d1bc"
+  "gitHead": "3697d5c54ff93df02370acd34d8ca1686e90919f"
 }

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

@@ -0,0 +1,67 @@
+import {
+  formatNumber,
+  SolanaPoolInfo,
+  SolanaTokenUtils,
+} from '@huma-finance/shared'
+import { CreditConfigAccount } from '@huma-finance/web-shared'
+import React, { useCallback, useMemo, useState } from 'react'
+
+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
+}
+
+export function ChooseAmount({
+  poolInfo,
+  creditConfigAccount,
+}: Props): React.ReactElement {
+  const dispatch = useAppDispatch()
+  const { symbol, decimals } = poolInfo.underlyingMint
+  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(() => {
+    const borrowAmountBN = SolanaTokenUtils.parseUnits(
+      String(currentAmount),
+      decimals,
+    )
+    dispatch(
+      setBorrowInfo({
+        borrowAmount: currentAmount,
+        borrowAmountBN: JSON.parse(borrowAmountBN.toString()),
+        chargedFees: 0,
+        nextStep: WIDGET_STEP.Transfer,
+      }),
+    )
+  }, [currentAmount, decimals, dispatch])
+
+  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-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

@@ -0,0 +1,93 @@
+import { SolanaPoolInfo } from '@huma-finance/shared'
+import { SolanaPoolState, 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} 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
+  poolState: SolanaPoolState
+  handleClose: () => void
+  handleSuccess?: () => void
+}
+
+export function SolanaBorrow({
+  poolInfo,
+  poolState,
+  handleClose,
+  handleSuccess,
+}: SolanaBorrowProps): React.ReactElement | null {
+  const title = 'Borrow'
+  const dispatch = useDispatch()
+  const { step, errorMessage } = useAppSelector(selectWidgetState)
+  const { creditConfigAccount } = useBorrowerAccounts(
+    poolInfo.chainId,
+    poolInfo.poolName,
+  )
+
+  useEffect(() => {
+    if (!step && creditConfigAccount) {
+      dispatch(setStep(WIDGET_STEP.ChooseAmount))
+    }
+  }, [creditConfigAccount, dispatch, step])
+
+  if (!creditConfigAccount) {
+    return (
+      <WidgetWrapper
+        isOpen
+        isLoading
+        loadingTitle={title}
+        handleClose={handleClose}
+        handleSuccess={handleSuccess}
+      />
+    )
+  }
+
+  return (
+    <WidgetWrapper
+      isOpen
+      loadingTitle={title}
+      handleClose={handleClose}
+      handleSuccess={handleSuccess}
+    >
+      {step === WIDGET_STEP.ChooseAmount && creditConfigAccount && (
+        <ChooseAmount
+          poolInfo={poolInfo}
+          creditConfigAccount={creditConfigAccount}
+        />
+      )}
+      {step === WIDGET_STEP.Transfer && <Transfer poolInfo={poolInfo} />}
+      {step === WIDGET_STEP.Done && (
+        <Done
+          poolInfo={poolInfo}
+          poolState={poolState}
+          handleAction={handleClose}
+        />
+      )}
+      {step === WIDGET_STEP.Error && (
+        <ErrorModal
+          title={title}
+          errorReason='Sorry there was an error'
+          errorMessage={errorMessage}
+          handleOk={handleClose}
+        />
+      )}
+    </WidgetWrapper>
+  )
+}

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,60 @@
+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?.[0]?.uiTokenAmount?.uiAmount
+      const postTokenBalance =
+        txData?.meta?.postTokenBalances?.[0]?.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'
+    />
+  )
+}