iExecBlockchainComputing · ErwanDecoster · May 13, 2025 · Apr 25, 2025 · Apr 25, 2025 · Apr 29, 2025
diff --git a/.env b/.env
@@ -1 +1,2 @@
-VITE_POCO_SUBGRAPH_URL="https://thegraph.iex.ec/subgraphs/name/bellecour/poco-v5"
+VITE_POCO_SUBGRAPH_URL="https://thegraph.iex.ec/subgraphs/name/bellecour/poco-v5"
+VITE_REOWN_PROJECT_ID=b89f75687c01fa0df9e68c903283012d
diff --git a/index.html b/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/iexec-logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Explorer</title>
+    <title>iExec Explorer</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,17 +20,20 @@
     "@fontsource-variable/mulish": "^5.2.5",
     "@fontsource/space-mono": "^5.2.5",
     "@hookform/resolvers": "^5.0.1",
+    "@icons-pack/react-simple-icons": "^12.7.0",
     "@radix-ui/react-dialog": "^1.1.7",
     "@radix-ui/react-label": "^2.1.3",
+    "@radix-ui/react-select": "^2.2.2",
     "@radix-ui/react-slot": "^1.2.0",
     "@radix-ui/react-tabs": "^1.1.4",
     "@radix-ui/react-tooltip": "^1.2.0",
+    "@reown/appkit": "^1.6.9",
+    "@reown/appkit-adapter-wagmi": "^1.6.9",
     "@rollbar/react": "^0.12.1",
     "@tailwindcss/vite": "^4.1.3",
     "@tanstack/react-query": "^5.74.4",
     "@tanstack/react-router": "^1.116.0",
     "@tanstack/react-router-devtools": "^1.116.0",
-    "@trivago/prettier-plugin-sort-imports": "^5.2.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "graphql": "^16.10.0",
@@ -43,15 +46,18 @@
     "tailwind-merge": "^3.2.0",
     "tailwindcss": "^4.1.3",
     "tw-animate-css": "^1.2.5",
