Enhance confirm transaction page with full verification details
All checks were successful
check / check (push) Successful in 17s

The confirmation page now shows:
- Transaction type (Native ETH transfer vs ERC-20 token transfer)
- Full ERC-20 token contract address with etherscan link
- Token symbol throughout (not raw contract address)
- Current balance of the token being sent, with USD value
- Estimated network fee in ETH and USD (fetched async)
- USD value for ERC-20 token amounts (not just ETH)
- Insufficient balance errors for ERC-20 tokens

Also implements actual ERC-20 token transfers via the token contract's
transfer() function, rather than only supporting native ETH sends.
This commit is contained in:
2026-02-27 11:42:42 +07:00
parent 01201d54b2
commit b85eac1e75
3 changed files with 212 additions and 25 deletions

View File

@@ -441,30 +441,57 @@
< Back
</button>
<h2 class="font-bold mb-2">Confirm Transaction</h2>
<div class="mb-2">
<div class="text-xs text-muted">From</div>
<!-- transaction type -->
<div class="mb-3">
<div class="text-xs text-muted mb-1">Type</div>
<div id="confirm-type" class="text-xs font-bold"></div>
</div>
<!-- ERC-20 token contract (hidden for ETH) -->
<div id="confirm-token-section" class="mb-3 hidden">
<div class="text-xs text-muted mb-1">Token contract</div>
<div
id="confirm-token-contract"
class="text-xs break-all"
></div>
</div>
<div class="mb-3">
<div class="text-xs text-muted mb-1">From</div>
<div id="confirm-from" class="text-xs break-all"></div>
</div>
<div class="mb-2">
<div class="text-xs text-muted">To</div>
<div class="mb-3">
<div class="text-xs text-muted mb-1">To</div>
<div id="confirm-to" class="text-xs break-all"></div>
<div
id="confirm-to-ens"
class="text-xs text-muted hidden"
></div>
</div>
<div class="mb-2">
<div class="text-xs text-muted">Amount</div>
<div class="mb-3">
<div class="text-xs text-muted mb-1">Amount</div>
<div id="confirm-amount" class="font-bold"></div>
<div
id="confirm-amount-usd"
class="text-xs text-muted"
></div>
</div>
<div
id="confirm-fee"
class="mb-2 text-xs text-muted hidden"
></div>
<div class="mb-3">
<div class="text-xs text-muted mb-1">Your balance</div>
<div id="confirm-balance" class="text-xs"></div>
<div
id="confirm-balance-usd"
class="text-xs text-muted"
></div>
</div>
<div id="confirm-fee" class="mb-3 hidden">
<div class="text-xs text-muted mb-1">
Estimated network fee
</div>
<div id="confirm-fee-amount" class="text-xs"></div>
<div id="confirm-fee-usd" class="text-xs text-muted"></div>
</div>
<div id="confirm-warnings" class="mb-2 hidden"></div>
<div
id="confirm-errors"