style: hide arrow button when only one entry exists

[Nick-1979]

Summary by CodeRabbit

• New Features
  • Improved staking positions interface with adaptive layout based on the total number of positions.
  • Navigation controls now dynamically appear when managing multiple staking positions.
  • Optimized spacing and layout for enhanced visibility of staking position details.

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

[coderabbitai]

Walkthrough

The PositionItem component is enhanced with a totalPositions prop that controls conditional rendering and layout styling. The parent component calculates the total position count and passes it to PositionItem, which uses it to determine whether to display an ArrowButton and adjust padding accordingly.

Changes

Cohort / File(s)	Summary
Conditional Position Layout packages/extension-polkagate/src/fullscreen/stake/stakingPositions/PositionItem.tsx	Added totalPositions: number prop to PositionItem. Implemented conditional rendering: ArrowButton displays only when totalPositions > 1; container padding varies based on totalPositions value. Reordered Props type with type field moved to end.
Position Count Integration packages/extension-polkagate/src/fullscreen/stake/stakingPositions/index.tsx	Added local totalPositions variable to count positionItems. Updated PositionItem component usage to pass totalPositions prop for both pool and solo item renderings.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

• Straightforward prop addition with simple conditional rendering logic
• Changes are localized and focused on two closely related files
• No complex state management or business logic modifications

Poem

🐰 A rabbit counts the staking heap,
And passes tallies, oh so deep,
More positions? Show the arrow bright!
Padding shifts with logic tight! ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The pull request title accurately describes the main change: hiding the arrow button when only one staking position exists, which aligns with the conditional rendering logic added to PositionItem.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch noArrowBtnIfOnlyOnePosition

---

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: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

packages/extension-polkagate/src/fullscreen/stake/stakingPositions/index.tsx (1)

32-69: totalPositions does not reflect the actual number of rendered position cards

Currently, totalPositions counts all tokens in positionItems, but rendering can produce a different number of PositionItem components due to:

• Testnet gating (line 39–40): tokens from TEST_NETS are skipped if state.isTestnet is false
• Zero-balance filtering (lines 45, 58): empty pooledBalance or soloTotal skip rendering
• Staking type filtering (lines 45, 58): type constraints ('pool', 'solo', 'both') reduce rendered items

Since the arrow button (PositionItem.tsx line 142–143) is shown only when totalPositions > 1, mismatches occur:

• One token with both pool and solo: renders two PositionItems but totalPositions === 1, so the arrow is hidden despite two visible entries.
• One mainnet and one testnet token with testnets disabled: renders one PositionItem but totalPositions === 2, so the arrow is shown for a single entry.

To match the arrow visibility to actual rendered cards, compute totalPositions after filtering:

const totalPositions = positionItems?.reduce((count, { pooledBalance, soloTotal, genesisHash }) => {
  if (TEST_NETS.includes(genesisHash) && !state.isTestnet) {
    return count;
  }

  if (pooledBalance && !pooledBalance.isZero() && ['both', 'pool'].includes(state.stakingType)) {
    count += 1;
  }

  if (soloTotal && !soloTotal.isZero() && ['both', 'solo'].includes(state.stakingType)) {
    count += 1;
  }

  return count;
}, 0) ?? 0;

🧹 Nitpick comments (1)

packages/extension-polkagate/src/fullscreen/stake/stakingPositions/PositionItem.tsx (1)

125-144: Arrow visibility & padding logic are correct; consider simplifying ArrowButton click handling

The conditional padding (p variant based on totalPositions) plus pl='18px' cleanly gives extra right padding only when the arrow is hidden, which matches the PR goal.

Using totalPositions > 1 to gate the ArrowButton also aligns with “hide arrow when only one entry exists”. With onClick={noop}, clicks on the arrow still bubble to the parent Container’s onClick, so navigation continues to work without double-calling the handler.

If you want to simplify, you could:

• Drop the onClick prop from ArrowButton entirely and let it be purely visual, or
• Remove the onClick on the ArrowButton’s inner Grid and rely solely on the parent container click.

Both are minor cleanups; current behavior is functionally fine.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 05afd26 and 822d1f0.

📒 Files selected for processing (2)

• packages/extension-polkagate/src/fullscreen/stake/stakingPositions/PositionItem.tsx (3 hunks)
• packages/extension-polkagate/src/fullscreen/stake/stakingPositions/index.tsx (3 hunks)

⏰ 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). (2)

• GitHub Check: Analyze (javascript)
• GitHub Check: build

🔇 Additional comments (1)

packages/extension-polkagate/src/fullscreen/stake/stakingPositions/PositionItem.tsx (1)

89-100: New totalPositions prop wiring looks consistent

The added totalPositions prop and its use in the PositionItem signature are consistent and typed appropriately. Assuming all call sites pass this new prop (as in PositionOptions), this API change looks good.