feat: update account page to display faucet, activity and iexec account #99

ErwanDecoster · 2025-11-26T14:55:40Z

No description provided.

…proved readability

…et component

vercel · 2025-11-26T14:55:46Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
explorer-v2	Ready	Preview	Comment	Dec 5, 2025 10:02am

…ed error handling

… modules

…components

…management features

Copilot

Pull request overview

This PR refactors the account page to consolidate faucet, iExec account management, and wallet activity into a unified tabbed interface. The standalone faucet route has been removed and integrated as a tab within the account page.

Key Changes:

Moved faucet functionality from a separate route to a tab within the account page
Created reusable AddressTabsContent component to share address display logic between account and address pages
Refactored account management into separate module components (Faucet, ManageIexecAccount)

Reviewed changes

Copilot reviewed 16 out of 17 changed files in this pull request and generated 12 comments.

Show a summary per file

File	Description
`src/routes/$chainSlug/_layout/faucet.tsx`	Deleted - faucet moved to account page module
`src/routes/$chainSlug/_layout/account.tsx`	Refactored to use tabbed interface with Faucet, Account, and Wallet Activity tabs
`src/routes/$chainSlug/_layout/address/$addressAddress.tsx`	Refactored to use shared AddressTabsContent component
`src/modules/addresses/address/AddressTabsContent.tsx`	New shared component extracting address tab rendering logic
`src/modules/account/ManageIexecAccount.tsx`	New component containing iExec account management (formerly in account.tsx)
`src/modules/account/Faucet.tsx`	New component for faucet functionality with updated UI
`src/components/navbar/NavBar.tsx`	Updated navigation to use dropdown menu and link to account page tabs
`src/components/ui/dropdown-menu.tsx`	New dropdown menu component for navbar user menu
`src/utils/truncateAddress.ts`	Extended type definition to accept any number for truncation lengths
`src/index.css`	Added Clerk themes import and updated card color variables
`package.json`	Added @clerk/themes and @radix-ui/react-dropdown-menu dependencies

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-12-04T10:35:48Z

src/routes/$chainSlug/_layout/account.tsx

+      <div className="min-w-0 flex-1 overflow-x-auto">
+        {tabs[currentTab].component
+          ? React.createElement(tabs[currentTab].component)
+          : null}


The conditional rendering tabs[currentTab].component ? React.createElement(tabs[currentTab].component) : null assumes all tabs have a component property, but the "Log out" tab (index 3) has an action property instead. This means if somehow currentTab becomes 3, nothing will render. Consider adding defensive logic or ensuring action-only tabs can't become the active tab.

Suggested change

: null}

: (

<div className="text-muted-foreground p-4">

Please select a valid tab.

</div>

)}

Copilot · 2025-12-04T10:35:48Z

src/modules/account/Faucet.tsx

+import {
+  SignedIn,
+  SignedOut,
+  SignIn,


The import uses SignIn from @clerk/clerk-react, but this component is typically named SignIn for the full component or you should use SignInButton for a button trigger. The usage on line 140 suggests a full SignIn component is intended, but verify this is the correct import name for the Clerk React library version being used.

Copilot · 2025-12-04T10:35:49Z

src/components/navbar/NavBar.tsx

+                  </ChainLink>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <ChainLink to="/account?accountTab=Manage+iExec+Account">


The URL parameter accountTab=Manage+iExec+Account doesn't match any tab titleText in the account page. The tabs array in account.tsx (line 132-156) defines tabs with titleText values: 'Faucet', 'Account', 'Wallet Activity', and 'Log out'. The value "Manage+iExec+Account" (or "Manage iExec Account") is not in this list, which means clicking this link will not navigate to the correct tab.

Suggested change

<ChainLink to="/account?accountTab=Manage+iExec+Account">

<ChainLink to="/account?accountTab=Account">

Copilot · 2025-12-04T10:35:49Z

src/routes/$chainSlug/_layout/account.tsx

+                  index === currentTab && 'bg-muted text-foreground'
+                )}


The active tab highlighting logic checks index === currentTab, but when a user clicks on a tab with an action (index 3, the "Log out" tab), the visual state will highlight that tab. Since logout is an action that shouldn't be a selectable tab, this creates a poor UX where the logout button appears selected. Consider excluding action-only tabs from the active state logic.

