Guides
Removing Wallet Pop-ups

Delegation Toolkit

The following guide teaches you how to use delegations so that users don't see wallet pop-ups when executing calls to your application.

Steps

1. On-chain wallet support

On-chain wallets will run a security check to ensure your frontend can safely call your canisters on the user's behalf.

Rust implementation

Add the following to each of your backend canisters (and any you deploy dynamically). You should have one item for every domain that should have authority to call your canisters on behalf of connected wallets without prompting them with transaction approval messages.

use candid::{self, CandidType, Deserialize};
 
#[derive(Clone, Debug, CandidType, Deserialize)]
pub struct Icrc28TrustedOriginsResponse {
    pub trusted_origins: Vec<String>
}
 
#[update]
fn icrc28_trusted_origins() -> Icrc28TrustedOriginsResponse {
    let trusted_origins = vec![
        String::from("https://your-canister-id.icp0.io"),
        String::from("https://your-canister-id.raw.icp0.io"),
        String::from("https://your-canister-id.ic0.app"),
        String::from("https://your-canister-id.raw.ic0.app"),
        String::from("https://your-canister-id.icp0.icp-api.io"),
        String::from("https://your-canister-id.icp-api.io"),
        String::from("https://yourcustomdomain.com"),
        String::from("https://yourothercustomdomain.com")
    ];
 
    return Icrc28TrustedOriginsResponse { trusted_origins }
}

Note: ICRC-1, ICRC-7, and other asset canister smart contracts are discouraged from implementing this method. Wallets may mark your application as a scam if you do.

Read more about the ICRC-28 (opens in a new tab) standard.

2. List your canisters as targets

Import IdentityKitAuthType, add authType={IdentityKitAuthType.DELEGATION} and signerClientOptions={{targets: []}} props, and pass your list of targets.

import { IdentityKitAuthType } from "@nfid/identitykit"
 
const App = () => {
  return (
    <IdentityKitProvider
      authType={IdentityKitAuthType.DELEGATION}
      signerClientOptions={{
        targets=["canisterID1", "canisterID2",...]
      }}
      {...etc}
    >
      <YourApp />
    </IdentityKitProvider>
  );
};

Resources

Read about the differences working with accounts and delegations.