From 1e159d73cdd7755640b971ebc2f211c6c7452201 Mon Sep 17 00:00:00 2001
From: David Dal Busco <david.dalbusco@outlook.com>
Date: Mon, 24 Mar 2025 15:58:00 +0100
Subject: [PATCH 01/17] feat: signer features for Juno Wallet

---
 package-lock.json                             |  8 +-
 package.json                                  |  2 +-
 .../src/lib/components/signer/Signer.svelte   | 42 ++++++++
 .../components/signer/SignerAccounts.svelte   | 53 ++++++++++
 .../signer/SignerPermissions.svelte           | 98 +++++++++++++++++++
 .../routes/(standalone)/sign/+layout.svelte   | 39 ++++++++
 .../src/routes/(standalone)/sign/+page.svelte | 21 ++++
 7 files changed, 258 insertions(+), 5 deletions(-)
 create mode 100644 src/frontend/src/lib/components/signer/Signer.svelte
 create mode 100644 src/frontend/src/lib/components/signer/SignerAccounts.svelte
 create mode 100644 src/frontend/src/lib/components/signer/SignerPermissions.svelte
 create mode 100644 src/frontend/src/routes/(standalone)/sign/+layout.svelte
 create mode 100644 src/frontend/src/routes/(standalone)/sign/+page.svelte

diff --git a/package-lock.json b/package-lock.json
index d530600b1a..d5548ea6fc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,7 +17,7 @@
 				"@dfinity/identity": "^2.3.0",
 				"@dfinity/ledger-icp": "^2.6.8",
 				"@dfinity/ledger-icrc": "^2.7.3",
-				"@dfinity/oisy-wallet-signer": "^0.1.6",
+				"@dfinity/oisy-wallet-signer": "^0.1.7",
 				"@dfinity/principal": "^2.3.0",
 				"@dfinity/utils": "^2.10.0",
 				"@dfinity/zod-schemas": "^0.0.2",
