feat(frontend): signer support

package.json

@@ -50,10 +50,11 @@
 		"@dfinity/candid": "^2.1.1",
 		"@dfinity/ckbtc": "^3.0.0-next-2024-09-26",
 		"@dfinity/cketh": "^3.3.0-next-2024-09-17",
-		"@dfinity/gix-components": "^4.7.0-next-2024-09-17",
+		"@dfinity/gix-components": "^4.7.0-next-2024-09-23",
 		"@dfinity/ic-management": "^5.2.0-next-2024-09-17",
-		"@dfinity/ledger-icp": "^2.5.0-next-2024-09-17",
+		"@dfinity/ledger-icp": "^2.5.0-next-2024-09-26",
 		"@dfinity/ledger-icrc": "^2.5.0-next-2024-09-17",
+		"@dfinity/oisy-wallet-signer": "file:dfinity-oisy-wallet-signer-0.0.1.tgz",
 		"@dfinity/principal": "^2.1.1",
 		"@dfinity/utils": "^2.5.0-next-2024-09-17",
 		"@dfinity/verifiable-credentials": "^0.0.4",

src/frontend/src/lib/components/hero/Actions.svelte

@@ -10,6 +10,7 @@
 	import { tokenCkBtcLedger } from '$icp/derived/ic-token.derived';
 	import { erc20ToCkErc20Enabled, ethToCkETHEnabled } from '$icp-eth/derived/cketh.derived';
 	import Buy from '$lib/components/buy/Buy.svelte';
+	import Lab from '$lib/components/lab/Lab.svelte';
 	import Receive from '$lib/components/receive/Receive.svelte';
 	import Send from '$lib/components/send/Send.svelte';
 	import HeroButtonGroup from '$lib/components/ui/HeroButtonGroup.svelte';
@@ -67,5 +68,7 @@
 		{/if}
 
 		<Buy />
+
+		<Lab />
 	</HeroButtonGroup>
 </div>

src/frontend/src/lib/components/icons/IconAstronautWithEyes.svelte

