Feat: add account page

src/components/Stepper.tsx

@@ -0,0 +1,70 @@
+import { cn } from '@/lib/utils';
+import { Check } from 'lucide-react';
+import React from 'react';
+
+type StepperProps = {
+  classname: string;
+  currentStep: number;
+  steps: string[];
+};
+
+export const Stepper: React.FC<StepperProps> = ({
+  classname,
+  currentStep,
+  steps,
+}) => {
+  const stepsNb = steps.length;
+
+  return (
+    <div
+      className={cn('grid gap-y-4', classname)}
+      style={{
+        gridTemplateColumns: `repeat(${stepsNb}, minmax(0, 1fr))`,
+        maxWidth: stepsNb * 350,
+      }}
+      aria-label="Progress indicator"
+    >
+      {steps.map((step, index) => {
+        const isActive = currentStep >= index;
+        const isCompleted = currentStep > index;
+
+        return (
+          <div key={step} className="flex w-full flex-col items-center">
+            <div className="relative w-full">
+              {index < stepsNb - 1 && (
+                <span
+                  className={cn(
+                    'absolute top-1/2 right-0 h-px w-1/2 translate-x-1/2 -translate-y-1/2 rounded-full',
+                    isCompleted ? 'bg-white' : 'bg-grey-400'
+                  )}
+                />
+              )}
+              <div
+                className={cn(
+                  'mx-auto flex size-8 items-center justify-center rounded-full',
+                  isActive ? 'bg-white text-black' : 'bg-grey-700',
+                  isCompleted && 'bg-primary text-black'
+                )}
+                aria-label={`Step ${index + 1}`}
+              >
+                {isCompleted ? (
+                  <Check size="16" strokeWidth="2.5" />
+                ) : (
+                  index + 1
+                )}
+              </div>
+            </div>
+            <span
+              className={cn(
+                'mt-2 text-center',
+                isActive ? 'text-white' : 'text-grey-500'
+              )}
+            >
+              {step}
+            </span>
+          </div>
+        );
+      })}
+    </div>
+  );
+};

src/components/icons/IexecAccountIcon.tsx

