Deploying Contracts with ThirdWeb

This guide explains how to use ThirdWeb - a comprehensive no-code/low-code platform - to deploy and manage smart contracts on IOST 3.0 Layer 2.

What is ThirdWeb?

ThirdWeb is a development framework that simplifies blockchain development through:

• Pre-built smart contract templates
• No-code contract deployment interfaces
• SDK for frontend integration
• Contract management dashboards
• Built-in wallet integration

ThirdWeb reduces the complexity of deploying and managing smart contracts, making blockchain development accessible to developers of all skill levels.

Getting Started with ThirdWeb

Installation

1. Install the ThirdWeb CLI

npm install -g @thirdweb-dev/cli

2. Create a new project

npx thirdweb create app --template next-typescript-starter

3. For direct contract deployment tools:

npx thirdweb create contract

Connecting to IOST Layer 2

To use ThirdWeb with IOST Layer 2, you'll need to configure the network settings:

Dashboard Configuration

1. Log in to your ThirdWeb dashboard

2. Go to "Settings" > "Networks"

3. Click "Add Custom Network"

4. Enter the IOST Layer 2 details:

   • Network Name: IOST Layer 2
   • Chain ID: 182
   • Currency Symbol: IOST
   • RPC URL: https://l2-mainnet.iost.io
   • Block Explorer URL: https://l2-scan.iost.io

Code Configuration

In your ThirdWeb application, configure the IOST Layer 2 network.

import { ThirdwebSDK } from "@thirdweb-dev/sdk";

// Initialize the SDK on IOST Layer 2
const sdk = new ThirdwebSDK("https://l2-mainnet.iost.io", {
  chainId: 182,
});

Deploying Pre-built Contracts

ThirdWeb offers templates for common contract types that you can deploy with minimal configuration:

Using the Dashboard

1. Log in to ThirdWeb
2. Select "Contracts" > "Deploy"
3. Choose a contract type:
   • NFT Collection
   • Marketplace
   • Token
   • And many more
4. Configure contract parameters
5. Connect your wallet (configured for IOST Layer 2)
6. Click "Deploy Now"

Using the CLI

npx thirdweb deploy

This will guide you through contract selection and deployment in an interactive way.

Deploying Custom Contracts

For deploying custom contracts through ThirdWeb:

1. Create your contract

// contracts/MyContract.sol
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

contract MyContract {
    string public greeting;
    
    constructor(string memory _greeting) {
        greeting = _greeting;
    }
    
    function setGreeting(string memory _greeting) public {
        greeting = _greeting;
    }
}

2. Compile and deploy

npx thirdweb deploy

3. Follow the prompts to deploy to IOST Layer 2

Using ThirdWeb SDK

ThirdWeb provides a powerful SDK to interact with your contracts:

Installation

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

Basic Usage

import { ThirdwebSDK } from "@thirdweb-dev/sdk";
import { useContract, useNFTs } from "@thirdweb-dev/react";

// React component using ThirdWeb hooks
function MyNFTGallery() {
  const { contract } = useContract("your-contract-address");
  const { data: nfts, isLoading } = useNFTs(contract);

  if (isLoading) return <div>Loading...</div>;
  
  return (
    <div>
      {nfts?.map((nft) => (
        <div key={nft.metadata.id}>
          <img src={nft.metadata.image} alt={nft.metadata.name} />
          <h3>{nft.metadata.name}</h3>
        </div>
      ))}
    </div>
  );
}

Connecting to IOST Layer 2 in React

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

const IOST_L2_CHAIN_ID = 182;

function MyApp() {
  return (
    <ThirdwebProvider 
      desiredChainId={IOST_L2_CHAIN_ID}
      chainRpc={{
        [IOST_L2_CHAIN_ID]: "https://l2-mainnet.iost.io",
      }}
    >
      <YourApp />
    </ThirdwebProvider>
  );
}

Contract Management

ThirdWeb provides a dashboard for managing deployed contracts:

1. Navigate to ThirdWeb Dashboard
2. Connect your wallet
3. View your deployed contracts
4. Access contract management features:
   • Role management
   • Function calling
   • Event monitoring
   • Token minting and transfer

Contract Extensions

ThirdWeb offers extensions that add functionality to your contracts:

• Permission Controls: Manage contract permissions
• Royalty Fees: Set up royalty payments for NFTs
• Drop Mechanisms: Create different token distribution strategies
• Marketplace Features: Add marketplace functionality

Automated Contract Verification

ThirdWeb automatically handles contract verification when deploying through their platform:

1. Deploy your contract via ThirdWeb
2. ThirdWeb submits verification data to the block explorer
3. Your contract is verified and ready for interaction

Troubleshooting

Network Connection Issues

Symptom: Cannot connect to IOST Layer 2

Solution: Verify RPC URL and chain ID settings

Wallet Connection Errors

Symptom: Wallet doesn't connect or show the correct network

Solution: Ensure MetaMask is configured for IOST Layer 2

Deployment Failures

Symptom: Contract deployment fails

Solution: Check contract code for errors and ensure sufficient funds for gas

Best Practices

• Start with Templates: Use ThirdWeb's pre-built contracts for common use cases
• Test on Testnets: Always test your contracts on a testnet before deploying to mainnet
• Use the Dashboard: Leverage ThirdWeb's dashboard for monitoring and management
• Leverage Extensions: Use ThirdWeb extensions to add functionality without writing code
• Keep SDK Updated: Regularly update your ThirdWeb SDK to access new features and security patches

Resources

• ThirdWeb Documentation
• ThirdWeb GitHub
• ThirdWeb Contract Templates