Add download page

package.json

@@ -34,6 +34,7 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"@tanstack/svelte-query": "^5.4.3",
 		"clsx": "^2.0.0",
 		"file-saver": "^2.0.5",
 		"hcSeedBundle": "git+https://github.com/mrruby/hcSeedBundle",

src/lib/helpers/index.ts

@@ -1,2 +1 @@
 export * from './navigation';
-export * from './generate-keys';

src/lib/queries/app-queries.ts

@@ -0,0 +1,20 @@
+import { createMutation, useQueryClient, createQuery } from '@tanstack/svelte-query';
+import { generateKeys } from '$lib/services';
+import type { GeneratedKeys } from '$types';
+import { queryKey } from './query-keys';
+
+export function useGeneratedKeys() {
+	const queryClient = useQueryClient();
+
+	const generateKeysMutation = createMutation({
+		mutationFn: (passphrase: string) => generateKeys(passphrase),
+		onSuccess: (data) => {
+			queryClient.setQueryData([queryKey], data);
+		}
+	});
+
+	const generatedKeysQuery = createQuery<GeneratedKeys>({
+		queryKey: [queryKey]
+	});
+	return { generateKeysMutation, generatedKeysQuery };
+}

src/lib/queries/index.ts

@@ -0,0 +1,2 @@
+export * from './app-queries';
+export * from './query-keys';

src/lib/queries/query-keys.ts

@@ -0,0 +1 @@
+export const queryKey = 'generatedKeys';

src/lib/helpers/generate-keys.ts → src/lib/services/generate-keys.ts

@@ -1,7 +1,7 @@
 // @ts-nocheck
 import * as hcSeedBundle from 'hcSeedBundle';
 
-export async function generateKeys(passphrase: string) {
+export async function generateKeys(passphrase: string): Promise<GeneratedKeys> {
 	await hcSeedBundle.seedBundleReady;
 
 	const master = hcSeedBundle.UnlockedSeedBundle.newRandom({

src/lib/services/index.ts

@@ -0,0 +1 @@
+export * from './generate-keys';

src/lib/types/password.ts

@@ -1 +1,7 @@
 export type SetPassphrase = 'set' | 'confirm';
+
+export type GeneratedKeys = {
+	master: Uint8Array;
+	device: Uint8Array;
+	revocation: Uint8Array;
+};

src/routes/+layout.svelte

@@ -1,5 +1,11 @@
 <script>
 	import '../app.css';
+
+	import { QueryClient, QueryClientProvider } from '@tanstack/svelte-query';
+
+	const queryClient = new QueryClient();
 </script>
 
-<slot />
+<QueryClientProvider client={queryClient}>
+	<slot />
+</QueryClientProvider>

src/routes/setup/+layout.svelte

@@ -3,17 +3,19 @@
 	import { setContext } from 'svelte';
 	import { passphrase, passphraseStore } from '$stores';
 
-	function dismissExtensionWindow() {
-		window.history.back();
-	}
+	const dismissExtensionWindow = () => window.history.back();
 
 	setContext(passphrase, passphraseStore);
+
+	$: allowGoBack = !(
+		$page.url.pathname.includes('start') || $page.url.pathname.includes('download')
+	);
 </script>
 
 <div
 	class="flex flex-col items-center mt-20 w-[576px] border border-light-gray rounded-xl mx-auto py-8"
 >
-	{#if !$page.url.pathname.includes('start')}
+	{#if allowGoBack}
 		<button class="self-start ml-6 mb-4 flex items-center" on:click={dismissExtensionWindow}>
 			<img src="/img/arrow-left.svg" alt="Arrow" />
 			<span class="ml-2 text-base">Back</span></button

src/routes/setup/download/+page.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import { getContext, onMount } from 'svelte';
+	import { passphrase } from '$stores';
+	import JSZip from 'jszip';
+	import fileSaver from 'file-saver';
+	import type { Writable } from 'svelte/store';
+	import { goto } from '$app/navigation';
+	import Button from '$components/Button.svelte';
+	import { useGeneratedKeys } from '$queries';
+	import Title from '$components/Title.svelte';
+	import AppParagraph from '$components/AppParagraph.svelte';
+
+	const passphraseStore = getContext<Writable<string>>(passphrase);
+
+	const { generatedKeysQuery } = useGeneratedKeys();
+
+	onMount(() => {
+		if ($passphraseStore === '') {
+			goto('/setup/start');
+		}
+	});
+
+	async function download(): Promise<void> {
+		const { saveAs } = fileSaver;
+		const files = [
+			{ name: 'master.txt', data: new TextDecoder().decode($generatedKeysQuery.data?.master) },
+			{ name: 'device.txt', data: new TextDecoder().decode($generatedKeysQuery.data?.device) },
+			{
+				name: 'revocation.txt',
+				data: new TextDecoder().decode($generatedKeysQuery.data?.revocation)
+			}
+		];
+		const zip = new JSZip();
+		files.forEach((file) => zip.file(file.name, file.data));
+		const content = await zip.generateAsync({ type: 'blob' });
+
+		saveAs(content, 'keys.zip');
+	}
+</script>
+
+<img src="/img/check.svg" alt="check" class="w-12 my-4" />
+
+<Title>Save Seed Files and Keys</Title>
+<AppParagraph
+	extraProps="mx-auto text-center max-w-md"
+	text="All done, please save your files. Remember to back them up an external drive you store in a secure location."
+/>
+
+<img src="/img/padlock.svg" alt="Padlock" class="my-6" />
+<Button label="Save" onClick={download} />

src/routes/setup/generate-keys/+page.svelte

@@ -1,49 +1,44 @@
 <script lang="ts">
 	import { getContext, onMount } from 'svelte';
 	import { passphrase } from '$stores';
-	import JSZip from 'jszip';
-	import fileSaver from 'file-saver';
 	import type { Writable } from 'svelte/store';
 	import { goto } from '$app/navigation';
 	import AppParagraph from '$components/AppParagraph.svelte';
 	import Title from '$components/Title.svelte';
 	import Button from '$components/Button.svelte';
-	import { generateKeys } from '$helpers/generate-keys';
+	import { useGeneratedKeys } from '$queries';
 
 	const passphraseStore = getContext<Writable<string>>(passphrase);
 
+	const { generateKeysMutation } = useGeneratedKeys();
+
 	onMount(() => {
 		if ($passphraseStore === '') {
 			goto('/setup/start');
 		}
 	});
 
-	async function download(): Promise<void> {
-		const { saveAs } = fileSaver;
-		const { master, device, revocation } = await generateKeys($passphraseStore);
-		const files = [
-			{ name: 'master.txt', data: new TextDecoder().decode(master) },
-			{ name: 'device.txt', data: new TextDecoder().decode(device) },
-			{ name: 'revocation.txt', data: new TextDecoder().decode(revocation) }
-		];
-		const zip = new JSZip();
-		files.forEach((file) => zip.file(file.name, file.data));
-		const content = await zip.generateAsync({ type: 'blob' });
-
-		saveAs(content, 'keys.zip');
+	function generate() {
+		$generateKeysMutation.mutate($passphraseStore, {
+			onSuccess: () => goto('/setup/download')
+		});
 	}
 </script>
 
-<img src="/img/download.svg" alt="Download" class="w-12 my-4" />
-<Title>Generate Seed & Key files</Title>
-<AppParagraph
-	extraProps="mx-auto text-center max-w-md"
-	text="Click the button below to generate and save your seed and key files. Please save this on your external hard drive or USB drive."
-/>
-<p class="text-secondary text-base font-bold text-center mt-4">Context:</p>
-<AppParagraph
-	extraProps="mx-auto text-center"
-	text="Remember, you will need BOTH the seed and your passphrase to restore any keys that are created from this seed. Remember to store your drives in save places like a safe, you can also save copies of this on digital drives"
-/>
-<img src="/img/padlock.svg" alt="Padlock" class="my-6" />
-<Button label="Generate" onClick={download} />
+{#if $generateKeysMutation.isPending}
+	<span>Loading</span>
+{:else}
+	<img src="/img/download.svg" alt="Download" class="w-12 my-4" />
+	<Title>Generate Seed & Key files</Title>
+	<AppParagraph
+		extraProps="mx-auto text-center max-w-md"
+		text="Click the button below to generate and save your seed and key files. Please save this on your external hard drive or USB drive."
+	/>
+	<p class="text-secondary text-base font-bold text-center mt-4">Context:</p>
+	<AppParagraph
+		extraProps="mx-auto text-center"
+		text="Remember, you will need BOTH the seed and your passphrase to restore any keys that are created from this seed. Remember to store your drives in save places like a safe, you can also save copies of this on digital drives"
+	/>
+	<img src="/img/padlock.svg" alt="Padlock" class="my-6" />
+	<Button label="Generate" onClick={generate} />
+{/if}

svelte.config.js

@@ -14,7 +14,9 @@ const config = {
 			$components: path.resolve('./src/lib/components'),
 			$helpers: path.resolve('./src/lib/helpers'),
 			$stores: path.resolve('./src/lib/stores'),
-			$types: path.resolve('./src/lib/types')
+			$types: path.resolve('./src/lib/types'),
+			$queries: path.resolve('./src/lib/queries'),
+			$services: path.resolve('./src/lib/services')
 		}
 	}
 };