OISY Wallet

https://docs.oisy.com/
Admin
OISY Wallet is the world's first fully on-chain digital asset wallet that simplifies DeFi navigation...
Tokens:11,345
Snippets:29
Trust Score:6.5
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install Frontend Dependencies and Deploy OISY Locally

Source: https://docs.oisy.com/for-developers/icp-building-blocks/build-and-run-yourself

Commands to install frontend dependencies using npm and deploy the OISY project locally. This involves running `npm ci` to install packages and `npm run deploy` after setting up the `.env.development` file.

```bash
npm ci
npm run deploy
```

--------------------------------

### Start and Stop Local IC Replica using dfx

Source: https://docs.oisy.com/for-developers/icp-building-blocks/build-and-run-yourself

Commands to start and stop the local Internet Computer (IC) replica. The replica is necessary for local development and testing of canisters. Ensure you are in the project directory containing `dfx.json` before running these commands.

```bash
dfx start --background
dfx stop
```

--------------------------------

### Rust Example for Serving Web Applications from Chain

Source: https://docs.oisy.com/for-developers/icp-building-blocks

This Rust code snippet illustrates how to serve web applications, including HTML files and images, directly from an ICP canister. This functionality is enabled by ICP's low storage costs and low latency. It requires a Rust development environment and the ICP SDK.

```rust
use ic_cdk::export::candid::{CandidType, Deserialize};
use ic_cdk_macros::query;

#[derive(CandidType, Deserialize)]
struct HttpRequest {
    method: String,
    url: String,
    headers: Vec<(String, String)>,
    body: Vec<u8>,
}

#[derive(CandidType, Deserialize)]
struct HttpResponse {
    status_code: u16,
    headers: Vec<(String, String)>,
    body: Vec<u8>,
}

#[query]
fn http_request(req: HttpRequest) -> HttpResponse {
    // Logic to serve web content based on the request
    HttpResponse {
        status_code: 200,
        headers: vec![("Content-Type".to_string(), "text/html".to_string())],
        body: b"<h1>Hello, ICP!</h1>".to_vec(),
    }
}
```

--------------------------------

### JavaScript Example for Internet Identity Integration

Source: https://docs.oisy.com/for-developers/icp-building-blocks

This example shows how to integrate Internet Identity (II) into a canister smart contract. It leverages WebAuthn and ICP's threshold BLS signature schemes for secure authentication and key management. This requires JavaScript development environment and ICP canister SDK.

```javascript
import { AuthClient } from '@dfinity/auth-client';

async function login() {
  const authClient = await AuthClient.create();
  await authClient.login({
    identityProvider: 'https://identity.ic0.app/#authorize',
    // ... other options
  });
  const identity = authClient.getIdentity();
  // Use the identity to interact with canisters
}
```

--------------------------------

### Rust Example for Chain-Key Signatures on ICP

Source: https://docs.oisy.com/for-developers/icp-building-blocks

This snippet demonstrates how to use chain-key signatures on ICP, allowing smart contracts to perform cryptographic signatures without a single entity having full access to the private key. It requires a Rust environment and the necessary ICP SDK.

```rust
use ic_cdk::caller;
use ic_cdk_macros::query;

#[query]
fn get_caller() -> Principal {
    caller()
}
```

--------------------------------

### Add ConnectWallet Button (React JSX)

Source: https://docs.oisy.com/for-developers/using-oisy-wallet-in-your-icp-dapp/using-identitykit-for-react

This example demonstrates how to integrate the `ConnectWallet` component into your UI. When clicked, this button will trigger a modal displaying the available wallets (including OISY) for the user to choose from, simplifying the connection process.

```jsx
import { ConnectWallet } from '@nfid/identitykit/react';

function Navbar() {
  return (
    <nav style={{ display: 'flex', justifyContent: 'space-between', padding: '1rem' }}>
      <h1>My dApp</h1>
      <ConnectWallet /> {/* This button does the magic! */}
    </nav>
  );
}

```

--------------------------------

### dApp Connectivity with WalletConnect and OISY

Source: https://context7.com/context7/oisy/llms.txt

Enables dApp interactions using the standard WalletConnect protocol, allowing OISY Wallet to connect to various dApps. The provided example uses React with '@web3modal/wagmi/react' for initiating WalletConnect connections. User connection flows are described for direct selection, QR code/link scanning, and ICP native connections.

