Berachain Wallet Connect with Thirdweb SDK

Bm bm! 🐻

In the evolving landscape of Web3 applications, the integration of user wallets is not just a feature but a fundamental necessity. This detailed guide focuses on learning to build a wallet dApp on Berachain using the Thirdweb SDK button in your Web3 app using Thirdweb SDK, a full stack web3 development platform and a powerful tool for building blockchain applications.

We will explore every step of this integration, understanding its significance, ensuring that even new developer beras 🐻 will be equipped to get their dApps setup to connect with Berachain Artio!

As a bonus for the ones who read through the tutorial entirely — we’ve also added additional steps to show to capture wallet addresses of users trying to interact with your dApp. 🤓

🤔 Why Connect Wallet Button?

In Web3 applications, user interaction is heavily reliant on blockchain transactions, which necessitates a secure and efficient way to connect user wallets to the application. This connection enables a seamless interaction with smart contracts, allowing for a range of functionalities from executing transactions to querying blockchain data.

A Connect Wallet button is more than just a user interface element; it’s the bridge that links the decentralized world of blockchain with the user-centric interface of your application. It ensures that users can securely interact with your application while maintaining control over their digital assets and identity.

🛠️ What are we building?

Berachain Thirdweb Connect Button Landing Page

Berachain Thirdweb Connect Button (After connecting Metamask)

In this comprehensive guide, we’re building a dApp on Berachain that would serve as a one-stop template for devs trying to onboard developers onto their dApps via connect wallet button.

This feature is not merely a technical requirement but a gateway to the Berachain ecosystem, providing users with the ability to securely interact with your application. Remember, the ‘Connect Wallet’ button is more than a utility; it’s the first step in the user’s journey within your application.

The existing template is available on official Berachain repo-

Berachain Guide Repo — Thirdweb dApp Template

Pre-requisites

Node js > 20 and latest npm. Please follow this guide if needed: https://docs.npmjs.com/downloading-and-installing-node-js-and-npm.
IDEs like VScode, Replit etc.

Setting Up Your Project

Creating a robust foundation is crucial for the development of any application. Let’s start by setting up our project environment using Thirdweb.

Step 1: Creating a New App with Thirdweb

Creating your app with Third Web is the first step towards building your Web3 application. Here’s how to do it:

Launch Your Terminal: Start by opening your terminal. This is where you’ll enter the commands to create your project.
Run the Creation Command: Type npx thirdweb@latest create app in your terminal. This command fetches the latest version of Thirdweb and initiates the creation of your Web3 application.

npx thirdweb@latest create app 
# Need to install the following packages: 
# thirdweb@0.13.43 
# Ok to proceed? (y) y 
# npm WARN deprecated @safe-global/safe-ethers-lib@1.9.4: WARNING: This package is now bundled in @safe-global/protocol-kit. Please, follow the migration guide https://docs.safe.global/safe-core-aa-sdk/protocol-kit/reference/v1 
 
#     $$\     $$\       $$\                 $$\                         $$\        
#     $$ |    $$ |      \__|                $$ |                        $$ |       
#   $$$$$$\   $$$$$$$\  $$\  $$$$$$\   $$$$$$$ |$$\  $$\  $$\  $$$$$$\  $$$$$$$\   
#   \_$$  _|  $$  __$$\ $$ |$$  __$$\ $$  __$$ |$$ | $$ | $$ |$$  __$$\ $$  __$$\  
#     $$ |    $$ |  $$ |$$ |$$ |  \__|$$ /  $$ |$$ | $$ | $$ |$$$$$$$$ |$$ |  $$ | 
#     $$ |$$\ $$ |  $$ |$$ |$$ |      $$ |  $$ |$$ | $$ | $$ |$$   ____|$$ |  $$ | 
#     \$$$$  |$$ |  $$ |$$ |$$ |      \$$$$$$$ |\$$$$$\$$$$  |\$$$$$$$\ $$$$$$$  | 
#      \____/ \__|  \__|\__|\__|       \_______| \_____\____/  \_______|\_______/  
 
#  💎 thirdweb v0.13.43 💎

Type “y” and press enter to proceed. Once the installation is done you will be given multiple other options starting with “? What is your project named?”. Follow the steps mentioned in “Project Configuration” below.

3. Project Configuration:

