feat: update error page

src/app/app.tsx

@@ -12,7 +12,6 @@ import { queryClient } from '@app/common/persistence';
 import { ThemeSwitcherProvider } from '@app/common/theme-provider';
 import { FullPageLoadingSpinner } from '@app/components/loading-spinner';
 import { Devtools } from '@app/features/devtool/devtools';
-import { AppErrorBoundary } from '@app/features/errors/app-error-boundary';
 import { HeadProvider } from '@app/features/html-head/head-provider';
 import { ToastsProvider } from '@app/features/toasts/toasts-provider';
 import { AppRoutes } from '@app/routes/app-routes';
@@ -42,9 +41,7 @@ function ConnectedApp() {
         }}
       >
         <Suspense fallback={<FullPageLoadingSpinner />}>
-          <AppErrorBoundary>
-            <AppRoutes />
-          </AppErrorBoundary>
+          <AppRoutes />
           {reactQueryDevToolsEnabled && <Devtools />}
         </Suspense>
       </LeatherQueryProvider>

src/app/common/clarity-prism.ts

@@ -1,6 +1,6 @@
 import * as PrismLib from 'prismjs';
 
-interface PrismType {
+export interface PrismType {
   languages: typeof PrismLib.languages;
   tokenize: typeof PrismLib.tokenize;
   highlight: typeof PrismLib.highlight;

src/app/features/errors/app-error-boundary.tsx

@@ -1,58 +1,122 @@
-import { Box, Stack, styled } from 'leather-styles/jsx';
+import { useRouteError } from 'react-router-dom';
 
-import { Prism } from '@app/common/clarity-prism';
-import { HasChildren } from '@app/common/has-children';
-import { ErrorBoundary, FallbackProps, useErrorHandler } from '@app/features/errors/error-boundary';
-import { openGithubIssue } from '@app/features/errors/utils';
-import { useErrorStackTraceState } from '@app/store/ui/ui.hooks';
+import BroadcastError from '@assets/images/unhappy-face-ui.png';
+import { isError } from '@leather-wallet/utils';
+import { SharedComponentsSelectors } from '@tests/selectors/shared-component.selectors';
+import { Box, Flex, HStack, styled } from 'leather-styles/jsx';
+
+import { Prism, type PrismType } from '@app/common/clarity-prism';
+import { useClipboard } from '@app/common/hooks/use-copy-to-clipboard';
+import { Button } from '@app/ui/components/button/button';
 import { CodeBlock } from '@app/ui/components/codeblock';
-import { Title } from '@app/ui/components/typography/title';
+import { Link } from '@app/ui/components/link/link';
+import { CopyIcon } from '@app/ui/icons';
 
-function ErrorFallback({ error, resetErrorBoundary }: FallbackProps) {
-  const [value] = useErrorStackTraceState();
+import { useToast } from '../toasts/use-toast';
 
+function ErroBoundaryBody() {
   return (
-    <Stack gap="space.06" flexGrow={1}>
-      <Title>Something went wrong</Title>
-      <Box className="error-codeblock" maxWidth="100vw" overflow="hidden">
-        {value && (
-          <CodeBlock
-            border="default"
-            code={value}
-            flexShrink={1}
-            overflow="auto"
-            language="bash"
-            maxHeight="305px"
-            maxWidth="100%"
-            prism={Prism as any}
-            width="100%"
-          />
-        )}
-      </Box>
-      <Stack mt="auto" gap="space.04">
-        <styled.button onClick={resetErrorBoundary} type="button">
-          Reload extension
-        </styled.button>
-        <styled.button
-          onClick={() => openGithubIssue({ message: error.message, stackTrace: value })}
-          type="button"
+    <styled.span
+      data-testid={SharedComponentsSelectors.BroadcastErrorTitle}
+      mx="space.05"
+      mt="space.05"
+      textStyle="label.02"
+    >
+      Leather has crashed. If this problem persists, contact our{' '}
+      <Link
+        href="https://leather.gitbook.io/guides/installing/contact-support"
+        target="_blank"
+        textDecoration="underline"
+      >
+        <styled.span
+          data-testid={SharedComponentsSelectors.BroadcastErrorTitle}
+          textStyle="label.02"
         >
-          Report issue on GitHub
-        </styled.button>
-      </Stack>
-    </Stack>
+          support team.
+        </styled.span>
+      </Link>
+    </styled.span>
   );
 }
 
-export function AppErrorBoundary({ children }: HasChildren) {
-  const handleOnError = useErrorHandler();
+const title = 'Something went wrong';
+
+const defaultErrorText = 'Unknown error';
+
+function getErrorText(error: unknown) {
+  if (!isError(error)) return defaultErrorText;
+  return error.stack || defaultErrorText;
+}
+
+export function RouterErrorBoundary() {
+  const error = useRouteError();
+  const toast = useToast();
+
+  const errorText = getErrorText(error);
+
+  const { onCopy } = useClipboard(getErrorText(error));
+
+  function onClickCopy() {
+    onCopy();
+    toast.success('Error copied!');
+  }
+
   return (
-    <ErrorBoundary
-      onReset={() => window.location.reload()}
-      FallbackComponent={ErrorFallback}
-      onError={handleOnError}
+    <Flex
+      alignItems="center"
+      justifyContent="center"
+      flexDirection="column"
+      px={['space.05', 'unset']}
+      py={['space.05', 'space.06']}
+      width="100%"
+      maxWidth="500px"
     >
-      {children}
-    </ErrorBoundary>
+      <Box mt="space.05">
+        <img src={BroadcastError} alt="Unhappy user interface cloud" width="106px" />
+      </Box>
+
+      <styled.span
+        data-testid={SharedComponentsSelectors.BroadcastErrorTitle}
+        mx="space.05"
+        mt="space.05"
+        textStyle="heading.05"
+      >
+        {title}
+      </styled.span>
+
+      <ErroBoundaryBody />
+
+      {errorText && (
+        <CodeBlock
+          bg="ink.background-secondary"
+          borderRadius="sm"
+          my="space.05"
+          mx="space.05"
+          p="space.04"
+          prism={Prism as PrismType}
+          code={errorText}
+          language="json"
+          hideLineHover
+        />
+      )}
+
+      <HStack width="100%" gap="space.04">
+        <Button
+          flex="1"
+          display="flex"
+          justifyContent="center"
+          alignItems="center"
+          gap="5"
+          onClick={onClickCopy}
+          variant="outline"
+        >
+          Copy error
+          <CopyIcon />
+        </Button>
+        <Button flex="1" onClick={() => window.location.reload()}>
+          Reload extension
+        </Button>
+      </HStack>
+    </Flex>
   );
 }