@@ -0,0 +1,27 @@
+<svg width="47" height="40" viewBox="0 0 47 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<g clip-path="url(#clip0_425_1013)">
+		<path
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M30.994 37.3191C30.994 38.6559 29.9672 39.7714 28.6324 39.8461C28.061 39.878 27.4855 39.9056 26.9065 39.9292C25.7494 39.9763 24.7952 39.0436 24.7952 37.8855C24.2409 37.9015 23.6813 37.9099 23.1172 37.911C22.6082 37.91 22.103 37.9031 21.6019 37.89C21.6019 39.0473 20.6489 39.9797 19.4925 39.9339C18.9068 39.9107 18.3247 39.8834 17.7467 39.8518C16.4228 39.7793 15.4031 38.6736 15.4031 37.3477C6.42549 35.9079 -0.0395044 31.4727 0.000181712 21.3936V18.9261C-0.0395044 8.82716 6.42549 4.40348 15.4031 2.96937C15.4031 1.46459 16.5604 0.209562 18.0632 0.131708C18.4317 0.112615 18.8019 0.0952718 19.1736 0.0795784C20.5047 0.0233775 21.6019 1.09726 21.6019 2.42959C22.103 2.41659 22.6082 2.40975 23.1172 2.40875C23.6815 2.40875 24.241 2.41606 24.7952 2.43114C24.7952 1.09971 25.8922 0.0268321 27.2224 0.0845048C27.5911 0.100493 27.9584 0.118132 28.324 0.137519C29.8331 0.217534 30.994 1.47868 30.994 2.98988C39.8642 4.4532 46.2091 8.91121 46.2091 18.9261V21.3936C46.2485 31.4068 39.868 35.8496 30.994 37.3191Z"
+			fill="white"
+		/>
+		<path
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M41.9679 20.9668V19.3807C42.1127 8.8544 33.3268 6.93179 22.996 6.7876C12.617 6.93179 3.83106 8.8544 3.97589 19.3807V20.9668C3.83106 31.5412 12.617 33.4638 22.996 33.608C33.3268 33.4638 42.1127 31.5412 41.9679 20.9668Z"
+			fill="#0172FF"
+		/>
+		<path
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M22.9622 18.3157C21.2173 16.3428 18.8769 14.1636 16.5422 14.1636C13.7197 14.1636 11.2583 16.1472 10.6178 18.7755C10.667 18.6024 11.5637 16.1949 14.9323 16.1949C16.6431 16.1949 18.4497 17.3297 19.3364 18.1537C20.3058 19.055 22.97 21.9871 22.9817 22.0004C22.9756 21.9933 22.2085 21.1495 21.3483 20.2283C20.8837 20.7882 20.2136 21.5513 19.4435 22.2362C18.0085 23.5128 17.0756 23.7804 16.5422 23.7804C14.5294 23.7804 12.8878 22.1602 12.8878 20.1691C12.8878 18.178 14.5277 16.5702 16.5422 16.5579C16.6153 16.5579 16.7036 16.5654 16.8111 16.5848C16.2059 16.349 15.5628 16.1949 14.9323 16.1949C11.565 16.1949 10.667 18.6015 10.6178 18.7755C10.5086 19.2232 10.4512 19.6896 10.4512 20.1687C10.4512 23.4801 13.1427 26.1742 16.4991 26.1742C17.8984 26.1742 19.4657 25.4461 21.0799 24.0105C21.8428 23.332 22.5045 22.6062 23.0013 22.0225C24.7462 23.995 27.0865 26.1742 29.4213 26.1742C32.2438 26.1742 34.7052 24.1906 35.3456 21.5623C35.4548 21.1146 35.5123 20.6487 35.5123 20.1696C35.5127 16.8577 32.7776 14.1636 29.4212 14.1636C28.022 14.1636 26.4982 14.8917 24.884 16.3273C24.1208 17.006 23.4591 17.732 22.9622 18.3157ZM22.9817 18.3374C22.9878 18.3445 23.7549 19.1888 24.6151 20.1099C25.0798 19.55 25.7498 18.787 26.52 18.1021C27.9549 16.8254 28.8878 16.5578 29.4212 16.5578C31.434 16.5578 33.0757 18.178 33.0757 20.1691C33.0757 22.1492 31.4358 23.768 29.4212 23.7804C29.3481 23.7804 29.2598 23.7729 29.1524 23.7535C29.5306 23.9008 29.9237 24.0163 30.3192 24.0822C28.8387 23.8357 27.3912 22.8947 26.627 22.1845C25.6576 21.2832 22.9935 18.3507 22.9817 18.3374Z"
+			fill="white"
+		/>
+	</g>
+	<defs>
+		<clipPath id="clip0_425_1013">
+			<rect width="46.2093" height="40.0004" fill="white" />
+		</clipPath>
+	</defs>
+</svg>

src/frontend/src/lib/components/icons/IconCheck.svelte

@@ -0,0 +1,9 @@
+<!-- source: DFINITY foundation -->
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M27.6095 7.05727C28.1302 7.57797 28.1302 8.42219 27.6095 8.94289L12.9428 23.6096C12.4221 24.1303 11.5779 24.1303 11.0572 23.6096L4.39052 16.9429C3.86983 16.4222 3.86983 15.578 4.39052 15.0573C4.91122 14.5366 5.75544 14.5366 6.27614 15.0573L12 20.7811L25.7239 7.05727C26.2446 6.53657 27.0888 6.53657 27.6095 7.05727Z"
+		fill="white"
+	/>
+</svg>

src/frontend/src/lib/components/icons/IconClose.svelte

@@ -0,0 +1,15 @@
+<!-- source: DFINITY foundation -->
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M24.9426 7.05727C25.4633 7.57797 25.4633 8.42219 24.9426 8.94289L8.94265 24.9429C8.42195 25.4636 7.57773 25.4636 7.05703 24.9429C6.53633 24.4222 6.53633 23.578 7.05703 23.0573L23.057 7.05727C23.5777 6.53657 24.4219 6.53657 24.9426 7.05727Z"
+		fill="white"
+	/>
+	<path
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M7.05703 7.05727C7.57773 6.53657 8.42195 6.53657 8.94265 7.05727L24.9426 23.0573C25.4633 23.578 25.4633 24.4222 24.9426 24.9429C24.4219 25.4636 23.5777 25.4636 23.057 24.9429L7.05703 8.94289C6.53633 8.42219 6.53633 7.57797 7.05703 7.05727Z"
+		fill="white"
+	/>
+</svg>

src/frontend/src/lib/components/icons/IconInfinite.svelte

@@ -0,0 +1,10 @@
+<!-- source: DFINITY foundation -->
+<svg width="36" height="19" viewBox="0 0 36 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path
+		d="M18 9.5C14.8 4.49375 11.9979 2 8.79788 2C7.10049 2 5.07475 2.79018 3.87452 4.1967C2.67428 5.60322 2 7.51088 2 9.5C2 11.4891 2.67428 13.3968 3.87452 14.8033C5.07475 16.2098 6.70261 17 8.4 17C11.6 17 14.8 14.5063 18 9.5ZM18 9.5C21.2 14.5063 24.4 17 27.6 17C29.2974 17 30.9252 16.2098 32.1255 14.8033C33.3257 13.3968 34 11.4891 34 9.5C34 7.51088 33.3257 5.60322 32.1255 4.1967C30.9252 2.79018 29.2974 2 27.6 2C24.4 2 21.2 4.49375 18 9.5Z"
+		stroke="white"
+		stroke-width="3.21703"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>

src/frontend/src/lib/components/icons/IconLab.svelte

@@ -0,0 +1,11 @@
+<!-- source: https://fonts.google.com/icons?selected=Material+Symbols+Rounded:science:FILL@0;wght@400;GRAD@0;opsz@24&icon.query=lab&icon.size=24&icon.color=%23e8eaed&icon.style=Rounded -->
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	height="28"
+	viewBox="0 -960 960 960"
+	width="28"
+	fill="currentColor"
+	><path
+		d="M200-120q-51 0-72.5-45.5T138-250l222-270v-240h-40q-17 0-28.5-11.5T280-800q0-17 11.5-28.5T320-840h320q17 0 28.5 11.5T680-800q0 17-11.5 28.5T640-760h-40v240l222 270q32 39 10.5 84.5T760-120H200Zm0-80h560L520-492v-268h-80v268L200-200Zm280-280Z"
+	/></svg
+>

src/frontend/src/lib/components/icons/IconShield.svelte

@@ -0,0 +1,14 @@
+<!-- source: DFINITY foundation -->
+<script lang="ts">
+	export let size = '20';
+</script>
+
+<svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<g id="mdi:shield-outline">
+		<path
+			id="Vector"
+			d="M21 11C21 16.55 17.16 21.74 12 23C6.84 21.74 3 16.55 3 11V5L12 1L21 5V11ZM12 21C15.75 20 19 15.54 19 11.22V6.3L12 3.18L5 6.3V11.22C5 15.54 8.25 20 12 21Z"
+			fill="black"
+		/>
+	</g>
+</svg>

src/frontend/src/lib/components/lab/Lab.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import IconLab from '$lib/components/icons/IconLab.svelte';
+	import ButtonHero from '$lib/components/ui/ButtonHero.svelte';
+
+	// TODO: this should be an URL
+	const open = () => window.open('https://shsda-3aaaa-aaaal-amg6q-cai.icp0.io', '_blank');
+</script>
+
+<ButtonHero on:click={open} ariaLabel="Have fun">
+	<IconLab slot="icon" />
+	Lab
+</ButtonHero>

src/frontend/src/lib/components/signer/SignerAlert.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { ComponentType } from 'svelte';
+	import IconCheck from '$lib/components/icons/IconCheck.svelte';
+	import IconClose from '$lib/components/icons/IconClose.svelte';
+
+	export let type: 'ok' | 'error';
+
+	let icon: ComponentType;
+	$: icon = type === 'error' ? IconClose : IconCheck;
+</script>
+
+<div class="flex justify-center pt-8 pb-5">
+	<div
+		class="flex items-center justify-center w-20 h-20 rounded-full"
+		class:bg-cyclamen={type === 'error'}
+		class:bg-[var(--color-primary)]={type === 'ok'}
+	>
+		<svelte:component this={icon} />
+	</div>
+</div>

src/frontend/src/lib/components/signer/SignerAnimatedAstronaut.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import IconAstronautWithEyes from '$lib/components/icons/IconAstronautWithEyes.svelte';
+</script>
+
+<span class="relative flex w-20 aspect-square">
+	<span
+		class="animate-ping absolute inline-flex h-full w-full rounded-full bg-[var(--color-primary)] opacity-75"
+	></span>
+	<span
+		class="relative inline-flex items-center justify-center rounded-full h-20 w-20 bg-[var(--color-primary)]"
+		><IconAstronautWithEyes /></span
+	>
+</span>

src/frontend/src/lib/components/signer/SignerCallCanister.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+	import IconCheck from '$lib/components/icons/IconCheck.svelte';
+	import IconClose from '$lib/components/icons/IconClose.svelte';
+	import SignerAlert from '$lib/components/signer/SignerAlert.svelte';
+	import SignerLoading from '$lib/components/signer/SignerLoading.svelte';
+	import { i18n } from '$lib/stores/i18n.store';
+	import { SIGNER_CONTEXT_KEY, type SignerContext } from '$lib/stores/signer.store';
+	import { toastsError } from '$lib/stores/toasts.store';
+
+	const {
+		callCanisterPrompt: { payload }
+	} = getContext<SignerContext>(SIGNER_CONTEXT_KEY);
+
+	const onPayload = () => {
+		if ($payload?.status !== 'error') {
+			return;
+		}
+
+		toastsError({
+			msg: { text: $i18n.signer.call_canister.error.cannot_call },
+			err: $payload.details
+		});
+	};
+
+	$: $payload, onPayload();
+</script>
+
+{#if $payload?.status === 'loading'}
+	<SignerLoading>
+		{$i18n.signer.call_canister.text.processing}
+	</SignerLoading>
+{:else if $payload?.status === 'result'}
+	<h2 class="text-center mb-4">{$i18n.signer.call_canister.text.executed}</h2>
+
+	<SignerAlert type="ok">
+		<IconCheck />
+	</SignerAlert>
+
+	<p class="text-center mt-10 font-bold">{$i18n.signer.call_canister.text.close_window}</p>
+{:else if $payload?.status === 'error'}
+	<h2 class="text-center mb-4">{$i18n.signer.call_canister.text.error}</h2>
+
+	<SignerAlert type="error">
+		<IconClose />
+	</SignerAlert>
+
+	<p class="text-center mt-10 font-bold">{$i18n.signer.call_canister.text.try_again}</p>
+{/if}