feat(frontend): init signer allowance before getting addresses

src/frontend/src/app.d.ts

@@ -23,6 +23,7 @@ declare namespace svelteHTML {
 		'on:oisyCkBtcMinterInfoStatus'?: (event: CustomEvent<any>) => void;
 		'on:oisyCkEthMinterInfoStatus'?: (event: CustomEvent<any>) => void;
 		'on:oisyCkEthereumPendingTransactions'?: (event: CustomEvent<any>) => void;
+		'on:oisyValidateAddresses'?: (event: CustomEvent<any>) => void;
 	}
 }
 

src/frontend/src/lib/api/backend.api.ts

@@ -6,6 +6,7 @@ import type {
 	AddUserCredentialResponse,
 	GetUserProfileResponse
 } from '$lib/types/api';
+import type { AllowSigningResponse } from '$lib/types/backend';
 import type { CanisterApiFunctionParams } from '$lib/types/canister';
 import { Principal } from '@dfinity/principal';
 import { assertNonNullish, isNullish, type QueryParams } from '@dfinity/utils';
@@ -88,6 +89,7 @@ export const getUserProfile = async ({
 
 	return getUserProfile({ certified });
 };
+
 export const addUserCredential = async ({
 	identity,
 	...params
@@ -97,6 +99,14 @@ export const addUserCredential = async ({
 	return addUserCredential(params);
 };
 
+export const allowSigning = async ({
+	identity
+}: CanisterApiFunctionParams): Promise<AllowSigningResponse> => {
+	const { allowSigning } = await backendCanister({ identity });
+
+	return allowSigning();
+};
+
 const backendCanister = async ({
 	identity,
 	nullishIdentityErrorMessage,

src/frontend/src/lib/canisters/backend.canister.ts

@@ -12,6 +12,7 @@ import type {
 	AddUserCredentialResponse,
 	GetUserProfileResponse
 } from '$lib/types/api';
+import type { AllowSigningResponse } from '$lib/types/backend';
 import type { CreateCanisterOptions } from '$lib/types/canister';
 import { Canister, createServices, toNullable, type QueryParams } from '@dfinity/utils';
 
@@ -94,4 +95,10 @@ export class BackendCanister extends Canister<BackendService> {
 			credential_spec: credentialSpec
 		});
 	};
+
+	allowSigning = async (): Promise<AllowSigningResponse> => {
+		const { allow_signing } = this.caller({ certified: true });
+
+		return allow_signing();
+	};
 }

src/frontend/src/lib/components/core/Loader.svelte

@@ -21,8 +21,10 @@
 		loadIdbAddresses
 	} from '$lib/services/address.services';
 	import { signOut } from '$lib/services/auth.services';
+	import { initSignerAllowance } from '$lib/services/loader.services';
 	import { i18n } from '$lib/stores/i18n.store';
 	import { loading } from '$lib/stores/loader.store';
+	import { emit } from '$lib/utils/events.utils';
 
 	let progressStep: string = ProgressStepsLoader.ADDRESSES;
 
@@ -83,6 +85,8 @@
 		}
 	}
 
