fix: add warning styling to contract address display (closes #9) #16

Closed
clawbot wants to merge 1 commits from fix/contract-address-safety into main
3 changed files with 11 additions and 3 deletions

View File

@@ -335,6 +335,14 @@ transitions.
- Full address (color dot, etherscan link, tap to copy)
- USD total for this token
- Single token balance line (4 decimal places)
- Token contract info (ERC-20 only): displayed for informational and
verification purposes only. Styled with a red warning border, ⚠️ icon, and
explicit "DO NOT send funds to this address" label to prevent users from
confusing the contract address with their wallet address. The contract
address itself is rendered in muted text. This distinction is critical
because funds sent to a token contract address are typically
irrecoverable. The Etherscan link and click-to-copy functionality are
preserved for verification use.
- Send / Receive buttons
- Token-filtered transaction list (only this token's transfers)
- **Transitions**:

View File

@@ -361,7 +361,7 @@
<!-- token contract details (ERC-20 only) -->
<div
id="address-token-contract-info"
class="border-b border-border-light pb-2 mb-2 text-xs hidden"
class="border-2 border-red-500 rounded p-2 mb-2 text-xs hidden"
></div>
<!-- actions -->

View File

@@ -143,9 +143,9 @@ function show() {
const dot = addressDotHtml(tokenId);
const tokenLink = `https://etherscan.io/token/${escapeHtml(tokenId)}`;
let infoHtml =
`<div class="font-bold mb-1">Token Contract</div>` +
`<div class="font-bold mb-1">\u26A0\uFE0F Token Contract \u2014 DO NOT send funds to this address</div>` +
`<div class="flex items-center mb-1">${dot}` +
`<span class="break-all underline decoration-dashed cursor-pointer" id="address-token-contract-copy" data-copy="${escapeHtml(tokenId)}">${escapeHtml(tokenId)}</span>` +
`<span class="break-all underline decoration-dashed cursor-pointer text-gray-500" id="address-token-contract-copy" data-copy="${escapeHtml(tokenId)}">${escapeHtml(tokenId)}</span>` +
`<a href="${tokenLink}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>` +
`</div>`;
const details = [];