Naming Your Project: Assign a name to your project, such as “Connect”. This helps in identifying your project within your workspace.
Note: We often get support questions regarding “Not being able to select customised name”, make sure to click on “Tab” button on your keyboard and it will highlight the “thirdwe-app” — then you should be able to make the changes.
Framework and Language Selection: Choose a framework that suits your development style (e.g., Next.js) and select a programming language (e.g., TypeScript) based on your proficiency and project requirements. But for this tutorial we will be going ahead with Next.js as the framework and TypeScript language.
Selecting the path to the new project getting created — Choose the path where your project will be saved.

Your overall output in terminal should look similar to -

# 💎 thirdweb v0.13.43 💎 
 
# ✔ What is your project named? … berathirdwebWallet 
# ✔ What framework do you want to use? › Next.js 
# ✔ What language do you want to use? › TypeScript 
# Creating a new thirdweb app in /Users/dethebera/BeraWork/berachain-thridweb/berachainThirdweb/berathirdwebwallet. 
 
# Downloading files with framework next. This might take a moment. 
# Installing packages. This might take a couple of minutes. 
 
# yarn install v1.22.21 
# info No lockfile found. 
# [1/4] 🔍  Resolving packages... 
# warning @thirdweb-dev/react > @thirdweb-dev/wallets > @magic-ext/connect@6.7.2: Connect extension has been merged to magic-sdk, please download the latest magic-sdk to unlock more features 
# warning @thirdweb-dev/react > @thirdweb-dev/wallets > @safe-global/safe-core-sdk@3.3.5: WARNING: This project has been renamed to @safe-global/protocol-kit. Please, follow the migration guide https://docs.safe.global/safe-core-aa-sdk/protocol-kit/reference/v1 
# warning @thirdweb-dev/react > @thirdweb-dev/wallets > @safe-global/safe-ethers-adapters > @safe-global/safe-core-sdk@3.3.5: WARNING: This project has been renamed to @safe-global/protocol-kit. Please, follow the migration guide https://docs.safe.global/safe-core-aa-sdk/protocol-kit/reference/v1 
# warning @thirdweb-dev/react > @thirdweb-dev/wallets > @safe-global/safe-ethers-lib@1.9.4: WARNING: This package is now bundled in @safe-global/protocol-kit. Please, follow the migration guide https://docs.safe.global/safe-core-aa-sdk/protocol-kit/reference/v1 
# warning @thirdweb-dev/react > @thirdweb-dev/wallets > @blocto/sdk > eip1193-provider@1.0.1: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info. 
# warning @thirdweb-dev/react > @thirdweb-dev/wallets > @safe-global/safe-core-sdk > zksync-web3@0.14.4: This package has been deprecated in favor of zksync-ethers@5.0.0 
# warning @thirdweb-dev/react > @thirdweb-dev/wallets > @blocto/sdk > eip1193-provider > @json-rpc-tools/provider@1.7.6: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info. 
# warning @thirdweb-dev/react > @thirdweb-dev/sdk > @thirdweb-dev/storage > cid-tool > cids@1.1.9: This module has been superseded by the multiformats module 
# warning @thirdweb-dev/react > @thirdweb-dev/sdk > @thirdweb-dev/storage > cid-tool > multibase@4.0.6: This module has been superseded by the multiformats module 
# warning @thirdweb-dev/react > @thirdweb-dev/sdk > @thirdweb-dev/storage > cid-tool > cids > multibase@4.0.6: This module has been superseded by the multiformats module 
# warning @thirdweb-dev/react > @thirdweb-dev/sdk > @thirdweb-dev/storage > cid-tool > multihashes > multibase@4.0.6: This module has been superseded by the multiformats module 
# warning @thirdweb-dev/react > @thirdweb-dev/wallets > @blocto/sdk > eip1193-provider > @json-rpc-tools/provider > @json-rpc-tools/utils@1.7.6: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info. 
# warning @thirdweb-dev/react > @thirdweb-dev/sdk > @thirdweb-dev/storage > cid-tool > cids > multicodec@3.2.1: This module has been superseded by the multiformats module 
# warning @thirdweb-dev/react > @thirdweb-dev/wallets > @walletconnect/modal > @walletconnect/modal-ui > motion > @motionone/vue@10.16.4: Motion One for Vue is deprecated. Use Oku Motion instead https://oku-ui.com/motion 
# warning @thirdweb-dev/react > @thirdweb-dev/wallets > @blocto/sdk > eip1193-provider > @json-rpc-tools/provider > @json-rpc-tools/utils > @json-rpc-tools/types@1.7.6: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info. 
# [2/4] 🚚  Fetching packages... 
# warning abitype@0.2.5: The engine "pnpm" appears to be invalid. 
# [3/4] 🔗  Linking dependencies... 
# warning "@thirdweb-dev/react > @thirdweb-dev/wallets > @magic-sdk/provider@13.6.2" has unmet peer dependency "localforage@^1.7.4". 
# warning "@thirdweb-dev/react > @thirdweb-dev/wallets > @safe-global/safe-ethers-adapters@0.1.0-alpha.17" has unmet peer dependency "@ethersproject/abstract-provider@^5.7.0". 
# warning "@thirdweb-dev/react > @thirdweb-dev/wallets > @safe-global/safe-ethers-adapters@0.1.0-alpha.17" has unmet peer dependency "@ethersproject/abstract-signer@^5.7.0". 
# warning "@thirdweb-dev/react > @thirdweb-dev/wallets > @safe-global/safe-ethers-adapters@0.1.0-alpha.17" has unmet peer dependency "@ethersproject/bignumber@^5.7.0". 
# warning "@thirdweb-dev/react > @thirdweb-dev/wallets > @safe-global/safe-ethers-adapters@0.1.0-alpha.17" has unmet peer dependency "@ethersproject/properties@^5.7.0". 
# warning "@thirdweb-dev/react > @thirdweb-dev/react-core > @thirdweb-dev/auth > fastify-type-provider-zod@1.1.9" has unmet peer dependency "fastify@^4.0.0". 
# [4/4] 🔨  Building fresh packages... 
# success Saved lockfile. 
# ✨  Done in 44.53s. 
 
