Merge branch 'main' into feature/add-task-tab-to-see-raw-data

ErwanDecoster · web-flow · commit 5fedc0a2e578 · 2025-10-06T15:43:21.000+02:00
diff --git a/.release-please-manifest.json b/.release-please-manifest.json
@@ -1 +1 @@
-{".":"1.22.1"}
+{".":"1.23.0"}
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,12 @@
 # Changelog
 
+## [1.23.0](https://github.com/iExecBlockchainComputing/explorer-v2/compare/iexec-explorer-v1.22.1...iexec-explorer-v1.23.0) (2025-10-06)
+
+
+### 🚀 Features
+
+* implement light mode and light/dark/system mode switch ([#69](https://github.com/iExecBlockchainComputing/explorer-v2/issues/69)) ([669cedc](https://github.com/iExecBlockchainComputing/explorer-v2/commit/669cedcb0bc04b49f4adbbec035cc933a3646ded))
+
 ## [1.22.1](https://github.com/iExecBlockchainComputing/explorer-v2/compare/iexec-explorer-v1.22.0...iexec-explorer-v1.22.1) (2025-09-26)
 
 
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "iexec-explorer",
   "private": true,
-  "version": "1.22.1",
+  "version": "1.23.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/src/components/CopyButton.tsx b/src/components/CopyButton.tsx
@@ -62,7 +62,7 @@ const CopyButton = ({
               }}
               onMouseEnter={handleMouseEnter}
               onMouseLeave={handleMouseLeave}
-              className="hover:before:bg-muted active:before:bg-secondary relative z-0 -mx-1 -my-1 flex items-center gap-1 px-1 py-1 transition-colors before:absolute before:inset-0 before:-z-10 before:rounded-lg before:duration-200 active:before:scale-x-[0.98] active:before:scale-y-[0.94]"
+              className="hover:before:bg-muted active:before:bg-secondary relative z-0 -mx-1 -my-1 items-center gap-1 px-1 py-1 transition-colors before:absolute before:inset-0 before:-z-10 before:rounded-lg before:duration-200 active:before:scale-x-[0.98] active:before:scale-y-[0.94]"
             >
               {buttonText && <span className="mr-1 text-sm">{buttonText}</span>}
               <Copy className="size-4 flex-none" />
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -73,7 +73,7 @@ export function Footer({ className }: { className?: string }) {
   return (
     <footer
       className={cn(
-        'bg-popover border-muted text-intermediate-foreground flex flex-col gap-6 rounded-3xl border px-6 py-10 sm:px-10 lg:px-20',
+        'text-intermediate-foreground flex flex-col gap-6 py-10',
         className
       )}
     >
diff --git a/src/components/ModeToggle.tsx b/src/components/ModeToggle.tsx
@@ -1,46 +1,53 @@
 import { cn } from '@/lib/utils';
 import { Monitor, Moon, Sun } from 'lucide-react';
+import { useMemo } from 'react';
 import { useTheme } from '@/components/themeProvider';
 import { Button } from '@/components/ui/button';
 
+type Theme = 'dark' | 'light' | 'system';
+
 export function ModeToggle() {
   const { theme, setTheme } = useTheme();
 
+  const options: Array<{
+    value: Theme;
+    label: string;
+    Icon: React.ComponentType;
+  }> = useMemo(
+    () => [
+      { value: 'system', label: 'System', Icon: Monitor },
+      { value: 'light', label: 'Light', Icon: Sun },
+      { value: 'dark', label: 'Dark', Icon: Moon },
+    ],
+    []
+  );
+
   return (
-    <div className="rounded-full border p-1">
-      <Button
-        variant={'link'}
-        size={'none'}
-        className={cn(
-          'text-foreground hover:bg-muted border p-1',
-          theme === 'dark' ? 'border' : 'border-transparent'
-        )}
-        onClick={() => setTheme('dark')}
-      >
-        <Moon />
-      </Button>
-      <Button
-        variant={'link'}
-        size={'none'}
-        className={cn(
-          'text-foreground hover:bg-muted border p-1',
-          theme === 'light' ? 'border' : 'border-transparent'
-        )}
-        onClick={() => setTheme('light')}
-      >
-        <Sun />
-      </Button>
-      <Button
-        variant={'link'}
-        size={'none'}
-        className={cn(
-          'text-foreground hover:bg-muted border p-1',
-          theme === 'system' ? 'border' : 'border-transparent'
-        )}
-        onClick={() => setTheme('system')}
-      >
-        <Monitor />
-      </Button>
+    <div className="flex items-center rounded-full border p-1">
+      {options.map(({ value, label, Icon }) => {
+        const selected = theme === value;
+        return (
+          <Button
+            key={value}
+            type="button"
+            variant="link"
+            size="none"
+            role="radio"
+            aria-checked={selected}
+            aria-label={label}
+            title={label}
+            className={cn(
+              'text-foreground hover:bg-muted p-1',
+              selected && 'bg-transparent'
+            )}
+            onClick={() => {
+              if (theme !== value) setTheme(value as Theme);
+            }}
+          >
+            <Icon />
+          </Button>
+        );
+      })}
     </div>
   );
 }
diff --git a/src/components/SmartLinkGroup.tsx b/src/components/SmartLinkGroup.tsx
@@ -102,11 +102,7 @@ export default function SmartLinkGroup({
         <TooltipProvider delayDuration={0}>
           <Tooltip>
             <TooltipTrigger asChild>
-              <Button
-                variant="link"
-                className="h-auto p-0! text-sm text-white"
-                asChild
-              >
+              <Button variant="link" className="h-auto p-0! text-sm" asChild>
                 <a
                   href={`${getBlockExplorerUrl(chainId)}/${blockExplorerPath[type]}`}
                   target="_blank"
diff --git a/src/components/navbar/NavBar.tsx b/src/components/navbar/NavBar.tsx
@@ -10,7 +10,7 @@ import { AddressChip } from './AddressChip.tsx';
 import { ChainSelector } from './ChainSelector.tsx';
 
 export function Navbar() {
-  const { isConnected, address } = useUserStore();
+  const { isConnected, address: userAddress } = useUserStore();
   const { logout, login } = useLoginLogout();
   const [isMenuOpen, setMenuOpen] = useState(false);
   const handleMenuToggle = () => {
@@ -21,11 +21,16 @@ export function Navbar() {
     <nav className="flex items-center justify-between py-6">
       <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>
+        <span className="hidden lg:block">iExec Explorer</span>
       </ChainLink>
       <div className="mr-8 flex items-center gap-4 md:mr-0">
         {isConnected && (
           <div className="hidden md:flex">
+            <Button variant="link" asChild className="text-foreground">
+              <ChainLink to={`/address/${userAddress}?from=my_activity`}>
+                My activity
+              </ChainLink>
+            </Button>
             <Button variant="link" asChild className="text-foreground">
               <ChainLink to="/account">iExec Account</ChainLink>
             </Button>
@@ -38,7 +43,7 @@ export function Navbar() {
         </div>
         {isConnected ? (
           <div className="flex max-w-[1260px] items-center gap-2">
-            <AddressChip address={address!} />
+            <AddressChip address={userAddress!} />
 
             <button
               type="button"
@@ -69,19 +74,19 @@ export function Navbar() {
             checked={isMenuOpen}
             readOnly
           />
-          <span className="pointer-events-none block h-0.5 w-4.5 origin-right transform rounded-full bg-white duration-200 group-has-[:checked]/checkbox:mt-[0.5px] group-has-[:checked]/checkbox:-rotate-45"></span>
-          <span className="pointer-events-none block h-0.5 w-4.5 origin-top-right transform rounded-full bg-white duration-200 group-has-[:checked]/checkbox:scale-x-0"></span>
-          <span className="pointer-events-none block h-0.5 w-4.5 origin-right transform rounded-full bg-white duration-200 group-has-[:checked]/checkbox:mb-[0.5px] group-has-[:checked]/checkbox:rotate-45"></span>
+          <span className="bg-foreground pointer-events-none block h-0.5 w-4.5 origin-right transform rounded-full duration-200 group-has-[:checked]/checkbox:mt-[0.5px] group-has-[:checked]/checkbox:-rotate-45"></span>
+          <span className="bg-foreground pointer-events-none block h-0.5 w-4.5 origin-top-right transform rounded-full duration-200 group-has-[:checked]/checkbox:scale-x-0"></span>
+          <span className="bg-foreground pointer-events-none block h-0.5 w-4.5 origin-right transform rounded-full duration-200 group-has-[:checked]/checkbox:mb-[0.5px] group-has-[:checked]/checkbox:rotate-45"></span>
         </label>
 
-        <div className="border-secondary bg-primary-foreground pointer-events-auto fixed inset-y-0 left-0 z-10 flex w-full -translate-x-full flex-col overflow-auto rounded-r-3xl border-r px-6 pt-6 duration-200 group-has-[:checked]:translate-x-0 lg:w-[255px] lg:translate-x-0">
+        <div className="border-secondary bg-background pointer-events-auto fixed inset-y-0 left-0 z-10 flex w-full -translate-x-full flex-col overflow-auto rounded-r-3xl border-r px-6 pt-6 duration-200 group-has-[:checked]:translate-x-0 lg:w-[255px] lg:translate-x-0">
           <div className="-m-2 mr-6 flex items-center justify-between gap-2 py-2 pl-2">
             <ChainLink to="/" className="font-mono" onClick={handleMenuToggle}>
               <img src={iExecLogo} width="25" height="25" alt="iExec logo" />
             </ChainLink>
             {isConnected ? (
               <div className="flex max-w-[1260px] items-center gap-2">
-                <AddressChip address={address!} />
+                <AddressChip address={userAddress!} />
 
                 <button
                   type="button"
diff --git a/src/config.ts b/src/config.ts
@@ -18,7 +18,7 @@ export const SUPPORTED_CHAINS = [
     id: 134,
     name: 'Bellecour',
     slug: 'bellecour',
-    color: '#F4942566',
+    color: '#95A4FC',
     icon: iexecLogo,
     blockExplorerUrl: 'https://blockscout-bellecour.iex.ec',
     subgraphUrl: {
diff --git a/src/index.css b/src/index.css
@@ -259,7 +259,7 @@
   --brand-foreground: var(--color-grey-900);
 
   --primary: #c0cbff;
-  --primary-foreground: #f4f7fc;
+  --primary-foreground: var(--color-muted);
 
   --secondary: var(--color-grey-600);
   --secondary-foreground: var(--color-grey-50);
@@ -286,13 +286,16 @@
   body {
     @apply bg-background text-foreground;
   }
-  h1,
+  h1 {
+    @apply font-anybody font-semibold;
+  }
+
   h2,
   h3,
   h4,
   h5,
   h6 {
-    @apply font-anybody font-semibold;
+    @apply font-sans font-semibold;
   }
   button,
   a {
diff --git a/src/modules/JsonBlock.tsx b/src/modules/JsonBlock.tsx
@@ -27,7 +27,6 @@ const JsonBlock = ({
       rawToCopy = children;
     }
   } catch {
-    // If parsing fails, display as plain text
     return (
       <div className={`flex min-w-0 items-start gap-1 ${className}`}>
         <code className="min-w-0 overflow-x-auto text-sm whitespace-pre">
@@ -39,25 +38,18 @@ const JsonBlock = ({
   }
 
   return (
-    <div className={`relative flex min-w-0 items-start gap-1 ${className}`}>
+    <div className={`flex min-w-0 items-start gap-1 ${className}`}>
       <div className="min-w-0 flex-1 overflow-x-auto">
         <JsonView
           value={jsonData}
           displayDataTypes={false}
           displayObjectSize={false}
           enableClipboard={false}
           collapsed={collapsed}
-          shortenTextAfterLength={128}
           style={defaultJsonViewStyle}
         />
       </div>
-      {enableClipboard && (
-        <CopyButton
-          className="absolute top-0 right-0"
-          buttonText="Copy Json"
-          textToCopy={rawToCopy}
-        />
-      )}
+      {enableClipboard && <CopyButton textToCopy={rawToCopy} />}
     </div>
   );
 };
diff --git a/src/modules/Tabs.tsx b/src/modules/Tabs.tsx
@@ -50,7 +50,7 @@ export function Tabs({
   return (
     <div
       ref={containerRef}
-      className="bg-muted relative flex w-fit max-w-full items-center gap-1 overflow-x-auto rounded-full p-1"
+      className="bg-primary-foreground relative flex w-fit max-w-full items-center gap-1 overflow-x-auto rounded-full p-1"
     >
       <div
         className={cn(
diff --git a/src/modules/datasets/SchemaSearch.tsx b/src/modules/datasets/SchemaSearch.tsx
@@ -104,14 +104,14 @@ export function SchemaSearch({
                     <span className={cn('inline-block')}>{schema.path}</span>
                     <span className={cn('inline-block')}>: {schema.type}</span>
                     <button onClick={() => onRemoveFilter(index)}>
-                      <X className="ml-1 text-white" size={12} />
+                      <X className="ml-1" size={12} />
                     </button>
                   </span>
                 );
               })}
               {filters.length > 0 && (
                 <button
-                  className="text-xs text-white"
+                  className="text-xs"
                   type="button"
                   onClick={onClearAllFilters}
                 >
@@ -129,13 +129,13 @@ export function SchemaSearch({
               value={inputPathValue}
               onChange={(e) => setInputPathValue(e.target.value)}
               className={cn(
-                'bg-muted border-secondary col-span-2 w-full rounded-2xl px-4 py-6 text-sm text-white'
+                'bg-muted border-secondary col-span-2 w-full rounded-2xl px-4 py-6 text-sm'
               )}
               placeholder="Field path (e.g email, telegram_chatId, nested)"
             />
 
             <Select value={selectedType} onValueChange={setSelectedType}>
-              <SelectTrigger className="bg-muted border-secondary w-full rounded-2xl px-4 py-6 text-sm text-white sm:max-w-1/3">
+              <SelectTrigger className="bg-muted border-secondary w-full rounded-2xl px-4 py-6 text-sm sm:max-w-1/3">
                 <SelectValue placeholder="Select type" />
               </SelectTrigger>
               <SelectContent className="bg-muted border-secondary overflow-visible p-6">
@@ -144,13 +144,13 @@ export function SchemaSearch({
                     key={group.label}
                     className="overflow-visible not-first:mt-2"
                   >
-                    <SelectLabel className="text-grey-300 text-sm">
+                    <SelectLabel className="text-muted-foreground text-sm">
                       {group.label}
                     </SelectLabel>
                     {group.items.map((type) => (
                       <SelectItem
                         key={type.value}
-                        className="text-base font-bold data-[state=checked]:text-yellow-400"
+                        className="data-[state=checked]:text-primary text-base font-bold"
                         value={type.value}
                       >
                         {type.value}
diff --git a/src/modules/deals/deal/buildDealDetails.tsx b/src/modules/deals/deal/buildDealDetails.tsx
@@ -165,7 +165,7 @@ export function buildDealDetails({
                 {isClaimable && (
                   <ClaimButton
                     taskOrDeal={deal}
-                    className="text-white underline"
+                    className="text-foreground underline"
                   />
                 )}
               </>
diff --git a/src/modules/deals/dealsTable/columns.tsx b/src/modules/deals/dealsTable/columns.tsx
@@ -36,14 +36,12 @@ export const columns: ColumnDef<Deal>[] = [
     cell: ({ row }) => {
       const appAddress = row.original.app.address;
       return (
-        <div className="w-36">
-          <CopyButton
-            displayText={truncateAddress(appAddress, {
-              startLen: 8,
-            })}
-            textToCopy={appAddress}
-          />
-        </div>
+        <CopyButton
+          displayText={truncateAddress(appAddress, {
+            startLen: 8,
+          })}
+          textToCopy={appAddress}
+        />
       );
     },
   },
diff --git a/src/modules/search/SearcherBar.tsx b/src/modules/search/SearcherBar.tsx
diff --git a/src/modules/tasks/DownloadResult.tsx b/src/modules/tasks/DownloadResult.tsx
diff --git a/src/modules/tasks/task/buildTaskDetails.tsx b/src/modules/tasks/task/buildTaskDetails.tsx
diff --git a/src/routes/$chainSlug/_layout/account.tsx b/src/routes/$chainSlug/_layout/account.tsx
diff --git a/src/routes/$chainSlug/_layout/deal/$dealId.tsx b/src/routes/$chainSlug/_layout/deal/$dealId.tsx

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "iexec-explorer",`
`3`	`3`	`"private": true,`
`4`		`- "version": "1.22.1",`
	`4`	`+ "version": "1.23.0",`
`5`	`5`	`"type": "module",`
`6`	`6`	`"scripts": {`
`7`	`7`	`"dev": "vite",`
Original file line number	Diff line number	Diff line change
`@@ -62,7 +62,7 @@ const CopyButton = ({`
`62`	`62`	`}}`
`63`	`63`	`onMouseEnter={handleMouseEnter}`
`64`	`64`	`onMouseLeave={handleMouseLeave}`
`65`		`- className="hover:before:bg-muted active:before:bg-secondary relative z-0 -mx-1 -my-1 flex items-center gap-1 px-1 py-1 transition-colors before:absolute before:inset-0 before:-z-10 before:rounded-lg before:duration-200 active:before:scale-x-[0.98] active:before:scale-y-[0.94]"`
	`65`	`+ className="hover:before:bg-muted active:before:bg-secondary relative z-0 -mx-1 -my-1 items-center gap-1 px-1 py-1 transition-colors before:absolute before:inset-0 before:-z-10 before:rounded-lg before:duration-200 active:before:scale-x-[0.98] active:before:scale-y-[0.94]"`
`66`	`66`	`>`
`67`	`67`	`{buttonText && <span className="mr-1 text-sm">{buttonText}</span>}`
`68`	`68`	`<Copy className="size-4 flex-none" />`
Original file line number	Diff line number	Diff line change
`@@ -73,7 +73,7 @@ export function Footer({ className }: { className?: string }) {`
`73`	`73`	`return (`
`74`	`74`	`<footer`
`75`	`75`	`className={cn(`
`76`		`- 'bg-popover border-muted text-intermediate-foreground flex flex-col gap-6 rounded-3xl border px-6 py-10 sm:px-10 lg:px-20',`
	`76`	`+ 'text-intermediate-foreground flex flex-col gap-6 py-10',`
`77`	`77`	`className`
`78`	`78`	`)}`
`79`	`79`	`>`