Comment on page

Thirdweb SDK

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

​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 login 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.

Mantle Client SDK

Multisig Wallet

Last modified 2mo ago