@huma-finance/widgets 0.0.72-beta.883 → 0.0.72-beta.895

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huma-finance/widgets",
-  "version": "0.0.72-beta.883+c4af575",
+  "version": "0.0.72-beta.895+0df1d3a",
   "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.883+c4af575",
-    "@huma-finance/shared": "^0.0.72-beta.883+c4af575",
-    "@huma-finance/web-shared": "^0.0.72-beta.883+c4af575",
+    "@huma-finance/sdk": "^0.0.72-beta.895+0df1d3a",
+    "@huma-finance/shared": "^0.0.72-beta.895+0df1d3a",
+    "@huma-finance/web-shared": "^0.0.72-beta.895+0df1d3a",
     "@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": "c4af575e22fe85c2e554886d83d567a2a3465d7f"
+  "gitHead": "0df1d3a122dc84c3d351becf9ef5a99f578b436f"
 }

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/ApproveLenderBase.tsx

@@ -2,14 +2,15 @@
 import {
   CHAIN_TYPE,
   checkIsDev,
+  COMMON_ERROR_MESSAGE,
   IdentityServiceV2,
   NETWORK_TYPE,
+  SOLANA_TRANSACTION_EXPIRED_BLOCKHEIGHT_EXCEEDED_ERROR,
   timeUtil,
   TrancheType,
 } from '@huma-finance/shared'
 import { useChainInfo } from '@huma-finance/web-shared'
 import React, { useCallback, useEffect } from 'react'
-
 import { useAppDispatch } from '../../../hooks/useRedux'
 import { setError, setStep } from '../../../store/widgets.reducers'
 import { WIDGET_STEP } from '../../../store/widgets.store'
@@ -59,11 +60,7 @@ export function ApproveLenderBase({
           tryAttempts = 0
         } catch (e: unknown) {
           if (tryAttempts === 0) {
-            dispatch(
-              setError({
-                errorMessage: 'Something went wrong, please try again later.',
-              }),
-            )
+            throw e
           } else {
             await timeUtil.sleep(3000)
             console.error(e)
@@ -71,28 +68,38 @@ export function ApproveLenderBase({
         }
       }
     },
-    [
-      account,
-      chainId,
-      chainSpecificData,
-      dispatch,
-      documentHash,
-      isDev,
-      networkType,
-    ],
+    [account, chainId, chainSpecificData, documentHash, isDev, networkType],
   )
 
   useEffect(() => {
     const approveLenderAsync = async () => {
       if (account && chainId) {
-        if (isUniTranche) {
-          await approveLender(juniorTrancheVault)
-          changeTranche('junior')
-          dispatch(setStep(WIDGET_STEP.ChooseAmount))
-        } else {
-          await approveLender(juniorTrancheVault)
-          await approveLender(seniorTrancheVault)
-          dispatch(setStep(WIDGET_STEP.ChooseTranche))
+        try {
+          if (isUniTranche) {
+            await approveLender(juniorTrancheVault)
+            changeTranche('junior')
+            dispatch(setStep(WIDGET_STEP.ChooseAmount))
+          } else {
+            await approveLender(juniorTrancheVault)
+            await approveLender(seniorTrancheVault)
+            dispatch(setStep(WIDGET_STEP.ChooseTranche))
+          }
+        } catch (e: unknown) {
+          console.error(e)
+          // @ts-ignore
+          let errorMessage = e.message ?? COMMON_ERROR_MESSAGE
+          if (
+            errorMessage.indexOf(
+              SOLANA_TRANSACTION_EXPIRED_BLOCKHEIGHT_EXCEEDED_ERROR,
+            ) >= 0
+          ) {
+            errorMessage = `Transaction failed due to blockchain congestion. Please try again.`
+          }
+          dispatch(
+            setError({
+              errorMessage,
+            }),
+          )
         }
       }
     }

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/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