profile link to mobile menu

[simo6529]

Summary by CodeRabbit

• New Features
  • Added a Profile navigation item to the bottom navigation menu.
  • Integrated wallet connection flow—users are prompted to connect a wallet when accessing the profile section without an active connection.
  • Profile item now correctly displays active state when viewing profile pages.

[coderabbitai]

📝 Walkthrough

Walkthrough

This pull request adds a new "Profile" navigation item to the bottom navigation bar with associated profile routing logic. Changes include a new ProfileIcon component, integration into BottomNavigation, enhanced NavItem with wallet connection flow handling, and comprehensive test coverage for the new functionality.

Changes

Cohort / File(s)	Summary
Profile Icon Component components/common/icons/ProfileIcon.tsx	New ProfileIcon React component rendering an SVG user glyph with optional className prop.
Bottom Navigation Configuration components/navigation/BottomNavigation.tsx	Added Profile navigation item with href "/profile" and ProfileIcon as iconComponent; imported ProfileIcon.
Navigation Item Logic components/navigation/NavItem.tsx	Integrated SeizeConnectContext for profile routing; added profile-specific active-state logic based on connected handle/address; implemented conditional click handling to trigger wallet connection or navigate to profile.
Navigation Tests __tests__/components/navigation/BottomNavigation.test.tsx, __tests__/components/navigation/NavItem.test.tsx	Updated BottomNavigation test to expect 7 items including Profile; significantly expanded NavItem tests with scenarios for wallet/connect flow, profile active-state logic on own profiles, and disabled item rendering.

Sequence Diagram

sequenceDiagram
    actor User
    participant NavItem as NavItem Component
    participant SeizeConnect as SeizeConnect Context
    participant Navigation as Router/Navigation

    User->>NavItem: Click Profile item
    NavItem->>SeizeConnect: Check if wallet address connected
    alt No wallet connected
        SeizeConnect-->>NavItem: address is null
        NavItem->>SeizeConnect: Trigger seizeConnect()
        SeizeConnect-->>User: Show wallet connection modal
    else Wallet connected
        SeizeConnect-->>NavItem: Return address + profile slug
        NavItem->>Navigation: Navigate to profile href
        Navigation-->>User: Display profile page
    end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Possibly related PRs

• Profile icon position #1699: Adds Profile navigation item with profile-path and active-state logic in WebSidebar, mirroring the profile routing implementation in BottomNavigation/NavItem.
• Multi Account notifications #2046: Modifies NavItem.tsx and extends SeizeConnectContext for multi-account functionality, intersecting with this PR's SeizeConnect integration.

Suggested reviewers

• ragnep

Poem

🐰 A profile now hops into view,
With icon so neat, and routing so true,
Connect your wallet with elegant flair,
Navigate smoothly with utmost care! 🌟

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'profile link to mobile menu' directly and clearly describes the main change: adding a new profile link/item to the mobile bottom navigation menu.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch add-profile-link-to-mobile-menu

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@components/navigation/NavItem.tsx`:
- Around line 46-51: The code currently uses the nullish coalescing operator
when deriving normalizedConnectedHandle and profileSlug so an empty string
handle blocks fallback to the address; update the logic in NavItem (symbols:
connectedProfile.normalised_handle / connectedProfile.handle,
normalizedConnectedHandle, normalizedConnectedAddress, profileSlug, profileHref)
to treat empty-string handles as absent (e.g., use a falsy check or explicit
length check instead of ??) so that when the handle is "" the code falls back to
normalizedConnectedAddress and builds profileHref from the address.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: ddc057be-5bb7-481f-a2fc-f32ed713af94

📥 Commits

Reviewing files that changed from the base of the PR and between 140d7e4 and bd837f4.

📒 Files selected for processing (5)

• __tests__/components/navigation/BottomNavigation.test.tsx
• __tests__/components/navigation/NavItem.test.tsx
• components/common/icons/ProfileIcon.tsx
• components/navigation/BottomNavigation.tsx
• components/navigation/NavItem.tsx

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud