@huma-finance/widgets 0.0.72-beta.886 → 0.0.72-beta.901

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huma-finance/widgets",
-  "version": "0.0.72-beta.886+47ad69b",
+  "version": "0.0.72-beta.901+7d33bf5",
   "publishConfig": {
     "access": "public"
   },
@@ -29,9 +29,9 @@
     "@ethersproject/experimental": "^5.7.0",
     "@ethersproject/providers": "^5.6.0",
     "@ethersproject/units": "^5.6.0",
-    "@huma-finance/sdk": "^0.0.72-beta.886+47ad69b",
-    "@huma-finance/shared": "^0.0.72-beta.886+47ad69b",
-    "@huma-finance/web-shared": "^0.0.72-beta.886+47ad69b",
+    "@huma-finance/sdk": "^0.0.72-beta.901+7d33bf5",
+    "@huma-finance/shared": "^0.0.72-beta.901+7d33bf5",
+    "@huma-finance/web-shared": "^0.0.72-beta.901+7d33bf5",
     "@mui/x-date-pickers": "^5.0.7",
     "@notifi-network/notifi-frontend-client": "^1.1.2",
     "@notifi-network/notifi-react": "^1.1.2",
@@ -201,5 +201,5 @@
   "optionalDependencies": {
     "encoding": "^0.1.13"
   },
-  "gitHead": "47ad69bbbf1e48e43ca7856b0c8e9bfe646bc96b"
+  "gitHead": "7d33bf5a7b16517545dbbb64cbc5e9ecf45162a7"
 }

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

