feat(frontend): support for receiving cycles with OISY signer (#2489)

* feat(frontend): support for receiving cycles with OISY signer

* chore: fmt and lint

Author: peterpeterparker

src/frontend/src/lib/api/icp-index.api.ts

@@ -5,27 +5,6 @@ import { assertNonNullish } from '@dfinity/utils';
 import { IcpIndexCanister, type IcpIndexDid } from '@icp-sdk/canisters/ledger/icp';
 import type { IcrcAccount } from '@icp-sdk/canisters/ledger/icrc';
 
-export const getBalance = async ({
-	account,
-	identity
-}: {
-	account: IcrcAccount;
-	identity: OptionIdentity;
-}): Promise<bigint> => {
-	assertNonNullish(identity, 'No internet identity to initialize the Index actor.');
-
-	const agent = await getAgent({ identity });
-
-	const { accountBalance } = IcpIndexCanister.create({
-		agent
-	});
-
-	return accountBalance({
-		accountIdentifier: toAccountIdentifier(account).toHex(),
-		certified: false
-	});
-};
-
 export const getIcpTransactions = async ({
 	account,
 	identity,

src/frontend/src/lib/api/icrc-index.api.ts

@@ -8,6 +8,29 @@ import {
 	type IcrcIndexDid
 } from '@icp-sdk/canisters/ledger/icrc';
 
+export const getUncertifiedBalance = async ({
+	account,
+	identity,
+	indexId
+}: {
+	account: IcrcAccount;
+	identity: OptionIdentity;
+} & Pick<LedgerIds, 'indexId'>): Promise<bigint> => {
+	assertNonNullish(identity, 'No internet identity to initialize the ICRC Index actor.');
+
+	const agent = await getAgent({ identity });
+
+	const { balance } = IcrcIndexCanister.create({
+		agent,
+		canisterId: indexId
+	});
+
+	return balance({
+		...account,
+		certified: false
+	});
+};
+
 export const getIcrcTransactions = async ({
 	account,
 	indexId,

src/frontend/src/lib/components/wallet/tokens/ReceiveTokens.svelte

@@ -6,8 +6,9 @@
 	import Popover from '$lib/components/ui/Popover.svelte';
 	import ReceiveTokensQRCode from '$lib/components/wallet/tokens/ReceiveTokensQRCode.svelte';
 	import ReceiveTokensSigner from '$lib/components/wallet/tokens/ReceiveTokensSigner.svelte';
+	import { CYCLES, ICP } from '$lib/constants/token.constants';
 	import { isNotSkylab } from '$lib/env/app.env';
-	import type { SelectedWallet } from '$lib/schemas/wallet.schema';
+	import type { SelectedToken, SelectedWallet } from '$lib/schemas/wallet.schema';
 	import { i18n } from '$lib/stores/app/i18n.store';
 	import { toAccountIdentifier } from '$lib/utils/icp-icrc-account.utils';
 
@@ -23,6 +24,10 @@
 	let walletIdText = $derived(encodeIcrcAccount(walletId));
 	let accountIdentifier = $derived(toAccountIdentifier(walletId));
 
+	let selectedToken = $derived<SelectedToken>(
+		selectedWallet?.type === 'mission_control' ? ICP : CYCLES
+	);
+
 	let step: 'options' | 'wallet_id' | 'account_identifier' | 'signer' = $state('options');
 
 	$effect(() => {
@@ -53,7 +58,12 @@
 			</div>
 		{:else if step === 'signer'}
 			<div in:fade>
-				<ReceiveTokensSigner back={() => (step = 'options')} {walletId} bind:visible />
+				<ReceiveTokensSigner
+					back={() => (step = 'options')}
+					{selectedToken}
+					{walletId}
+					bind:visible
+				/>
 			</div>
 		{:else}
 			<div class="options">

src/frontend/src/lib/components/wallet/tokens/ReceiveTokensSigner.svelte

@@ -1,35 +1,35 @@
 <script lang="ts">
 	import type { IcrcAccount } from '@dfinity/oisy-wallet-signer';
-	import { IcpWallet } from '@dfinity/oisy-wallet-signer/icp-wallet';
-	import { ICPToken, isNullish, nonNullish, toNullable } from '@dfinity/utils';
-	import type { Icrc1TransferRequest } from '@icp-sdk/canisters/ledger/icp';
+	import { IcrcWallet } from '@dfinity/oisy-wallet-signer/icrc-wallet';
+	import { isNullish, nonNullish, toNullable } from '@dfinity/utils';
+	import type { TransferParams } from '@icp-sdk/canisters/ledger/icrc';
 	import Confetti from '$lib/components/ui/Confetti.svelte';
 	import Spinner from '$lib/components/ui/Spinner.svelte';
 	import ReceiveTokensSignerForm from '$lib/components/wallet/tokens/ReceiveTokensSignerForm.svelte';
-	import { ICP } from '$lib/constants/token.constants';
 	import { OISY_WALLET_OPTIONS } from '$lib/constants/wallet.constants';
-	import type { WalletId } from '$lib/schemas/wallet.schema';
+	import type { SelectedToken, WalletId } from '$lib/schemas/wallet.schema';
 	import { wizardBusy } from '$lib/stores/app/busy.store';
 	import { i18n } from '$lib/stores/app/i18n.store';
 	import { toasts } from '$lib/stores/app/toasts.store';
 	import { assertAndConvertAmountToToken } from '$lib/utils/token.utils';
 
 	interface Props {
 		walletId: WalletId;
+		selectedToken: SelectedToken;
 		back: () => void;
 		visible?: boolean;
 	}
 
-	let { back, walletId, visible = $bindable() }: Props = $props();
+	let { back, walletId, selectedToken, visible = $bindable() }: Props = $props();
 
 	let step: 'connecting' | 'receiving' | 'form' | 'success' = $state('connecting');
 	let account: IcrcAccount | undefined = $state(undefined);
 
 	const init = async () => {
-		let wallet: IcpWallet | undefined;
+		let wallet: IcrcWallet | undefined;
 
 		try {
-			wallet = await IcpWallet.connect({
+			wallet = await IcrcWallet.connect({
 				...OISY_WALLET_OPTIONS,
 				onDisconnect: () => {
 					if (nonNullish(account)) {
@@ -73,8 +73,8 @@
 		const { valid, tokenAmount } = assertAndConvertAmountToToken({
 			amount,
 			balance,
-			token: ICPToken,
-			fee: ICP.fees.transaction
+			token: selectedToken.token,
+			fee: selectedToken.fees.transaction
 		});
 
 		if (!valid || isNullish(tokenAmount)) {
@@ -92,24 +92,25 @@
 
 		step = 'receiving';
 
-		let wallet: IcpWallet | undefined;
+		let wallet: IcrcWallet | undefined;
 
 		try {
-			wallet = await IcpWallet.connect(OISY_WALLET_OPTIONS);
+			wallet = await IcrcWallet.connect(OISY_WALLET_OPTIONS);
 
 			const { owner, subaccount } = walletId;
 
-			const request: Icrc1TransferRequest = {
+			const params: TransferParams = {
 				to: {
 					owner,
 					subaccount: toNullable(subaccount)
 				},
-				amount: tokenAmount.toE8s()
+				amount: tokenAmount.toUlps()
 			};
 
-			await wallet.icrc1Transfer({
+			await wallet.transfer({
 				owner: account.owner,
-				request
+				params,
+				ledgerCanisterId: selectedToken.ledgerId
 			});
 
 			step = 'success';
@@ -136,7 +137,7 @@
 		<button onclick={() => (visible = false)}>{$i18n.core.close}</button>
 	</div>
 {:else if step === 'form' && nonNullish(account)}
-	<ReceiveTokensSignerForm {account} {back} receive={onsubmit} />
+	<ReceiveTokensSignerForm {account} {back} receive={onsubmit} {selectedToken} />
 {:else}
 	<div class="spinner">
 		<Spinner inline />

src/frontend/src/lib/components/wallet/tokens/ReceiveTokensSignerForm.svelte

@@ -2,23 +2,26 @@
 	import type { IcrcAccount } from '@dfinity/oisy-wallet-signer';
 	import { base64ToUint8Array, nonNullish } from '@dfinity/utils';
 	import { Principal } from '@icp-sdk/core/principal';
-	import { getBalance } from '$lib/api/icp-index.api';
+	import { getUncertifiedBalance } from '$lib/api/icrc-index.api';
 	import Identifier from '$lib/components/ui/Identifier.svelte';
 	import Input from '$lib/components/ui/Input.svelte';
 	import SkeletonText from '$lib/components/ui/SkeletonText.svelte';
 	import Value from '$lib/components/ui/Value.svelte';
+	import TokenSymbol from '$lib/components/wallet/tokens/TokenSymbol.svelte';
 	import { authIdentity } from '$lib/derived/auth.derived';
+	import type { SelectedToken } from '$lib/schemas/wallet.schema';
 	import { i18n } from '$lib/stores/app/i18n.store';
 	import { toasts } from '$lib/stores/app/toasts.store';
-	import { formatICP } from '$lib/utils/icp.utils';
+	import { formatToken } from '$lib/utils/token.utils';
 
 	interface Props {
 		account: IcrcAccount;
+		selectedToken: SelectedToken;
 		back: () => void;
 		receive: (params: { balance: bigint | undefined; amount: string }) => Promise<void>;
 	}
 
-	let { account, back, receive }: Props = $props();
+	let { account, selectedToken, back, receive }: Props = $props();
 
 	let balance: bigint | undefined = $state(undefined);
 	let amount = $state('');
@@ -30,7 +33,11 @@
 				? base64ToUint8Array(account.subaccount)
 				: undefined;
 
-			balance = await getBalance({ account: { owner, subaccount }, identity: $authIdentity });
+			balance = await getUncertifiedBalance({
+				account: { owner, subaccount },
+				identity: $authIdentity,
+				indexId: Principal.fromText(selectedToken.indexId)
+			});
 		} catch (err: unknown) {
 			toasts.error({
 				text: $i18n.errors.wallet_load_balance,
@@ -71,7 +78,10 @@
 				{$i18n.wallet.balance}
 			{/snippet}
 			{#if nonNullish(balance)}
-				{formatICP(balance)} <small>ICP</small>
+				<span
+					>{formatToken({ selectedToken, amount: balance })}
+					<TokenSymbol {selectedToken} /></span
+				>
 			{:else}
 				<SkeletonText />
 			{/if}