Merge branch 'main' into fix/small-fix

Author: ErwanDecoster

.release-please-manifest.json

@@ -1 +1 @@
-{".":"1.10.0"}
+{".":"1.12.0"}

CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [1.12.0](https://github.com/iExecBlockchainComputing/explorer-v2/compare/iexec-explorer-v1.11.0...iexec-explorer-v1.12.0) (2025-07-21)
+
+
+### 🚀 Features
+
+* add BackButton component and integrate into various routes ([#41](https://github.com/iExecBlockchainComputing/explorer-v2/issues/41)) ([676996a](https://github.com/iExecBlockchainComputing/explorer-v2/commit/676996a0334ed27178261b7730acf6edbd4ec9e5))
+
+## [1.11.0](https://github.com/iExecBlockchainComputing/explorer-v2/compare/iexec-explorer-v1.10.0...iexec-explorer-v1.11.0) (2025-07-18)
+
+
+### 🚀 Features
+
+* Added the ability to enable experimental features via a URL parameter. ([#42](https://github.com/iExecBlockchainComputing/explorer-v2/issues/42)) ([414d4b0](https://github.com/iExecBlockchainComputing/explorer-v2/commit/414d4b0a6f0ae1de85515aa2a84dfca079662ce4))
+
 ## [1.10.0](https://github.com/iExecBlockchainComputing/explorer-v2/compare/iexec-explorer-v1.9.2...iexec-explorer-v1.10.0) (2025-07-17)
 
 

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "iexec-explorer",
   "private": true,
-  "version": "1.10.0",
+  "version": "1.12.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -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

@@ -13,15 +13,7 @@ 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: getBlockExplorerUrl(chainId), label: 'Block explorer' },
-    { href: 'https://www.iex.ec/contact', label: 'Contact Us' },
-  ];
-
+function SocialLinksItems({ className }: { className?: string }) {
   const socialLinks = [
     { href: 'https://twitter.com/iEx_ec', icon: <SiX size={16} /> },
     { href: 'https://discord.gg/pbt9m98wnU', icon: <SiDiscord size={16} /> },
@@ -36,6 +28,36 @@ export function Footer({ className }: { className?: string }) {
     },
     { href: 'https://medium.com/iex-ec', icon: <SiMedium size={16} /> },
   ];
+  return (
+    <div className={cn('flex', className)}>
+      {socialLinks.map(({ href, icon }, idx) => (
+        <Button key={idx} asChild variant="link" className="text-grey-200 p-2">
+          <a
+            href={href}
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label="Social link"
+          >
+            {icon}
+          </a>
+        </Button>
+      ))}
+    </div>
+  );
+}
+
+export function Footer({ className }: { className?: string }) {
+  const { chainId } = useUserStore();
+
+  const navLinks = [
+    { href: 'https://www.iex.ec/', label: 'iExec Website' },
+    { href: 'https://tools.docs.iex.ec/', label: 'Doc tools' },
+    { href: 'https://protocol.docs.iex.ec/', label: 'Doc protocol' },
+    ...(chainId !== undefined
+      ? [{ href: getBlockExplorerUrl(chainId), label: 'Block explorer' }]
+      : []),
+    { href: 'https://www.iex.ec/contact', label: 'Contact Us' },
+  ];
 
   const startYear = 2017;
   const currentYear = new Date().getFullYear();
@@ -47,17 +69,17 @@ export function Footer({ className }: { className?: string }) {
   return (
     <footer
       className={cn(
-        'bg-grey-800 border-muted text-grey-200 relative rounded-3xl border px-6 py-10 sm:px-10 lg:px-20',
+        'bg-grey-800 border-muted text-grey-200 flex flex-col gap-6 rounded-3xl border px-6 py-10 sm:px-10 lg:px-20',
         className
       )}
     >
-      <div className="grid place-items-center justify-center gap-10 xl:grid-cols-2 xl:place-items-stretch">
+      <div className="flex flex-col items-center justify-between gap-10 xl:flex-row">
         <ChainLink to="/" className="flex items-center gap-2 font-mono">
           <img src={iExecLogo} width="25" height="25" alt="iExec logo" />
           <span>iExec Explorer</span>
         </ChainLink>
 
-        <nav className="flex flex-col items-center gap-2 sm:flex-row sm:gap-4 xl:absolute xl:left-1/2 xl:-translate-x-1/2">
+        <nav className="flex flex-col items-center gap-2 md:flex-row md:gap-4">
           {navLinks.map(({ href, label }, idx) => (
             <div key={idx} className="flex items-center gap-2">
               <Button
@@ -70,37 +92,22 @@ export function Footer({ className }: { className?: string }) {
                 </a>
               </Button>
               {idx < navLinks.length - 1 && (
-                <span className="bg-grey-200 hidden size-1.5 rounded-full sm:block" />
+                <span className="bg-grey-200 hidden size-1.5 rounded-full md:block" />
               )}
             </div>
           ))}
         </nav>
-
-        <div className="flex items-center xl:justify-end">
-          {socialLinks.map(({ href, icon }, idx) => (
-            <Button
-              key={idx}
-              asChild
-              variant="link"
-              className="text-grey-200 p-2"
-            >
-              <a
-                href={href}
-                target="_blank"
-                rel="noopener noreferrer"
-                aria-label="Social link"
-              >
-                {icon}
-              </a>
-            </Button>
-          ))}
-        </div>
+        <SocialLinksItems className="xl:hidden" />
       </div>
 
-      <hr className="border-grey-500 mt-10 mb-4" />
-      <p className="w-full text-center text-sm">
-        © All Rights Reserved {displayYear}
-      </p>
+      <hr className="border-grey-500" />
+
+      <div className="flex justify-between">
+        <p className="w-full text-center text-sm xl:text-left">
+          © All Rights Reserved {displayYear}
+        </p>
+        <SocialLinksItems className="hidden xl:flex" />
+      </div>
     </footer>
   );
 }

src/components/Footer.tsx

@@ -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

@@ -0,0 +1,22 @@
+import { useRouter, useCanGoBack } from '@tanstack/react-router';
+import { ChevronLeft } from 'lucide-react';
+import { Button } from './button';
+
+export function BackButton({ className = '' }: { className?: string }) {
+  const router = useRouter();
+  const canGoBack = useCanGoBack();
+
+  if (!canGoBack) return null;
+
+  return (
+    <Button
+      variant="outline"
+      size="sm"
+      className={`text-grey-400 border-grey-300 pr-4! uppercase ${className}`}
+      onClick={() => router.history.back()}
+    >
+      <ChevronLeft />
+      Back
+    </Button>
+  );
+}

src/components/ui/BackButton.tsx

@@ -38,8 +38,8 @@ function TableBody({
     <tbody
       data-slot="table-body"
       className={cn(
-        '[&_tr]:border-muted *:bg-grey-900 [&_tr]:hover:*:bg-grey-700/80 [&_tr]:*:duration-150 [&_tr:last-child]:border-0',
-        zebra && '[&_tr]:odd:*:bg-grey-800 [&_tr]:odd:hover:*:bg-grey-700/80',
+        '[&_tr]:border-muted *:bg-grey-900 [&_tr]:hover:*:bg-grey-700 [&_tr]:*:duration-150 [&_tr:last-child]:border-0',
+        zebra && '[&_tr]:odd:*:bg-grey-800 [&_tr]:odd:hover:*:bg-grey-700',
         className
       )}
       {...props}

src/components/ui/table.tsx

@@ -5,6 +5,8 @@ import { bellecour, arbitrumSepolia } from './utils/wagmiNetworks';
 export const ADDRESS_LENGTH = 42;
 export const ID_OR_HASH_LENGTH = 66;
 
+export const LOCAL_STORAGE_PREFIX = 'Explorer';
+
 export const PREVIEW_TABLE_LENGTH = 5;
 export const DETAIL_TABLE_LENGTH = 8;
 export const TABLE_LENGTH = 16;
@@ -40,5 +42,6 @@ export const SUPPORTED_CHAINS = [
       'https://thegraph.arbitrum-sepolia-testnet.iex.ec/api/subgraphs/id/2GCj8gzLCihsiEDq8cYvC5nUgK6VfwZ6hm3Wj8A3kcxz',
     wagmiNetwork: arbitrumSepolia,
     tokenSymbol: 'RLC',
+    isExperimental: true,
   },
 ];