From e18bab5f46e8d1054c544d9719f252d9a61b42e5 Mon Sep 17 00:00:00 2001
From: Dawid Urbas <dawid@getbold.agency>
Date: Wed, 3 Jul 2024 17:22:50 +0200
Subject: [PATCH] Fix UI/UX

---
 .../src/lib/services/key-manager-store.ts     |   2 -
 .../routes/extension-password/+page.svelte    |   2 +-
 .../src/routes/setup-pass/+layout.svelte      |   4 +-
 .../setup-pass/enter-passphrase/+page.svelte  |   6 +-
 .../routes/setup-pass/import-key/+page.svelte | 135 +++++++++---------
 .../routes/setup-pass/important/+page.svelte  |  27 ++++
 .../webapp-extension/setup/+page.svelte       |   9 +-
 .../static/img/exclamation.svg                |   5 +
 .../static/img/noun.svg                       |  14 --
 .../static/img/trash.svg                      |   3 +
 .../static/manifest.json                      |   2 +-
 holo-key-manager-extension/tailwind.config.js |   3 +-
 12 files changed, 116 insertions(+), 96 deletions(-)
 create mode 100644 holo-key-manager-extension/src/routes/setup-pass/important/+page.svelte
 create mode 100644 holo-key-manager-extension/static/img/exclamation.svg
 delete mode 100644 holo-key-manager-extension/static/img/noun.svg
 create mode 100644 holo-key-manager-extension/static/img/trash.svg

diff --git a/holo-key-manager-extension/src/lib/services/key-manager-store.ts b/holo-key-manager-extension/src/lib/services/key-manager-store.ts
index 164ee8d..2751f74 100644
--- a/holo-key-manager-extension/src/lib/services/key-manager-store.ts
+++ b/holo-key-manager-extension/src/lib/services/key-manager-store.ts
@@ -98,8 +98,6 @@ export const getKeys = async (params: GetKeysObjectParams, signature: string) =>
 			'Failed to fetch data object'
 		);
 
-		console.log('response', response);
-
 		const json = await response.json();
 		const data = validateData<GetKeysResponse[]>(GetKeysResponseSchema.array(), json);
 
diff --git a/holo-key-manager-extension/src/routes/extension-password/+page.svelte b/holo-key-manager-extension/src/routes/extension-password/+page.svelte
index fabf4f9..9aaf948 100644
--- a/holo-key-manager-extension/src/routes/extension-password/+page.svelte
+++ b/holo-key-manager-extension/src/routes/extension-password/+page.svelte
@@ -62,7 +62,7 @@
 
 				return $createPassword.mutate($passwordStore, {
 					onSuccess: () => {
-						goto('/setup-pass/enter-passphrase');
+						goto('/setup-pass/important');
 					}
 				});
 			}}
diff --git a/holo-key-manager-extension/src/routes/setup-pass/+layout.svelte b/holo-key-manager-extension/src/routes/setup-pass/+layout.svelte
index 91608a3..e304e39 100644
--- a/holo-key-manager-extension/src/routes/setup-pass/+layout.svelte
+++ b/holo-key-manager-extension/src/routes/setup-pass/+layout.svelte
@@ -8,10 +8,12 @@
 	$: if ($setupDeviceKeyQuery.data) {
 		dismissWindow();
 	}
+	const shouldShowGoBack = (pathname: string): boolean =>
+		!pathname.includes('start') && !pathname.includes('important');
 </script>
 
 <AppContainer>