```javascript
// User flow for connecting OISY to dApps via WalletConnect

// Method 1: Direct wallet selection
// 1. Navigate to dApp (e.g., https://app.altitude.fi/)
// 2. Click 'Connect Wallet'
// 3. Choose WalletConnect
// 4. Search for and select 'OISY Wallet'
// 5. Approve connection in OISY popup
// Result: OISY connected to dApp, ready for transactions

// Method 2: QR Code/Link
// 1. Navigate to dApp website
// 2. Click 'Connect Wallet' → Choose WalletConnect
// 3. QR code appears in popup
// 4. Open OISY Wallet on mobile (saved as PWA)
// 5. In OISY, tap WalletConnect icon (top right)
// 6. Press 'Scan QR Code' or enter WalletConnect link
// 7. Approve connection when prompted
// Result: Mobile OISY connected to dApp

// Method 3: ICP Native Connection
// For ICP-native dApps (e.g., https://kongswap.io)
// 1. Open dApp
// 2. Click 'Connect Wallet' → Select OISY Wallet
// 3. In popup, click 'Open or Create'
// 4. Choose Internet Identity in second popup
// 5. Complete Internet Identity sign-in (biometric/passkey)
// 6. Review Permissions page → Approve
// 7. Approve transaction permissions on second page
// Result: OISY connected with ICP signer standards

// dApp implementation example (React with WalletConnect)
import { WalletConnectModal } from '@walletconnect/modal';
import { createWeb3Modal, useWeb3Modal } from '@web3modal/wagmi/react';

function DAppConnector() {
  const { open } = useWeb3Modal();

  return (
    <button onClick={() => open()}>
      Connect Wallet
    </button>
  );
}

// OISY appears in wallet selection list
// User selects OISY → Opens https://oisy.com in new tab
// User approves connection in OISY interface
// Connection established via WalletConnect bridge

```

--------------------------------

### OISY Wallet Operations with @dfinity/oisy-wallet-signer SDK

Source: https://context7.com/context7/oisy/llms.txt

Integrates OISY Wallet for basic operations using the dedicated SDK. It handles ICRC-25 handshake, retrieves principal and accounts, and facilitates ICP transfers. Requires installation of the SDK and related DFINITY libraries. It connects to a specified sign page URL and can optionally target specific canisters.

```typescript
// Installation
// npm install @dfinity/oisy-wallet-signer @dfinity/principal @dfinity/ledger-icp

import { OisyWalletSigner } from '@dfinity/oisy-wallet-signer';
import { Principal } from '@dfinity/principal';
import { AccountIdentifier } from '@dfinity/ledger-icp';
import { Actor } from '@dfinity/agent';

let oisyClient: any = null;

const OISY_SIGN_PAGE_URL = 'https://oisy.com/sign';
const ICP_LEDGER_CANISTER_ID = 'ryjl3-tyaaa-aaaaa-aaaba-cai';

async function connectWithOisyLib() {
  try {
    // Handles ICRC-25 handshake automatically
    oisyClient = await OisyWalletSigner.create({
      signPageUrl: OISY_SIGN_PAGE_URL,
      // Optional configuration
      // windowFeatures: 'width=500,height=700,noopener,noreferrer',
      // onDisconnect: () => { console.log("Disconnected"); },
      // targets: [Principal.fromText(ICP_LEDGER_CANISTER_ID)]
    });

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

    if (!accounts || accounts.length === 0) {
      throw new Error('No accounts found');
    }

    // Update UI with principal.toText() and accounts[0].identifier
  } catch (error) {
    console.error('OISY Lib Connection failed:', error);
    oisyClient = null;
  }
}

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

  const recipientPrincipal = Principal.fromText('uzr34-vyaaa-aaaaq-aaaea-cai');
  const recipientAccount = AccountIdentifier.fromPrincipal({ principal: recipientPrincipal });
  const amount = 200_000n;  // 0.002 ICP

  try {
    // Use library's agent with Actor API
    const icpLedgerActor = Actor.createActor(
      (await import('@dfinity/nns-ledger')).idlFactory,
      {
        agent: oisyClient.agent,
        canisterId: Principal.fromText(ICP_LEDGER_CANISTER_ID),
      }
    );

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

    const blockHeight = await icpLedgerActor.transfer(transferArgs);
    console.log('Transfer Result (Block Height):', blockHeight);
    alert(`Transfer successful! Block Height: ${blockHeight}`);
  } catch (error) {
    console.error('Transfer failed:', error);
    alert(`Transfer failed: ${error.message || error}`);
  }
}

async function disconnectOisyLib() {
  if (oisyClient) {
    oisyClient = null;
    console.log('Disconnected from OISY library client');
  }
}

document.getElementById('connect-lib-btn')?.addEventListener('click', connectWithOisyLib);
document.getElementById('transfer-lib-btn')?.addEventListener('click', transferWithOisyLib);
document.getElementById('disconnect-lib-btn')?.addEventListener('click', disconnectOisyLib);

```

