feat: add UnsupportedChain component to handle unsupported blockchain scenarios

Author: ErwanDecoster

src/components/UnsupportedChain.tsx

@@ -0,0 +1,27 @@
+import { SUPPORTED_CHAINS } from '@/config';
+import { Terminal } from 'lucide-react';
+import useUserStore from '@/stores/useUser.store';
+import { Alert, AlertDescription, AlertTitle } from './ui/alert';
+
+const SUPPORTED_CHAIN_IDS = SUPPORTED_CHAINS.map((chain) => chain.id);
+
+export function UnsupportedChain() {
+  const { chainId } = useUserStore();
+
+  const isChainSupported =
+    chainId !== undefined && SUPPORTED_CHAIN_IDS.includes(chainId);
+
+  if (isChainSupported) {
+    return null;
+  }
+
+  return (
+    <Alert variant="destructive" className="mx-auto mt-8 text-left">
+      <Terminal className="h-4 w-4" />
+      <AlertTitle>Error</AlertTitle>
+      <AlertDescription>
+        It seems that you are using a chain that is not supported.
+      </AlertDescription>
+    </Alert>
+  );
+}

src/config.ts

@@ -1,2 +1,11 @@
 export const PREVIEW_TABLE_LENGTH = 5;
 export const PREVIEW_TABLE_REFETCH_INTERVAL = 10_000;
+export const SUPPORTED_CHAINS = [
+  {
+    id: 134,
+    name: 'Bellecour',
+    icon: 'src/assets/iexec-logo.svg',
+    blockExplorerUrl: 'https://blockscout-bellecour.iex.ec',
+    subgraphUrl: 'https://thegraph.iex.ec/subgraphs/name/bellecour/poco-v5',
+  },
+];

src/routes/__root.tsx

@@ -1,6 +1,7 @@
 import { createRootRoute, Outlet } from '@tanstack/react-router';
 import { TanStackRouterDevtools } from '@tanstack/react-router-devtools';
 import { Footer } from '@/components/Footer';
+import { UnsupportedChain } from '@/components/UnsupportedChain';
 import { Navbar } from '@/components/navbar/NavBar';
 import { useSyncAccountWithUserStore } from '@/hooks/useSyncAccountWithUserStore';
 
@@ -14,6 +15,7 @@ function Root() {
   return (
     <div className="mx-auto mb-20 w-full px-6 md:px-10 lg:px-20">
       <Navbar />
+      <UnsupportedChain />
       <Outlet />
       <Footer className="mt-32" />
       <TanStackRouterDevtools />