ThirdwebSDKProvider

A signer is an abstraction of an Ethereum Account, which can be used to sign messages and initiate transactions.

Since the ThirdwebSDKProvider is used when you want to provide your own wallet connection logic, you will need to provide a signer prop to inform the SDK of the wallet you want to use to sign transactions.

Libraries such as ethers.js, web3.js, wagmi, etc. all provide ways to get a signer.

To use this signer with the SDK, pass it to the signer prop. If the signer is connected, the SDK will use this wallet to sign transactions for all write operations on the blockchain.

import { ThirdwebSDKProvider } from "@thirdweb-dev/react";
import { ethers } from "ethers";
 
function MyApp() {
  // Example: Use ethers to get the signer from the window.ethereum object
  const signer = new ethers.providers.Web3Provider(
    window.ethereum,
  ).getSigner();
 
  return (
    <ThirdwebSDKProvider
      activeChain={"ethereum"}
      signer={signer}
      clientId="your-client-id"
    >
      <App />
    </ThirdwebSDKProvider>
  );
}

The clientId prop is required to use the thirdweb infrastructure services with the SDK. You can get a client ID by creating an API key on thirdweb dashboard.

function MyApp() {
  return (
    <ThirdwebSDKProvider
      activeChain={"ethereum"}
      clientId="your-client-id"
    >
      <App />
    </ThirdwebSDKProvider>
  );
}

The activeChain prop determines which chain you want your app to be operating on.

It defaults to "ethereum" if activeChain prop is not provided.

import { ThirdwebSDKProvider } from "@thirdweb-dev/react";
import { Gnosis } from "@thirdweb-dev/chains";
 
function Example() {
  return (
    <ThirdwebSDKProvider
      activeChain={Gnosis}
      clientId="your-client-id"
    >
      <App />
    </ThirdwebSDKProvider>
  );
}

[
  "ethereum",
  "goerli",
  "polygon",
  "arbitrum",
  "arbitrum-goerli",
  "optimism",
  "optimism-goerli",
  "binance",
  "binance-testnet",
  "fantom",
  "fantom-testnet",
  "avalanche-fuji",
  "avalanche-fuji-testnet",
  "localhost",
];

import { ThirdwebSDKProvider } from "@thirdweb-dev/react";
 
function App() {
  return (
    <ThirdwebSDKProvider
      activeChain="ethereum"
      clientId="your-client-id"
    >
      <YourApp />
    </ThirdwebSDKProvider>
  );
}

import { ThirdwebSDKProvider } from "@thirdweb-dev/react";
import { <chain_id>} from "@thirdweb-dev/chains";
 
function App() {
	return (
		<ThirdwebSDKProvider activeChain={<chain_id>} clientId="your-client-id">
			<YourApp />
		</ThirdwebSDKProvider>
	);
}

import { ThirdwebSDKProvider } from "@thirdweb-dev/react";
import { <chain_id> } from "@thirdweb-dev/chains";
 
const activeChain = {
	...<chain_id>,
	rpc: ["https://<your-rpc-to-use>.com"], // Override the "rpc" field.
	// ... Override any other fields you want to customize.
};
 
const App = () => {
	return (
		<ThirdwebSDKProvider activeChain={activeChain}>
			<YourApp />
		</ThirdwebSDKProvider>
	);
};

import { ThirdwebSDKProvider } from "@thirdweb-dev/react";
 
const customChain = {
  // Required information for connecting to the network
  chainId: 59140, // Chain ID of the network
  rpc: ["<your-rpc-url-here>"], // Array of RPC URLs to use
 
  // Information for adding the network to your wallet (how it will appear for first time users) === \\
  // Information about the chain's native currency (i.e. the currency that is used to pay for gas)
  nativeCurrency: {
    decimals: 18,
    name: "Consensys ETH",
    symbol: "crETH",
  },
  shortName: "czkevm", // Display value shown in the wallet UI
  slug: "consensys", // Display value shown in the wallet UI
  testnet: true, // Boolean indicating whether the chain is a testnet or mainnet
  chain: "ConsenSys", // Name of the network
  name: "ConsenSys zkEVM Testnet", // Name of the network
};
 
