Skip to content

feat(AssetBadge): display issuer ID on hover and prevent text overflo… - #1005

Merged
k-deejah merged 1 commit into
Sorokit:mainfrom
adams813:feat/asset-badge-issuer-tooltip-915
Oct 17, 2026
Merged

k-deejah merged 1 commit into
Sorokit:mainfrom
adams813:feat/asset-badge-issuer-tooltip-915

Conversation

@adams813

Copy link
Copy Markdown
Contributor

Description

Closes #915
Closes #914
Closes #913
Closes #916

This PR updates AssetBadge and AssetPill to display the issuer account address in an interactive tooltip on hover/focus with a 1-click copy action, prevents long custom asset codes from overflowing badge boundaries, and adds network-aware badge color variant styling along with comprehensive unit tests.

Problem

  1. Missing Issuer Tooltip: Non-native assets in AssetBadge did not surface the issuer account address in a tooltip on hover or keyboard focus, nor did they provide a quick way to copy the full issuer public key.
  2. Text Overflow on Long Asset Codes: Custom Stellar asset codes longer than 12 characters broke out of the badge container bounds and disrupted adjacent layout elements.
  3. Missing Network Variant Tests: AssetBadge.test.tsx lacked unit test coverage verifying testnet vs. mainnet badge color variants.

What Changed & How It Was Implemented

  • Issuer Tooltip & 1-Click Copy (src/components/AssetBadge.tsx):
    • Wrapped non-native AssetBadge elements that have an assetIssuer in the shared <Tooltip> primitive (delayDuration={0}).
    • Rendered the truncated issuer public key (truncateAddress(balance.assetIssuer, 6, 4)) alongside a 1-click copy button (navigator.clipboard.writeText with a document.execCommand("copy") fallback for non-secure contexts and a 2-second status reset timer).
    • Added tabIndex={0} and focus ring styling to non-button badges with an issuer so keyboard users can focus the badge to trigger the tooltip.
  • Long Asset Code Truncation (src/components/AssetBadge.tsx):
    • Applied truncate max-w-[12ch] and title={code} to the asset code label inside AssetBadge and AssetPill, and ensured flex containers include min-w-0 so long codes ellipsis cleanly without breaking layout.
  • Network Badge Styling (src/components/AssetBadge.tsx):
    • Added an optional network prop ("mainnet" | "testnet" | (string & {})) to AssetBadgeProps and AssetPillProps so testnet assets render with theme-aware warning tokens (bg-warning-dim text-warning) unless overridden by colorMap.
  • Unit Tests (src/components/AssetBadge.test.tsx):
    • Added tests for displaying the issuer tooltip on pointer hover and keyboard focus.
    • Added tests for copying the full issuer address via the tooltip's 1-click copy button.
    • Added tests verifying native (XLM) and liquidity_pool_shares (LP) badges do not render an issuer tooltip.
    • Added tests verifying truncate and max-w-[12ch] classes on long asset codes (> 12 chars) for both AssetBadge and AssetPill.
    • Added tests verifying testnet vs. mainnet badge color variants and colorMap precedence.

Testing

  • Ran unit test suite (npx vitest run src/components/AssetBadge.test.tsx) — all tests pass.
  • Ran typecheck and linter (npm run validate) — zero errors

@drips-wave

drips-wave Bot commented Oct 17, 2026

Copy link
Copy Markdown

@adams813 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

@adams813

Copy link
Copy Markdown
Contributor Author

@k-deejah , pls review pr

@k-deejah
k-deejah merged commit 5db24bb into Sorokit:main Oct 17, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

2 participants