From b28dfd2915a9568d6071718676d0249309b1820e Mon Sep 17 00:00:00 2001 From: Alec WM Date: Mon, 6 Jan 2025 19:18:07 +1100 Subject: [PATCH] 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 | 5 ++ .../ErrorBoundaryDatabaseMigration.tsx | 4 +- ...Boundary.tsx => TalismanErrorBoundary.tsx} | 47 ++++++++++--------- .../src/ui/apps/popup/Layout/PopupLayout.tsx | 4 +- .../ui/apps/popup/pages/Portfolio/index.tsx | 6 +-- apps/extension/src/ui/index.tsx | 12 ++--- .../icons/src/icons/talisman-dead-hand.svg | 18 +++++-- 7 files changed, 57 insertions(+), 39 deletions(-) create mode 100644 .changeset/chilled-badgers-exercise.md rename apps/extension/src/@talisman/components/{ErrorBoundary.tsx => TalismanErrorBoundary.tsx} (60%) diff --git a/.changeset/chilled-badgers-exercise.md b/.changeset/chilled-badgers-exercise.md new file mode 100644 index 0000000000..4fe9e339a3 --- /dev/null +++ b/.changeset/chilled-badgers-exercise.md @@ -0,0 +1,5 @@ +--- +"@talismn/icons": patch +--- + +feat: updated error hand logo diff --git a/apps/extension/src/@talisman/components/ErrorBoundaryDatabaseMigration.tsx b/apps/extension/src/@talisman/components/ErrorBoundaryDatabaseMigration.tsx index df0b49e136..b8252a393f 100644 --- a/apps/extension/src/@talisman/components/ErrorBoundaryDatabaseMigration.tsx +++ b/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 = () => (
Updating Talisman
diff --git a/apps/extension/src/@talisman/components/ErrorBoundary.tsx b/apps/extension/src/@talisman/components/TalismanErrorBoundary.tsx similarity index 60% rename from apps/extension/src/@talisman/components/ErrorBoundary.tsx rename to apps/extension/src/@talisman/components/TalismanErrorBoundary.tsx index 76c8d1b0ae..b551d4e279 100644 --- a/apps/extension/src/@talisman/components/ErrorBoundary.tsx +++ b/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 }) => ( + {children} +) + +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 (
-

Oops!

- +

Oops!

+
{errorMessage}
{!canClearDatabases && ( - - Contact us on Discord for support. - + <> + + Contact us on Discord for support + + {eventId ? ( +
Error ID: {eventId}
+ ) : null} + )}
@@ -54,11 +63,3 @@ const ErrorMessage: FC<{ error: unknown }> = ({ error }) => {
) } - -export const ErrorBoundary = ({ children }: { children?: ReactNode }) => { - return ( - }> - {children} - - ) -} diff --git a/apps/extension/src/ui/apps/popup/Layout/PopupLayout.tsx b/apps/extension/src/ui/apps/popup/Layout/PopupLayout.tsx index b3d5397d65..884f3575be 100644 --- a/apps/extension/src/ui/apps/popup/Layout/PopupLayout.tsx +++ b/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 = ({ className, children, ...props {...props} className={classNames("relative flex h-full w-full flex-col overflow-hidden", className)} > - {children} + {children} ) } diff --git a/apps/extension/src/ui/apps/popup/pages/Portfolio/index.tsx b/apps/extension/src/ui/apps/popup/pages/Portfolio/index.tsx index e6ce7580d4..1d7aee7236 100644 --- a/apps/extension/src/ui/apps/popup/pages/Portfolio/index.tsx +++ b/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,7 +51,7 @@ const Content: FC = ({ children }) => { export const Portfolio = () => (
- +
@@ -59,7 +59,7 @@ export const Portfolio = () => (
- +
) diff --git a/apps/extension/src/ui/index.tsx b/apps/extension/src/ui/index.tsx index 6a4d8ceea3..8944dc4e02 100644 --- a/apps/extension/src/ui/index.tsx +++ b/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( - - + + }> @@ -64,7 +64,7 @@ export const renderTalisman = ( - - , + + , ) } diff --git a/packages/icons/src/icons/talisman-dead-hand.svg b/packages/icons/src/icons/talisman-dead-hand.svg index 3e67af75b6..9bc242073d 100644 --- a/packages/icons/src/icons/talisman-dead-hand.svg +++ b/packages/icons/src/icons/talisman-dead-hand.svg @@ -1,4 +1,16 @@ - - - + + + + + + + + + + + + + + +