Skip to main content

localWallet

A wallet configurator for Local Wallet which allows integrating the wallet with React

import { localWallet } from "@thirdweb-dev/react";

const localWalletConfig = localWallet(options);
customize (optional)

localWalletConfig contains the default config for metadata and UI. you can optionally choose to override the defaults to customize the wallet. Learn more about these configs

const localWalletConfig = localWallet({ ... });

// override metadata
localWalletConfig.meta.name = "..."; // change the name
localWalletConfig.meta.iconURL = "..."; // change the icon
localWalletConfig.meta.urls = {
  // change urls to download the wallet on various platforms
  android: "https://...",
  ios: "https://...",
  chrome: "https://...",
  firefox: "https://...",
};

// override connection UI
localWalletConfig.connectUI = LocalWalletConnectUI; // react component

// custom selection UI
localWalletConfig.selectUI = LocalWalletSelectUI; // react component

Once the config is ready, you can use it with ConnectWallet component or useConnect hook as shown below

// add to ThirdwebProvider to add it in ConnectWallet's modal
<ThirdwebProvider supportedWallets={[localWalletConfig]} clientId="your-client-id"/>;

// or use it with useConnect hook
const connect = useConnect();
connect(localWalletConfig, { ... });

options​

persist (optional)

This is only relevant when connecting localWallet with ConnectWallet component.

Specify whether to persist the wallet in local storage or not. Defaults to true

If set to true, an encrypted wallet JSON will be stored on localStorage with user's given password. The user will need to enter their password again in Connect Wallet Modal when they revisit the site. Because of this, this wallet can not be auto connected.

If set to false, wallet will not be stored in local storage, and no password will be required to connect. The wallet will be lost when the user leaves or reloads page.

Usage with ConnectWallet​

To allow users to connect to this wallet using the ConnectWallet component, you can add it to ThirdwebProvider's supportedWallets prop.

<ThirdwebProvider supportedWallets={[localWallet()]} clientId="your-client-id">
  <YourApp />
</ThirdwebProvider>

Usage with useConnect​

you can use the useConnect hook to programmatically connect to the wallet without using the ConnectWallet component.

The wallet also needs to be added in ThirdwebProvider's supportedWallets if you want the wallet to auto-connect on next page load.

const localWalletConfig = localWallet();

function App() {
  const connect = useConnect();

  const handleConnect = async () => {
    await connect(localWalletConfig, connectOptions);
  };

  return <div> ... </div>;
}

connectOptions​

{ chainId?: string } | undefined
chainId (optional)

If chainId is provided, wallet will be connected to network with given chainId.

Chain object corresponding to this chainId from @thirdweb-dev/chains package must be specified in ThirdwebProvider's supportedChains prop as shown below

import { Polygon } from "@thirdweb-dev/chains";
import { ThirdwebProvider } from "@thirdweb-dev/react";

export function YourApp() {
  return (
    <ThirdwebProvider supportedChains={[Polygon]} clientId="your-client-id">
      <App />
    </ThirdwebProvider>
  );
}