feat: enhance address and id validation, fix status color, save tabs in URL (#43)

* feat: enhance address and id validation and refactor related functions

* style: update color variables for danger, warning, and info states to improve accessibility and visual consistency

* fix: StatusCell in buildTaskDetails was not showing the good color

* feat: add useTabParam hook for managing tab state and navigation in AddressRoute

* feat: integrate useTabParam for tab state management in account and deal routes

* style: update color classes in StatusCell for improved visual consistency

* refactor: simplify search parameter handling in useTabParam for improved readability

* style: reduce padding in SearcherBar across multiple layout components for improved consistency

* chore: add .nvmrc file to specify Node.js version 22

* fix: update address validation logic in SmartLinkGroup to use isValidAddress utility

* fix: comment for isValidId function

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

* fix: remove unused import of ADDRESS_LENGTH in SmartLinkGroup component

* fix: update address validation logic in SearcherBar to use isValidAddress and isValidId utilities

* refactor: remove unused SUPPORTED_CHAINS import and clean up disabled tab logic in account layout

* refactor: remove constants for address and ID lengths from config and update validation functions to use hardcoded values

* refactor: rename taskAddress to taskId in route definitions and related components for consistency

* refactor: rename dealAddress to dealId in route definitions, queries, and components for consistency

* refactor: rename transactionAddress to transactionHash in queries and route definitions for consistency

* refactor: update isValidId and isValidAddress functions to use regex for validation and improve comments

---------

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

Author: ErwanDecoster

.nvmrc

@@ -0,0 +1 @@
+22

src/components/SmartLinkGroup.tsx

@@ -5,6 +5,7 @@ import CopyButton from '@/components/CopyButton';
 import { Button } from '@/components/ui/button';
 import { getIExec, getReadonlyIExec } from '@/externals/iexecSdkClient';
 import useUserStore from '@/stores/useUser.store';
+import { isValidAddress } from '@/utils/addressOrIdCheck';
 import { getBlockExplorerUrl, getChainFromId } from '@/utils/chain.utils';
 import { truncateAddress } from '@/utils/truncateAddress';
 import {
@@ -57,7 +58,7 @@ export default function SmartLinkGroup({
       }
       return resolved;
     },
-    enabled: !!chainId && !!addressOrId && addressOrId.length === 42,
+    enabled: !!chainId && isValidAddress(addressOrId),
     staleTime: Infinity,
   });
 

src/hooks/usePageParam.ts

@@ -21,3 +21,34 @@ export function usePageParam(paramName: string, defaultValue = 1) {
 
   return [page, setPage] as const;
 }
+
+export function useTabParam(
+  paramName: string,
+  tabLabels: string[],
+  defaultIndex = 0
+) {
+  const search = useSearch({ strict: false });
+  const navigate = useNavigate();
+
+  const labelFromUrl = search?.[paramName];
+  const tabIndex = labelFromUrl
+    ? tabLabels.indexOf(labelFromUrl)
+    : defaultIndex;
+  const currentTab = tabIndex >= 0 ? tabIndex : defaultIndex;
+
+  const setTab = (newTabIndex: number) => {
+    const newLabel = tabLabels[newTabIndex];
+    if (newLabel && newTabIndex !== currentTab) {
+      navigate({
+        search: (prev) => ({
+          ...prev,
+          [paramName]: newLabel,
+        }),
+        replace: true,
+        resetScroll: false,
+      });
+    }
+  };
+
+  return [currentTab, setTab] as const;
+}

src/index.css

@@ -175,17 +175,17 @@
   --color-success-foreground: var(--color-green-600);
   --color-success-border: var(--color-green-600);
 
-  --color-danger: var(--color-red-900);
-  --color-danger-foreground: var(--color-red-100);
-  --color-danger-border: var(--color-red-500);
+  --color-danger: var(--color-red-100);
+  --color-danger-foreground: var(--color-red-300);
+  --color-danger-border: var(--color-red-300);
 
   --color-warning: var(--color-orange-100);
-  --color-warning-foreground: var(--color-orange-600);
-  --color-warning-border: var(--color-orange-500);
+  --color-warning-foreground: var(--color-orange-300);
+  --color-warning-border: var(--color-orange-300);
 
   --color-info: var(--color-blue-100);
-  --color-info-foreground: var(--color-blue-600);
-  --color-info-border: var(--color-blue-600);
+  --color-info-foreground: var(--color-blue-300);
+  --color-info-border: var(--color-blue-300);
 
   --color-sidebar-foreground: var(--sidebar-foreground);
   --color-sidebar-primary: var(--sidebar-primary);