+	const validateAddresses = () => emit({ message: 'oisyValidateAddresses' });
+
 	onMount(async () => {
 		const { success: addressIdbSuccess, err } = await loadIdbAddresses();
 
@@ -91,12 +95,21 @@
 
 			await progressAndLoad();
 
+			validateAddresses();
+
 			return;
 		}
 
 		// We are loading the addresses from the backend. Consequently, we aim to animate this operation and offer the user an explanation of what is happening. To achieve this, we will present this information within a modal.
 		progressModal = true;
 
+		const { success: initSignerAllowanceSuccess } = await initSignerAllowance();
+
+		if (!initSignerAllowanceSuccess) {
+			await signOut();
+			return;
+		}
+
 		const { success: addressSuccess } = await loadAddresses(
 			err?.map(({ tokenId }) => tokenId) ?? []
 		);

src/frontend/src/lib/components/guard/AddressGuard.svelte

@@ -1,15 +1,39 @@
 <script lang="ts">
 	import { NETWORK_BITCOIN_ENABLED } from '$env/networks.btc.env';
 	import { validateBtcAddressMainnet, validateEthAddress } from '$lib/services/address.services';
+	import { signOut } from '$lib/services/auth.services';
+	import { initSignerAllowance } from '$lib/services/loader.services';
 	import { btcAddressMainnetStore, ethAddressStore } from '$lib/stores/address.store';
 
-	$: $btcAddressMainnetStore,
-		(async () =>
-			NETWORK_BITCOIN_ENABLED
-				? await validateBtcAddressMainnet($btcAddressMainnetStore)
-				: await Promise.resolve())();
+	let signerAllowanceLoaded = false;
 
-	$: $ethAddressStore, (async () => await validateEthAddress($ethAddressStore))();
+	const loadSignerAllowanceAndValidateAddresses = async () => {
+		const { success: initSignerAllowanceSuccess } = await initSignerAllowance();
+
+		if (!initSignerAllowanceSuccess) {
+			await signOut();
+			return;
+		}
+
+		signerAllowanceLoaded = true;
+
+		await validateAddresses();
+	};
+
+	const validateAddresses = async () => {
+		if (!signerAllowanceLoaded) {
+			return;
+		}
+
+		await Promise.allSettled([
+			validateEthAddress($ethAddressStore),
+			...(NETWORK_BITCOIN_ENABLED ? [validateBtcAddressMainnet($btcAddressMainnetStore)] : [])
+		]);
+	};
+
+	$: $btcAddressMainnetStore, $ethAddressStore, (async () => await validateAddresses())();
 </script>
 
+<svelte:window on:oisyValidateAddresses={loadSignerAllowanceAndValidateAddresses} />
+
 <slot />

src/frontend/src/lib/services/loader.services.ts

@@ -0,0 +1,61 @@
+import type { AllowSigningError } from '$declarations/backend/backend.did';
+import { allowSigning } from '$lib/api/backend.api';
+import { authStore } from '$lib/stores/auth.store';
+import { i18n } from '$lib/stores/i18n.store';
+import { toastsError } from '$lib/stores/toasts.store';
+import type { ResultSuccess } from '$lib/types/utils';
+import { mapIcrc2ApproveError } from '@dfinity/ledger-icp';
+import { get } from 'svelte/store';
+
+/**
+ * `allow_signing` needs to be called before get eth address etc. It is currently enough to call it once at boot time.
+ * It provides a cycles budget that should be big enough for any reasonable number of calls to the signer.
+ * "reasonable" is currently defined as 30 calls, so one call to allow should enable the user to get their eth+btc addresses and then make say 28 transactions.
+ */
+export const initSignerAllowance = async (): Promise<ResultSuccess> => {
+	try {
+		const { identity } = get(authStore);
+
+		const result = await allowSigning({ identity });
+
+		// TODO: maybe we do not even need a toast given that the user is signed out anyway?
+
+		if ('Err' in result) {
+			const mapErr = (err: AllowSigningError): Error => {
+				if ('ApproveError' in err) {
+					return mapIcrc2ApproveError(err.ApproveError);
+				}
+
+				if ('FailedToContactCyclesLedger' in err) {
+					return new Error('TODO_FailedToContactCyclesLedger');
+				}
+
+				if ('Other' in err) {
+					return new Error(err.Other);
+				}
+
+				return new Error();
+			};
+
+			const err = mapErr(result.Err);
+
+			toastsError({
+				msg: { text: get(i18n).send.error.unexpected },
+				err
+			});
+
+			return { success: false };
+		}
+	} catch (err: unknown) {
+		toastsError({
+			msg: {
+				text: get(i18n).init.error.loading_address
+			},
+			err
+		});
+
+		return { success: false };
+	}
+
+	return { success: true };
+};

src/frontend/src/lib/types/backend.ts

@@ -0,0 +1,3 @@
+import type { Result_1 } from '$declarations/backend/backend.did';
+
+export type AllowSigningResponse = Result_1;