Skip to main content

Setting Up WalletConnect

This guide explains how to set up WalletConnect in your project and integrate it seamlessly with OP_NET. Follow these steps to get started.

Step 1: Set Up Your Environment​

Before proceeding, ensure your environment is configured for your framework of choice. Refer to the following guides for detailed instructions:

These guides cover how to set up your environment, including installing the required dependencies and configuring your project.

Step 2: Install WalletConnect​

If you haven’t installed the @btc-vision/walletconnect package yet, do so now:

npm install @btc-vision/walletconnect

This package provides all the tools necessary for integrating WalletConnect into your project.

Step 3: Add the <WalletProvider>​

The WalletProvider is a context provider that wraps your application and makes wallet-related functionalities available throughout your app.

React Example​

In your main.tsx:

import { WalletProvider } from "@btc-vision/walletconnect";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    {/* Add the WalletProvider here */}
    <WalletProvider>
      <App />
    </WalletProvider>
  </StrictMode>
);

Next.js Example​

In your layout.tsx:

import { WalletProvider } from "@btc-vision/walletconnect";

export default function Layout({ children }) {
  return (
    <html lang="en">
      <body>
        {/* Add the WalletProvider here */}
        <WalletProvider>
          <main>{children}</main>
        </WalletProvider>
      </body>
    </html>
  );
}

Step 4: Use WalletConnect in Your Application​

Once the WalletProvider is set up, you can access wallet-related functionalities using the useWallet hook.

Example​

import { SupportedWallets, useWallet } from "@btc-vision/walletconnect";

function WalletStatus() {
  const { account, connect, disconnect } = useWallet();

  return (
    <div>
      {account ? (
        <div>
          <p>Connected Address: {account.address.p2tr(account.network)}</p>
          <button onClick={disconnect}>Disconnect</button>
        </div>
      ) : (
        <button onClick={() => connect(SupportedWallets.OP_WALLET)}>
          Connect Wallet
        </button>
      )}
    </div>
  );
}

export default WalletStatus;

This example demonstrates how to use the useWallet hook to access the wallet's state, initiate connections, and disconnect from the wallet.

With these steps, your application is now ready to use WalletConnect to interact with OP_NET. For further details, refer to the WalletConnect Documentation.

Last updated on