@@ -716,9 +716,9 @@
 			}
 		},
 		"node_modules/@dfinity/oisy-wallet-signer": {
-			"version": "0.1.6",
-			"resolved": "https://registry.npmjs.org/@dfinity/oisy-wallet-signer/-/oisy-wallet-signer-0.1.6.tgz",
-			"integrity": "sha512-t/aX2bHompkjbVnoUOeVlpYX6lpuhWqSikH5rOPnp2NAzjM555KHtAzgGK0HBIJ1KAJ3kXZ4okf0LbezKHHDIw==",
+			"version": "0.1.7",
+			"resolved": "https://registry.npmjs.org/@dfinity/oisy-wallet-signer/-/oisy-wallet-signer-0.1.7.tgz",
+			"integrity": "sha512-GrDEAVkf2x55Y/uEJipvonqQqg0kie5H7h+DGMr6uOUirzuB001mWuPd91OMhaUEtiVjiJC9DwI9B3B6FN9hfQ==",
 			"license": "Apache-2.0",
 			"engines": {
 				"node": ">=22"
diff --git a/package.json b/package.json
index 456ea538d6..15d1bdb983 100644
--- a/package.json
+++ b/package.json
@@ -103,7 +103,7 @@
 		"@dfinity/identity": "^2.3.0",
 		"@dfinity/ledger-icp": "^2.6.8",
 		"@dfinity/ledger-icrc": "^2.7.3",
-		"@dfinity/oisy-wallet-signer": "^0.1.6",
+		"@dfinity/oisy-wallet-signer": "^0.1.7",
 		"@dfinity/principal": "^2.3.0",
 		"@dfinity/utils": "^2.10.0",
 		"@dfinity/zod-schemas": "^0.0.2",
diff --git a/src/frontend/src/lib/components/signer/Signer.svelte b/src/frontend/src/lib/components/signer/Signer.svelte
new file mode 100644
index 0000000000..a11b96f3ff
--- /dev/null
+++ b/src/frontend/src/lib/components/signer/Signer.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+	import {Signer} from "@dfinity/oisy-wallet-signer/signer";
+    import {authNotSignedIn} from "$lib/derived/auth.derived";
+    import {isNullish} from "@dfinity/utils";
+    import { authStore } from '$lib/stores/auth.store';
+    import SignerPermissions from "$lib/components/signer/SignerPermissions.svelte";
+    import SignerAccounts from "$lib/components/signer/SignerAccounts.svelte";
+    import type {MissionControlId} from "$lib/types/mission-control";
+
+    interface Props {
+        missionControlId: MissionControlId;
+    }
+
+    let { missionControlId }: Props = $props();
+
+    let signer = $state<Signer | undefined>(undefined);
+
+    $effect(() => {
+        if ($authNotSignedIn) {
+            signer?.disconnect();
+            return;
+        }
+
+        if (isNullish($authStore.identity)) {
+            signer?.disconnect();
+            return;
+        }
+
+        signer = Signer.init({
+            owner: $authStore.identity,
+            host: 'http://localhost:5987'
+        });
+
+        return () => {
+            signer?.disconnect();
+        };
+    });
+</script>
+
+<SignerPermissions {signer} />
+
+<SignerAccounts {signer} {missionControlId} />
diff --git a/src/frontend/src/lib/components/signer/SignerAccounts.svelte b/src/frontend/src/lib/components/signer/SignerAccounts.svelte
new file mode 100644
index 0000000000..87e63727b6
--- /dev/null
+++ b/src/frontend/src/lib/components/signer/SignerAccounts.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+	import { Signer } from '@dfinity/oisy-wallet-signer/signer';
+    import {type AccountsApproval, type AccountsPromptPayload, ICRC27_ACCOUNTS} from "@dfinity/oisy-wallet-signer";
+    import {isNullish, nonNullish} from "@dfinity/utils";
+    import { fade } from 'svelte/transition';
+    import type {MissionControlId} from "$lib/types/mission-control";
+
+	interface Props {
+		signer: Signer | undefined;
+        missionControlId: MissionControlId;
+	}
+
+	let { signer, missionControlId }: Props = $props();
+
+    let approve = $state<AccountsApproval | undefined | null>(undefined);
+
+    const resetPrompt = () => {
+        approve = null;
+    };
+
+    $effect(() => {
+        if (isNullish(signer)) {
+            resetPrompt();
+            return;
+        }
+
+        signer.register({
+            method: ICRC27_ACCOUNTS,
+            prompt: ({ approve: approveAccounts }: AccountsPromptPayload) => {
+                approve = approveAccounts;
+            }
+        });
+    });
+
+    $effect(() => {
+        if (isNullish(approve)) {
+            return;
+        }
+
+        approve([
+            {
+                owner: missionControlId.toText()
+            }
+        ]);
+
+        // Just to animate the UI. Strictly related to this demo.
+        setTimeout(() => resetPrompt(), 1000);
+    });
+</script>
+
+{#if nonNullish(approve)}
+    <p transition:fade>Notifying account...</p>
+{/if}
\ No newline at end of file
diff --git a/src/frontend/src/lib/components/signer/SignerPermissions.svelte b/src/frontend/src/lib/components/signer/SignerPermissions.svelte
new file mode 100644
index 0000000000..73fea004d0
--- /dev/null
+++ b/src/frontend/src/lib/components/signer/SignerPermissions.svelte
@@ -0,0 +1,98 @@
+<script lang="ts">
+	import { Signer } from '@dfinity/oisy-wallet-signer/signer';
+	import { isNullish, nonNullish } from '@dfinity/utils';
+	import {
+		ICRC25_PERMISSION_GRANTED,
+		ICRC25_REQUEST_PERMISSIONS,
+		type IcrcScope,
+		type PermissionsConfirmation,
+		type PermissionsPromptPayload
+	} from '@dfinity/oisy-wallet-signer';
+	import { fade } from 'svelte/transition';
+	import { toasts } from '$lib/stores/toasts.store';
+
+	interface Props {
+		signer: Signer | undefined;
+	}
+
+	let { signer }: Props = $props();
+
+	let scopes = $state<IcrcScope[] | undefined | null>(undefined);
+	let confirm = $state<PermissionsConfirmation | undefined | null>(undefined);
+
+	const resetPrompt = () => {
+		confirm = null;
+		scopes = null;
+	};
+
+	$effect(() => {
+		if (isNullish(signer)) {
+			resetPrompt();
+			return;
+		}
+
+		signer.register({
+			method: ICRC25_REQUEST_PERMISSIONS,
+			prompt: ({ confirm: confirmScopes, requestedScopes }: PermissionsPromptPayload) => {
+				confirm = confirmScopes;
+				scopes = requestedScopes;
+			}
+		});
+	});
+
+	/**
+	 * During the initial UX review, it was decided that permissions should not be permanently denied when "Rejected," but instead should be ignored.
+	 * This means that if the user selects "Reject," the permission will be requested again the next time a similar action is performed.
+	 * This approach is particularly useful since, for the time being, there is no way for the user to manage their permissions in the Oisy UI.
+	 */
+	const ignorePermissions = () => {
+		if (isNullish(confirm)) {
+			toasts.error({
+				text: '$i18n.signer.permissions.error.no_confirm_callback'
+			});
+			return;
+		}
+
+		confirm([]);
+
+		resetPrompt();
+	};
+
+	const approvePermissions = () => {
+		if (isNullish(confirm)) {
+			toasts.error({
+				text: '$i18n.signer.permissions.error.no_confirm_callback'
+			});
+			return;
+		}
+
+		confirm((scopes ?? []).map((scope) => ({ ...scope, state: ICRC25_PERMISSION_GRANTED })));
+
+		resetPrompt();
+	};
+
+	const onReject = () => ignorePermissions();
+
+	const onApprove = ($event: SubmitEvent) => {
+		$event.preventDefault();
+
+		approvePermissions();
+	};
+</script>
+
+{#if nonNullish(scopes)}
+	<form onsubmit={onApprove} method="POST" in:fade>
+		<ul>
+			{#each scopes as scope}
+				<li>
+					{scope.scope.method}
+				</li>
+			{/each}
+		</ul>
+
+		<div class="toolbar">
+			<button type="button" onclick={onReject}>Reject</button>
+			<button type="submit">Approve</button>
+		</div>
+	</form>
+{/if}
diff --git a/src/frontend/src/routes/(standalone)/sign/+layout.svelte b/src/frontend/src/routes/(standalone)/sign/+layout.svelte
new file mode 100644
index 0000000000..7ef5306962
--- /dev/null
+++ b/src/frontend/src/routes/(standalone)/sign/+layout.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { onMount, type Snippet } from 'svelte';
+	import Navbar from '$lib/components/core/Navbar.svelte';
+	import IconUser from '$lib/components/icons/IconUser.svelte';
+	import Footer from '$lib/components/ui/Footer.svelte';
+	import Layout from '$lib/components/ui/Layout.svelte';
+	import { i18n } from '$lib/stores/i18n.store';
+	import { layoutNavigation } from '$lib/stores/layout-navigation.store';
+	import { Color } from '$lib/types/theme';
+	import { applyColor } from '$lib/utils/theme.utils';
+	import IconWallet from "$lib/components/icons/IconWallet.svelte";
+
+	interface Props {
+		children: Snippet;
+	}
+
+	let { children }: Props = $props();
+
+	onMount(() => {
+		applyColor(Color.LAVENDER_BLUE);
+
+		layoutNavigation.set({
+			title: "Juno Wallet",
+			icon: IconWallet
+		});
+	});
+</script>
+
+<Layout centered={true}>
+	{#snippet navbar()}
+		<Navbar start="logo" />
+	{/snippet}
+
+	{@render children()}
+
+	{#snippet footer()}
+		<Footer />
+	{/snippet}
+</Layout>
diff --git a/src/frontend/src/routes/(standalone)/sign/+page.svelte b/src/frontend/src/routes/(standalone)/sign/+page.svelte
new file mode 100644
index 0000000000..8d9f23e591
--- /dev/null
+++ b/src/frontend/src/routes/(standalone)/sign/+page.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { authSignedIn } from '$lib/derived/auth.derived';
+	import { signIn } from '$lib/services/auth.services';
+	import { i18n } from '$lib/stores/i18n.store';
+	import MissionControlGuard from '$lib/components/guards/MissionControlGuard.svelte';
+	import Signer from '$lib/components/signer/Signer.svelte';
+	import { nonNullish } from '@dfinity/utils';
+    import { missionControlIdDerived } from '$lib/derived/mission-control.derived';
+</script>
+
+{#if $authSignedIn}
+	<MissionControlGuard>
+		{#if nonNullish($missionControlIdDerived)}
+			<Signer missionControlId={$missionControlIdDerived} />
+		{/if}
+	</MissionControlGuard>
+{:else}
+	<p>Access your Juno Wallet.</p>
+
+	<button onclick={async () => await signIn({})}>{$i18n.core.sign_in}</button>
+{/if}

From eb00e5a327645f9e4fd6e77fdd464a70e417924e Mon Sep 17 00:00:00 2001
From: David Dal Busco <david.dalbusco@outlook.com>
Date: Sun, 30 Mar 2025 10:55:37 +0200
Subject: [PATCH 02/17] feat: i18n

---
 src/frontend/src/lib/i18n/en.json                      | 3 +++
 src/frontend/src/lib/types/i18n.d.ts                   | 5 +++++
 src/frontend/src/routes/(standalone)/sign/+page.svelte | 4 ++--
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/lib/i18n/en.json b/src/frontend/src/lib/i18n/en.json
index bb9da474e0..c8bc83c40d 100644
--- a/src/frontend/src/lib/i18n/en.json
+++ b/src/frontend/src/lib/i18n/en.json
@@ -794,5 +794,8 @@
 		"resources_description": "View a collection of sample code, applications, and microservices build with Juno",
 		"changelog": "Releases",
 		"changelog_description": "See the last updates and improvements."
+	},
+	"signer": {
+		"access_your_wallet": "Access your wallet to securely connect a dApp and start using your assets."
 	}
 }
diff --git a/src/frontend/src/lib/types/i18n.d.ts b/src/frontend/src/lib/types/i18n.d.ts
index 0f6b868384..c9f49afea5 100644
--- a/src/frontend/src/lib/types/i18n.d.ts
+++ b/src/frontend/src/lib/types/i18n.d.ts
@@ -824,6 +824,10 @@ interface I18nResources {
 	changelog_description: string;
 }
 
+interface I18nSigner {
+	access_your_wallet: string;
+}
+
 interface I18n {
 	lang: Languages;
 	core: I18nCore;
@@ -852,4 +856,5 @@ interface I18n {
 	preferences: I18nPreferences;
 	examples: I18nExamples;
 	resources: I18nResources;
+	signer: I18nSigner;
 }
diff --git a/src/frontend/src/routes/(standalone)/sign/+page.svelte b/src/frontend/src/routes/(standalone)/sign/+page.svelte
index 8d9f23e591..b84d7cadbb 100644
--- a/src/frontend/src/routes/(standalone)/sign/+page.svelte
+++ b/src/frontend/src/routes/(standalone)/sign/+page.svelte
@@ -5,7 +5,7 @@
 	import MissionControlGuard from '$lib/components/guards/MissionControlGuard.svelte';
 	import Signer from '$lib/components/signer/Signer.svelte';
 	import { nonNullish } from '@dfinity/utils';
-    import { missionControlIdDerived } from '$lib/derived/mission-control.derived';
+	import { missionControlIdDerived } from '$lib/derived/mission-control.derived';
 </script>
 
 {#if $authSignedIn}
@@ -15,7 +15,7 @@
 		{/if}
 	</MissionControlGuard>
 {:else}
-	<p>Access your Juno Wallet.</p>
+	<p>{$i18n.signer.access_your_wallet}</p>
 
 	<button onclick={async () => await signIn({})}>{$i18n.core.sign_in}</button>
 {/if}

From 99ebc990030c5a86d79f2b9308c652a0c2473ba8 Mon Sep 17 00:00:00 2001
From: David Dal Busco <david.dalbusco@outlook.com>
Date: Sun, 30 Mar 2025 11:10:33 +0200
Subject: [PATCH 03/17] feat: i18n

---
 src/frontend/src/lib/i18n/en.json                        | 1 +
 src/frontend/src/lib/types/i18n.d.ts                     | 1 +
 src/frontend/src/routes/(standalone)/sign/+layout.svelte | 6 +++---
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/lib/i18n/en.json b/src/frontend/src/lib/i18n/en.json
index c8bc83c40d..dc00a7eb77 100644
--- a/src/frontend/src/lib/i18n/en.json
+++ b/src/frontend/src/lib/i18n/en.json
@@ -796,6 +796,7 @@
 		"changelog_description": "See the last updates and improvements."
 	},
 	"signer": {
+		"title": "Juno Wallet",
 		"access_your_wallet": "Access your wallet to securely connect a dApp and start using your assets."
 	}
 }
diff --git a/src/frontend/src/lib/types/i18n.d.ts b/src/frontend/src/lib/types/i18n.d.ts
index c9f49afea5..2c4f3a867c 100644
--- a/src/frontend/src/lib/types/i18n.d.ts
+++ b/src/frontend/src/lib/types/i18n.d.ts
@@ -825,6 +825,7 @@ interface I18nResources {
 }
 
 interface I18nSigner {
+	title: string;
 	access_your_wallet: string;
 }
 
diff --git a/src/frontend/src/routes/(standalone)/sign/+layout.svelte b/src/frontend/src/routes/(standalone)/sign/+layout.svelte
index 7ef5306962..7d919827dd 100644
--- a/src/frontend/src/routes/(standalone)/sign/+layout.svelte
+++ b/src/frontend/src/routes/(standalone)/sign/+layout.svelte
@@ -17,10 +17,10 @@
 	let { children }: Props = $props();
 
 	onMount(() => {
-		applyColor(Color.LAVENDER_BLUE);
+		applyColor(Color.TIFFANY_BLUE);
 
 		layoutNavigation.set({
-			title: "Juno Wallet",
+			title: $i18n.signer.title,
 			icon: IconWallet
 		});
 	});
@@ -28,7 +28,7 @@
 
 <Layout centered={true}>
 	{#snippet navbar()}
-		<Navbar start="logo" />
+		<Navbar start="logo" signIn={false} />
 	{/snippet}
 
 	{@render children()}

From 63a24a30818e702d70208b9ce5d7a200c3658b5a Mon Sep 17 00:00:00 2001
From: David Dal Busco <david.dalbusco@outlook.com>
Date: Sun, 30 Mar 2025 11:15:12 +0200
Subject: [PATCH 04/17] feat: placeholder to detect intersection

---
 src/frontend/src/routes/(standalone)/cli/+page.svelte  | 4 ++++
 src/frontend/src/routes/(standalone)/sign/+page.svelte | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/src/frontend/src/routes/(standalone)/cli/+page.svelte b/src/frontend/src/routes/(standalone)/cli/+page.svelte
index d6d94e9f44..737ad51a9f 100644
--- a/src/frontend/src/routes/(standalone)/cli/+page.svelte
+++ b/src/frontend/src/routes/(standalone)/cli/+page.svelte
@@ -10,6 +10,8 @@
 	import { signIn } from '$lib/services/auth.services';
 	import { i18n } from '$lib/stores/i18n.store';
 	import type { Option } from '$lib/types/utils';
+	import { onIntersection } from '$lib/directives/intersection.directives';
+	import {onLayoutTitleIntersection} from "$lib/stores/layout-intersecting.store";
 
 	interface Props {
 		data: {
@@ -24,6 +26,8 @@
 	let principal: Option<string> = $derived(data?.principal);
 </script>
 
+<span use:onIntersection onjunoIntersecting={onLayoutTitleIntersection}></span>
+
 {#if nonNullish(redirect_uri) && nonNullish(principal) && notEmptyString(redirect_uri) && notEmptyString(principal)}
 	{#if $authSignedIn}
 		<MissionControlGuard>
diff --git a/src/frontend/src/routes/(standalone)/sign/+page.svelte b/src/frontend/src/routes/(standalone)/sign/+page.svelte
index b84d7cadbb..e801a5b771 100644
--- a/src/frontend/src/routes/(standalone)/sign/+page.svelte
+++ b/src/frontend/src/routes/(standalone)/sign/+page.svelte
@@ -6,8 +6,12 @@
 	import Signer from '$lib/components/signer/Signer.svelte';
 	import { nonNullish } from '@dfinity/utils';
 	import { missionControlIdDerived } from '$lib/derived/mission-control.derived';
+	import { onIntersection } from '$lib/directives/intersection.directives';
+	import {onLayoutTitleIntersection} from "$lib/stores/layout-intersecting.store";
 </script>
 
+<span use:onIntersection onjunoIntersecting={onLayoutTitleIntersection}></span>
+
 {#if $authSignedIn}
 	<MissionControlGuard>
 		{#if nonNullish($missionControlIdDerived)}

From aa2a50f0ed3a7e9a83a434361aa3baa84d88563c Mon Sep 17 00:00:00 2001
From: David Dal Busco <david.dalbusco@outlook.com>
Date: Sun, 30 Mar 2025 11:17:43 +0200
Subject: [PATCH 05/17] feat: spacing when loading

---
 .../src/routes/(standalone)/cli/+page.svelte  | 48 +++++++++++--------
 .../src/routes/(standalone)/sign/+page.svelte | 30 +++++++-----
 2 files changed, 45 insertions(+), 33 deletions(-)

diff --git a/src/frontend/src/routes/(standalone)/cli/+page.svelte b/src/frontend/src/routes/(standalone)/cli/+page.svelte
index 737ad51a9f..5f328ae9e2 100644
--- a/src/frontend/src/routes/(standalone)/cli/+page.svelte
+++ b/src/frontend/src/routes/(standalone)/cli/+page.svelte
@@ -11,7 +11,7 @@
 	import { i18n } from '$lib/stores/i18n.store';
 	import type { Option } from '$lib/types/utils';
 	import { onIntersection } from '$lib/directives/intersection.directives';
-	import {onLayoutTitleIntersection} from "$lib/stores/layout-intersecting.store";
+	import { onLayoutTitleIntersection } from '$lib/stores/layout-intersecting.store';
 
 	interface Props {
 		data: {
@@ -26,26 +26,32 @@
 	let principal: Option<string> = $derived(data?.principal);
 </script>
 
-<span use:onIntersection onjunoIntersecting={onLayoutTitleIntersection}></span>
+<div use:onIntersection onjunoIntersecting={onLayoutTitleIntersection}>
+	{#if nonNullish(redirect_uri) && nonNullish(principal) && notEmptyString(redirect_uri) && notEmptyString(principal)}
+		{#if $authSignedIn}
+			<MissionControlGuard>
+				<CanistersLoader satellites={$sortedSatellites}>
+					{#if nonNullish($missionControlIdDerived)}
+						<div in:fade>
+							<CliAdd {principal} {redirect_uri} missionControlId={$missionControlIdDerived} />
+						</div>
+					{/if}
+				</CanistersLoader>
+			</MissionControlGuard>
+		{:else}
+			<p>
+				{$i18n.cli.sign_in}
+			</p>
 
-{#if nonNullish(redirect_uri) && nonNullish(principal) && notEmptyString(redirect_uri) && notEmptyString(principal)}
-	{#if $authSignedIn}
-		<MissionControlGuard>
-			<CanistersLoader satellites={$sortedSatellites}>
-				{#if nonNullish($missionControlIdDerived)}
-					<div in:fade>
-						<CliAdd {principal} {redirect_uri} missionControlId={$missionControlIdDerived} />
-					</div>
-				{/if}
-			</CanistersLoader>
-		</MissionControlGuard>
+			<button onclick={async () => await signIn({})}>{$i18n.core.sign_in}</button>
+		{/if}
 	{:else}
-		<p>
-			{$i18n.cli.sign_in}
-		</p>
-
-		<button onclick={async () => await signIn({})}>{$i18n.core.sign_in}</button>
+		<p>{$i18n.errors.cli_missing_params}</p>
 	{/if}
-{:else}
-	<p>{$i18n.errors.cli_missing_params}</p>
-{/if}
+</div>
+
+<style lang="scss">
+	.section {
+		--spinner-paragraph-margin: 0;
+	}
+</style>
diff --git a/src/frontend/src/routes/(standalone)/sign/+page.svelte b/src/frontend/src/routes/(standalone)/sign/+page.svelte
index e801a5b771..d061354a0f 100644
--- a/src/frontend/src/routes/(standalone)/sign/+page.svelte
+++ b/src/frontend/src/routes/(standalone)/sign/+page.svelte
@@ -7,19 +7,25 @@
 	import { nonNullish } from '@dfinity/utils';
 	import { missionControlIdDerived } from '$lib/derived/mission-control.derived';
 	import { onIntersection } from '$lib/directives/intersection.directives';
-	import {onLayoutTitleIntersection} from "$lib/stores/layout-intersecting.store";
+	import { onLayoutTitleIntersection } from '$lib/stores/layout-intersecting.store';
 </script>
 
-<span use:onIntersection onjunoIntersecting={onLayoutTitleIntersection}></span>
+<div class="section" use:onIntersection onjunoIntersecting={onLayoutTitleIntersection}>
+	{#if $authSignedIn}
+		<MissionControlGuard>
+			{#if nonNullish($missionControlIdDerived)}
+				<Signer missionControlId={$missionControlIdDerived} />
+			{/if}
+		</MissionControlGuard>
+	{:else}
+		<p>{$i18n.signer.access_your_wallet}</p>
 
-{#if $authSignedIn}
-	<MissionControlGuard>
-		{#if nonNullish($missionControlIdDerived)}
-			<Signer missionControlId={$missionControlIdDerived} />
-		{/if}
-	</MissionControlGuard>
-{:else}
-	<p>{$i18n.signer.access_your_wallet}</p>
+		<button onclick={async () => await signIn({})}>{$i18n.core.sign_in}</button>
+	{/if}
+</div>
 
-	<button onclick={async () => await signIn({})}>{$i18n.core.sign_in}</button>
-{/if}
+<style lang="scss">
+	.section {
+		--spinner-paragraph-margin: 0;
+	}
+</style>

From 57f7db3d333dd99655818499ca8d08d4f3dac72f Mon Sep 17 00:00:00 2001
From: David Dal Busco <david.dalbusco@outlook.com>
Date: Sun, 30 Mar 2025 12:36:11 +0200
Subject: [PATCH 06/17] feat: signer as in OISY

---
 src/frontend/src/lib/api/_agent/_agent.api.ts |   2 +-
 .../lib/components/icons/IconShield.svelte    |  19 ++
 .../src/lib/components/signer/Signer.svelte   |  57 ++---
 .../components/signer/SignerAccounts.svelte   |  77 +++---
 .../lib/components/signer/SignerOrigin.svelte |  44 ++++
 .../signer/SignerPermissions.svelte           | 116 +++++----
 src/frontend/src/lib/i18n/en.json             |  10 +-
 src/frontend/src/lib/stores/signer.store.ts   | 225 ++++++++++++++++++
 src/frontend/src/lib/types/i18n.d.ts          |   8 +
 .../routes/(standalone)/sign/+layout.svelte   |   3 +-
 .../src/routes/(standalone)/sign/+page.svelte |  28 ++-
 .../tests/lib/stores/signer.store.spec.ts     | 102 ++++++++
 12 files changed, 561 insertions(+), 130 deletions(-)
 create mode 100644 src/frontend/src/lib/components/icons/IconShield.svelte
 create mode 100644 src/frontend/src/lib/components/signer/SignerOrigin.svelte
 create mode 100644 src/frontend/src/lib/stores/signer.store.ts
 create mode 100644 src/frontend/tests/lib/stores/signer.store.spec.ts

diff --git a/src/frontend/src/lib/api/_agent/_agent.api.ts b/src/frontend/src/lib/api/_agent/_agent.api.ts
index da82a9a8dd..4cbaa13a95 100644
--- a/src/frontend/src/lib/api/_agent/_agent.api.ts
+++ b/src/frontend/src/lib/api/_agent/_agent.api.ts
@@ -1,4 +1,4 @@
-import {DEV, LOCAL_REPLICA_URL} from '$lib/constants/app.constants';
+import { DEV, LOCAL_REPLICA_URL } from '$lib/constants/app.constants';
 import type { Option } from '$lib/types/utils';
 import { HttpAgent, type Identity } from '@dfinity/agent';
 import { isNullish } from '@dfinity/utils';
diff --git a/src/frontend/src/lib/components/icons/IconShield.svelte b/src/frontend/src/lib/components/icons/IconShield.svelte
new file mode 100644
index 0000000000..42b866c59a
--- /dev/null
+++ b/src/frontend/src/lib/components/icons/IconShield.svelte
@@ -0,0 +1,19 @@
+<!-- source: https://fonts.google.com/icons?selected=Material+Symbols+Outlined:shield:FILL@0;wght@400;GRAD@0;opsz@24&icon.size=24&icon.color=%23000000&icon.query=shield&icon.set=Material+Symbols&icon.style=Outlined -->
+<script lang="ts">
+	interface Props {
+		size?: string;
+	}
+
+	let { size = '24px' }: Props = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	height={size}
+	width={size}
+	viewBox="0 -960 960 960"
+	fill="currentColor"
+	><path
+		d="M480-80q-139-35-229.5-159.5T160-516v-244l320-120 320 120v244q0 152-90.5 276.5T480-80Zm0-84q104-33 172-132t68-220v-189l-240-90-240 90v189q0 121 68 220t172 132Zm0-316Z"
+	/></svg
+>
diff --git a/src/frontend/src/lib/components/signer/Signer.svelte b/src/frontend/src/lib/components/signer/Signer.svelte
index a11b96f3ff..8673796b2c 100644
--- a/src/frontend/src/lib/components/signer/Signer.svelte
+++ b/src/frontend/src/lib/components/signer/Signer.svelte
@@ -1,42 +1,29 @@
 <script lang="ts">
-	import {Signer} from "@dfinity/oisy-wallet-signer/signer";
-    import {authNotSignedIn} from "$lib/derived/auth.derived";
-    import {isNullish} from "@dfinity/utils";
-    import { authStore } from '$lib/stores/auth.store';
-    import SignerPermissions from "$lib/components/signer/SignerPermissions.svelte";
-    import SignerAccounts from "$lib/components/signer/SignerAccounts.svelte";
-    import type {MissionControlId} from "$lib/types/mission-control";
+	import SignerPermissions from '$lib/components/signer/SignerPermissions.svelte';
+	import type { MissionControlId } from '$lib/types/mission-control';
+	import SignerAccounts from '$lib/components/signer/SignerAccounts.svelte';
+	import { getContext } from 'svelte';
+	import { SIGNER_CONTEXT_KEY, type SignerContext } from '$lib/stores/signer.store';
+	import { fade, type FadeParams } from 'svelte/transition';
 
-    interface Props {
-        missionControlId: MissionControlId;
-    }
+	interface Props {
+		missionControlId: MissionControlId;
+	}
 
-    let { missionControlId }: Props = $props();
+	let { missionControlId }: Props = $props();
 
-    let signer = $state<Signer | undefined>(undefined);
+	const { idle } = getContext<SignerContext>(SIGNER_CONTEXT_KEY);
 
-    $effect(() => {
-        if ($authNotSignedIn) {
-            signer?.disconnect();
-            return;
-        }
-
-        if (isNullish($authStore.identity)) {
-            signer?.disconnect();
-            return;
-        }
-
-        signer = Signer.init({
-            owner: $authStore.identity,
-            host: 'http://localhost:5987'
-        });
-
-        return () => {
-            signer?.disconnect();
-        };
-    });
+	// We use specific fade parameters for the idle state due to the asynchronous communication between the relying party and the wallet.
+	// Because the idle state might be displayed when a client starts communication with the wallet, we add a small delay to prevent a minor glitch where the idle animation is briefly shown before the actual action is rendered.
+	// Technically, from a specification standpoint, we don't have a way to fully prevent this.
+	const fadeParams: FadeParams = { delay: 150, duration: 250 };
 </script>
 
-<SignerPermissions {signer} />
-
-<SignerAccounts {signer} {missionControlId} />
+<SignerAccounts {missionControlId}>
+	{#if $idle}
+		<div in:fade={fadeParams}>TODO</div>
+	{:else}
+		<SignerPermissions {missionControlId} />
+	{/if}
+</SignerAccounts>
diff --git a/src/frontend/src/lib/components/signer/SignerAccounts.svelte b/src/frontend/src/lib/components/signer/SignerAccounts.svelte
index 87e63727b6..d1ba204ee4 100644
--- a/src/frontend/src/lib/components/signer/SignerAccounts.svelte
+++ b/src/frontend/src/lib/components/signer/SignerAccounts.svelte
@@ -1,53 +1,38 @@
 <script lang="ts">
-	import { Signer } from '@dfinity/oisy-wallet-signer/signer';
-    import {type AccountsApproval, type AccountsPromptPayload, ICRC27_ACCOUNTS} from "@dfinity/oisy-wallet-signer";
-    import {isNullish, nonNullish} from "@dfinity/utils";
-    import { fade } from 'svelte/transition';
-    import type {MissionControlId} from "$lib/types/mission-control";
+	import { isNullish } from '@dfinity/utils';
+	import type { MissionControlId } from '$lib/types/mission-control';
+	import { getContext, type Snippet } from 'svelte';
+	import { SIGNER_CONTEXT_KEY, type SignerContext } from '$lib/stores/signer.store';
 
 	interface Props {
-		signer: Signer | undefined;
-        missionControlId: MissionControlId;
+		missionControlId: MissionControlId;
+		children: Snippet;
 	}
 
-	let { signer, missionControlId }: Props = $props();
-
-    let approve = $state<AccountsApproval | undefined | null>(undefined);
-
-    const resetPrompt = () => {
-        approve = null;
-    };
-
-    $effect(() => {
-        if (isNullish(signer)) {
-            resetPrompt();
-            return;
-        }
-
-        signer.register({
-            method: ICRC27_ACCOUNTS,
-            prompt: ({ approve: approveAccounts }: AccountsPromptPayload) => {
-                approve = approveAccounts;
-            }
-        });
-    });
-
-    $effect(() => {
-        if (isNullish(approve)) {
-            return;
-        }
-
-        approve([
-            {
-                owner: missionControlId.toText()
-            }
-        ]);
-
-        // Just to animate the UI. Strictly related to this demo.
-        setTimeout(() => resetPrompt(), 1000);
-    });
+	let { missionControlId, children }: Props = $props();
+
+	const {
+		accountsPrompt: { payload, reset: resetPrompt }
+	} = getContext<SignerContext>(SIGNER_CONTEXT_KEY);
+
+	const onAccountsPrompt = async () => {
+		if (isNullish($payload)) {
+			// Payload has been reset. Nothing to do.
+			return;
+		}
+
+		const { approve } = $payload;
+
+		approve([{ owner: missionControlId.toText() }]);
+
+		resetPrompt();
+	};
+
+	$effect(() => {
+		$payload;
+
+		onAccountsPrompt();
+	});
 </script>
 
-{#if nonNullish(approve)}
-    <p transition:fade>Notifying account...</p>
-{/if}
\ No newline at end of file
+{@render children()}
diff --git a/src/frontend/src/lib/components/signer/SignerOrigin.svelte b/src/frontend/src/lib/components/signer/SignerOrigin.svelte
new file mode 100644
index 0000000000..869ac7b37e
--- /dev/null
+++ b/src/frontend/src/lib/components/signer/SignerOrigin.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+	import type { Origin, PayloadOrigin } from '@dfinity/oisy-wallet-signer';
+	import { isNullish, nonNullish } from '@dfinity/utils';
+	import ExternalLink from '$lib/components/ui/ExternalLink.svelte';
+	import { i18n } from '$lib/stores/i18n.store';
+	import type { Option } from '$lib/types/utils';
+
+	interface Props {
+		payload: Option<PayloadOrigin>;
+	}
+
+	let { payload }: Props = $props();
+
+	let origin = $derived(payload?.origin);
+
+	const mapHost = (origin: Origin | undefined): string | undefined | null => {
+		if (isNullish(origin)) {
+			return undefined;
+		}
+
+		try {
+			// If set we are actually sure that the $payload.origin is a valid URL, thanks to the library but, for the state of the art, we still catch potential errors here too.
+			const { host } = new URL(origin);
+			return host;
+		} catch {
+			return null;
+		}
+	};
+
+	// Null being used if mapping the origin does not work - i.e. invalid origin. Probably an edge case.
+
+	let host = $derived(mapHost(origin));
+</script>
+
+{#if nonNullish(origin)}
+	<p>
+		{$i18n.signer.origin_request_from}
+		{#if nonNullish(host)}<span
+				><ExternalLink ariaLabel={$i18n.signer.origin_link_to_dapp} href={origin}
+					>{host}</ExternalLink
+				></span
+			>{:else}<span>{$i18n.signer.origin_invalid_origin}</span>{/if}
+	</p>
+{/if}
diff --git a/src/frontend/src/lib/components/signer/SignerPermissions.svelte b/src/frontend/src/lib/components/signer/SignerPermissions.svelte
index 73fea004d0..81e56ead2b 100644
--- a/src/frontend/src/lib/components/signer/SignerPermissions.svelte
+++ b/src/frontend/src/lib/components/signer/SignerPermissions.svelte
@@ -1,54 +1,44 @@
 <script lang="ts">
-	import { Signer } from '@dfinity/oisy-wallet-signer/signer';
 	import { isNullish, nonNullish } from '@dfinity/utils';
 	import {
 		ICRC25_PERMISSION_GRANTED,
-		ICRC25_REQUEST_PERMISSIONS,
-		type IcrcScope,
-		type PermissionsConfirmation,
-		type PermissionsPromptPayload
+		ICRC27_ACCOUNTS,
+		type IcrcScopedMethod,
 	} from '@dfinity/oisy-wallet-signer';
 	import { fade } from 'svelte/transition';
 	import { toasts } from '$lib/stores/toasts.store';
+	import { type Component, getContext } from 'svelte';
+	import { SIGNER_CONTEXT_KEY, type SignerContext } from '$lib/stores/signer.store';
+	import { i18n } from '$lib/stores/i18n.store';
+	import IconWallet from '$lib/components/icons/IconWallet.svelte';
+	import IconShield from '$lib/components/icons/IconShield.svelte';
+	import SignerOrigin from '$lib/components/signer/SignerOrigin.svelte';
+	import { shortenWithMiddleEllipsis } from '$lib/utils/format.utils';
+	import type { MissionControlId } from '$lib/types/mission-control';
 
 	interface Props {
-		signer: Signer | undefined;
+		missionControlId: MissionControlId;
 	}
 
-	let { signer }: Props = $props();
+	let { missionControlId }: Props = $props();
 
-	let scopes = $state<IcrcScope[] | undefined | null>(undefined);
-	let confirm = $state<PermissionsConfirmation | undefined | null>(undefined);
+	const {
+		permissionsPrompt: { payload, reset: resetPrompt }
+	} = getContext<SignerContext>(SIGNER_CONTEXT_KEY);
 
-	const resetPrompt = () => {
-		confirm = null;
-		scopes = null;
-	};
+	let scopes = $derived($payload?.requestedScopes ?? []);
 
-	$effect(() => {
-		if (isNullish(signer)) {
-			resetPrompt();
-			return;
-		}
-
-		signer.register({
-			method: ICRC25_REQUEST_PERMISSIONS,
-			prompt: ({ confirm: confirmScopes, requestedScopes }: PermissionsPromptPayload) => {
-				confirm = confirmScopes;
-				scopes = requestedScopes;
-			}
-		});
-	});
+	let confirm = $derived($payload?.confirm);
 
 	/**
-	 * During the initial UX review, it was decided that permissions should not be permanently denied when "Rejected," but instead should be ignored.
+	 * During the initial UX review of OISY, it was decided that permissions should not be permanently denied when "Rejected," but instead should be ignored.
 	 * This means that if the user selects "Reject," the permission will be requested again the next time a similar action is performed.
 	 * This approach is particularly useful since, for the time being, there is no way for the user to manage their permissions in the Oisy UI.
 	 */
 	const ignorePermissions = () => {
 		if (isNullish(confirm)) {
 			toasts.error({
-				text: '$i18n.signer.permissions.error.no_confirm_callback'
+				text: $i18n.signer.permissions_no_confirm_callback
 			});
 			return;
 		}
@@ -61,34 +51,64 @@
 	const approvePermissions = () => {
 		if (isNullish(confirm)) {
 			toasts.error({
-				text: '$i18n.signer.permissions.error.no_confirm_callback'
+				text: $i18n.signer.permissions_no_confirm_callback
 			});
 			return;
 		}
 
-		confirm((scopes ?? []).map((scope) => ({ ...scope, state: ICRC25_PERMISSION_GRANTED })));
+		confirm(scopes.map((scope) => ({ ...scope, state: ICRC25_PERMISSION_GRANTED })));
 
 		resetPrompt();
 	};
 
 	const onReject = () => ignorePermissions();
 
-	const onApprove = ($event: SubmitEvent) => {
-		$event.preventDefault();
+	const onApprove = () => approvePermissions();
 
-		approvePermissions();
-	};
+	let listItems: Record<IcrcScopedMethod, { icon: Component; label: string }> = $derived({
+		icrc27_accounts: {
+			icon: IconWallet,
+			label: $i18n.signer.permissions_icrc27_accounts
+		},
+		icrc49_call_canister: {
+			icon: IconShield,
+			label: $i18n.signer.permissions_icrc49_call_canister
+		}
+	});
+
+	let requestAccountsPermissions = $derived(
+		nonNullish(scopes.find(({ scope: { method } }) => method === ICRC27_ACCOUNTS))
+	);
 </script>
 
-{#if nonNullish(scopes)}
-	<form onsubmit={onApprove} method="POST" in:fade>
-		<ul>
-			{#each scopes as scope}
-				<li>
-					{scope.scope.method}
-				</li>
-			{/each}
-		</ul>
+{#if nonNullish($payload)}
+	<form in:fade onsubmit={onApprove} method="POST">
+		<SignerOrigin payload={$payload} />
+
+		<div class="warning">
+			<p>{$i18n.signer.permissions_requested_permissions}</p>
+
+			<ul>
+				{#each scopes as { scope: { method } } (method)}
+					{@const { icon: Icon, label } = listItems[method]}
+
+					<li>
+						<Icon size="24" />
+						{label}
+					</li>
+				{/each}
+			</ul>
+		</div>
+
+		{#if requestAccountsPermissions}
+			<p>
+				<label for="ic-wallet-address">{$i18n.signer.permissions_your_wallet_address}:</label>
+
+				<output id="ic-wallet-address"
+					>{shortenWithMiddleEllipsis(missionControlId.toText())}</output
+				>
+			</p>
+		{/if}
 
 		<div class="toolbar">
 			<button type="button" onclick={onReject}>Reject</button>
@@ -96,3 +116,11 @@
 		</div>
 	</form>
 {/if}
+
+<style lang="scss">
+	@use '../../styles/mixins/info';
+
+	.warning {
+		@include info.warning;
+	}
+</style>
diff --git a/src/frontend/src/lib/i18n/en.json b/src/frontend/src/lib/i18n/en.json
index dc00a7eb77..b2f2a55fc2 100644
--- a/src/frontend/src/lib/i18n/en.json
+++ b/src/frontend/src/lib/i18n/en.json
@@ -797,6 +797,14 @@
 	},
 	"signer": {
 		"title": "Juno Wallet",
-		"access_your_wallet": "Access your wallet to securely connect a dApp and start using your assets."
+		"access_your_wallet": "Access your wallet to securely connect a dApp and start using your assets.",
+		"permissions_no_confirm_callback": "No callback to confirm the permissions, which is unexpected. Close the wallet and try again.",
+		"permissions_icrc27_accounts": "View your Juno address",
+		"permissions_icrc49_call_canister": "Request approval for transactions",
+		"permissions_requested_permissions": "Requested permissions",
+		"permissions_your_wallet_address": "Your wallet address",
+		"origin_request_from": "Request from:",
+		"origin_invalid_origin": "Invalid origin️!!",
+		"origin_link_to_dapp": "Link to the dApp requesting permissions"
 	}
 }
diff --git a/src/frontend/src/lib/stores/signer.store.ts b/src/frontend/src/lib/stores/signer.store.ts
new file mode 100644
index 0000000000..08ac5c282a
--- /dev/null
+++ b/src/frontend/src/lib/stores/signer.store.ts
@@ -0,0 +1,225 @@
+import { DEV, LOCAL_REPLICA_URL } from '$lib/constants/app.constants';
+import type { Option } from '$lib/types/utils';
+import type { Identity } from '@dfinity/agent';
+import {
+	ICRC21_CALL_CONSENT_MESSAGE,
+	ICRC25_REQUEST_PERMISSIONS,
+	ICRC27_ACCOUNTS,
+	ICRC49_CALL_CANISTER,
+	type AccountsPromptPayload,
+	type CallCanisterPromptPayload,
+	type ConsentMessagePromptPayload,
+	type PermissionsPromptPayload
+} from '@dfinity/oisy-wallet-signer';
+import { Signer } from '@dfinity/oisy-wallet-signer/signer';
+import { isNullish } from '@dfinity/utils';
+import { derived, writable, type Readable } from 'svelte/store';
+
+/**
+ * Interface for managing the OISY Wallet Signer context in any route or component.
+ */
+export interface SignerContext {
+	/**
+	 * Initializes the signer with the authenticated user - the owner of the wallet.
+	 * @param {Object} params - Initialization parameters.
+	 * @param {Identity} params.owner - The identity of the signer owner.
+	 */
+	init: (params: { owner: Identity }) => void;
+
+	/**
+	 * Resets the signer context and disconnects the signer.
+	 */
+	reset: () => void;
+
+	/**
+	 * A derived store that indicates if all prompts of the signer that either require user interactions or are calls to the IC are idle.
+	 * @type {Readable<boolean>}
+	 */
+	idle: Readable<boolean>;
+
+	/**
+	 * Handles the accounts prompt requests.
+	 */
+	accountsPrompt: {
+		/**
+		 * A derived store containing the accounts prompt payload.
+		 * @type {Readable<PermissionsPromptPayload | undefined | null>}
+		 */
+		payload: Readable<AccountsPromptPayload | undefined | null>;
+
+		/**
+		 * Resets the accounts prompt payload to null once processed.
+		 */
+		reset: () => void;
+	};
+
+	/**
+	 * Handles the permissions prompt requests.
+	 */
+	permissionsPrompt: {
+		/**
+		 * A derived store containing the permissions prompt payload.
+		 * @type {Readable<PermissionsPromptPayload | undefined | null>}
+		 */
+		payload: Readable<PermissionsPromptPayload | undefined | null>;
+
+		/**
+		 * Resets the permissions prompt payload to null once processed.
+		 */
+		reset: () => void;
+	};
+
+	/**
+	 * Handles the consent message prompt requests.
+	 */
+	consentMessagePrompt: {
+		/**
+		 * A derived store containing the consent message prompt payload.
+		 * @type {Readable<ConsentMessagePromptPayload | undefined | null>}
+		 */
+		payload: Readable<ConsentMessagePromptPayload | undefined | null>;
+
+		/**
+		 * Resets the consent message prompt payload to null once processed.
+		 */
+		reset: () => void;
+	};
+
+	/**
+	 * Handles the call canister prompt state.
+	 */
+	callCanisterPrompt: {
+		/**
+		 * A derived store containing the call canister prompt payload.
+		 * @type {Readable<CallCanisterPromptPayload | undefined | null>}
+		 */
+		payload: Readable<CallCanisterPromptPayload | undefined | null>;
+
+		/**
+		 * Resets the call canister prompt payload to null once processed.
+		 */
+		reset: () => void;
+	};
+}
+
+/**
+ * Initializes the SignerContext, creating the signer and registering various stores to handles its prompts.
+ *
+ * @returns {SignerContext} The initialized signer context, providing functions and stores to interact with the signer.
+ */
+export const initSignerContext = (): SignerContext => {
+	let signer: Option<Signer>;
+
+	const accountsPromptPayloadStore = writable<AccountsPromptPayload | undefined | null>(undefined);
+
+	const permissionsPromptPayloadStore = writable<PermissionsPromptPayload | undefined | null>(
+		undefined
+	);
+
+	const consentMessagePromptPayloadStore = writable<ConsentMessagePromptPayload | undefined | null>(
+		undefined
+	);
+
+	const callCanisterPromptPayloadStore = writable<CallCanisterPromptPayload | undefined | null>(
+		undefined
+	);
+
+	const accountsPromptPayload = derived(
+		[accountsPromptPayloadStore],
+		([$accountsPromptPayloadStore]) => $accountsPromptPayloadStore
+	);
+
+	const permissionsPromptPayload = derived(
+		[permissionsPromptPayloadStore],
+		([$permissionsPromptPayloadStore]) => $permissionsPromptPayloadStore
+	);
+
+	const consentMessagePromptPayload = derived(
+		[consentMessagePromptPayloadStore],
+		([$consentMessagePromptPayloadStore]) => $consentMessagePromptPayloadStore
+	);
+
+	const callCanisterPromptPayload = derived(
+		[callCanisterPromptPayloadStore],
+		([$callCanisterPromptPayloadStore]) => $callCanisterPromptPayloadStore
+	);
+
+	// We omit the accountsPrompt for the idle status because this prompt is handled without user interactions.
+	const idle = derived(
+		[permissionsPromptPayload, consentMessagePromptPayload, callCanisterPromptPayload],
+		([$permissionsPromptPayload, $consentMessagePromptPayload, $callCanisterPromptPayloadStore]) =>
+			isNullish($permissionsPromptPayload) &&
+			isNullish($consentMessagePromptPayload) &&
+			isNullish($callCanisterPromptPayloadStore)
+	);
+
+	const init = ({ owner }: { owner: Identity }) => {
+		signer = Signer.init({
+			owner,
+			...(DEV && { host: LOCAL_REPLICA_URL })
+		});
+
+		signer.register({
+			method: ICRC25_REQUEST_PERMISSIONS,
+			prompt: (payload: PermissionsPromptPayload) => permissionsPromptPayloadStore.set(payload)
+		});
+
+		signer.register({
+			method: ICRC27_ACCOUNTS,
+			prompt: (payload: AccountsPromptPayload) => accountsPromptPayloadStore.set(payload)
+		});
+
+		signer.register({
+			method: ICRC21_CALL_CONSENT_MESSAGE,
+			prompt: (payload: ConsentMessagePromptPayload) => {
+				consentMessagePromptPayloadStore.set(payload);
+			}
+		});
+
+		signer.register({
+			method: ICRC49_CALL_CANISTER,
+			prompt: (payload: CallCanisterPromptPayload) => {
+				callCanisterPromptPayloadStore.set(payload);
+			}
+		});
+	};
+
+	const resetAccountsPromptPayload = () => accountsPromptPayloadStore.set(null);
+	const resetPermissionsPromptPayload = () => permissionsPromptPayloadStore.set(null);
+	const resetConsentMessagePromptPayload = () => consentMessagePromptPayloadStore.set(null);
+	const resetCallCanisterPromptPayload = () => callCanisterPromptPayloadStore.set(null);
+
+	const reset = () => {
+		resetAccountsPromptPayload();
+		resetPermissionsPromptPayload();
+		resetConsentMessagePromptPayload();
+		resetCallCanisterPromptPayload();
+
+		signer?.disconnect();
+		signer = null;
+	};
+
+	return {
+		init,
+		reset,
+		idle,
+		accountsPrompt: {
+			payload: accountsPromptPayload,
+			reset: resetAccountsPromptPayload
+		},
+		permissionsPrompt: {
+			payload: permissionsPromptPayload,
+			reset: resetPermissionsPromptPayload
+		},
+		consentMessagePrompt: {
+			payload: consentMessagePromptPayload,
+			reset: resetConsentMessagePromptPayload
+		},
+		callCanisterPrompt: {
+			payload: callCanisterPromptPayload,
+			reset: resetCallCanisterPromptPayload
+		}
+	};
+};
+
+export const SIGNER_CONTEXT_KEY = Symbol('signer');
diff --git a/src/frontend/src/lib/types/i18n.d.ts b/src/frontend/src/lib/types/i18n.d.ts
index 2c4f3a867c..61a93de4b2 100644
--- a/src/frontend/src/lib/types/i18n.d.ts
+++ b/src/frontend/src/lib/types/i18n.d.ts
@@ -827,6 +827,14 @@ interface I18nResources {
 interface I18nSigner {
 	title: string;
 	access_your_wallet: string;
+	permissions_no_confirm_callback: string;
+	permissions_icrc27_accounts: string;
+	permissions_icrc49_call_canister: string;
+	permissions_requested_permissions: string;
+	permissions_your_wallet_address: string;
+	origin_request_from: string;
+	origin_invalid_origin: string;
+	origin_link_to_dapp: string;
 }
 
 interface I18n {
diff --git a/src/frontend/src/routes/(standalone)/sign/+layout.svelte b/src/frontend/src/routes/(standalone)/sign/+layout.svelte
index 7d919827dd..ec480d5ebf 100644
--- a/src/frontend/src/routes/(standalone)/sign/+layout.svelte
+++ b/src/frontend/src/routes/(standalone)/sign/+layout.svelte
@@ -1,14 +1,13 @@
 <script lang="ts">
 	import { onMount, type Snippet } from 'svelte';
 	import Navbar from '$lib/components/core/Navbar.svelte';
-	import IconUser from '$lib/components/icons/IconUser.svelte';
 	import Footer from '$lib/components/ui/Footer.svelte';
 	import Layout from '$lib/components/ui/Layout.svelte';
 	import { i18n } from '$lib/stores/i18n.store';
 	import { layoutNavigation } from '$lib/stores/layout-navigation.store';
 	import { Color } from '$lib/types/theme';
 	import { applyColor } from '$lib/utils/theme.utils';
-	import IconWallet from "$lib/components/icons/IconWallet.svelte";
+	import IconWallet from '$lib/components/icons/IconWallet.svelte';
 
 	interface Props {
 		children: Snippet;
diff --git a/src/frontend/src/routes/(standalone)/sign/+page.svelte b/src/frontend/src/routes/(standalone)/sign/+page.svelte
index d061354a0f..167150f9b3 100644
--- a/src/frontend/src/routes/(standalone)/sign/+page.svelte
+++ b/src/frontend/src/routes/(standalone)/sign/+page.svelte
@@ -4,10 +4,36 @@
 	import { i18n } from '$lib/stores/i18n.store';
 	import MissionControlGuard from '$lib/components/guards/MissionControlGuard.svelte';
 	import Signer from '$lib/components/signer/Signer.svelte';
-	import { nonNullish } from '@dfinity/utils';
+	import { isNullish, nonNullish } from '@dfinity/utils';
 	import { missionControlIdDerived } from '$lib/derived/mission-control.derived';
 	import { onIntersection } from '$lib/directives/intersection.directives';
 	import { onLayoutTitleIntersection } from '$lib/stores/layout-intersecting.store';
+	import { initSignerContext, SIGNER_CONTEXT_KEY } from '$lib/stores/signer.store';
+	import { onDestroy, setContext } from 'svelte';
+	import { authStore } from '$lib/stores/auth.store';
+	import type { OptionIdentity } from '$lib/types/itentity';
+
+	const { idle, reset, ...context } = initSignerContext();
+	setContext(SIGNER_CONTEXT_KEY, {
+		...context,
+		idle,
+		reset
+	});
+
+	const init = (owner: OptionIdentity) => {
+		if (isNullish(owner)) {
+			reset();
+			return;
+		}
+
+		context.init({ owner });
+	};
+
+	onDestroy(reset);
+
+	$effect(() => {
+		init($authStore.identity);
+	});
 </script>
 
 <div class="section" use:onIntersection onjunoIntersecting={onLayoutTitleIntersection}>
diff --git a/src/frontend/tests/lib/stores/signer.store.spec.ts b/src/frontend/tests/lib/stores/signer.store.spec.ts
new file mode 100644
index 0000000000..f09e006a63
--- /dev/null
+++ b/src/frontend/tests/lib/stores/signer.store.spec.ts
@@ -0,0 +1,102 @@
+import { LOCAL_REPLICA_URL } from '$lib/constants/app.constants';
+import { initSignerContext } from '$lib/stores/signer.store';
+import { Ed25519KeyIdentity } from '@dfinity/identity';
+import { Signer } from '@dfinity/oisy-wallet-signer/signer';
+import { get } from 'svelte/store';
+
+describe('SignerContext', () => {
+	const identity = Ed25519KeyIdentity.generate();
+
+	it('initializes the signer with the owner identity and registers methods', () => {
+		const { init } = initSignerContext();
+
+		const spy = vi.spyOn(Signer, 'init');
+
+		init({ owner: identity });
+
+		expect(spy).toHaveBeenCalledWith({
+			owner: identity,
+			host: LOCAL_REPLICA_URL
+		});
+	});
+
+	describe('accounts', () => {
+		it('payload should be undefined per default', () => {
+			const { accountsPrompt } = initSignerContext();
+
+			const payload = get(accountsPrompt.payload);
+			expect(payload).toBeUndefined();
+		});
+
+		// TODO: cover prompt registration and usage with E2E tests
+
+		it('payload should be null after reset', () => {
+			const { accountsPrompt, reset } = initSignerContext();
+
+			reset();
+
+			const payload = get(accountsPrompt.payload);
+			expect(payload).toBeNull();
+		});
+	});
+
+	describe('permissions', () => {
+		it('payload should be undefined per default', () => {
+			const { permissionsPrompt } = initSignerContext();
+
+			const payload = get(permissionsPrompt.payload);
+			expect(payload).toBeUndefined();
+		});
+
+		// TODO: cover prompt registration and usage with E2E tests
+
+		it('payload should be null after reset', () => {
+			const { permissionsPrompt, reset } = initSignerContext();
+
+			reset();
+
+			const payload = get(permissionsPrompt.payload);
+			expect(payload).toBeNull();
+		});
+	});
+
+	describe('consentMessage', () => {
+		it('payload should be undefined per default', () => {
+			const { consentMessagePrompt } = initSignerContext();
+
+			const payload = get(consentMessagePrompt.payload);
+			expect(payload).toBeUndefined();
+		});
+
+		// TODO: cover prompt registration and usage with E2E tests
+
+		it('payload should be null after reset', () => {
+			const { consentMessagePrompt, reset } = initSignerContext();
+
+			reset();
+
+			const payload = get(consentMessagePrompt.payload);
+			expect(payload).toBeNull();
+		});
+	});
+
+	describe('callCanister', () => {
+		it('payload should be undefined per default', () => {
+			const { callCanisterPrompt } = initSignerContext();
+
+			const payload = get(callCanisterPrompt.payload);
+			expect(payload).toBeUndefined();
+		});
+
+		// TODO: cover prompt registration and usage with E2E tests
+
+		it('payload should be null after reset', () => {
+			const { callCanisterPrompt, reset } = initSignerContext();
+
+			reset();
+
+			const payload = get(callCanisterPrompt.payload);
+			expect(payload).toBeNull();
+		});
+	});
+});

From f9702207fe1bc77cd1d9b858a17144955f53ae66 Mon Sep 17 00:00:00 2001
From: David Dal Busco <david.dalbusco@outlook.com>
Date: Sun, 30 Mar 2025 12:41:52 +0200
Subject: [PATCH 07/17] chore: merge main

---
 src/frontend/src/lib/components/signer/SignerPermissions.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/src/lib/components/signer/SignerPermissions.svelte b/src/frontend/src/lib/components/signer/SignerPermissions.svelte
index 81e56ead2b..86f3b6bc78 100644
--- a/src/frontend/src/lib/components/signer/SignerPermissions.svelte
+++ b/src/frontend/src/lib/components/signer/SignerPermissions.svelte
@@ -3,7 +3,7 @@
 	import {
 		ICRC25_PERMISSION_GRANTED,
 		ICRC27_ACCOUNTS,
-		type IcrcScopedMethod,
+		type IcrcScopedMethod
 	} from '@dfinity/oisy-wallet-signer';
 	import { fade } from 'svelte/transition';
 	import { toasts } from '$lib/stores/toasts.store';

From 10c5c003edc9caf88a01b377425a498dd94ba686 Mon Sep 17 00:00:00 2001
From: David Dal Busco <david.dalbusco@outlook.com>
Date: Sun, 30 Mar 2025 12:48:45 +0200
Subject: [PATCH 08/17] chore: lint

---
 .../src/lib/components/signer/Signer.svelte        |  8 ++++----
 .../lib/components/signer/SignerAccounts.svelte    |  4 ++--
 .../src/lib/components/signer/SignerOrigin.svelte  |  2 +-
 .../lib/components/signer/SignerPermissions.svelte | 14 +++++++-------
 .../src/routes/(standalone)/cli/+page.svelte       |  4 ++--
 .../src/routes/(standalone)/sign/+layout.svelte    |  2 +-
 .../src/routes/(standalone)/sign/+page.svelte      | 12 ++++++------
 7 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/src/frontend/src/lib/components/signer/Signer.svelte b/src/frontend/src/lib/components/signer/Signer.svelte
index 8673796b2c..209b64dd79 100644
--- a/src/frontend/src/lib/components/signer/Signer.svelte
+++ b/src/frontend/src/lib/components/signer/Signer.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-	import SignerPermissions from '$lib/components/signer/SignerPermissions.svelte';
-	import type { MissionControlId } from '$lib/types/mission-control';
-	import SignerAccounts from '$lib/components/signer/SignerAccounts.svelte';
 	import { getContext } from 'svelte';
-	import { SIGNER_CONTEXT_KEY, type SignerContext } from '$lib/stores/signer.store';
 	import { fade, type FadeParams } from 'svelte/transition';
+	import SignerAccounts from '$lib/components/signer/SignerAccounts.svelte';
+	import SignerPermissions from '$lib/components/signer/SignerPermissions.svelte';
+	import { SIGNER_CONTEXT_KEY, type SignerContext } from '$lib/stores/signer.store';
+	import type { MissionControlId } from '$lib/types/mission-control';
 
 	interface Props {
 		missionControlId: MissionControlId;
diff --git a/src/frontend/src/lib/components/signer/SignerAccounts.svelte b/src/frontend/src/lib/components/signer/SignerAccounts.svelte
index d1ba204ee4..b9e895b1ef 100644
--- a/src/frontend/src/lib/components/signer/SignerAccounts.svelte
+++ b/src/frontend/src/lib/components/signer/SignerAccounts.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { isNullish } from '@dfinity/utils';
-	import type { MissionControlId } from '$lib/types/mission-control';
 	import { getContext, type Snippet } from 'svelte';
 	import { SIGNER_CONTEXT_KEY, type SignerContext } from '$lib/stores/signer.store';
+	import type { MissionControlId } from '$lib/types/mission-control';
 
 	interface Props {
 		missionControlId: MissionControlId;
@@ -15,7 +15,7 @@
 		accountsPrompt: { payload, reset: resetPrompt }
 	} = getContext<SignerContext>(SIGNER_CONTEXT_KEY);
 
-	const onAccountsPrompt = async () => {
+	const onAccountsPrompt = () => {
 		if (isNullish($payload)) {
 			// Payload has been reset. Nothing to do.
 			return;
diff --git a/src/frontend/src/lib/components/signer/SignerOrigin.svelte b/src/frontend/src/lib/components/signer/SignerOrigin.svelte
index 869ac7b37e..bac8eab4cc 100644
--- a/src/frontend/src/lib/components/signer/SignerOrigin.svelte
+++ b/src/frontend/src/lib/components/signer/SignerOrigin.svelte
@@ -13,7 +13,7 @@
 
 	let origin = $derived(payload?.origin);
 
-	const mapHost = (origin: Origin | undefined): string | undefined | null => {
+	const mapHost = (origin: Origin | undefined): Option<string> => {
 		if (isNullish(origin)) {
 			return undefined;
 		}
diff --git a/src/frontend/src/lib/components/signer/SignerPermissions.svelte b/src/frontend/src/lib/components/signer/SignerPermissions.svelte
index 86f3b6bc78..b351c8e763 100644
--- a/src/frontend/src/lib/components/signer/SignerPermissions.svelte
+++ b/src/frontend/src/lib/components/signer/SignerPermissions.svelte
@@ -1,20 +1,20 @@
 <script lang="ts">
-	import { isNullish, nonNullish } from '@dfinity/utils';
 	import {
 		ICRC25_PERMISSION_GRANTED,
 		ICRC27_ACCOUNTS,
 		type IcrcScopedMethod
 	} from '@dfinity/oisy-wallet-signer';
-	import { fade } from 'svelte/transition';
-	import { toasts } from '$lib/stores/toasts.store';
+	import { isNullish, nonNullish } from '@dfinity/utils';
 	import { type Component, getContext } from 'svelte';
-	import { SIGNER_CONTEXT_KEY, type SignerContext } from '$lib/stores/signer.store';
-	import { i18n } from '$lib/stores/i18n.store';
-	import IconWallet from '$lib/components/icons/IconWallet.svelte';
+	import { fade } from 'svelte/transition';
 	import IconShield from '$lib/components/icons/IconShield.svelte';
+	import IconWallet from '$lib/components/icons/IconWallet.svelte';
 	import SignerOrigin from '$lib/components/signer/SignerOrigin.svelte';
-	import { shortenWithMiddleEllipsis } from '$lib/utils/format.utils';
+	import { i18n } from '$lib/stores/i18n.store';
+	import { SIGNER_CONTEXT_KEY, type SignerContext } from '$lib/stores/signer.store';
+	import { toasts } from '$lib/stores/toasts.store';
 	import type { MissionControlId } from '$lib/types/mission-control';
+	import { shortenWithMiddleEllipsis } from '$lib/utils/format.utils';
 
 	interface Props {
 		missionControlId: MissionControlId;
diff --git a/src/frontend/src/routes/(standalone)/cli/+page.svelte b/src/frontend/src/routes/(standalone)/cli/+page.svelte
index 5f328ae9e2..3a9fb8ff4e 100644
--- a/src/frontend/src/routes/(standalone)/cli/+page.svelte
+++ b/src/frontend/src/routes/(standalone)/cli/+page.svelte
@@ -7,11 +7,11 @@
 	import { authSignedIn } from '$lib/derived/auth.derived';
 	import { missionControlIdDerived } from '$lib/derived/mission-control.derived';
 	import { sortedSatellites } from '$lib/derived/satellites.derived';
+	import { onIntersection } from '$lib/directives/intersection.directives';
 	import { signIn } from '$lib/services/auth.services';
 	import { i18n } from '$lib/stores/i18n.store';
-	import type { Option } from '$lib/types/utils';
-	import { onIntersection } from '$lib/directives/intersection.directives';
 	import { onLayoutTitleIntersection } from '$lib/stores/layout-intersecting.store';
+	import type { Option } from '$lib/types/utils';
 
 	interface Props {
 		data: {
diff --git a/src/frontend/src/routes/(standalone)/sign/+layout.svelte b/src/frontend/src/routes/(standalone)/sign/+layout.svelte
index ec480d5ebf..7e091668e0 100644
--- a/src/frontend/src/routes/(standalone)/sign/+layout.svelte
+++ b/src/frontend/src/routes/(standalone)/sign/+layout.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
 	import { onMount, type Snippet } from 'svelte';
 	import Navbar from '$lib/components/core/Navbar.svelte';
+	import IconWallet from '$lib/components/icons/IconWallet.svelte';
 	import Footer from '$lib/components/ui/Footer.svelte';
 	import Layout from '$lib/components/ui/Layout.svelte';
 	import { i18n } from '$lib/stores/i18n.store';
 	import { layoutNavigation } from '$lib/stores/layout-navigation.store';
 	import { Color } from '$lib/types/theme';
 	import { applyColor } from '$lib/utils/theme.utils';
-	import IconWallet from '$lib/components/icons/IconWallet.svelte';
 
 	interface Props {
 		children: Snippet;
diff --git a/src/frontend/src/routes/(standalone)/sign/+page.svelte b/src/frontend/src/routes/(standalone)/sign/+page.svelte
index 167150f9b3..45f054eb94 100644
--- a/src/frontend/src/routes/(standalone)/sign/+page.svelte
+++ b/src/frontend/src/routes/(standalone)/sign/+page.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
-	import { authSignedIn } from '$lib/derived/auth.derived';
-	import { signIn } from '$lib/services/auth.services';
-	import { i18n } from '$lib/stores/i18n.store';
+	import { isNullish, nonNullish } from '@dfinity/utils';
+	import { onDestroy, setContext } from 'svelte';
 	import MissionControlGuard from '$lib/components/guards/MissionControlGuard.svelte';
 	import Signer from '$lib/components/signer/Signer.svelte';
-	import { isNullish, nonNullish } from '@dfinity/utils';
+	import { authSignedIn } from '$lib/derived/auth.derived';
 	import { missionControlIdDerived } from '$lib/derived/mission-control.derived';
 	import { onIntersection } from '$lib/directives/intersection.directives';
+	import { signIn } from '$lib/services/auth.services';
+	import { authStore } from '$lib/stores/auth.store';
+	import { i18n } from '$lib/stores/i18n.store';
 	import { onLayoutTitleIntersection } from '$lib/stores/layout-intersecting.store';
 	import { initSignerContext, SIGNER_CONTEXT_KEY } from '$lib/stores/signer.store';
-	import { onDestroy, setContext } from 'svelte';
-	import { authStore } from '$lib/stores/auth.store';
 	import type { OptionIdentity } from '$lib/types/itentity';
 
 	const { idle, reset, ...context } = initSignerContext();

From 3a07c78c74ed80dbf4a8f91c8119d9ce2dfe1b59 Mon Sep 17 00:00:00 2001
From: David Dal Busco <david.dalbusco@outlook.com>
Date: Sun, 30 Mar 2025 12:52:49 +0200
Subject: [PATCH 09/17] feat: signer idle

---
 src/frontend/src/lib/components/signer/Signer.svelte     | 5 ++++-
 src/frontend/src/lib/components/signer/SignerIdle.svelte | 6 ++++++
 src/frontend/src/lib/i18n/en.json                        | 3 ++-
 src/frontend/src/lib/types/i18n.d.ts                     | 1 +
 4 files changed, 13 insertions(+), 2 deletions(-)
 create mode 100644 src/frontend/src/lib/components/signer/SignerIdle.svelte

diff --git a/src/frontend/src/lib/components/signer/Signer.svelte b/src/frontend/src/lib/components/signer/Signer.svelte
index 209b64dd79..6dfd763949 100644
--- a/src/frontend/src/lib/components/signer/Signer.svelte
+++ b/src/frontend/src/lib/components/signer/Signer.svelte
@@ -5,6 +5,7 @@
 	import SignerPermissions from '$lib/components/signer/SignerPermissions.svelte';
 	import { SIGNER_CONTEXT_KEY, type SignerContext } from '$lib/stores/signer.store';
 	import type { MissionControlId } from '$lib/types/mission-control';
+	import SignerIdle from '$lib/components/signer/SignerIdle.svelte';
 
 	interface Props {
 		missionControlId: MissionControlId;
@@ -22,7 +23,9 @@
 
 <SignerAccounts {missionControlId}>
 	{#if $idle}
-		<div in:fade={fadeParams}>TODO</div>
+		<div in:fade={fadeParams}>
+			<SignerIdle />
+		</div>
 	{:else}
 		<SignerPermissions {missionControlId} />
 	{/if}
diff --git a/src/frontend/src/lib/components/signer/SignerIdle.svelte b/src/frontend/src/lib/components/signer/SignerIdle.svelte
new file mode 100644
index 0000000000..3921175587
--- /dev/null
+++ b/src/frontend/src/lib/components/signer/SignerIdle.svelte
@@ -0,0 +1,6 @@
+<script lang="ts">
+	import { i18n } from '$lib/stores/i18n.store';
+	import SpinnerParagraph from '$lib/components/ui/SpinnerParagraph.svelte';
+</script>
+
+<SpinnerParagraph>{$i18n.signer.idle_waiting}</SpinnerParagraph>
diff --git a/src/frontend/src/lib/i18n/en.json b/src/frontend/src/lib/i18n/en.json
index b2f2a55fc2..9122247888 100644
--- a/src/frontend/src/lib/i18n/en.json
+++ b/src/frontend/src/lib/i18n/en.json
@@ -805,6 +805,7 @@
 		"permissions_your_wallet_address": "Your wallet address",
 		"origin_request_from": "Request from:",
 		"origin_invalid_origin": "Invalid origin️!!",
-		"origin_link_to_dapp": "Link to the dApp requesting permissions"
+		"origin_link_to_dapp": "Link to the dApp requesting permissions",
+		"idle_waiting": "Waiting for the dApp interaction..."
 	}
 }
diff --git a/src/frontend/src/lib/types/i18n.d.ts b/src/frontend/src/lib/types/i18n.d.ts
index 61a93de4b2..3907f9aeae 100644
--- a/src/frontend/src/lib/types/i18n.d.ts
+++ b/src/frontend/src/lib/types/i18n.d.ts
@@ -835,6 +835,7 @@ interface I18nSigner {
 	origin_request_from: string;
 	origin_invalid_origin: string;
 	origin_link_to_dapp: string;
+	idle_waiting: string;
 }
 
 interface I18n {

From 8ed799df4712041b4177886942771624bcf4c008 Mon Sep 17 00:00:00 2001
From: David Dal Busco <david.dalbusco@outlook.com>
Date: Sun, 30 Mar 2025 13:03:18 +0200
Subject: [PATCH 10/17] style: adjust permissions screen

---
 .../src/lib/components/signer/Signer.svelte   |  2 +-
 .../lib/components/signer/SignerIdle.svelte   |  2 +-
 .../signer/SignerPermissions.svelte           | 23 ++++++++++++++++++-
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/lib/components/signer/Signer.svelte b/src/frontend/src/lib/components/signer/Signer.svelte
index 6dfd763949..1406a3ecf7 100644
--- a/src/frontend/src/lib/components/signer/Signer.svelte
+++ b/src/frontend/src/lib/components/signer/Signer.svelte
@@ -2,10 +2,10 @@
 	import { getContext } from 'svelte';
 	import { fade, type FadeParams } from 'svelte/transition';
 	import SignerAccounts from '$lib/components/signer/SignerAccounts.svelte';
+	import SignerIdle from '$lib/components/signer/SignerIdle.svelte';
 	import SignerPermissions from '$lib/components/signer/SignerPermissions.svelte';
 	import { SIGNER_CONTEXT_KEY, type SignerContext } from '$lib/stores/signer.store';
 	import type { MissionControlId } from '$lib/types/mission-control';
-	import SignerIdle from '$lib/components/signer/SignerIdle.svelte';
 
 	interface Props {
 		missionControlId: MissionControlId;
diff --git a/src/frontend/src/lib/components/signer/SignerIdle.svelte b/src/frontend/src/lib/components/signer/SignerIdle.svelte
index 3921175587..10eba142fc 100644
--- a/src/frontend/src/lib/components/signer/SignerIdle.svelte
+++ b/src/frontend/src/lib/components/signer/SignerIdle.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { i18n } from '$lib/stores/i18n.store';
 	import SpinnerParagraph from '$lib/components/ui/SpinnerParagraph.svelte';
+	import { i18n } from '$lib/stores/i18n.store';
 </script>
 
 <SpinnerParagraph>{$i18n.signer.idle_waiting}</SpinnerParagraph>
diff --git a/src/frontend/src/lib/components/signer/SignerPermissions.svelte b/src/frontend/src/lib/components/signer/SignerPermissions.svelte
index b351c8e763..f95ef34f3e 100644
--- a/src/frontend/src/lib/components/signer/SignerPermissions.svelte
+++ b/src/frontend/src/lib/components/signer/SignerPermissions.svelte
@@ -86,7 +86,7 @@
 		<SignerOrigin payload={$payload} />
 
 		<div class="warning">
-			<p>{$i18n.signer.permissions_requested_permissions}</p>
+			<p class="request">{$i18n.signer.permissions_requested_permissions}</p>
 
 			<ul>
 				{#each scopes as { scope: { method } } (method)}
@@ -122,5 +122,26 @@
 
 	.warning {
 		@include info.warning;
+
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 0;
+	}
+
+	.request {
+		font-weight: var(--font-weight-bold);
+	}
+
+	ul {
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+
+	li {
+		display: flex;
+		align-items: center;
+		gap: var(--padding);
+		margin: 0 0 var(--padding-2x);
 	}
 </style>

From 9857172622e759159cb84978a17c4c67262de5fd Mon Sep 17 00:00:00 2001
From: David Dal Busco <david.dalbusco@outlook.com>
Date: Sun, 30 Mar 2025 13:17:10 +0200
Subject: [PATCH 11/17] feat: adjust margin for intersection

---
 src/frontend/src/lib/directives/intersection.directives.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/src/lib/directives/intersection.directives.ts b/src/frontend/src/lib/directives/intersection.directives.ts
index 4fb5a78732..9dd4761f6f 100644
--- a/src/frontend/src/lib/directives/intersection.directives.ts
+++ b/src/frontend/src/lib/directives/intersection.directives.ts
@@ -1,5 +1,5 @@
 const INTERSECTION_THRESHOLD = 0.8;
-const INTERSECTION_ROOT_MARGIN = '-100px 0px';
+const INTERSECTION_ROOT_MARGIN = '-150px 0px';
 
 export interface IntersectingDetail {
 	intersecting: boolean;

From 2be95a65b20fed4116ddcd2d926d34d2bcbaa707 Mon Sep 17 00:00:00 2001
From: David Dal Busco <david.dalbusco@outlook.com>
Date: Sun, 30 Mar 2025 13:25:01 +0200
Subject: [PATCH 12/17] style: icon colors within warning

---
 .../src/lib/components/icons/IconShield.svelte    | 15 +++++++++++----
 .../components/signer/SignerPermissions.svelte    |  2 ++
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/lib/components/icons/IconShield.svelte b/src/frontend/src/lib/components/icons/IconShield.svelte
index 42b866c59a..95a5782b3d 100644
--- a/src/frontend/src/lib/components/icons/IconShield.svelte
+++ b/src/frontend/src/lib/components/icons/IconShield.svelte
@@ -11,9 +11,16 @@
 	xmlns="http://www.w3.org/2000/svg"
 	height={size}
 	width={size}
-	viewBox="0 -960 960 960"
+	viewBox="0 0 24 24"
 	fill="currentColor"
-	><path
-		d="M480-80q-139-35-229.5-159.5T160-516v-244l320-120 320 120v244q0 152-90.5 276.5T480-80Zm0-84q104-33 172-132t68-220v-189l-240-90-240 90v189q0 121 68 220t172 132Zm0-316Z"
-	/></svg
+	><g><rect fill="none" height="24" width="24" /></g><g
+		><g
+			><path
+				d="M6,6.39v4.7c0,4,2.55,7.7,6,8.83c3.45-1.13,6-4.82,6-8.83v-4.7l-6-2.25L6,6.39 z"
+				style="fill: var(--color-background);"
+			/><path
+				d="M12,2L4,5v6.09c0,5.05,3.41,9.76,8,10.91c4.59-1.15,8-5.86,8-10.91V5L12,2z M18,11.09c0,4-2.55,7.7-6,8.83 c-3.45-1.13-6-4.82-6-8.83v-4.7l6-2.25l6,2.25V11.09z"
+			/></g
+		></g
+	></svg
 >
diff --git a/src/frontend/src/lib/components/signer/SignerPermissions.svelte b/src/frontend/src/lib/components/signer/SignerPermissions.svelte
index f95ef34f3e..868ee47998 100644
--- a/src/frontend/src/lib/components/signer/SignerPermissions.svelte
+++ b/src/frontend/src/lib/components/signer/SignerPermissions.svelte
@@ -143,5 +143,7 @@
 		align-items: center;
 		gap: var(--padding);
 		margin: 0 0 var(--padding-2x);
+
+		--color-background: white;
 	}
 </style>

From 82212738ce1684702492744423fe747a4dd9513c Mon Sep 17 00:00:00 2001
From: David Dal Busco <david.dalbusco@outlook.com>
Date: Sun, 30 Mar 2025 13:33:03 +0200
Subject: [PATCH 13/17] feat: integrat wallet address

---
 .../signer/SignerPermissions.svelte           | 25 +++----------------
 src/frontend/src/lib/i18n/en.json             |  2 +-
 2 files changed, 5 insertions(+), 22 deletions(-)

diff --git a/src/frontend/src/lib/components/signer/SignerPermissions.svelte b/src/frontend/src/lib/components/signer/SignerPermissions.svelte
index 868ee47998..8c9dda61f6 100644
--- a/src/frontend/src/lib/components/signer/SignerPermissions.svelte
+++ b/src/frontend/src/lib/components/signer/SignerPermissions.svelte
@@ -1,15 +1,12 @@
 <script lang="ts">
-	import {
-		ICRC25_PERMISSION_GRANTED,
-		ICRC27_ACCOUNTS,
-		type IcrcScopedMethod
-	} from '@dfinity/oisy-wallet-signer';
+	import { ICRC25_PERMISSION_GRANTED, type IcrcScopedMethod } from '@dfinity/oisy-wallet-signer';
 	import { isNullish, nonNullish } from '@dfinity/utils';
 	import { type Component, getContext } from 'svelte';
 	import { fade } from 'svelte/transition';
 	import IconShield from '$lib/components/icons/IconShield.svelte';
 	import IconWallet from '$lib/components/icons/IconWallet.svelte';
 	import SignerOrigin from '$lib/components/signer/SignerOrigin.svelte';
+	import Html from '$lib/components/ui/Html.svelte';
 	import { i18n } from '$lib/stores/i18n.store';
 	import { SIGNER_CONTEXT_KEY, type SignerContext } from '$lib/stores/signer.store';
 	import { toasts } from '$lib/stores/toasts.store';
@@ -68,17 +65,13 @@
 	let listItems: Record<IcrcScopedMethod, { icon: Component; label: string }> = $derived({
 		icrc27_accounts: {
 			icon: IconWallet,
-			label: $i18n.signer.permissions_icrc27_accounts
+			label: `${$i18n.signer.permissions_icrc27_accounts} <strong>${shortenWithMiddleEllipsis(missionControlId.toText())}</strong>`
 		},
 		icrc49_call_canister: {
 			icon: IconShield,
 			label: $i18n.signer.permissions_icrc49_call_canister
 		}
 	});
-
-	let requestAccountsPermissions = $derived(
-		nonNullish(scopes.find(({ scope: { method } }) => method === ICRC27_ACCOUNTS))
-	);
 </script>
 
 {#if nonNullish($payload)}
@@ -94,22 +87,12 @@
 
 					<li>
 						<Icon size="24" />
-						{label}
+						<Html text={label} />
 					</li>
 				{/each}
 			</ul>
 		</div>
 
-		{#if requestAccountsPermissions}
-			<p>
-				<label for="ic-wallet-address">{$i18n.signer.permissions_your_wallet_address}:</label>
-
-				<output id="ic-wallet-address"
-					>{shortenWithMiddleEllipsis(missionControlId.toText())}</output
-				>
-			</p>
-		{/if}
-
 		<div class="toolbar">
 			<button type="button" onclick={onReject}>Reject</button>
 			<button type="submit">Approve</button>
diff --git a/src/frontend/src/lib/i18n/en.json b/src/frontend/src/lib/i18n/en.json
index 9122247888..8de20ac774 100644
--- a/src/frontend/src/lib/i18n/en.json
+++ b/src/frontend/src/lib/i18n/en.json
@@ -799,7 +799,7 @@
 		"title": "Juno Wallet",
 		"access_your_wallet": "Access your wallet to securely connect a dApp and start using your assets.",
 		"permissions_no_confirm_callback": "No callback to confirm the permissions, which is unexpected. Close the wallet and try again.",
-		"permissions_icrc27_accounts": "View your Juno address",
+		"permissions_icrc27_accounts": "View your wallet address",
 		"permissions_icrc49_call_canister": "Request approval for transactions",
 		"permissions_requested_permissions": "Requested permissions",
 		"permissions_your_wallet_address": "Your wallet address",

From 7ac2202a70cf827832c63bf48bbd098fa6727c86 Mon Sep 17 00:00:00 2001
From: David Dal Busco <david.dalbusco@outlook.com>
Date: Sun, 30 Mar 2025 20:51:17 +0200
Subject: [PATCH 14/17] feat: return more accounts

---
 .../src/lib/components/signer/SignerAccounts.svelte       | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/lib/components/signer/SignerAccounts.svelte b/src/frontend/src/lib/components/signer/SignerAccounts.svelte
index b9e895b1ef..f0be59c63b 100644
--- a/src/frontend/src/lib/components/signer/SignerAccounts.svelte
+++ b/src/frontend/src/lib/components/signer/SignerAccounts.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
-	import { isNullish } from '@dfinity/utils';
+	import { isNullish, nonNullish } from '@dfinity/utils';
 	import { getContext, type Snippet } from 'svelte';
 	import { SIGNER_CONTEXT_KEY, type SignerContext } from '$lib/stores/signer.store';
 	import type { MissionControlId } from '$lib/types/mission-control';
+	import { authStore } from '$lib/stores/auth.store';
 
 	interface Props {
 		missionControlId: MissionControlId;
@@ -23,7 +24,10 @@
 
 		const { approve } = $payload;
 
-		approve([{ owner: missionControlId.toText() }]);
+		approve([
+			...(nonNullish($authStore.identity) ? [{ owner: $authStore.identity.getPrincipal().toText() }] : []),
+			{ owner: missionControlId.toText() }
+		]);
 
 		resetPrompt();
 	};

From aff2558cc17ff1e7e1446bd904820b0f553fc37a Mon Sep 17 00:00:00 2001
From: David Dal Busco <david.dalbusco@outlook.com>
Date: Mon, 31 Mar 2025 15:39:51 +0200
Subject: [PATCH 15/17] feat: consent message

---
 .../src/lib/components/signer/Signer.svelte   |   3 +
 .../components/signer/SignerAccounts.svelte   |   4 +-
 .../signer/SignerConsentMessage.svelte        | 146 ++++++++++++++++++
 .../signer/SignerConsentMessageWarning.svelte |  20 +++
 4 files changed, 172 insertions(+), 1 deletion(-)
 create mode 100644 src/frontend/src/lib/components/signer/SignerConsentMessage.svelte
 create mode 100644 src/frontend/src/lib/components/signer/SignerConsentMessageWarning.svelte

diff --git a/src/frontend/src/lib/components/signer/Signer.svelte b/src/frontend/src/lib/components/signer/Signer.svelte
index 1406a3ecf7..65cd1f0ac6 100644
--- a/src/frontend/src/lib/components/signer/Signer.svelte
+++ b/src/frontend/src/lib/components/signer/Signer.svelte
@@ -6,6 +6,7 @@
 	import SignerPermissions from '$lib/components/signer/SignerPermissions.svelte';
 	import { SIGNER_CONTEXT_KEY, type SignerContext } from '$lib/stores/signer.store';
 	import type { MissionControlId } from '$lib/types/mission-control';
+	import SignerConsentMessage from '$lib/components/signer/SignerConsentMessage.svelte';
 
 	interface Props {
 		missionControlId: MissionControlId;
@@ -28,5 +29,7 @@
 		</div>
 	{:else}
 		<SignerPermissions {missionControlId} />
+
+		<SignerConsentMessage />
 	{/if}
 </SignerAccounts>
diff --git a/src/frontend/src/lib/components/signer/SignerAccounts.svelte b/src/frontend/src/lib/components/signer/SignerAccounts.svelte
index f0be59c63b..ab14f6dab0 100644
--- a/src/frontend/src/lib/components/signer/SignerAccounts.svelte
+++ b/src/frontend/src/lib/components/signer/SignerAccounts.svelte
@@ -25,7 +25,9 @@
 		const { approve } = $payload;
 
 		approve([
-			...(nonNullish($authStore.identity) ? [{ owner: $authStore.identity.getPrincipal().toText() }] : []),
+			...(nonNullish($authStore.identity)
+				? [{ owner: $authStore.identity.getPrincipal().toText() }]
+				: []),
 			{ owner: missionControlId.toText() }
 		]);
 
diff --git a/src/frontend/src/lib/components/signer/SignerConsentMessage.svelte b/src/frontend/src/lib/components/signer/SignerConsentMessage.svelte
new file mode 100644
index 0000000000..9ba32eaaef
--- /dev/null
+++ b/src/frontend/src/lib/components/signer/SignerConsentMessage.svelte
@@ -0,0 +1,146 @@
+<script lang="ts">
+	import type {
+		ConsentMessageApproval,
+		ConsentMessagePromptPayload,
+		Rejection,
+		ResultConsentInfo
+	} from '@dfinity/oisy-wallet-signer';
+	import { isNullish, nonNullish } from '@dfinity/utils';
+	import { getContext } from 'svelte';
+	import { SIGNER_CONTEXT_KEY, type SignerContext } from '$lib/stores/signer.store';
+	import { toasts } from '$lib/stores/toasts.store';
+	import SpinnerParagraph from '$lib/components/ui/SpinnerParagraph.svelte';
+	import { fade } from 'svelte/transition';
+	import SignerOrigin from '$lib/components/signer/SignerOrigin.svelte';
+	import SignerConsentMessageWarning from '$lib/components/signer/SignerConsentMessageWarning.svelte';
+	import JsonCode from '$lib/components/ui/JsonCode.svelte';
+
+	const {
+		consentMessagePrompt: { payload, reset: resetPrompt },
+		callCanisterPrompt: { reset: resetCallCanisterPrompt }
+	} = getContext<SignerContext>(SIGNER_CONTEXT_KEY);
+
+	let approve = $derived<ConsentMessageApproval | undefined>(
+		nonNullish($payload) && $payload.status === 'result' ? $payload.approve : undefined
+	);
+	let reject = $derived<Rejection | undefined>(
+		nonNullish($payload) && $payload.status === 'result' ? $payload.reject : undefined
+	);
+	let consentInfo = $derived<ResultConsentInfo | undefined>(
+		nonNullish($payload) && $payload.status === 'result' ? $payload.consentInfo : undefined
+	);
+
+	let loading = $state(false);
+	let displayMessage = $state<string | undefined>(undefined);
+
+	const onPayload = () => {
+		if ($payload?.status === 'loading') {
+			displayMessage = undefined;
+			loading = true;
+
+			// In case the relying party has not closed the window between the last call and requesting a new call, we reset the call canister prompt; otherwise, we might display both the previous result screen and the consent message.
+			// Note that the library handles the case where the relying party tries to submit another call while a call is still being processed. Therefore, we cannot close a prompt here that is not yet finished.
+			resetCallCanisterPrompt();
+
+			return;
+		}
+
+		loading = false;
+
+		if ($payload?.status === 'error') {
+			// TODO: i18n
+			toasts.error({
+				text: '$i18n.signer.consent_message.error.retrieve'
+			});
+			return;
+		}
+
+		const consentInfoMsg = nonNullish(consentInfo)
+			? 'Warn' in consentInfo
+				? consentInfo.Warn.consentInfo
+				: consentInfo.Ok
+			: undefined;
+
+		displayMessage =
+			nonNullish(consentInfoMsg) && 'GenericDisplayMessage' in consentInfoMsg.consent_message
+				? consentInfoMsg.consent_message.GenericDisplayMessage
+				: undefined;
+	};
+
+	$effect(() => {
+		$payload;
+
+		onPayload();
+	});
+
+	type Text = { title: string; content: string } | undefined;
+
+	// We try to split the content and title because we received a chunk of unstructured text from the canister. This works well for the ICP ledger, but we will likely need to iterate on it. There are a few tasks documented in the backlog.
+	const mapText = (markdown: string | undefined): Text => {
+		if (isNullish(markdown)) {
+			return undefined;
+		}
+
+		const [title, ...rest] = markdown.split('\n');
+
+		return {
+			title: title.replace(/^#+\s*/, '').trim(),
+			content: (rest ?? []).join('\n')
+		};
+	};
+
+	let text = $derived<Text>(mapText(displayMessage));
+
+	const onApprove = ($event: SubmitEvent) => {
+		$event.preventDefault();
+
+		if (isNullish(approve)) {
+			// TODO: i18n
+			toasts.error({
+				text: '$i18n.signer.consent_message.error.no_approve_callback'
+			});
+
+			resetPrompt();
+			return;
+		}
+
+		approve?.();
+		resetPrompt();
+	};
+
+	const onReject = () => {
+		if (isNullish(reject)) {
+			// TODO: i18n
+			toasts.error({
+				text: '$i18n.signer.consent_message.error.no_reject_callback'
+			});
+
+			resetPrompt();
+			return;
+		}
+
+		reject();
+		resetPrompt();
+	};
+</script>
+
+{#if loading}
+	<SpinnerParagraph>$i18n.signer.consent_message.text.loading</SpinnerParagraph>
+{:else if nonNullish(text)}
+	{@const { title, content } = text}
+
+	<form in:fade onsubmit={onApprove} method="POST">
+		<p>{title}</p>
+
+		<SignerOrigin payload={$payload} />
+
+		<SignerConsentMessageWarning {consentInfo} />
+
+		<JsonCode json={content}></JsonCode>
+
+		<div class="toolbar">
+			<button type="button" onclick={onReject}>Reject</button>
+			<button type="submit">Approve</button>
+		</div>
+	</form>
+{/if}
diff --git a/src/frontend/src/lib/components/signer/SignerConsentMessageWarning.svelte b/src/frontend/src/lib/components/signer/SignerConsentMessageWarning.svelte
new file mode 100644
index 0000000000..494ec59163
--- /dev/null
+++ b/src/frontend/src/lib/components/signer/SignerConsentMessageWarning.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { ResultConsentInfo } from '@dfinity/oisy-wallet-signer';
+	import { nonNullish } from '@dfinity/utils';
+	import { i18n } from '$lib/stores/i18n.store';
+	import Warning from '$lib/components/ui/Warning.svelte';
+
+	interface Props {
+		consentInfo: ResultConsentInfo | undefined;
+	}
+
+	let { consentInfo }: Props = $props();
+
+	// The ICRC-49 standard specifies that a user should be warned when a consent message is interpreted on the frontend side instead of being retrieved through a canister.
+	// See https://github.com/dfinity/wg-identity-authentication/blob/main/topics/icrc_49_call_canister.md#message-processing
+	let displayWarning = $derived(nonNullish(consentInfo) && 'Warn' in consentInfo);
+</script>
+
+{#if displayWarning}
+	<Warning>$i18n.signer.consent_message.warning.token_without_consent_message</Warning>
+{/if}

From 581015227a0979b1bfa7ad3d3956220fa0cbd1d5 Mon Sep 17 00:00:00 2001
From: David Dal Busco <david.dalbusco@outlook.com>
Date: Mon, 31 Mar 2025 15:45:39 +0200
Subject: [PATCH 16/17] feat: handle call canister

---
 .../src/lib/components/signer/Signer.svelte   |  5 ++-
 .../components/signer/SignerAccounts.svelte   |  2 +-
 .../signer/SignerCallCanister.svelte          | 37 +++++++++++++++++++
 .../signer/SignerConsentMessage.svelte        | 10 ++---
 .../signer/SignerConsentMessageWarning.svelte |  2 +-
 5 files changed, 48 insertions(+), 8 deletions(-)
 create mode 100644 src/frontend/src/lib/components/signer/SignerCallCanister.svelte

diff --git a/src/frontend/src/lib/components/signer/Signer.svelte b/src/frontend/src/lib/components/signer/Signer.svelte
index 65cd1f0ac6..c79dc802e9 100644
--- a/src/frontend/src/lib/components/signer/Signer.svelte
+++ b/src/frontend/src/lib/components/signer/Signer.svelte
@@ -2,11 +2,12 @@
 	import { getContext } from 'svelte';
 	import { fade, type FadeParams } from 'svelte/transition';
 	import SignerAccounts from '$lib/components/signer/SignerAccounts.svelte';
+	import SignerConsentMessage from '$lib/components/signer/SignerConsentMessage.svelte';
 	import SignerIdle from '$lib/components/signer/SignerIdle.svelte';
 	import SignerPermissions from '$lib/components/signer/SignerPermissions.svelte';
 	import { SIGNER_CONTEXT_KEY, type SignerContext } from '$lib/stores/signer.store';
 	import type { MissionControlId } from '$lib/types/mission-control';
-	import SignerConsentMessage from '$lib/components/signer/SignerConsentMessage.svelte';
+	import SignerCallCanister from '$lib/components/signer/SignerCallCanister.svelte';
 
 	interface Props {
 		missionControlId: MissionControlId;
@@ -31,5 +32,7 @@
 		<SignerPermissions {missionControlId} />
 
 		<SignerConsentMessage />
+
+		<SignerCallCanister />
 	{/if}
 </SignerAccounts>
diff --git a/src/frontend/src/lib/components/signer/SignerAccounts.svelte b/src/frontend/src/lib/components/signer/SignerAccounts.svelte
index ab14f6dab0..b9c6a9ab42 100644
--- a/src/frontend/src/lib/components/signer/SignerAccounts.svelte
+++ b/src/frontend/src/lib/components/signer/SignerAccounts.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { isNullish, nonNullish } from '@dfinity/utils';
 	import { getContext, type Snippet } from 'svelte';
+	import { authStore } from '$lib/stores/auth.store';
 	import { SIGNER_CONTEXT_KEY, type SignerContext } from '$lib/stores/signer.store';
 	import type { MissionControlId } from '$lib/types/mission-control';
-	import { authStore } from '$lib/stores/auth.store';
 
 	interface Props {
 		missionControlId: MissionControlId;
diff --git a/src/frontend/src/lib/components/signer/SignerCallCanister.svelte b/src/frontend/src/lib/components/signer/SignerCallCanister.svelte
new file mode 100644
index 0000000000..f373d796e6
--- /dev/null
+++ b/src/frontend/src/lib/components/signer/SignerCallCanister.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+	import { fade } from 'svelte/transition';
+	import { SIGNER_CONTEXT_KEY, type SignerContext } from '$lib/stores/signer.store';
+	import { toasts } from '$lib/stores/toasts.store';
+	import SpinnerParagraph from '$lib/components/ui/SpinnerParagraph.svelte';
+
+	const {
+		callCanisterPrompt: { payload }
+	} = getContext<SignerContext>(SIGNER_CONTEXT_KEY);
+
+	const onPayload = () => {
+		if ($payload?.status !== 'error') {
+			return;
+		}
+
+		// TODO: i18n
+		toasts.error({
+			text: '$i18n.signer.call_canister.error.cannot_call',
+			detail: $payload.details
+		});
+	};
+
+	$effect(() => {
+		$payload;
+
+		onPayload();
+	});
+</script>
+
+{#if $payload?.status === 'executing'}
+	<SpinnerParagraph>Executing call...</SpinnerParagraph>
+{:else if $payload?.status === 'result'}
+	<p in:fade>Success ✅</p>
+{:else if $payload?.status === 'error'}
+	<p in:fade>Error 🥲</p>
+{/if}
diff --git a/src/frontend/src/lib/components/signer/SignerConsentMessage.svelte b/src/frontend/src/lib/components/signer/SignerConsentMessage.svelte
index 9ba32eaaef..049f89d7ae 100644
--- a/src/frontend/src/lib/components/signer/SignerConsentMessage.svelte
+++ b/src/frontend/src/lib/components/signer/SignerConsentMessage.svelte
@@ -7,13 +7,13 @@
 	} from '@dfinity/oisy-wallet-signer';
 	import { isNullish, nonNullish } from '@dfinity/utils';
 	import { getContext } from 'svelte';
-	import { SIGNER_CONTEXT_KEY, type SignerContext } from '$lib/stores/signer.store';
-	import { toasts } from '$lib/stores/toasts.store';
-	import SpinnerParagraph from '$lib/components/ui/SpinnerParagraph.svelte';
 	import { fade } from 'svelte/transition';
-	import SignerOrigin from '$lib/components/signer/SignerOrigin.svelte';
 	import SignerConsentMessageWarning from '$lib/components/signer/SignerConsentMessageWarning.svelte';
+	import SignerOrigin from '$lib/components/signer/SignerOrigin.svelte';
 	import JsonCode from '$lib/components/ui/JsonCode.svelte';
+	import SpinnerParagraph from '$lib/components/ui/SpinnerParagraph.svelte';
+	import { SIGNER_CONTEXT_KEY, type SignerContext } from '$lib/stores/signer.store';
+	import { toasts } from '$lib/stores/toasts.store';
 
 	const {
 		consentMessagePrompt: { payload, reset: resetPrompt },
@@ -125,7 +125,7 @@
 </script>
 
 {#if loading}
-	<SpinnerParagraph>$i18n.signer.consent_message.text.loading</SpinnerParagraph>
+	<SpinnerParagraph>Loading consent message...</SpinnerParagraph>
 {:else if nonNullish(text)}
 	{@const { title, content } = text}
 
diff --git a/src/frontend/src/lib/components/signer/SignerConsentMessageWarning.svelte b/src/frontend/src/lib/components/signer/SignerConsentMessageWarning.svelte
index 494ec59163..363b069638 100644
--- a/src/frontend/src/lib/components/signer/SignerConsentMessageWarning.svelte
+++ b/src/frontend/src/lib/components/signer/SignerConsentMessageWarning.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import type { ResultConsentInfo } from '@dfinity/oisy-wallet-signer';
 	import { nonNullish } from '@dfinity/utils';
-	import { i18n } from '$lib/stores/i18n.store';
 	import Warning from '$lib/components/ui/Warning.svelte';
+	import { i18n } from '$lib/stores/i18n.store';
 
 	interface Props {
 		consentInfo: ResultConsentInfo | undefined;

From 218e0926e9c442241665b5ff9f98aab609daa537 Mon Sep 17 00:00:00 2001
From: David Dal Busco <david.dalbusco@outlook.com>
Date: Mon, 31 Mar 2025 15:49:57 +0200
Subject: [PATCH 17/17] chore: fmt

---
 src/frontend/src/lib/components/signer/Signer.svelte            | 2 +-
 .../src/lib/components/signer/SignerCallCanister.svelte         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/lib/components/signer/Signer.svelte b/src/frontend/src/lib/components/signer/Signer.svelte
index c79dc802e9..6f381b7f42 100644
--- a/src/frontend/src/lib/components/signer/Signer.svelte
+++ b/src/frontend/src/lib/components/signer/Signer.svelte
@@ -2,12 +2,12 @@
 	import { getContext } from 'svelte';
 	import { fade, type FadeParams } from 'svelte/transition';
 	import SignerAccounts from '$lib/components/signer/SignerAccounts.svelte';
+	import SignerCallCanister from '$lib/components/signer/SignerCallCanister.svelte';
 	import SignerConsentMessage from '$lib/components/signer/SignerConsentMessage.svelte';
 	import SignerIdle from '$lib/components/signer/SignerIdle.svelte';
 	import SignerPermissions from '$lib/components/signer/SignerPermissions.svelte';
 	import { SIGNER_CONTEXT_KEY, type SignerContext } from '$lib/stores/signer.store';
 	import type { MissionControlId } from '$lib/types/mission-control';
-	import SignerCallCanister from '$lib/components/signer/SignerCallCanister.svelte';
 
 	interface Props {
 		missionControlId: MissionControlId;
diff --git a/src/frontend/src/lib/components/signer/SignerCallCanister.svelte b/src/frontend/src/lib/components/signer/SignerCallCanister.svelte
index f373d796e6..c65d02009b 100644
--- a/src/frontend/src/lib/components/signer/SignerCallCanister.svelte
+++ b/src/frontend/src/lib/components/signer/SignerCallCanister.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { getContext } from 'svelte';
 	import { fade } from 'svelte/transition';
+	import SpinnerParagraph from '$lib/components/ui/SpinnerParagraph.svelte';
 	import { SIGNER_CONTEXT_KEY, type SignerContext } from '$lib/stores/signer.store';
 	import { toasts } from '$lib/stores/toasts.store';
-	import SpinnerParagraph from '$lib/components/ui/SpinnerParagraph.svelte';
 
 	const {
 		callCanisterPrompt: { payload }