@@ -0,0 +1,58 @@
+const IexecAccountIcon = ({ size = 20, className = '' }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M15.4675 11.3324H15.3194C14.5782 11.4065 14.0593 11.9995 14.1334 12.7406C14.1334 12.8888 14.0593 13.1112 13.911 13.1853C13.8369 13.2594 13.7628 13.2594 13.6144 13.2594C13.5404 13.2594 13.4663 13.2594 13.392 13.1853C13.1696 13.0371 12.9474 12.9629 12.6509 12.9629H12.5027C11.7615 13.037 11.2426 13.63 11.3167 14.3711C11.3167 14.5936 11.2426 14.7417 11.0943 14.8158C11.0202 14.8899 10.9461 14.8899 10.7978 14.8899C10.7237 14.8899 10.6496 14.8899 10.5753 14.8158C10.3529 14.6676 10.1307 14.5934 9.90827 14.5934C9.1671 14.5934 8.5741 15.1864 8.5741 15.9275C8.5741 16.6687 9.1671 17.2617 9.90827 17.2617H10.0564C10.7235 17.1876 11.1682 16.6687 11.2424 16.0757V15.8533C11.2424 15.7051 11.3165 15.4827 11.4649 15.4086C11.5389 15.3345 11.613 15.3345 11.7614 15.3345C11.8354 15.3345 11.9095 15.3345 11.9838 15.4086C12.2062 15.5568 12.4284 15.631 12.7249 15.631H12.8731C13.5402 15.557 13.9848 15.038 14.0591 14.445V14.2226C14.0591 14.0002 14.1332 13.852 14.2815 13.7779C14.3556 13.7039 14.4297 13.7039 14.578 13.7039C14.6521 13.7039 14.7262 13.7039 14.8005 13.7779C15.0229 13.9261 15.2451 14.0004 15.5416 14.0004C16.2828 14.0004 16.8758 13.4074 16.8758 12.6662C16.8017 11.925 16.2087 11.332 15.4675 11.332"
+      fill="#FCD15A"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M15.4674 11.3324H15.3193C14.5781 11.4065 14.0592 11.9995 14.1333 12.7406C14.1333 12.8888 14.0592 13.1112 13.9108 13.1853C13.8367 13.2594 13.7627 13.2594 13.6143 13.2594C13.5402 13.2594 13.4662 13.2594 13.3919 13.1853C13.1695 13.0371 12.9472 12.9629 12.6507 12.9629H12.5026C11.7614 13.037 11.2425 13.63 11.3166 14.3711C11.3166 14.5936 11.2425 14.7417 11.0942 14.8158C11.0201 14.8899 10.946 14.8899 10.7976 14.8899C10.7236 14.8899 10.6495 14.8899 10.5752 14.8158C10.3528 14.6676 10.1306 14.5934 9.90814 14.5934C9.16698 14.5934 8.57397 15.1864 8.57397 15.9275C8.57397 16.6687 9.16698 17.2617 9.90814 17.2617H10.0563C10.7234 17.1876 11.168 16.6687 11.2423 16.0757V15.8533C11.2423 15.7051 11.3164 15.4827 11.4647 15.4086C11.5388 15.3345 11.6129 15.3345 11.7612 15.3345C11.8353 15.3345 11.9094 15.3345 11.9837 15.4086C12.2061 15.5568 12.4283 15.631 12.7248 15.631H12.873C13.5401 15.557 13.9847 15.038 14.059 14.445V14.2226C14.059 14.0002 14.1331 13.852 14.2814 13.7779C14.3555 13.7039 14.4296 13.7039 14.5779 13.7039C14.652 13.7039 14.7261 13.7039 14.8003 13.7779C15.0228 13.9261 15.245 14.0004 15.5415 14.0004C16.2827 14.0004 16.8757 13.4074 16.8757 12.6662C16.8016 11.925 16.2086 11.332 15.4674 11.332"
+      fill="#FCD15A"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M12.6508 9.62518H12.5027C11.7615 9.69926 11.2426 10.2923 11.3167 11.0334C11.3167 11.2559 11.2426 11.404 11.0943 11.4781C11.0202 11.5522 10.9461 11.5522 10.7978 11.5522C10.7237 11.5522 10.6496 11.5522 10.5753 11.4781C10.3529 11.3299 10.1307 11.2557 9.83417 11.2557H9.68601C9.01892 11.3298 8.5 11.9228 8.5 12.5898C8.5 13.331 9.093 13.924 9.83417 13.924H9.98233C10.6494 13.8499 11.0941 13.331 11.1683 12.738V12.5156C11.1683 12.2932 11.2424 12.145 11.3908 12.0709C11.4648 11.9968 11.5389 11.9968 11.6873 11.9968C11.7613 11.9968 11.8354 11.9968 11.9097 12.0709C12.1321 12.2191 12.3543 12.2933 12.6508 12.2933H12.799C13.4661 12.2193 13.985 11.6263 13.985 10.9592C13.985 10.218 13.392 9.625 12.6508 9.625"
+      fill="#FCD15A"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M12.6508 9.62518H12.5027C11.7615 9.69926 11.2426 10.2923 11.3167 11.0334C11.3167 11.2559 11.2426 11.404 11.0943 11.4781C11.0202 11.5522 10.9461 11.5522 10.7978 11.5522C10.7237 11.5522 10.6496 11.5522 10.5753 11.4781C10.3529 11.3299 10.1307 11.2557 9.83417 11.2557H9.68601C9.01892 11.3298 8.5 11.9228 8.5 12.5898C8.5 13.331 9.093 13.924 9.83417 13.924H9.98233C10.6494 13.8499 11.0941 13.331 11.1683 12.738V12.5156C11.1683 12.2932 11.2424 12.145 11.3908 12.0709C11.4648 11.9968 11.5389 11.9968 11.6873 11.9968C11.7613 11.9968 11.8354 11.9968 11.9097 12.0709C12.1321 12.2191 12.3543 12.2933 12.6508 12.2933H12.799C13.4661 12.2193 13.985 11.6263 13.985 10.9592C13.985 10.218 13.392 9.625 12.6508 9.625"
+      fill="#FCD15A"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M8.5 9.33417C8.5 10.0753 9.093 10.6683 9.83417 10.6683C10.5753 10.6683 11.1683 10.0753 11.1683 9.33417C11.1683 8.593 10.5753 8 9.83417 8C9.093 8 8.5 8.593 8.5 9.33417Z"
+      fill="#FCD15A"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M8.5 9.33417C8.5 10.0753 9.093 10.6683 9.83417 10.6683C10.5753 10.6683 11.1683 10.0753 11.1683 9.33417C11.1683 8.593 10.5753 8 9.83417 8C9.093 8 8.5 8.593 8.5 9.33417Z"
+      fill="#FCD15A"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M12.0031 4C7.33814 4 3.5 7.77913 3.5 12.4441C3.5 17.1091 7.33829 20.8882 12.0031 20.8882C13.125 20.8882 14.2471 20.652 15.31 20.2387C18.4396 18.9396 20.5064 15.869 20.5064 12.5031C20.5654 7.77913 16.7271 4 12.0031 4Z"
+      stroke="#FCD15A"
+      strokeWidth="1.59441"
+      strokeLinecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);
+
+export default IexecAccountIcon;

src/components/icons/WalletIcon.tsx