-	{#if !$page.url.pathname.includes('start')}
+	{#if shouldShowGoBack($page.url.pathname)}
 		<GoBack />
 	{/if}
 	<slot />
diff --git a/holo-key-manager-extension/src/routes/setup-pass/enter-passphrase/+page.svelte b/holo-key-manager-extension/src/routes/setup-pass/enter-passphrase/+page.svelte
index 7bc3e6b..8f59e3d 100644
--- a/holo-key-manager-extension/src/routes/setup-pass/enter-passphrase/+page.svelte
+++ b/holo-key-manager-extension/src/routes/setup-pass/enter-passphrase/+page.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
+
 	import { goto } from '$app/navigation';
 	import type { SetSecret } from '$lib/types';
 	import { appQueries } from '$queries';
@@ -13,11 +15,11 @@
 
 	const { setupPasswordQuery } = appQueries();
 
-	$: {
+	onMount(() => {
 		if ($setupPasswordQuery.data === false) {
 			goto('start');
 		}
-	}
+	});
 </script>
 
 {#if passphraseState === 'set'}
diff --git a/holo-key-manager-extension/src/routes/setup-pass/import-key/+page.svelte b/holo-key-manager-extension/src/routes/setup-pass/import-key/+page.svelte
index 8052f9f..3f927eb 100644
--- a/holo-key-manager-extension/src/routes/setup-pass/import-key/+page.svelte
+++ b/holo-key-manager-extension/src/routes/setup-pass/import-key/+page.svelte
@@ -41,84 +41,79 @@
 	extraProps="my-4 max-w-xs text-center"
 	text="Please import your device seed file below to recover your Key Manager"
 />
-<div class="w-full p-6 px-16">
-	<Dropzone
-		containerClasses={clsx('flex flex-col items-center justify-center rounded-lg border p-4', {
-			'alert-background border-alert': $recoverDeviceKeyMutation.error,
-			'border-primary bg-white ': fileContent && !$recoverDeviceKeyMutation.error,
-			'border-purple bg-primary-background px-0 py-12': !fileContent
-		})}
-		inputElement={false}
-		on:drop={handleFilesSelect}
-		accept=".txt"
-		multiple={false}
-		disableDefaultStyles={true}
-	>
-		{#if fileContent}
-			<div class=" flex w-full items-center justify-between">
-				<p
-					class={clsx('font-semibold', {
-						'text-base': !$recoverDeviceKeyMutation.error,
-						'text-alert': $recoverDeviceKeyMutation.error
-					})}
+{#if $recoverDeviceKeyMutation.error}
+	<div class="w-full p-6 px-16">
+		<div
+			class="flex w-full items-start justify-between rounded-lg border border-alert bg-alert-background p-4"
+		>
+			<div class="flex flex-col">
+				<p class="font-semibold text-alert">Import failed, please try again</p>
+				<p class="text-alert">{fileName}</p>
+				<button
+					class="self-start font-semibold text-alert underline"
+					on:click={() => {
+						passphrase = '';
+						fileContent = '';
+						fileName = '';
+						$recoverDeviceKeyMutation.reset();
+					}}
 				>
-					{fileName}
-				</p>
-				{#if !$recoverDeviceKeyMutation.error}
-					<img src="/img/checkbox.svg" alt="Checkbox" />
-				{/if}
-			</div>
-			<div class="mt-2 flex w-full items-center justify-between">
-				<div class="h-2 w-full rounded bg-primary-background">
-					<div class="h-2 w-full rounded bg-primary" />
-				</div>
-				<p class="ml-2 text-base font-semibold">100%</p>
+					Try again
+				</button>
 			</div>
-		{:else}
-			<img src="/img/cloud.svg" alt="Cloud" />
-			<div class="text-center">
-				<p class="mt-2 text-base font-light text-secondary">
-					<span class="font-bold text-primary">Click to import</span>
-					or drag and drop your seed file
-				</p>
-			</div>
-		{/if}
-	</Dropzone>
-	<div class="mt-4 flex w-full flex-col">
-		<label
-			for="passphrase"
-			class={clsx('text-s mb-1 font-bold', {
-				'text-secondary': !$recoverDeviceKeyMutation.error,
-				'text-alert': $recoverDeviceKeyMutation.error
-			})}>Passphrase</label
-		>
-		<input
-			bind:value={passphrase}
-			type="passphrase"
-			placeholder="Enter passphrase"
-			class={clsx('rounded border p-2 outline-none focus:outline-none', {
-				'border-black': !$recoverDeviceKeyMutation.error,
-				'border-alert': $recoverDeviceKeyMutation.error
+			<img src="/img/trash.svg" alt="Cloud" />
+		</div>
+	</div>
+{:else}
+	<div class="w-full p-6 px-16">
+		<Dropzone
+			containerClasses={clsx('flex flex-col items-center justify-center rounded-lg border p-4', {
+				'border-primary bg-white ': fileContent,
+				'border-purple bg-primary-background px-0 py-12': !fileContent
 			})}
-			on:input={() => {
-				if ($recoverDeviceKeyMutation.error) {
-					$recoverDeviceKeyMutation.reset();
-				}
-			}}
-		/>
-		{#if $recoverDeviceKeyMutation.error}
-			<span class="mt-2 self-end text-base text-alert">
-				Oops! We couldn't import your device seed.
-			</span>
-			<span class="mt-2 self-end text-base text-alert"> Please try again. </span>
-		{/if}
+			inputElement={false}
+			on:drop={handleFilesSelect}
+			accept=".txt"
+			multiple={false}
+			disableDefaultStyles={true}
+		>
+			{#if fileContent}
+				<div class=" flex w-full items-center justify-between">
+					<p class="text-base font-semibold">{fileName}</p>
+					<img src="/img/checkbox.svg" alt="Checkbox" />
+				</div>
+				<div class="mt-2 flex w-full items-center justify-between">
+					<div class="h-2 w-full rounded bg-primary-background">
+						<div class="h-2 w-full rounded bg-primary" />
+					</div>
+					<p class="ml-2 text-base font-semibold">100%</p>
+				</div>
+			{:else}
+				<img src="/img/cloud.svg" alt="Cloud" />
+				<div class="text-center">
+					<p class="mt-2 text-base font-light text-secondary">
+						<span class="font-bold text-primary">Click to import</span>
+						or drag and drop your seed file
+					</p>
+				</div>
+			{/if}
+		</Dropzone>
+		<div class="mt-4 flex w-full flex-col">
+			<label for="passphrase" class="text-s mb-1 font-bold text-secondary">Passphrase</label>
+			<input
+				bind:value={passphrase}
+				type="passphrase"
+				placeholder="Enter passphrase"
+				class="rounded border border-black p-2 outline-none focus:outline-none"
+			/>
+		</div>
 	</div>
-</div>
+{/if}
 
 <div class="grid w-full grid-cols-2 gap-5 p-6">
 	<Button label="Cancel" onClick={dismissWindow} color="secondary" />
 	<Button
-		disabled={isDisabled}
+		disabled={isDisabled || $recoverDeviceKeyMutation.isError}
 		label="Submit"
 		onClick={() =>
 			$recoverDeviceKeyMutation.mutate(
diff --git a/holo-key-manager-extension/src/routes/setup-pass/important/+page.svelte b/holo-key-manager-extension/src/routes/setup-pass/important/+page.svelte
new file mode 100644
index 0000000..10cbe43
--- /dev/null
+++ b/holo-key-manager-extension/src/routes/setup-pass/important/+page.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	import { goto } from '$app/navigation';
+	import { Button, Title } from '$components';
+	import { appQueries } from '$queries';
+
+	const { setupPasswordQuery } = appQueries();
+
+	onMount(() => {
+		if ($setupPasswordQuery.data === false) {
+			goto('start');
+		}
+	});
+</script>
+
+<img class="mb-12" src="/img/exclamation.svg" alt="Exclamation" />
+<Title>Important!</Title>
+<p class="mb-8 mt-4 max-w-md text-center font-light text-secondary">
+	The next two steps are where you create and save your master seed and key files. It is super
+	important for you to
+	<span class="font-semibold"
+		>save the downloaded files and the passphrase you create here somewhere safe.
+	</span>
+	It will be used in the future if you need to recover your Holo Key Manager account
+</p>
+<Button label="I understand" onClick={() => goto('/setup-pass/enter-passphrase')} />
diff --git a/holo-key-manager-extension/src/routes/webapp-extension/setup/+page.svelte b/holo-key-manager-extension/src/routes/webapp-extension/setup/+page.svelte
index c20eae9..ec73668 100644
--- a/holo-key-manager-extension/src/routes/webapp-extension/setup/+page.svelte
+++ b/holo-key-manager-extension/src/routes/webapp-extension/setup/+page.svelte
@@ -14,12 +14,15 @@
 	};
 
 	onMount(() => {
+		$applicationsListQuery.refetch();
 		if ($extractDetailsFromUrl.action === SIGN_IN) {
 			const unsubscribe = applicationsListQuery.subscribe(async (data) => {
 				if (data.data === undefined) return;
 
 				if (data.data.some((app) => app.happId === $extractDetailsFromUrl.happId)) {
-					return goto(`select-key-to-login?${new URLSearchParams(window.location.search)}`);
+					goto(`select-key-to-login?${new URLSearchParams(window.location.search)}`);
+					unsubscribe?.();
+					return;
 				}
 
 				await sendMessageAndHandleResponse(
@@ -29,9 +32,9 @@
 					},
 					$extractDetailsFromUrl.messageId
 				);
-				return dismissWindow();
+				dismissWindow();
+				unsubscribe?.();
 			});
-			return () => unsubscribe?.();
 		}
 	});
 </script>
diff --git a/holo-key-manager-extension/static/img/exclamation.svg b/holo-key-manager-extension/static/img/exclamation.svg
new file mode 100644
index 0000000..c0fe659
--- /dev/null
+++ b/holo-key-manager-extension/static/img/exclamation.svg
@@ -0,0 +1,5 @@
+<svg width="66" height="66" viewBox="0 0 66 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M32.7717 63.2115C49.4642 63.2115 63.0437 49.632 63.0437 32.9395C63.0437 16.247 49.4642 2.66479 32.7717 2.66479C16.0792 2.66479 2.49697 16.2443 2.49697 32.9395C2.49972 49.632 16.0792 63.2115 32.7717 63.2115ZM32.7717 8.6818C46.1505 8.6818 57.0267 19.5635 57.0267 32.9395C57.0267 46.3128 46.1505 57.1945 32.7717 57.1945C19.3957 57.1945 8.51397 46.3128 8.51397 32.9395C8.51672 19.5635 19.3985 8.6818 32.7717 8.6818Z" fill="#00838D"/>
+<path d="M32.7717 39.3965C34.4327 39.3965 35.7802 38.0518 35.7802 36.3853V20.3418C35.7802 18.6808 34.43 17.3333 32.7717 17.3333C31.1135 17.3333 29.7632 18.6808 29.7632 20.3418V36.3853C29.7632 38.0518 31.1135 39.3965 32.7717 39.3965Z" fill="#00838D"/>
+<path d="M32.7717 48.5429C34.4327 48.5429 35.7802 47.1981 35.7802 45.5344V45.0339C35.7802 43.3729 34.43 42.0254 32.7717 42.0254C31.1135 42.0254 29.7632 43.3701 29.7632 45.0339V45.5344C29.7632 47.1981 31.1135 48.5429 32.7717 48.5429Z" fill="#00838D"/>
+</svg>
diff --git a/holo-key-manager-extension/static/img/noun.svg b/holo-key-manager-extension/static/img/noun.svg
deleted file mode 100644
index cdc9b95..0000000
--- a/holo-key-manager-extension/static/img/noun.svg
+++ /dev/null
@@ -1,14 +0,0 @@
-<svg width="66" height="66" viewBox="0 0 66 66" fill="none" xmlns="http://www.w3.org/2000/svg">
-	<path
-		d="M32.7717 63.2115C49.4642 63.2115 63.0437 49.632 63.0437 32.9395C63.0437 16.247 49.4642 2.66479 32.7717 2.66479C16.0792 2.66479 2.49695 16.2443 2.49695 32.9395C2.4997 49.632 16.0792 63.2115 32.7717 63.2115ZM32.7717 8.6818C46.1504 8.6818 57.0267 19.5635 57.0267 32.9395C57.0267 46.3128 46.1504 57.1945 32.7717 57.1945C19.3957 57.1945 8.51395 46.3128 8.51395 32.9395C8.5167 19.5635 19.3984 8.6818 32.7717 8.6818Z"
-		fill="#D9001A"
-	/>
-	<path
-		d="M32.7717 39.3965C34.4327 39.3965 35.7802 38.0518 35.7802 36.3853V20.3418C35.7802 18.6808 34.4299 17.3333 32.7717 17.3333C31.1134 17.3333 29.7632 18.6808 29.7632 20.3418V36.3853C29.7632 38.0518 31.1134 39.3965 32.7717 39.3965Z"
-		fill="#D9001A"
-	/>
-	<path
-		d="M32.7717 48.5429C34.4327 48.5429 35.7802 47.1981 35.7802 45.5344V45.0339C35.7802 43.3729 34.4299 42.0254 32.7717 42.0254C31.1134 42.0254 29.7632 43.3701 29.7632 45.0339V45.5344C29.7632 47.1981 31.1134 48.5429 32.7717 48.5429Z"
-		fill="#D9001A"
-	/>
-</svg>
diff --git a/holo-key-manager-extension/static/img/trash.svg b/holo-key-manager-extension/static/img/trash.svg
new file mode 100644
index 0000000..59b4e88
--- /dev/null
+++ b/holo-key-manager-extension/static/img/trash.svg
@@ -0,0 +1,3 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.5 13H12.1667M12.1667 13H25.5M12.1667 13V24.6667C12.1667 25.1087 12.3423 25.5326 12.6548 25.8452C12.9674 26.1578 13.3913 26.3334 13.8333 26.3334H22.1667C22.6087 26.3334 23.0326 26.1578 23.3452 25.8452C23.6577 25.5326 23.8333 25.1087 23.8333 24.6667V13H12.1667ZM14.6667 13V11.3334C14.6667 10.8913 14.8423 10.4674 15.1548 10.1548C15.4674 9.84228 15.8913 9.66669 16.3333 9.66669H19.6667C20.1087 9.66669 20.5326 9.84228 20.8452 10.1548C21.1577 10.4674 21.3333 10.8913 21.3333 11.3334V13M16.3333 17.1667V22.1667M19.6667 17.1667V22.1667" stroke="#B42318" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/holo-key-manager-extension/static/manifest.json b/holo-key-manager-extension/static/manifest.json
index 5fed838..ea38234 100644
--- a/holo-key-manager-extension/static/manifest.json
+++ b/holo-key-manager-extension/static/manifest.json
@@ -1,7 +1,7 @@
 {
 	"name": "Holo key manager",
 	"description": "A browser extension to manage holo keys",
-	"version": "0.0.63",
+	"version": "0.0.64",
 	"key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAiAtKvbHNTN3O2BLRZH7RkLczaMLenSeZu+YP+KomPQPZ18nt4DY9boIN/+GWts7gCzEeQq59l8edGdF2P7xAbsRxYR88+zFEbxMtIyfyqJZIlzXwnvPJkwGu/S6arNtX48K7q1+xnJEE7VyeYSj6/i2LR+LmPigCzY9JCP7+SmWVeYbdm3kZmReK0ecfh15RXSNjZpXJUgrbea/RVxweggYKnmhhOUBmuJSCLoWTXIuJPBMwGQK1O2GKBqHOq94bPVSF7j+4WzSpPan70ZZJX/reFsOFE/idfFN6wbizjR1Ne50Po03kudEmfQgoqUhVpd0wP8A3YbqE7ODdZcCPPwIDAQAB",
 	"manifest_version": 3,
 	"action": {
diff --git a/holo-key-manager-extension/tailwind.config.js b/holo-key-manager-extension/tailwind.config.js
index 1238598..4f17005 100644
--- a/holo-key-manager-extension/tailwind.config.js
+++ b/holo-key-manager-extension/tailwind.config.js
@@ -10,13 +10,12 @@ export default {
 				primary: '#00838D',
 				'primary-disabled': '#B2DADD',
 				secondary: '#606C8B',
-				quaternary: '#313C59',
 				grey: '#D2D0DD',
 				'light-gray': '#262A3333',
 				'primary-background': '#FBFAFF',
 				'row-background': '#F9F9FB',
 				alert: '#D92D20',
-				'alert-background': '#FDA29B'
+				'alert-background': '#FFFBFA'
 			}
 		}
 	},