feat: new logo and Error ID in error boundary (#1774)

* feat: new logo and `Error ID` in error boundary

* fix: white `Oops!`

.changeset/chilled-badgers-exercise.md

@@ -0,0 +1,5 @@
+---
+"@talismn/icons": patch
+---
+
+feat: updated error hand logo

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

@@ -1,9 +1,9 @@
-import { Component, ErrorInfo, FC, ReactNode } from "react"
+import { Component, ErrorInfo, ReactNode } from "react"
 import { ProcessAnimation } from "talisman-ui"
 
 import { MIGRATION_ERROR_MSG } from "@extension/core"
 
-const ErrorMessage: FC = () => (
+const ErrorMessage = () => (
   <div className="text-whit mx-auto flex h-[60rem] w-[40rem] flex-col px-12 py-16 text-center">
     <div className="flex grow flex-col justify-center font-bold">
       <div className="text-xl">Updating Talisman</div>

apps/extension/src/@talisman/components/ErrorBoundary.tsx → apps/extension/src/@talisman/components/TalismanErrorBoundary.tsx

@@ -1,43 +1,52 @@
 import { ErrorBoundary as SentryErrorBoundary } from "@sentry/react"
 import { TalismanDeadHandIcon } from "@talismn/icons"
 import { DexieError } from "dexie"
-import { FC, ReactNode, useCallback } from "react"
+import { ReactNode, useCallback } from "react"
 import { Button } from "talisman-ui"
 
 import { DEBUG, DISCORD_TALISMAN_URL } from "@extension/shared"
 
-const ErrorMessage: FC<{ error: unknown }> = ({ error }) => {
+export const TalismanErrorBoundary = ({ children }: { children?: ReactNode }) => (
+  <SentryErrorBoundary fallback={ErrorMessage}>{children}</SentryErrorBoundary>
+)
+
+function ErrorMessage({ error, eventId }: { error: unknown; eventId?: string }) {
   const isDbVersionError = (error as DexieError)?.inner?.name === "VersionError"
   const canClearDatabases = DEBUG && isDbVersionError
   const errorMessage = isDbVersionError
-    ? "Invalid database version."
-    : "Sorry, an error occurred in Talisman."
+    ? "Invalid database version"
+    : "Sorry, an error occurred in Talisman"
 
   const clearDatabases = useCallback(() => {
     indexedDB.deleteDatabase("Talisman")
     indexedDB.deleteDatabase("TalismanBalances")
     indexedDB.deleteDatabase("TalismanChaindata")
     indexedDB.deleteDatabase("TalismanConnectionMeta")
-    alert("Databases cleared. Please click OK for Talisman to reinitialise.")
+    alert("Databases cleared. Please click OK for Talisman to reinitialise")
     chrome.runtime.reload()
   }, [])
 
   return (
     <section className="max-w-screen text-body-secondary mx-auto flex h-[60rem] max-h-screen w-[40rem] flex-col overflow-hidden p-10 text-center">
       <div className="flex w-full flex-grow flex-col items-center justify-center gap-16">
-        <h1 className="m-0 text-3xl font-bold">Oops!</h1>
-        <TalismanDeadHandIcon className="text-alert-error text-[20rem]" />
+        <h1 className="m-0 text-3xl font-bold text-white">Oops!</h1>
+        <TalismanDeadHandIcon className="text-[16rem]" />
         <div className="flex flex-col gap-2">
           <div>{errorMessage}</div>
           {!canClearDatabases && (
-            <a
-              className="text-primary/80 hover:text-primary focus:text-primary"
-              href={DISCORD_TALISMAN_URL}
-              target="_blank"
-              rel="noreferrer noopener"
-            >
-              Contact us on Discord for support.
-            </a>
+            <>
+              <a
+                className="text-primary/80 hover:text-primary focus:text-primary"
+                href={DISCORD_TALISMAN_URL}
+                target="_blank"
+                rel="noreferrer noopener"
+              >
+                Contact us on Discord for support
+              </a>
+              {eventId ? (
+                <div className="text-tiny mt-8 text-white/40">Error ID:&nbsp;{eventId}</div>
+              ) : null}
+            </>
           )}
         </div>
       </div>
@@ -54,11 +63,3 @@ const ErrorMessage: FC<{ error: unknown }> = ({ error }) => {
     </section>
   )
 }
-
-export const ErrorBoundary = ({ children }: { children?: ReactNode }) => {
-  return (
-    <SentryErrorBoundary fallback={({ error }) => <ErrorMessage error={error} />}>
-      {children}
-    </SentryErrorBoundary>
-  )
-}

apps/extension/src/ui/apps/popup/Layout/PopupLayout.tsx

@@ -10,8 +10,8 @@ import {
 } from "react"
 import { useLocation } from "react-router-dom"
 
-import { ErrorBoundary } from "@talisman/components/ErrorBoundary"
 import { ScrollContainer } from "@talisman/components/ScrollContainer"
+import { TalismanErrorBoundary } from "@talisman/components/TalismanErrorBoundary"
 import { HandMonoLogo } from "@talisman/theme/logos"
 import { api } from "@ui/api"
 
@@ -89,7 +89,7 @@ export const PopupLayout: FC<ContainerProps> = ({ className, children, ...props
       {...props}
       className={classNames("relative flex h-full w-full flex-col overflow-hidden", className)}
     >
-      <ErrorBoundary>{children}</ErrorBoundary>
+      <TalismanErrorBoundary>{children}</TalismanErrorBoundary>
     </main>
   )
 }

apps/extension/src/ui/apps/popup/pages/Portfolio/index.tsx

@@ -1,10 +1,10 @@
-import { ErrorBoundary } from "@sentry/react"
 import { classNames } from "@talismn/util"
 import { FC, PropsWithChildren, Suspense, useEffect, useRef } from "react"
 import { Route, Routes, useLocation } from "react-router-dom"
 
 import { ScrollContainer } from "@talisman/components/ScrollContainer"
 import { SuspenseTracker } from "@talisman/components/SuspenseTracker"
+import { TalismanErrorBoundary } from "@talisman/components/TalismanErrorBoundary"
 import { PortfolioContainer } from "@ui/domains/Portfolio/PortfolioContainer"
 import BraveWarningPopupBanner from "@ui/domains/Settings/BraveWarning/BraveWarningPopupBanner"
 import MigratePasswordAlert from "@ui/domains/Settings/MigratePasswordAlert"
@@ -51,15 +51,15 @@ const Content: FC<PropsWithChildren> = ({ children }) => {
 export const Portfolio = () => (
   <PortfolioContainer renderWhileLoading>
     <div id="main" className="relative size-full overflow-hidden">
-      <ErrorBoundary>
+      <TalismanErrorBoundary>
         <Content>
           <div className="flex size-full flex-col gap-4 py-8">
             <PortfolioRoutes />
             <BottomNav />
           </div>
         </Content>
         <NavigationDrawer />
-      </ErrorBoundary>
+      </TalismanErrorBoundary>
     </div>
   </PortfolioContainer>
 )

apps/extension/src/ui/index.tsx

@@ -2,15 +2,15 @@ import "@talisman/theme/styles.css"
 
 import { Subscribe } from "@react-rxjs/core"
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
-import React, { ReactNode, Suspense } from "react"
+import { ReactNode, StrictMode, Suspense } from "react"
 import { createRoot } from "react-dom/client"
 import { HashRouter } from "react-router-dom"
 import { FontFamily, preloadFonts } from "talisman-ui"
 
-import { ErrorBoundary } from "@talisman/components/ErrorBoundary"
 import { ErrorBoundaryDatabaseMigration } from "@talisman/components/ErrorBoundaryDatabaseMigration"
 import { NotificationsContainer } from "@talisman/components/Notifications/NotificationsContainer"
 import { SuspenseTracker } from "@talisman/components/SuspenseTracker"
+import { TalismanErrorBoundary } from "@talisman/components/TalismanErrorBoundary"
 import { useKeepBackgroundOpen } from "@ui/hooks/useKeepBackgroundOpen"
 import { KeepWalletUnlockedMode, useKeepWalletUnlocked } from "@ui/hooks/useKeepWalletUnlocked"
 
@@ -50,8 +50,8 @@ export const renderTalisman = (
   if (!container) throw new Error("#root element not found.")
   const root = createRoot(container)
   root.render(
-    <React.StrictMode>
-      <ErrorBoundary>
+    <StrictMode>
+      <TalismanErrorBoundary>
         <ErrorBoundaryDatabaseMigration>
           <Suspense fallback={<SuspenseTracker name="Root" />}>
             <KeepBackgroundOpen />
@@ -64,7 +64,7 @@ export const renderTalisman = (
             </Subscribe>
           </Suspense>
         </ErrorBoundaryDatabaseMigration>
-      </ErrorBoundary>
-    </React.StrictMode>,
+      </TalismanErrorBoundary>
+    </StrictMode>,
   )
 }