feat: Add Perps tile to homefeed with Hyperliquid branding

[aldin4u]

• Created new PerpsTile component with gradient background
• Added tile to homefeed after WalletPortfolioTile
• Tile navigates to /perps app
• Fixed WalletPortfolioBalance tests (mocked AccountSelector)
• Fixed lint errors (button type, unused imports)
• Updated test snapshots

Description

How Has This Been Tested?

Screenshots (if appropriate):

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Summary by CodeRabbit

Release Notes

• New Features
  • Added account selector dropdown in the header, allowing users to switch between Smart Account and EOA with portfolio balances and address copy functionality.
  • Introduced new Perps tile in the home feed for quick navigation to perpetuals trading.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

Two new UI components (AccountSelector and PerpsTile) are introduced to the pillarx app. AccountSelector replaces the existing wallet icon header in WalletPortfolioBalance and provides a dropdown for account selection with portfolio data fetching. PerpsTile is added as a new tile in the main feed. Associated tests are updated to mock the new AccountSelector component.

Changes

Cohort / File(s)	Summary
New Account Selection Component src/apps/pillarx-app/components/AccountSelector/AccountSelector.tsx	New React component rendering a two-account dropdown (Smart Account and EOA). Fetches portfolio data via API queries, computes balances with memoized selectors, displays account details with copy-to-clipboard action, and manages selection state with global state updates. Includes outside-click closing and conditional styling for active account.
New Perpetuals Trading Tile src/apps/pillarx-app/components/PerpsTile/PerpsTile.tsx	New React component with gradient-styled card and button that navigates to /perps route on click. Rendered within TileContainer with heading and call-to-action text.
Component Integration Updates src/apps/pillarx-app/components/WalletPortfolioBalance/WalletPortfolioBalance.tsx, src/apps/pillarx-app/index.tsx	WalletPortfolioBalance replaces header UI (WalletPortfolioIcon + text) with AccountSelector component. Index.tsx imports and renders PerpsTile after WalletPortfolioTile in main feed.
Test Updates src/apps/pillarx-app/components/WalletPortfolioBalance/test/WalletPortfolioBalance.test.tsx	Adds mock module for AccountSelector returning div with test identifier. Removes assertion for wallet-portfolio-icon alt text.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant AccountSelector
    participant API
    participant State
    participant UI

    User->>AccountSelector: Render component
    AccountSelector->>API: Fetch Smart Account portfolio
    AccountSelector->>API: Fetch EOA portfolio
    API-->>AccountSelector: Return portfolio data
    AccountSelector->>AccountSelector: Compute balances (memoized)
    AccountSelector->>UI: Display accounts with balances
    User->>UI: Click account selection
    UI->>State: setActiveAccountMode()
    State-->>AccountSelector: Update active account
    AccountSelector->>UI: Re-render with active styling

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Suggested reviewers

• RanaBug
• IAmKio

Poem

🐰 A selector so smart, a perps tile so new,
Portfolio data flows through the dev zoo,
Account dropdowns dance with balance to show,
While traders hop onward where derivatives flow! 📊✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description lists changes but lacks required sections: 'How Has This Been Tested' and 'Types of changes' are empty, and no screenshots are provided despite the template requesting them.	Fill in the 'How Has This Been Tested' section with testing details, select appropriate change type(s), and add screenshots if visually relevant to demonstrate the new tile appearance.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately reflects the main change: adding a new Perps tile component to the homefeed with Hyperliquid branding, which is the primary feature addition in this PR.
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

---

🧹 Recent nitpick comments

src/apps/pillarx-app/components/AccountSelector/AccountSelector.tsx (6)

71-74: Prefer reusing existing truncateAddress utility.

There's already a truncateAddress function in src/utils/blockchain.ts that provides similar functionality with configurable display length. Reusing it avoids code duplication.

♻️ Suggested refactor

+import { truncateAddress } from '../../../../utils/blockchain';
+
 // ... in component, remove local function and use:
-  const truncateAddress = (address: string) => {
-    if (!address) return '';
-    return `${address.slice(0, 6)}...${address.slice(-4)}`;
-  };
+  // Use truncateAddress(smartAddress || '', 10) directly in JSX

---

113-113: Hardcoded account count may be misleading.

The text "Managing 2 Accounts" is hardcoded, but users might only have one account type available (e.g., if EOA or smart wallet is undefined). Consider deriving this count dynamically.

♻️ Suggested approach

+  const accountCount = [eoaAddress, smartAddress].filter(Boolean).length;
+
   // In JSX:
