feat: move balances into the global navbar

[RocioCM]

Moves the sub-nav balance chips into the shared ui2 navbar, for #206: the credits chip and the Polygon MANA chip now render as navbar balances (shopCreditsBalance, manaBalances + showManaBalancesInNavbar), with the credits chip clicking through to /credits. The gradient "Get credits" CTA stays in the sub-nav.

• Balances derive from the existing useBalance / useManaBalance hooks; the react-query invalidations after purchases and top-ups flow straight through props, so the chip updates without a reload.
• Loading/error pass undefined (chip hidden) rather than a misleading 0; MANA stays hidden at zero, keeping the web2-first "no crypto by default" behavior.
• NavbarViolet gains color overrides for the chips — ui2 styles them near-white for its dark bar, and the MANA diamond hardcodes a near-white fill — targeted via the chips' aria-labels, same contract as the existing hamburger overrides.
• E2e specs now select the chips by aria-label (the subnav-balance / subnav-mana-balance testids are gone); removed the dead chip styled-components and the orphaned nav.polygonMana / nav.yourBalance keys.

Draft until decentraland/ui2#461 is released — then bump decentraland-ui2 here to that version. Locally verified against a packed ui2: typecheck, unit suite, and the chip-related e2e specs pass (the pack-purchase e2e failures reproduce on a clean tree and are unrelated).

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
shop	Error		Jul 31, 2026 3:31pm

[decentraland-bot]

Review: feat: move balances into the global navbar

Files: 9 changed (+52/−94)

Summary

Moves the shop credits and Polygon MANA balance chips from the shop's custom sub-nav into the shared ui2 navbar via the new props from ui2#461. Net deletion of ~40 lines — removes duplicated styled-component chip code and replaces it with ui2's built-in rendering.

What looks good

• Net code reduction: Removes Mana, ManaIco, Balance, BalanceIco, BalanceSkel styled components (~56 lines) that are now handled by ui2.
• Balance derivation logic:
  • shopCredits: undefined while loading or on error (hides the chip), the loaded count (including 0) otherwise — avoids showing a misleading dash or zero during transient states.
  • manaBalances: Only populated when the wallet holds MANA (> 0n), preserving the web2-first "no crypto by default" navbar behavior.
• manaWeiToNumber replaces formatMana — correct change since ui2 expects raw numbers (it formats via formatBalance internally).
• E2e test migration: All selectors migrated from data-testid="subnav-balance" / data-testid="subnav-mana-balance" to aria-label selectors (button[aria-label$=" shop credits"], button[aria-label$="MANA on Polygon"]). Tests are thorough — cover signed-out state, balance display, purchase-updates-balance flow, and Stripe return handling.
• Cleanup: Orphaned i18n keys (nav.polygonMana, nav.yourBalance) removed from both en.json and es.json.

One note

The NavbarViolet CSS overrides in TopNav.styles.ts target the balance chips via aria-label attribute selectors:

& nav button[aria-label$=' shop credits']
& nav button[aria-label*=' MANA on ']

If ui2 ever changes the aria-label format on these chips, these selectors will silently stop matching and the color overrides will break on the violet navbar. This is the same coupling pattern already used for the hamburger button (button[aria-label='Open menu']), so it's consistent with the existing approach — just worth being aware of for future ui2 updates.

Pipeline failures

• CI (Build and Test): tsc fails with TS2322: Property 'shopCreditsBalance' does not exist on type 'NavbarProps'. Expected — needs the released ui2 from ui2#461.
• Vercel preview: Fails for the same build error.

Both will resolve once ui2#461 is released and the decentraland-ui2 dependency is bumped here.

No issues found. LGTM ✅

---

🤖 Generated with Claude Code

[decentraland-bot]

No p0/p1/p2 findings. Good cleanup — net deletion, balance logic is sound, e2e tests properly migrated. LGTM.