feat: restart wallet after send (#1104)

Signed-off-by: David Dal Busco <[email protected]>

src/frontend/src/app.d.ts

@@ -23,6 +23,7 @@ declare namespace svelteHTML {
 		onjunoCloseActions?: (event: CustomEvent<any>) => void;
 		onjunoRegistrationState?: (event: CustomEvent<any>) => void;
 		onjunoReloadAuthConfig?: (event: CustomEvent<any>) => void;
+		onjunoRestartWallet?: (event: CustomEvent<any>) => void;
 	}
 }
 

src/frontend/src/lib/components/wallet/WalletLoader.svelte

@@ -28,8 +28,18 @@
 		});
 	});
 
+	const onRestartWallet = () => {
+		if (isNullish(missionControlId)) {
+			return;
+		}
+
+		worker?.restart({ missionControlId });
+	};
+
 	onMount(async () => await initWorker());
 	onDestroy(() => worker?.stop());
 </script>
 
+<svelte:window onjunoRestartWallet={onRestartWallet} />
+
 {@render children?.()}

src/frontend/src/lib/constants/wallet.constants.ts

@@ -19,3 +19,9 @@ export const OISY_WALLET_OPTIONS: RelyingPartyOptions = DEV
 	: {
 			url: 'https://oisy.com/sign'
 		};
+
+// From FI team:
+// On mainnet, the index runs its indexing function every second. The time to see a new transaction in the index is <=1 second plus the time required by the indexing function
+// (however)
+// ICP Index has not been upgraded yet so right know for ICP is variable between 0 and 2 seconds. Leo has changed the ckBTC and ckETH to run every second and we want to change the ICP one too eventually. We just didn't get to work on it yet
+export const INDEX_RELOAD_DELAY = 2000;

src/frontend/src/lib/schema/post-message.schema.ts

@@ -67,6 +67,7 @@ export const PostMessageRequestMsgSchema = z.enum([
 	'stopCustomDomainRegistrationTimer',
 	'stopWalletTimer',
 	'startWalletTimer',
+	'restartWalletTimer',
 	'startMonitoringTimer',
 	'stopMonitoringTimer',
 	'restartMonitoringTimer'

src/frontend/src/lib/services/tokens.services.ts

@@ -8,6 +8,7 @@ import type { MissionControlId } from '$lib/types/mission-control';
 import { nowInBigIntNanoSeconds } from '$lib/utils/date.utils';
 import { invalidIcpAddress } from '$lib/utils/icp-account.utils';
 import { invalidIcrcAddress } from '$lib/utils/icrc-account.utils';
+import { waitAndRestartWallet } from '$lib/utils/wallet.utils';
 import { AccountIdentifier } from '@dfinity/ledger-icp';
 import { decodeIcrcAccount } from '@dfinity/ledger-icrc';
 import { Principal } from '@dfinity/principal';
@@ -56,6 +57,8 @@ export const sendTokens = async ({
 			missionControlId
 		});
 
+		await waitAndRestartWallet();
+
 		return { success: true };
 	} catch (err: unknown) {
 		const labels = get(i18n);

src/frontend/src/lib/services/worker.wallet.services.ts

@@ -15,6 +15,7 @@ import type {
 
 export interface WalletWorker {
 	start: (params: { missionControlId: MissionControlId }) => void;
+	restart: (params: { missionControlId: MissionControlId }) => void;
 	stop: () => void;
 }
 
@@ -61,6 +62,12 @@ export const initWalletWorker = async (): Promise<WalletWorker> => {
 				data: { missionControlId: missionControlId.toText() }
 			});
 		},
+		restart: ({ missionControlId }: { missionControlId: MissionControlId }) => {
+			worker.postMessage({
+				msg: 'restartWalletTimer',
+				data: { missionControlId: missionControlId.toText() }
+			});
+		},
 		stop: () => {
 			worker.postMessage({
 				msg: 'stopWalletTimer'

src/frontend/src/lib/utils/timeout.utils.ts

@@ -0,0 +1,4 @@
+export const waitForMilliseconds = (milliseconds: number): Promise<void> =>
+	new Promise((resolve) => {
+		setTimeout(resolve, milliseconds);
+	});

src/frontend/src/lib/utils/wallet.utils.ts

@@ -1,5 +1,6 @@
 import { getAccountIdentifier } from '$lib/api/icp-index.api';
 import {
+	INDEX_RELOAD_DELAY,
 	MEMO_CANISTER_CREATE,
 	MEMO_CANISTER_TOP_UP,
 	MEMO_ORBITER_CREATE_REFUND,
@@ -8,10 +9,25 @@ import {
 import { i18n } from '$lib/stores/i18n.store';
 import type { IcTransactionUi } from '$lib/types/ic-transaction';
 import type { MissionControlId } from '$lib/types/mission-control';
+import { emit } from '$lib/utils/events.utils';
 import { formatICP } from '$lib/utils/icp.utils';
+import { waitForMilliseconds } from '$lib/utils/timeout.utils';
 import { nonNullish } from '@dfinity/utils';
 import { get } from 'svelte/store';
 
+/**
+ * Wait few seconds and trigger the wallet to fetch optimistically new transactions twice.
+ */
+export const waitAndRestartWallet = async () => {
+	await waitForMilliseconds(INDEX_RELOAD_DELAY);
+
+	// Best case scenario, the transaction has already been noticed by the index canister after INDEX_RELOAD_DELAY seconds.
+	emit({ message: 'junoRestartWallet' });
+
+	// In case the best case scenario was not met, we optimistically try to retrieve the transactions on more time given that we generally retrieve transactions every WALLET_TIMER_INTERVAL_MILLIS seconds without blocking the UI.
+	waitForMilliseconds(INDEX_RELOAD_DELAY).then(() => emit({ message: 'junoRestartWallet' }));
+};
+
 export const transactionMemo = ({
 	transaction,
 	missionControlId

src/frontend/src/lib/workers/wallet.worker.ts

@@ -32,6 +32,10 @@ export const onWalletMessage = async ({ data: dataMsg }: MessageEvent<PostMessag
 		case 'startWalletTimer':
 			await startTimer({ data });
 			return;
+		case 'restartWalletTimer':
+			stopTimer();
+			await startTimer({ data });
+			return;
 	}
 };