Building with Thirdweb

Thirdweb simplify the process of building and deploying Web3 applications. it provides a variety of tools and SDKs (Software Development Kits) for developers to integrate blockchain functionality into their apps with minimal code and it also supports Asset Chain.

Features of Thirdweb

Smart Contract Development: Thirdweb offers pre-built smart contracts that can be easily deployed on various blockchain networks, such as Asset Chain. These contracts cover areas like NFTs, tokens, and marketplaces.
Developer SDKs: It provides SDKs for JavaScript, React, Python, and other languages to interact with smart contracts, enabling developers to manage blockchain operations like token creation, minting, and transferring assets.
User Authentication: Thirdweb supports Web3 wallet integrations (e.g., MetaMask, WalletConnect), making it easy for users to interact with decentralized apps securely.
Gasless Transactions: Thirdweb provides solutions for gasless transactions, where users can interact with the blockchain without paying fees, by allowing the developer to sponsor gas fees.
Analytics & Dashboards: It includes built-in analytics to track contract activity and manage dApps through a visual interface.

AssetChain on Thirdweb

Through Thirdweb, developers can easily interact with AssetChain via its comprehensive tools and services. visit AssetChain-Thirdweb

Leveraging Thirdweb’s Pre-built Contracts: Thirdweb offers a wide range of pre-built contracts tailored for specific use cases, which can streamline the development process. With AssetChain, you can deploy these contracts to tokenize assets or manage interactions with the blockchain without writing code from scratch. This is particularly useful for asset management, staking, and automated processes.
Faucets: Thirdweb supports AssetChain Faucets, This faucet allows developers to test dApps, deploy contracts, and perform token transactions on the AssetChain testnet without incurring real costs, making it a valuable tool for development.
Thirdweb RPC Edge: A specialized endpoint that allows developers to connect their applications to the AssetChain testnet.
Thirdweb Engine: Thirdweb Engine is an open-source backend server that enhances how developers interact with the Asset Chain blockchain at production scale. By integrating Thirdweb Engine with AssetChain, your application can:

Send multiple transactions at once, resubmitting any stuck ones.
Manage nonce, gas settings, and RPC errors automatically.
Deploy contracts and handle smart account interactions.
Control backend wallet access for your team.
Sponsor gas fees for users, improving their experience.
Subscribe to contract events for real-time dApp functionality.

This significantly simplifies the development and scaling of asset-tokenization applications on AssetChain.

Getting Started

To connect your application to Thirdweb, you'll need to create a project on the Thirdweb Dashboard and obtain the Project ID.

Visit the Thirdweb Dashboard.
If you don't have an account, connect either your wallet , your socials or google account and create an account. If you already have an account, log in.

Create a New Project

After logging in, go to settings
In the API Key Section, Click on the Create API Key

fill in the necessary details, such as the API key Name and toogle or add domains that will make use of this API key
confirm that you have saved your Client ID and Secret Key.

Setting Up the ReactJs Project

Use any of this Templates Below

Configuring Codebase

For this tutorial, we will be making use of the Vite Kit

Clone the repo to your computer

Make sure you have git, nodejs, yarn and npm installed on your computer

git clone https://github.com/thirdweb-example/vite-starter.git

Navigate to the folder path

cd vite-starter

Install this packages

yarn install

create a .env file in the vite-starter folder and add this code below:

VITE_TEMPLATE_CLIENT_ID=5e96774aa6a3b1c72ac45dd1b4ca1e91 //Replace with your own client ID

create a client.ts file within the src folder and add the following codes:


import { createThirdwebClient } from "thirdweb";

// Replace this with your client ID string
// refer to https://portal.thirdweb.com/typescript/v5/client on how to get a client ID
const clientId = import.meta.env.VITE_TEMPLATE_CLIENT_ID;
console.log(clientId, "Client ID: ", clientId);
export const client = createThirdwebClient({
  clientId: clientId,
});

in your main.tsx file, update it with the following codes:


import React from "react";
import { createRoot } from "react-dom/client";
import { App } from "./App";
import { ThirdwebProvider } from "thirdweb/react";
import "./index.css";


