Merge branch 'feature/add-details-page' into feature/hide-package-lock-diffs

Author: ErwanDecoster

.gitignore

@@ -28,3 +28,4 @@ src/graphql/*
 *.njsproj
 *.sln
 *.sw?
+TODO

package-lock.json

@@ -5,8 +5,9 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc -b && vite build",
+    "build": "vite build",
     "lint": "eslint .",
+    "check-type": "tsc -b",
     "format": "prettier --write src",
     "check-format": "prettier --check src",
     "preview": "vite preview",
@@ -21,6 +22,7 @@
     "@fontsource/space-mono": "^5.2.5",
     "@hookform/resolvers": "^5.0.1",
     "@icons-pack/react-simple-icons": "^12.7.0",
+    "@multiformats/multiaddr": "^12.4.1",
     "@radix-ui/react-dialog": "^1.1.7",
     "@radix-ui/react-label": "^2.1.3",
     "@radix-ui/react-select": "^2.2.2",
@@ -41,7 +43,6 @@
     "graphql": "^16.10.0",
     "iexec": "^8.15.0",
     "lucide-react": "^0.487.0",
-    "multiaddr": "^10.0.1",
     "prettier-plugin-tailwindcss": "^0.6.11",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

package.json

@@ -21,7 +21,7 @@ interface DataTableProps<TData, TValue> {
   isLoading?: boolean;
 }
 
-export function DataTable<TData extends { destination: string }, TValue>({
+export function DataTable<TData, TValue>({
   columns,
   data,
   tableLength = 10,
@@ -58,7 +58,12 @@ export function DataTable<TData extends { destination: string }, TValue>({
           <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
             {row.getVisibleCells().map((cell) => (
               <TableCell key={cell.id}>
-                <ChainLink to={cell.row.original.destination}>
+                <ChainLink
+                  to={
+                    (cell.row.original as { destination: string }).destination
+                  }
+                  className="w-full"
+                >
                   {flexRender(cell.column.columnDef.cell, cell.getContext())}
                 </ChainLink>
               </TableCell>
@@ -80,7 +85,7 @@ export function DataTable<TData extends { destination: string }, TValue>({
         }).map((_, index) => (
           <TableRow key={`empty-${index}`}>
             {columns.map((_, colIndex) => (
-              <TableCell key={colIndex} className="h-12">
+              <TableCell key={colIndex} className="h-17">
                 &nbsp;
               </TableCell>
             ))}

src/components/DataTable.tsx

@@ -1,4 +1,3 @@
-import { Link } from '@tanstack/react-router';
 import { LogOut } from 'lucide-react';
 import { useState } from 'react';
 import { useLoginLogout } from '@/hooks/useLoginLogout';
@@ -18,12 +17,12 @@ export function Navbar() {
   };
 
   return (
-    <div className="flex items-center justify-between pt-6 lg:pt-3">
+    <div className="flex items-center justify-between py-6 lg:py-3">
       <ChainLink to="/" className="-m-2 flex items-center gap-2 p-2 font-mono">
         <img src={iExecLogo} width="25" height="25" alt="iExec logo" />
         <span className="hidden sm:block">iExec Explorer</span>
       </ChainLink>
-      <div className="mr-6 flex items-center gap-4 md:mr-0">
+      <div className="mr-8 flex items-center gap-4 md:mr-0">
         {isConnected && (
           <div className="hidden md:flex">
             <Button variant="link" asChild className="text-white">

src/components/navbar/NavBar.tsx

@@ -91,7 +91,7 @@ function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
     <td
       data-slot="table-cell"
       className={cn(
-        'align-middle whitespace-nowrap *:inline-flex *:px-2 *:py-6 first:*:pl-4 last:*:pr-4 *:sm:px-3 *:sm:first:pl-6 sm:last:*:pr-6 *:md:px-5 md:first:*:pl-10 md:last:*:pr-10 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+        'align-middle whitespace-nowrap *:inline-flex *:px-2 *:py-6 first:*:pl-4 last:*:pr-4 *:sm:px-3 first:sm:*:pl-6 sm:last:*:pr-6 *:md:px-5 md:first:*:pl-10 md:last:*:pr-10 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
         className
       )}
       {...props}

src/components/ui/table.tsx

@@ -7,6 +7,9 @@ export const DETAIL_TABLE_LENGTH = 8;
 export const TABLE_LENGTH = 16;
 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 SUPPORTED_CHAINS = [
   {
     id: 134,

src/config.ts

@@ -2,6 +2,7 @@ import { useParams, useRouter } from '@tanstack/react-router';
 import { switchChain } from '@wagmi/core';
 import { useEffect, useRef } from 'react';
 import { useAccount } from 'wagmi';
+import { cleanIExecSDKs, initIExecSDKs } from '@/externals/iexecSdkClient';
 import useUserStore from '@/stores/useUser.store';
 import { getChainFromId, INITIAL_CHAIN } from '@/utils/chain.utils';
 import { wagmiAdapter } from '@/utils/wagmiConfig';
@@ -22,6 +23,7 @@ export function ChainSyncManager() {
     address: accountAddress,
     isConnected: accountIsConnected,
     status: accountStatus,
+    connector: accountConnector,
   } = useAccount();
   const { chainId, setChainId, setIsConnected, setAddress } = useUserStore();
 
@@ -40,6 +42,11 @@ export function ChainSyncManager() {
     if (accountChain?.id && chainId !== accountChain?.id) {
       setChainId(accountChain?.id);
     }
+    if (accountStatus === 'connected') {
+      initIExecSDKs({ connector: accountConnector });
+      return;
+    }
+    cleanIExecSDKs();
   }, [
     accountAddress,
     accountIsConnected,
@@ -48,6 +55,8 @@ export function ChainSyncManager() {
     chainId,
     accountChain?.id,
     setChainId,
+    accountStatus,
+    accountConnector,
   ]);
 
   // request chain change if the user connects on chain different from the active chain