Thirdweb SDK

How to use Thirdweb CLI to deploy contracts and connect your dApps to Mantle Network

Mantle v2 Tectonic has been released, please move to the new documentation!

2023/12/04 Thirdweb released a report about recent security vulnerabilities in the commonly used open-source library for web3 smart contracts. All developers who have previously deployed contracts are advised to ensure that the contract is secure, see details here.

thirdweb is a complete web3 development framework that provides everything you need to connect your apps and games to decentralized networks like Mantle Network.

Visit the thirdweb docs to find more info and instructions on the thirdweb CLI

Installing Thirdweb CLI

You can install the thirdweb CLI globally on your machine using npm by running the following command.

npm i -g @thirdweb-dev/cli

Creating a New Project

To create a new project with thirdweb installed and configured, run:

npx thirdweb create

Deploying a Contract

See the section on deploying a contract Using Thirdweb CLI .

Connecting Your App

thirdweb offers SDKs for a range of programming languages, such as React, React Native, TypeScript, Python, Go, and Unity.

Creating a New App

Run the following command to start creating a new application:

npx thirdweb create --app

Input your preferences for the command line prompts:

1. Give your project a name

2. Choose your network: We will choose EVM for Mantle Network

3. Choose your preferred framework: Next.js, CRA, Vite, React Native, Node.js, or Express

4. Choose your preferred language: JavaScript or TypeScript

To create a new application pre-configured with thirdweb’s SDKs, run the following command and choose your preferred configurations:

npx thirdweb create app --evm

Install Into an Existing Project

You can install thirdweb into your existing project by running:

npx thirdweb install

Initialize SDK on Mantle Network

Wrap your application in the ThirdwebProvider component and change the activeChain to Mantle Network.

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


const App = () => {
  return (
    <ThirdwebProvider activeChain={ Mantle }>
      <YourApp />
    </ThirdwebProvider>
  );
};

Get Contract

To connect to your contract, use the SDK’s getContract method.

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

function App() {
  const { contract, isLoading, error } = useContract("{{contract_address}}");
}

Calling Contract Functions

• For extension based functions, use the built-in supported hooks. The following is an example using the NFTs extension to access a list of NFTs owned by an address- useOwnedNFTs

import { useOwnedNFTs, useContract, useAddress } from "@thirdweb-dev/react";

// Your smart contract address
const contractAddress = "{{contract_address}}";

function App() {
  const address = useAddress();
  const { contract } = useContract(contractAddress);
  const { data, isLoading, error } = useOwnedNFTs(contract, address);
}

Complete reference available here: https://portal.thirdweb.com/react/react.usenft

• Use the useContractRead hook to call any read functions on your contract by passing in the name of the function you want to use.

import { useContractRead, useContract } from "@thirdweb-dev/react";

// Your smart contract address
const contractAddress = "{{contract_address}}";

function App() {
  const { contract } = useContract(contractAddress);
  const { data, isLoading, error } = useContractRead(contract, "getName");
}

Complete reference available here: https://portal.thirdweb.com/react/react.usecontractread

• Use the useContractWrite hook to call any write functions on your contract by passing in the name of the function you want to use.

import { useContractWrite, useContract, Web3Button } from "@thirdweb-dev/react";

// Your smart contract address
const contractAddress = "{{contract_address}}";

function App() {
  const { contract } = useContract(contractAddress);
  const { mutateAsync, isLoading, error } = useContractWrite(
    contract,
    "setName",
  );

  return (
    <Web3Button
      contractAddress={contractAddress}
      // Calls the "setName" function on your smart contract with "My Name" as the first argument
      action={() => mutateAsync({ args: ["My Name"] })}
    >
      Send Transaction
    </Web3Button>
  );
}

Complete reference available here: https://portal.thirdweb.com/react/react.usecontractwrite

Connect Wallet

Create a custom connect wallet experience by declaring supported wallets passed to your provider.

import {
  ThirdwebProvider,
  metamaskWallet,
  coinbaseWallet,
  walletConnectV1,
  walletConnect,
  safeWallet,
  paperWallet,
} from "@thirdweb-dev/react";

function MyApp() {
  return (
    <ThirdwebProvider
      supportedWallets={[
        metamaskWallet(),
        coinbaseWallet(),
        walletConnect({
          projectId: "YOUR_PROJECT_ID", // optional
        }),
        walletConnectV1(),
        safeWallet(),
        paperWallet({
          clientId: "YOUR_CLIENT_ID", // required
        }),
      ]}
      activeChain={ Mantle }
    >
      <App />
    </ThirdwebProvider>
  );
}

Add in a connect wallet button to prompt end-users to log in with any of the above supported wallets.

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

function App() {
  return <ConnectWallet />;
}

Complete reference available here: https://portal.thirdweb.com/react/connecting-wallets

Deploying Your App

Use the following command to deploy your static web application on IPFS:

npx thirdweb deploy --app

Upon running this command:

• Your app is built for production and stored using thirdweb's Storage solution

• The production build is uploaded to IPFS

• A unique URL is generated for your application that serves as a permanent hosting location

Learn more here: https://blog.thirdweb.com/guides/how-to-host-your-web-app-on-ipfs/

Support

In case you have questions, or if you run into issues during deployment, feel free to reach out to us via Discord / Telegram, or get in touch with the thirdweb support at https://support.thirdweb.com.