Frame Wallet

Prompt users to connect to your app with their Frame Wallet.

Usage

import { FrameWallet } from "@thirdweb-dev/wallets";

const wallet = new FrameWallet();

wallet.connect();

Configuration

Optionally, provide a configuration object when instantiating the FrameWallet class.

clientId (recommended)

Provide clientId to use the thirdweb RPCs for given chains

You can create a client ID for your application from thirdweb dashboard.

import { FrameWallet } from "@thirdweb-dev/wallets";

const wallet = new FrameWallet(
  {
    clientId: "YOUR_CLIENT_ID",
  },
);

chains

Provide an array of chains you want to support.

Must be an array of Chain objects, from the @thirdweb-dev/chains package.

Defaults to our default chains.

import { FrameWallet } from "@thirdweb-dev/wallets";
import { Ethereum, Polygon } from "@thirdweb-dev/chains";

const walletWithOptions = new FrameWallet(
  {
    chains: [Ethereum, Polygon],
  },
);

dappMetadata

Information about your app that the wallet will display when your app tries to connect to it.

Must be an object containing name, url, and optionally description and logoUrl properties.

import { FrameWallet } from "@thirdweb-dev/wallets";

const walletWithOptions = new FrameWallet({
  dappMetadata: {
    name: "thirdweb powered dApp",
    url: "https://thirdweb.com",
    description: "thirdweb powered dApp",
    logoUrl: "https://thirdweb.com/favicon.ico",
  },
});

walletStorage

Some wallets need to store data in persistent storage. This is the storage that will be used for that.

Must be an object conforming to the AsyncStorage interface:

export interface AsyncStorage {
  getItem(key: string): Promise<string | null>;
  setItem(key: string, value: string): Promise<void>;
  removeItem(key: string): Promise<void>;
}

Example:

import { FrameWallet } from "@thirdweb-dev/wallets";

const walletWithOptions = new FrameWallet(
  {
    walletStorage: {
      getItem: (key) => {
        // Implement your own storage logic here
      },
      removeItem: (key) => {
        // Implement your own storage logic here
      },
      setItem: (key, value) => {
        // Implement your own storage logic here
      },
    },
  },
);

Methods

Inherits all the public methods from the AbstractClientWallet class.