Skip to main content

Custom Dashboard

Use thirdweb's sdk.deployer to deploy any pre-built contract dynamically with no private keys!

To create a new project using this template, use the thirdweb CLI:

npx thirdweb create --template custom-dashboard

Using this template

This example demonstrates the thirdweb SDK's capability to deploy any of our pre-built smart contracts!

We use the ContractDeployer class and the deployBuiltInContract function to deploy the contracts, and use the sdk.getContractList to view all the contracts we deployed so far!

This example can be utilized in projects that you want users to deploy smart contracts via your application dynamically, rather than the thirdweb dashboard.

Tools

Using This Repo

  • Create a project using this example by running:
npx thirdweb create --template custom-dashboard

Guide

We'll explore the details of how this repository works below.

Viewing Deployed Contracts

On the index.tsx page, we use the .getContractList function to view all the contracts we deployed so far:

// Get the signer of the currently connected wallet
const signer = useSigner();

// Instantiate the SDK with the signer
const thirdweb = new ThirdwebSDK(signer);

// Fetch the contracts for this address and set them in state using the SDK
thirdweb.getContractList(address).then((contracts) => {
// set the contracts in state
setExistingContracts(contracts);
});

Deploying Contracts

On the deploy.tsx page, we use the [.deployBuiltInContract] function to deploy a contract, which is a generic function to deploy any pre-built contract.

Typically, you know which contract you want your users to deploy, so it's more helpful to use one of the methods exposed on the ContractDeployer class.

Such as:

On each of these pages, you can find code examples to help you deploy the contract.

To make the code generic for this example project, we used the internal function from the SDK deployBuiltInContract, which calls each of these functions under the hood, depending on which contract you pass in as a parameter.

Here's how it looks:

const signer = useSigner();

const thirdweb = new ThirdwebSDK(signer);

const contractAddress = await thirdweb.deployer.deployBuiltInContract(
contractSelected,
{
name: `My ${contractSelected}`,
primary_sale_recipient: address,
voting_token_address: address,
description: `My awesome ${contractSelected} contract`,
// Recipients are required when trying to deploy a split contract
recipients: [
{
address,
sharesBps: 100 * 100,
},
],
},
);

Join our Discord!

For any questions, suggestions, join our discord at https://discord.gg/thirdweb.