-    "zod": "^3.24.2"
+    "viem": "^2.28.0",
+    "wagmi": "^2.15.0",
+    "zustand": "^5.0.3"
   },
   "devDependencies": {
     "@0no-co/graphqlsp": "^1.12.16",
     "@eslint/js": "^9.21.0",
     "@graphql-codegen/cli": "^5.0.5",
     "@graphql-codegen/schema-ast": "^4.1.0",
     "@parcel/watcher": "^2.5.1",
-    "@tanstack/router-plugin": "^1.116.1",
+    "@tanstack/router-plugin": "^1.117.2",
+    "@trivago/prettier-plugin-sort-imports": "^5.2.2",
     "@types/node": "^22.14.1",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",

diff --git a/src/assets/iexec-logo.svg b/src/assets/iexec-logo.svg
diff --git a/src/assets/profiles-avatars/Avatar1.png b/src/assets/profiles-avatars/Avatar1.png
diff --git a/src/assets/profiles-avatars/Avatar10.png b/src/assets/profiles-avatars/Avatar10.png
diff --git a/src/assets/profiles-avatars/Avatar11.png b/src/assets/profiles-avatars/Avatar11.png
diff --git a/src/assets/profiles-avatars/Avatar12.png b/src/assets/profiles-avatars/Avatar12.png
diff --git a/src/assets/profiles-avatars/Avatar13.png b/src/assets/profiles-avatars/Avatar13.png
diff --git a/src/assets/profiles-avatars/Avatar2.png b/src/assets/profiles-avatars/Avatar2.png
diff --git a/src/assets/profiles-avatars/Avatar3.png b/src/assets/profiles-avatars/Avatar3.png
diff --git a/src/assets/profiles-avatars/Avatar4.png b/src/assets/profiles-avatars/Avatar4.png
diff --git a/src/assets/profiles-avatars/Avatar5.png b/src/assets/profiles-avatars/Avatar5.png
diff --git a/src/assets/profiles-avatars/Avatar6.png b/src/assets/profiles-avatars/Avatar6.png
diff --git a/src/assets/profiles-avatars/Avatar7.png b/src/assets/profiles-avatars/Avatar7.png
diff --git a/src/assets/profiles-avatars/Avatar8.png b/src/assets/profiles-avatars/Avatar8.png
diff --git a/src/assets/profiles-avatars/Avatar9.png b/src/assets/profiles-avatars/Avatar9.png
diff --git a/src/assets/react.svg b/src/assets/react.svg
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -0,0 +1,102 @@
+import { cn } from '@/lib/utils';
+import {
+  SiDiscord,
+  SiMedium,
+  SiTelegram,
+  SiX,
+  SiYoutube,
+} from '@icons-pack/react-simple-icons';
+import { Link } from '@tanstack/react-router';
+import { Linkedin } from 'lucide-react';
+import iExecLogo from '../assets/iexec-logo.svg';
+import { Button } from './ui/button';
+
+export function Footer({ className }: { className?: string }) {
+  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: 'https://www.iex.ec/contact', label: 'Contact Us' },
+  ];
+
+  const socialLinks = [
+    { href: 'https://twitter.com/iEx_ec', icon: <SiX size={16} /> },
+    { href: 'https://discord.gg/pbt9m98wnU', icon: <SiDiscord size={16} /> },
+    { href: 'https://t.me/iexec_rlc_official', icon: <SiTelegram size={16} /> },
+    {
+      href: 'https://www.youtube.com/channel/UCwWxZWvKVHn3CXnmDooLWtA',
+      icon: <SiYoutube size={16} />,
+    },
+    {
+      href: 'https://www.linkedin.com/company/iex.ec/',
+      icon: <Linkedin size={16} />,
+    },
+    { href: 'https://medium.com/iex-ec', icon: <SiMedium size={16} /> },
+  ];
+
+  const startYear = 2017;
+  const currentYear = new Date().getFullYear();
+  const displayYear =
+    currentYear > startYear
+      ? `${startYear} - ${currentYear}`
+      : `${currentYear}`;
+
+  return (
+    <footer
+      className={cn(
+        'bg-grey-800 border-muted text-grey-200 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-3 xl:place-items-stretch">
+        <Link 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>
+
+        <nav className="flex flex-col items-start gap-4 sm:flex-row sm:items-center sm:gap-4">
+          {navLinks.map(({ href, label }, idx) => (
+            <div key={idx} className="flex items-center gap-2">
+              <Button
+                asChild
+                variant="link"
+                className="text-grey-200 p-2 font-mono"
+              >
+                <a href={href} target="_blank" rel="noopener noreferrer">
+                  {label}
+                </a>
+              </Button>
+              {idx < navLinks.length - 1 && (
+                <span className="bg-grey-200 hidden size-1.5 rounded-full sm: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>
+      </div>
+
+      <hr className="border-grey-500 mt-10 mb-4" />
+      <p className="w-full text-center text-sm">
+        © All Rights Reserved {displayYear}
+      </p>
+    </footer>
+  );
+}
diff --git a/src/components/UnsupportedChain.tsx b/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 { isConnected, chainId } = useUserStore();
+
+  const isChainSupported =
+    chainId !== undefined && SUPPORTED_CHAIN_IDS.includes(chainId);
+
+  if (isChainSupported || !isConnected) {
+    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>
+  );
+}
diff --git a/src/components/navbar/AddressChip.tsx b/src/components/navbar/AddressChip.tsx
@@ -0,0 +1,64 @@
+import clsx from 'clsx';
+import { useState } from 'react';
+import { getAvatarVisualNumber } from '@/utils/getAvatarVisualNumber';
+import { truncateAddress } from '@/utils/truncateAddress';
+import { Button } from '../ui/button';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '../ui/tooltip';
+import avatarStyles from './profile.module.css';
+
+export function AddressChip({ address }: { address: string }) {
+  const avatarVisualBg = getAvatarVisualNumber({
+    address,
+  });
+
+  const [showTooltip, setShowTooltip] = useState(false);
+  const [tooltipMessage, setTooltipMessage] = useState('Copy address');
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(address).then(() => {
+      setTooltipMessage('Address copied!');
+      setShowTooltip(true);
+      setTimeout(() => setShowTooltip(false), 2000);
+    });
+  };
+
+  const handleMouseEnter = () => {
+    setTooltipMessage('Copy address');
+    setShowTooltip(true);
+  };
+
+  const handleMouseLeave = () => {
+    setShowTooltip(false);
+  };
+  return (
+    <TooltipProvider delayDuration={0}>
+      <Tooltip open={showTooltip}>
+        <TooltipTrigger asChild>
+          <Button
+            className="bg-grey-800 hover:bg-muted text-primary"
+            variant="secondary"
+            onClick={handleCopy}
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+          >
+            <span className="text-sm">{truncateAddress(address)}</span>
+            <div
+              className={clsx(
+                avatarStyles[avatarVisualBg],
+                'relative z-10 size-4 rounded-full bg-black bg-cover'
+              )}
+            />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent side="top" className="max-w-sm">
+          {tooltipMessage}
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}