Show a nicer UI when minifront can't connect to the extension, and for other errors

apps/minifront/src/components/extension-unavailable.tsx

@@ -0,0 +1,29 @@
+import { SplashPage } from '@penumbra-zone/ui';
+import { HeadTag } from './metadata/head-tag';
+
+const NODE_STATUS_PAGE_URL =
+  window.location.hostname === 'localhost' ? 'http://localhost:5174' : '/';
+
+export const ExtensionUnavailable = () => {
+  return (
+    <>
+      <HeadTag />
+
+      <SplashPage title='Penumbra extension unavailble'>
+        <p className='mb-2'>We can&apos;t currently connect to the Penumbra extension.</p>
+        <p className='mb-2'>
+          This page may have been left open for too long, causing a timeout. Please reload this page
+          and see if that fixes the issue.
+        </p>
+        <p>
+          If it doesn&apos;t, the RPC node that you&apos;re connected to could be down. Check{' '}
+          <a href={NODE_STATUS_PAGE_URL} className='underline'>
+            the node&apos;s status page
+          </a>{' '}
+          and, if it is down, consider switching to a different RPC URL in the Penumbra
+          extension&apos;s settings.
+        </p>
+      </SplashPage>
+    </>
+  );
+};

apps/minifront/src/components/not-found.tsx

@@ -0,0 +1,5 @@
+import { SplashPage } from '@penumbra-zone/ui';
+
+export const NotFound = () => {
+  return <SplashPage title='404'>That page could not be found. </SplashPage>;
+};

apps/minifront/src/components/shared/error-boundary.tsx

@@ -1,17 +1,25 @@
-import { useRouteError } from 'react-router-dom';
+import { isRouteErrorResponse, useRouteError } from 'react-router-dom';
 import { PraxNotConnectedError } from '@penumbra-zone/client';
 import { ExtensionNotConnected } from '../extension-not-connected';
+import { NotFound } from '../not-found';
+import { ExtensionUnavailable } from '../extension-unavailable';
+import { Code, ConnectError } from '@connectrpc/connect';
+import { SplashPage } from '@penumbra-zone/ui';
 
 export const ErrorBoundary = () => {
   const error = useRouteError();
 
+  if (error instanceof ConnectError && error.code === Code.Unavailable) {
+    return <ExtensionUnavailable />;
+  }
   if (error instanceof PraxNotConnectedError) return <ExtensionNotConnected />;
+  if (isRouteErrorResponse(error) && error.status === 404) return <NotFound />;
 
-  console.error(error);
+  console.error('ErrorBoundary caught error:', error);
 
   return (
-    <div className='text-red'>
-      <h1 className='text-xl'>{String(error)}</h1>
-    </div>
+    <SplashPage title='Error' description='Something went wrong while loading this page.'>
+      {String(error)}
+    </SplashPage>
   );
 };

apps/minifront/src/fetchers/chain-id.ts

@@ -1,8 +1,6 @@
 import { viewClient } from '../clients';
 
-export const getChainId = async (): Promise<string> => {
+export const getChainId = async (): Promise<string | undefined> => {
   const { parameters } = await viewClient.appParameters({});
-  if (!parameters?.chainId) throw new Error('No chainId in response');
-
-  return parameters.chainId;
+  return parameters?.chainId;
 };

apps/node-status/src/components/error-boundary.tsx

@@ -1,13 +1,14 @@
+import { SplashPage } from '@penumbra-zone/ui';
 import { useRouteError } from 'react-router-dom';
 
 export const ErrorBoundary = () => {
   const error = useRouteError();
 
-  console.error(error);
+  console.error('ErrorBoundary caught error:', error);
 
   return (
-    <div className='text-red'>
-      <h1 className='text-xl'>{String(error)}</h1>
-    </div>
+    <SplashPage title='Error' description='Something went wrong while loading this page.'>
+      {String(error)}
+    </SplashPage>
   );
 };