--------------------------------

### Rust Example for HTTP Outcalls on ICP

Source: https://docs.oisy.com/for-developers/icp-building-blocks

This Rust code demonstrates how to use HTTP outcalls on ICP, enabling canisters to make requests to Web 2.0 services in a decentralized manner. This is an upcoming feature that can improve OISY's integration with external endpoints like Infura or Alchemy. It requires the ICP SDK and canisters configured for HTTP outcalls.

```rust
use ic_cdk::api::management_canister::http_request::{http_request, CanisterHttpRequest, TransformArgs, TransformResult};
use candid::{Encode, Decode, Principal};

#[ic_cdk_macros::query]
fn make_http_request() -> String {
    let request = CanisterHttpRequest {
        url: "https://api.example.com/".to_string(),
        method: "GET".to_string(),
        headers: vec![],
        body: None,
        transform: Some(TransformArgs { function: TransformArgs::from_fn_ptr(transform) })
    };

    let cycles = 100_000_000_000u128;
    let response = http_request(request, cycles).expect("HTTP request failed");

    String::from_utf8(response.0.body).expect("Response body is not valid UTF-8")
}

fn transform(raw: TransformArgs) -> TransformResult {
    let response_body = raw.response.body;
    // Process the response body here if needed
    Decode!(response_body.as_slice(), String).ok()
}

```

--------------------------------

### Sprinkles Earning Calculation Example

Source: https://docs.oisy.com/rewards/oisy-sprinkles

Illustrates how active participation across multiple blockchain networks increases the chances of winning OISY Sprinkles. Each eligible chain acts as a multiplier in the daily draw, rewarding users who engage with OISY on different chains.

```plaintext
Example:

In a 10-day window, if you:

Hold $20+ and take 2 actions on Ethereum
Hold $20+ and take 2 actions on BNB Chain
Hold $20+ and take 2 actions on Arbitrum
Hold $20+ and take 2 actions on ICP

And you meet the login/activity requirement —
You now have a 4x chance of being selected for a Sprinkle drop vs a single-chain user.
```

--------------------------------

### Serve OISY Frontend in Development Mode

Source: https://docs.oisy.com/for-developers/icp-building-blocks/build-and-run-yourself

Command to serve the OISY frontend in development mode. This allows for live-reloading and typical frontend development workflows using Svelte.

```bash
npm run dev
```

--------------------------------

### Connect to OISY Wallet with Library

Source: https://docs.oisy.com/for-developers/using-oisy-wallet-in-your-icp-dapp/using-dfinity-oisy-wallet-signer-oisy-specific-sdk

Establishes a connection to the OISY wallet using the OisyWalletSigner library. It handles the window opening and handshake process. Dependencies include '@dfinity/oisy-wallet-signer', '@dfinity/principal', and '@dfinity/ledger-icp'. It returns a connected client object or throws an error.

```typescript
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 features, 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();
  }
}
```

--------------------------------

### Deploy OISY Backend Locally using dfx

Source: https://docs.oisy.com/for-developers/icp-building-blocks/build-and-run-yourself

Command to deploy only the backend component of the OISY project locally. This is useful for backend-specific development or testing. The backend is written in Rust and utilizes the tECDSA API.

```bash
dfx deploy backend
```

--------------------------------

### Connect to OISY with signer-js

Source: https://docs.oisy.com/for-developers/using-oisy-wallet-in-your-icp-dapp/using-signer-js-library-low-level-typescript

Demonstrates how to connect to OISY using the signer-js library, establishing a connection via PostMessageTransport (ICRC-29), retrieving user accounts (ICRC-27), and setting up a SignerAgent for subsequent interactions. This process requires user interaction to approve the connection and access to accounts.

