React
Owl Wallet UI

Using The Owl Wallet

In this tutorial, you will set up a React app that connects to an Owl Protocol wallet and configures the wallet interaction using the Owl Protocol’s components and API. This guide will show you two approaches for setting up wallet connections with Wagmi (opens in a new tab), including a variant using RainbowKit (opens in a new tab).

Clone The Repo

We have created the Owl Protocol tutorials-react repository (opens in a new tab) to get you started quickly.

git clone https://github.com/owlprotocol/tutorials-react.git owlprotocol-tutorials-react
cd owlprotocol-tutorials-react

Now, let's install the dependencies (we recommend using pnpm (opens in a new tab))

npm install

Then, copy the example environment variables. You do not need to change these.

cp .env.example .env

The main file we will be working with is App.tsx. Let's run vite to make sure everything is working

npm run dev

Create A Project On The Owl Dashboard

Owl wallets are tied to a project. To get started, head over to the Owl Dashboard (opens in a new tab) and create a new project. If you’re new to the platform, check out our No Code Dashboard Tutorial for a step-by-step guide on setting up your project.

Note: A default project is created for you automatically when you sign up. You can either use this project or create a new one according to your needs.

Make sure you save the Project ID shown on your project page.

Initialize The Owl Provider

Initialize the Owl Provider in App.tsx to enable the Owl Wallet and gasless transactions.

Note: This is already done for you in the starter repository.

This provider is used to interact with our API.

Make sure to also import @owlprotocol/ui-components/style.css. This CSS file styles Owl UI components.

import { OwlProvider } from "@owlprotocol/ui-components";
 
import "./App.css";
import "@owlprotocol/ui-components/style.css";
 
export const App = () => {
    return (
        <>
            <h1>Owl React Tutorials</h1>
 
            <OwlProvider>{/* Add tutorial snippets here */}</OwlProvider>
        </>
    );
};

Setting Up the Owl Wallet Test Component

This section guides you through configuring the Owl Wallet using two approaches:

  1. Standard Configuration: Uses the WagmiProvider.
  2. RainbowKit Configuration: Uses WagmiProvider with additional RainbowKit UI features.

Both setups enable core functionality and support wallet connections for your dApp. Owl Wallet requires a project ID (retrieved from your .env file) and the chain information to connect. For this tutorial, we use Hedwig Testnet (chain ID 150150).

Standard Configuration Setup
import { trpc } from "@owlprotocol/core-trpc/react-query";
import {
    getDefaultConfig,
    useOwlTrpcContext,
} from "@owlprotocol/ui-components";
import { Chain } from "viem";
import { WagmiProvider } from "wagmi";
 
export const OwlWalletTest = () => {
    const projectId = import.meta.env.VITE_PROJECT_ID;
 
    if (!projectId || projectId === "PROJECT_ID")
        throw new Error("VITE_PROJECT_ID must be defined!");
 
    const trpcContext = useOwlTrpcContext();
    const [hedwigTestnetChain] = trpc.network.get.useSuspenseQuery({
        chainId: 150150,
    });
    const chains = [hedwigTestnetChain] as readonly [Chain];
 
    const config = getDefaultConfig({ chains, projectId, ...trpcContext });
 
    return (
        <WagmiProvider config={config}>
            <OwlWallet projectId={projectId} />
        </WagmiProvider>
    );
};

RainbowKit Configuration Setup

import { trpc } from "@owlprotocol/core-trpc/react-query";
import {
    getDefaultConfigForRainbowKit,
    useOwlTrpcContext,
} from "@owlprotocol/ui-components";
import { Chain } from "viem";
import { WagmiProvider } from "wagmi";
 
export const OwlWalletTest = () => {
    const projectId = import.meta.env.VITE_PROJECT_ID;
 
    if (!projectId || projectId === "PROJECT_ID")
        throw new Error("VITE_PROJECT_ID must be defined!");
 
    const trpcContext = useOwlTrpcContext();
    const [hedwigTestnetChain] = trpc.network.get.useSuspenseQuery({
        chainId: 150150,
    });
    const chains = [hedwigTestnetChain] as readonly [Chain];
 
    // use `getDefaultConfigForRainbowKit` instead of `getDefaultConfig`
    const config = getDefaultConfigForRainbowKit({
        chains,
        projectId,
        ...trpcContext,
    });
 
    return (
        <WagmiProvider config={config}>
            {/* Enable RainbowKit by passing `useRainbowKit={true}` */}
            <OwlWallet projectId={projectId} useRainbowKit={true} />
        </WagmiProvider>
    );
};

Understanding the Configurations

  • Project ID Setup: Links wallet interactions to a specific Owl Protocol project.
  • Chain Information: Fetches network details for the specified chain.
  • Configuration Differences:
    • getDefaultConfig: Sets up a configuration for basic wallet interactions.
    • getDefaultConfigForRainbowKit: Adds support for RainbowKit components, providing a different UI.
  • Component Wrapping: Both configurations use WagmiProvider to enable wallet interactions.

Add The Owl Wallet Test Component To The App

Back in App.tsx, import and add the OwlWalletTest.

import { OwlProvider } from "@owlprotocol/ui-components";
import { OwlWalletTest } from "./tutorials/owl-wallet.jsx";
 
import "./App.css";
import "@owlprotocol/ui-components/style.css";
 
export const App = () => {
    return (
        <>
            <h1>Owl React Tutorials</h1>
 
            <OwlProvider>
                {/* Add tutorial snippet within the Owl Provider */}
                <OwlWalletTest />
            </OwlProvider>
        </>
    );
};

And voilà! Run pnpm dev again if needed, and check out the Owl Wallet integration in your app. You should see a wallet connection button that opens a wallet connection modal. Once logged in, you will be able to view your wallet assets and initiate wallet interactions such as sending transactions. Try interacting with the features to explore the Owl Wallet’s functionality!

To see the final component, go to our GitHub (opens in a new tab).

Transactions with Owl WalletDeploy Demo Project