# Initialized a git repository. 
 
# Success! Created berathirdwebwallet at /Users/dethebera/BeraWork/berachain-thridweb/berachainThirdweb/berathirdwebwallet 
# Inside that directory, you can run several commands: 
 
#   yarn dev 
#     Starts the development server. 
 
#   yarn build 
#     Builds the app for production. 
 
# We suggest that you begin by typing: 
 
#   cd berathirdwebwallet 
#   yarn dev

Once you’ve mastered the art of understanding and have become and “OG Dev Bera” you will feel more confident in setting the stage and the tone for your development process. Choosing the right framework and language is essential as it affects the ease of development and the scalability of your application.

💡 Fun Fact: Thirdweb sdk supports multiple frameworks. More below.

Testing the Existing Template

Now that everything is installed. It’s time to test the template and see what it offers in-house and we will plan the customization needed for Berachain Artio support accordingly!

Run the following in the same terminal:

cd berathirdwebWallet  
yarn dev

then in your browser search for http://localhost:3000. You should be able to see output similar to below.

Lets connect our Berachain Wallet to this existing dApp and see what’up. Click on the the “Connect Wallet” button and select “Metamask”.

It’s interesting to see that the template itself is almost functional and it does read the amount of $BERA in wallet correctly.

But, given thirdweb’s existing template uses “Ethereum” as their standard for templates and examples. The exiting dApp dosent know which chain exactly would Berachain be and what is the symbol of it’s token/ $BERA.

Let’s fix that in the upcoming section.

Step 2: Implementing the Connect Wallet Button

The ‘Connect Wallet’ button is central to the user experience in your Web3 application. Let’s integrate it.

Prepare the Workspace: Clean your index.tsx file by removing any pre-existing template code. This file will be the canvas for our 'Connect Wallet' button.

Sharing an example below on how the initalindex.tsxfile after the cleanup would look like.

Filename: ./pages/index.tsx

import { ConnectWallet } from "@thirdweb-dev/react"; 
import styles from "../styles/Home.module.css"; 
import Image from "next/image"; 
import { NextPage } from "next"; 
 
const Home: NextPage = () => { 
  return ( 
    <main className={styles.main}> 
      <div className={styles.container}> 
        <div className={styles.header}> 
 
// ........ 
// deleted portion  
// ........ 
 
        </div> 
      </div> 
    </main> 
  ); 
}; 
 
export default Home;

2. Incorporate the Connect Wallet component into this file by adding “<ConnectWallet />” in the “deleted” section above. Note, we’ve also made changes to the structure with main inside div.

Filename: ./pages/index.tsx

import { ConnectWallet } from "@thirdweb-dev/react"; 
import styles from "../styles/Home.module.css"; 
import Image from "next/image"; 
import { NextPage } from "next"; 
 
