new buttons

6 files changed, 93 insertions, 23 deletions

diff --git a/bun.lockb b/bun.lockb
index e6ff9ea..1836da6 100755
--- a/bun.lockb
+++ b/bun.lockb
diff --git a/package.json b/package.json
index c933ca2..e31f2fc 100644
--- a/package.json
+++ b/package.json
@@ -30,11 +30,13 @@
 		"vite": "^7.0.4"
 	},
 	"dependencies": {
+		"@iconify/iconify": "^3.1.1",
 		"@scure/base": "^1.2.6",
 		"@scure/bip32": "^1.7.0",
 		"@scure/bip39": "^1.6.0",
 		"@scure/btc-signer": "^1.8.1",
 		"@sveltejs/adapter-static": "^3.0.8",
-		"daisyui": "^5.0.46"
+		"daisyui": "^5.0.46",
+		"iconify-icon": "^3.0.0"
 	}
 }
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}
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
new file mode 100644
index 0000000..8bc2b2d
--- /dev/null
+++ b/tailwind.config.cjs
@@ -0,0 +1,25 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+	content: ["./src/**/*.{html,js,svelte}"],
+	plugins: [require("daisyui")],
+	daisyui: {
+		themes: [
+			{
+				light: {
+					...require("daisyui/src/theming/themes").lofi,
+					gradient: "#C3CFE2",
+          error: "#b91c1c",
+				},
+			},
+		], // false: only light + dark | true: all themes | array: specific themes like this ["light", "dark", "cupcake"]
+		darkTheme: "dark", // name of one of the included themes for dark mode
+    darkMode: 'class',
+		base: true, // applies background color and foreground color for root element by default
+		styled: true, // include daisyUI colors and design decisions for all components
+		utils: true, // adds responsive and modifier utility classes
+		prefix: "", // prefix for daisyUI classnames (components, modifiers and responsive class names. Not colors)
+		logs: false, // Shows info about daisyUI version and used config in the console when building your CSS
+		themeRoot: ":root", // The element that receives theme color CSS variables
+	},
+	safelist: ["w-16", "h-16", "w-20", "h-20", "w-24", "h-24"],
+};