```typescript
import { Signer } from '@slide-computer/signer';
import { PostMessageTransport, type PostMessageTransportOptions } from '@slide-computer/signer-web';
import { SignerAgent } from '@slide-computer/signer-agent';
import { IcrcLedgerCanister, type Account } from '@dfinity/ledger-icrc'; // Using ICRC-1 types for accounts
import { Principal } from '@dfinity/principal';
import { Actor, HttpAgent } from '@dfinity/agent'; // Actor is needed, HttpAgent might be for other non-signed calls

// Ensure you have the IDL for the ICP ledger if not using a higher-level library for it
// For this example, we'll use IcrcLedgerCanister from @dfinity/ledger-icrc which has its own IDL.

let signerInstance: Signer | null = null;
let transportInstance: PostMessageTransport | null = null;
let walletAgent: SignerAgent | null = null; // This will be the agent that uses the wallet
let userPrincipal: Principal | null = null;
let userAccountsFromWallet: Account[] | null = null; // Using ICRC-1 Account type

// OISY's official signing endpoint
const OISY_SIGN_URL = 'https://oisy.com/sign';
const ICP_LEDGER_CANISTER_ID = 'ryjl3-tyaaa-aaaaa-aaaba-cai';

async function connectOisyWithSignerJs() {
  console.log('Attempting to connect OISY with signer-js...');

  // 1. Configure and create the transport for OISY (uses ICRC-29 postMessage)
  const transportOptions: PostMessageTransportOptions = {
    targetUrl: OISY_SIGN_URL,
    // Configure window features for the popup
    windowFeatures: 'width=500,height=700,noopener,noreferrer',
  };
  transportInstance = new PostMessageTransport(transportOptions);

  // 2. Create the Signer instance with the transport
  signerInstance = new Signer({ transport: transportInstance });

  try {
    // 3. Initiate the connection (this opens the OISY window for user approval)
    // This step handles the ICRC-25 handshake.
    await transportInstance.connect();
    console.log('OISY transport connected successfully!');

    // 4. Get user accounts (uses ICRC-27)
    // This retrieves the principal and associated accounts the user has permitted.
    const accountsResult = await signerInstance.accounts();
    if (!accountsResult || accountsResult.length === 0) {
      throw new Error('No accounts found or permission denied by user.');
    }
    userAccountsFromWallet = accountsResult.map((acc) => ({
      owner: acc.owner,
      subaccount: acc.subaccount,
    }));
    userPrincipal = userAccountsFromWallet.owner; // Typically use the principal from the first account
    console.log('OISY Accounts:', userAccountsFromWallet);
    console.log('User Principal:', userPrincipal.toText());

    // 5. Create a SignerAgent (optional but highly convenient)
    // This agent will use our 'signerInstance' to sign any outgoing update calls.
    // For query calls, it can use a standard anonymous HttpAgent or be configured.
    walletAgent = await SignerAgent.create({
      signer: signerInstance,
      identity: userPrincipal, // The identity obtained from the wallet
      host: 'https://icp-api.io', // Mainnet IC boundary node URL
    });
    console.log('SignerAgent created successfully.');

    // Update your UI to reflect the connected state
    updateUIOnConnect(userPrincipal.toText(), userAccountsFromWallet); // Implement this function
  } catch (error) {
    console.error('OISY Connection failed:', error);
    alert(`OISY Connection Error: ${error.message || error}`);
    await disconnectOisyWithSignerJs(); // Clean up any partial connection
  }
}

async function disconnectOisyWithSignerJs() {
  if (transportInstance && transportInstance.connected) {
    await transportInstance.disconnect();
  }
  signerInstance = null;
  transportInstance = null;
  walletAgent = null;
  userPrincipal = null;
  userAccountsFromWallet = null;
  updateUIOnDisconnect(); // Implement this function
  console.log('Disconnected from OISY.');
}

// --- Placeholder UI update functions (you need to implement these) ---
function updateUIOnConnect(principalText: string, account: Account) {
  document.getElementById('connect-oisy-signerjs').style.display = 'none';
  document.getElementById('disconnect-oisy-signerjs').style.display = 'block';
  document.getElementById('user-info').innerText =
    `Connected: ${principalText}, Account: ${JSON.stringify(account)}`;
}

function updateUIOnDisconnect() {
  document.getElementById('connect-oisy-signerjs').style.display = 'block';
  document.getElementById('disconnect-oisy-signerjs').style.display = 'none';
  document.getElementById('user-info').innerText = 'Not connected';
}

```

--------------------------------

### OISY Wallet Event Listeners (JavaScript)

Source: https://docs.oisy.com/for-developers/using-oisy-wallet-in-your-icp-dapp/using-dfinity-oisy-wallet-signer-oisy-specific-sdk

This code sets up event listeners for buttons that trigger OISY wallet interactions. It assumes the existence of corresponding functions (connectWithOisyLib, transferWithOisyLib, disconnectOisyLib) and HTML elements with specific IDs.

