How to Connect a Website and OP_WALLET

Connecting a website to OP_WALLET enables users to interact seamlessly with OP_NET features like smart contracts, UTXOs, and public keys. The connection process is straightforward and involves requesting accounts from OP_WALLET, which triggers a wallet connection popup.

Steps to Connect a Website and OP_WALLET

1. Accessing the Wallet Instance

First, verify the availability of a wallet instance. For OP_WALLET, you can access the wallet instance using the following code:

import { Unisat } from "@btc-vision/transaction";

export interface CustomWindow {
  opnet?: Unisat;
}

const _window: CustomWindow = window as CustomWindow;
const opnet: Unisat | undefined = _window.opnet;

Detailed Guide

Learn more about Interacting with a Browser Wallet that Directly Supports OP_NET for detailed information on accessing wallet instances.

2. Requesting Accounts

Once you have access to the wallet instance, call the requestAccounts() method to connect OP_WALLET and fetch the connected accounts:

try {
  // Request accounts to connect OP_WALLET
  const accounts = await opnet.requestAccounts();

  console.log("Connected Accounts:", accounts);
} catch (error) {
  console.error("Failed to connect OP_WALLET:", error);
}

---

Full Example

import { Unisat } from "@btc-vision/transaction";

export interface CustomWindow {
  opnet?: Unisat;
}

const _window: CustomWindow = window as CustomWindow;
const opnet: Unisat | undefined = _window.opnet;

try {
  // Request accounts to connect OP_WALLET
  const accounts = await opnet.requestAccounts();

  console.log("Connected Accounts:", accounts);
} catch (error) {
  console.error("Failed to connect OP_WALLET:", error);
}

---

Best Practices

• Always verify if window.opnet is available before requesting accounts to avoid runtime errors.
• Users may decline the connection request. Provide a user-friendly error message and allow them to retry.
• Store the connected account(s) in your application state to avoid repeated requests during the session.

---

What’s Next?

• Learn how to Listen for Network Changes on OP_WALLET.
• Explore the Transactions on OP_NET guide for more advanced features.