Feat: add account page (#27)

* feat: add data table component and integrate with apps route

* feat: add SearcherBar component and integrate it into apps and index routes

* refactor: remove unused Link import from columns.tsx

* feat: implement PaginatedNavigation component in AppsTable for pagination support

* refactor: enhance pagination logic in PaginatedNavigation component for improved readability and functionality

* refactor: adjust pagination logic in generatePaginationItems for improved visibility and functionality

* fix: border transition looking bad

* refactor: update useAppsData to accept currentPage for dynamic data fetching

* fix: add placeholderData to useQuery for improved data handling

* refactor: wrap app name in a div and fixe is width

* fix: update TABLE_LENGTH to 16 for correct configuration

* refactor: remove AppsTable component and integrate its functionality directly into AppsRoute with refetch indicator

* feat: add Deals route with data fetching and pagination functionality

* fix: rename taskQuery to tasksQuery for consistency in data fetching

* refactor: reorganize imports and simplify conditional rendering in DealsRoute

* feat: implement Tasks route with data fetching, pagination, and task table columns

* refactor: replace inline type definitions with GraphQL query types for Apps and Deals

* fix: display workerpool description directly in the table instead of using CopyButton

* feat: add Workerpools route with data fetching, pagination, and table columns

* fix: wrap CopyButton in a div to set a fixed width for app name display

* fix: improve description display in workerpools table with consistent styling

* fix: replace CopyButton with conditional rendering for dataset name display

* feat: add Datasets route with data fetching, pagination, and table columns

* fix: update PaginationEllipsis styling for better responsiveness

* fix: update query state variables to indicate refetch and loading

* fix: update loading indicator logic to show during loading or refetching

* fix: adjust SearcherBar styling for improved layout and responsiveness

* fix: refactor SearcherBar layout for improved structure and styling

* fix: adjust SearcherBar padding for improved layout consistency

* fix: simplify Button component structure in SearcherBar for cleaner code

* fix: update PaginationPrevious and PaginationNext to use screen reader only text for accessibility

* fix: refactor SearcherBar to improve button visibility and input class handling based on connection status

* fix: update placeholder text in SearcherBar for clarity

* feat: rename folder

* feat: rename folder AppsTable/ to appTable/

* fix: remove unnecessary 'use client' directive from multiple components

* feat: enhance DataTable component with tableLength and isLoading props for improved data handling

* feat: move routes for apps, datasets, deals, tasks, and workerpools

* fix: update destination paths for apps, datasets, deals, tasks, and workerpools routes

* feat: implement DataTable component and update routes to use it

* feat: replace useNavigate with Link in DataTable for improved navigation

* feat: refactor preview tables to use DataTable component for improved rendering and data handling

* fix: prevent default button behavior in CopyButton component

* feat: rename WorkerpoolsPreviewTable component and update import path

* fix: update import path for WorkerpoolsPreviewTable component

* feat: add routes for datasets, deals, tasks, and workerpools with data handling and pagination

* refactor: remove unused AppsTable component and related code

* feat: add NextApps, NextDatasets, NextDeals, NextTasks, and NextWorkerpools to assure next page in pagination

* fix: update import path for WorkerpoolsPreviewTable component

* chore: update @radix-ui/react-slot version to 1.2.2 in package.json and package-lock.json

* feat: update pagination logic in multiple routes to adjust current page and total pages

* feat: add ChainSelector component and integrate new chain Arbitrum Sepolia and Avalanche Fuji

* fix: update danger color variables for improved accessibility

* fix: replace Terminal icon with AlertOctagon in UnsupportedChain component

* fix: adjust border radius and add left border to destructive alert variant

* fix: remove Avalanche Fuji from configuration

* fix: add color property to chain objects and update background color in Index component

* feat: integrate subgraph URL management in user store and update query execution across preview tables

* fix: add query client initialization and invalidate queries in useSyncAccountWithUserStore

* fix: update useUserStore import and refactor query execution in TasksPreviewTable and WorkerpoolsPreviewTable

* fix: update query execution in apps, datasets, deals, tasks, and workerpools routes to include subgraph URL

* fix: update query execution in preview tables to include chainId in query keys and invalidate query on chain update

* fix: update query execution in WorkerpoolsPreviewTable to include chainId and subgraphUrl

* fix: temps renaming

* fix: rename WorkerpoolsPreviewTable

* fix: correct import path for WorkerpoolsPreviewTable

* fix: update ChainSelector to handle chainId as a required number

* fix: update useSyncAccountWithUserStore to set chainId only when currentChain is found

* fix: refactor to use chainId instead of subgraphUrl in various components and hooks

* fix: update subgraphUrl for Arbitrum Sepolia in SUPPORTED_CHAINS

* fix: simplify ChainSelector by removing local state and using chainId directly

* feat: implement dynamic routes for chain-specific apps, datasets, tasks, and workerpools; remove deprecated deals route

* feat: add missing deals page, lost during merge

* fix: import filename casing issue

* fix: make displayText optional in CopyButton component

* fix: update DataTable and Table components for improved styling; enhance formatElapsedTime utility for better timestamp handling

* feat: implement deal details and tasks tables

* fix: update TableCell and buildDealDetails components to use <p> tags for better semantic structure

* fix: update TableCell component to use inline-flex for improved layout

* fix: remove GPT comment from blockExplorerUrl declaration

* fix: refactor SmartLinkGroup to use dynamic block explorer URL and improve breadcrumb links with ChainLink component

* fix: rename dealTaskQuery to dealTasksQuery

* fix: update label in SmartLinkGroup to use dataset address instead of name

* fix: update DealTasksTable and buildDealDetails to handle error states and improve data fetching logic

* feat: add dataset details and dataset deals functionality

* feat: implement ErrorAlert component and replace inline error handling in various tables

* feat: update DatasetDealsTable to filter out 'dealid' column and enhance DealTasksTable with extended columns

* feat: add Workerpool details and deals functionality with GraphQL queries and components

* feat: implement app details and app deals functionality with GraphQL queries and components

* feat: add task details page with GraphQL query and components, including task breadcrumbs and error handling

* refactor: clean up formatting in buildAppDetails and AppsRoute components

* feat: refactor event components for better modularity and readability

* feat: add task link type and update block explorer functionality in SmartLinkGroup component

* feat: replace inline JSON display with JsonBlock component in buildDealDetails

* feat: add transaction details and event queries

* refactor: remove debug log from buildAppDetails function

* fix: update DealEventProps structure and adjust SmartLinkGroup types in buildTransactionDetails

* feat: Add address details page with queries for beneficiary deals, requested deals, requested tasks and overview

* fix: regenerate routeTree

* refactor: re generate gql file

* fix: remove redundant code in TasksPreviewTable component

* fix: make deal prop optional in DealEvent component

* fix: include currentPage in queryKey for beneficiaryDeals requestedDeals and requestedTasks

* fix: update TableCell height in DataTable component to avoid deferent empty size

* feat: add appPrice, datasetPrice, and workerpoolPrice to AddressBeneficiaryDeals and AddressRequestedDeals queries

* feat: add AddressContribution and NextAddressContribution queries and corresponding components

* fix: remove console.log statements from AddressBeneficiaryDealsTable, AddressRequestedDealsTable, and AddressRequestedTasksTable components

* feat: add AddressApps and NextAddressApps queries and corresponding AddressAppsTable component

* feat: add Address Datasets and Workerpools tables with corresponding queries

* fix: remove redundant deployed apps display in AddressRoute component

* feat: enhance Tabs component with disabled states and tooltips based on address data

* fix: update import from multiaddr to @multiformats/multiaddr and adjust package dependencies

* fix: adjust ChainLink component to take for width in DataTable

* feat: replace address display with SmartLinkGroup component in buildAddressOverview

* fix: format count display for address details to handle large numbers

* refactor: remove unused tab styles and add cursor pointer to buttons

* feat: integrate StatusCell component for task status display in buildTaskDetails and columns

* refactor: remove unused import of SUPPORTED_CHAINS in useUser.store

* fix: update rlcToNrlc function to support bigint input and return type

* feat: update SearcherBar to display user activity link based on user address

* feat: implement ClaimButton component and integrate it into task and deals details

* chore: add TODO entry to .gitignore

* refactor: update GraphQL types and improve type safety across components

* fix: separate build and type check scripts in package.json

* fix: correct deadline and add loading indicator

* style: adjust padding and layout in Navbar, SearcherBar, and Root components

* style: adjust spacing and layout for headers in various route components

* style: fix spacing in TableCell component className

* feat: add DownloadResult component for downloading task results from IPFS

* style: refactor layout of App and Dataset details headers for improved spacing

* feat: implement account management layout with tabs and stepper for deposit/withdraw actions

* feat: enhance account management with deposit/withdraw functionality and bridge integration

* feat: update query keys to include chainId and improve tab navigation logic

* style: fix className order in Stepper component for consistency

* feat: add IexecAccountIcon and WalletIcon components; enhance account layout with icons and improved styling

* fix: ensure non-null assertion for chainId and userAddress; improve mobile step display styling

* feat: move Coingecko URL to config file; enhance error handling in account component; keep current step between tabs

* fix: temp rename of IexecAccountIcon

* fix: rename IexecAccountIcon component and update import in account layout

* refactor: remove unused routes from ChainSlug layout

* fix: addressAddress page merge

* fix: update button background color in SearcherBar component

* fix: replace div with span for wallet and account icons in RouteComponent

* fix: update SVG attributes to camelCase in IexecAccountIcon and WalletIcon components

* fix: add wallet connection prompt in RouteComponent when user is not connected

* fix: update token references to use dynamic token symbols across components

* fix: handle non-numeric and non-positive strict values

Co-authored-by: pjt <[email protected]>

* fix: handle non-numeric and non-positive strict values

Co-authored-by: pjt <[email protected]>

* fix: remove error alerts for RLC price for total deposits and withdrawals

* fix: update GitHub Actions workflow to trigger on pull requests and ensure linting step is included

* fix: update GitHub Actions workflow to not trigger on pull requests and fix formatting in getTabs component

* fix: change input type for deposit and withdraw amounts to text for better handling of decimal values

* fix: update rlcToNrlc function to use big.js for improved precision and handle string inputs

* fix: update deposit and withdraw mutation checks to validate amounts instead of total balances

* fix: replace totalToDeposit and totalToWithdraw with walletBalance and accountStakedBalance

* fix: remove unused intermediary color variables from CSS

* fix: correct variable name for account staked balance refetch function

---------

Co-authored-by: Pierre Jeanjacquot <[email protected]>

Author: ErwanDecoster

.github/workflows/main.yml

@@ -21,4 +21,7 @@ jobs:
           npm ci --no-fund
 
       - name: Check Prettier
-        run: npm run check-format
+        run: npm run check-format
+
+      - name: Lint
+        run: npm run lint

package-lock.json

@@ -38,6 +38,7 @@
     "@tanstack/react-router-devtools": "^1.116.0",
     "@tanstack/react-table": "^8.21.3",
     "@trivago/prettier-plugin-sort-imports": "^5.2.2",
+    "big.js": "^7.0.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "graphql": "^16.10.0",
@@ -63,6 +64,7 @@
     "@parcel/watcher": "^2.5.1",
     "@tanstack/router-plugin": "^1.117.2",
     "@trivago/prettier-plugin-sort-imports": "^5.2.2",
+    "@types/big.js": "^6.2.2",
     "@types/node": "^22.14.1",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",

package.json

@@ -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/Stepper.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/IexecAccountIcon.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/icons/WalletIcon.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/components/ui/button.tsx

@@ -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,7 +20,11 @@ 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 in your wallet between bellecour and Ethereum Mainnet with our bridge.',
     wagmiNetwork: bellecour,
+    tokenSymbol: 'xRLC',
   },
   {
     id: 421614,
@@ -31,5 +36,6 @@ export const SUPPORTED_CHAINS = [
     subgraphUrl:
       'https://thegraph.arbitrum-sepolia-testnet.iex.ec/api/subgraphs/id/2GCj8gzLCihsiEDq8cYvC5nUgK6VfwZ6hm3Wj8A3kcxz',
     wagmiNetwork: arbitrumSepolia,
+    tokenSymbol: 'RLC',
   },
 ];

src/config.ts

@@ -223,7 +223,7 @@
 
   --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/index.css

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