Contractless-Web3-Wallets/extension/src/import-wallet.html

70 lines
2.8 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Import Contractless Wallet</title>
<link rel="stylesheet" href="./import-wallet.css" />
</head>
<body>
<header class="site-header">
<div class="brand">
<img src="./assets/contractless-logo.png" alt="" />
<div><strong>Contractless</strong><span>Browser Wallet</span></div>
</div>
<span class="local-page">Local extension page</span>
</header>
<main>
<section id="import-panel" class="import-panel">
<span class="eyebrow">Restore <span id="selected-network">Contractless</span> wallet</span>
<h1>Import wallet image</h1>
<p class="intro">
Select your encrypted Contractless private-key image and enter the
encryption key originally used to create it.
</p>
<form id="import-form">
<label class="file-picker" for="wallet-image">
<span class="file-icon">+</span>
<span>
<strong id="image-file-name">Choose wallet image</strong>
<small>PNG encrypted private-key image</small>
</span>
</label>
<input id="wallet-image" class="visually-hidden" type="file" accept="image/png" required />
<label for="image-password">Encryption key</label>
<div class="input-row">
<input id="image-password" type="password" autocomplete="current-password" required />
<button id="reveal-password" type="button">Show</button>
</div>
<div class="security-note">
<strong>Processed locally by Contractless Wallet</strong>
<span>The wallet image and encryption key are not sent to the website you were visiting.</span>
</div>
<button id="import-button" class="primary" type="submit">Import wallet</button>
<p id="notice" role="alert" aria-live="polite"></p>
</form>
</section>
<section id="success-panel" class="success-panel" hidden>
<span class="success-mark" aria-hidden="true">&#10003;</span>
<span class="eyebrow">Import complete</span>
<h1>Wallet imported successfully</h1>
<p>The imported wallet is unlocked and is now the active Contractless address.</p>
<div class="address-result">
<span>Active wallet</span>
<strong id="imported-address"></strong>
</div>
<p class="completion-message">You may close this page and reopen the Contractless Wallet extension.</p>
<button id="close-page" class="primary" type="button">Close page</button>
</section>
</main>
<script type="module" src="./import-wallet.ts"></script>
</body>
</html>