-  <span className="text-white/50 text-[11px]">Managing 2 Accounts</span>
+  <span className="text-white/50 text-[11px]">
+    Managing {accountCount} Account{accountCount !== 1 ? 's' : ''}
+  </span>

---

207-233: Consider adding user feedback for clipboard copy.

The copy-to-clipboard action has no visual feedback (e.g., tooltip change, toast notification). Users won't know if the copy succeeded.

A common pattern is to briefly show "Copied!" or change the icon temporarily after a successful copy.

---

119-236: Large duplicated JSX blocks could be extracted into a reusable component.

The Smart Account and EOA dropdown items share nearly identical structure with only data differences. Extracting an AccountRow component would improve maintainability and reduce ~100 lines of duplication.

♻️ Suggested approach

interface AccountRowProps {
  label: string;
  address: string | undefined;
  balance: number;
  isActive: boolean;
  onSelect: () => void;
  tooltipContent: React.ReactNode;
}

const AccountRow: React.FC<AccountRowProps> = ({
  label,
  address,
  balance,
  isActive,
  onSelect,
  tooltipContent,
}) => (
  <div
    onClick={onSelect}
    className={`flex items-center justify-between px-4 py-2 hover:bg-white/[.05] cursor-pointer transition-colors ${
      isActive ? 'bg-white/[.08] border-l-2 border-purple_medium' : ''
    }`}
  >
    {/* ... shared structure ... */}
  </div>
);

Then use:

<AccountRow
  label="Smart Account"
  address={smartAddress}
  balance={smartBalance}
  isActive={activeAccountMode === 'smart'}
  onSelect={() => handleSelectAccount('smart')}
  tooltipContent={<SmartAccountTooltip />}
/>

Also applies to: 238-355

---

32-40: Consider adding loading states for portfolio data.

The component fetches portfolio data for both accounts but doesn't indicate loading states. While the balances default to 0, showing a subtle loading indicator would improve UX during initial load.

---

155-200: Tooltip relies on hover-only interaction.

The info tooltips (showing Smart Account/EOA features) use CSS :hover which isn't keyboard accessible. Users navigating via keyboard or screen readers won't be able to access this information.

Consider using a tooltip library or adding focus states alongside hover for accessibility.

Also applies to: 271-318

---

📜 Recent review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e822a37 and 3287b53.

⛔ Files ignored due to path filters (1)

