Fix UI/UX

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);
 

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');
 					}
 				});
 			}}

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 />

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'}

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(

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')} />

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>

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": {

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'
 			}
 		}
 	},