@@ -8,10 +8,10 @@ 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'
+import { SolanaErrorModal } from '../../SolanaErrorModal'
 
 /**
  * Lend pool supply props
@@ -81,7 +81,8 @@ export function SolanaBorrow({
         />
       )}
       {step === WIDGET_STEP.Error && (
-        <ErrorModal
+        <SolanaErrorModal
+          chainId={poolInfo.chainId}
           title={title}
           errorReason='Sorry there was an error'
           errorMessage={errorMessage}

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

@@ -8,10 +8,10 @@ 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'
+import { SolanaErrorModal } from '../../SolanaErrorModal'
 
 /**
  * Lend pool supply props
@@ -74,7 +74,8 @@ export function SolanaPayment({
         <Done poolInfo={poolInfo} handleAction={handleClose} />
       )}
       {step === WIDGET_STEP.Error && (
-        <ErrorModal
+        <SolanaErrorModal
+          chainId={poolInfo.chainId}
           title={title}
           errorReason='Sorry there was an error'
           errorMessage={errorMessage}

package/src/components/ErrorModal.tsx

@@ -4,6 +4,7 @@ import { txAtom } from '@huma-finance/web-shared'
 import { useResetAtom } from 'jotai/utils'
 import React, { useCallback } from 'react'
 
+import { openInNewTab } from '@huma-finance/shared'
 import { useAppDispatch } from '../hooks/useRedux'
 import { resetState } from '../store/widgets.reducers'
 import { SorryImg } from './images'
@@ -12,6 +13,7 @@ type Props = {
   title: string
   errorReason?: string
   errorMessage?: string
+  errorUrl?: string
   handleOk: () => void
   okText?: string
   shouldResetState?: boolean
@@ -21,6 +23,7 @@ export function ErrorModal({
   title,
   errorReason,
   errorMessage,
+  errorUrl,
   handleOk,
   okText = 'OKAY',
   shouldResetState = true,
@@ -85,11 +88,17 @@ export function ErrorModal({
       text-overflow: ellipsis;
       margin-right: ${theme.spacing(2)};
     `,
-    okButton: css`
-      & .MuiButtonBase-root {
-        width: 100%;
-        position: absolute;
-        bottom: 0;
+    bottomButtonGroup: css`
+      width: 100%;
+      position: absolute;
+      bottom: 0;
+      display: flex;
+      row-gap: ${theme.spacing(1)};
+      column-gap: ${theme.spacing(1)};
+
+      button {
+        height: 40px;
+        margin-top: ${theme.spacing(1)};
       }
     `,
   }
@@ -119,8 +128,17 @@ export function ErrorModal({
           </Tooltip>
         </Box>
       </Box>
-      <Box css={styles.okButton}>
-        <Button variant='contained' onClick={handleCloseModal}>
+      <Box css={styles.bottomButtonGroup}>
+        {errorUrl && (
+          <Button
+            variant='outlined'
+            fullWidth
+            onClick={() => openInNewTab(errorUrl)}
+          >
+            SEE DETAILS
+          </Button>
+        )}
+        <Button variant='contained' fullWidth onClick={handleCloseModal}>
           {okText}
         </Button>
       </Box>

package/src/components/Lend/components/PersonaEvaluation.tsx

@@ -9,7 +9,7 @@ import {
   NETWORK_TYPE,
   VerificationStatusResultV2,
 } from '@huma-finance/shared'
-import { useAuthErrorHandling } from '@huma-finance/web-shared'
+import { AUTH_ERROR_TYPE, useAuthErrorHandling } from '@huma-finance/web-shared'
 import { Box, css, useTheme } from '@mui/material'
 import Persona, { Client } from 'persona'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
@@ -50,8 +50,8 @@ export function PersonaEvaluation({
   const isDev = checkIsDev()
   const dispatch = useAppDispatch()
   const {
-    errorType,
-    setError: setAuthError,
+    authErrorType,
+    setAuthError,
     isWalletOwnershipVerified,
     isWalletOwnershipVerificationRequired,
   } = useAuthErrorHandling(isDev, chainType)
@@ -207,23 +207,23 @@ export function PersonaEvaluation({
   }, [checkVerificationStatus, verificationStatus?.status])
 
   useEffect(() => {
-    if (errorType === 'NotSignedIn') {
+    if (authErrorType === AUTH_ERROR_TYPE.NotSignedIn) {
       setLoadingType(undefined)
       setKYCCopy(KYCCopies.signInRequired)
-    } else if (errorType === 'UserRejected') {
+    } else if (authErrorType === AUTH_ERROR_TYPE.UserRejected) {
       dispatch(
         setError({
           errorMessage: 'User has rejected the transaction.',
         }),
       )
-    } else if (errorType === 'Other') {
+    } else if (authErrorType === AUTH_ERROR_TYPE.Other) {
       dispatch(
         setError({
           errorMessage: 'Something went wrong. Please try again later.',
         }),
       )
     }
-  }, [KYCCopies.signInRequired, dispatch, errorType])
+  }, [KYCCopies.signInRequired, dispatch, authErrorType])
 
   useEffect(() => {
     const modalElement = document.getElementById('huma-modal')

package/src/components/Lend/components/SecuritizeEvaluation.tsx

@@ -16,11 +16,11 @@ import { useWeb3React } from '@web3-react/core'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { useAppDispatch } from '../../../hooks/useRedux'
 import { setError } from '../../../store/widgets.reducers'
+import { BottomButton } from '../../BottomButton'
 import { HumaSnackBar } from '../../HumaSnackBar'
+import { LoadingModal } from '../../LoadingModal'
 import { WrapperModal } from '../../WrapperModal'
 import { ApproveLenderImg } from '../../images'
-import { BottomButton } from '../../BottomButton'
-import { LoadingModal } from '../../LoadingModal'
 
 const LoadingCopiesByType: {
   [key: string]: {
@@ -49,11 +49,8 @@ export function SecuritizeEvaluation({
   const dispatch = useAppDispatch()
   const { account, chainId } = useWeb3React()
   const { kycProvider, code, kycPool } = useParamsSearch()
-  const {
-    isWalletOwnershipVerified,
-    setError: setAuthError,
-    error: authError,
-  } = useAuthErrorHandling(isDev)
+  const { isWalletOwnershipVerified, setAuthError, authError } =
+    useAuthErrorHandling(isDev)
   const [loadingType, setLoadingType] = useState<
     'verificationStatus' | 'sendDocSignatureLink'
   >()

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

@@ -14,10 +14,10 @@ import { WidgetWrapper } from '../../WidgetWrapper'
 import { WIDGET_STEP } from '../../../store/widgets.store'
 import { ChooseAmount } from './2-ChooseAmount'
 import { setStep } from '../../../store/widgets.reducers'
-import { ErrorModal } from '../../ErrorModal'
 import { ChooseTranche } from './1-ChooseTranche'
 import { Done } from './4-Done'
 import { Transfer } from './3-Transfer'
+import { SolanaErrorModal } from '../../SolanaErrorModal'
 
 /**
  * Lend pool supply props
@@ -143,7 +143,8 @@ export function SolanaLendAddRedemption({
         <Done poolInfo={poolInfo} handleAction={handleClose} />
       )}
       {step === WIDGET_STEP.Error && (
-        <ErrorModal
+        <SolanaErrorModal
+          chainId={poolInfo.chainId}
           title={title}
           errorReason='Sorry there was an error'
           errorMessage={errorMessage}

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

@@ -9,10 +9,10 @@ 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 { Transfer } from './2-Transfer'
 import { ChooseTranche } from './1-ChooseTranche'
 import { Done } from './3-Done'
+import { SolanaErrorModal } from '../../SolanaErrorModal'
 
 /**
  * Lend pool supply props
@@ -150,7 +150,8 @@ export function SolanaLendCancelRedemption({
         />
       )}
       {step === WIDGET_STEP.Error && (
-        <ErrorModal
+        <SolanaErrorModal
+          chainId={poolInfo.chainId}
           title={title}
           errorReason='Sorry there was an error'
           errorMessage={errorMessage}

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

@@ -7,11 +7,11 @@ import { useAppSelector } from '../../../hooks/useRedux'
 import { setStep } from '../../../store/widgets.reducers'
 import { selectWidgetState } from '../../../store/widgets.selectors'
 import { WIDGET_STEP } from '../../../store/widgets.store'
-import { ErrorModal } from '../../ErrorModal'
 import { WidgetWrapper } from '../../WidgetWrapper'
 import { Transfer } from './2-Transfer'
 import { Success } from './3-Success'
 import { ApproveAllowance } from './1-ApproveAllowance'
+import { SolanaErrorModal } from '../../SolanaErrorModal'
 
 /**
  * Lend pool supply props
@@ -64,7 +64,8 @@ export function SolanaEnableAutoRedemption({
         />
       )}
       {step === WIDGET_STEP.Error && (
-        <ErrorModal
+        <SolanaErrorModal
+          chainId={poolInfo.chainId}
           title='Auto-Redemption'
           errorReason='Sorry there was an error'
           errorMessage={errorMessage}

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

@@ -16,7 +16,6 @@ import { useAppSelector } from '../../../hooks/useRedux'
 import { setStep } from '../../../store/widgets.reducers'
 import { selectWidgetState } from '../../../store/widgets.selectors'
 import { WIDGET_STEP } from '../../../store/widgets.store'
-import { ErrorModal } from '../../ErrorModal'
 import { PointsEarned } from '../../PointsEarned'
 import { WidgetWrapper } from '../../WidgetWrapper'
 import { Evaluation } from './1-Evaluation'
@@ -26,6 +25,7 @@ import { ChooseAmount } from './4-ChooseAmount'
 import { ApproveAllowance } from './5-ApproveAllowance'
 import { Transfer } from './6-Transfer'
 import { Success } from './7-Success'
+import { SolanaErrorModal } from '../../SolanaErrorModal'
 
 export interface Campaign {
   id: string
@@ -182,7 +182,8 @@ export function SolanaLendSupply({
         <PointsEarned lpConfig={poolState} handleAction={handleClose} />
       )}
       {step === WIDGET_STEP.Error && (
-        <ErrorModal
+        <SolanaErrorModal
+          chainId={poolInfo.chainId}
           title='Supply'
           errorReason='Sorry there was an error'
           errorMessage={errorMessage}

package/src/components/Lend/supply/1-Evaluation/EvaluationKYC.tsx

@@ -86,11 +86,8 @@ export function EvaluationKYC({
   const isDev = checkIsDev()
   const { account, chainId } = useWeb3React()
   const { kycProvider, code, kycPool } = useParamsSearch()
-  const {
-    isWalletOwnershipVerified,
-    setError: setAuthError,
-    error: authError,
-  } = useAuthErrorHandling(isDev)
+  const { isWalletOwnershipVerified, setAuthError, authError } =
+    useAuthErrorHandling(isDev)
   const [loadingType, setLoadingType] = useState<
     'verificationStatus' | 'sendDocSignatureLink'
   >()

package/src/components/SolanaErrorModal.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+
+import { getSolanaExplorerUrl, SolanaChainEnum } from '@huma-finance/shared'
+import { useAppSelector } from '../hooks/useRedux'
+import { ErrorModal } from './ErrorModal'
+import { selectWidgetState } from '../store/widgets.selectors'
+
+type Props = {
+  chainId: SolanaChainEnum
+  title: string
+  errorReason?: string
+  errorMessage?: string
+  handleOk: () => void
+  okText?: string
+  shouldResetState?: boolean
+}
+
+export function SolanaErrorModal({
+  chainId,
+  title,
+  errorReason,
+  errorMessage,
+  handleOk,
+  okText = 'OKAY',
+  shouldResetState = true,
+}: Props): React.ReactElement {
+  const { solanaSignature } = useAppSelector(selectWidgetState)
+  const errorUrl = solanaSignature
+    ? getSolanaExplorerUrl(chainId, solanaSignature, 'tx')
+    : undefined
+
+  return (
+    <ErrorModal
+      title={title}
+      errorReason={errorReason}
+      errorMessage={errorMessage}
+      errorUrl={errorUrl ?? undefined}
+      handleOk={handleOk}
+      okText={okText}
+      shouldResetState={shouldResetState}
+    />
+  )
+}

package/src/components/SolanaTxSendModal.tsx

@@ -1,5 +1,5 @@
 import { sleep, SolanaChainEnum } from '@huma-finance/shared'
-import React, { useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import {
   buildOptimalTransactionFromConnection,
   extractWritableAccounts,
@@ -7,10 +7,13 @@ import {
 
 import { useConnection, useWallet } from '@solana/wallet-adapter-react'
 import { Transaction } from '@solana/web3.js'
+import { useForceRefresh } from '@huma-finance/web-shared'
+import { Box, Button, css, Typography, useTheme } from '@mui/material'
 import { useAppDispatch } from '../hooks/useRedux'
 import { setError, setSolanaSignature } from '../store/widgets.reducers'
 import { LoadingModal } from './LoadingModal'
 import { SolanaViewOnExplorer } from './SolanaViewOnExplorer'
+import { SorryImg } from './images'
 
 type Props = {
   chainId: SolanaChainEnum
@@ -23,25 +26,78 @@ export function SolanaTxSendModal({
   tx,
   handleSuccess,
 }: Props): React.ReactElement | null {
+  const theme = useTheme()
   const dispatch = useAppDispatch()
-  const { sendTransaction } = useWallet()
+  const { publicKey, signTransaction, sendTransaction } = useWallet()
   const { connection } = useConnection()
   const [signature, setSignature] = useState<string>('')
+  const [showRetryScreen, setShowRetryScreen] = useState<boolean>(false)
+  const [useHighPriority, setUseHighPriority] = useState<boolean>(false)
+  const [refreshCount, refresh] = useForceRefresh()
+
+  const styles = {
+    wrapper: css`
+      height: 438px;
+      position: relative;
+    `,
+    sorry: css`
+      ${theme.cssMixins.rowHCentered};
+      margin-top: ${theme.spacing(12)};
+      margin-right: ${theme.spacing(4)};
+      & > img {
+        width: 170px;
+      }
+    `,
+    bottomButtonGroup: css`
+      width: 100%;
+      position: absolute;
+      bottom: 0;
+      display: flex;
+      flex-direction: column;
+      row-gap: ${theme.spacing(1)};
+      column-gap: ${theme.spacing(1)};
+
+      button {
+        height: 40px;
+        margin-top: ${theme.spacing(1)};
+      }
+    `,
+    content: css`
+      margin-top: ${theme.spacing(2)};
+      font-size: 16px;
+    `,
+    retryHighPriorityButton: css`
+      font-size: 16px;
+    `,
+  }
 
   useEffect(() => {
     async function sendTx() {
-      if (!connection || !tx) {
+      if (!connection || !tx || !publicKey || !signTransaction) {
         return
       }
 
       let signatureResult = ''
       try {
         // Optimize transaction
-        const lockedWritableAccounts = extractWritableAccounts(tx)
+        // Make a copy of the tx so we can use the original tx for retries
+        const txCopy = new Transaction()
+        txCopy.instructions = [...tx.instructions]
+        const recentBlockhash = await connection.getLatestBlockhash('confirmed')
+        txCopy.recentBlockhash = recentBlockhash.blockhash
+        txCopy.lastValidBlockHeight = recentBlockhash.lastValidBlockHeight
+        txCopy.feePayer = publicKey
+        // Extract writable accounts
+        const txAccounts = extractWritableAccounts(txCopy)
+        // Add on compute unit limit + price instructions
         const optimizedTx = await buildOptimalTransactionFromConnection(
-          tx,
-          lockedWritableAccounts,
+          txCopy,
+          txAccounts,
           connection,
+          chainId,
+          publicKey,
+          useHighPriority ? 'High' : undefined,
+          process.env.REACT_APP_HELIUS_API_KEY,
         )
         signatureResult = await sendTransaction(optimizedTx, connection, {
           preflightCommitment: 'confirmed',
@@ -54,10 +110,24 @@ export function SolanaTxSendModal({
           lastValidBlockHeight: optimizedTx.lastValidBlockHeight!,
           signature: signatureResult,
         })
+        const txResult = await connection.getParsedTransaction(
+          signatureResult,
+          'confirmed',
+        )
+        if (txResult?.meta?.err) {
+          dispatch(
+            setError({
+              errorMessage:
+                'Your transaction was confirmed but had errors. Please check the transaction details on the explorer for more information.',
+            }),
+          )
+          return
+        }
         handleSuccess({ signature: signatureResult })
       } catch (error: unknown) {
-        let signatureStatusRetries = 0
+        console.log(error)
 
+        let signatureStatusRetries = 0
         while (signatureStatusRetries < 5) {
           // Attempt to load the signature status using transaction history
           // eslint-disable-next-line no-await-in-loop
@@ -70,6 +140,15 @@ export function SolanaTxSendModal({
             result?.value?.confirmationStatus === 'finalized' ||
             result?.value?.confirmationStatus === 'confirmed'
           ) {
+            if (result?.value?.err) {
+              dispatch(
+                setError({
+                  errorMessage:
+                    'Your transaction was confirmed but had errors. Please check the transaction details on the explorer for more information.',
+                }),
+              )
+              return
+            }
             handleSuccess({ signature: signatureResult })
             return
           }
@@ -78,11 +157,70 @@ export function SolanaTxSendModal({
         }
 
         const err = error as Error
-        dispatch(setError({ errorMessage: err?.message || '' }))
+        if (err?.message?.includes('block height exceeded')) {
+          // Allow the user to retry the transaction
+          setShowRetryScreen(true)
+        } else {
+          dispatch(setError({ errorMessage: err?.message || '' }))
+        }
       }
     }
     sendTx()
-  }, [connection, dispatch, handleSuccess, sendTransaction, tx])
+  }, [
+    chainId,
+    connection,
+    dispatch,
+    handleSuccess,
+    publicKey,
+    sendTransaction,
+    signTransaction,
+    tx,
+    refreshCount,
+    useHighPriority,
+  ])
+
+  const handleRetry = useCallback(
+    (highPriority: boolean) => {
+      console.log('handleRetry')
+      setUseHighPriority(highPriority)
+      setShowRetryScreen(false)
+      refresh()
+    },
+    [refresh],
+  )
+
+  if (showRetryScreen) {
+    return (
+      <Box css={styles.wrapper}>
+        <Box css={styles.sorry}>
+          <img src={SorryImg} alt='sorry' />
+        </Box>
+        <Typography variant='h6'>Block Height Exceeded</Typography>
+        <Box css={styles.content}>
+          Your transaction was unable to be confirmed in time. This can happen
+          when the network is congested. Please retry submitting your
+          transaction or retry with a higher priority fee.
+        </Box>
+        <Box css={styles.bottomButtonGroup}>
+          <Button
+            variant='outlined'
+            fullWidth
+            onClick={() => handleRetry(false)}
+          >
+            RETRY
+          </Button>
+          <Button
+            css={styles.retryHighPriorityButton}
+            variant='contained'
+            fullWidth
+            onClick={() => handleRetry(true)}
+          >
+            RETRY (HIGH PRIORITY)
+          </Button>
+        </Box>
+      </Box>
+    )
+  }
 
   return (
     <LoadingModal

package/src/hooks/useEA.ts

@@ -20,7 +20,7 @@ const useEA = () => {
   const {
     isWalletOwnershipVerificationRequired,
     isWalletOwnershipVerified,
-    setError: setAuthError,
+    setAuthError,
   } = useAuthErrorHandling(checkIsDev())
 
   const checkingEA = useCallback(