new buttons

3 files changed, 65 insertions, 22 deletions

diff --git a/src/lib/Copy.svelte b/src/lib/Copy.svelte
new file mode 100644
index 0000000..0d8518e
--- /dev/null
+++ b/src/lib/Copy.svelte
@@ -0,0 +1,15 @@
+<script>
+	let { text = $bindable() } = $props();
+	let justCopied = $state();
+	const copy = () => {
+		navigator.clipboard.writeText(text);
+		justCopied = true;
+		setTimeout(() => (justCopied = false), 1000);
+	};
+</script>
+
+<div data-tip="Copied!" class:tooltip={justCopied}>
+	<button type="button" class="btn" onclick={copy}>
+		<iconify-icon icon="ph:copy-bold" width={32} />
+	</button>
+</div>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index ceb238b..f9049c9 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -4,15 +4,16 @@
 	let { children } = $props();
 </script>
 
-	<div
-		class="container mx-auto max-w-3xl space-y-5 rounded-2xl bg-gray-100 p-8 text-xl shadow-lg"
-	>
-		<div class="flex items-center justify-center gap-2">
-			<img src="/bitcoin.svg" />
-			<div>
-				<a href="/" class="mx-auto text-2xl">Bitcoin Wallet</a>
-			</div>
+<div
+	class="container mx-auto max-w-3xl space-y-5 rounded-2xl bg-gray-100 p-8 text-xl shadow-lg"
+	data-theme="light"
+>
+	<div class="flex items-center justify-center gap-2">
+		<img src="/bitcoin.svg" />
+		<div>
+			<a href="/" class="mx-auto text-2xl">Bitcoin Wallet</a>
 		</div>
-
-		{@render children()}
 	</div>
+
+	{@render children()}
+</div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index d2d4a97..1654c7b 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -7,9 +7,18 @@
 	import { focus } from '$lib';
 	import { generateMnemonic, mnemonicToSeedSync } from '@scure/bip39';
 	import { wordlist } from '@scure/bip39/wordlists/english';
+	import Copy from '$lib/Copy.svelte';
+
+	import 'iconify-icon';
 
 	import { getAddress, p2wpkh } from '@scure/btc-signer/payment';
 
+	const pastePassword = async () => {
+		password = await navigator.clipboard.readText();
+	};
+
+	const toggleReveal = () => (reveal = !reveal);
+
 	let NET = 'bitcoin';
 	const versions = {
 		bitcoin: {
@@ -52,6 +61,7 @@
 	let password = $state();
 	let mnemonic = $state();
 	let withdrawing = $state();
+	let reveal = $state(false);
 
 	let balance = $state();
 	let pending = $state();
@@ -217,23 +227,40 @@
 	<div class="flex items-center gap-2">
 		<textarea use:focus class="textarea grow" placeholder="Seed phrase" bind:value={mnemonic}
 		></textarea>
-		<button type="button" class="btn flex gap-1" onclick={generate}>
-			<img src="/random.svg" class="w-8" />
-			<div>Generate</div>
+		<button type="button" class="btn" onclick={generate}>
+			<iconify-icon icon="ph:dice-five-bold" width={32} />
 		</button>
 	</div>
 
-	<input class="input w-full" placeholder="Passphrase" bind:value={password} />
+	<div class="flex">
+		{#if reveal}
+			<input class="input w-full" placeholder="Passphrase" bind:value={password} />
+		{:else}
+			<input type="password" class="input w-full" placeholder="Passphrase" bind:value={password} />
+		{/if}
 
-	{#if address}
-		<div class="flex items-center gap-2">
-			<div>
-				Address: {address}
-			</div>
+		<button type="button" class="btn" onclick={toggleReveal}>
+			<iconify-icon icon={reveal ? 'ph:eye-bold' : 'ph:eye-slash-bold'} width={32} />
+		</button>
 
-			<button type="submit" class="btn ml-auto"> Check balance </button>
-		</div>
-	{/if}
+		<Copy bind:text={password} />
+
+		<button type="button" class="btn" onclick={pastePassword}>
+			<iconify-icon icon="ph:clipboard-text-bold" width={32} />
+		</button>
+	</div>
+
+	<div>
+		{#if address}
+			<div class="flex items-center gap-2 break-all">
+				<div>
+					Address: {address}
+				</div>
+
+				<button type="submit" class="btn ml-auto"> Check balance </button>
+			</div>
+		{/if}
+	</div>
 </form>
 
 {#if loading}