const Home: NextPage = () => { 
  return ( 
 
// Changes performed below   
    <div className={styles.container}> 
      <main className={styles.main}>  
        <ConnectWallet />  // Connect wallet button 
      </main> 
    </div> 
  );   
}; 
 
export default Home;

Let’s check our dApp again, you would notice that the button appears in the top-left corner of the screen- rather than the middle.

That looks weird, gead over to File: Home.module.css — or just search for “.container” in the search bar in code. Replace the existing code in their with the following.

Filename: ./styles/Home.module.css

/* Changes performed below ----------------------*/ 
 
.container { 
  position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 
 
/* -----------------------------------------*/  
 
.gradientText0 { 
  background: -webkit-linear-gradient(#bfa3da, #84309c, #c735b0); 
  -webkit-background-clip: text; 
  background-clip: text; 
  -webkit-text-fill-color: transparent; 
} 
 
.gradientText1 { 
  background: -webkit-linear-gradient(#a79af9, #7aa8d2); 
  -webkit-background-clip: text; 
  background-clip: text; 
  -webkit-text-fill-color: transparent; 
} 
 
.gradientText2 { 
  background: -webkit-linear-gradient(#bfa3da, #743f93); 
  -webkit-background-clip: text; 
  background-clip: text; 
  -webkit-text-fill-color: transparent; 
} 
 
.gradientText3 { 
  background: -webkit-linear-gradient(#c35ab1, #e9a8d9); 
  -webkit-background-clip: text; 
  background-clip: text; 
  -webkit-text-fill-color: transparent; 
} 
 
.title a:hover, 
.title a:focus, 
.title a:active { 
  text-decoration: underline; 
  text-decoration-color: #84309c; 
} 
 
.title { 
  line-height: 1.15; 
  font-size: 4rem; 
} 
 
.title, 
.description { 
  text-align: left; 
} 
 
.connect { 
  margin-bottom: 2rem; 
} 
 
.description { 
  margin-top: 2rem; 
  margin-bottom: 2rem; 
  line-height: 1.5; 
  font-size: 1.5rem; 
} 
 
.code { 
  background: #555; 
  border-radius: 5px; 
  padding: 0.5em; 
  font-size: 1.1rem; 
} 
 
.grid { 
  display: flex; 
  justify-content: left; 
  flex-wrap: wrap; 
  gap: 20px; 
} 
 
.card { 
  background-color: #131313; 
  text-align: left; 
  color: inherit; 
  text-decoration: none; 
  border-radius: 10px; 
  transition: color 0.15s ease, border-color 0.15s ease; 
  max-width: 440px; 
  overflow: none; 
  border: none; 
} 
 
.cardText { 
  padding: 1rem; 
} 
 
.card img { 
  display: block; 
  width: 100%; 
  height: auto; 
  border-radius: 4px 4px 0 0; 
  margin-bottom: 12px; 
  border: none; 
} 
 
.card:hover, 
.card:focus, 
.card:active { 
  background-color: #272c34; 
  opacity: 80%; 
} 
 
.card h2 { 
  margin: 0 0 0.75rem 0; 
} 
 
.card p { 
  margin: 0; 
  font-size: 1rem; 
  line-height: 1.75; 
} 
 
.logo { 
  height: 1em; 
  margin-left: 0.5rem; 
} 
 
@media (max-width: 768px) { 
  .header { 
    margin-left: 0; 
  } 
  .grid { 
    width: 100%; 
    flex-direction: column; 
  } 
  .title { 
    font-size: 3rem; 
    line-height: 1.15; 
  } 
} 
 
.card, 
.footer { 
  border-color: #222; 
} 
.logo img { 
  filter: invert(1); 
}

Nice. Now the button looks aligned.

Step 3: Customizing the Button to Berachain Artio

Customization plays a key role in aligning the button with the look and feel of your application and the specific needs of our Bera-users.

Blockchain Selection: In the app.tsx file, we need to specify Berachain Artio that your application will primarily interact with.

Given Artio is still very new, we don’t expect all the amazing devtools to support it right of the bad like ethereum which is used in most templates. But we will be there for sure :) soon.

For now let’s try and see what happens if we directly input “BerachainArtio” as an activechain.

You will notice it says it is a supported chain. Well that isn’t true as thirdweb sdk sources it’s chain from chainlist where Artio support has already been added. Let’s fix this.

2. Importing Berachain Artio:

I will be showing you an amazing and an easy way to get the customization done for Berachain Artio.

Head over to https://thirdweb.com/chainlist and search for Berachain Artio.

Click on Berachain Artio and scroll down to the “Getting Started with Berachain Artio” Section.

Copy “import { BerachainArtio } from “@thirdweb-dev/chains”; “ and add it to the _app.tsx file.

Additionally the “ {activechain} “ in function MyApp needs to be updates as well. Replace it with “ {BerachainArtio} “.

The final _app.tsx should look like the code below…

Filename: /pages/_app.tsx

import type { AppProps } from "next/app"; 
import { ThirdwebProvider } from "@thirdweb-dev/react"; 
import "../styles/globals.css"; 
 
// Added import here  
import { BerachainArtio } from "@thirdweb-dev/chains"; 
 
 
// This is the chain your dApp will work on. 
// Change this to the chain your app is built for. 
// You can also import additional chains from `@thirdweb-dev/chains` and pass them directly. 
 
// Active Chain Replaced with Berachain Artio 
const activeChain = "BerachainArtio"; 
 
function MyApp({ Component, pageProps }: AppProps) { 
  return ( 
    <ThirdwebProvider 
      clientId={process.env.NEXT_PUBLIC_TEMPLATE_CLIENT_ID} 
      activeChain={BerachainArtio}   
    > 
      <Component {...pageProps} /> 
    </ThirdwebProvider> 
  ); 
} 
 
export default MyApp;

Now hit save and let’s check the our connect wallet button. Disconnect the existing wallet and refresh the page.

Click on “Connect Wallet” button and login via Metamask.

Any visible changes? …… 🤔 Looking closely you would see that instead of “ETH” now the wallet read “BERA”.

Expanding the wallet further we can see it even recognized Berachain Artio along with it’s official Logo.

Step 5: Configuring Supported Wallets

Now if you’re looking to support other wallets — Thirdweb now supports most popular wallets out there right via the existing template. Let’s look at quick steps to configure any wallet.

Defining Supported Chains and Wallets: Clearly list the chains and wallets your application will support in an array format. This clarity is essential for users to understand the capabilities and limitations of your app.
Inclusion of Diverse Wallet Options: Add more wallet options, such as Smart Wallet or Email Wallet, to increase accessibility and user choice.
Including only Metamask?: Let’s say you wanna build a dApp with only 1 wallet — example Metamask to show up on the screen and none of the other wallets? How would you do it?

Let’s take a look at our existing _app.tsx. And add a “supportedWallets” property right after “activeChain”.

Filename: ./pages/_app.tsx

import type { AppProps } from "next/app"; 
import { ThirdwebProvider } from "@thirdweb-dev/react"; 
import "../styles/globals.css"; 
 
// Added import here  
import { BerachainArtio } from "@thirdweb-dev/chains"; 
 
// This is the chain your dApp will work on. 
// Change this to the chain your app is built for. 
// You can also import additional chains from `@thirdweb-dev/chains` and pass them directly. 
 
// Active Chain Replaced with Berachain Artio 
const activeChain = "BerachainArtio"; 
function MyApp({ Component, pageProps }: AppProps) { 
   
// supportedWallets  
return ( 
    <ThirdwebProvider 
      clientId={process.env.NEXT_PUBLIC_TEMPLATE_CLIENT_ID} 
      activeChain={BerachainArtio} 
      supportedWallets={[ 
        metamaskWallet() 
      ]} 
    > 
      <Component {...pageProps} /> 
    </ThirdwebProvider> 
  ); 
} 
 
export default MyApp;

This should now give only Metamask as the default wallet option and clicking the “Connect Wallet” button should automatically trigger Metamask without the user choosing which wallet.

This is a good option for saving a few steps and ensuring a master onboarding takes place.

Step 6: Styling the Button

1.Theme Customization: Choose between dark and light themes to match the aesthetic of your app. Property: theme

Thirdweb currently supports Dark and light theme. For this guide let’s select light.

In index.tsx, under <ConnectWallet /> add the theme="light”.

Filename: ./pages/index.tsx

import { ConnectWallet, useAddress } from "@thirdweb-dev/react"; 
import styles from "../styles/Home.module.css"; 
import Image from "next/image"; 
import { NextPage } from "next"; 
 
const Home: NextPage = () => { 
  const address = useAddress(); 
  console.log(address); 
 
  return ( 
    <div className={styles.container}> 
      <main className={styles.main}> 
        <ConnectWallet 
          theme="light" 
          btnTitle="Bera Connect" 
          className={styles.beraWallet} 
        /> 
      </main> 
    </div> 
  ); 
}; 
 
export default Home;

2. Button Text and CSS Styling: Change the button text for better integration into your app’s user flow. Apply custom CSS styles to make the button a seamless part of your application’s design language.

Property :btnTitle, className

Here, we would be changing the “Connect Wallet” to “Bera Connect” and additionally via className — changing the colour of the button to make it more suited to Berachain’s branding.

Add the following code right below theme.

Filename: ./pages/_app.tsx

import type { AppProps } from "next/app"; 
import { ThirdwebProvider, metamaskWallet } from "@thirdweb-dev/react"; 
import "../styles/globals.css"; 
import { BerachainArtio } from "@thirdweb-dev/chains"; 
 
// This is the chain your dApp will work on. 
// Change this to the chain your app is built for. 
// You can also import additional chains from `@thirdweb-dev/chains` and pass them directly. 
const activeChain = "BerachainArtio"; 
 
function MyApp({ Component, pageProps }: AppProps) { 
  return ( 
    <ThirdwebProvider 
      clientId={process.env.NEXT_PUBLIC_TEMPLATE_CLIENT_ID} 
      activeChain={BerachainArtio} 
      supportedWallets={[ 
        metamaskWallet() 
      ]} 
    > 
      <Component {...pageProps} /> 
    </ThirdwebProvider> 
  ); 
} 
 
export default MyApp;

Now head over to Home.module.css file and add the following code at the end of the file.

Filename: ./styles/Home.module.css

/* add the following to the end of the css file*/ 
 
.beraWallet { 
 background-color: ##2C1A16 !important; 
}

Complete Code Used in Tutorial

Filename: ./pages/_app.tsx

import type { AppProps } from "next/app"; 
import { ThirdwebProvider, metamaskWallet } from "@thirdweb-dev/react"; 
import "../styles/globals.css"; 
import { BerachainArtio } from "@thirdweb-dev/chains"; 
 
 
// This is the chain your dApp will work on. 
// Change this to the chain your app is built for. 
// You can also import additional chains from `@thirdweb-dev/chains` and pass them directly. 
const activeChain = "BerachainArtio"; 
 
function MyApp({ Component, pageProps }: AppProps) { 
  return ( 
    <ThirdwebProvider 
      clientId={process.env.NEXT_PUBLIC_TEMPLATE_CLIENT_ID} 
      activeChain={BerachainArtio} 
      supportedWallets={[ 
        metamaskWallet() 
      ]} 
    > 
      <Component {...pageProps} /> 
    </ThirdwebProvider> 
  ); 
} 
 
export default MyApp;

Filename: ./pages/_app.tsx

import { ConnectWallet, useAddress } from "@thirdweb-dev/react"; 
import styles from "../styles/Home.module.css"; 
import Image from "next/image"; 
import { NextPage } from "next"; 
 
const Home: NextPage = () => { 
  const address = useAddress(); 
  console.log(address); 
 
  return ( 
    <div className={styles.container}> 
      <main className={styles.main}> 
        <ConnectWallet 
          theme="light" 
          btnTitle="Bera Connect" 
          className={styles.beraWallet} 
        /> 
      </main> 
    </div> 
  ); 
}; 
 
export default Home;

Filename: ./styles/globals.css

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"); 
html, 
body { 
  padding: 0; 
  margin: 0; 
  font-family: "Inter", sans-serif; 
} 
a { 
  color: #84309c; 
  text-decoration: none; 
} 
* { 
  box-sizing: border-box; 
} 
body { 
  color: #e7e8e8; 
  background: #F47226; 
}

Filename: ./styles/Home.module.css

.container { 
  position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 
 
.gradientText0 { 
  background: -webkit-linear-gradient(#bfa3da, #84309c, #c735b0); 
  -webkit-background-clip: text; 
  background-clip: text; 
  -webkit-text-fill-color: transparent; 
} 
 
.gradientText1 { 
  background: -webkit-linear-gradient(#a79af9, #7aa8d2); 
  -webkit-background-clip: text; 
  background-clip: text; 
  -webkit-text-fill-color: transparent; 
} 
 
.gradientText2 { 
  background: -webkit-linear-gradient(#bfa3da, #743f93); 
  -webkit-background-clip: text; 
  background-clip: text; 
  -webkit-text-fill-color: transparent; 
} 
 
.gradientText3 { 
  background: -webkit-linear-gradient(#c35ab1, #e9a8d9); 
  -webkit-background-clip: text; 
  background-clip: text; 
  -webkit-text-fill-color: transparent; 
} 
 
.title a:hover, 
.title a:focus, 
.title a:active { 
  text-decoration: underline; 
  text-decoration-color: #84309c; 
} 
 
.title { 
  line-height: 1.15; 
  font-size: 4rem; 
} 
 
.title, 
.description { 
  text-align: left; 
} 
 
.connect { 
  margin-bottom: 2rem; 
} 
 
.description { 
  margin-top: 2rem; 
  margin-bottom: 2rem; 
  line-height: 1.5; 
  font-size: 1.5rem; 
} 
 
.code { 
  background: #555; 
  border-radius: 5px; 
  padding: 0.5em; 
  font-size: 1.1rem; 
} 
 
.grid { 
  display: flex; 
  justify-content: left; 
  flex-wrap: wrap; 
  gap: 20px; 
} 
 
.card { 
  background-color: #131313; 
  text-align: left; 
  color: inherit; 
  text-decoration: none; 
  border-radius: 10px; 
  transition: color 0.15s ease, border-color 0.15s ease; 
  max-width: 440px; 
  overflow: none; 
  border: none; 
} 
 
.cardText { 
  padding: 1rem; 
} 
 
.card img { 
  display: block; 
  width: 100%; 
  height: auto; 
  border-radius: 4px 4px 0 0; 
  margin-bottom: 12px; 
  border: none; 
} 
 
.card:hover, 
.card:focus, 
.card:active { 
  background-color: #272c34; 
  opacity: 80%; 
} 
 
.card h2 { 
  margin: 0 0 0.75rem 0; 
} 
 
.card p { 
  margin: 0; 
  font-size: 1rem; 
  line-height: 1.75; 
} 
 
.logo { 
  height: 1em; 
  margin-left: 0.5rem; 
} 
 
@media (max-width: 768px) { 
  .header { 
    margin-left: 0; 
  } 
  .grid { 
    width: 100%; 
    flex-direction: column; 
  } 
  .title { 
    font-size: 3rem; 
    line-height: 1.15; 
  } 
} 
 
.card, 
.footer { 
  border-color: #222; 
} 
.logo img { 
  filter: invert(1); 
} 
 
.beraWallet { 
 background-color: #2C1A16 !important; 
}Additional: Accessing Wallet Address

Additional: Accessing Wallet Address

How to get users wallet addresses?

The ability to access and use the wallet address is fundamental for any Web3 application. The use-cases are vast. Let’s show you a simple way of capturing the wallet addresses of the users connecting their wallets to your dApp.

Step 7: Using the Use Address Hook

Implementing the Hook: Utilize the useAddress hook in index.tsx to capture the address of the connected wallet. This is crucial for transactions and smart contract interactions.

const Home: NextPage = () => { 
  const address = useAddress();

2. Verification: Display the retrieved address in the console to verify successful integration and functionality.

console.log(address);

Now after connecting the wallet and opening the console in your browser. You would be able to see the wallet addresses available.

Overall the final index.tsx file will look like below.

Filename: ./pages/index.tsx

import { ConnectWallet, useAddress } from "@thirdweb-dev/react"; 
import styles from "../styles/Home.module.css"; 
import Image from "next/image"; 
import { NextPage } from "next"; 
 
const Home: NextPage = () => { 
  const address = useAddress(); 
  console.log(address); 
 
  return ( 
    <div className={styles.container}> 
      <main className={styles.main}> 
        <ConnectWallet 
          theme="light" 
          btnTitle="Bera Connect" 
          className={styles.beraWallet} 
        /> 
      </main> 
    </div> 
  ); 
}; 
 
export default Home;

And that’s all! With this additional step you’ve not only created a dApp that can now let users connect their wallets but you are also able to see user’s wallet addresses.

More dApps and How To Get Support ?

Learning Resources: Explore additional guides currently available via our docs at https://docs.berachain.com/developers.

How To Get Support ?

Discord Community: Join the Third Web Discord community for further assistance, discussions, and to stay updated with the latest developments in Web3.

⚠️ Still facing issues or have doubts? Head over to discord and raise a ticket as shown in the gif below!

Our DevRel team will be happy to assist! 🤝