Copilot · 2025-12-04T10:35:49Z

src/routes/$chainSlug/_layout/account.tsx

-    },
-    enabled: !!userAddress,
+  const avatarVisualBg = getAvatarVisualNumber({
+    address: userAddress,


The getAvatarVisualNumber function is called with userAddress which might be undefined (as seen in line 31 where it's typed as potentially undefined). While this is safe because the avatar display is conditionally rendered only when userAddress exists (line 172), consider adding a null check or default value for clarity and safety.

Suggested change

address: userAddress,

address: userAddress ?? '',

Copilot · 2025-12-04T10:35:50Z

src/components/navbar/NavBar.tsx

+                  )}
+                />
+                <span className="text-sm">
+                  {truncateAddress(userAddress!, { startLen: 5, endLen: 3 })}


The truncateAddress is called with explicit options { startLen: 5, endLen: 3 }, but these values aren't part of the predefined union type in the updated truncateAddress function signature. While the function now accepts number as a type (line 4-5 of truncateAddress.ts), this creates inconsistency. Consider using the predefined values or documenting why custom values are needed here.

Suggested change

{truncateAddress(userAddress!, { startLen: 5, endLen: 3 })}

{truncateAddress(userAddress!, { startLen: 4, endLen: 2 })}

Copilot · 2025-12-04T10:35:50Z

src/modules/account/ManageIexecAccount.tsx

+    if (!bridge && currentTab === 2) {
+      setCurrentTab(1);
+    }
+  }, [chainId]);


The useEffect has a missing dependency setCurrentTab. The React Hook useEffect has a missing dependency warning will be triggered. Either add setCurrentTab to the dependency array or wrap it in a useCallback if it's coming from props/state.

Suggested change

}, [chainId]);

}, [chainId, setCurrentTab]);

Copilot · 2025-12-04T10:35:51Z

src/modules/account/Faucet.tsx

+
+      return response.json();


The watchAsset call is missing after a successful response. In the original faucet route implementation (lines 83-90 of the deleted file), watchAsset was called immediately after a successful response. This call has been removed in the refactored version, which changes the user experience. The addTokenToWallet mutation now handles this separately, but it's only triggered manually by the user clicking a button.

Copilot · 2025-12-04T10:35:51Z

src/routes/$chainSlug/_layout/account.tsx

+    if (tab.action) {
+      tab.action();
+    } else {
+      setCurrentTab(tabIndex);
    }
-  }, [chainId]);
-
-  if (!userAddress) {
-    return (
-      <div className="mt-20 flex flex-col items-center justify-center gap-6 text-center">
-        <h1 className="text-2xl font-bold">You are not connected</h1>
-        <p className="text-muted-foreground max-w-sm">
-          To access the iExec Wallet Manager, please connect your wallet.
-        </p>
-        <div className="flex gap-4">
-          <Button variant="outline">
-            <ChainLink to="/">Go back home</ChainLink>
-          </Button>
-          <Button onClick={login}>Connect wallet</Button>
-        </div>
-      </div>
-    );
-  }
+  };


The tab action execution logic allows clicking on tabs with actions (like "Log out"), but this will cause the tab index to be set to the logout tab index when tab.action exists but before the action runs. This could result in incorrect UI state if the action doesn't immediately remove the component (e.g., logout might have a delay). Consider not calling setCurrentTab when an action exists, or resetting the tab after action completes.

Copilot · 2025-12-04T10:35:51Z

src/modules/account/ManageIexecAccount.tsx

+              {tabs[currentTab].steps[currentStep]?.content}
+            </>
+          )}
+          {tabs[currentTab]?.content && tabs[currentTab].content}


