sneak/AutistMask
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Add dedicated wait/success/error screens for transaction status

Browse Source 
After broadcast, the user is taken to a full-screen wait view showing
the amount, recipient, tx hash (copyable + etherscan link), and a
count-up timer. The view polls every 10 seconds for confirmation.

On confirmation: navigates to success screen showing block number,
tx hash, and a Done button that returns to the address view.

On 60-second timeout or error: navigates to error screen with the
failure message, tx hash (if available), and Done button.

Replaces the previous inline confirm-status div that was crammed
onto the confirmation page.
This commit is contained in:
Jeffrey Paul
2026-02-27 12:06:32 +07:00
parent e58f113cda
commit d229000258
5 changed files with 238 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/popup/index.html
View File

@@ -494,10 +494,80 @@
>
Send
</button>
<div
id="confirm-status"
class="mt-2 border border-border p-1 hidden"
></div>
</div>
<!-- ============ WAIT FOR TX CONFIRMATION ============ -->
<div id="view-wait-tx" class="view hidden">
<h2 class="font-bold mb-2">Transaction Broadcast</h2>
<div class="mb-3">
<div class="text-xs text-muted mb-1">Amount</div>
<div id="wait-tx-summary" class="font-bold"></div>
</div>
<div class="mb-3">
<div class="text-xs text-muted mb-1">To</div>
<div id="wait-tx-to" class="text-xs break-all"></div>
</div>
<div class="mb-3">
<div class="text-xs text-muted mb-1">Transaction hash</div>
<div id="wait-tx-hash" class="text-xs break-all"></div>
</div>
<div id="wait-tx-status" class="text-xs text-muted"></div>
</div>
<!-- ============ TX SUCCESS ============ -->
<div id="view-success-tx" class="view hidden">
<h2 class="font-bold mb-2">Transaction Confirmed</h2>
<div class="mb-3">
<div class="text-xs text-muted mb-1">Amount</div>
<div id="success-tx-summary" class="font-bold"></div>
</div>
<div class="mb-3">
<div class="text-xs text-muted mb-1">To</div>
<div id="success-tx-to" class="text-xs break-all"></div>
</div>
<div class="mb-3">
<div class="text-xs text-muted mb-1">Block</div>
<div id="success-tx-block" class="text-xs"></div>
</div>
<div class="mb-3">
<div class="text-xs text-muted mb-1">Transaction hash</div>
<div id="success-tx-hash" class="text-xs break-all"></div>
</div>
<button
id="btn-success-tx-done"
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
>
Done
</button>
</div>
<!-- ============ TX ERROR ============ -->
<div id="view-error-tx" class="view hidden">
<h2 class="font-bold mb-2">Transaction Failed</h2>
<div class="mb-3">
<div class="text-xs text-muted mb-1">Amount</div>
<div id="error-tx-summary" class="font-bold"></div>
</div>
<div class="mb-3">
<div class="text-xs text-muted mb-1">To</div>
<div id="error-tx-to" class="text-xs break-all"></div>
</div>
<div class="mb-3">
<div
id="error-tx-message"
class="text-xs border border-border border-dashed p-2"
></div>
</div>
<div id="error-tx-hash-section" class="mb-3 hidden">
<div class="text-xs text-muted mb-1">Transaction hash</div>
<div id="error-tx-hash" class="text-xs break-all"></div>
</div>
<button
id="btn-error-tx-done"
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
>
Done
</button>
</div>
<!-- ============ PASSWORD MODAL ============ -->