Add tooltip with pubkey

Holo-Host · Jul 9, 2024 · 2bc2a61 · 2bc2a61
1 parent b5267e9
commit 2bc2a61
Show file tree

Hide file tree

Showing 6 changed files with 102 additions and 28 deletions.
diff --git a/holo-key-manager-extension/src/lib/components/HoverTooltip.svelte b/holo-key-manager-extension/src/lib/components/HoverTooltip.svelte
@@ -0,0 +1,54 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	export let delay = 2000;
+	export let tooltipText = '';
+
+	let showTooltip = false;
+	let hovered = false;
+	let tooltipTimeout: ReturnType<typeof setTimeout> | undefined;
+	let tooltipPosition = { top: 0, left: 0 };
+
+	const handleMouseEnter = (event: MouseEvent) => {
+		const target = event.currentTarget as HTMLElement;
+		const rect = target.getBoundingClientRect();
+		tooltipPosition = { top: rect.bottom, left: rect.left };
+
+		tooltipTimeout = setTimeout(() => {
+			hovered = true;
+			showTooltip = true;
+		}, delay);
+	};
+
+	const handleMouseLeave = () => {
+		if (tooltipTimeout) {
+			clearTimeout(tooltipTimeout);
+		}
+		showTooltip = false;
+		hovered = false;
+	};
+
+	onMount(() => {
+		return () => {
+			if (tooltipTimeout) {
+				clearTimeout(tooltipTimeout);
+			}
+		};
+	});
+</script>
+
+<div
+	on:mouseenter={handleMouseEnter}
+	on:mouseleave={handleMouseLeave}
+	class="relative cursor-pointer"
+	role="tooltip"
+>
+	<slot />
+	{#if showTooltip && hovered}
+		<div
+			class={`absolute z-50 max-w-[200px] rounded-lg border border-gray-300 bg-gray-100 p-2 text-xs text-gray-700 shadow-lg top-[${tooltipPosition.top}px] left-[${tooltipPosition.left}px]`}
+		>
+			<span class="break-words">{tooltipText}</span>
+		</div>
+	{/if}
+</div>
diff --git a/holo-key-manager-extension/src/lib/components/index.ts b/holo-key-manager-extension/src/lib/components/index.ts
@@ -3,6 +3,7 @@ export { default as AppContainer } from './AppContainer.svelte';
 export { default as AppParagraph } from './AppParagraph.svelte';
 export { default as Button } from './Button.svelte';
 export { default as GoBack } from './GoBack.svelte';
+export { default as HoverTooltip } from './HoverTooltip.svelte';
 export { default as Input } from './Input.svelte';
 export { default as Loading } from './Loading.svelte';
 export { default as Login } from './Login.svelte';

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
@@ -68,6 +68,7 @@ export const createGetKeysObjectParams = (data: unknown): GetKeysObjectParams =>
 	createRequestBody<GetKeysObjectParams>(GetKeysObjectParamsSchema, data);
 
 const mapItemToNewItem = (item: GetKeysResponse): ArrayKeyItem => ({
+	newKey: item.newKey,
 	happId: item.installedAppId,
 	happName: item.appName,
 	keyName: item.metadata.keyName,

diff --git a/holo-key-manager-extension/src/lib/types/keys.ts b/holo-key-manager-extension/src/lib/types/keys.ts
@@ -41,6 +41,7 @@ export type GetKeysObjectParams = z.infer<typeof GetKeysObjectParamsSchema>;
 
 export const GetKeysResponseSchema = z.object({
 	appName: requiredString('App Name'),
+	newKey: requiredString('New Key'),
 	installedAppId: requiredString('Installed App ID'),
 	appIndex: nonNegativeNumber('App Index'),
 	metadata: z.object({
@@ -55,6 +56,7 @@ export type GetKeysResponse = z.infer<typeof GetKeysResponseSchema>;
 export const ArrayKeyItemSchema = z.object({
 	happId: z.string(),
 	happName: z.string(),
+	newKey: z.string(),
 	keyName: z.string(),
 	happLogo: z.string().optional(),
 	happUiUrl: z.string().optional()

diff --git a/holo-key-manager-extension/src/routes/list-of/keys/+page.svelte b/holo-key-manager-extension/src/routes/list-of/keys/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { derived } from 'svelte/store';
 
-	import { GoBack } from '$components';
+	import { GoBack, HoverTooltip } from '$components';
 	import { extractDetailsFromUrl } from '$helpers';
 	import { appQueries } from '$queries';
 
@@ -45,13 +45,23 @@
 	<h2 class="border-b border-grey py-4 text-xl font-semibold">Keys</h2>
 	<table class="mt-4 w-full rounded-lg border">
 		{#each $applicationKeysQuery as applicationKey, index}
-			<tr class="w-full" class:bg-gray-100={index % 2 === 0}>
-				<td class="border-b px-4 py-2 last:border-b-0">{applicationKey.keyName}</td>
-				<td class="flex justify-end border-b px-4 py-2 last:border-b-0">
-					<button class="mr-2 rounded-md px-4 py-2 text-sm text-grey" disabled> Revoke key </button>
-					<button class="rounded-md px-4 py-2 text-sm text-grey" disabled> Change key </button>
-				</td>
-			</tr>
+			<HoverTooltip tooltipText={applicationKey.newKey} delay={2000}>
+				<tr class="w-full" class:bg-gray-100={index % 2 === 0}>
+					<td class="w-full border-b px-4 py-2 last:border-b-0">
+						<span class="flex-grow">{applicationKey.keyName}</span>
+					</td>
+					<td class="border-b px-4 py-2 last:border-b-0">
+						<div class="flex space-x-2">
+							<button class="whitespace-nowrap rounded-md px-4 py-2 text-sm text-grey" disabled
+								>Revoke key</button
+							>
+							<button class="whitespace-nowrap rounded-md px-4 py-2 text-sm text-grey" disabled
+								>Change key</button
+							>
+						</div>
+					</td>
+				</tr>
+			</HoverTooltip>
 		{/each}
 	</table>
 {/if}
diff --git a/holo-key-manager-extension/src/routes/webapp-extension/select-key-to-login/+page.svelte b/holo-key-manager-extension/src/routes/webapp-extension/select-key-to-login/+page.svelte
@@ -2,7 +2,7 @@
 	import clsx from 'clsx';
 	import { derived } from 'svelte/store';
 
-	import { AppParagraph, Button, LogoCloseBar } from '$components';
+	import { AppParagraph, Button, HoverTooltip, LogoCloseBar } from '$components';
 	import { dismissWindow, extractDetailsFromUrl } from '$helpers';
 	import { appQueries } from '$queries';
 
@@ -36,25 +36,31 @@
 		/>
 		<p class="my-2 text-base">Keys</p>
 		{#if $applicationKeysQuery.length > 0}
-			<div class="max-h-44 overflow-auto">
-				{#each $applicationKeysQuery as key, index}
-					{@const selected = selectedKey === key.keyName}
-					<button
-						class={clsx('flex w-full items-center justify-between border p-2', {
-							'bg-row-background': index % 2 === 1,
-							'border-primary': selected,
-							'border-transparent': !selected
-						})}
-						on:click={() => selectKey(key.keyName)}
-					>
-						<p class="font-light">{key.keyName}</p>
-						<img
-							src={`/img/${selected ? 'selected' : 'select'}-arrow.svg`}
-							alt="Arrow"
-							class="text-primary"
-						/>
-					</button>
-				{/each}
+			<div class="relative">
+				<div class="max-h-44 overflow-y-auto">
+					{#each $applicationKeysQuery as key, index}
+						<HoverTooltip tooltipText={key.newKey} delay={2000}>
+							{@const selected = selectedKey === key.keyName}
+							<button
+								class={clsx('flex w-full items-center justify-between border p-2', {
+									'bg-row-background': index % 2 === 1,
+									'border-primary': selected,
+									'border-transparent': !selected
+								})}
+								on:click={() => selectKey(key.keyName)}
+							>
+								<p class="font-light">
+									{key.keyName}
+								</p>
+								<img
+									src={`/img/${selected ? 'selected' : 'select'}-arrow.svg`}
+									alt="Arrow"
+									class="text-primary"
+								/>
+							</button>
+						</HoverTooltip>
+					{/each}
+				</div>
 			</div>
 		{/if}
 	</div>