Thirdweb

​

1. Create a new project

Create a new React or React Native project using the thirdweb CLI.

npx thirdweb create app --legacy-peer-deps

Select your preferences when prompted by the CLI, or use the recommended setup below.

✔ What type of project do you want to create? › App
✔ What is your project named? … my-abstract-app
✔ What framework do you want to use? › Next.js

Change directory into the newly created project:

cd my-abstract-app

(Replace my-abstract-app with your created project name.)

​

2. Set up a Thirdweb API key

On the thirdweb dashboard, create your account (or sign in), and copy your project’s Client ID from the Settings section. Ensure localhost included in the allowed domains.

Create an .env.local file and add your client ID as an environment variable:

NEXT_PUBLIC_TEMPLATE_CLIENT_ID=your-client-id-here

Start the development server and navigate to http://localhost:3000 in your browser to view the application.

npm run dev

​

3. Connect the app to Abstract

Import abstractTestnet from the thirdweb/chains package:

import { abstractTestnet } from "thirdweb/chains";

Use the abstractTestnet import as the value for the chain property wherever required.

<ConnectButton client={client} chain={abstractTestnet} />

Learn more on the official thirdweb documentation.