fix: dont use sentry's error boundary for tx decoding

apps/extension/src/@talisman/components/FallbackErrorBoundary.tsx

@@ -0,0 +1,43 @@
+import { log } from "extension-shared"
+import { Component, ErrorInfo, ReactNode } from "react"
+
+interface FallbackErrorBoundaryProps {
+  children: ReactNode
+  fallback: ReactNode
+}
+
+interface FallbackErrorBoundaryState {
+  hasError: boolean
+}
+
+/**
+ * Error boundary that catches errors in its children and renders a fallback UI.
+ * Use this if you don't want to use the Sentry error boundary.
+ */
+export class FallbackErrorBoundary extends Component<
+  FallbackErrorBoundaryProps,
+  FallbackErrorBoundaryState
+> {
+  constructor(props: FallbackErrorBoundaryProps) {
+    super(props)
+    this.state = { hasError: false }
+  }
+
+  static getDerivedStateFromError(_: Error): FallbackErrorBoundaryState {
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true }
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo): void {
+    log.warn("FallbackErrorBoundary caught an error", { error, info })
+  }
+
+  render() {
+    if (this.state.hasError) {
+      // Render the provided fallback UI
+      return this.props.fallback
+    }
+
+    return this.props.children
+  }
+}

apps/extension/src/ui/domains/Sign/Ethereum/EthSignBody.tsx

@@ -1,6 +1,6 @@
-import { ErrorBoundary, FallbackRender } from "@sentry/react"
 import { FC } from "react"
 
+import { FallbackErrorBoundary } from "@talisman/components/FallbackErrorBoundary"
 import { DecodedEvmTransaction } from "@ui/domains/Ethereum/util/decodeEvmTransaction"
 
 import { SignViewBodyShimmer } from "../Views/SignViewBodyShimmer"
@@ -71,18 +71,16 @@ const getComponentFromKnownContractCall = (decodedTx: DecodedEvmTransaction) =>
   }
 }
 
-const Fallback: FallbackRender = () => <EthSignBodyDefault />
-
 export const EthSignBody: FC<EthSignBodyProps> = ({ decodedTx, isReady }) => {
   if (!isReady || !decodedTx) return <SignViewBodyShimmer />
 
   const Component = getComponentFromKnownContractCall(decodedTx)
 
   if (Component)
     return (
-      <ErrorBoundary fallback={Fallback}>
+      <FallbackErrorBoundary fallback={<EthSignBodyDefault />}>
         <Component />
-      </ErrorBoundary>
+      </FallbackErrorBoundary>
     )
 
   return <EthSignBodyDefault />

apps/extension/src/ui/domains/Sign/Substrate/decode/SubSignDecodedCallButtonContent.tsx

@@ -1,6 +1,6 @@
-import { ErrorBoundary } from "@sentry/react"
 import { FC } from "react"
 
+import { FallbackErrorBoundary } from "@talisman/components/FallbackErrorBoundary"
 import { DecodedCall } from "@ui/util/scaleApi"
 
 import { SUMMARY_COMPONENTS } from "../summary/calls"
@@ -22,8 +22,8 @@ export const SubSignDecodedCallButtonContent: DecodedCallComponent<
   if (!Component) return <ContentFallback decodedCall={props.decodedCall} />
 
   return (
-    <ErrorBoundary fallback={<ContentFallback decodedCall={props.decodedCall} />}>
+    <FallbackErrorBoundary fallback={<ContentFallback decodedCall={props.decodedCall} />}>
       <Component {...props} mode={props.mode} />
-    </ErrorBoundary>
+    </FallbackErrorBoundary>
   )
 }

apps/extension/src/ui/domains/Sign/Substrate/decode/SubSignDecodedCallContent.tsx

@@ -1,4 +1,3 @@
-import { ErrorBoundary } from "@sentry/react"
 import { LoaderIcon } from "@talismn/icons"
 import { classNames, encodeAnyAddress } from "@talismn/util"
 import DOMPurify from "dompurify"
@@ -12,6 +11,7 @@ import { FC, Suspense, useMemo } from "react"
 import { useTranslation } from "react-i18next"
 
 import { CodeBlock } from "@talisman/components/CodeBlock"
+import { FallbackErrorBoundary } from "@talisman/components/FallbackErrorBoundary"
 import { DecodedCall, ScaleApi } from "@ui/util/scaleApi"
 
 import { SubSignDecodedCallSummaryBlock } from "./SubSignDecodedCallSummaryBlock"
@@ -21,15 +21,15 @@ export const SubSignDecodedCallContent: FC<{
   sapi: ScaleApi
   payload: SignerPayloadJSON
 }> = ({ decodedCall, sapi, payload }) => (
-  <ErrorBoundary fallback={() => <ErrorFallback decodedCall={decodedCall} sapi={sapi} />}>
+  <FallbackErrorBoundary fallback={<ErrorFallback decodedCall={decodedCall} sapi={sapi} />}>
     <Suspense fallback={<LoadingShimmer />}>
       <div className="text-body-secondary flex flex-col gap-4 text-sm">
         {/* Summary can suspense to fetch additional data, and break if a chain uses incompatible types */}
         <SubSignDecodedCallSummaryBlock decodedCall={decodedCall} sapi={sapi} payload={payload} />
         <DefaultView decodedCall={decodedCall} sapi={sapi} />
       </div>
     </Suspense>
-  </ErrorBoundary>
+  </FallbackErrorBoundary>
 )
 
 const ErrorFallback: FC<{

apps/extension/src/ui/domains/Sign/Substrate/decode/SubSignDecodedCallSummaryBlock.tsx

@@ -1,4 +1,4 @@
-import { ErrorBoundary } from "@sentry/react"
+import { FallbackErrorBoundary } from "@talisman/components/FallbackErrorBoundary"
 
 import { SUMMARY_COMPONENTS } from "../summary/calls"
 import { DecodedCallComponent } from "../types"
@@ -10,8 +10,8 @@ export const SubSignDecodedCallSummaryBlock: DecodedCallComponent<unknown> = (pr
   if (!Component) return null
 
   return (
-    <ErrorBoundary>
+    <FallbackErrorBoundary fallback={null}>
       <Component {...props} mode="block" />
-    </ErrorBoundary>
+    </FallbackErrorBoundary>
   )
 }