feat: Added the ability to enable experimental features via a URL parameter. (#42)

* feat: Added the ability to enable experimental (Arbitrum Sepolia) features via a URL parameter.

* refactor: add isExperimental value on chain object for better readability

* refactor: replace SUPPORTED_CHAIN_IDS with a local variable for improved clarity in UnsupportedChain component

Author: ErwanDecoster

package-lock.json

@@ -53,6 +53,7 @@
     "tailwind-merge": "^3.2.0",
     "tailwindcss": "^4.1.3",
     "tw-animate-css": "^1.2.5",
+    "use-local-storage-state": "^19.5.0",
     "viem": "^2.28.0",
     "wagmi": "^2.15.0",
     "zustand": "^5.0.3"

package.json

@@ -1,14 +1,13 @@
-import { SUPPORTED_CHAINS } from '@/config';
 import { AlertOctagon } from 'lucide-react';
 import { useAccount } from 'wagmi';
+import { getSupportedChains } from '@/utils/chain.utils';
 import { Alert, AlertDescription, AlertTitle } from './ui/alert';
 
-const SUPPORTED_CHAIN_IDS = SUPPORTED_CHAINS.map((chain) => chain.id);
-
 export function UnsupportedChain() {
   const { isConnected, chainId } = useAccount();
+  const supportedChainIds = getSupportedChains().map((chain) => chain.id);
   const isChainSupported =
-    chainId !== undefined && SUPPORTED_CHAIN_IDS.includes(chainId);
+    chainId !== undefined && supportedChainIds.includes(chainId);
 
   if (!isConnected || isChainSupported) {
     return null;

src/components/UnsupportedChain.tsx

@@ -1,6 +1,10 @@
-import { SUPPORTED_CHAINS } from '@/config.ts';
+import { LOCAL_STORAGE_PREFIX } from '@/config.ts';
+import { useSearch } from '@tanstack/react-router';
+import { useEffect } from 'react';
+import useLocalStorageState from 'use-local-storage-state';
 import { useChainSwitch } from '@/hooks/useChainSwitch.ts';
 import useUserStore from '@/stores/useUser.store.ts';
+import { getSupportedChains } from '@/utils/chain.utils.ts';
 import {
   Select,
   SelectContent,
@@ -12,6 +16,19 @@ import {
 export function ChainSelector({ className }: { className?: string }) {
   const { chainId } = useUserStore();
   const { requestChainChange } = useChainSwitch();
+  const search = useSearch({ strict: false });
+  const [, setExperimental] = useLocalStorageState<boolean>(
+    `${LOCAL_STORAGE_PREFIX}_experimental`,
+    { defaultValue: false }
+  );
+
+  useEffect(() => {
+    if (search?.feature === 'experimental') {
+      setExperimental(true);
+    }
+  }, [search?.feature, setExperimental]);
+
+  const filteredChains = getSupportedChains();
 
   const handleChainChange = async (value: string) => {
     requestChainChange(Number(value));
@@ -27,7 +44,7 @@ export function ChainSelector({ className }: { className?: string }) {
         <SelectValue placeholder="Select Chain" />
       </SelectTrigger>
       <SelectContent className={className}>
-        {SUPPORTED_CHAINS.map((chain) => (
+        {filteredChains.map((chain) => (
           <SelectItem
             key={chain.id}
             value={chain.id.toString()}

src/components/navbar/ChainSelector.tsx

@@ -2,6 +2,8 @@ import arbitrumSepoliaIcon from './assets/chain-icons/arbitrum-sepolia.svg';
 import iexecLogo from './assets/iexec-logo.svg';
 import { bellecour, arbitrumSepolia } from './utils/wagmiNetworks';
 
+export const LOCAL_STORAGE_PREFIX = 'Explorer';
+
 export const PREVIEW_TABLE_LENGTH = 5;
 export const DETAIL_TABLE_LENGTH = 8;
 export const TABLE_LENGTH = 16;
@@ -37,5 +39,6 @@ export const SUPPORTED_CHAINS = [
       'https://thegraph.arbitrum-sepolia-testnet.iex.ec/api/subgraphs/id/2GCj8gzLCihsiEDq8cYvC5nUgK6VfwZ6hm3Wj8A3kcxz',
     wagmiNetwork: arbitrumSepolia,
     tokenSymbol: 'RLC',
+    isExperimental: true,
   },
 ];

src/config.ts

@@ -1,4 +1,3 @@
-import { SUPPORTED_CHAINS } from '@/config';
 import { createFileRoute, useSearch } from '@tanstack/react-router';
 import { AppsPreviewTable } from '@/modules/apps/AppsPreviewTable';
 import { DatasetsPreviewTable } from '@/modules/datasets/DatasetsPreviewTable';
@@ -7,6 +6,7 @@ import { SearcherBar } from '@/modules/search/SearcherBar';
 import { TasksPreviewTable } from '@/modules/tasks/TasksPreviewTable';
 import { WorkerpoolsPreviewTable } from '@/modules/workerpools/WorkerpoolsPreviewTable';
 import useUserStore from '@/stores/useUser.store';
+import { getSupportedChains } from '@/utils/chain.utils';
 
 export const Route = createFileRoute('/$chainSlug/_layout/')({
   component: Index,
@@ -18,7 +18,9 @@ function Index() {
 
   const initialSearch = search?.search;
 
-  const currentChain = SUPPORTED_CHAINS.find((chain) => chain.id === chainId);
+  const currentChain = getSupportedChains().find(
+    (chain) => chain.id === chainId
+  );
 
   return (
     <div className="flex flex-col gap-10 pt-10 sm:mt-6 sm:gap-20 md:mt-10">

src/routes/$chainSlug/_layout/index.tsx

@@ -1,7 +1,25 @@
-import { SUPPORTED_CHAINS } from '@/config';
+import { SUPPORTED_CHAINS, LOCAL_STORAGE_PREFIX } from '@/config';
+
+function isExperimentalEnabled(): boolean {
+  if (typeof window === 'undefined') return false;
+  try {
+    return (
+      localStorage.getItem(`${LOCAL_STORAGE_PREFIX}_experimental`) === 'true'
+    );
+  } catch {
+    return false;
+  }
+}
+
+export function getSupportedChains() {
+  const experimental = isExperimentalEnabled();
+  return SUPPORTED_CHAINS.filter(
+    (chain) => !chain.isExperimental || experimental
+  );
+}
 
 export function getSubgraphUrl(chainId: number) {
-  const subgraphUrl = SUPPORTED_CHAINS.find(
+  const subgraphUrl = getSupportedChains().find(
     (chain) => chain.id === chainId
   )?.subgraphUrl;
   if (!subgraphUrl) {
@@ -11,11 +29,11 @@ export function getSubgraphUrl(chainId: number) {
 }
 
 export function getChainFromSlug(slug: string | undefined) {
-  return SUPPORTED_CHAINS.find((c) => c.slug === slug);
+  return getSupportedChains().find((c) => c.slug === slug);
 }
 
 export function getChainFromId(id: number | undefined) {
-  return SUPPORTED_CHAINS.find((c) => c.id === id);
+  return getSupportedChains().find((c) => c.id === id);
 }
 
 export function getBlockExplorerUrl(chainId: number) {
@@ -28,4 +46,4 @@ export function getBlockExplorerUrl(chainId: number) {
  */
 export const INITIAL_CHAIN =
   getChainFromSlug(new URL(window.location.href).pathname.split('/')[1]) ||
-  SUPPORTED_CHAINS[0];
+  getSupportedChains()[0];