Operands tabs[cu ... content and tabs[cu ... content are identical.

Suggested change

{tabs[currentTab]?.content && tabs[currentTab].content}

{tabs[currentTab]?.content}

SeddikBellamine

LGTM! nicely done

ErwanDecoster added 6 commits November 25, 2025 13:43

feat: update account page to display faucet, activity and iexec account

927d036

feat: rename Faucet and Manage iExec Account file

0e05a81

feat: add dropdown menu to Navbar and update account management UI

cacfaef

refactor: format options parameter in truncateAddress function for im…

d6adb2a

…proved readability

feat: update style

e46490a

feat: add @clerk/themes dependency and integrate shadcn theme in Fauc…

3613389

…et component

ErwanDecoster added 4 commits November 26, 2025 16:31

feat: enhance account layout with wallet connection prompt and improv…

a52c43d

…ed error handling

refactor: remove unused Breadcrumb components from Account and Faucet…

d148880

… modules

refactor: rename 'iExec Account' to 'Account' for consistency across …

f5520d0

…components

refactor: update wallet connection rendering in account layout

4d729bb

vercel bot had a problem deploying to Preview November 26, 2025 16:09 Failure

feat: add fallback redirect URL for SignIn component in Faucet module

e39964f

vercel bot had a problem deploying to Preview December 4, 2025 09:46 Failure

Merge branch 'main' into feature/update-account

17c9c0b

vercel bot had a problem deploying to Preview December 4, 2025 10:01 Failure

ErwanDecoster force-pushed the feature/update-account branch from b3e767a to e94037d Compare December 4, 2025 10:08

vercel bot had a problem deploying to Preview December 4, 2025 10:08 Failure

chore: update package-lock

7e86950

ErwanDecoster force-pushed the feature/update-account branch from e94037d to 7e86950 Compare December 4, 2025 10:09

vercel bot had a problem deploying to Preview December 4, 2025 10:10 Failure

chore: update package-lock

572449e

vercel bot had a problem deploying to Preview December 4, 2025 10:16 Failure

ErwanDecoster force-pushed the feature/update-account branch from c4283ef to 572449e Compare December 4, 2025 10:16

vercel bot had a problem deploying to Preview December 4, 2025 10:17 Failure

ErwanDecoster added 2 commits December 4, 2025 11:21

feat: implement ManageIexecAccount component with wallet and account …

16a202a

…management features

feat: rename ManageIexecAccount component

b592af0

vercel bot deployed to Preview December 4, 2025 10:23 View deployment

vercel bot deployed to Preview December 4, 2025 10:24 View deployment

ErwanDecoster requested a review from Copilot December 4, 2025 10:29

ErwanDecoster requested a review from SeddikBellamine December 4, 2025 10:29

Copilot started reviewing on behalf of ErwanDecoster December 4, 2025 10:30 View session

Copilot finished reviewing on behalf of ErwanDecoster December 4, 2025 10:32

Copilot AI reviewed Dec 4, 2025

View reviewed changes

SeddikBellamine approved these changes Dec 5, 2025

View reviewed changes

fix: update Navbar button to toggle menu instead of linking to account

8e2cd30

vercel bot deployed to Preview December 5, 2025 10:02 View deployment

ErwanDecoster merged commit 74e76bf into main Dec 5, 2025
4 checks passed

ErwanDecoster deleted the feature/update-account branch December 5, 2025 10:06

iexec-release-please-app bot mentioned this pull request Dec 5, 2025

chore(main): release iexec-explorer 1.29.0 #101

Merged

-          : null}
+          : (
+            <div className="text-muted-foreground p-4">
+              Please select a valid tab.
+            </div>
+          )}

	<ChainLink to="/account?accountTab=Manage+iExec+Account">
	<ChainLink to="/account?accountTab=Account">

	{truncateAddress(userAddress!, { startLen: 5, endLen: 3 })}
	{truncateAddress(userAddress!, { startLen: 4, endLen: 2 })}

	{tabs[currentTab]?.content && tabs[currentTab].content}
	{tabs[currentTab]?.content}

feat: update account page to display faucet, activity and iexec account #99

feat: update account page to display faucet, activity and iexec account #99

Uh oh!

Conversation

ErwanDecoster commented Nov 26, 2025

Uh oh!

vercel bot commented Nov 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Key Changes:

Reviewed changes

Uh oh!

Copilot AI Dec 4, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 4, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 4, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 4, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 4, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 4, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 4, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 4, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 4, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 4, 2025

Choose a reason for hiding this comment

Uh oh!

SeddikBellamine left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

vercel bot commented Nov 26, 2025 •

edited

Loading