• src/apps/pillarx-app/components/WalletPortfolioBalance/test/__snapshots__/WalletPortfolioBalance.test.tsx.snap is excluded by !**/*.snap

📒 Files selected for processing (5)

• src/apps/pillarx-app/components/AccountSelector/AccountSelector.tsx
• src/apps/pillarx-app/components/PerpsTile/PerpsTile.tsx
• src/apps/pillarx-app/components/WalletPortfolioBalance/WalletPortfolioBalance.tsx
• src/apps/pillarx-app/components/WalletPortfolioBalance/test/WalletPortfolioBalance.test.tsx
• src/apps/pillarx-app/index.tsx

🧰 Additional context used

🧠 Learnings (5)

📚 Learning: 2025-04-23T15:04:20.826Z

Learnt from: RanaBug
Repo: pillarwallet/x PR: 290
File: src/apps/pillarx-app/components/TileTitle/TitleTitle.tsx:6-10
Timestamp: 2025-04-23T15:04:20.826Z
Learning: In this repository, TileTitleProps and TileTitle are different types that serve different purposes. TileTitleProps is used for the TileTitle component and has optional fields (title?, leftDecorator?, rightDecorator?), while TileTitle in api.ts has a required title field. The TileTitleProps structure aligns with how it's used in the TokensMarketData type in api.ts.

Applied to files:

• src/apps/pillarx-app/components/PerpsTile/PerpsTile.tsx
• src/apps/pillarx-app/index.tsx

📚 Learning: 2025-04-23T15:04:20.826Z

Learnt from: RanaBug
Repo: pillarwallet/x PR: 290
File: src/apps/pillarx-app/components/TileTitle/TitleTitle.tsx:6-10
Timestamp: 2025-04-23T15:04:20.826Z
Learning: In this repository, TileTitleProps and TileTitle are different types that serve different purposes. TileTitleProps is used for the TileTitle component and has optional fields (title?, leftDecorator?, rightDecorator?), while TileTitle in api.ts has a required text field. The TileTitleProps interface aligns with the TokensMarketData.title type in api.ts which also has optional fields.

Applied to files:

• src/apps/pillarx-app/components/PerpsTile/PerpsTile.tsx
• src/apps/pillarx-app/index.tsx

📚 Learning: 2025-12-03T10:01:15.801Z

Learnt from: aldin4u
Repo: pillarwallet/x PR: 471
File: src/apps/pillarx-app/components/AlgoInsightsTile/AlgoInsightsTile.tsx:36-48
Timestamp: 2025-12-03T10:01:15.801Z
Learning: In the AlgoInsightsTile component (src/apps/pillarx-app/components/AlgoInsightsTile/AlgoInsightsTile.tsx), the data is always hardcoded and guaranteed to be present with complete history arrays for all timeframes, so edge case handling for empty or sparse history data is not required.

Applied to files:

• src/apps/pillarx-app/components/PerpsTile/PerpsTile.tsx
• src/apps/pillarx-app/index.tsx

📚 Learning: 2025-08-20T09:14:16.888Z

Learnt from: RanaBug
Repo: pillarwallet/x PR: 374
File: src/apps/pillarx-app/index.tsx:12-12
Timestamp: 2025-08-20T09:14:16.888Z
Learning: In this codebase, Transaction Kit providers are set up at the container level (src/containers/Authorized.tsx), not at individual app component levels. App components like src/apps/pillarx-app/index.tsx are children that consume the context through the provider tree.

Applied to files:

• src/apps/pillarx-app/index.tsx
• src/apps/pillarx-app/components/AccountSelector/AccountSelector.tsx

📚 Learning: 2025-12-11T12:40:09.964Z

Learnt from: aldin4u
Repo: pillarwallet/x PR: 478
File: src/apps/pulse/components/App/AppWrapper.tsx:22-23
Timestamp: 2025-12-11T12:40:09.964Z
Learning: In the Pulse app's AppWrapper component (src/apps/pulse/components/App/AppWrapper.tsx), when users enter via `/pulse?searching=true` from PillarX home and select a token or market, they should continue into Pulse to complete their transaction, not navigate back to home. Only when closing the search without making a selection should they return to PillarX home.

Applied to files:

• src/apps/pillarx-app/index.tsx

🧬 Code graph analysis (2)

src/apps/pillarx-app/components/PerpsTile/PerpsTile.tsx (1)

src/pages/Landing.jsx (1)

• navigate (51-51)

src/apps/pillarx-app/components/AccountSelector/AccountSelector.tsx (1)

src/utils/blockchain.ts (1)

• truncateAddress (201-209)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

• GitHub Check: unit-tests
• GitHub Check: lint
• GitHub Check: Cloudflare Pages: x

🔇 Additional comments (7)

src/apps/pillarx-app/components/PerpsTile/PerpsTile.tsx (1)

1-35: LGTM!

Clean and well-structured promotional tile component. The responsive breakpoints for different screen sizes are appropriate, and the button has the correct type="button" attribute for accessibility.

src/apps/pillarx-app/index.tsx (2)

40-40: LGTM!

Import is correctly placed with other component imports.

---

385-387: LGTM!

PerpsTile is correctly positioned after WalletPortfolioTile in the home feed, matching the PR objectives.

src/apps/pillarx-app/components/WalletPortfolioBalance/WalletPortfolioBalance.tsx (2)

17-17: LGTM!

Import correctly added for the new AccountSelector component.

---

81-82: LGTM!

AccountSelector cleanly replaces the previous header UI. The component is self-contained and handles its own state and data fetching.

src/apps/pillarx-app/components/WalletPortfolioBalance/test/WalletPortfolioBalance.test.tsx (1)

37-42: LGTM!

The mock correctly isolates AccountSelector's dependencies (Privy, TransactionKit, API queries) from the WalletPortfolioBalance tests. The data-testid enables verification of the component's presence if needed.

src/apps/pillarx-app/components/AccountSelector/AccountSelector.tsx (1)

17-79: Component logic is sound.

The hooks setup, portfolio queries with proper skip conditions, memoized balances, and click-outside handling are all correctly implemented. The component integrates well with existing patterns (useTransactionKit, usePrivy, redux dispatch).

_{✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.}

---

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.}

[cloudflare-workers-and-pages]

Deploying x with    Cloudflare Pages

Latest commit:	3287b53
Status:	🚫  Build failed.

View logs

[cloudflare-workers-and-pages]

Deploying pillarx-debug with    Cloudflare Pages

Latest commit:	3287b53
Status:	🚫  Build failed.

View logs