```javascript
document.getElementById('connect-oisy-lib')?.addEventListener('click', connectWithOisyLib);
document.getElementById('transfer-oisy-lib')?.addEventListener('click', transferWithOisyLib);
document.getElementById('disconnect-oisy-lib')?.addEventListener('click', disconnectOisyLib);
```

--------------------------------

### TypeScript: Internet Identity Authentication and Canister Calls

Source: https://context7.com/context7/oisy/llms.txt

This TypeScript code demonstrates how to integrate Internet Identity for passwordless authentication in a dApp. It includes functions for initializing the auth client, handling user login and logout, creating authenticated agents for canister interactions, and making authenticated calls to a specified canister. Dependencies include `@dfinity/auth-client`, `@dfinity/agent`, and `HttpAgent`. The input is typically user interaction via buttons, and the output includes console logs for authentication status and canister call results. Error handling for authentication and calls is included.

```typescript
// Internet Identity integration for dApp authentication
import { AuthClient } from '@dfinity/auth-client';
import { Actor, HttpAgent } from '@dfinity/agent';

let authClient: AuthClient | null = null;
let authenticatedIdentity: any = null;

async function initAuthClient() {
  authClient = await AuthClient.create();

  if (await authClient.isAuthenticated()) {
    authenticatedIdentity = authClient.getIdentity();
    console.log('Already authenticated:', authenticatedIdentity.getPrincipal().toText());
    return true;
  }
  return false;
}

async function loginWithInternetIdentity() {
  if (!authClient) {
    await initAuthClient();
  }

  return new Promise((resolve, reject) => {
    authClient.login({
      // Production Internet Identity URL
      identityProvider: 'https://identity.ic0.app',
      // Maximum session duration (8 hours)
      maxTimeToLive: BigInt(8 * 60 * 60 * 1000 * 1000 * 1000),
      onSuccess: async () => {
        authenticatedIdentity = authClient.getIdentity();
        const principal = authenticatedIdentity.getPrincipal().toText();
        console.log('Login successful! Principal:', principal);
        resolve(principal);
      },
      onError: (error) => {
        console.error('Login failed:', error);
        reject(error);
      },
      // Optional: window features for popup
      windowOpenerFeatures: 'width=500,height=600,left=100,top=100',
    });
  });
}

async function logout() {
  if (authClient) {
    await authClient.logout();
    authenticatedIdentity = null;
    console.log('Logged out successfully');
  }
}

// Create authenticated agent for canister calls
async function createAuthenticatedAgent(canisterId: string, idlFactory: any) {
  if (!authenticatedIdentity) {
    throw new Error('Not authenticated');
  }

  const agent = new HttpAgent({
    identity: authenticatedIdentity,
    host: 'https://icp-api.io',
  });

  // Fetch root key for local development only
  // await agent.fetchRootKey();

  const actor = Actor.createActor(idlFactory, {
    agent,
    canisterId,
  });

  return actor;
}

// Usage example
async function authenticateAndCallCanister() {
  try {
    // Initialize and check existing session
    const alreadyAuthenticated = await initAuthClient();

    if (!alreadyAuthenticated) {
      // Trigger Internet Identity login (biometric/passkey)
      const principal = await loginWithInternetIdentity();
      console.log('New login completed:', principal);
    }

    // Create actor with authenticated identity
    const myCanisterActor = await createAuthenticatedAgent(
      'ryjl3-tyaaa-aaaaa-aaaba-cai',
      myCanisterIdlFactory
    );

    // Make authenticated calls
    const result = await myCanisterActor.my_authenticated_method();
    console.log('Canister call result:', result);
  } catch (error) {
    console.error('Authentication or call failed:', error);
  }
}

// Button handlers
document.getElementById('login-btn')?.addEventListener('click', loginWithInternetIdentity);
document.getElementById('logout-btn')?.addEventListener('click', logout);
document.getElementById('call-canister-btn')?.addEventListener('click', authenticateAndCallCanister);

// Internet Identity features used by OISY:
// - Passwordless authentication via WebAuthn API
// - Biometric login (TouchID, FaceID)
// - Hardware security key support (YubiKey, Ledger)
// - Multi-device identity anchors
// - Privacy-preserving pseudonymous identities per dApp
// - No personal information collection
// - Fully on-chain operation on Internet Computer

```

--------------------------------

### dApp Submission using GitHub Issue Template

Source: https://context7.com/context7/oisy/llms.txt

This markdown template outlines the required information for submitting a dApp to the OISY explorer. It includes fields for dApp name, description, URLs, category, canister IDs, integration standards, and additional information.

