feature/chain-switch

Author: ErwanDecoster

src/assets/chain-icons/arbitrum-sepolia.svg

@@ -0,0 +1,18 @@
+import { useParams } from '@tanstack/react-router';
+import { Link } from '@tanstack/react-router';
+import { ComponentProps } from 'react';
+
+function buildRoutePath(path: string, chainSlug: string) {
+  if (path === '/') return `/${chainSlug}`;
+  return `/${chainSlug}${path.startsWith('/') ? path : `/${path}`}`;
+}
+
+type ChainLinkProps = {
+  to: string;
+} & Omit<ComponentProps<typeof Link>, 'to'>;
+
+export function ChainLink({ to, ...props }: ChainLinkProps) {
+  const { chainSlug } = useParams({ from: '/$chainSlug' });
+  const path = buildRoutePath(to, chainSlug);
+  return <Link to={path} {...props} />;
+}

src/components/ChainLink.tsx

@@ -1,4 +1,3 @@
-import { Link } from '@tanstack/react-router';
 import {
   ColumnDef,
   flexRender,
@@ -13,6 +12,7 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table';
+import { ChainLink } from './ChainLink';
 
 interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[];
@@ -58,12 +58,12 @@ export function DataTable<TData extends { destination: string }, TValue>({
           <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
             {row.getVisibleCells().map((cell) => (
               <TableCell key={cell.id} className="p-0">
-                <Link
+                <ChainLink
                   className="block px-5 py-6"
                   to={cell.row.original.destination}
                 >
                   {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                </Link>
+                </ChainLink>
               </TableCell>
             ))}
           </TableRow>

src/components/DataTable.tsx

@@ -6,15 +6,19 @@ import {
   SiX,
   SiYoutube,
 } from '@icons-pack/react-simple-icons';
-import { Link } from '@tanstack/react-router';
 import { Linkedin } from 'lucide-react';
+import useUserStore from '@/stores/useUser.store';
+import { getBlockExplorerUrl } from '@/utils/chain.utils';
 import iExecLogo from '../assets/iexec-logo.svg';
+import { ChainLink } from './ChainLink';
 import { Button } from './ui/button';
 
 export function Footer({ className }: { className?: string }) {
+  const { chainId } = useUserStore();
+
   const navLinks = [
     { href: 'https://www.iex.ec/', label: 'iExec Website' },
-    { href: 'https://blockscout-bellecour.iex.ec/', label: 'Block explorer' }, // TODO import it from protocol data list
+    { href: getBlockExplorerUrl(chainId), label: 'Block explorer' },
     { href: 'https://www.iex.ec/contact', label: 'Contact Us' },
   ];
 
@@ -48,10 +52,10 @@ export function Footer({ className }: { className?: string }) {
       )}
     >
       <div className="grid place-items-center justify-center gap-10 xl:grid-cols-3 xl:place-items-stretch">
-        <Link to="/" className="flex items-center gap-2 font-mono">
+        <ChainLink to="/" className="flex items-center gap-2 font-mono">
           <img src={iExecLogo} width="25" height="25" alt="iExec logo" />
           <span className="hidden sm:block">iExec Explorer</span>
-        </Link>
+        </ChainLink>
 
         <nav className="flex flex-col items-start gap-4 sm:flex-row sm:items-center sm:gap-4">
           {navLinks.map(({ href, label }, idx) => (

src/components/Footer.tsx

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

src/components/UnsupportedChain.tsx

@@ -0,0 +1,37 @@
+import { SUPPORTED_CHAINS } from '@/config.ts';
+import { useChainSwitch } from '@/hooks/useChainSwitch.ts';
+import useUserStore from '@/stores/useUser.store.ts';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../ui/select.tsx';
+
+export function ChainSelector() {
+  const { chainId } = useUserStore();
+  const { requestChainChange } = useChainSwitch();
+  const handleChainChange = async (value: string) => {
+    requestChainChange(Number(value));
+  };
+
+  return (
+    <Select
+      value={chainId?.toString()}
+      onValueChange={handleChainChange}
+      defaultValue="-1"
+    >
+      <SelectTrigger>
+        <SelectValue placeholder="Select Chain" />
+      </SelectTrigger>
+      <SelectContent>
+        {SUPPORTED_CHAINS.map((chain) => (
+          <SelectItem key={chain.id} value={chain.id.toString()}>
+            <img src={chain.icon} className="size-4" alt="" /> {chain.name}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}

src/components/navbar/ChainSelector.tsx

@@ -4,15 +4,10 @@ import { useState } from 'react';
 import { useLoginLogout } from '@/hooks/useLoginLogout';
 import useUserStore from '@/stores/useUser.store';
 import iExecLogo from '../../assets/iexec-logo.svg';
+import { ChainLink } from '../ChainLink.tsx';
 import { Button } from '../ui/button.tsx';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '../ui/select.tsx';
 import { AddressChip } from './AddressChip.tsx';
+import { ChainSelector } from './ChainSelector.tsx';
 
 export function Navbar() {
   const { isConnected, address } = useUserStore();
@@ -24,30 +19,21 @@ export function Navbar() {
 
   return (
     <div className="flex items-center justify-between pt-6 lg:pt-3">
-      <Link to="/" className="-m-2 flex items-center gap-2 p-2 font-mono">
+      <ChainLink to="/" className="-m-2 flex items-center gap-2 p-2 font-mono">
         <img src={iExecLogo} width="25" height="25" alt="iExec logo" />
         <span className="hidden sm:block">iExec Explorer</span>
-      </Link>
+      </ChainLink>
       <div className="mr-6 flex items-center gap-4 md:mr-0">
         {isConnected && (
           <div className="hidden md:flex">
             <Button variant="link" asChild className="text-white">
-              <Link to="/account">iExec Account</Link>
+              <ChainLink to="/account">iExec Account</ChainLink>
             </Button>
             <span className="border-secondary border-l" />
           </div>
         )}
         <div className="content hidden md:flex">
-          <Select value="bellecour">
-            <SelectTrigger className="">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="bellecour">
-                <img src={iExecLogo} className="size-4" alt="" /> Bellecour
-              </SelectItem>
-            </SelectContent>
-          </Select>
+          <ChainSelector />
         </div>
         {isConnected ? (
           <div className="flex max-w-[1260px] items-center gap-2">
@@ -89,9 +75,9 @@ export function Navbar() {
 
         <div className="border-grey-600 bg-grey-900 pointer-events-auto fixed inset-y-0 left-0 z-10 flex w-full -translate-x-full flex-col overflow-auto rounded-r-3xl border-r px-6 pt-6 duration-300 group-has-[:checked]:translate-x-0 lg:w-[255px] lg:translate-x-0">
           <div className="-m-2 mr-6 flex items-center justify-between gap-2 py-2 pl-2">
-            <Link to="/" className="font-mono" onClick={handleMenuToggle}>
+            <ChainLink to="/" className="font-mono" onClick={handleMenuToggle}>
               <img src={iExecLogo} width="25" height="25" alt="iExec logo" />
-            </Link>
+            </ChainLink>
             {isConnected ? (
               <div className="flex max-w-[1260px] items-center gap-2">
                 <AddressChip address={address!} />
@@ -117,18 +103,9 @@ export function Navbar() {
               asChild
               className="justify-baseline px-3 text-white"
             >
-              <Link to="/account">iExec Account</Link>
+              <ChainLink to="/account">iExec Account</ChainLink>
             </Button>
-            <Select value="bellecour">
-              <SelectTrigger className="w-full border-none">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="bellecour">
-                  <img src={iExecLogo} className="size-4" alt="" /> Bellecour
-                </SelectItem>
-              </SelectContent>
-            </Select>
+            <ChainSelector />
           </div>
         </div>
       </div>

src/components/navbar/NavBar.tsx

@@ -3,13 +3,13 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 
 const alertVariants = cva(
-  'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
+  'relative w-full rounded border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
   {
     variants: {
       variant: {
         default: 'bg-card text-card-foreground',
         destructive:
-          'text-destructive bg-danger border-danger-border [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
+          'text-destructive bg-danger border-danger-border [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90 border-l-4',
       },
     },
     defaultVariants: {

src/components/ui/alert.tsx

@@ -1,3 +1,7 @@
+import arbitrumSepoliaIcon from './assets/chain-icons/arbitrum-sepolia.svg';
+import iexecLogo from './assets/iexec-logo.svg';
+import { bellecour, arbitrumSepolia } from './utils/wagmiNetworks';
+
 export const PREVIEW_TABLE_LENGTH = 5;
 export const TABLE_LENGTH = 16;
 export const PREVIEW_TABLE_REFETCH_INTERVAL = 10_000;
@@ -6,8 +10,22 @@ export const SUPPORTED_CHAINS = [
   {
     id: 134,
     name: 'Bellecour',
-    icon: 'src/assets/iexec-logo.svg',
+    slug: 'bellecour',
+    color: '#F4942566',
+    icon: iexecLogo,
     blockExplorerUrl: 'https://blockscout-bellecour.iex.ec',
     subgraphUrl: 'https://thegraph.iex.ec/subgraphs/name/bellecour/poco-v5',
+    wagmiNetwork: bellecour,
+  },
+  {
+    id: 421614,
+    name: 'Arbitrum Sepolia',
+    slug: 'arbitrum-sepolia',
+    color: '#28A0F080',
+    icon: arbitrumSepoliaIcon,
+    blockExplorerUrl: 'https://sepolia.arbiscan.io/',
+    subgraphUrl:
+      'http://localhost:8080/subgraphs/id/2GCj8gzLCihsiEDq8cYvC5nUgK6VfwZ6hm3Wj8A3kcxz',
+    wagmiNetwork: arbitrumSepolia,
   },
 ];

src/config.ts

@@ -1,11 +1,15 @@
+import { getSubgraphUrl } from '@/utils/chain.utils';
 import type { TypedDocumentString } from './graphql'
 
 export async function execute<TResult, TVariables>(
   query: TypedDocumentString<TResult, TVariables>,
+  chainId?: number,
   ...[variables]: TVariables extends Record<string, never> ? [] : [TVariables]
 ) {
-  const subgraphUrl = import.meta.env.VITE_POCO_SUBGRAPH_URL;
-
+  if (!chainId) {
+    throw Error('Missing chainId')
+  }
+  const subgraphUrl = getSubgraphUrl(chainId);
   const response = await fetch(subgraphUrl, {
     method: 'POST',
     headers: {