Skip to main content

Building Frontend Applications

You can build front-end applications by using our React and TypeScript SDKs!

Front-end applications are best-suited when you want users to connect their wallets to your web application and interact with your contracts using their wallet; such as an NFT Minting Website.

Automatic Set Up​

The easiest way to get started is by using the thirdweb CLI.

This interactive tool creates a new project with thirdweb pre-configured with a framework and language of your choice.

npx thirdweb create app --evm

That's it! You're project is ready to start interacting with your contract!

Starter Kits & Templates

You can start with one of our template projects by passing the --template flag and the name of the example repo.

Manual Installation​

If you have an existing project you want to integrate thirdweb into, install the thirdweb SDKs:

npm install @thirdweb-dev/react @thirdweb-dev/sdk ethers@5

Then wrap your application in the ThirdwebProvider to get started!

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

export const MyApp = () => {
  return (
    <ThirdwebProvider activeChain="ethereum">
      <YourApp />
    </ThirdwebProvider>
  );
};

Configure Chain​

If you are using one of our default chains, provide the activeChain prop to the ThirdwebProvider component. This prop determines which chain you want your app to be operating on.

View all pre-defined chains
  • Ethereum: "ethereum"
  • Goerli: "goerli"
  • Polygon: "polygon"
  • Mumbai: "mumbai"
  • Arbitrum One: "arbitrum"
  • Arbitrum Goerli: "arbitrum-goerli"
  • Optimism: "optimism"
  • Optimism Goerli Testnet: "optimism-goerli"
  • Binance SmartChain: "binance"
  • Binance SmartChain Testnet: "binance-testnet"
  • Fantom Opera: "fantom"
  • Fantom Testnet: "fantom-testnet"
  • Avalanche C Chain: "avalanche-fuji"
  • Avalanche Fuji Testnet: "avalanche-fuji-testnet"
  • Localhost: "localhost"
import { ThirdwebProvider } from "@thirdweb-dev/react";

function App() {
  return (
    <ThirdwebProvider activeChain="polygon">
      <YourApp />
    </ThirdwebProvider>
  );
}

For non-default chains, import one of the 700+ chains available in the @thirdweb-dev/chains package and pass it to the activeChain prop. You can install this package with:

npm install @thirdweb-dev/chains

Import the chain you want to use and pass it to the activeChain prop:

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

function MyApp() {
  return (
    <ThirdwebProvider
      activeChain={Gnosis}
    >
      <YourApp />
    </ThirdwebProvider>
  );
}

Custom Chains​

If your chain is not included in the @thirdweb-dev/chains package, you can provide the chain information yourself to the activeChain prop.

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

const App = () => {
  return (
    <ThirdwebProvider
      activeChain={{
        // === Required information for connecting to the network === \\
        chainId: 59140, // Chain ID of the network
        // Array of RPC URLs to use
        rpc: ["<your-rpc-url-here>"],

        // === Information for adding the network to your wallet (how it will appear for first time users) === \\
        // Information about the chains 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
      }}
    >
      <YourApp />
    </ThirdwebProvider>
  );
};

Local Nodes​

If you are running a local node using a tool such as Hardhat or Anvil, provide "localhost" as the activeChain prop, (or Localhost imported from @thirdweb-dev/chains).

You can then deploy or import your contracts to the dashboard to interact with them in your app.

Local Node templates

We have templates available for using the React SDK with Hardhat and Anvil local nodes.

npx thirdweb create --template hardhat-local-node # Hardhat
npx thirdweb create --template anvil-local-node # Anvil
function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ThirdwebProvider activeChain="localhost">
      {/* Your App Here */}
    </ThirdwebProvider>
  );
}