```markdown
<!-- GitHub Issue Template Submission -->
<!-- Navigate to: https://github.com/dfinity/oisy-wallet/issues/new -->
<!-- Select template: dapp_submission_request.md -->

**dApp Submission Request**

**dApp Name:** MyDeFiApp

**Description:**
A decentralized exchange for ICP tokens with automated market making.

**dApp URL:** https://mydefiapp.com

**Logo URL:** https://mydefiapp.com/logo.png (256x256px PNG)

**Category:**
- [ ] DeFi
- [ ] NFT
- [ ] Gaming
- [ ] Social
- [ ] Infrastructure

**Canister IDs:**
- Frontend: abc12-3def4-56gh7-89ijk-lmn
- Backend: xyz98-7uvw6-54tsr-32qpo-nml

**Integration:**
- [x] Supports OISY Wallet connection
- [x] Implements ICRC-25/27/29/49 standards
- [ ] WalletConnect support

**Additional Information:**
Our dApp has been audited by [Auditor Name] and processed over $1M in volume.

**Screenshots:**
![dApp Screenshot](https://mydefiapp.com/screenshot.png)

<!-- Submit issue -->
<!-- OISY team reviews and adds to explorer -->
```

--------------------------------

### Integrate OISY Wallet with React using IdentityKit

Source: https://context7.com/context7/oisy/llms.txt

This snippet demonstrates how to integrate OISY Wallet into a React application using the @nfid/identitykit library. It covers setting up the IdentityKitProvider, enabling connection to OISY and other ICP wallets, and implementing a basic ICP transfer functionality. Dependencies include '@nfid/identitykit', '@dfinity/agent', and '@dfinity/principal'.

```jsx
// Installation
// npm install @nfid/identitykit

// Setup in main React entry point
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import '@nfid/identitykit/react/styles.css';
import { IdentityKitProvider, IdentityKitAuthType, OISY } from '@nfid/identitykit/react';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <React.StrictMode>
    <IdentityKitProvider
      authType={IdentityKitAuthType.ACCOUNTS}  // Required for OISY - no delegation support
      signers={[OISY]}  // Add other wallets as needed
    >
      <App />
    </IdentityKitProvider>
  </React.StrictMode>
);

// Add connect button to UI
import { ConnectWallet, useIdentityKit, useAgent } from '@nfid/identitykit/react';
import { Actor } from '@dfinity/agent';
import { Principal } from '@dfinity/principal';
import { idlFactory as ledgerIdlFactory } from '@dfinity/nns-ledger';
import { AccountIdentifier } from '@dfinity/ledger-icp';

function WalletInterface() {
  const { principal, accounts, isConnected, disconnect } = useIdentityKit();
  const agent = useAgent();

  const handleTransfer = async () => {
    if (!isConnected || !agent || !accounts || accounts.length === 0) {
      alert('Connect wallet first!');
      return;
    }

    const recipientPrincipal = Principal.fromText('uzr34-vyaaa-aaaaq-aaaea-cai');
    const recipientAccount = AccountIdentifier.fromPrincipal({ principal: recipientPrincipal });
    const amount = 1_000_000n;  // 0.01 ICP in e8s

    try {
      const ledgerActor = Actor.createActor(ledgerIdlFactory, {
        agent,
        canisterId: Principal.fromText('ryjl3-tyaaa-aaaaa-aaaba-cai'),
      });

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

      // Triggers OISY approval popup
      const blockIndex = await ledgerActor.transfer(transferArgs);
      alert(`Transfer successful! Block index: ${blockIndex}`);
    } catch (error) {
      alert(`Transfer failed: ${error.message || error}`);
    }
  };

  return (
    <div>
      <ConnectWallet />
      {isConnected && (
        <div>
          <p>Principal: {principal?.toText()}</p>
          <p>Account: {accounts.address}</p>
          <button onClick={handleTransfer}>Send 0.01 ICP</button>
          <button onClick={disconnect}>Disconnect</button>
        </div>
      )}
    </div>
  );
}

```

--------------------------------

### Initialize IdentityKitProvider with OISY Support (React JSX)

Source: https://docs.oisy.com/for-developers/using-oisy-wallet-in-your-icp-dapp/using-identitykit-for-react

This snippet shows how to wrap your main React application component with IdentityKitProvider. It's crucial to set `authType` to `IdentityKitAuthType.ACCOUNTS` for OISY compatibility, as OISY requires explicit approval for each transaction. You also specify the wallets you want to offer to your users, including OISY.

```jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App'; // Your main App component

// Import IdentityKit styles and components
import '@nfid/identitykit/react/styles.css';
import { IdentityKitProvider, IdentityKitAuthType, OISY } from '@nfid/identitykit/react';
// You can add other wallets too!
import { PlugWallet, NFIDWallet, InternetIdentity } from '@nfid/identitykit/react';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <React.StrictMode>
    <IdentityKitProvider
      // IMPORTANT FOR OISY: Use ACCOUNTS mode!
      // Because OISY needs approval for each action (no delegation support currently).
      authType={IdentityKitAuthType.ACCOUNTS}
      // List the wallets you want to support. We include OISY here.
      signers={[OISY, PlugWallet, NFIDWallet, InternetIdentity]}
      // Optional: canister IDs your app talks to (can improve user experience)
      // targets={["your_backend_canister_id"]}
      // Optional: your dApp's name, shown in wallet prompts
      // appName="My Awesome dApp"
      // Optional: your dApp's logo, shown in wallet prompts
      // appLogo="https://example.com/logo.png"
    >
      <App />
    </IdentityKitProvider>
  </React.StrictMode>
);

```

--------------------------------

### Disconnect from OISY Wallet with Library

Source: https://docs.oisy.com/for-developers/using-oisy-wallet-in-your-icp-dapp/using-dfinity-oisy-wallet-signer-oisy-specific-sdk

Simulates disconnecting the OISY wallet client. In a real implementation, this would involve calling a `disconnect` method on the client object if available, and updating the UI accordingly. This is crucial for managing the session state.

```typescript
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
  }
}
```

--------------------------------

### OISY UI Management with Signer.js

Source: https://docs.oisy.com/for-developers/using-oisy-wallet-in-your-icp-dapp/using-signer-js-library-low-level-typescript

Handles the UI updates for connecting and disconnecting from OISY using signer.js. It toggles button visibility and updates user status messages. This function relies on specific HTML elements with predefined IDs.

```javascript
function updateUIOnConnect() {
  document.getElementById('connect-oisy-signerjs').style.display = 'none';
  document.getElementById('disconnect-oisy-signerjs').style.display = 'block';
  document.getElementById('user-info').innerText = 'Connected';
  document.getElementById('transfer-icp-signerjs').style.display = 'block';
}
function updateUIOnDisconnect() {
  document.getElementById('connect-oisy-signerjs').style.display = 'block';
  document.getElementById('disconnect-oisy-signerjs').style.display = 'none';
  document.getElementById('user-info').innerText = 'Not Connected';
  document.getElementById('transfer-icp-signerjs').style.display = 'none';
}
```

--------------------------------

### Update UI for OISY Connection/Disconnection (JavaScript)

Source: https://docs.oisy.com/for-developers/using-oisy-wallet-in-your-icp-dapp/using-dfinity-oisy-wallet-signer-oisy-specific-sdk

These functions update the web page's UI elements to reflect the connection status with the OISY wallet. They toggle button visibility and update user information text. These rely on specific HTML element IDs.

```javascript
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';
}
```

--------------------------------

### Perform ICP Transfer with OISY Library

Source: https://docs.oisy.com/for-developers/using-oisy-wallet-in-your-icp-dapp/using-dfinity-oisy-wallet-signer-oisy-specific-sdk

Initiates an ICP transfer using the connected OISY wallet client. This function requires a recipient's Principal and the amount to transfer. It utilizes the OISY library's agent to interact with the ICP ledger canister. Dependencies include '@dfinity/nns-ledger'. Returns the block height of the successful transaction or throws an error.

```typescript
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}`);
  }
}
```

--------------------------------

### Connect, Transfer ICP, and Disconnect with Signer-JS and OISY in TypeScript

Source: https://context7.com/context7/oisy/llms.txt

This snippet demonstrates the complete workflow of integrating Signer-JS with OISY using TypeScript. It includes functions for connecting to OISY via a postMessage transport, performing ICP transfers using the SignerAgent and IcrcLedgerCanister, and disconnecting the session. It requires the @slide-computer/signer, @slide-computer/signer-web, @slide-computer/signer-agent, and @dfinity/ledger-icrc libraries.

```typescript
// Installation
// npm install @slide-computer/signer @slide-computer/signer-web @slide-computer/signer-agent @dfinity/agent @dfinity/principal @dfinity/ledger-icrc