createRoot(document.getElementById("root")!).render(
  <React.StrictMode >
    <ThirdwebProvider>
      <App />
    </ThirdwebProvider>
  </React.StrictMode>
);

create a assetchain.testnet.ts file within the src folder and the following codes:


import { defineChain } from "thirdweb/chains";

export const assetChainTestnet = /* @__PURE__ */ defineChain({
  id: 42421,
  name: "AssetChain Testnet",
  nativeCurrency: {
    name: "Real World Asset",
    symbol: "RWA",
    decimals: 18,
  },
  blockExplorers: [
    {
      name: "Asset Chain Testnet Explorer",
      url: "https://scan-testnet.assetchain.org",
      apiUrl: "https://scan-testnet.assetchain.org/api",
    },
  ],
  testnet: true,
});

in your App.tsx file , update it with the codes below,


import { ConnectButton } from "thirdweb/react";
import thirdwebIcon from "./thirdweb.svg";
import { client } from "./client";
import { assetChainTestnet} from "./assetchain.testnet";

export function App() {
	return (
    <main className="p-4 pb-10 min-h-[100vh] flex items-center justify-center container max-w-screen-lg mx-auto">
      <div className="py-20">
        <Header />

        <div className="flex justify-center mb-20">
          <ConnectButton
            client={client}
            appMetadata={{
              name: "ThirdwebConnect",
              url: "https://example.com",
            }}
            chain={assetChainTestnet}
          />
        </div>

        <ThirdwebResources />
      </div>
    </main>
  );
}

function Header() {
	return (
		<header className="flex flex-col items-center mb-20 md:mb-20">
			<img
				src={thirdwebIcon}
				alt=""
				className="size-[150px] md:size-[150px]"
				style={{
					filter: "drop-shadow(0px 0px 24px #a726a9a8)",
				}}
			/>

			<h1 className="text-2xl md:text-6xl font-bold tracking-tighter mb-6 text-zinc-100">
				thirdweb SDK
				<span className="text-zinc-300 inline-block mx-1"> + </span>
				<span className="inline-block -skew-x-6 text-violet-500"> vite </span>
			</h1>

			<p className="text-zinc-300 text-base">
				Read the{" "}
				<code className="bg-zinc-800 text-zinc-300 px-2 rounded py-1 text-sm mx-1">
					README.md
				</code>{" "}
				file to get started.
			</p>
		</header>
	);
}

function ThirdwebResources() {
	return (
		<div className="grid gap-4 lg:grid-cols-3 justify-center">
			<ArticleCard
				title="thirdweb SDK Docs"
				href="https://portal.thirdweb.com/typescript/v5"
				description="thirdweb TypeScript SDK documentation"
			/>

			<ArticleCard
				title="Components and Hooks"
				href="https://portal.thirdweb.com/typescript/v5/react"
				description="Learn about the thirdweb React components and hooks in thirdweb SDK"
			/>

			<ArticleCard
				title="thirdweb Dashboard"
				href="https://thirdweb.com/dashboard"
				description="Deploy, configure, and manage your smart contracts from the dashboard."
			/>
		</div>
	);
}

function ArticleCard(props: {
	title: string;
	href: string;
	description: string;
}) {
	return (
		<a
			href={`${props.href}?utm_source=vite-template`}
			target="_blank"
			className="flex flex-col border border-zinc-800 p-4 rounded-lg hover:bg-zinc-900 transition-colors hover:border-zinc-700"
			rel="noreferrer"
		>
			<article>
				<h2 className="text-lg font-semibold mb-2">{props.title}</h2>
				<p className="text-sm text-zinc-400">{props.description}</p>
			</article>
		</a>
	);
}

Once everything is updated, open your terminal and run the command below to start the server:

yarn dev

To conclude, the code example demonstrates how to successfully connect to the Asset Chain Network using Thirdweb.

Thirdweb paves the way for efficient and scalable blockchain development, empowering developers to build decentralized applications (dApps) with less friction while maintaining performance and security standards.

PreviousPayments NextMobile Apps on Asset Chain

Last updated 2 months ago