Merge pull request #217 from reservoirprotocol/pedro/relay-5409-commu…

…nicate-better-when-a-deposit-transaction-is-not Communicate better when a deposit transaction is not
reservoirprotocol · Aug 13, 2024 · 62d12a4 · 62d12a4
2 parents b403c99 + 2cd9327
commit 62d12a4
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 15 deletions.
diff --git a/.changeset/neat-islands-poke.md b/.changeset/neat-islands-poke.md
@@ -0,0 +1,5 @@
+---
+'@reservoir0x/relay-kit-ui': patch
+---
+
+Improve tx error messaging
diff --git a/packages/ui/src/components/common/ErrorWell.tsx b/packages/ui/src/components/common/ErrorWell.tsx
@@ -4,9 +4,10 @@ import type { AxiosError } from 'axios'
 
 interface Props {
   error?: Error | null | AxiosError
+  hasTxHashes?: boolean
 }
 
-const ErrorWell: React.FC<Props> = ({ error }) => {
+const ErrorWell: React.FC<Props> = ({ error, hasTxHashes }) => {
   const renderedErrorMessage = React.useMemo((): React.ReactNode => {
     if (error && ((error as AxiosError).response?.data as any)?.message) {
       return (error as any).response?.data?.message
@@ -17,8 +18,13 @@ const ErrorWell: React.FC<Props> = ({ error }) => {
     ) {
       return 'Oops! Something went wrong while processing your transaction.'
     }
+    if (!hasTxHashes) {
+      return 'Oops, something went wrong while initiating the bridge. Your request was not submitted. Please try again.'
+    } else if (error?.message?.includes('solver status check')) {
+      return `Oops, it seems we can't check the status of your transaction at the moment. Please visit the transaction page for more details.`
+    }
     return error?.message
-  }, [error?.message])
+  }, [error?.message, hasTxHashes])
 
   return (
     <Text

diff --git a/packages/ui/src/components/common/TransactionModal/steps/ErrorStep.tsx b/packages/ui/src/components/common/TransactionModal/steps/ErrorStep.tsx
@@ -79,7 +79,10 @@ export const ErrorStep: FC<ErrorStepProps> = ({
         </>
       ) : (
         <>
-          <ErrorWell error={error} />
+          <ErrorWell
+            error={error}
+            hasTxHashes={allTxHashes && allTxHashes.length > 0}
+          />
           {allTxHashes.map(({ txHash }) => {
             return (
               <Anchor
@@ -92,18 +95,33 @@ export const ErrorStep: FC<ErrorStepProps> = ({
             )
           })}
 
-          <Button
-            onClick={() => {
-              onOpenChange(false)
-            }}
-            css={{
-              mt: 12,
-              justifyContent: 'center',
-              width: '100%'
-            }}
-          >
-            Done
-          </Button>
+          {allTxHashes && allTxHashes.length > 0 ? (
+            <Button
+              onClick={() => {
+                onOpenChange(false)
+              }}
+              css={{
+                mt: 12,
+                justifyContent: 'center',
+                width: '100%'
+              }}
+            >
+              Done
+            </Button>
+          ) : (
+            <Button
+              onClick={() => {
+                onOpenChange(false)
+              }}
+              css={{
+                mt: 12,
+                justifyContent: 'center',
+                width: '100%'
+              }}
+            >
+              Retry
+            </Button>
+          )}
         </>
       )}
     </Flex>