Design-and-code sampler · no wallet connection
A free, implementation-minded sampler for the moments between “connect” and “final.” Figma structure, React/Tailwind source, copy, recovery, and state IDs stay aligned.
Sampler catalog · 2026-08-20
Generic wallet kits often stop at attractive dashboards. This sampler starts where users need clarity: network mismatch, signatures, approvals, pending finality, and failure recovery.
8 states shown.
wallet.disconnected
Not connected
No wallet is connected. Choose one to review this action; connecting does not approve or submit anything.
Check the site address before selecting a wallet.
Never enter a seed phrase on this screen.
network.unsupported
Wrong network
This action is prepared for Base, but your wallet is connected to Ethereum. Review the network change in your wallet.
If Base is unexpected, cancel and verify the original link.
A network switch does not authorize a transaction.
signature.requested
Waiting for signature
Your wallet has the final request. Match the site, action, and displayed details before you sign.
If the wallet details differ from this screen, reject the request.
A signature can authorize actions even when no network fee is shown.
signature.rejected
Not submitted
Nothing was signed or submitted. You can close this action or review the details and start again.
A fresh request should show the same site, action, and amount.
Repeated prompts can be a warning sign; pause if you did not retry.
approval.requested
Approval required
This permission lets the app use up to 250 USDC. It is not the transfer itself and remains active until used or revoked.
Prefer the smallest cap and duration that complete the intended action.
Unlimited approvals increase the impact of a compromised app.
transaction.pending
1 of 2 confirmations
Transaction 0x8D…91A was submitted. One confirmation is recorded; two are required before this app treats it as final.
Do not submit the same action again while its final status is unknown.
Leaving this page does not cancel a submitted transaction.
transaction.finalized
Finalized
The confirmed transfer completed at 14:32 UTC. The receipt includes the network, amount, destination, and transaction ID.
Keep the receipt if this action is part of a later support request.
Verify the destination and amount in the receipt, not only the success label.
transaction.reverted
Reverted onchain
The requested state change did not complete. The network may still charge a fee for the failed execution.
Fix the stated cause before creating a new transaction.
Do not promise that all funds or fees are unchanged after a revert.
The difference
The promise is not another visual theme. Change a state once, rebuild, and the coverage check rejects missing or stale design, code, or copy artifacts.
8
4
0
JSONtransaction.pendingmatchFigmaState=Transaction pendingmatchReacttransaction-pendingmatchCopyTransaction is confirmingmatchPhase A price test
These are the proposed one-time license prices. Visiting the interest page records an aggregate, anonymous path visit; it does not open checkout or collect an email.
One designer or developer
One team, up to 10 editors
No checkout, wallet request, payment, email form, or availability promise exists in Phase A.