feature/chain switch

src/components/UnsupportedChain.tsx

@@ -1,5 +1,5 @@
 import { SUPPORTED_CHAINS } from '@/config';
-import { Terminal } from 'lucide-react';
+import { AlertOctagon } from 'lucide-react';
 import useUserStore from '@/stores/useUser.store';
 import { Alert, AlertDescription, AlertTitle } from './ui/alert';
 
@@ -17,7 +17,7 @@ export function UnsupportedChain() {
 
   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/navbar/ChainSelector.tsx

@@ -0,0 +1,46 @@
+import { SUPPORTED_CHAINS } from '@/config.ts';
+import { switchChain } from '@wagmi/core';
+import { useEffect, useState } from 'react';
+import useUserStore from '@/stores/useUser.store.ts';
+import { wagmiAdapter } from '@/utils/wagmiConfig.ts';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../ui/select.tsx';
+
+export function ChainSelector() {
+  const { chainId } = useUserStore();
+  const [selectedChainId, setSelectedChainId] = useState<string>(
+    chainId.toString(),
+  );
+
+  useEffect(() => {
+    if (chainId) {
+      setSelectedChainId(chainId.toString());
+    }
+  }, [chainId]);
+
+  const handleChainChange = async (value: string) => {
+    setSelectedChainId(value);
+
+    switchChain(wagmiAdapter.wagmiConfig, { chainId: Number(value) });
+  };
+
+  return (
+    <Select value={selectedChainId} onValueChange={handleChainChange}>
+      <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/NavBar.tsx

@@ -5,14 +5,8 @@ import { useLoginLogout } from '@/hooks/useLoginLogout';
 import useUserStore from '@/stores/useUser.store';
 import iExecLogo from '../../assets/iexec-logo.svg';
 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();
@@ -38,16 +32,7 @@ export function Navbar() {
           </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">
@@ -119,16 +104,7 @@ export function Navbar() {
             >
               <Link to="/account">iExec Account</Link>
             </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/ui/alert.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/config.ts

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

src/graphql/execute.ts

@@ -2,10 +2,9 @@ import type { TypedDocumentString } from './graphql'
 
 export async function execute<TResult, TVariables>(
   query: TypedDocumentString<TResult, TVariables>,
+  subgraphUrl: string,
   ...[variables]: TVariables extends Record<string, never> ? [] : [TVariables]
 ) {
-  const subgraphUrl = import.meta.env.VITE_POCO_SUBGRAPH_URL;
-
   const response = await fetch(subgraphUrl, {
     method: 'POST',
     headers: {

src/hooks/useSyncAccountWithUserStore.ts

@@ -1,18 +1,32 @@
+import { SUPPORTED_CHAINS } from '@/config';
+import { useQueryClient } from '@tanstack/react-query';
 import { useEffect } from 'react';
 import { useAccount } from 'wagmi';
 import useUserStore from '@/stores/useUser.store';
 
 export function useSyncAccountWithUserStore() {
   const { connector, status, address, chain, isConnected } = useAccount();
-  const { setConnector, setIsConnected, setAddress, setChainId } =
-    useUserStore();
+  const {
+    setConnector,
+    setIsConnected,
+    setAddress,
+    setChainId,
+    chainId,
+    setSubgraphUrl,
+  } = useUserStore();
+  const queryClient = useQueryClient();
 
   useEffect(() => {
     // Update userStore
     setConnector(connector);
     setIsConnected(isConnected);
     setAddress(address);
-    setChainId(chain?.id);
+    const currentChain = SUPPORTED_CHAINS.find((c) => c.id === chain?.id);
+    if (currentChain) {
+      setSubgraphUrl(currentChain?.subgraphUrl);
+      queryClient.invalidateQueries({ queryKey: [chainId] });
+      setChainId(chain!.id);
+    }
   }, [
     connector,
     status,
@@ -23,5 +37,8 @@ export function useSyncAccountWithUserStore() {
     setIsConnected,
     setAddress,
     setChainId,
+    setSubgraphUrl,
+    queryClient,
+    chainId,
   ]);
 }

src/index.css

@@ -152,9 +152,9 @@
   --color-success-foreground: var(--color-green-600);
   --color-success-border: var(--color-green-600);
 
-  --color-danger: var(--color-red-100);
-  --color-danger-foreground: var(--color-red-600);
-  --color-danger-border: var(--color-red-600);
+  --color-danger: var(--color-red-900);
+  --color-danger-foreground: var(--color-red-100);
+  --color-danger-border: var(--color-red-500);
 
   --color-warning: var(--color-orange-100);
   --color-warning-foreground: var(--color-orange-600);

src/modules/apps/AppsPreviewTable.tsx

@@ -4,18 +4,22 @@ import { cn } from '@/lib/utils';
 import { useQuery } from '@tanstack/react-query';
 import { Link } from '@tanstack/react-router';
 import { Box, LoaderCircle, Terminal } from 'lucide-react';
-import { CircularLoader } from '@/components/CircularLoader';
 import { DataTable } from '@/components/DataTable';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
+import useUserStore from '@/stores/useUser.store';
 import { appsQuery } from './appsQuery';
 import { columns } from './appsTable/columns';
 
 export function AppsPreviewTable({ className }: { className?: string }) {
+  const { subgraphUrl, chainId } = useUserStore();
   const apps = useQuery({
-    queryKey: ['apps_preview'],
+    queryKey: [chainId, 'apps_preview'],
     queryFn: () =>
-      execute(appsQuery, { length: PREVIEW_TABLE_LENGTH, skip: 0 }),
+      execute(appsQuery, subgraphUrl, {
+        length: PREVIEW_TABLE_LENGTH,
+        skip: 0,
+      }),
     refetchInterval: PREVIEW_TABLE_REFETCH_INTERVAL,
   });
 

src/modules/datasets/DatasetsPreviewTable.tsx

@@ -4,18 +4,22 @@ import { cn } from '@/lib/utils';
 import { useQuery } from '@tanstack/react-query';
 import { Link } from '@tanstack/react-router';
 import { Box, LoaderCircle, Terminal } from 'lucide-react';
-import { CircularLoader } from '@/components/CircularLoader';
 import { DataTable } from '@/components/DataTable';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
+import useUserStore from '@/stores/useUser.store';
 import { datasetsQuery } from './datasetsQuery';
 import { columns } from './datasetsTable/columns';
 
 export function DatasetsPreviewTable({ className }: { className?: string }) {
+  const { subgraphUrl, chainId } = useUserStore();
   const datasets = useQuery({
-    queryKey: ['datasets_preview'],
+    queryKey: [chainId, 'datasets_preview'],
     queryFn: () =>
-      execute(datasetsQuery, { length: PREVIEW_TABLE_LENGTH, skip: 0 }),
+      execute(datasetsQuery, subgraphUrl, {
+        length: PREVIEW_TABLE_LENGTH,
+        skip: 0,
+      }),
     refetchInterval: PREVIEW_TABLE_REFETCH_INTERVAL,
   });
 

src/modules/deals/DealsPreviewTable.tsx

@@ -4,18 +4,22 @@ import { cn } from '@/lib/utils';
 import { useQuery } from '@tanstack/react-query';
 import { Link } from '@tanstack/react-router';
 import { Box, LoaderCircle, Terminal } from 'lucide-react';
-import { CircularLoader } from '@/components/CircularLoader';
 import { DataTable } from '@/components/DataTable';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
+import useUserStore from '@/stores/useUser.store';
 import { dealsQuery } from './dealsQuery';
 import { columns } from './dealsTable/columns';
 
 export function DealsPreviewTable({ className }: { className?: string }) {
+  const { subgraphUrl, chainId } = useUserStore();
   const deals = useQuery({
-    queryKey: ['deals_preview'],
+    queryKey: [chainId, 'deals_preview'],
     queryFn: () =>
-      execute(dealsQuery, { length: PREVIEW_TABLE_LENGTH, skip: 0 }),
+      execute(dealsQuery, subgraphUrl, {
+        length: PREVIEW_TABLE_LENGTH,
+        skip: 0,
+      }),
     refetchInterval: PREVIEW_TABLE_REFETCH_INTERVAL,
   });
 

src/modules/tasks/TasksPreviewTable.tsx

@@ -4,18 +4,22 @@ import { cn } from '@/lib/utils';
 import { useQuery } from '@tanstack/react-query';
 import { Link } from '@tanstack/react-router';
 import { Box, LoaderCircle, Terminal } from 'lucide-react';
-import { CircularLoader } from '@/components/CircularLoader';
 import { DataTable } from '@/components/DataTable';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
+import useUserStore from '@/stores/useUser.store';
 import { tasksQuery } from './tasksQuery';
 import { columns } from './tasksTable/columns';
 
 export function TasksPreviewTable({ className }: { className?: string }) {
+  const { subgraphUrl, chainId } = useUserStore();
   const tasks = useQuery({
-    queryKey: ['tasks_preview'],
+    queryKey: [chainId, 'tasks_preview'],
     queryFn: () =>
-      execute(tasksQuery, { length: PREVIEW_TABLE_LENGTH, skip: 0 }),
+      execute(tasksQuery, subgraphUrl, {
+        length: PREVIEW_TABLE_LENGTH,
+        skip: 0,
+      }),
     refetchInterval: PREVIEW_TABLE_REFETCH_INTERVAL,
   });
 

src/modules/workerpools/WorkerpoolsPreviewTable.tsx

@@ -4,18 +4,19 @@ import { cn } from '@/lib/utils';
 import { useQuery } from '@tanstack/react-query';
 import { Link } from '@tanstack/react-router';
 import { Box, LoaderCircle, Terminal } from 'lucide-react';
-import { CircularLoader } from '@/components/CircularLoader';
 import { DataTable } from '@/components/DataTable';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
 import { workerpoolsQuery } from './workerpoolsQuery';
 import { columns } from './workerpoolsTable/columns';
+import useUserStore from '@/stores/useUser.store';
 
 export function WorkerpoolsPreviewTable({ className }: { className?: string }) {
+  const { subgraphUrl, chainId } = useUserStore();
   const workerpools = useQuery({
-    queryKey: ['workerpools_preview'],
+    queryKey: [chainId, 'workerpools_preview'],
     queryFn: () =>
-      execute(workerpoolsQuery, { length: PREVIEW_TABLE_LENGTH, skip: 0 }),
+      execute(workerpoolsQuery, subgraphUrl, { length: PREVIEW_TABLE_LENGTH, skip: 0 }),
     refetchInterval: PREVIEW_TABLE_REFETCH_INTERVAL,
   });