code/cl8y-dex-terraclassic
4
0
Fork 0
Code Issues 35 Pull requests 6 Projects Releases Packages Wiki Activity

Wallet chip trigger: network shortLabel + mobile connected-state layout #186

New issue
Closed
opened 2026-05-25 02:13:44 +00:00 by PlasticDigits · 23 comments
PlasticDigits commented 2026-05-25 02:13:44 +00:00 (Migrated from gitlab.com)
Copy link

Summary

#140 follow-up (scope B): improve the connected trigger (not only dropdown rows). Audit notes from @Brouie on WalletButton.tsx.

Problems

  • Network text never shown — chain logo is the sole chain indicator.
  • Mobile (<sm): chip shows only truncated 4+4 address; no balance/copy/explorer/network affordance on the trigger (LUNC line added in #140 — verify layout still works).

Acceptance criteria

  • Show network shortLabel (from NETWORKS) alongside chain logo on sm+ trigger.
  • Mobile presentation strategy documented (chip vs menu) so W2-C3 / four standard elements are reachable without desktop-only assumptions.
  • No header overlap regressions — run / extend e2e/navigation.spec.ts if needed.
  • Docs + skills/AGENTS_FRONTEND_WALLET_CHIP.md + AGENTS_FRONTEND_RESPONSIVE_HEADER.md.

Relates to: #140

cc @Brouie

## Summary [#140](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/issues/140) follow-up (scope **B**): improve the **connected trigger** (not only dropdown rows). Audit notes from @Brouie on `WalletButton.tsx`. ## Problems - Network **text** never shown — chain logo is the sole chain indicator. - **Mobile (`<sm`)**: chip shows only truncated `4+4` address; no balance/copy/explorer/network affordance on the trigger (LUNC line added in #140 — verify layout still works). ## Acceptance criteria - [ ] Show network **shortLabel** (from `NETWORKS`) alongside chain logo on `sm+` trigger. - [ ] Mobile presentation strategy documented (chip vs menu) so W2-C3 / four standard elements are reachable without desktop-only assumptions. - [ ] No header overlap regressions — run / extend `e2e/navigation.spec.ts` if needed. - [ ] Docs + [`skills/AGENTS_FRONTEND_WALLET_CHIP.md`](skills/AGENTS_FRONTEND_WALLET_CHIP.md) + [`AGENTS_FRONTEND_RESPONSIVE_HEADER.md`](skills/AGENTS_FRONTEND_RESPONSIVE_HEADER.md). **Relates to:** [#140](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/issues/140) cc @Brouie
PlasticDigits commented 2026-05-25 02:13:45 +00:00 (Migrated from gitlab.com)
Copy link

marked as related to #140

marked as related to #140
PlasticDigits commented 2026-05-25 02:14:02 +00:00 (Migrated from gitlab.com)
Copy link

mentioned in issue #140

mentioned in issue #140
PlasticDigits commented 2026-05-25 02:29:39 +00:00 (Migrated from gitlab.com)
Copy link

mentioned in commit 5198fbc499

mentioned in commit 5198fbc4993802fe4e1dcc855e2317e8d5a6eee7
PlasticDigits commented 2026-05-25 02:29:39 +00:00 (Migrated from gitlab.com)
Copy link

mentioned in commit 5fcd3ce007

mentioned in commit 5fcd3ce0078e902bafae55c6c1081c2e7f529b1e
PlasticDigits commented 2026-05-25 02:30:03 +00:00 (Migrated from gitlab.com)
Copy link

Implementation summary (merged to main @ 5198fbc)

Connected wallet chip trigger now shows the Terra network shortLabel (from getNetworkBadgeCopy()) beside the chain logo from sm: up via new WalletChipNetworkIndicator. Mobile keeps LUNC + truncated address on the chip; network text stays hidden on the trigger (icon + tooltip) so header width is preserved — copy/explorer/switch remain menu-first per #140 scope B.

Docs / agent playbooks

Verification checklist

  • Desktop (≥640px): connect wallet → chip shows Local (or Mainnet/Testnet for your build) next to chain icon
  • Mobile (<640px): chip shows LUNC + terra1… shorten; no visible network text on trigger; Environment ribbon still shows network
  • Tablet (~773px): connected chip does not overlap header More button
  • Open wallet menu → full address + AddressRow copy/explorer still work (#188); Esc / backdrop dismiss still work (#187)
  • npm run test -- --run src/components/wallet/__tests__/WalletButton.test.tsx passes
  • npx playwright test e2e/navigation.spec.ts --grep "GitLab #186" passes (needs LocalTerra + .env.local)

@Brouie — please verify on your audit viewport(s); leaving the issue open until sign-off.

## Implementation summary (merged to `main` @ 5198fbc) Connected wallet chip trigger now shows the Terra network **shortLabel** (from `getNetworkBadgeCopy()`) beside the chain logo from **`sm:`** up via new [`WalletChipNetworkIndicator`](frontend-dapp/src/components/wallet/WalletChipNetworkIndicator.tsx). Mobile keeps LUNC + truncated address on the chip; network text stays hidden on the trigger (icon + tooltip) so header width is preserved — copy/explorer/switch remain menu-first per #140 scope B. ### Docs / agent playbooks - [docs/frontend.md § Connected wallet chip — network & mobile](docs/frontend.md#connected-wallet-chip-network-mobile) - [skills/AGENTS_FRONTEND_WALLET_CHIP.md](skills/AGENTS_FRONTEND_WALLET_CHIP.md) - [skills/AGENTS_FRONTEND_RESPONSIVE_HEADER.md](skills/AGENTS_FRONTEND_RESPONSIVE_HEADER.md) - [docs/testing.md](docs/testing.md) — Playwright coverage called out ### Verification checklist - [ ] Desktop (`≥640px`): connect wallet → chip shows **Local** (or Mainnet/Testnet for your build) next to chain icon - [ ] Mobile (`<640px`): chip shows LUNC + `terra1…` shorten; **no** visible network text on trigger; Environment ribbon still shows network - [ ] Tablet (~773px): connected chip does not overlap header **More** button - [ ] Open wallet menu → full address + `AddressRow` copy/explorer still work (#188); Esc / backdrop dismiss still work (#187) - [ ] `npm run test -- --run src/components/wallet/__tests__/WalletButton.test.tsx` passes - [ ] `npx playwright test e2e/navigation.spec.ts --grep "GitLab #186"` passes (needs LocalTerra + `.env.local`) @Brouie — please verify on your audit viewport(s); leaving the issue **open** until sign-off.
PlasticDigits commented 2026-05-25 02:34:04 +00:00 (Migrated from gitlab.com)
Copy link

mentioned in commit f81f620f6b

mentioned in commit f81f620f6b7d55e63b17df816fd133f8561f49b7
PlasticDigits commented 2026-05-25 02:34:21 +00:00 (Migrated from gitlab.com)
Copy link

mentioned in issue #185

mentioned in issue #185
Brouie commented 2026-05-25 04:48:44 +00:00 (Migrated from gitlab.com)
Copy link

qa cleared at source+test layer @PlasticDigits

verified 5198fbc / 5fcd3ce.

WalletChipNetworkIndicator.tsx — new component at src/components/wallet/. Chain logo always rendered, shortLabel via hidden sm:inline (visible sm+ up, hidden on mobile). Falls back to title=" · " for the mobile tooltip. data-testid hooks present.

WalletButton.tsx — imports the new indicator (line 10), renders it inside the trigger (line 69). Mobile chip still shows LUNC + 4+4 address via the sm:hidden right column (lines 63-68), no overlap with the new indicator.

docs/frontend.md — § "Connected wallet chip — network label & mobile layout" (line 91) covers the chip-vs-menu strategy.

skills/AGENTS_FRONTEND_WALLET_CHIP.md + skills/AGENTS_FRONTEND_RESPONSIVE_HEADER.md both present.

WalletButton.test.tsx — 8/8 passing (ran under #187). The #186 unit case "shows network shortLabel on the connected trigger" is green.

e2e/navigation.spec.ts — 3 Playwright cases under describe('Connected wallet chip network (GitLab #186)'):

  • shows network shortLabel on desktop trigger at 1280px
  • mobile chip keeps LUNC on trigger and hides network text label
  • connected wallet chip does not overlap header More at tablet width

source side complete. Playwright e2e + 1280/mobile/tablet viewport walk pending — same tunnel/YieldOmega conflict as #187, will run on next clean stack session.

qa cleared at source+test layer @PlasticDigits verified 5198fbc / 5fcd3ce. WalletChipNetworkIndicator.tsx — new component at src/components/wallet/. Chain logo always rendered, shortLabel via `hidden sm:inline` (visible sm+ up, hidden on mobile). Falls back to title=" · " for the mobile tooltip. data-testid hooks present. WalletButton.tsx — imports the new indicator (line 10), renders it inside the trigger (line 69). Mobile chip still shows LUNC + 4+4 address via the sm:hidden right column (lines 63-68), no overlap with the new indicator. docs/frontend.md — § "Connected wallet chip — network label & mobile layout" (line 91) covers the chip-vs-menu strategy. skills/AGENTS_FRONTEND_WALLET_CHIP.md + skills/AGENTS_FRONTEND_RESPONSIVE_HEADER.md both present. WalletButton.test.tsx — 8/8 passing (ran under #187). The #186 unit case "shows network shortLabel on the connected trigger" is green. e2e/navigation.spec.ts — 3 Playwright cases under describe('Connected wallet chip network (GitLab #186)'): - shows network shortLabel on desktop trigger at 1280px - mobile chip keeps LUNC on trigger and hides network text label - connected wallet chip does not overlap header More at tablet width source side complete. Playwright e2e + 1280/mobile/tablet viewport walk pending — same tunnel/YieldOmega conflict as #187, will run on next clean stack session.
Brouie commented 2026-05-25 07:27:22 +00:00 (Migrated from gitlab.com)
Copy link

Browser walk done — stack came up clean:

  • Desktop ≥640px: chip shows chain icon + "Local" shortLabel ✓
  • Mobile 430px: chip shows LUNC + truncated address; Environment ribbon still shows network ✓
  • Tablet ~773px (iPad Mini emu @ 768px): connected chip does not overlap More ✓
  • Wallet menu: full address + AddressRow copy/explorer work, Esc + backdrop dismiss work (covered under #187 / #188) ✓

Unit tests 8/8 PASS at 5198fbc4 / 5fcd3ce0 (ran under #187).

Playwright e2e didn't get a clean run — QA blocks dev wallet via the public-IP guard, and the WSL setup can't reach the host-bound tunnels from headless Chromium. Browser walk covers the same surface. Will run the e2e on next clean stack session.

@PlasticDigits good to close.

Browser walk done — stack came up clean: - Desktop ≥640px: chip shows chain icon + "Local" shortLabel ✓ - Mobile 430px: chip shows LUNC + truncated address; Environment ribbon still shows network ✓ - Tablet \~773px (iPad Mini emu @ 768px): connected chip does not overlap More ✓ - Wallet menu: full address + AddressRow copy/explorer work, Esc + backdrop dismiss work (covered under #187 / #188) ✓ Unit tests 8/8 PASS at `5198fbc4` / `5fcd3ce0` (ran under #187). Playwright e2e didn't get a clean run — QA blocks dev wallet via the public-IP guard, and the WSL setup can't reach the host-bound tunnels from headless Chromium. Browser walk covers the same surface. Will run the e2e on next clean stack session. @PlasticDigits good to close.
PlasticDigits (Migrated from gitlab.com) closed this issue 2026-05-25 11:09:54 +00:00
PlasticDigits commented 2026-05-26 10:09:15 +00:00 (Migrated from gitlab.com)
Copy link

mentioned in commit be2d8644c1

mentioned in commit be2d8644c13196a48654eae5ed893ab743f8f875
PlasticDigits commented 2026-05-29 03:16:36 +00:00 (Migrated from gitlab.com)
Copy link

mentioned in issue #214

mentioned in issue #214
PlasticDigits commented 2026-06-06 08:15:55 +00:00 (Migrated from gitlab.com)
Copy link

mentioned in merge request !829

mentioned in merge request !829
PlasticDigits commented 2026-06-06 08:16:24 +00:00 (Migrated from gitlab.com)
Copy link

mentioned in issue #292

mentioned in issue #292
PlasticDigits commented 2026-06-06 09:56:26 +00:00 (Migrated from gitlab.com)
Copy link

mentioned in merge request !831

mentioned in merge request !831
ghost1 commented 2026-06-08 07:22:59 +00:00 (Migrated from gitlab.com)
Copy link

mentioned in commit b023bd2b26

mentioned in commit b023bd2b2600e44e51ac98fc1391a04bc58afc4d
PlasticDigits commented 2026-06-08 07:23:39 +00:00 (Migrated from gitlab.com)
Copy link

mentioned in merge request !836

mentioned in merge request !836
PlasticDigits commented 2026-06-08 08:43:13 +00:00 (Migrated from gitlab.com)
Copy link

mentioned in commit 371985597e

mentioned in commit 371985597e1e830dad153b9b0177539ebde9727f
PlasticDigits commented 2026-06-08 13:42:28 +00:00 (Migrated from gitlab.com)
Copy link

mentioned in commit e4d55e8eb4

mentioned in commit e4d55e8eb45bccfbd6dc74161323c890b38f86a2
PlasticDigits commented 2026-07-12 12:11:14 +00:00 (Migrated from gitlab.com)
Copy link

mentioned in issue #483

mentioned in issue #483
PlasticDigits commented 2026-07-13 01:20:32 +00:00 (Migrated from gitlab.com)
Copy link

mentioned in merge request !1019

mentioned in merge request !1019
PlasticDigits commented 2026-08-26 03:07:39 +00:00 (Migrated from gitlab.com)
Copy link

mentioned in issue #656

mentioned in issue #656
PlasticDigits commented 2026-08-26 04:22:42 +00:00 (Migrated from gitlab.com)
Copy link

mentioned in issue #671

mentioned in issue #671
PlasticDigits commented 2026-08-26 07:17:45 +00:00 (Migrated from gitlab.com)
Copy link

mentioned in merge request !1170

mentioned in merge request !1170
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
renovate/tokio-util-0.x-lockfile
renovate/thiserror-2.x-lockfile
renovate/serde_json-1.x-lockfile
renovate/serde-monorepo
renovate/libc-0.x-lockfile
renovate/chrono-0.x-lockfile
cac-design-issue-1206
cac-design-issue-1317
cac-design-issue-1316
cac-design-issue-1311
cac-design-issue-1300
cac-design-issue-1306
cac-design-issue-1305
cac-design-issue-1302
cac-design-issue-1277
No results found.
Labels
Clear labels   
agent:fix_bugfix

   
agent:fix_conflicts

   
agent:fix_security

   
agent:gap_analysis

   
agent:implement

   
agent:implement
Queue implement gate

  
agent:implement
Queue implement gate

  
agent:open_issues

   
agent:ready

   
agent:research

   
agent:security_audit

   
agent:verify

   
architecture
Architecture

  
backend
API and services

  
blocker:hybrid
Blocks hybrid launch

  
blocker:launch
Blocks launch

  
blocker:limit-orders
Blocks limits launch

  
blocker:v2
Blocks v2

  
block:log_only

   
block:security

   
bug

   
ci

   
contracts
Smart contracts

  
correctness

   
deploy

   
dev

   
devops

   
docs

   
documentation

   
duplicate

   
e2e

   
enhancement

   
epic
Epic

  
feature

   
frontend

   
functional-completion
Functional

  
gas

   
good first issue

   
governance

   
help wanted

   
high-risk

   
hooks

   
hybrid
Hybrid swaps

  
indexer
Indexer

  
infra
CI/CD

  
infrastructure

   
integrators

   
invalid

   
launch-blocker

   
limit-orders
Limit orders

  
localnet

   
localterra

   
low priority

   
missing-implementation
Implementation

  
needs-design
Design decision required

  
ops

   
performance
  
priority
high

  
priority
medium

  
product

   
qa

   
QA

   
question

   
ready
Definition of Ready

  
ready
Definition of Ready

  
research

   
scripts

   
security
Security

  
security-hardening
Security hardening

  
smartcontracts

   
tech-debt

   
testing
Testing

  
ux

   
UX

   
v2
Pool-only swaps

  
verification

   
wontfix
No labels
agent:fix_bugfix
agent:fix_conflicts
agent:fix_security
agent:gap_analysis
agent:implement
agent:implement
agent:implement
agent:open_issues
agent:ready
agent:research
agent:security_audit
agent:verify
architecture
backend
blocker:hybrid
blocker:launch
blocker:limit-orders
blocker:v2
block:log_only
block:security
bug
ci
contracts
correctness
deploy
dev
devops
docs
documentation
duplicate
e2e
enhancement
epic
feature
frontend
functional-completion
gas
good first issue
governance
help wanted
high-risk
hooks
hybrid
indexer
infra
infrastructure
integrators
invalid
launch-blocker
limit-orders
localnet
localterra
low priority
missing-implementation
needs-design
ops
performance
priority
high
priority
medium
product
qa
QA
question
ready
ready
research
scripts
security
security-hardening
smartcontracts
tech-debt
testing
ux
UX
v2
verification
wontfix
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
code/cl8y-dex-terraclassic#186
No description provided.