Connecting with Thirdweb

Using Thirdweb SDK to Connect to the world of Web 3.

Thirdweb

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

Example

Enter the web3 world using a fast route, This example we would be using Next Js and Thirdweb.

Step 1

Next Js

npx create-next-app@latest

Set up your environment you can use Typescript or JavaScript

Step 2

Thirdweb

npm i @thirdweb-dev/react @thirdweb-dev/sdk ethers@^5

We would be using Thirdweb Provider to wrap our app, This would ensure that when a wallet is connected the the website it is connected to all the pages of the website.

pages/_app.tsx

import '@/styles/globals.css'
import type { AppProps } from 'next/app'
import { ThirdwebProvider } from "@thirdweb-dev/react";

export default function App({ Component, pageProps }: AppProps) {
  return<div>
    <ThirdwebProvider activeChain="ethereum">
        <Component {...pageProps} />
    </ThirdwebProvider>
  </div> 
}


Feel free to play around and edit this post as much you like.

Step 3

We would be Importing a already made Connect Wallet Button from which we would be able to connect to the blockchain through sevral ways.

pages/index.tsx

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

export default function Thirdweb() {
  return(
    <div>
    <p className='text-center mt-5'> Thirdweb Connect Wallet</p>
      <br></br>
      <div className='flex justify-center items-center'>
      <ConnectWallet/>
    </div>
  </div> 
  )
}


Feel free to play around and edit this post as much you like.