@@ -0,0 +1,34 @@
+const WalletIcon = ({ size = 20, className = '' }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      d="M18.9617 5.46094H5.03832C3.9126 5.46094 3 6.37354 3 7.49926V16.4993C3 17.625 3.9126 18.5376 5.03832 18.5376H18.9617C20.0874 18.5376 21 17.625 21 16.4993V7.49926C21 6.37354 20.0874 5.46094 18.9617 5.46094Z"
+      stroke="#FCD15A"
+      strokeWidth="1.56"
+      strokeLinecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M21 9.96019C21 8.83447 20.0874 7.92188 18.9617 7.92188H5.03832C3.9126 7.92188 3 8.83447 3 9.96019"
+      stroke="#FCD15A"
+      strokeWidth="1.56"
+      strokeLinecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M21 12.5383C21 11.4126 20.0874 10.5 18.9617 10.5H15.4116C15.1471 10.5 14.8924 10.6001 14.6986 10.7802L12.713 12.6257C12.311 12.9992 11.689 12.9992 11.287 12.6257L9.30144 10.7802C9.10764 10.6001 8.853 10.5 8.5884 10.5H5.03832C3.9126 10.5 3 11.4126 3 12.5383"
+      stroke="#FCD15A"
+      strokeWidth="1.56"
+      strokeLinecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);
+
+export default WalletIcon;

src/components/ui/button.tsx

@@ -24,8 +24,9 @@ const buttonVariants = cva(
           'from-primary text-primary hover:before:bg-muted relative z-0 overflow-hidden bg-gradient-to-b to-primary before:absolute before:inset-px before:-z-10 before:rounded-[29px] before:bg-[#322B1E] before:duration-300',
       },
       size: {
-        default: 'h-9 px-4 py-2 has-[>svg]:px-3 rounded-full',
+        xs: 'h-6 rounded-full px-2 text-xs has-[>svg]:px-1.5 gap-1',
         sm: 'h-8 rounded-full gap-1.5 px-3 has-[>svg]:px-2.5',
+        default: 'h-9 px-4 py-2 has-[>svg]:px-3 rounded-full',
         lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
         icon: 'size-9 rounded-md',
       },

src/config.ts

@@ -9,6 +9,7 @@ export const PREVIEW_TABLE_REFETCH_INTERVAL = 10_000;
 export const TABLE_REFETCH_INTERVAL = 10_000;
 
 export const IPFS_GATEWAY_URL = 'https://ipfs.iex.ec';
+export const API_COINGECKO_URL = 'https://api.coingecko.com/api/v3/simple/';
 
 export const SUPPORTED_CHAINS = [
   {
@@ -19,6 +20,9 @@ export const SUPPORTED_CHAINS = [
     icon: iexecLogo,
     blockExplorerUrl: 'https://blockscout-bellecour.iex.ec',
     subgraphUrl: 'https://thegraph.iex.ec/subgraphs/name/bellecour/poco-v5',
+    bridge: 'https://bridge-bellecour.iex.ec/',
+    bridgeInformation:
+      'Move your xRLC/RLC in your wallet between iExec Sidechain and Ethereum Mainnet with our bridge.',
     wagmiNetwork: bellecour,
   },
   {

src/index.css

@@ -197,12 +197,15 @@
   --muted: var(--color-grey-700);
   --muted-foreground: var(--color-grey-300);
 
+  /* --intermediary: var(--color-grey-400);
+  --intermediary-foreground: var(--color-grey-600); */
+
   --accent: var(--color-grey-700);
   --accent-foreground: var(--color-white);
 
   --destructive: var(--color-red-500);
   --border: var(--color-white);
-  --input: var(--color-grey-700);
+  --input: var(--color-grey-400);
   --ring: var(--color-primary);
 
   --chart-1: oklch(0.488 0.243 264.376);

src/modules/SearcherBar.tsx

@@ -13,7 +13,7 @@ export function SearcherBar({ className }: { className?: string }) {
       <div className="relative w-full">
         <Input
           className={cn(
-            'bg-input border-secondary w-full rounded-2xl py-5.5 pl-12 sm:py-6.5',
+            'bg-muted border-secondary w-full rounded-2xl py-5.5 pl-12 sm:py-6.5',
             isConnected && 'sm:pr-32'
           )}
           placeholder="Search address or id or transaction"
@@ -25,7 +25,7 @@ export function SearcherBar({ className }: { className?: string }) {
         {isConnected && (
           <Button
             variant="outline"
-            className="bg-input hover:bg-secondary absolute top-1/2 right-4 hidden -translate-y-1/2 sm:flex"
+            className="bg-muted hover:bg-secondary absolute top-1/2 right-4 hidden -translate-y-1/2 sm:flex"
             asChild
           >
             <ChainLink to={`/address/${userAddress}`}>My activity</ChainLink>

src/modules/Tabs.tsx

@@ -22,7 +22,7 @@ export function Tabs({
   disabledReasons = {},
 }: TabsProps) {
   return (
-    <div className="flex items-center gap-6">
+    <div className="-mb-2 flex items-center gap-6 overflow-x-auto pb-2">
       {tabLabels.map((label, index) => {
         const isDisabled = disabledTabs.includes(index);
         const reason = disabledReasons[index];

src/modules/account/AccountBreadcrumbs.tsx

@@ -0,0 +1,27 @@
+import { ChainLink } from '@/components/ChainLink';
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/components/ui/breadcrumb';
+
+export function AccountBreadcrumbs() {
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink asChild>
+            <ChainLink to="/">Homepage</ChainLink>
+          </BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Account</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  );
+}