src/modules/addresses/address/workers/beneficiaryDeals/columns.tsx

@@ -14,13 +14,13 @@ export const columns: ColumnDef<AddressContribution>[] = [
     accessorKey: 'taskid',
     header: 'Task',
     cell: ({ row }) => {
-      const taskAddress = row.original.task.taskid;
+      const taskId = row.original.task.taskid;
       return (
         <CopyButton
-          displayText={truncateAddress(taskAddress, {
+          displayText={truncateAddress(taskId, {
             startLen: 8,
           })}
-          textToCopy={taskAddress}
+          textToCopy={taskId}
         />
       );
     },

src/modules/deals/deal/DealTasksTable.tsx

@@ -8,17 +8,17 @@ import useUserStore from '@/stores/useUser.store';
 import { createPlaceholderDataFnForQueryKey } from '@/utils/createPlaceholderDataFnForQueryKey';
 import { dealTasksQuery } from './dealTasksQuery';
 
-function useDealTasksData({ dealAddress }: { dealAddress: string }) {
+function useDealTasksData({ dealId }: { dealId: string }) {
   const { chainId } = useUserStore();
 
-  const queryKey = [chainId, 'deal', 'tasks', dealAddress];
+  const queryKey = [chainId, 'deal', 'tasks', dealId];
   const { data, isLoading, isRefetching, isError, errorUpdateCount } = useQuery(
     {
       queryKey,
       queryFn: () =>
         execute(dealTasksQuery, chainId, {
           length: DETAIL_TABLE_LENGTH,
-          dealAddress,
+          dealId,
         }),
       refetchInterval: TABLE_REFETCH_INTERVAL,
       placeholderData: createPlaceholderDataFnForQueryKey(queryKey),
@@ -40,8 +40,8 @@ function useDealTasksData({ dealAddress }: { dealAddress: string }) {
   };
 }
 
-export function DealTasksTable({ dealAddress }: { dealAddress: string }) {
-  const { data: tasks, hasPastError } = useDealTasksData({ dealAddress });
+export function DealTasksTable({ dealId }: { dealId: string }) {
+  const { data: tasks, hasPastError } = useDealTasksData({ dealId });
 
   // TODO: handle loading state
 

src/modules/deals/deal/dealQuery.ts

@@ -1,8 +1,8 @@
 import { graphql } from '@/graphql/gql';
 
 export const dealQuery = graphql(`
-  query Deal($dealAddress: ID!) {
-    deal(id: $dealAddress) {
+  query Deal($dealId: ID!) {
+    deal(id: $dealId) {
       dealid: id
       timestamp
       startTime

src/modules/deals/deal/dealTasksQuery.ts

@@ -1,8 +1,8 @@
 import { graphql } from '@/graphql/gql';
 
 export const dealTasksQuery = graphql(`
-  query DealTasks($dealAddress: ID!) {
-    deal(id: $dealAddress) {
+  query DealTasks($dealId: ID!) {
+    deal(id: $dealId) {
       tasks(orderBy: index, orderDirection: asc) {
         taskid: id
         index

src/modules/deals/dealsTable/columns.tsx

@@ -19,13 +19,13 @@ export const columns: ColumnDef<Deal>[] = [
     accessorKey: 'dealid',
     header: 'Deal',
     cell: ({ row }) => {
-      const dealAddress = row.original.dealid;
+      const dealId = row.original.dealid;
       return (
         <CopyButton
-          displayText={truncateAddress(dealAddress, {
+          displayText={truncateAddress(dealId, {
             startLen: 8,
           })}
-          textToCopy={dealAddress}
+          textToCopy={dealId}
         />
       );
     },

src/modules/search/SearcherBar.tsx

@@ -9,6 +9,7 @@ import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { getIExec, getReadonlyIExec } from '@/externals/iexecSdkClient';
 import useUserStore from '@/stores/useUser.store';
+import { isValidAddress, isValidId } from '@/utils/addressOrIdCheck';
 import { getChainFromId, getChainFromSlug } from '@/utils/chain.utils';
 import { searchQuery } from './searchQuery';
 
@@ -59,9 +60,7 @@ export function SearcherBar({
     mutationKey: ['search', inputValue],
     mutationFn: async (value: string) => {
       const isValid =
-        value.length === 42 || // address
-        value.length === 66 || // tx, deal, task hash
-        value.endsWith('.eth'); // ENS
+        isValidAddress(value) || isValidId(value) || value.endsWith('.eth'); // ENS
 
       if (!isValid) {
         throw new Error('Invalid value');