Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
peterpeterparker merged 2 commits into from
Jan 8, 2026
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
39899aa
feat(frontend): support for receiving cycles with OISY signer
peterpeterparker Jan 8, 2026
5b7ded7
chore: fmt and lint
peterpeterparker Jan 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 0 additions & 21 deletions src/frontend/src/lib/api/icp-index.api.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
23 changes: 23 additions & 0 deletions src/frontend/src/lib/api/icrc-index.api.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
14 changes: 12 additions & 2 deletions src/frontend/src/lib/components/wallet/tokens/ReceiveTokens.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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(() => {
Expand Down Expand Up @@ -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">
Expand Down
35 changes: 18 additions & 17 deletions src/frontend/src/lib/components/wallet/tokens/ReceiveTokensSigner.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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)) {
Expand Down Expand Up @@ -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)) {
Expand All @@ -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';
Expand All @@ -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 />
Expand Down
20 changes: 15 additions & 5 deletions src/frontend/src/lib/components/wallet/tokens/ReceiveTokensSignerForm.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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('');
Expand All @@ -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,
Expand Down Expand Up @@ -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}
Expand Down