feat(frontend): integrate pow into loader and guard logic

src/frontend/src/icp/schedulers/pow-protection.scheduler.ts

@@ -3,6 +3,7 @@ import { allowSigning, createPowChallenge } from '$lib/api/backend.api';
 import { CreateChallengeEnum, PowCreateChallengeError } from '$lib/canisters/backend.errors';
 import { POW_CHALLENGE_INTERVAL_MILLIS } from '$lib/constants/pow.constants';
 import { SchedulerTimer, type Scheduler, type SchedulerJobData } from '$lib/schedulers/scheduler';
+import { hasRequiredCycles } from '$lib/services/loader.services';
 import type {
 	PostMessageDataRequest,
 	PostMessageDataResponsePowProtectorNextAllowance,
@@ -44,6 +45,11 @@ export class PowProtectionScheduler implements Scheduler<PostMessageDataRequest>
 	 * @throws Errors if any step with no specific error handling in the sequence fails.
 	 */
 	private requestSignerCycles = async ({ identity }: SchedulerJobData<PostMessageDataRequest>) => {
+		if (await hasRequiredCycles()) {
+			// we do not need to start the PoW if the user has enough cycles
+			return;
+		}
+
 		// Step 1: Request creation of the Proof-of-Work (PoW) challenge (throws when unsuccessful).
 		this.postMessagePowProgress({ progress: 'REQUEST_CHALLENGE' });
 		try {

src/frontend/src/icp/services/pow-protector-listener.ts

@@ -0,0 +1,40 @@
+import {
+	powProtectoreNextAllowanceStore,
+	powProtectoreProgressStore,
+	type PowProtectorNextAllowanceData,
+	type PowProtectorProgressData
+} from '$lib/stores/pow-protection.store';
+import type {
+	PostMessageDataResponsePowProtectorNextAllowance,
+	PostMessageDataResponsePowProtectorProgress
+} from '$lib/types/post-message';
+
+export interface PowProtectorWorkerInitResult {
+	start: () => void;
+	stop: () => void;
+	trigger: () => void;
+}
+
+export type PowProtectorWorker = () => Promise<PowProtectorWorkerInitResult>;
+
+export const syncPowProgress = ({
+	data
+}: {
+	data: PostMessageDataResponsePowProtectorProgress;
+}) => {
+	const mappedData: PowProtectorProgressData = {
+		progress: data.progress
+	};
+	powProtectoreProgressStore.setPowProtectorProgressData(mappedData);
+};
+
+export const syncPowNextAllowance = ({
+	data
+}: {
+	data: PostMessageDataResponsePowProtectorNextAllowance;
+}) => {
+	const mappedData: PowProtectorNextAllowanceData = {
+		nextAllowanceMs: data.nextAllowanceMs
+	};
+	powProtectoreNextAllowanceStore.setPowProtectorNextAllowanceData(mappedData);
+};

src/frontend/src/icp/services/worker.pow-protection.services.ts

@@ -1,16 +1,54 @@
+import {
+	syncPowNextAllowance,
+	syncPowProgress,
+	type PowProtectorWorker,
+	type PowProtectorWorkerInitResult
+} from '$icp/services/pow-protector-listener';
 import type {
-	PowProtectorWorker,
-	PowProtectorWorkerInitResult
-} from '$icp/types/pow-protector-listener';
-import type { PostMessage, PostMessageDataResponse } from '$lib/types/post-message';
+	PostMessage,
+	PostMessageDataResponseError,
+	PostMessageDataResponsePowProtectorNextAllowance,
+	PostMessageDataResponsePowProtectorProgress
+} from '$lib/types/post-message';
 
 // TODO: add tests for POW worker/scheduler
 export const initPowProtectorWorker: PowProtectorWorker =
 	async (): Promise<PowProtectorWorkerInitResult> => {
 		const PowWorker = await import('$lib/workers/workers?worker');
 		const worker: Worker = new PowWorker.default();
 
-		worker.onmessage = ({ data: _data }: MessageEvent<PostMessage<PostMessageDataResponse>>) => {};
+		worker.onmessage = ({
+			data
+		}: MessageEvent<
+			PostMessage<
+				| PostMessageDataResponsePowProtectorProgress
+				| PostMessageDataResponsePowProtectorNextAllowance
+				| PostMessageDataResponseError
+			>
+		>) => {
+			const { msg } = data;
+
+			switch (msg) {
+				case 'syncPowProgress': {
+					// Check if data.data exists and has proper structure
+					if (data.data && 'progress' in data.data) {
+						syncPowProgress({
+							data: data.data
+						});
+					}
+					return;
+				}
+				case 'syncPowNextAllowance': {
+					// Check if data.data exists and has proper structure
+					if (data.data && 'nextAllowanceMs' in data.data) {
+						syncPowNextAllowance({
+							data: data.data
+						});
+					}
+					return;
+				}
+			}
+		};
 
 		return {
 			start: () => {

src/frontend/src/icp/utils/icrc-account.utils.ts

@@ -1,7 +1,7 @@
-import { decodeIcrcAccount, type IcrcAccount } from '@dfinity/ledger-icrc';
+import { AccountIdentifier } from '@dfinity/ledger-icp';
+import { decodeIcrcAccount, type IcrcAccount, type IcrcSubaccount } from '@dfinity/ledger-icrc';
 import type { Principal } from '@dfinity/principal';
 import { isNullish } from '@dfinity/utils';
-import { sha256 } from '@noble/hashes/sha256';
 
 export const getIcrcAccount = (principal: Principal): IcrcAccount => ({ owner: principal });
 
@@ -10,9 +10,14 @@ export const getIcrcAccount = (principal: Principal): IcrcAccount => ({ owner: p
  * @param principal The principal to derive the subaccount from
  * @returns A 32-byte Uint8Array to be used as an ICRC subaccount
  */
-export const getIcrcSubaccount = (principal: Principal): Uint8Array => {
-	const principalBytes = principal.toUint8Array();
-	return sha256(principalBytes);
+export const getIcrcSubaccount = (principal: Principal): IcrcSubaccount => {
+	const accountIdentifier = AccountIdentifier.fromPrincipal({
+		principal,
+		subAccount: undefined
+	});
+
+	// Convert to Uint8Array (the bytes of the account identifier)
+	return accountIdentifier.toUint8Array();
 };
 
 export const isIcrcAddress = (address: string | undefined): boolean => {

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

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { validateBtcAddressMainnet } from '$btc/services/btc-address.services';
+	import { POW_FEATURE_ENABLED } from '$env/pow.env';
 	import { validateEthAddress } from '$eth/services/eth-address.services';
 	import {
 		networkBitcoinMainnetEnabled,
@@ -18,13 +19,14 @@
 	let signerAllowanceLoaded = false;
 
 	const loadSignerAllowanceAndValidateAddresses = async () => {
-		const { success: initSignerAllowanceSuccess } = await initSignerAllowance();
+		if (!POW_FEATURE_ENABLED) {
+			const { success: initSignerAllowanceSuccess } = await initSignerAllowance();
 
-		if (!initSignerAllowanceSuccess) {
-			// Sign-out is handled within the service.
-			return;
+			if (!initSignerAllowanceSuccess) {
+				// Sign-out is handled within the service.
+				return;
+			}
 		}
-
 		signerAllowanceLoaded = true;
 
 		await validateAddresses();

src/frontend/src/lib/components/loaders/Loaders.svelte

@@ -11,33 +11,36 @@
 	import LoaderMetamask from '$lib/components/loaders/LoaderMetamask.svelte';
 	import LoaderUserProfile from '$lib/components/loaders/LoaderUserProfile.svelte';
 	import LoaderWallets from '$lib/components/loaders/LoaderWallets.svelte';
+	import PowProtector from '$lib/components/pow/PowProtector.svelte';
 	import UserSnapshotWorker from '$lib/components/rewards/UserSnapshotWorker.svelte';
 </script>
 
 <LoaderUserProfile>
-	<AddressGuard>
-		<Loader>
-			<UrlGuard>
-				<ShortcutGuard>
-					<RewardGuard>
-						<LoaderEthBalances>
-							<LoaderWallets>
-								<ExchangeWorker>
-									<LoaderMetamask>
-										<UserSnapshotWorker>
-											<LoaderContacts>
-												<slot />
-											</LoaderContacts>
-										</UserSnapshotWorker>
-									</LoaderMetamask>
-								</ExchangeWorker>
-							</LoaderWallets>
-						</LoaderEthBalances>
-					</RewardGuard>
-				</ShortcutGuard>
-			</UrlGuard>
-		</Loader>
-	</AddressGuard>
+	<PowProtector>
+		<AddressGuard>
+			<Loader>
+				<UrlGuard>
+					<ShortcutGuard>
+						<RewardGuard>
+							<LoaderEthBalances>
+								<LoaderWallets>
+									<ExchangeWorker>
+										<LoaderMetamask>
+											<UserSnapshotWorker>
+												<LoaderContacts>
+													<slot />
+												</LoaderContacts>
+											</UserSnapshotWorker>
+										</LoaderMetamask>
+									</ExchangeWorker>
+								</LoaderWallets>
+							</LoaderEthBalances>
+						</RewardGuard>
+					</ShortcutGuard>
+				</UrlGuard>
+			</Loader>
+		</AddressGuard>
+	</PowProtector>
 </LoaderUserProfile>
 
 <!-- This listener is kept outside of the Loaders tree to prevent slow page loading on localhost/e2e -->