Using @dfinity/oisy-wallet-signer (OISY-Specific SDK)

This is a lightweight library from DFINITY created specifically for interacting with the OISY wallet. It simplifies the connection process and common actions like ICP transfers by abstracting some of the ICRC standard details.

Install:

npm install @dfinity/oisy-wallet-signer @dfinity/principal @dfinity/ledger-icp
# or yarn add / pnpm add

Basic Usage (Example): Connect to OISY and perform an ICP transfer.

import { OisyWalletSigner, ओisyWallet } from '@dfinity/oisy-wallet-signer'; // Check exact import paths from lib
import { Principal } from '@dfinity/principal';
import { AccountIdentifier, SubAccount } from '@dfinity/ledger-icp'; // For ICP ledger account types
import type { TransferArgs as IcpTransferArgs } from '@dfinity/ledger-icp'; // For ICP types

let oisyClient: ओisyWallet | null = null; // The client object from the library

const OISY_SIGN_PAGE_URL = 'https://oisy.com/sign'; // OISY's production sign page
const ICP_LEDGER_CANISTER_ID_TEXT = 'ryjl3-tyaaa-aaaaa-aaaba-cai';

async function connectWithOisyLib() {
  console.log('Connecting using @dfinity/oisy-wallet-signer...');
  try {
    // 1. Connect - library handles opening window, handshake (ICRC-25)
    // The `OisyWalletSigner.create()` method initiates the connection.
    oisyClient = await OisyWalletSigner.create({
      signPageUrl: OISY_SIGN_PAGE_URL,
      // Optional: configure window size, onDisconnect callback etc.
      // windowFeatures: 'width=500,height=700,noopener,noreferrer',
      // onDisconnect: () => {
      //   console.log("OISY disconnected callback from library!");
      //   oisyClient = null;
      //   updateUIOnDisconnectOisyLib();
      // }
      // targets: [Principal.fromText(ICP_LEDGER_CANISTER_ID_TEXT)] // Optional: specify target canisters
    });

    console.log('Connected with OISY library client.');
    const principal = oisyClient.principal;
    const accounts = await oisyClient.getAccounts(); // Uses ICRC-27
    console.log('OISY Principal from library:', principal.toText());
    console.log('OISY Accounts from library:', accounts);

    if (!accounts || accounts.length === 0) {
      throw new Error('No accounts found after connecting with OISY library.');
    }

    // Update UI
    updateUIOnConnectOisyLib(principal.toText(), accounts.identifier); // Your function
  } catch (error) {
    console.error('OISY Lib Connection failed:', error);
    alert(`OISY Lib Connection Error: ${error.message || error}`);
    oisyClient = null; // Reset on failure
    updateUIOnDisconnectOisyLib();
  }
}

async function transferWithOisyLib() {
  if (!oisyClient) {
    alert('Not connected with OISY library client!');
    return;
  }

  const recipientPrincipal = Principal.fromText('uzr34-vyaaa-aaaaq-aaaea-cai'); // Example, replace
  // For ICP ledger, we need AccountIdentifier
  const recipientAccount = AccountIdentifier.fromPrincipal({ principal: recipientPrincipal });
  const amount = 200_000n; // 0.002 ICP (200,000 e8s)

  try {
    console.log('Requesting ICP transfer using OISY library helper...');

    // The library provides an agent that can be used to create actors,
    // or it might have direct helper methods for common actions.
    // Let's assume it provides a way to get an agent or call ICP ledger directly.

    // Example: Using a generic `callCanister` if available, or a specific transfer method.
    // The exact API might differ, refer to the library's documentation.
    // Here, we assume a method similar to `callCanister` for an ICRC-49 style call.

    const transferArgs: IcpTransferArgs = {
      to: recipientAccount.toUint8Array(),
      fee: { e8s: 10_000n },
      memo: 0n,
      from_subaccount: [], // Empty for default subaccount
      created_at_time: [],
      amount: { e8s: amount },
    };

    // The `oisyClient.agent` can be used with `Actor.createActor`
    // Or if the library has a high-level transfer function:
    // const blockHeight = await oisyClient.icpTransfer(transferArgs);

    // Using the agent to make the call:
    const icpLedgerActor = Actor.createActor(
      // You'd need the ICP ledger IDL factory here
      // For example: import { idlFactory as ledgerIdlFactory } from '@dfinity/nns-ledger';
      (await import('@dfinity/nns-ledger')).idlFactory,
      {
        agent: oisyClient.agent, // The agent provided by the OISY library client
        canisterId: Principal.fromText(ICP_LEDGER_CANISTER_ID_TEXT),
      }
    );

    const blockHeight = await icpLedgerActor.transfer(transferArgs);

    console.log('ICP Transfer Result from library (Block Height):', blockHeight);
    alert(`ICP Transfer successful! Block Height: ${blockHeight}`);
  } catch (error) {
    console.error('OISY Lib ICP Transfer failed:', error);
    alert(`OISY Lib ICP Transfer failed: ${error.message || error}`);
  }
}

async function disconnectOisyLib() {
  if (oisyClient) {
    // The library should provide a disconnect method
    // await oisyClient.disconnect(); // Assuming such a method exists
    // For now, as `disconnect` is not explicitly on `ओisyWallet`, we'll just nullify
    console.log('Simulating disconnect for OISY library client.');
    oisyClient = null;
    updateUIOnDisconnectOisyLib(); // Your function
  }
}

// --- Placeholder UI functions (implement these) ---
function updateUIOnConnectOisyLib(principalText: string, accountHex: string) {
  document.getElementById('connect-oisy-lib').style.display = 'none';
  document.getElementById('disconnect-oisy-lib').style.display = 'block';
  document.getElementById('user-info-lib').innerText =
    `Connected: ${principalText}, Account: ${accountHex}`;
  document.getElementById('transfer-oisy-lib').style.display = 'block';
}
function updateUIOnDisconnectOisyLib() {
  document.getElementById('connect-oisy-lib').style.display = 'block';
  document.getElementById('disconnect-oisy-lib').style.display = 'none';
  document.getElementById('user-info-lib').innerText = 'Not Connected';
  document.getElementById('transfer-oisy-lib').style.display = 'none';
}

// --- Add button listeners in your HTML ---
// <button id="connect-oisy-lib">Connect OISY (Lib)</button>
// <button id="disconnect-oisy-lib" style="display:none;">Disconnect (Lib)</button>
// <p id="user-info-lib">Not Connected</p>
// <button id="transfer-oisy-lib" style="display:none;">Send ICP (Lib)</button>
document.getElementById('connect-oisy-lib')?.addEventListener('click', connectWithOisyLib);
document.getElementById('transfer-oisy-lib')?.addEventListener('click', transferWithOisyLib);
document.getElementById('disconnect-oisy-lib')?.addEventListener('click', disconnectOisyLib);

• OisyWalletSigner.create() handles the connection setup.

• The library provides an agent (oisyClient.agent) that is pre-configured to route signing requests through OISY. You use this agent to create actors for your canisters.

• It should also manage the communication channel and potentially offer a disconnect method (though check its latest API for specifics)

OISY Wallet Signer Summary

This library aims for simplicity when OISY is the sole or primary wallet for your dApp. It abstracts away some of the direct ICRC standard interactions, making it quicker to get started for basic OISY integration. It's less flexible if you need to support other wallets or require highly custom interaction flows. Always refer to its official documentation for the most up-to-date API and usage patterns.