import { Signer } from '@slide-computer/signer';
import { PostMessageTransport, type PostMessageTransportOptions } from '@slide-computer/signer-web';
import { SignerAgent } from '@slide-computer/signer-agent';
import { IcrcLedgerCanister, type Account } from '@dfinity/ledger-icrc';
import { Principal } from '@dfinity/principal';

let signerInstance: Signer | null = null;
let transportInstance: PostMessageTransport | null = null;
let walletAgent: SignerAgent | null = null;
let userPrincipal: Principal | null = null;
let userAccountsFromWallet: Account[] | null = null;

const OISY_SIGN_URL = 'https://oisy.com/sign';
const ICP_LEDGER_CANISTER_ID = 'ryjl3-tyaaa-aaaaa-aaaba-cai';

async function connectOisyWithSignerJs() {
  try {
    // Configure ICRC-29 postMessage transport
    const transportOptions: PostMessageTransportOptions = {
      targetUrl: OISY_SIGN_URL,
      windowFeatures: 'width=500,height=700,noopener,noreferrer',
    };
    transportInstance = new PostMessageTransport(transportOptions);
    signerInstance = new Signer({ transport: transportInstance });

    // ICRC-25 handshake - opens OISY for user approval
    await transportInstance.connect();
    console.log('OISY transport connected successfully!');

    // ICRC-27 - retrieve user accounts
    const accountsResult = await signerInstance.accounts();
    if (!accountsResult || accountsResult.length === 0) {
      throw new Error('No accounts found or permission denied');
    }
    userAccountsFromWallet = accountsResult.map((acc) => ({
      owner: acc.owner,
      subaccount: acc.subaccount,
    }));
    userPrincipal = userAccountsFromWallet[0].owner;
    console.log('User Principal:', userPrincipal.toText());

    // Create SignerAgent for canister calls
    walletAgent = await SignerAgent.create({
      signer: signerInstance,
      identity: userPrincipal,
      host: 'https://icp-api.io',
    });
    console.log('SignerAgent created successfully');
  } catch (error) {
    console.error('OISY Connection failed:', error);
    await disconnectOisyWithSignerJs();
  }
}

async function transferIcpWithSignerJs() {
  if (!walletAgent || !userAccountsFromWallet || userAccountsFromWallet.length === 0) {
    alert('Not connected!');
    return;
  }

  const recipientPrincipal = Principal.fromText('uzr34-vyaaa-aaaaq-aaaea-cai');
  const recipientAccount: Account = { owner: recipientPrincipal, subaccount: [] };
  const amount = 500_000n;  // 0.005 ICP

  try {
    // ICRC-1 ledger interaction
    const icrcLedger = IcrcLedgerCanister.create({
      agent: walletAgent,
      canisterId: Principal.fromText('mxzaz-hqaaa-aaaar-qaada-cai'),  // ckBTC example
    });

    // ICRC-49 call - triggers OISY popup with ICRC-21 consent message
    const blockIndex = await icrcLedger.transfer({
      to: recipientAccount,
      amount: amount,
    });

    console.log(`Transfer OK! Block index: ${blockIndex}`);
    alert(`Transfer successful! Block index: ${blockIndex}`);
  } catch (error) {
    console.error('Transfer failed:', error);
    alert(`Transfer failed: ${error.message || error}`);
  }
}

async function disconnectOisyWithSignerJs() {
  if (transportInstance && transportInstance.connected) {
    await transportInstance.disconnect();
  }
  signerInstance = null;
  transportInstance = null;
  walletAgent = null;
  userPrincipal = null;
  userAccountsFromWallet = null;
  console.log('Disconnected from OISY');
}

// Button event listeners
document.getElementById('connect-btn')?.addEventListener('click', connectOisyWithSignerJs);
document.getElementById('transfer-btn')?.addEventListener('click', transferIcpWithSignerJs);
document.getElementById('disconnect-btn')?.addEventListener('click', disconnectOisyWithSignerJs);

```

--------------------------------

### Event Listeners for OISY Actions with Signer.js

Source: https://docs.oisy.com/for-developers/using-oisy-wallet-in-your-icp-dapp/using-signer-js-library-low-level-typescript

Attaches click event listeners to buttons for connecting and disconnecting from OISY using signer.js. It ensures that the corresponding JavaScript functions are called when the buttons are clicked. Optional chaining is used for safety.

```javascript
document
  .getElementById('connect-oisy-signerjs')
  ?.addEventListener('click', connectOisyWithSignerJs);
document
  .getElementById('disconnect-oisy-signerjs')
  ?.addEventListener('click', disconnectOisyWithSignerJs);
```
Tokens:
Raw