Supersedes the full-lifecycle-tab approach in #2139.
Per the recent discussion, we are pivoting to a lighter, more scalable pattern: a rule-based badge that flags a known protocol and links out to the best external explorer for that transfer, instead of Lab rebuilding Range's cross-chain lifecycle view. This avoids duplicating work other providers already do well, and sets a template future protocol badges can reuse.
This issue covers the design decisions. Engineering is tracked separately #2161; it is designed and verified against the code, and is gated on the decisions here.
What we are adding
A "CCTP" badge in the existing badge row of the Transaction Dashboard, next to the "Soroban transaction" badge. It appears automatically on CCTP transactions. Detection is handled in code (it reads the transaction's on-chain events), works on both mainnet and testnet, and for both directions of a transfer (burn and mint). No user action needed.
Behavior
- Hover or focus the badge opens a tooltip describing CCTP.
- Click the badge opens Range explorer for that specific transfer (
https://explorer.range.org/transactions?s=<stellarTxHash>, which resolves the transfer by hash on both networks and both directions).
- The tooltip contains two links: the word "CCTP" links to Circle's docs, and a "View this transfer on Range" line opens the same Range page as the click.
Why the Range link also lives in the tooltip: it makes the click destination visible and labeled. The two links are different on purpose: "CCTP" explains the protocol, "View on Range" opens this transfer.
Proposed tooltip copy
Cross-Chain Transfer Protocol (CCTP) is a permissionless onchain utility that facilitates native USDC transfers across blockchains. CCTP burns USDC on the source blockchain and mints it on the destination blockchain, enabling secure 1:1 transfers without traditional bridge liquidity pools or wrapped tokens.
View this transfer on Range →
"CCTP" links to https://developers.circle.com/cctp. "View this transfer on Range" links to the Range page for the transaction. (See also the reusable CCTP copy already drafted in the #2139 comment, which can be reused where it fits.)
States to design
- Successful CCTP tx (most common): badge is clickable, tooltip shows the description plus the "View on Range" link.
- Failed CCTP tx: badge still shows (so the user knows it was a CCTP attempt), but there is no Range link, because Range does not index failed transfers. Tooltip shows the description only. Confirm this degraded state reads clearly (e.g. no external-link icon).
- Row context: a CCTP transaction is also a Soroban transaction, so the row shows "Soroban transaction" immediately followed by "CCTP". Both currently use the same visual style, which is the main thing to resolve.
Decisions this issue owns
- Badge style. "Soroban transaction" and "CCTP" should not look identical side by side, especially since one is a link and one is not. Options: a distinct variant for protocol badges, an outlined style, a small icon, or different placement. Set a treatment future protocol badges can reuse.
- Interaction model. Proposed: hover/focus opens the tooltip, click navigates to Range. Heads-up from engineering: the Stellar Design System tooltip opens on click, not hover, so the hover model needs custom work and conflicts with the badge also being a click-to-Range link. The click-to-open model (badge click opens the tooltip; both the CCTP docs link and the Range link live inside it, like the existing
BuildVerifiedBadge) is the design system default and is more touch/keyboard friendly. Please confirm which model.
- Placement and order relative to "Soroban transaction" and the optional "Fee bump" badge.
- Tooltip copy approval (keep both links? exact CTA wording?).
- Interactive tooltip confirmation. For the in-tooltip links to be clickable, the tooltip must stay open while the user interacts with its content. Verified: the design system tooltip keeps content clickable under click-to-open. Under a hover model this needs custom work (see decision 2).
Note on the existing #2139 design
#2139 has a "Final design" Figma for the full lifecycle tab and a detailed tooltip-copy comment. The pivot to badge + link-out makes the full-tab layout out of scope, but the tooltip copy is reusable. This issue is intentionally narrower.
Reference
Once decisions 1–5 are settled, engineering implements (detection, Range link, and rule system are already build-ready).
Supersedes the full-lifecycle-tab approach in #2139.
Per the recent discussion, we are pivoting to a lighter, more scalable pattern: a rule-based badge that flags a known protocol and links out to the best external explorer for that transfer, instead of Lab rebuilding Range's cross-chain lifecycle view. This avoids duplicating work other providers already do well, and sets a template future protocol badges can reuse.
This issue covers the design decisions. Engineering is tracked separately #2161; it is designed and verified against the code, and is gated on the decisions here.
What we are adding
A "CCTP" badge in the existing badge row of the Transaction Dashboard, next to the "Soroban transaction" badge. It appears automatically on CCTP transactions. Detection is handled in code (it reads the transaction's on-chain events), works on both mainnet and testnet, and for both directions of a transfer (burn and mint). No user action needed.
Behavior
https://explorer.range.org/transactions?s=<stellarTxHash>, which resolves the transfer by hash on both networks and both directions).Why the Range link also lives in the tooltip: it makes the click destination visible and labeled. The two links are different on purpose: "CCTP" explains the protocol, "View on Range" opens this transfer.
Proposed tooltip copy
"CCTP" links to https://developers.circle.com/cctp. "View this transfer on Range" links to the Range page for the transaction. (See also the reusable CCTP copy already drafted in the #2139 comment, which can be reused where it fits.)
States to design
Decisions this issue owns
BuildVerifiedBadge) is the design system default and is more touch/keyboard friendly. Please confirm which model.Note on the existing #2139 design
#2139 has a "Final design" Figma for the full lifecycle tab and a detailed tooltip-copy comment. The pivot to badge + link-out makes the full-tab layout out of scope, but the tooltip copy is reusable. This issue is intentionally narrower.
Reference
0cc40a0cd8fad7fc590328a2bb8487ada038aadec972d9d635927b9cc50ad336Once decisions 1–5 are settled, engineering implements (detection, Range link, and rule system are already build-ready).