const App = () => {
  return (
    <ThirdwebSDKProvider activeChain={customChain}>
      <YourApp />
    </ThirdwebSDKProvider>
  );
};

import { ThirdwebSDKProvider } from "@thirdweb-dev/react";
 
function MyApp() {
  return (
    <ThirdwebSDKProvider activeChain="localhost">
      <YourApp />
    </ThirdwebSDKProvider>
  );
}

The configuration object for setting up Auth, allowing users to sign in with their wallet.

import { ThirdwebSDKProvider } from "@thirdweb-dev/react";
 
function MyApp() {
  return (
    <ThirdwebSDKProvider
      authConfig={{
        authUrl: "/api/auth",
        domain: "https://example.com",
      }}
    >
      <YourApp />
    </ThirdwebSDKProvider>
  );
}

Override any of the default values for the SDK.

Gas settings, gasless transactions, RPC configuration, and more.

import { ThirdwebSDKProvider } from "@thirdweb-dev/react";
 
const sdkOptions = {
  readonlySettings: {
    rpcUrl: "<rpc-url>", // force read calls to go through your own RPC url
    chainId: 1, // reduce RPC calls by specifying your chain ID
  },
  gasSettings: {
    maxPriceInGwei: 123, // Maximum gas price for transactions (default 300 gwei)
    speed: "fastest", // the tx speed setting: 'standard'|'fast|'fastest' (default: 'fastest')
  },
  gasless: {
    // By specifying a gasless configuration - all transactions will get forwarded to enable gasless transactions
    engine: {
      relayerUrl: "<engine-relayer-url>", // your thirdweb Engine relayer URL
    },
    openzeppelin: {
      relayerUrl: "<open-zeppelin-relayer-url>", // your OZ Defender relayer URL
      relayerForwarderAddress: "<open-zeppelin-forwarder-address>", // the OZ defender relayer address (defaults to the standard one)
    },
    biconomy: {
      apiId: "biconomy-api-id", // your Biconomy API Id
      apiKey: "biconomy-api-key", // your Biconomy API Key
      deadlineSeconds: 123, // your Biconomy timeout preference
    },
  },
  infuraApiKey: "<infura-api-key>", // your Infura API key
  alchemyApiKey: "<alchemy-api-key>", // your Alchemy API key
};
 
function Example() {
  return (
    <ThirdwebSDKProvider sdkOptions={sdkOptions}>
      <App />
    </ThirdwebSDKProvider>
  );
}

Override the default Storage interface used by the SDK.

Allows you to create an instance of ThirdwebStorage with your own customized config, and pass it to the SDK.

import { ThirdwebSDKProvider } from "@thirdweb-dev/react";
import {
  ThirdwebStorage,
  StorageDownloader,
  IpfsUploader,
} from "@thirdweb-dev/storage";
 
// Configure a custom ThirdwebStorage instance
const storage = new ThirdwebStorage({
  uploader: new IpfsUploader(),
  downloader: new StorageDownloader(),
  gatewayUrls: {
    "ipfs://": [
      "https://gateway.ipfscdn.io/ipfs/",
      "https://cloudflare-ipfs.com/ipfs/",
      "https://ipfs.io/ipfs/",
    ],
  },
});
 
// Provide the custom storage instance to the SDK
function MyApp() {
  return (
    <ThirdwebSDKProvider storageInterface={storage}>
      <YourApp />
    </ThirdwebSDKProvider>
  );
}

If you are using React Query and have your own QueryClient, you can pass it as the queryClient prop to use this client instead of the SDK's default client.

import { ThirdwebSDKProvider } from "@thirdweb-dev/react";
import {
  QueryClient,
  QueryClientProvider,
} from "@tanstack/react-query";
 
function MyApp() {
  // Your React Query client (or client from other library such as wagmi)
  const queryClient = new QueryClient();
 
  return (
    <QueryClientProvider client={queryClient}>
      <ThirdwebSDKProvider queryClient={queryClient}>
        <YourApp />
      </ThirdwebSDKProvider>
    </QueryClientProvider>
  );
}