Bm bm! 🐻

We’re back with another guide to help dApps use existing SDK’s out there and help connect their dApps to Berachain’s Artio Testnet.

🛠️ What are we building ?

In this guide we will be setting up the Rainbowkit’s Connect Wallet button on Berachain Artio using Vite (React + Typescript).

🏃 ViteJS

Vite is a great way to create single page applications and is another alternative to server-side rendering applications like NextJS.

🌈 RainbowKit Advantages

When building Web3 dApps, it’s crucial to balance usability and flexibility. RainbowKit is a great tool for this, making it easier to design a dApp wallet that looks good and is user-friendly.

In the past, adding wallets to dApps was a rigid process. Developers had to tailor the dApp to a specific wallet, like Metamask, which limited users to that wallet only.

RainbowKit changes the game by providing a toolkit that lets developers customize the entire wallet connection process. You can choose different themes to match your dApp’s look and offer a range of supported wallets, allowing users to pick their favorite, whether it’s Metamask, Trust Wallet, or others, for a smooth experience.

Additionally, developers can create custom ‘connect’ buttons that blend seamlessly with their dApp’s design, making the user interface more familiar and fluid.

⚠️ Prerequisites

• Knowledge of React.
• Development environment: VSCode or Atom.
• Node version >v18.16.0.

✅ Step-by-Step Guide Implementing RainbowKit In Your dApp

Step 1: Creating a React Project

Create a new React-typescript application using Vite.

npm create vite@latest berachain-rainbowkit -- --react-ts; 
# Need to install the following packages:
# create-vite@5.2.3
# Ok to proceed? (y) y
# ✔ Select a framework: › React
# ✔ Select a variant: › TypeScript

# Scaffolding project in /Users/dethebera/BeraWork/berarainbowkit/berachain-rainbowkit...
# Done. Now run:
#   cd berachain-rainbowkit
#   npm install
#   npm run dev
# npm notice 
# npm notice New minor version of npm available! 10.2.4 -> 10.5.2
# npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.5.2
# npm notice Run npm install -g npm@10.5.2 to update!
# npm notice

OR

You can also install Vite using the command below and you’ll be prompted to enter a project name; input your desired name.

npm create vite@latest

• Afterward, choose the React framework when prompted to select a framework.
• Following that, opt for the Typescript variant when asked for the variant.

Go to your new project directory, install dependencies, and run the app

cd berachain-rainbowkit
npm install
npm run dev

Navigate to your local server at http://localhost:5173/ and you should see an interface displayed as follows:

Once we’ve set up our React project, we can move forward to install RainbowKit along with other necessary dependencies.

Step 2 — Install RainbowKit and Additional Dependencies:

RainbowKit depends on wagmi and other libraries. You can install these by running:

npm install @rainbow-me/rainbowkit wagmi
# added 33 packages, removed 82 packages, changed 60 packages, and audited 1193 packages in 1m
# 137 packages are looking for funding
#   run `npm fund` for details
# found 0 vulnerabilities

Now that we know how RainbowKit allows developers to customize their wallet connection experiences let’s put it into action with a practical guide.

We will be going through a step-by-step process, starting from scratch, to seamlessly integrate a RainbowKit button across various chains.

By now, you’re all set to make use of the RainbowKit package in your project.

Step 3: Configuring RainbowKit and Wagmi

Let’s import the packages into our project. We’ll add these imports at the top of the main.tsx file:

File:./src/main.tsx

import "./polyfills";
import "./global.css";
import "@rainbow-me/rainbowkit/styles.css";
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { getDefaultConfig, RainbowKitProvider } from "@rainbow-me/rainbowkit";
import { WagmiProvider } from "wagmi";
import { berachainTestnet } from "wagmi/chains";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
const config = getDefaultConfig({
  appName: "RainbowKit demo",
  projectId: "YOUR_PROJECT_ID",
  chains: [berachainTestnet],
});
const queryClient = new QueryClient();
ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider>
          <App />
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  </React.StrictMode>
);

For this guide, we’ll set up the supported chains for our project and use “berachainTestnet” , keeping it unchanged, along with the provider required by Wagmi to interact with the blockchain.

For a comprehensive overview of various ways to configure your connection modal, you can refer to RainbowKit’s documentation.

We’ll also need a Project ID.

You can get one from WalletConnect Cloud and it will look something like this: 4322794c0c46b……..ca48ba15fc3. This unique identifier is integral to your project’s interaction with WalletConnect Cloud, enabling seamless connections with various wallets.

Step 4: Getting a RainbowKit Project ID

To generate a Project ID, access WalletConnect Cloud by signing in and selecting the Create option, as illustrated below:

Provide a name for the project and then click on the Create button to proceed.

Following these steps, you should obtain a Project ID.

Step 5: Polyfills Fix

The Vite bundler doesn’t provide Node polyfills, so you’ll need to include polyfills for global, Buffer and process.env.

Create a new file named Polyfills.ts and add the following code to it.

File:./src/Polyfills.ts

import { Buffer } from "buffer";
window.global = window.global ?? window;
window.Buffer = window.Buffer ?? Buffer;
window.process = window.process ?? { env: {} }; // Minimal process polyfill
export {};

Step 6: Optional — Adding Global.css

In certain instances you might notice the Global.css file might be missing.

Head over to src folder and create a new file name Global.css and add the following code in it.

File:./src/Global.css

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
        sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

Step 7: Adding the Connect Button

To include the connect button, import it from RainbowKit at the top of your App.tsx file.

Your entire App.tsx looks something similar to what we have below. Essentially, this file controls how your app looks and works. It includes different parts of your app and adds the RainbowKit connect button to make it easy for users to connect their wallets.

File:./src/App.tsx

import { ConnectButton } from "@rainbow-me/rainbowkit";
function App() {
  return (
    <div
      style={{
        display: "flex",
        justifyContent: "flex-end",
        padding: 12,
      }}
    >
      <ConnectButton />
    </div>
  );
}
export default App;

Once everything is up and running on your local system, you should have something similar to this:

When you click Connect Wallet, a pop-up window, similar to the image below, will appear:

If you click on any of the wallets (i.e. metamask), you should be able to connect your wallet and the chain of your choice.

Congratulations for making it to the end of the tutorial and successfully integrating RainbowKit!

Complete Code

File:./src/main.tsx

import "./polyfills";
import "./global.css";
import "@rainbow-me/rainbowkit/styles.css";
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { getDefaultConfig, RainbowKitProvider } from "@rainbow-me/rainbowkit";
import { WagmiProvider } from "wagmi";
import { berachainTestnet } from "wagmi/chains";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
const config = getDefaultConfig({
  appName: "RainbowKit demo",
  projectId: "YOUR_PROJECT_ID",
  chains: [berachainTestnet],
});
const queryClient = new QueryClient();
ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider>
          <App />
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  </React.StrictMode>
);

File:./src/App.tsx

import { ConnectButton } from "@rainbow-me/rainbowkit";
function App() {
  return (
    <div
      style={{
        display: "flex",
        justifyContent: "flex-end",
        padding: 12,
      }}
    >
      <ConnectButton />
    </div>
  );
}
export default App;

File:./src/Polyfills.ts

import { Buffer } from "buffer";
window.global = window.global ?? window;
window.Buffer = window.Buffer ?? Buffer;
window.process = window.process ?? { env: {} }; // Minimal process polyfill
export {};

File:./src/Global.css

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
        sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

Head over to Berachain guides repo using the link below and find the template for the above guide to directly test the dApp out!

guides/apps/rainbowkit-vite at main · berachain/guides

Recap

RainbowKit offers a range of useful tools without requiring much effort from developers. It integrates seamlessly with the Wagmi library, enabling easy utilization of Wagmi’s features such as message signing and transactions.

Note: The alignment of the Connect Wallet button might seem different from the SDK initially — that is because of slight change in css that we made.

This guide demonstrates setting up a Vite project with RainbowKit to function with Berachain’s Artio testnet, simplifying wallet connections and enabling developers to setup their dApp’s user onboarding.

🛠️ Want To Build and How To Get Support ?

If you’re interested in understanding and developing more on Berachain, try various example repos provided in the official guides repo.

GitHub - berachain/guides: A demonstration of different contracts, languages, and libraries that work with Berachain EVM.

Berachain’s developer documentation also has multiple starter guides with goto tools such as Hardhat, Foundry and more! Head over to developer section on the docs using the link below.

Connecting to Berachain

How to get Developer Support ?

⚠️ Still facing issues or have doubts?

Head over to Official Berachain Discord and raise a ticket as shown in the gif below!

Our DevRel team will be happy to assist! 🤝

Byyeeee bears! 🐻

How To Setup Rainbowkit On Berachain Using Vite was originally published in berachain-devs on Medium, where people are continuing the conversation by highlighting and responding to this story.

How to deploy a local Indexer on Berachain Artio ?

Bm dev bears! 🐻

In this short walkthrough we will be learning to deploy a Indexer that supports Berachain Artio!

Special mention to Denham and Sven from Evio for preparing the initial resource on Github!

Why are Indexers Needed?

Indexers are critical components in blockchain ecosystems, serving several pivotal roles:

1. Query Optimization: They restructure blockchain data into query-friendly formats, significantly enhancing query performance beyond the blockchain’s inherent sequential data storage.
2. Data Structuring: Indexers transform raw blockchain data into a more digestible and interpretable format, facilitating easier access and analysis.
3. Scalability Solutions: By offloading data queries from the main blockchain infrastructure, indexers mitigate scalability constraints, handling large data volumes efficiently.
4. Load Alleviation: They reduce direct blockchain query loads, preserving network performance and responsiveness.
5. Advanced Query Support: Indexers enable complex data queries, accommodating sophisticated operational demands beyond simple blockchain transactions.
6. Real-time Data Provision: They support applications requiring immediate data feeds, ensuring timely data delivery without burdening the primary blockchain network.
7. Historical Data Analysis: Indexers organize and maintain accessible historical records, simplifying retrospective data examinations.

In essence, indexers are indispensable for maintaining operational efficiency, facilitating complex data interactions, and enhancing the overall utility of blockchain platforms in sophisticated development environments.

🛠️ What are we building?

This developer guide will walk you through setting up an indexer, to query any ERC20 contract on the Berachain network using a GraphQL API, all with Envio.

This guide analyzes all WETH token “approval” and “transfer” event logs emitted by the WETH contract to gain real-time insights into metrics such as token holders, balances, and transfers of the WETH token.

For this specific guide, let’s analyze the top ten accounts with the largest WETH holdings, by querying the balance of token holders.

The full github code repository can be found in the guides section of this repository under Index ERC20 Contract Using Envio.

guides/apps/envio-indexer-erc20 at main · berachain/guides

Pre-requisites

Before beginning, make sure you have the following installed or setup on your computer before hand.​

The following are the prerequisite packages required for Envio:

1. Node.js (use v18 or newer)
2. pnpm (use v8 or newer)
3. Docker Desktop (Docker is required specifically for running the Envio indexer locally).

Berachain-Envio Setup

Install And Setup Envio​

You can install Envio by running the command below:

sudo npm i -g envio
# Password:

# added 2 packages in 3sLet’s start by initializing the indexer and generating a boilerplate to index all events emitted by the WETH ERC20 token contract on Berachain.

This is the WETH contract address: 0x8239FBb3e3D0C2cDFd7888D8aF7701240Ac4DcA4.

1. Open your terminal in a preferred directory and run the command envio init.
2. Name your indexer anything you’d like (e.g. weth-berachain-indexer), and specify a folder name (e.g.weth-berachain-indexer.)
3. 3. Choose a preferred language, select Template, and then select Erc20.

envio init
# > Name your indexer: weth-berachain-envio-test
# > Specify a folder name (ENTER to skip):  weth-berachain-envio-test
# > Which language would you like to use? Typescript
# > Choose an initialization option Template
# > Which template would you like to use? Erc20
# Project template ready
# Running codegen
# installing packages...
# Checking for pnpm package...
# 8.14.1
# Package pnpm is already installed. Continuing...
# Scope: all 2 workspace projects

Note: Indexers on Envio can be written in JavaScript, TypeScript, or ReScript. For this demonstration, we’ve chosen to use TypeScript as the preferred language.

A project template is generated with all the required files to run your indexer.

Changes to Generated Code

Open the existing code via IDE of yout choice, we’re using VS Code (Visual Code Studio).

1. File: ./config.yaml

This file defines the network, start block, contract address, and events we want to index on Berachain.

Replace the placeholder values for network, start block and contract address with the correct values, i.e.

• Network Id = 80085
• Start Block = 0
• Contract Address = 0x8239FBb3e3D0C2cDFd7888D8aF7701240Ac4DcA4

Post changes the file should look exactly like below —

File: ./config.yaml

name: weth-berachain-indexer
description: ERC-20 indexer
networks:
  - id: 80085 # Berachain Artio Testnet
    start_block: 0
    contracts:
      - name: ERC20
        address: "0x8239FBb3e3D0C2cDFd7888D8aF7701240Ac4DcA4" #WETH
        handler: src/EventHandlers.ts
        events:
          - event: "Approval(address indexed owner, address indexed spender, uint256 value)"
            requiredEntities:
              - name: "Account"
              - name: "Approval"
          - event: "Transfer(address indexed from, address indexed to, uint256 value)"
            requiredEntities:
              - name: "Account"
              - name: "Approval"

The contract addresse used above is the contract address for WETH on Berachain Artio Testnet. Feel free to check it out on Berachain Explorer https://artio.beratrail.io/token/0x8239FBb3e3D0C2cDFd7888D8aF7701240Ac4DcA4.

2. File: ./Schema.graphql

This file saves and defines the data structures for selected events, such as the Approval event.

## Pls note - there are no changes required below for this guide, but obv changes can be made based on requirements

type Account {
  # id is the address of the account
  id: ID!
  # approvals are a list of approvals that this account has given
  approvals: [Approval!]! @derivedFrom(field: "owner")
  # account balance of tokens
  balance: BigInt!
}

type Approval {
  # id is the owner address and spender address [owner-spender]
  id: ID!
  # amount is the amount of tokens approved
  amount: BigInt!
  # owner is the account that approved the tokens
  owner: Account!
  # spender is the account that is approved to spend the tokens
  spender: Account!
}

3. File: ./src/EventHandlers.ts

This file defines what happens when an event is emitted and saves what code is going to run, allowing customization in data handling.

import {
  ERC20Contract_Approval_loader,
  ERC20Contract_Approval_handler,
  ERC20Contract_Transfer_loader,
  ERC20Contract_Transfer_handler,
} from "../generated/src/Handlers.gen";

import { AccountEntity, ApprovalEntity } from "../generated/src/Types.gen";

ERC20Contract_Approval_loader(({ event, context }) => {
  // loading the required Account entity
  context.Account.load(event.params.owner.toString());
});

ERC20Contract_Approval_handler(({ event, context }) => {
  //  getting the owner Account entity
  let ownerAccount = context.Account.get(event.params.owner.toString());

  if (ownerAccount === undefined) {
    // Usually an accoun that is being approved alreay has/has had a balance, but it is possible they havent.

    // create the account
    let accountObject: AccountEntity = {
      id: event.params.owner.toString(),
      balance: 0n,
    };
    context.Account.set(accountObject);
  }

  let approvalId =
    event.params.owner.toString() + "-" + event.params.spender.toString();

  let approvalObject: ApprovalEntity = {
    id: approvalId,
    amount: event.params.value,
    owner_id: event.params.owner.toString(),
    spender_id: event.params.spender.toString(),
  };

  // this is the same for create or update as the amount is overwritten
  context.Approval.set(approvalObject);
});

ERC20Contract_Transfer_loader(({ event, context }) => {
  context.Account.load(event.params.from.toString());
  context.Account.load(event.params.to.toString());
});

ERC20Contract_Transfer_handler(({ event, context }) => {
  let senderAccount = context.Account.get(event.params.from.toString());

  if (senderAccount === undefined || senderAccount === null) {
    // create the account
    // This is likely only ever going to be the zero address in the case of the first mint
    let accountObject: AccountEntity = {
      id: event.params.from.toString(),
      balance: 0n - event.params.value,
    };

    context.Account.set(accountObject);
  } else {
    // subtract the balance from the existing users balance
    let accountObject: AccountEntity = {
      id: senderAccount.id,
      balance: senderAccount.balance - event.params.value,
    };
    context.Account.set(accountObject);
  }

  let receiverAccount = context.Account.get(event.params.to.toString());

  if (receiverAccount === undefined || receiverAccount === null) {
    // create new account
    let accountObject: AccountEntity = {
      id: event.params.to.toString(),
      balance: event.params.value,
    };
    context.Account.set(accountObject);
  } else {
    // update existing account
    let accountObject: AccountEntity = {
      id: receiverAccount.id,
      balance: receiverAccount.balance + event.params.value,
    };

    context.Account.set(accountObject);
  }
});

Deploying Local Indexer

Starting the Indexer & Exploring Indexed Data.

Now, let’s run our indexer locally by running envio dev command.

Your browser would have opened a local Hasura console at http://localhost:8080/console.

Head over to the Hasura console, type in the admin-secret password = testing .

Your localhost should look something like below:

Exploring Indexed Data

1. Head over to the Hasura console, type in the admin-secret password testing, and navigate to “Data” in the above column to explore the data. For example, you can:

• View “events_sync_state” table to see which block number you are on to monitor the indexing progress.
• View the “chain_metadata” table to see the block height of the chain.
• View the “raw_events” table to see all events being indexed.

If you view the “Account” table, you will see a column called “balance”.

2. Let’s analyze our data, by clicking “API” in the above column to access the GraphQL endpoint to query real-time data.

3. From there you can run a query to explore details such as holders and their respective balances of the WETH ERC-20 token.

That’s it! We’ve indexed the required data from existing WETH contract. By now you would have learned to deploy a local indexer on Berachain and then query the data from desired contracts on Berachain Artio!

Full Code and Repository

File: ./config.yaml

name: weth-berachain-indexer
description: ERC-20 indexer
networks:
  - id: 80085 # Berachain Artio Testnet
    start_block: 0
    contracts:
      - name: ERC20
        address: "0x8239FBb3e3D0C2cDFd7888D8aF7701240Ac4DcA4" #WETH
        handler: src/EventHandlers.ts
        events:
          - event: "Approval(address indexed owner, address indexed spender, uint256 value)"
            requiredEntities:
              - name: "Account"
              - name: "Approval"
          - event: "Transfer(address indexed from, address indexed to, uint256 value)"
            requiredEntities:
              - name: "Account"
              - name: "Approval"

2. File: ./Schema.graphql

## Pls note - there are no changes required below for this guide, but obv changes can be made based on requirements

type Account {
  # id is the address of the account
  id: ID!
  # approvals are a list of approvals that this account has given
  approvals: [Approval!]! @derivedFrom(field: "owner")
  # account balance of tokens
  balance: BigInt!
}
type Approval {
  # id is the owner address and spender address [owner-spender]
  id: ID!
  # amount is the amount of tokens approved
  amount: BigInt!
  # owner is the account that approved the tokens
  owner: Account!
  # spender is the account that is approved to spend the tokens
  spender: Account!
}

3. File: ./src/EventHandlers.ts

import {
  ERC20Contract_Approval_loader,
  ERC20Contract_Approval_handler,
  ERC20Contract_Transfer_loader,
  ERC20Contract_Transfer_handler,
} from "../generated/src/Handlers.gen";

import { AccountEntity, ApprovalEntity } from "../generated/src/Types.gen";
ERC20Contract_Approval_loader(({ event, context }) => {
  // loading the required Account entity
  context.Account.load(event.params.owner.toString());
});
ERC20Contract_Approval_handler(({ event, context }) => {
  //  getting the owner Account entity
  let ownerAccount = context.Account.get(event.params.owner.toString());
  if (ownerAccount === undefined) {
    // Usually an accoun that is being approved alreay has/has had a balance, but it is possible they havent.
    // create the account
    let accountObject: AccountEntity = {
      id: event.params.owner.toString(),
      balance: 0n,
    };
    context.Account.set(accountObject);
  }
  let approvalId =
    event.params.owner.toString() + "-" + event.params.spender.toString();
  let approvalObject: ApprovalEntity = {
    id: approvalId,
    amount: event.params.value,
    owner_id: event.params.owner.toString(),
    spender_id: event.params.spender.toString(),
  };
  // this is the same for create or update as the amount is overwritten
  context.Approval.set(approvalObject);
});
ERC20Contract_Transfer_loader(({ event, context }) => {
  context.Account.load(event.params.from.toString());
  context.Account.load(event.params.to.toString());
});
ERC20Contract_Transfer_handler(({ event, context }) => {
  let senderAccount = context.Account.get(event.params.from.toString());
  if (senderAccount === undefined || senderAccount === null) {
    // create the account
    // This is likely only ever going to be the zero address in the case of the first mint
    let accountObject: AccountEntity = {
      id: event.params.from.toString(),
      balance: 0n - event.params.value,
    };
    context.Account.set(accountObject);
  } else {
    // subtract the balance from the existing users balance
    let accountObject: AccountEntity = {
      id: senderAccount.id,
      balance: senderAccount.balance - event.params.value,
    };
    context.Account.set(accountObject);
  }
  let receiverAccount = context.Account.get(event.params.to.toString());
  if (receiverAccount === undefined || receiverAccount === null) {
    // create new account
    let accountObject: AccountEntity = {
      id: event.params.to.toString(),
      balance: event.params.value,
    };
    context.Account.set(accountObject);
  } else {
    // update existing account
    let accountObject: AccountEntity = {
      id: receiverAccount.id,
      balance: receiverAccount.balance + event.params.value,
    };
    context.Account.set(accountObject);
  }
});

Github Repository

The complete template of the above guide is available at https://github.com/berachain/guides/tree/main/apps/envio-indexer-erc20 .

More dApps and How To Get Support ?

If you’re interested in understanding and developing more on Berachain, try various example repos provided in the official guides repo —

guides/apps at main · berachain/guides

Berachain’s developer documentation also has multiple starter guides with goto tools such as Hardhat, Foundry and more! Head over to developer section on the docs using the link below.

Connecting to Berachain

How to get Developer Support?

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

Our DevRel team will be happy to assist! 🤝

Adiós dev bears! Catch ya in then next one! 💪🏼 🐻

Indexing on Berachain Atio Testnet with Envio SDK was originally published in berachain-devs on Medium, where people are continuing the conversation by highlighting and responding to this story.

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?

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-

guides/apps/thirdweb-connectwallet-nextjs at main · berachain/guides

Pre-requisites

1. Node js > 20 and latest npm. Please follow this guide if needed: https://docs.npmjs.com/downloading-and-installing-node-js-and-npm.
2. 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:

1. Launch Your Terminal: Start by opening your terminal. This is where you’ll enter the commands to create your project.
2. 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.

1. 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.

1. 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.

1. 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.
2. Inclusion of Diverse Wallet Options: Add more wallet options, such as Smart Wallet or Email Wallet, to increase accessibility and user choice.
3. 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://medium.com/"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.

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

1. 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.

Connecting to Berachain

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! 🤝

Byyeeee dev bears! 🐻

Berachain Wallet Connect with Thirdweb SDK was originally published in berachain-devs on Medium, where people are continuing the conversation by highlighting and responding to this story.

Introduction to Berachain Artio Testnet

In the burgeoning world of 100+ blockchain technology, Berachain emerges as a goto cosmos based evm compatible chain for developers to build on. Known for its POL design, robust scalability, and enhanced security, Berachain stands out as a haven for developers as its lucrative for users to interact with the chain. Its early adoption of wide array of decentralized applications (dApps) and evm compatibility makes it an ideal choice for developers to build and test their products on.

Like any other blockchains Artio testnet is a key component for upcoming Berachain Mainnet, providing a testing ground for developers to prepare, test their tools well in advance. It’s here that bear magic of smart contracts, especially the ERC-721 standard for Non-Fungible Tokens (NFTs), comes to life. 🐻 ❤️

🤔 Why Hardhat?

Hardhat is a pivotal tool in Ethereum development. It streamlines various processes such as compiling, deploying, testing, and debugging smart contracts. Think of it as your personal blockchain workshop, equipped with all the tools you need for dApp development.

🛠️ What are we Building?

In this tutorial, we will guide you through creating and deploying an ERC-721 smart contract on the Berachain Testnet (Artio) using hardhat-ethers. This tutorial focuses on writing, deploying and also verifying the non-fungible (ERC-721) token smart contract using Hardhat, ethers.js onto Berachain Testnet!

We will majorly be covering the initial setup, creation, and deployment of the contract!

⚠️ Prerequisites

Before embarking on this technical tutorial about, it’s imperative to equip yourself with the following:

• A solid understanding of blockchain fundamentals and smart contract principles.
• Proficiency in Solidity, the primary language for Ethereum-based contract development.
• The latest versions of Node.js and npm installed on your machine, verifiable through the command line with node -v.

Step 1: Initiating a Node.js Project

Begin by creating a new Node.js project. This foundational step involves setting up a dedicated project directory and initializing it with Node’s package management tools.

mkdir bera-hardhatTest && cd bera-hardhatTest

npm init -y
# Wrote to /Users/dethebera/BeraWork/hardhat-verification-bera/package.json:

# {
#  "name": "hardhat-verification-bera",
#   "version": "1.0.0",
#  "description": "",
#   "main": "index.js",
#   "scripts": {
#     "test": "echo \"Error: no test specified\" && exit 1"
#   },
#   "keywords": [],
#   "author": "",
#   "license": "ISC"
# }

This command sequence crafts a new directory and then triggers the Node.js project initialization with default parameters.

Step 2: Setting Up Hardhat

Install Hardhat in your project directory and initiate a new project environment:

npm install --save-dev hardhat

# added 263 packages, and audited 264 packages in 31s

# 52 packages are looking for funding
#  run `npm fund` for details

# found 0 vulnerabilities

Select TypeScript as your project language and follow through the setup prompts, ensuring the inclusion of a .gitignore file and necessary dependencies.

Note: DEPRECATION WARNING

Initializing a project with npx hardhat is deprecated and will be removed in the future. Please use npx hardhat init instead.

npx hardhat init
# 888    888                      888 888               888
# 888    888                      888 888               888
# 888    888                      888 888               888
# 8888888888  8888b.  888d888 .d88888 88888b.   8888b.  888888
# 888    888     "88b 888P"  d88" 888 888 "88b     "88b 888
# 888    888 .d888888 888    888  888 888  888 .d888888 888
# 888    888 888  888 888    Y88b 888 888  888 888  888 Y88b.
# 888    888 "Y888888 888     "Y88888 888  888 "Y888888  "Y888

# 👷 Welcome to Hardhat v2.21.0 👷‍

# ✔ What do you want to do? · Create a TypeScript project
# ✔ Hardhat project root: · /Users/dethebera/BeraWork/hardhat-verification-bera
# ✔ Do you want to add a .gitignore? (Y/n) · y
# ✔ Do you want to install this sample project's dependencies with npm (@nomicfoundation/hardhat-toolbox)? (Y/n) · y

# npm install --save-dev "@nomicfoundation/hardhat-toolbox@^4.0.0"

# added 273 packages, and audited 537 packages in 40s

# 90 packages are looking for funding
#   run `npm fund` for details

# found 0 vulnerabilities

# ✨ Project created ✨

# See the README.md file for some example tasks you can run

# Give Hardhat a star on Github if you're enjoying it! ⭐️✨

#      https://github.com/NomicFoundation/hardhat

After setting up Hardhat, verify its proper functioning with:

npx hardhat test

#Downloading compiler 0.8.24
# Compiled 1 Solidity file successfully (evm target: paris).


#   Lock
#     Deployment
#       ✔ Should set the right unlockTime (691ms)
#       ✔ Should set the right owner
#       ✔ Should receive and store the funds to lock
#       ✔ Should fail if the unlockTime is not in the future
#     Withdrawals
#       Validations
#         ✔ Should revert with the right error if called too soon
#         ✔ Should revert with the right error if called from another account
#         ✔ Shouldn't fail if the unlockTime has arrived and the owner calls it
#       Events
#         ✔ Should emit an event on withdrawals
#       Transfers
#         ✔ Should transfer the funds to the owner


#   9 passing (717ms)

Step 3: Diving into NFT Smart Contract Development

Now, delve into the heart of your project — the NFT smart contract. Navigate to the contracts folder and begin scripting your ERC-721 contract. This phase is crucial as it involves the actual code that defines your NFT's characteristics and behavior.

Head over to contracts folder and create a new file NFT.sol

Here’s a basic template using OpenZeppelin’s secure and reputable libraries:

File: ./contracts/NFT.sol

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.23;

import "@openzeppelin/contracts/token/ERC721/ERC721.sol";

contract NFT is ERC721 {
    uint256 public currentTokenId;

    constructor() ERC721("NFT Name", "NFT") {}

    function mint(address recipient) public payable returns (uint256) {
        uint256 newItemId = ++currentTokenId;
        _safeMint(recipient, newItemId);
        return newItemId;
    }
}

OpenZeppelin’s contracts are a treasure trove of pre-written, secure code snippets. They significantly reduce the development time and enhance the security of your smart contracts.

npm install @openzeppelin/contracts

# added 1 package, and audited 539 packages in 2s

# 91 packages are looking for funding
#   run `npm fund` for details

# found 0 vulnerabilities

In your NFT.sol file, ensure that the Solidity version is in sync with the one specified in hardhat.config.ts. Explain the purpose of each component, highlighting the role of OpenZeppelin's contracts in your NFT's architecture.

Step 5: Integrating MetaMask & Berachain Artio with Hardhat

This step involves linking your MetaMask wallet and the Berachain Testnet to the Hardhat environment. This connection is pivotal for deploying your smart contract on the Berachain Artio.

1. Installing dotenv: A tool for managing environment variables.

npm install dotenv --save

# added 1 package, and audited 538 packages in 612ms

# 91 packages are looking for funding
#   run `npm fund` for details

# found 0 vulnerabilities

2. Configuring the .env File: Safely store your MetaMask private key in a newly created .env file in your project's root directory.

Create a .env file in your project root directory and add your MetaMask private key. For help exporting your key from MetaMask, see this guide.

Your .env file should look like this:

PRIV_KEY = 0x"your exported private key"

Step 6: Configuring hardhat.config.js

This step is about fine-tuning your Hardhat setup to align with Berachain’s specifications. Update your hardhat.config.ts file with necessary dependencies and network configurations, paying special attention to the custom chains settings for Berachain Artio.

File: ./hardhat.config.ts

import { HardhatUserConfig } from "hardhat/config";
import "@nomicfoundation/hardhat-toolbox";
import "@nomicfoundation/hardhat-verify";

require("dotenv").config();

const config: HardhatUserConfig = {
  solidity: {
    version: "0.8.23",
  },
  networks: {
    // for testnet
    "berachain-artio": {
      url: "https://rpc.ankr.com/berachain_testnet",
      accounts: [process.env.WALLET_KEY as string],
      chainId: 80085,
      // gas: "auto",
      gasPrice: 10000000000,
    },
    // for local dev environment
    "berachain-local": {
      url: "http://localhost:8545",
      gasPrice: 1000000000,
    },
  },
  defaultNetwork: "hardhat",
  etherscan: {
    apiKey: {
      berachainArtio: "berachainArtio", // apiKey is not required, just set a placeholder
    },
    customChains: [
      {
        network: "berachainArtio",
        chainId: 80085,
        urls: {
          apiURL:
            "https://api.routescan.io/v2/network/testnet/evm/80085/etherscan",
          browserURL: "https://artio.beratrail.io",
        },
      },
    ],
  },
};

export default config;

Step 7: Creating the Deployment Script

In your scripts/ directory, draft the deployment script (update deploy.ts). This script is the blueprint for deploying your smart contract on the blockchain. Explain each line of code and its role in leveraging Hardhat's deployment features.

File: ./scripts/deploy.ts

import { setBlockGasLimit } from '@nomicfoundation/hardhat-toolbox/network-helpers';
import { ethers } from 'hardhat';

async function main() {
  const nft = await ethers.deployContract('NFT');

  await nft.waitForDeployment();

  console.log('NFT Contract Deployed at ' + nft.target);
}

// We recommend this pattern to be able to use async/await everywhere
// and properly handle errors.
main().catch((error) => {
  console.error(error);
  process.exitCode = 1;
});

Step 8: Actual Deployment

Execute the deployment of your contract to the Berachain Artio:

npx hardhat run scripts/deploy.ts --network berachain-artio
# NFT Contract Deployed at 0xBC862C68CE9EE3aFa762DbF7A51712E3c6E79215

Guide the reader through interpreting the deployment output and confirm the successful launch of the contract.

Understanding the overall changes performed to Hardhat

This section can be skipped if you already understood the changes made to the above deployment script and the hardhat configuration to work with Berachain Artio.

1. The default Hardhat deployContract does have some issues. But crafting the deploy transaction manually with gasLimit and gasPrice specified works with Artio.
2. Removing the gas: “auto” setting in hardhat config file is must. Having it set to Auto increases the time to deploy and causes delay for the transaction to get submitted.
3. Building the transaction manually and setting a forced gas limit override (this may be more expensive gas-wise, but not significantly).

Verifying Contracts on Berachain

Verification is a crucial post-deployment step. It involves publicly associating the deployed bytecode with its corresponding source code. This process enhances transparency and trust in the blockchain community.

Install the @nomicfoundation/hardhat-verify plugin and guide the users through the verification process, emphasizing the criticality of using the correct contract address.

Installation

Install hardhat-verify plugin that will help verify contracts directly via hardhat.

npm install --save-dev @nomicfoundation/hardhat-verify

# up to date, audited 539 packages in 3s

# 91 packages are looking for funding
#   run `npm fund` for details

# found 0 vulnerabilities

We’ve already included the following code for Routescan api which helps in verifying contracts.

For more info head over to https://artio.beratrail.io/documentation/recipes/hardhat-verification.

Verify

Now to verify the contract all you need is the contract address of the contract deployed.

npx hardhat verify --network berachain-artio <0x...>

Make sure to relace the whole “<0xaddress> “. Correct example would be :-

✅ npx hardhat verify — network berachain-artio 0x3229075dd6F75bD879F7af07d384A0856c30a806

❌ npx hardhat verify — network berachain-artio <0x3229075dd6F75bD879F7af07d384A0856c30a806> (This is incorrect)

Once done should give you an output similar to below.

# [INFO] Sourcify Verification Skipped: Sourcify verification is currently disabled. To enable it, add the following entry to your Hardhat configuration:

# sourcify: {
#   enabled: true
# }

# Or set 'enabled' to false to hide this message.

# For more information, visit https://hardhat.org/hardhat-runner/plugins/nomicfoundation-hardhat-verify#verifying-on-sourcify
# The contract 0xBC862C68CE9EE3aFa762DbF7A51712E3c6E79215 has already been verified on Etherscan.
# https://artio.beratrail.io/address/0xBC862C68CE9EE3aFa762DbF7A51712E3c6E79215#code

If we head over to Berachain Explorer(Beratrail) using the link provided in terminal- we will be able to see the contract’s source code has been verified successfully.!

Complete Code

File: ./contracts/NFT.sol

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.23;

import "@openzeppelin/contracts/token/ERC721/ERC721.sol";
contract NFT is ERC721 {
    uint256 public currentTokenId;
    constructor() ERC721("NFT Name", "NFT") {}
    function mint(address recipient) public payable returns (uint256) {
        uint256 newItemId = ++currentTokenId;
        _safeMint(recipient, newItemId);
        return newItemId;
    }
}

File: ./scripts/deploy.ts

import { setBlockGasLimit } from '@nomicfoundation/hardhat-toolbox/network-helpers';
import { ethers } from 'hardhat';
async function main() {
  const nft = await ethers.deployContract('NFT');
  await nft.waitForDeployment();
  console.log('NFT Contract Deployed at ' + nft.target);
}
// We recommend this pattern to be able to use async/await everywhere
// and properly handle errors.
main().catch((error) => {
  console.error(error);
  process.exitCode = 1;
});

File: ./hardhat.config.ts

import { HardhatUserConfig } from "hardhat/config";
import "@nomicfoundation/hardhat-toolbox";
import "@nomicfoundation/hardhat-verify";
require("dotenv").config();
const config: HardhatUserConfig = {
  solidity: {
    version: "0.8.23",
  },
  networks: {
    // for testnet
    "berachain-artio": {
      url: "https://rpc.ankr.com/berachain_testnet",
      accounts: [process.env.WALLET_KEY as string],
      chainId: 80085,
      // gas: "auto",
      gasPrice: 10000000000,
    },
    // for local dev environment
    "berachain-local": {
      url: "http://localhost:8545",
      gasPrice: 1000000000,
    },
  },
  defaultNetwork: "hardhat",
  etherscan: {
    apiKey: {
      berachainArtio: "berachainArtio", // apiKey is not required, just set a placeholder
    },
    customChains: [
      {
        network: "berachainArtio",
        chainId: 80085,
        urls: {
          apiURL:
            "https://api.routescan.io/v2/network/testnet/evm/80085/etherscan",
          browserURL: "https://artio.beratrail.io",
        },
      },
    ],
  },
};
export default config;

You should also be able to get the complete code on our Official Github repository using the link below.

guides/apps/hardhat-contract-verification at main · berachain/guides

Recap

This guide aims to be a comprehensive resource, guiding readers through every step of deploying an ERC-721 NFT and mainly, verifying contracts on Berachain Artio. We’ve covered the basics of deploying using Hardhat to the a few intricacies and customization needed for smart contract development and verification.

Want To Build and How To Get Support ?

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

Connecting to Berachain

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! 🤝

Byyeeee bears! 🐻

How To Deploy And Verify Contracts On Berachain was originally published in berachain-devs on Medium, where people are continuing the conversation by highlighting and responding to this story.

Deploying Omnichain Tokens Using LayerZero V2

Introduction to OFTs

Omnichain Fungible Tokens (OFTs) are a new token standard pioneered by LayerZero for cross-chain assets. OFTs allow fungible tokens to be transferred across different blockchains without the need for asset wrapping or liquidity pools, all whilst maintaining a unified supply.

LayerZero is a general-purpose cross-chain messaging protocol, but in this article, we will focus on its bridging applications, specifically OFTs.

LayerZero V2

Launched in January 2024, LayerZero V2 brings significant upgrades by separating message verification from execution (these were bundled together in LayerZero V1 using Relayers):

• Application owners can choose a set of Decentralized Verifier Networks (DVNs) to verify message payloads; and
• Execution of messages on destination chains is handled by Executors

Among other improvements, these changes enhance the scalability and customization available to omnichain app developers. See this article for a deeper dive.

In this article, we show you how to leverage LayerZero OFTs to bridge $UNI tokens from Sepolia Testnet to the Berachain Testnet.

📋 Requirements

Before we move on, make sure you have the following installed and set up on your computer.

• Node v20.11.0 or greater
• pnpm
• A wallet configured with Berachain Artio Network and Sepolia Testnet
• $BERA or Berachain Testnet Tokens in that wallet — see Berachain Faucet
• $ETH on Sepolia Testnet in that wallet — see Sepolia Faucet
• Obtain Sepolia $UNI — see Uniswap (0.0001 is used in this guide)

Foundry

This guide requires Foundry to be installed. In a terminal window, run:

curl -L https://foundry.paradigm.xyz | bash;

foundryup; 
# foundryup installs the 'forge' and 'cast' binaries, used later

For more installation instructions, see Foundry’s installation guide. For more details using Foundry on Berachain, see this guide.

Creating Our LayerZero Project

First, we’re going to set up your development environment using Foundry.

Start by creating a new project folder and initializing Foundry:

forge init layerzero-oft --no-git --no-commit;

cd layerzero-oft;
# We observe the following basic layout
# .
# ├── foundry.toml
# ├── script
# │   └── Counter.s.sol
# ├── src
# │   └── Counter.sol
# └── test
#     └── Counter.t.sol

Installing Dependencies

We will be leveraging a number of dependencies related to LayerZero and OpenZeppelin tooling, so install them below:

# FROM: ./layerzero-oft

pnpm init;
pnpm add -D @layerzerolabs/lz-evm-oapp-v2 @layerzerolabs/toolbox-foundry @layerzerolabs/lz-evm-protocol-v2 @layerzerolabs/lz-evm-messagelib-v2 @layerzerolabs/lz-definitions @openzeppelin/contracts --ignore-workspace;

Replace the contents of foundry.toml with the following to remap our dependencies:

[profile.default]
src = "src"
out = "out"
libs = [
    'node_modules/@layerzerolabs/toolbox-foundry/lib',
    'node_modules',
]
remappings = [
    'forge-std/=node_modules/@layerzerolabs/toolbox-foundry/lib/forge-std',
    '@layerzerolabs/=node_modules/@layerzerolabs/',
    '@openzeppelin/=node_modules/@openzeppelin/',
]

Overview of Interactions

Before we write the contracts, let’s briefly go over the interactions involved in the process of bridging the $UNI token from Sepolia to Berachain:

1. On the Source Chain, the User executes a bridging tx on the OFT Adapter contract (created by us)
2. $UNI is locked in the OFT Adapter
3. The LayerZero Endpoint contract sends a message containing instructions to mint $UNI tokens on the Destination Chain
4. The message is verified by a DVN
5. An Executor calls lzReceive() on the Endpoint contract at the Destination Chain, receiving the message
6. $lzUNI (an OFT created by us) is minted and sent to the User

Writing the Smart Contracts

We’re going to need a number of smart contract deployments to facilitate the process above, on both the Source and Destination Chains.

Create a new file ./src/MyAdapter.sol and paste in the following:

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.22;

import {OFTAdapter} from "@layerzerolabs/lz-evm-oapp-v2/contracts/oft/OFTAdapter.sol";
import {Ownable} from "@openzeppelin/contracts/access/Ownable.sol";

contract MyAdapter is OFTAdapter {
    constructor(
        address _token, // a deployed, already existing ERC20 token address
        address _layerZeroEndpoint, // local endpoint address
        address _delegate // token owner used as a delegate in LayerZero Endpoint
    ) OFTAdapter(_token, _layerZeroEndpoint, _delegate) Ownable(_delegate) {}
}

This contract simply implements the OFTAdapter contract, which we recall is the contract on the Source Chain responsible for locking tokens and extending cross-chain functionality to existing tokens. Learn more about OFT Adapters here.

Additionally, a contract delegate is set, granting this address the ability to handle critical tasks such as setting configurations.

Next, create a file ./src/MyOFT.sol and paste in the following:

// SPDX-License-Identifier: UNLICENSED
pragma solidity ^0.8.22;

import {Ownable} from "@openzeppelin/contracts/access/Ownable.sol";
import {OFT} from "@layerzerolabs/lz-evm-oapp-v2/contracts/oft/OFT.sol";

contract MyOFT is OFT {
    constructor(
        string memory _name,
        string memory _symbol,
        address _lzEndpoint,
        address _delegate
    ) OFT(_name, _symbol, _lzEndpoint, _delegate) Ownable(_delegate) {}
}

This contract implements the OFT contract, and is where we define the token details on the Destination Chain (e.g. name, symbol). Again, a delegate is defined.

(You may delete src/Counter.sol , test/Counter.t.sol and script/Counter.s.sol which were generated with the project).

Deployment and Execution

Step 1: Deploy OFT Adapter to Sepolia

Create a /.env file at the project root with the following and populate your PRIVATE_KEY to start:

PRIVATE_KEY=
SEPOLIA_ADAPTER_ADDRESS=
BERACHAIN_OFT_ADDRESS=

We’re going to create a couple of Foundry scripts to help with deployment. Start by creating ./script/MyAdapter.s.sol and populate it with the following:

// SPDX-License-Identifier: UNLICENSED
pragma solidity ^0.8.22;

import {Script} from "forge-std/Script.sol";
import "../src/MyAdapter.sol";

contract MyAdapterScript is Script {
    address constant UNI_TOKEN = 0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984;
    address constant LAYERZERO_ENDPOINT =
        0x6EDCE65403992e310A62460808c4b910D972f10f;

    function run() public {
        // Setup
        uint256 privateKey = vm.envUint("PRIVATE_KEY");
        vm.startBroadcast(privateKey);

        // Deploy
        MyAdapter myAdapter = new MyAdapter(
            UNI_TOKEN,
            LAYERZERO_ENDPOINT,
            vm.addr(privateKey) // Address of private key
        );

        vm.stopBroadcast();
    }
}

Running the following command will deploy the MyAdapter contract on Sepolia Testnet.

(optionally add flags — etherscan-api-key YOUR_ETHERSCAN_API_KEY — verify to verify the contract):

# FROM: ./layerzero-oft

forge script script/MyAdapter.s.sol --rpc-url https://rpc.sepolia.org/ --broadcast 

# [Example Output]:
# ##### sepolia
# ✅  [Success]Hash: 0x16702f69752f1f7243793202435da6bd54d2ebec89294728c2bf0d55584ed732
# Contract Address: 0xB66e0518570eA48286983322fc8F85301f955406
# Block: 5525968
# Paid: 0.007448778064556076 ETH (2482926 gas * 3.000000026 gwei)

Update SEPOLIA_ADAPTER_ADDRESS in your .env file with the address of your MyAdapter deployment.

Step 2: Deploy OFT to Berachain

Next, create ./script/MyOFT.s.sol and populate it with the following:

// SPDX-License-Identifier: UNLICENSED
pragma solidity ^0.8.22;

import {Script} from "forge-std/Script.sol";
import "../src/MyOFT.sol";

contract MyOFTScript is Script {
    address constant LAYERZERO_ENDPOINT =
        0x6EDCE65403992e310A62460808c4b910D972f10f;

    uint32 constant SEPOLIA_ENDPOINT_ID = 40161;

    function run() public {
        // Setup
        address SEPOLIA_ADAPTER_ADDRESS = vm.envAddress(
            "SEPOLIA_ADAPTER_ADDRESS"
        );
        uint256 privateKey = vm.envUint("PRIVATE_KEY");
        vm.startBroadcast(privateKey);

        // Deploy
        MyOFT myOFT = new MyOFT(
            "Layer Zero UNI",
            "lzUNI",
            LAYERZERO_ENDPOINT,
            vm.addr(privateKey) // Wallet address of signer
        );

        // Hook up Berachain OFT to Sepolia's adapter
        myOFT.setPeer(
            SEPOLIA_ENDPOINT_ID,
            bytes32(uint256(uint160(SEPOLIA_ADAPTER_ADDRESS)))
        );
        vm.stopBroadcast();
    }
}

Next, execute your script to 1) deploy your OFT contract to Berachain, and 2) make it aware of its Sepolia peer contract:

# FROM: ./layerzero-oft

forge script script/MyOFT.s.sol --rpc-url https://artio.rpc.berachain.com/ --broadcast

# [Example Output]
# ##### 80085
# ✅  [Success]Hash: 0x16cf8daa6f335fb65dedee8e722c01adb45b87aeccad0d6dc751d6c04c466a5f
# Contract Address: 0x42993d9A691636cbb23C201729b36B5C6e750733
# Block: 1147280
# Paid: 0.040444634965884468 ETH (2842719 gas * 14.227447372 gwei)
# 
# ##### 80085
# ✅  [Success]Hash: 0xd670e01e028fe50d9e8c323007a777590d202fada28d80d6a9f9973abcb8b607
# Block: 1147281
# Paid: 0.000682799744815656 ETH (47666 gas * 14.324670516 gwei)

Update BERACHAIN_OFT_ADDRESS in your .env file with the address of your MyOFT deployment.

Step 3: Bridge Tokens from Sepolia to Berachain

Now, we’re going to tie all of the components together and bridge $UNI from Sepolia to Berachain.

Create ./script/Bridge.s.sol and populate it with the following:

pragma solidity ^0.8.22;

import "forge-std/Script.sol";
import {IOFT, SendParam} from "@layerzerolabs/lz-evm-oapp-v2/contracts/oft/interfaces/IOFT.sol";
import {IOAppCore} from "@layerzerolabs/lz-evm-oapp-v2/contracts/oapp/interfaces/IOAppCore.sol";
import {MessagingFee} from "@layerzerolabs/lz-evm-oapp-v2/contracts/oft/OFTCore.sol";
import {OptionsBuilder} from "@layerzerolabs/lz-evm-oapp-v2/contracts/oapp/libs/OptionsBuilder.sol";
import "@openzeppelin/contracts/token/ERC20/IERC20.sol";

interface IAdapter is IOAppCore, IOFT {}

contract SendOFTScript is Script {
    using OptionsBuilder for bytes;

    uint32 constant BERACHAIN_ENPOINT_ID = 40256;
    address constant SEPOLIA_UNI_ADDRESS =
        0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984;

    function run() external {
        address SEPOLIA_ADAPTER_ADDRESS = vm.envAddress(
            "SEPOLIA_ADAPTER_ADDRESS"
        );
        address BERACHAIN_OFT_ADDRESS = vm.envAddress("BERACHAIN_OFT_ADDRESS");

        uint256 privateKey = vm.envUint("PRIVATE_KEY");
        vm.startBroadcast(privateKey);
        address signer = vm.addr(privateKey);

        // Get the Adapter contract instance
        IAdapter sepoliaAdapter = IAdapter(SEPOLIA_ADAPTER_ADDRESS);

        // Hook up Sepolia Adapter to Berachain's OFT
        sepoliaAdapter.setPeer(
            BERACHAIN_ENPOINT_ID,
            bytes32(uint256(uint160(BERACHAIN_OFT_ADDRESS)))
        );

        // Define the send parameters
        uint256 tokensToSend = 0.0001 ether; // 0.0001 $UNI tokens

        bytes memory options = OptionsBuilder
            .newOptions()
            .addExecutorLzReceiveOption(200000, 0);

        SendParam memory sendParam = SendParam(
            BERACHAIN_ENPOINT_ID,
            bytes32(uint256(uint160(signer))),
            tokensToSend,
            tokensToSend,
            options,
            "",
            ""
        );

        // Quote the send fee
        MessagingFee memory fee = sepoliaAdapter.quoteSend(sendParam, false);
        console.log("Native fee: %d", fee.nativeFee);

        // Approve the OFT contract to spend UNI tokens
        IERC20(SEPOLIA_UNI_ADDRESS).approve(
            SEPOLIA_ADAPTER_ADDRESS,
            tokensToSend
        );

        // Send the tokens
        sepoliaAdapter.send{value: fee.nativeFee}(sendParam, fee, signer);

        console.log("Tokens bridged successfully!");
    }
}

Let’s break down what this script does:

• We first attach to an instance of the deployed Sepolia Adapter
• We then call setPeer to inform the Adapter of the OFT contract on Berachain
• Options are defined to define the gas amounts the Executor pays for message delivery (read more here), prepare a message payload, and request a fee quote for this transaction
• We approve the Adapter contract to spend our $UNI tokens
• Finally, the Adapter’s send method is invoked with the message payload and fee

Run the script with the following:

# FROM: ./layerzero-oft

forge script script/Bridge.s.sol --rpc-url https://rpc.sepolia.org/ --broadcast

After a few moments to wait for the a LayerZero Executor to pick up the request, we will see the bridged $lzUNI tokens show up in our Berachain wallet!

Recap

Congratulations, you’ve successfully bridged an existing token to Berachain using LayerZero OFTs 🎉

To learn more about OFTs and all that cross-chain messaging enables, we invite you to check out the LayerZero docs.

Disclaimer: The OFT and OFT Adapter are solutions for protocol developers to bring their protocol’s token to new chains. Unsanctioned OFT deployments of existing tokens are unlikely to gain support.

🐻 Full Code Repository

If you want to see the final code and see other guides, check out Berachain LayerZero Guide Code.

guides/apps/layerzero-oft at main · berachain/guides

🛠️ Want To Build More?

Want to build more on Berachain and see more examples. Take a look at our Berachain GitHub Guides Repo for a wide variety of implementations that include NextJS, Hardhat, Viem, Foundry, and more.

GitHub - berachain/guides: A demonstration of different contracts, languages, and libraries that work with Berachain EVM.

If you’re looking to dive deeper into the details, take a look at our Berachain Docs.

Berachain Docs

Looking For Dev Support?

Make sure to join our Berachain Discord server and check out our developer channels to ask questions.

❤️ Don’t forget to show some love for this article 👏🏼

Bridge any Token to Berachain with LayerZero V2 was originally published in berachain-devs on Medium, where people are continuing the conversation by highlighting and responding to this story.

What is Goldsky and Why Should I Care about Indexing?

Goldsky lets developers build GraphQL APIs that store and query data from the blockchain. This data is highly customizable and can be used to uncover trends such as token supply growth over time, or instantaneous data such as user token balances.

A subgraph contains logic for indexing data from a blockchain, transforming raw data and storing it in a form that can be easily queried.

In this tutorial, we teach you to develop a subgraph which queries users’ ERC20 balances on the Berachain network.

Pre-requisites 📋

• Nodejs v20.11.0 or greater
• pnpm
• An IDE e.g. VSCode, Replit, etc.

For those with existing subgraphs deployed on The Graph who want to deploy to Berchain/Goldsky, skip to the section Getting Set up on Goldsky. Goldsky and The Graph subgraphs are fully compatible with one another!

Building your Subgraph 🛠️

To begin, enter in your terminal:

mkdir goldsky-subgraph;
cd goldsky-subgraph;

pnpm init; 

pnpm install @graphprotocol/graph-cli @graphprotocol/graph-ts;

# Accept all of the defaults, hitting enter when prompted

# name: (project-name) project-name
# version: (0.0.0) 0.0.1
# description: The Project Description
# entry point: //leave empty
# test command: //leave empty
# git repository: //the repositories url
# keywords: //leave empty
# author: // your name
# license: N/A

# @graphprotocol dependencies provide subgraph development tooling

In the root of your project, create the following project structure (empty files are fine for now):

# FROM: ./goldsky-subgraph;

.
├── abis
│   └── Erc20.json
├── package.json
├── schema.graphql
├── src
│   ├── mapping.ts
│   ├── utils.ts
└── subgraph.yaml

In ./abis/Erc20.json paste in the contents below, which define the ERC20 contract interface:

[
  {
    "constant": true,
    "inputs": [],
    "name": "name",
    "outputs": [{ "name": "", "type": "string" }],
    "payable": false,
    "stateMutability": "view",
    "type": "function"
  },
  {
    "constant": false,
    "inputs": [
      { "name": "_spender", "type": "address" },
      { "name": "_value", "type": "uint256" }
    ],
    "name": "approve",
    "outputs": [{ "name": "", "type": "bool" }],
    "payable": false,
    "stateMutability": "nonpayable",
    "type": "function"
  },
  {
    "constant": true,
    "inputs": [],
    "name": "totalSupply",
    "outputs": [{ "name": "", "type": "uint256" }],
    "payable": false,
    "stateMutability": "view",
    "type": "function"
  },
  {
    "constant": false,
    "inputs": [
      { "name": "_from", "type": "address" },
      { "name": "_to", "type": "address" },
      { "name": "_value", "type": "uint256" }
    ],
    "name": "transferFrom",
    "outputs": [{ "name": "", "type": "bool" }],
    "payable": false,
    "stateMutability": "nonpayable",
    "type": "function"
  },
  {
    "constant": true,
    "inputs": [],
    "name": "decimals",
    "outputs": [{ "name": "", "type": "uint8" }],
    "payable": false,
    "stateMutability": "view",
    "type": "function"
  },
  {
    "constant": true,
    "inputs": [{ "name": "_owner", "type": "address" }],
    "name": "balanceOf",
    "outputs": [{ "name": "balance", "type": "uint256" }],
    "payable": false,
    "stateMutability": "view",
    "type": "function"
  },
  {
    "constant": true,
    "inputs": [],
    "name": "symbol",
    "outputs": [{ "name": "", "type": "string" }],
    "payable": false,
    "stateMutability": "view",
    "type": "function"
  },
  {
    "constant": false,
    "inputs": [
      { "name": "_to", "type": "address" },
      { "name": "_value", "type": "uint256" }
    ],
    "name": "transfer",
    "outputs": [{ "name": "", "type": "bool" }],
    "payable": false,
    "stateMutability": "nonpayable",
    "type": "function"
  },
  {
    "constant": true,
    "inputs": [
      { "name": "_owner", "type": "address" },
      { "name": "_spender", "type": "address" }
    ],
    "name": "allowance",
    "outputs": [{ "name": "", "type": "uint256" }],
    "payable": false,
    "stateMutability": "view",
    "type": "function"
  },
  { "payable": true, "stateMutability": "payable", "type": "fallback" },
  {
    "anonymous": false,
    "inputs": [
      { "indexed": true, "name": "owner", "type": "address" },
      { "indexed": true, "name": "spender", "type": "address" },
      { "indexed": false, "name": "value", "type": "uint256" }
    ],
    "name": "Approval",
    "type": "event"
  },
  {
    "anonymous": false,
    "inputs": [
      { "indexed": true, "name": "from", "type": "address" },
      { "indexed": true, "name": "to", "type": "address" },
      { "indexed": false, "name": "value", "type": "uint256" }
    ],
    "name": "Transfer",
    "type": "event"
  }
]

Configuring the Subgraph

The primary step in creating a subgraph is to define the data sources we read from, and the data structures (entities) we index this data into. This is accomplished in the subgraph.yaml, or the subgraph manifest.

In ./subgraph.yaml paste the following:

specVersion: 0.0.4
description: ERC-20 subgraph with event handlers & entities
schema:
  file: ./schema.graphql
dataSources:
  - kind: ethereum/contract
    name: Erc20
    network: berachain-public-testnet
    source:
      address: "0xB734c264F83E39Ef6EC200F99550779998cC812d"
      abi: Erc20
      startBlock: 54354
    mapping:
      kind: ethereum/events
      apiVersion: 0.0.7
      language: wasm/assemblyscript
      entities:
        - Token
        - Account
        - TokenBalance
      abis:
        - name: Erc20
          file: ./abis/Erc20.json
      eventHandlers:
        - event: Transfer(indexed address,indexed address,uint256)
          handler: handleTransfer
      file: ./src/mapping.ts

In this manifest, a few things are worth pointing out:

1. source: The address is the MIM token, which employs the Erc20 interface, to be indexed from the startBlock it was deployed
2. entities can be thought of as JavaScript objects which can be queried. Entities can have relational mappings between one another and are defined in a GraphQL schema (below)
3. eventHandlers: Every time a tokenTransfer event is emitted, the handleTransfer method in ./src/mapping.ts is called to perform indexing logic

Writing the Schema

In ./schema.graphql we define our schema, containing properties and relationships of the different entities existing within our subgraph:

# Token details
type Token @entity {
  id: ID!
  #token name
  name: String!
  #token symbol
  symbol: String!
  #decimals used
  decimals: BigDecimal!
}

# account details
type Account @entity {
  #account address
  id: ID!
  #balances
  balances: [TokenBalance!]! @derivedFrom(field: "account")
}

# token balance details
type TokenBalance @entity {
  id: ID!
  #token
  token: Token!
  #account
  account: Account!
  #amount
  amount: BigDecimal!
}

The Token entity is straightforward, containing well-known properties of ERC20 tokens.

The Account entity contains an id of the wallet address and more interestingly, a list of balances of the type TokenBalance. The @derivedFrom directive means that an Account’s balances property is defined by reverse lookup, based on the account property in TokenBalance entities.

TokenBalance leverages both Account and Token entities, to define the token balance of each particular user.

For this tutorial, it’s wasn’t absolutely necessary to have both Token and TokenBalance entities. Users’ MIM balances could conceivably have been captured in just the Account entity. However, this design makes it possible to extend the subgraph to capture multiple token balances.

Creating Mappings

The mapping file is where everything comes together ✨ Blockchain data is associated with the entities we have defined in our schema. Below, we define the interations that happen when the handleTransfer event handler is invoked.

In ./src/mapping.ts add the following code:

//import event class from generated files
import { Transfer } from "../generated/Erc20/Erc20";
//import the functions defined in utils.ts
import { fetchTokenDetails, fetchAccount, updateTokenBalance } from "./utils";
//import datatype
import { BigInt } from "@graphprotocol/graph-ts";

export function handleTransfer(event: Transfer): void {
  // 1. Get token details
  let token = fetchTokenDetails(event);
  if (!token) {
    return;
  }

  // 2. Get account details
  let fromAddress = event.params.from.toHex();
  let toAddress = event.params.to.toHex();

  let fromAccount = fetchAccount(fromAddress);
  let toAccount = fetchAccount(toAddress);

  if (!fromAccount || !toAccount) {
    return;
  }

  // 3. Update the token balances
  // Setting the token balance of the 'from' account
  updateTokenBalance(
    token,
    fromAccount,
    BigInt.fromI32(0).minus(event.params.value)
  );

  // Setting the token balance of the 'to' account
  updateTokenBalance(token, toAccount, event.params.value);
}

The handleTransfer takes the Transfer event as a parameter, containing the information (fromAddress, toAddress, transferAmount). With this info, the handler is empowered to perform the following functions:

1. Fetch token details
2. Fetch account details
3. Update account balances

At a high level, this handler code will dutifuly update ERC20 account balances every time a Transfer event is emitted.

Working With Entities

You may have noticed that the code in mapping.ts is rather simple — that’s because the heavy lifting of interacting with entities has been abstracted into a utility file. Let’s go over the nuts and bolts of working with subgraph entities now.

In ./src/utils.ts add the following code:

//import smart contract class from generated files
import { Erc20 } from "../generated/Erc20/Erc20";
//import entities
import { Account, Token, TokenBalance } from "../generated/schema";
//import datatypes
import { BigDecimal, ethereum, BigInt } from "@graphprotocol/graph-ts";

const ZERO_ADDRESS = "0x0000000000000000000000000000000000000000";

// Fetch token details
export function fetchTokenDetails(event: ethereum.Event): Token | null {
  //check if token details are already saved
  let token = Token.load(event.address.toHex());
  if (!token) {
    //if token details are not available
    //create a new token
    token = new Token(event.address.toHex());

    //set some default values
    token.name = "N/A";
    token.symbol = "N/A";
    token.decimals = BigDecimal.fromString("0");

    //bind the contract
    let erc20 = Erc20.bind(event.address);

    //fetch name
    let tokenName = erc20.try_name();
    if (!tokenName.reverted) {
      token.name = tokenName.value;
    }

    //fetch symbol
    let tokenSymbol = erc20.try_symbol();
    if (!tokenSymbol.reverted) {
      token.symbol = tokenSymbol.value;
    }

    //fetch decimals
    let tokenDecimal = erc20.try_decimals();
    if (!tokenDecimal.reverted) {
      token.decimals = BigDecimal.fromString(tokenDecimal.value.toString());
    }

    //save the details
    token.save();
  }
  return token;
}

// Fetch account details
export function fetchAccount(address: string): Account | null {
  //check if account details are already saved
  let account = Account.load(address);
  if (!account) {
    //if account details are not available
    //create new account
    account = new Account(address);
    account.save();
  }
  return account;
}

export function updateTokenBalance(
  token: Token,
  account: Account,
  amount: BigInt
): void {
  // Don't update zero address
  if (ZERO_ADDRESS == account.id) return;

  // Get existing account balance or create a new one
  let accountBalance = getOrCreateAccountBalance(account, token);
  let balance = accountBalance.amount.plus(bigIntToBigDecimal(amount));

  // Update the account balance
  accountBalance.amount = balance;
  accountBalance.save();
}

function getOrCreateAccountBalance(
  account: Account,
  token: Token
): TokenBalance {
  let id = token.id + "-" + account.id;
  let tokenBalance = TokenBalance.load(id);

  // If balance is not already saved
  // create a new TokenBalance instance
  if (!tokenBalance) {
    tokenBalance = new TokenBalance(id);
    tokenBalance.account = account.id;
    tokenBalance.token = token.id;
    tokenBalance.amount = BigDecimal.fromString("0");

    tokenBalance.save();
  }

  return tokenBalance;
}

function bigIntToBigDecimal(quantity: BigInt, decimals: i32 = 18): BigDecimal {
  return quantity.divDecimal(
    BigInt.fromI32(10)
      .pow(decimals as u8)
      .toBigDecimal()
  );
}

• fetchAccount() returns an Account entity. We first see whether an Account entity with the passed in address exists. If it doesn’t, we create a new one
• fetchTokenDetails() returns a Token entity. If no Tokenexists, we instantiate a new one by binding the token address with the ERC20 interface, letting us access the public read functions from the token contract. This allows us to retrieve and set token properties such as name, symbol and decimals
• updateTokenBalance() is perhaps the most important, as it updates users’ TokenBalance entities with each transfer. Referring back to the mapping.ts file, this function is invoked twice with each Transfer event — a negative amount is passed in for the transferer, denoting a loss of token balance, and conversely, a positive amount for the recipient. This way, an accurate accounting of token balances is maintained

Building the Subgraph

In the root of your project directory, run the following in your terminal:

# FROM: ./goldsky-subgraph;

pnpm codegen;
pnpm build;

These commands generate TypeScript class files from your contract ABIs, compiles your code, and creates build outputs in the /build directory.

Before we deploy, we have to get you set up on Goldsky.

Getting Set up on Goldsky

Goldsky will host your subgraph and do all the necessary indexing. Follow the instructions below to get your account set up:

1. Create an account at app.goldsky.com
2. Create an API key on the Settings page
3. Install the Goldsky CLI:

curl https://goldsky.com | sh

4. Log in with the API key created earlier:

goldsky login

Deploy your Subgraph 🚀

In the root of your project, run the following:

# FROM: ./goldsky-subgraph;

goldsky subgraph deploy erc20-subgraph/1.0.0 --path .

Once successfully deployed, view your deployed subgraph. It won’t be usable right away, because the indexing process requires going over every block to update token balances.

Querying your Data

In your dashboard, you will see a “Public GraphQL link” which provides a nice interface for you to write queries. Now let’s give our new subgraph a spin with this query:

{  
  accounts {  
    id  
    balances {  
      id  
      token {  
        id  
        name  
        symbol  
        decimals  
      }  
      amount  
    }  
  }  
}

If you want an example to play along with, use this live subgraph.

Cross checking users’s MIM balances against Berachain’s block explorer, we see that our subgraph has accurately indexed users’ token balances ✅

Recap

And that, frens, is how you use Goldsky subgraphs to index token balances of Berachain wallets. Goldsky is a data-availability platform, providing a way for developers to easily store and query customized blockchain data.

🐻 Full Code Repository

If you want to see the final code and see other guides, check out Berachain Goldsky Guide Code.

guides/apps/goldsky-subgraph at feat/goldsky-subgraph · berachain/guides

🛠️ Want To Build More?

Want to build more on Berachain and see more examples. Take a look at our Berachain GitHub Guides Repo for a wide variety of implementations that include NextJS, Hardhat, Viem, Foundry, and more.

GitHub - berachain/guides: A demonstration of different contracts, languages, and libraries that work with Berachain EVM.

If you’re looking to dive deeper into the details, take a look at our Berachain Docs.

Berachain Docs

Looking For Dev Support?

Make sure to join our Berachain Discord server and check out our developer channels to ask questions.

❤️ Don’t forget to show some love for this article 👏🏼

Index & Query Berachain Data with Goldsky 🧮 was originally published in berachain-devs on Medium, where people are continuing the conversation by highlighting and responding to this story.

Bm dev bears! 🐻

The launch of Berachain’s Artio Testnet has made waves within the community. Artio’s hype among users remains unmatched and it being built on a strong implementing of Proof-of-Liquidity consensus mechanism, just adds to the excitement developers and teams have to start getting deployed on the testnet!

Shortly after the launch of Berachain’s Artio Testnet, Particle Network launched Smart Wallet-as-a-Service support which allows developers building on Berachain to immediately begin prototyping applications that natively leverage social logins for the creation and management of both EOAs and associated smart accounts (currently SimpleAccount implementations) on Berachain.

This article is a joint effort with Tabasco from Particle Network’s DevRel team, all the help during the time of formulating the dApp template from scratch is widely appreciated! 🤝 🐻

Pre-requisites

1. Node js > 20 and latest npm. Please follow this guide if needed: https://docs.npmjs.com/downloading-and-installing-node-js-and-npm.
2. IDEs like VScode, Replit etc.
3. $BERA: Berachain’s native gas token, which will be required by newly created wallet which will be used in the demo. (https://artio.faucet.berachain.com)
4. $HONEY: Berachain’s native stablecoin, obtained via the official Berachain Dex/ Bex. (https://artio.bex.berachain.com)
5. Access to the Particle Network developer dashboard. (https://dashboard.particle.network/)

Social Logins with Particle Auth Core

🤔 Why Social Logins?

Social based logins have proven to be a step-closer towards the narrative of “easier web3 onboarding”, especially for users that have experienced majorly web2 apps.

By leveraging Social Login, your users can easily authenticate themselves using their preferred social media accounts, simplifying the onboarding process. As we know to interact with Web3 dApps we require having a wallet. This is where Particle Networks bridges the gap by enables a user to obtain a web3 wallet address associated with the user’s account once they have been successfully been authenticated.

🛠️ What are we building?

This tutorial would be focusing on building a smart WaaS-enabled application on Berachain Artio Testnet through Particle Auth Core and Particle's AA SDK. This application will replicate the functionality found within the embedded dApp shown above.

We won’t be focusing on frontend in this guide but the guide does share frontend code. In-all we would be:

• Initiating a social login (in this example, through Google or X, alongside a general authentication modal).
• Assigning a SimpleAccount to the resulting EOA (generated via a social login).
• Executing a gasless burn transaction (of 0.001 $BERA)
• Executing a burn of 1 $HONEY, Berachain’s native stablecoin.

By the end of this, you’ll ideally have a good idea of how to implement Particle Auth Core within your project on Berachain or simply get a social login template on Berachain Testnet, leveraging the structure and utilization flow showcased here.

Building Base for Your Application

1. Initialize your project: Create a new React-typescript application using Vite.

npm create vite@latest berachain-particleTest -- --react-ts; 

# Expected Output
# Need to install the following packages:
# create-vite@5.2.1
# Ok to proceed? (y) y
# ✔ Package name: … berachain-particletest
# ✔ Select a framework: › React
# ✔ Select a variant: › TypeScript

# Scaffolding project in /Users/dethebera/BeraWork/berachain-particle-testterminal/berachain-particleTest...

# Done. Now run:

#   cd berachain-particleTest
#   npm install
#   npm run dev

cd berachain-particleTest;
npm intall;


# Expected Output
# added 219 packages, and audited 220 packages in 8s

# 41 packages are looking for funding
#   run `npm fund` for details

# found 0 vulnerabilities

2. Install dependencies for this project

npm install @types/events antd buffer react-dom

# Expected Output
# added 71 packages, and audited 291 packages in 5s

# 45 packages are looking for funding
#   run `npm fund` for details

# found 0 vulnerabilities

npm i ethers@5.7.2

# Expected Output
# added 44 packages, and audited 335 packages in 4s

# 76 packages are looking for funding
#   run `npm fund` for details

# found 0 vulnerabilities

3. Install Particle Libraries: To begin building this demo and explore the process of implementing Particle Auth Core, you’ll need to install a few key libraries that we’ll be using for configuration. Specifically, you’ll need to install:

1. @particle-network/auth-core-modal, the central SDK for implementing Particle Auth Core, formerly @particle-network/auth.
2. @particle-network/aa, to assign a SimpleAccount and generate a custom AA-enabled EIP-1193 provider object to control the smart account with Ethers.
3. @particle-network/chains, for configuring Particle Auth Core with an object containing Berachain-specific information, (BerachainArtio).

Then, copy one of the two following commands and execute it at the root of your project to install both SDKs through either Yarn or npm (alternative package managers such as pnpm will follow a similar syntax):

yarn add @particle-network/auth-core-modal @particle-network/chains @particle-network/aa;

# OR (Remember to use either and not both) 

npm install @particle-network/auth-core-modal @particle-network/chains @particle-network/aa;


# Expected Output
# added 368 packages, and audited 703 packages in 41s

# 109 packages are looking for funding
#   run `npm fund` for details

# 8 moderate severity vulnerabilities

# To address issues that do not require attention, run:
#   npm audit fix

# Some issues need review, and may require choosing
# a different dependency.

# Run `npm audit` for details.

Getting Keys from Particle Dashboard

Before constructing AuthCoreContextProvider, you'll need three values to initialize Particle Auth Core. When configuring any SDK from Particle Network, whether it's Particle Auth Core, Particle Connect, or Particle's AA SDK, you'll need to retrieve a project ID, client key, and app ID from the Particle dashboard.

These values link your application with your project on the Particle dashboard, therefore authenticating API requests, tracking users, allowing for no-code modal customization, etc.

1. Head over to particlenetwork.com and then click on “Dashboard” on the top right corner.

2. Click on “Add New Project” with the Project Name of your choice and click on “Save”.

3. You will now have access to “Project ID” and “Client Key”.

4. For obtaining “App ID” click on “Web” under “Your Apps” tab. And click on “Ok”.

5. Write the name of your choice in your “App Name”. For Domain either you can give “goggle.com” or you can give a domain of your choice where you app is hosted (if hosted already).

6 . “App ID” should now be visible under “Your Apps” section.

Once these libraries are installed, you’re ready to go through the process of configuration.

Implementing Social Logins through Particle Auth Core:

Particle Auth Core manages configuration through AuthCoreContextProvider (imported from @particle-network/auth-core-modal), an object used within your index file to wrap your primary App component (or its equivalent). This contains key values authenticating your instance of Particle Auth and enabling core customization of the social login or embedded wallet modals.

With a project and application set up through the Particle dashboard, you’re ready to configure AuthCoreContextProvider.

File: ./src/index.tsx

// Imports
// ========================================================
import React from "react";
import ReactDOM from "react-dom/client";
import { BerachainArtio } from "@particle-network/chains";
import { AuthCoreContextProvider } from "@particle-network/auth-core-modal";
import App from "./App";

import("buffer").then(({ Buffer }) => {
  window.Buffer = Buffer;
});

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <AuthCoreContextProvider
      options={{
        projectId:  process.env.REACT_APP_PROJECT_ID, // Replace YOUR_PROJECT_ID_HERE with the actual project ID
        clientKey: process.env.REACT_APP_CLIENT_KEY, // Replace YOUR_CLIENT_KEY_HERE with the actual client key
        appId:  process.env.REACT_APP_CLIENT_KEY, // Replace YOUR_APP_ID_HERE with the actual app ID
        erc4337: {
          name: "SIMPLE",                  //name of the smart account you'd like to be displayed on the modal 
          version: "1.0.0",
        },
        wallet: {
          visible: true,                   //boolean dictating whether or not the Particle Wallet modal is shown after login
          customStyle: {
            supportChains: [BerachainArtio], //an array of chains for the Particle Wallet modal (if visible is true) will be locked to.
          },
        },
      }}
    >
      <App />
    </AuthCoreContextProvider>
  </React.StrictMode>
);‎

Note: Due to specific env constraints we’re passing our keys directly as a string and not via the .env file.

Configuring Smart Account

Now that AuthCoreContextProvider has been configured and Particle Auth Core is initialized, you're ready to move onto the implementation of your primary application component (in the example above, this was App).

Before you can begin executing transactions, you'll need to first configure your smart account.

In this setup, Particle Auth Core is used to initiate a social login and generate an EOA. Past that point, Particle's AA SDK (@particle-network/aa) is responsible for assigning and facilitating interaction with a smart account.

An example of the process covered above can be found below.

File: ./src/App.tsx

// Imports
// ========================================================
import { BerachainArtio } from "@particle-network/chains";
import {
  AAWrapProvider,
  SendTransactionMode,
  SmartAccount,
} from "@particle-network/aa";
import {
  useEthereum
} from "@particle-network/auth-core-modal";


 // Import App
// ========================================================
import "./App.css";



const App = () => {
  const { provider } = useEthereum();
  const { connect, disconnect } = useConnect();
  const { userInfo } = useAuthCore();

  const [balance, setBalance] = useState(null);

// Smart Account Config 
// ========================================================
  const smartAccount = new SmartAccount(provider, {
    projectId: "YOUR_PROJECT_ID_HERE", // Replace YOUR_PROJECT_ID_HERE with the actual project ID
        clientKey: "YOUR_CLIENT_KEY_HERE", // Replace YOUR_CLIENT_KEY_HERE with the actual client key
        appId: "YOUR_APP_ID_HERE", // Replace YOUR_APP_ID_HERE with the actual app ID
    aaOptions: {
      accountContracts: {
        SIMPLE: [{ chainIds: [BerachainArtio.id], version: '1.0.0' }],
      }
    }
  });

Setting-up Ethers

This instance of SmartAccount in the example above can then be used directly within AAWrapProvider to construct an AA-enabled provider object to use within a new instance of ethers.providers.Web3Provider (or if you're using v6, ethers.BrowserProvider). This same structure can be applied to Web3.js or viem.

We'll use SendTransactionMode.Gasless within AAWrapProvider, ensuring that transactions sent through this provider object will be subject to sponsorship if they pass the conditions we set within the Paymaster (although in this example there are none, so transactions will be sponsored indiscriminately).

Your custom Ethers provider should look like the following:

File: ./src/App.tsx

// Imports
// ========================================================
import { BerachainArtio } from "@particle-network/chains";
import {
  AAWrapProvider,
  SendTransactionMode,
  SmartAccount,
} from "@particle-network/aa";
import {
  useEthereum
} from "@particle-network/auth-core-modal";


 // Import App
// ========================================================
import "./App.css";

const App = () => {
  const { provider } = useEthereum();
  const { connect, disconnect } = useConnect();
  const { userInfo } = useAuthCore();

  const [balance, setBalance] = useState(null);

// Smart Account Config 
// ========================================================
  const smartAccount = new SmartAccount(provider, {
    projectId: "YOUR_PROJECT_ID_HERE", // Replace YOUR_PROJECT_ID_HERE with the actual project ID
        clientKey: "YOUR_CLIENT_KEY_HERE", // Replace YOUR_CLIENT_KEY_HERE with the actual client key
        appId: "YOUR_APP_ID_HERE", // Replace YOUR_APP_ID_HERE with the actual app ID
    aaOptions: {
      accountContracts: {
        SIMPLE: [{ chainIds: [BerachainArtio.id], version: '1.0.0' }],
      }
    }
  });


// Ethers Provider Setup
const customProvider = new ethers.providers.Web3Provider(new AAWrapProvider(smartAccount, SendTransactionMode.Gasless), "any");

With this object initialized (customProvider in this case), you'll be able to facilitate transactions, retrieve balances, message signatures, etc. through Particle. However, before being able to facilitate any of these, you’ll first need to facilitate social login — that is what we will be covering next.

Setting-up Social Login

Social login with Particle Auth Core is simple, directed by two functions derived from the useConnect hook, connect and disconnect. Upon calling connect, social login will immediately be initiated and the user will undergo the login process for the specified social login mechanism. Similarly for disconnect, a user will be removed from their account upon calling.

Also, we need to import the specific type SocialAuthType imported from @particle-network/auth-core. (This would in imports).

File: ./src/App.tsx

// Imports
// ========================================================
import { BerachainArtio } from "@particle-network/chains";
import {
  AAWrapProvider,
  SendTransactionMode,
  SmartAccount,
} from "@particle-network/aa";
import {
  useEthereum
} from "@particle-network/auth-core-modal";


// New addition of Imports- SocialAuthType
// ========================================================
import { SocialAuthType } from "@particle-network/auth-core";


 // Import App
// ========================================================
import "./App.css";

const App = () => {
  const { provider } = useEthereum();
  const { connect, disconnect } = useConnect();
  const { userInfo } = useAuthCore();

  const [balance, setBalance] = useState(null);

// Smart Account Config 
// ========================================================
  const smartAccount = new SmartAccount(provider, {
    projectId: "YOUR_PROJECT_ID_HERE", // Replace YOUR_PROJECT_ID_HERE with the actual project ID
        clientKey: "YOUR_CLIENT_KEY_HERE", // Replace YOUR_CLIENT_KEY_HERE with the actual client key
        appId: "YOUR_APP_ID_HERE", // Replace YOUR_APP_ID_HERE with the actual app ID
    aaOptions: {
      accountContracts: {
        SIMPLE: [{ chainIds: [BerachainArtio.id], version: '1.0.0' }],
      }
    }
  });

// Ethers Provider Setup
const customProvider = new ethers.providers.Web3Provider(new AAWrapProvider(smartAccount, SendTransactionMode.Gasless), "any");

// Login Setup
// ========================================================
const handleLogin = async (authType: SocialAuthType) => {  //can be mapped to "Sign in with Google," "Sign in with X," and a miscellaneous button on the frontend by purely changing the string passed into socialType on connect
    if (!userInfo) {
      await connect({
        socialType: authType,           //a string dictating the specific authentication type to be used (such as 'google', 'twitter', etc.)
        chain: BerachainArtio,         //the specific chain you'd like to connect to. This should be BerachainArtio
      });
    }
  };‎

With a custom Ethers object constructed and the user logged in (through connect), transaction requests can be made directly to Particle through its embedded wallet. As mentioned, this will be done directly through methods on the aforementioned Ethers object (customProvider here), which need no special configuration to work with Particle.

Setting up Burn Transaction for BERA

We will be facilitating two transaction for this demo and another transaction for burning 1 $HONEY.

For the first transaction, we’ll be executing a gasless burn of 0.001 $BERA, which essentially involves sending $BERA to a dead address, often 0x000000000000000000000000000000000000dEaD .

This transaction will be quite programmatically simple, following a structure similar to the following:

File: ./src/App.tsx

// Imports
// ========================================================
import { BerachainArtio } from "@particle-network/chains";
import {
  AAWrapProvider,
  SendTransactionMode,
  SmartAccount,
} from "@particle-network/aa";
import {
  useEthereum
} from "@particle-network/auth-core-modal";

// New addition of Imports- SocialAuthType
// ========================================================
import { SocialAuthType } from "@particle-network/auth-core";

 // Import App
// ========================================================
import "./App.css";

const App = () => {
  const { provider } = useEthereum();
  const { connect, disconnect } = useConnect();
  const { userInfo } = useAuthCore();

  const [balance, setBalance] = useState(null);

// Smart Account Config 
// ========================================================
  const smartAccount = new SmartAccount(provider, {
    projectId: "YOUR_PROJECT_ID_HERE", // Replace YOUR_PROJECT_ID_HERE with the actual project ID
        clientKey: "YOUR_CLIENT_KEY_HERE", // Replace YOUR_CLIENT_KEY_HERE with the actual client key
        appId: "YOUR_APP_ID_HERE", // Replace YOUR_APP_ID_HERE with the actual app ID
    aaOptions: {
      accountContracts: {
        SIMPLE: [{ chainIds: [BerachainArtio.id], version: '1.0.0' }],
      }
    }
  });

// Ethers Provider Setup
const customProvider = new ethers.providers.Web3Provider(new AAWrapProvider(smartAccount, SendTransactionMode.Gasless), "any");

// Login Setup
// ========================================================
const handleLogin = async (authType: SocialAuthType) => {  //can be mapped to "Sign in with Google," "Sign in with X," and a miscellaneous button on the frontend by purely changing the string passed into socialType on connect
    if (!userInfo) {
      await connect({
        socialType: authType,           //a string dictating the specific authentication type to be used (such as 'google', 'twitter', etc.)
        chain: BerachainArtio,         //the specific chain you'd like to connect to. This should be BerachainArtio
      });
    }
  };‎

// Burn 0.001 $BERA
// ========================================================
const executeUserOp = async () => {
    const signer = customProvider.getSigner();

    const tx = {
      to: "0x000000000000000000000000000000000000dEaD",
      value: ethers.utils.parseEther("0.001"),              //value of the $BERA that will be coverted to which needs to be converted to wei through
    };

    const txResponse = await signer.sendTransaction(tx);  //sendTransaction method
    const txReceipt = await txResponse.wait();

    notification.success({
      message: "Transaction Successful",
      description: (
        <div>
          Transaction Hash:{" "}
          <a
            href={`https://artio.beratrail.io/tx/${txReceipt.transactionHash}`}
            target="_blank"
            rel="noopener noreferrer"
          >
            {txReceipt.transactionHash}
          </a>
        </div>
      ),
    });
  };

Setting up Burn Transaction for $HONEY

Note: If you don’t have $HONEY, but would like some to test this function, Berachain has a native DEX that supports swapping $BERA for $HONEY.

As for the second transaction, the burn of 1 $HONEY, Berachain’s native stablecoin, we can take a similar approach, although instead of calling a method on signer directly, we'll have to create a contract object for $HONEY, on which we can call the transfer method.

This can be done by simply initiating ethers.Contract, passing in 0x7EeCA4205fF31f947EdBd49195a7A88E6A91161B (the $HONEY contract address on Berachain Artio), alongside the ABI. (https://artio.beratrail.io/token/0x7EeCA4205fF31f947EdBd49195a7A88E6A91161B)

File: ./src/App.tsx

// Imports
// ========================================================
import { BerachainArtio } from "@particle-network/chains";
import {
  AAWrapProvider,
  SendTransactionMode,
  SmartAccount,
} from "@particle-network/aa";
import {
  useEthereum
} from "@particle-network/auth-core-modal";

// New addition of Imports- SocialAuthType
// ========================================================
import { SocialAuthType } from "@particle-network/auth-core";

 // Import App
// ========================================================
import "./App.css";

const App = () => {
  const { provider } = useEthereum();
  const { connect, disconnect } = useConnect();
  const { userInfo } = useAuthCore();

  const [balance, setBalance] = useState(null);

// Smart Account Config 
// ========================================================
  const smartAccount = new SmartAccount(provider, {
    projectId: "YOUR_PROJECT_ID_HERE", // Replace YOUR_PROJECT_ID_HERE with the actual project ID
        clientKey: "YOUR_CLIENT_KEY_HERE", // Replace YOUR_CLIENT_KEY_HERE with the actual client key
        appId: "YOUR_APP_ID_HERE", // Replace YOUR_APP_ID_HERE with the actual app ID
    aaOptions: {
      accountContracts: {
        SIMPLE: [{ chainIds: [BerachainArtio.id], version: '1.0.0' }],
      }
    }
  });

// Ethers Provider Setup
const customProvider = new ethers.providers.Web3Provider(new AAWrapProvider(smartAccount, SendTransactionMode.Gasless), "any");

// Login Setup
// ========================================================
const handleLogin = async (authType: SocialAuthType) => {  //can be mapped to "Sign in with Google," "Sign in with X," and a miscellaneous button on the frontend by purely changing the string passed into socialType on connect
    if (!userInfo) {
      await connect({
        socialType: authType,           //a string dictating the specific authentication type to be used (such as 'google', 'twitter', etc.)
        chain: BerachainArtio,         //the specific chain you'd like to connect to. This should be BerachainArtio
      });
    }
  };‎

// Burn 0.001 $BERA
// ========================================================
const executeUserOp = async () => {
    const signer = customProvider.getSigner();

    const tx = {
      to: "0x000000000000000000000000000000000000dEaD",
      value: ethers.utils.parseEther("0.001"),              //value of the $BERA that will be coverted to which needs to be converted to wei through
    };

    const txResponse = await signer.sendTransaction(tx);  //sendTransaction method
    const txReceipt = await txResponse.wait();

    notification.success({
      message: "Transaction Successful",
      description: (
        <div>
          Transaction Hash:{" "}
          <a
            href={`https://artio.beratrail.io/tx/${txReceipt.transactionHash}`}
            target="_blank"
            rel="noopener noreferrer"
          >
            {txReceipt.transactionHash}
          </a>
        </div>
      ),
    });
  };


// Burn 1 $HONEY
// ========================================================
const executeUserOpHONEY = async () => {
    const signer = customProvider.getSigner();

    const tokenContract = new ethers.Contract(
      "0x7EeCA4205fF31f947EdBd49195a7A88E6A91161B",                      //official  $HONEY contract address
      ["function transfer(address to, uint256 amount)"],                 
      signer                                                             //retrieved through {your ethers object}.getSigner      
    );

    const txResponse = await tokenContract.transfer(
      "0x000000000000000000000000000000000000dEaD",
      ethers.utils.parseEther("1")                                      // value of the $HONEY 
    );
    const txReceipt = await txResponse.wait();

    notification.success({
      message: "Transaction Successful",
      description: (
        <div>
          Transaction Hash:{" "}
          <a
            href={`https://artio.beratrail.io/tx/${txReceipt.transactionHash}`}
            target="_blank"
            rel="noopener noreferrer"
          >
            {txReceipt.transactionHash}
          </a>
        </div>
      ),
    });
  };

If you’re leveraging the built-in Particle Wallet interface (shown by setting visible to true within AuthCoreContextProvider), many ERC-20 and ERC-721 tokens won’t be automatically picked up (including $HONEY). If these aren’t automatically reflected within the modal, you’ll need to manually add the token through the plus icon near the list of balances.‎

For the complete App.tsx code, please refer the “Complete Code” section right below “Recap”.

dApp CSS

As mentioned before, we would be focusing mostly on backend and getting the dApp running. Follow the link below and add the css code to your existing ../src/App.css.

../src/App.css
Head over to https://github.com/berachain/guides/tree/main/apps/particle-auth-core-vite and use the existing code from the template!

✅ Deploying the dApp

 npm run dev;

#Expected Output:
> vite-project@0.0.0 dev
> vite


  VITE v5.1.3  ready in 117 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

dApp should be successfully deployed on http://localhost:5173/.

Recap

Here’s a quick break-down of the steps that were performed in this guide!

1. Setting up your dev environment and install the required libraries.
2. Getting keys from particle dashboard
3. Configuring Smart Account
4. Setting-up Ethers
5. Setting-up Social Login
6. Setting up Burn Transaction for $BERA and $HONEY
7. Deploying and Testing the dApp!

This guide serves as a one-stop solution for new dApps looking to integrate a wallet that facilitates social-based login along with added AA support! structure and flow similar to the above can be applied directly to both existing and new applications.

Complete Code

../src/index.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import { BerachainArtio } from "@particle-network/chains";
import { AuthCoreContextProvider } from "@particle-network/auth-core-modal";
import App from "./App";

import("buffer").then(({ Buffer }) => {
  window.Buffer = Buffer;
});

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <AuthCoreContextProvider
      options={{
        projectId: "YOUR_PROJECT_ID_HERE", // Replace YOUR_PROJECT_ID_HERE with the actual project ID
        clientKey: "YOUR_CLIENT_KEY_HERE", // Replace YOUR_CLIENT_KEY_HERE with the actual client key
        appId: "YOUR_APP_ID_HERE", // Replace YOUR_APP_ID_HERE with the actual app ID
        erc4337: {
          name: "SIMPLE",
          version: "1.0.0",
        },
        wallet: {
          visible: true,
          customStyle: {
            supportChains: [BerachainArtio],
          },
        },
      }}
    >
      <App />
    </AuthCoreContextProvider>
  </React.StrictMode>
);

../src/App.tsx

import React, { useState, useEffect } from "react";
import { BerachainArtio } from "@particle-network/chains";
import {
  AAWrapProvider,
  SendTransactionMode,
  SmartAccount,
} from "@particle-network/aa";
import {
  useEthereum,
  useConnect,
  useAuthCore,
} from "@particle-network/auth-core-modal";
import { ethers } from "ethers";
import { Modal, notification } from "antd";

import "./App.css";

import { SocialAuthType } from "@particle-network/auth-core";

const App = () => {
  const { provider } = useEthereum();
  const { connect, disconnect } = useConnect();
  const { userInfo } = useAuthCore();

   const smartAccount = new SmartAccount(provider, {
    projectId: "YOUR_PROJECT_ID_HERE", // Replace YOUR_PROJECT_ID_HERE with the actual project ID
        clientKey: "YOUR_CLIENT_KEY_HERE", // Replace YOUR_CLIENT_KEY_HERE with the actual client key
        appId: "YOUR_APP_ID_HERE", // Replace YOUR_APP_ID_HERE with the actual app ID
    aaOptions: {
      accountContracts: {
        SIMPLE: [{ chainIds: [BerachainArtio.id], version: '1.0.0' }],
      }
    }
  });

  const customProvider = new ethers.providers.Web3Provider(
    new AAWrapProvider(smartAccount, SendTransactionMode.Gasless),
    "any"
  );

  useEffect(() => {
    if (userInfo) {
      fetchBalance();
    }
  }, [userInfo]);

  const [balance, setBalance] = useState<string | null>(null);

  const fetchBalance = async () => {
    const address = await smartAccount.getAddress();
    const balanceResponse = await customProvider.getBalance(address);
    setBalance(ethers.utils.formatEther(balanceResponse));
  };

  const handleLogin = async (authType: SocialAuthType) => {
    if (!userInfo) {
      await connect({
        socialType: authType,
        chain: BerachainArtio,
      });
    }
  };

  const executeUserOp = async () => {
    const signer = customProvider.getSigner();

    const tx = {
      to: "0x000000000000000000000000000000000000dEaD",
      value: ethers.utils.parseEther("0.001"),
    };

    const txResponse = await signer.sendTransaction(tx);
    const txReceipt = await txResponse.wait();

    notification.success({
      message: "Transaction Successful",
      description: (
        <div>
          Transaction Hash:{" "}
          <a
            href={`https://artio.beratrail.io/tx/${txReceipt.transactionHash}`}
            target="_blank"
            rel="noopener noreferrer"
          >
            {txReceipt.transactionHash}
          </a>
        </div>
      ),
    });
  };

  const executeUserOpHONEY = async () => {
    const signer = customProvider.getSigner();

    const tokenContract = new ethers.Contract(
      "0x7EeCA4205fF31f947EdBd49195a7A88E6A91161B",
      ["function transfer(address to, uint256 amount)"],
      signer
    );

    const txResponse = await tokenContract.transfer(
      "0x000000000000000000000000000000000000dEaD",
      ethers.utils.parseEther("1")
    );
    const txReceipt = await txResponse.wait();

    notification.success({
      message: "Transaction Successful",
      description: (
        <div>
          Transaction Hash:{" "}
          <a
            href={`https://artio.beratrail.io/tx/${txReceipt.transactionHash}`}
            target="_blank"
            rel="noopener noreferrer"
          >
            {txReceipt.transactionHash}
          </a>
        </div>
      ),
    });
  };

  return (
    <div className="App">
      <div className="logo-section">
        <img
          src="https://i.imgur.com/EerK7MS.png"
          alt="Logo 1"
          className="logo logo-big"
        />
        <img
          src="https://i.imgur.com/OdR3YLW.png"
          alt="Logo 2"
          className="logo"
        />
      </div>
      {!userInfo ? (
        <div className="login-section">
          <button
            className="sign-button google-button"
            onClick={() => handleLogin("google")}
          >
            <img
              src="https://i.imgur.com/nIN9P4A.png"
              alt="Google"
              className="icon"
            />
            Sign in with Google
          </button>
          <button
            className="sign-button twitter-button"
            onClick={() => handleLogin("twitter")}
          >
            <img
              src="https://i.imgur.com/afIaQJC.png"
              alt="Twitter"
              className="icon"
            />
            Sign in with X
          </button>
        </div>
      ) : (
        <div className="profile-card">
          <h2>{userInfo.name}</h2>
          <div className="balance-section">
            <small>{balance} BERA</small>
            <button className="sign-message-button" onClick={executeUserOp}>
              Burn 0.001 $BERA
            </button>
            <button
              className="sign-message-button honey"
              onClick={executeUserOpHONEY}
            >
              Burn 1 $HONEY
            </button>
            <button className="disconnect-button" onClick={() => disconnect()}>
              Logout
            </button>
          </div>
        </div>
      )}
    </div>
  );
};

export default App;

../src/App.css
Head over to https://github.com/berachain/guides/tree/main/apps/particle-auth-core-vite and use the existing code from the template!

More dApps and How To Get Support ?

If you’re interested in understanding and developing more on Berachain, try various example repos provided in the official guides repo —

guides/apps/particle-auth-core-vite at main · berachain/guides

Berachain’s developer documentation also has multiple starter guides with goto tools such as Hardhat, Foundry and more! Head over to developer section on the docs using the link below.

Connecting to Berachain

How to get Developer Support?

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

Our DevRel team will be happy to assist! 🤝

Byyeeee dev bears! 🐻

Social Login dApp with Particle Network on Berachain Testnet was originally published in berachain-devs on Medium, where people are continuing the conversation by highlighting and responding to this story.

🛠️ Let’s Build A Mobile dApp On Berachain

Most web3 dApps are typically built for web and don’t have much love for mobile. In this tutorial we’re going to change that by building an iOS app with Expo that works with Berachain.

Our mobile dApp will be able to connect our MetaMask mobile wallet, sign a message, and deploy the bytecode for a HelloWorld contract to Berachain Artio (Berachain Testnet).

Why Expo?

Expo has been gaining popularity in the React Native space for mobile development and three main reasons why developers are choosing Expo over Native development or just React Native are:

1. Support for multiple platforms — iOS and Android
2. Prebuilt components and functionality
3. Expo EAS (Expo Application Service) which allows for immediate updates versus going through AppStore approvals for each update

WalletConnect & Mobile

WalletConnect has been a staple for most web3 dApps and making sure projects are setup to support has many wallets, while giving easy tooling for developers to get out-of-the-box wallet connection integration with their SDKs.

WalletConnect also has a mobile specific SDK that allows for wallet connections and interactions to happen directly on your mobile device. This is the SDK that we’ll be using for this tutorial.

📋 Requirements

Make sure to have the following installed or setup prior to continuing.

NOTE: For the purposes of this tutorial we’ll be focusing on iOS

• NVM or Node v20.11.0
• Expo Go
• Xcode with iOS Simulator
• iOS MetaMask Mobile Wallet
• Berachain $BERA tokens — (Need Berachain faucet tokens?)

💻 Pre-Step iOS Simulator On Sonoma

With the latest Mac OS Sonoma and Xcode, Apple has decided to create an extra step that would require developers to download a specific runtime simulator that may not be pre-installed.

To start, run Xcode, and go to Window > Devices & Simulators. This will open up a new window. Select Simulators in the top left, and from the dropdown for Device Type select iPhone 15 Pro Max and for OS Version choose Download more simulator runtimes….

This will open another window to then download iOS 17.2.

Wait until this download completes and double check that your Simulator.app has successfully downloaded by running:

open /Applications/Xcode.app/Contents/Developer/Applications/Simulator.app;

📱Building A Berachain Mobile dApp

Now that we our iOS Simulator setup, we should be good to build out our entire mobile application.

WalletConnect Project ID

Before we start coding, we’ll need to make sure that we setup a WalletConnect Project ID at https://cloud.walletconnect.com/app.

If you already have a project id, you can skip this step.

Go the WalletConnect Cloud Sign-In to create a new account.

When in the dashboard, create a new project.

Enter the details of your project.

Get your project id, we’ll need this for later.

Project Setup

Now that we have our WalletConnect project id, let’s create a base expo project and add our needed dependencies.

 npx create-expo-app berachain-walletconnect-expo -t;

# [Expected Prompt & Output]:
# ? Choose a template: › - Use arrow-keys. Return to submit.
#     Blank
# ❯   Blank (TypeScript) - blank app with TypeScript enabled
#     Navigation (TypeScript)
#     Blank (Bare)
# ...
# ✅ Your project is ready!
#
# To run your project, navigate to the directory and run one of the following npm commands.
#
# - cd berachain-walletconnect-expo
# - npm run android
# - npm run ios
# - npm run web

Install our needed dependencies.

NOTE: We’ll be using pnpm which has been known to have some issues with expo. We also recommend using yarn with expo whenever possible.

cd berachain-walletconnect-expo;

pnpm add @web3modal/wagmi-react-native wagmi@1.4.13 viem@1.21.4 @react-native-async-storage/async-storage react-native-get-random-values react-native-svg react-native-modal @react-native-community/netinfo @walletconnect/react-native-compat expo-application expo-linking;
# If in a monorepo / turbo repo, run the following right after in the dir
# pnpm install --ignore-workspace;

# @web3modal/wagmi-react-native - walletconnect react native web3modal
# wagmi@1.4.13 - web3 react hooks (currently only supports v1)
# viem@1.21.4 # js library for interacting with EVM (currently only support
# @react-native-async-storage/async-storage - for local device storage
# react-native-get-random-values - local random val generator
# react-native-svg - native svg support
# react-native-modal - modals support
# @react-native-community/netinfo - api for network info for device
# @walletconnect/react-native-compat - shims / polyfills for additional support
# expo-application - for native app information
# expo-linking - allows for external links to open the browser

Let’s test that our app is working correctly — hint it won’t 😅.

Note: This is an issue specifically with pnpm. If you did everything with yarn then this won’t happen.

# FROM: ./berachain-walletconnect-expo;

pnpm ios;

# [Expected Output]:
# 

⚠️ The PNPM Expo Fix

If you’re using yarn you can still make these modifications and it’ll work for all package managers.

To fix this specific pnpm issue, we’ll need to make 3 modifications to our project.

1 — Install Babel Runtime Dependency

# FROM: ./berachain-walletconnect-expo;

pnpm add -D @babel/runtime;

2 — Modify Package JSON App Entry

File: ./package.json

{
  "name": "berachain-walletconnect-expo",
  "version": "1.0.0",
-  "main": "node_modules/expo/AppEntry.js",
+ "main": "index.ts",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@react-native-async-storage/async-storage": "^1.22.1",
    "@react-native-community/netinfo": "^11.3.0",
    "@walletconnect/react-native-compat": "^2.11.1",
    "@web3modal/wagmi-react-native": "^1.2.0",
    "expo": "~50.0.7",
    "expo-application": "^5.8.3",
    "expo-status-bar": "~1.11.1",
    "react": "18.2.0",
    "react-native": "0.73.4",
    "react-native-get-random-values": "^1.10.0",
    "react-native-modal": "^13.0.1",
    "react-native-svg": "^14.1.0",
    "viem": "1.21.4",
    "wagmi": "1.4.13"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@types/react": "~18.2.45",
    "typescript": "^5.1.3"
  },
  "private": true
}

3 — Add New Entry File & Move Our App.tsx

# FROM: ./berachain-walletconnect-expo;

touch index.ts;
mkdir app;
mv App.tsx app;

File: ./index.ts

// Imports
// ========================================================
import { registerRootComponent } from "expo";

// Main App
// ========================================================
import App from "./app/App";

// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
// It also ensures that whether you load the app in Expo Go or in a native build,
// the environment is set up appropriately
registerRootComponent(App);

Let’s try this again, with pnpm ios and we should get the following working. This should also work with yarn or npm as well.

Styling Our Project

For styling, we’re going to use Tailwind with Nativewind to keep that same consistent styling with all of our app.

These next few steps, are a few but once it’s setup, it’ll make sure that we have Tailwind configured correctly.

# FROM: ./berachain-walletconnect-expo;

pnpm add nativewind@^4.0.1 tailwindcss react-native-css-interop;
npx tailwindcss init;

# Move our main App.tsx to an app directory for better tailwind changes
mkdir app;
mv App.tsx app/;

Make the appropriate modification to our newly generated tailwind.config.js file.

File: ./tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  // NOTE: Update this to include the paths to all of your component files.
  content: [
    "./app/**/*.{js,jsx,ts,tsx}", 
    "./components/**/*.{js,jsx,ts,tsx}"
  ],
  presets: [require("nativewind/preset")],
  theme: {
    extend: {},
  },
  plugins: [],
}

Create a new global.css and add Tailwind styles.

# FROM: ./berachain-walletconnect-expo;

touch global.css;

File: ./global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  .App {
    @apply bg-[#F47226] text-[#2E1E1A] flex w-full h-full items-center justify-center;
  }

  .H1 {
    @apply text-lg mb-2 block font-semibold text-[#121312] text-center;
  }

  .Text {
    @apply mb-2 text-[#2E1E1A] block;
  }

  .TextInput {
    @apply bg-white text-base h-12 px-2 align-text-top rounded w-full mb-4;
  }

  .TextError {
    @apply text-red-800 bg-red-200 mb-2 text-base p-4;
  }

  .Button {
    @apply bg-[#2E1E1A] h-12 flex items-center justify-center rounded-lg mb-4 w-full;
  }

  .Code {
    @apply block bg-[#ff843d] whitespace-nowrap overflow-scroll mb-4 text-[#874c2a] text-base h-12 leading-[3rem] px-2 rounded w-full;
  }
  
  .Connect {
    @apply my-4 block;
  }

  .Balance {
    @apply block w-full px-8;
  }

  .SignMessage {
    @apply block w-full px-8;
  }

  .Deploy {
    @apply block w-full px-8;
  }
}

Modify our babel.config.js to support nativewind.

File: ./babel.config.js

module.exports = (api) => {
  api.cache(true);
  return {
    presets: [
      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
      "nativewind/babel",
    ],
  };
};

Generate a new metro.config.js file which will help with build.

# FROM: ./berachain-walletconnect-expo;

npx expo customize metro.config.js;

Make some modifications to that config file.

File: ./metro.config.js

// Learn more https://docs.expo.io/guides/customizing-metro
const { getDefaultConfig } = require('expo/metro-config');
+ const { withNativeWind } = require('nativewind/metro');

/** @type {import('expo/metro-config').MetroConfig} */
- const config = getDefaultConfig(__dirname);
+ const config = getDefaultConfig(__dirname, { isCSSEnabled: true })

- module.exports = config;
+ module.exports = withNativeWind(config, { input: './global.css' });

Let’s modify our main App.tsx and replace everything with the following code.

File: ./app/App.tsx

// Imports
// ========================================================
import { StatusBar } from 'expo-status-bar';
import { Text, View } from 'react-native';
import '../global.css';

// Main App Component
// ========================================================
export default function App() {
  return (
    <View className="App">
      <StatusBar style="auto" />
      <Text className="H1">Berachain WalletConnect Expo Example</Text>
      <Text className="Text">Demonstrating how to build mobile dApps</Text>
    </View>
  );
};

Run our app again and we should see the following.

Let’s also add an SVG logo to our app as a separate component.

# FROM: ./berachain-walletconnect-expo;

mkdir components;
mkdir components/Icons;
touch components/Icons/index.tsx;

Add the following code to our new icons file.

File: ./components/Icons/index.tsx

// Imports
// ========================================================
import Svg, { Path } from "react-native-svg";

// Icons
// ========================================================
export const Logo = ({ className = '', width = 128, height = 128  }) => <Svg className={className} width={width} height={height} viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
  <Path d="M477.298 474.489C476.946 472.605 476.506 470.802 475.801 469.084C476.066 468.675 534.55 392.929 480.381 346.092C426.299 299.252 363.145 360.339 362.793 360.667C352.751 357.718 342.622 355.918 332.581 355.099C332.581 355.099 332.581 355.099 332.493 355.099C311.882 351.906 282.99 355.099 282.99 355.099C273.037 355.918 262.996 357.718 253.042 360.585C252.69 360.258 189.536 299.17 135.454 346.01C81.3722 392.847 139.77 468.675 140.034 469.002C139.418 470.802 138.889 472.605 138.537 474.407C132.724 506.833 92.8228 516.823 92.8228 573.325C92.8228 630.891 134.485 676.256 219.572 676.256H254.452C254.628 676.42 268.106 694.27 295.938 695.335C295.938 695.335 302.369 695.99 317.165 695.499C346.673 695.499 361.031 676.583 361.12 676.338H395.999C481.085 676.338 522.748 630.972 522.748 573.407C523.012 516.987 483.111 506.915 477.298 474.489Z" fill="#F9F4D5" />
  <Path d="M692.83 628.84V584.622C720.048 575.287 739.867 546.3 739.867 511.99C739.867 477.679 720.048 448.61 692.83 439.355V395.137C718.463 386.376 737.577 360.092 739.69 328.319H708.51V341.83C708.51 352.229 702.167 361.4 692.83 365.986V359.682C692.83 350.429 684.726 342.894 674.773 342.894H673.188C663.234 342.894 655.133 350.429 655.133 359.682V365.986C645.796 361.4 639.453 352.311 639.453 341.83V328.319H608.272C610.386 360.092 629.5 386.376 655.133 395.137V439.355C628.003 448.61 608.096 477.598 608.096 511.99C608.096 546.382 627.915 575.369 655.133 584.622V628.84C629.5 637.602 610.386 663.888 608.272 695.658H639.453V682.148C639.453 671.748 645.796 662.577 655.133 657.992V664.297C655.133 673.55 663.234 681.083 673.188 681.083H674.773C684.726 681.083 692.83 673.55 692.83 664.297V657.992C702.167 662.577 708.51 671.666 708.51 682.148V695.658H739.69C737.577 663.888 718.463 637.602 692.83 628.84ZM639.453 531.315V492.583C639.453 482.183 645.796 473.012 655.133 468.427V474.73C655.133 483.983 663.234 491.518 673.188 491.518H674.773C684.726 491.518 692.83 483.983 692.83 474.73V468.427C702.167 473.012 708.51 482.101 708.51 492.583V531.315C708.51 541.714 702.167 550.885 692.83 555.471V549.165C692.83 539.912 684.726 532.38 674.773 532.38H673.188C663.234 532.38 655.133 539.912 655.133 549.165V555.471C645.884 550.885 639.453 541.796 639.453 531.315Z" fill="#F9F4D5" />
  <Path d="M884.142 535.49V488.407C911.358 479.07 931.176 450.083 931.176 415.773C931.176 381.462 911.358 352.393 884.142 343.14V328.319H846.53V343.14C819.315 352.475 799.496 381.462 799.496 415.773C799.496 450.083 819.315 479.152 846.53 488.407V535.49C819.315 544.825 799.496 573.813 799.496 608.123C799.496 642.433 819.315 671.502 846.53 680.755V695.576H884.142V680.755C911.358 671.42 931.176 642.433 931.176 608.123C931.176 573.813 911.358 544.825 884.142 535.49ZM830.765 435.097V396.366C830.765 385.966 837.106 376.795 846.442 372.21V378.515C846.442 387.768 854.546 395.301 864.5 395.301H865.997C875.95 395.301 884.054 387.768 884.054 378.515V372.21C893.391 376.795 899.731 385.884 899.731 396.366V435.097C899.731 445.497 893.391 454.668 884.054 459.254V452.95C884.054 443.697 875.95 436.162 865.997 436.162H864.412C854.458 436.162 846.354 443.697 846.354 452.95V459.254C837.194 454.668 830.765 445.579 830.765 435.097ZM899.819 627.53C899.819 637.929 893.479 647.1 884.142 651.686V642.433C884.142 633.18 876.038 625.648 866.085 625.648H864.588C854.634 625.648 846.53 633.18 846.53 642.433V651.686C837.194 647.1 830.853 638.011 830.853 627.53V588.798C830.853 578.398 837.194 569.227 846.53 564.642V567.998C846.53 577.253 854.634 584.786 864.588 584.786H866.173C876.126 584.786 884.23 577.253 884.23 567.998V564.642C893.567 569.227 899.907 578.316 899.907 588.798V627.53H899.819Z" fill="#F9F4D5" />
</Svg>

Next we just need to modify our main App.tsx file to include the logo.

File: ./app/App.tsx

// Imports
// ========================================================
import { StatusBar } from 'expo-status-bar';
import { Text, View } from 'react-native';
import '../global.css';
+ import { Logo } from '../components/Icons';

// Main App Component
// ========================================================
export default function App() {
  return (
    <View className="App">
      <StatusBar style="auto" />
+       <Logo className="w-auto h-10 mx-auto" />
      <Text className="H1">Berachain WalletConnect Expo Example</Text>
      <Text className="Text">Demonstrating how to build mobile dApps</Text>
    </View>
  );
};

WalletConnect Web3Modal

The next step we’re going to do is add WalletConnect’s Web3Modal support into our Expo app.

The first step will be to configure our environment variables.

Note: Make sure not to commit this to our git repository

# FROM: ./berachain-walletconnect-expo;

touch .env;

Add the following contents and remember to replace the WALLET_CONNECT_PROJECT_ID with the newly created project from WalletConnect Cloud directly.

File: ./.env

# Expo Metadata
EXPO_PUBLIC_METADATA_NAME="Berachain WalletConnect Expo"
EXPO_PUBLIC_METADATA_DESCRIPTION="Berachain WalletConnect Expo Example"
EXPO_PUBLIC_METADATA_URL="https://berachain.com"
EXPO_PUBLIC_METADATA_ICONS="https://avatars.githubusercontent.com/u/96059542"
EXPO_PUBLIC_METADATA_REDIRECT_NAME="YOUR_APP_SCHEME://"
EXPO_PUBLIC_METADATA_REDIRECT_UNIVERSAL="YOUR_APP_UNIVERSAL_LINK.com"

# WalletConnect - See https://cloud.walletconnect.com
EXPO_PUBLIC_WALLET_CONNECT_PROJECT_ID="YOUR_PROJECT_ID"

# Chain
EXPO_PUBLIC_CHAIN_ID=80085
EXPO_PUBLIC_CHAIN_NAME="berachainTestnet"
EXPO_PUBLIC_CHAIN_NETWORK="Berachain"
EXPO_PUBLIC_CHAIN_NATIVECURRENCY_DECIMALS=18
EXPO_PUBLIC_CHAIN_NATIVECURRENCY_NAME="Bera Token"
EXPO_PUBLIC_CHAIN_NATIVECURRENCY_SYMBOL="BERA"
EXPO_PUBLIC_CHAIN_RPC_URL="https://rpc.ankr.com/berachain_testnet"
EXPO_PUBLIC_CHAIN_BLOCKEXPLORER_NAME="Beratrail"
EXPO_PUBLIC_CHAIN_BLOCKEXPLORER_URL="https://artio.beratrail.io"

Now that we have this setup, we’re going wrap our main App.tsx with some of the configured providers from WalletConnect that adds its own configuration to the wagmi library.

# FROM: ./berachain-walletconnect-expo;

mkdir providers;
touch providers/index.tsx;
touch providers/wagmi.tsx;

First up is configuring our wagmi provider. This will ensure that we can take advantage of all of wagmi’s hooks but also some default functionality built into WalletConnet Web3Modal.

File: ./providers/wagmi.tsx

// Imports
// ========================================================
import "@walletconnect/react-native-compat";
import {
  createWeb3Modal,
  defaultWagmiConfig,
} from "@web3modal/wagmi-react-native";
import { defineChain } from "viem";
import { WagmiConfig } from "wagmi";

// Config
// ========================================================
// 1. Get projectId at https://cloud.walletconnect.com
const projectId = `${process.env.EXPO_PUBLIC_WALLET_CONNECT_PROJECT_ID}`;

if (!projectId) throw Error('Error: Missing `EXPO_PUBLIC_WALLET_CONNECT_PROJECT_ID`.');

// 2. Create config for our app - defined by our env vars
const metadata = {
  name: `${process.env.EXPO_PUBLIC_METADATA_NAME}`,
  description: `${process.env.EXPO_PUBLIC_METADATA_DESCRIPTION}`,
  url: `${process.env.EXPO_PUBLIC_METADATA_URL}`,
  icons: [`${process.env.EXPO_PUBLIC_METADATA_ICONS}`],
  redirect: {
    native: `${process.env.EXPO_PUBLIC_METADATA_REDIRECT_NATIVE}`,
    universal: `${process.env.EXPO_PUBLIC_METADATA_REDIRECT_UNIVERSAL}`,
  },
};

// 3. Configure our custom chain - Note this is needed for wagmi and viem v1
/**
 * @dev Custom chain configuration
 */
const chainConfiguration = defineChain({
 id: parseInt(`${process.env.EXPO_PUBLIC_CHAIN_ID}`),
 name:`${process.env.EXPO_PUBLIC_CHAIN_NAME}`,
 network: `${process.env.EXPO_PUBLIC_CHAIN_NETWORK}`,
 nativeCurrency: {
  decimals: parseInt(`${process.env.EXPO_PUBLIC_CHAIN_NATIVECURRENCY_DECIMALS}`),
  name: `${process.env.EXPO_PUBLIC_CHAIN_NATIVECURRENCY_NAME}`,
  symbol:`${process.env.EXPO_PUBLIC_CHAIN_NATIVECURRENCY_SYMBOL}`,
 },
 rpcUrls: {
  default: {
   http: [`${process.env.EXPO_PUBLIC_CHAIN_RPC_URL}`],
  },
  public: {
   http: [`${process.env.EXPO_PUBLIC_CHAIN_RPC_URL}`],
  },
 },
 blockExplorers: {
  default: { 
      name: `${process.env.EXPO_PUBLIC_CHAIN_BLOCKEXPLORER_NAME}`,
      url: `${process.env.EXPO_PUBLIC_CHAIN_BLOCKEXPLORER_URL}` 
    },
 },
});

/**
 * @dev supported chains
 */
const chains = [chainConfiguration];

/**
 * 
 */
const wagmiConfig = defaultWagmiConfig({ chains, projectId, metadata });

// 4. Create modal configuration
createWeb3Modal({
  projectId,
  chains,
  wagmiConfig,
});

// Provider
// ========================================================
export default function Wagmi({ children }: { children: React.ReactNode }) {
  return <WagmiConfig config={wagmiConfig}>{children}</WagmiConfig>
};

Next, to keep things clean, we’ll modify our main provider file that will wrap our entire application. This helps to keep our App.tsx file clean, and allows us to add more providers easily with our main provider wrapper.

File: ./providers/index.tsx

// Imports
// ========================================================
import WagmiProvider from "./wagmi";

// Root Provider
// ========================================================
export default function RootProvider({ children }: { children: React.ReactNode }) {
  return <WagmiProvider>{children}</WagmiProvider>
};

Then we’ll want this root provider to wrap our App.tsx and we’ll also add our web3modal button.

File: ./app/App.tsx

// Imports
// ========================================================
import { StatusBar } from "expo-status-bar";
import { Text, View } from "react-native";
import "../global.css";
import { Logo } from "../components/Icons";
+ import RootProvider from "../providers";
+ import { Web3Modal } from "@web3modal/wagmi-react-native";

// Main App Component
// ========================================================
export default function App() {
 return (
+   <RootProvider>
   <View className="App">
    <StatusBar style="auto" />
+     <Web3Modal />
    <Logo className="w-auto h-10 mx-auto" />
    <Text className="H1">Berachain WalletConnect Expo Example</Text>
    <Text className="Text">Demonstrating how to build mobile dApps</Text>
   </View>
+   </RootProvider>
 );
}

Connect Button

Now that the app fully supports WalletConnect, we can now add support for a connect button. We’re going to put this in a separate file to make it easier for us to modify by itself.

# FROM: ./berachain-walletconnect-expo;

mkdir components/Connect;
touch components/Connect/index.tsx;

File: ./components/Connect/index.tsx

// Imports
// ========================================================
import { W3mButton } from "@web3modal/wagmi-react-native";
import { View } from "react-native";

// Component
// ========================================================
export default function Connect() {
 return (
  <View className="Connect">
   {/* Customizing the web3modal button requires passing it certain props */}
   <W3mButton
    connectStyle={{
     backgroundColor: "#2E1E1A",
    }}
    accountStyle={{
     backgroundColor: "#2E1E1A",
    }}
   />
  </View>
 );
}

Let’s add this button to our App.tsx file.

// Imports
// ========================================================
import { StatusBar } from "expo-status-bar";
import { Text, View } from "react-native";
import "../global.css";
import { Logo } from "../components/Icons";
+ import Connect from "../components/Connect";
import RootProvider from "../providers";
import { Web3Modal } from "@web3modal/wagmi-react-native";


// Main App Component
// ========================================================
export default function App() {
 return (
  <RootProvider>
   <View className="App">
    <StatusBar style="auto" />
        <Web3Modal />
    <Logo className="w-auto h-10 mx-auto" />
    <Text className="H1">Berachain WalletConnect Expo Example</Text>
    <Text className="Text">Demonstrating how to build mobile dApps</Text>
+     <Connect />
   </View>
  </RootProvider>
 );
}

We should now have a our connect button supported, but you’ll quickly notice there isn’t a way to connect with our wallet on our mobile because MetaMask isn’t installed on Simulator.

When you click the Connect button, we’ll see that there are zero wallets available.

This is the part where we can take advantage of Expo Go on our phone to connect with our existing wallets.

Note: Make sure that you have MetaMask Mobile installed on your phone and configure your MetaMask mobile to have a new network with Berachain.

If you notice when we run pnpm ios a QR code shows up. We should be able to use that with the Expo Go app to load the app directly into our phone.

Now when we use our iPhone’s camera, we can connect and open up our app in Expo Go.

When the app loads on our phone, we should be able to tap Connect, be presented with MetaMask as an option, select MetaMask, confirm our connection via the MetaMask app, and then be pushed back to the app to confirm that we’re connected.

Display $BERA Balance

Now that we have successfully connected our account with MetaMask, let’s add a basic component that displays our current balance on Berachain.

Note: Make sure to switch your MetaMask wallet to the Berachain Artio Testnet Network before hand.

Our component will check if the account is already connected and the make a request to show the current balance.

# FROM: ./berachain-walletconnect-expo;

mkdir components/Balance;
touch components/Balance/index.tsx;

Let’s add the following code for our new Balance component.

File: ./components/Balance/index.tsx

// Imports
// ========================================================
import { View, Text } from "react-native";
import { useAccount, useBalance } from "wagmi";

// Component
// ========================================================
export default function Balance() {
  // Hooks
  const { isConnected, address } = useAccount();
  const { data, isError, isLoading } = useBalance({
    address
  });

  // Return
  /**
   * If still loading, show a loading state
   */
  if (isLoading)
    return <Text className="Text">Fetching balance...</Text>;


  /**
   * Show error if having a problem fetching the balance
   */
  if (isError)
    return (
      <Text className="mText">Error fetching balance</Text>
    );

  /**
   * If not connected don't show anything
   */
  if (!isConnected) return null;


  /**
   * Successfully connected
   */
  return (
    <View className="Balance">
      <Text className="Text">Balance</Text>
      <Text className="Code">{(parseInt((data?.value ?? '').toString()) / 1000000000000000000).toFixed(2)} $BERA</Text>
    </View>
  );
}

Then we’ll add the Balance component to our App.tsx.

File: ./app/App.tsx

// Imports
// ========================================================
import { StatusBar } from "expo-status-bar";
import { Text, View } from "react-native";
import "../global.css";
import { Logo } from "../components/Icons";
import Connect from "../components/Connect";
+ import Balance from "../components/Balance";
import RootProvider from "../providers";
import { Web3Modal } from "@web3modal/wagmi-react-native";

// Main App Component
// ========================================================
export default function App() {
 return (
  <RootProvider>
   <View className="App">
    <StatusBar style="auto" />
        <Web3Modal />
    <Logo className="w-auto h-10 mx-auto" />
    <Text className="H1">Berachain WalletConnect Expo Example</Text>
    <Text className="Text">Demonstrating how to build mobile dApps</Text>
    <Connect />
+     <Balance />
   </View>
  </RootProvider>
 );
}

Now when we connect with MetaMask, we should see our $BERA balance.

Wallet Sign Message

On top of every basic RPC request, we also want to get some basic wallet interactions going. The simplest version would be signing a message with your MetaMask wallet and getting a signature.

We’re going to build an input that accepts a message, prompts the user’s MetaMask wallet to sign the message, and output the signature.

We’ll first create the file.

# FROM: ./berachain-walletconnect-expo;

mkdir components/SignMessage;
touch components/SignMessage/index.tsx;

Add the functionality to it.

File: ./components/SignMessage/index.tsx

// Imports
// ========================================================
import { useState } from "react";
import { View, Pressable, Text, TextInput } from "react-native";
import { useAccount, useSignMessage } from "wagmi";

// Component
// ========================================================
export default function SignMessage() {
 // Hooks
 const [message, setMessage] = useState("");
 const [signature, setSignature] = useState("(Signature will show up here)");
 const [error, setError] = useState("");
 const { isConnected, address } = useAccount();
 const { signMessageAsync } = useSignMessage();

 // Functions
  /**
   * @dev Handles signing message
   */
 const onPressSignMessage = async () => {
  console.group("onPressSignMessage");
  setError("");

  try {
   const signature = await signMessageAsync({
    message,
   });
   setSignature(signature);
  } catch (error: unknown) {
   console.error({ error });
   setError("Error signing message.");
  }
  console.groupEnd();
 };

 // Return
  /**
   * If not connected and no address, then don't show anything
   */
 if (!isConnected || !address) return null;

 return (
  <View className="SignMessage">
   <Text className="Text">Sign Message</Text>
   <TextInput
    className="TextInput"
    placeholder="Message to sign"
    onChangeText={setMessage}
    value={message}
   />
   <Text className="Text">Signature Generated</Text>
   <Text
    className="Code"
   >{signature}</Text>
   <Pressable
    className="Button"
    onPress={onPressSignMessage}
   >
    <Text className="text-white text-base">Sign Message</Text>
   </Pressable>

   {error ? (
    <Text className="TextError">
     {error}
    </Text>
   ) : null}
  </View>
 );
}

We’ll add the Sign Message functionality to our App.tsx.

File: ./app/App.tsx

// Imports
// ========================================================
import { StatusBar } from "expo-status-bar";
import { Text, View } from "react-native";
import "../global.css";
import { Logo } from "../components/Icons";
import Connect from "../components/Connect";
import Balance from "../components/Balance";
+ import SignMessage from "../components/SignMessage";
import RootProvider from "../providers";
import { Web3Modal } from "@web3modal/wagmi-react-native";

// Main App Component
// ========================================================
export default function App() {
 return (
  <RootProvider>
   <View className="App">
    <StatusBar style="auto" />
        <Web3Modal />
    <Logo className="w-auto h-10 mx-auto" />
    <Text className="H1">Berachain WalletConnect Expo Example</Text>
    <Text className="Text">Demonstrating how to build mobile dApps</Text>
    <Connect />
    <Balance />
+     <SignMessage />
   </View>
  </RootProvider>
 );
}

We should now see the functionality of inputting a message, prompting our wallet to sign the message, and seeing the generated signature.

Deploy Contract

The last piece of functionality I want to add to this app is the ability to deploy a contract’s bytecode directly from the mobile app itself. This would essentially prompt our wallet to initiate a transaction that would deploy a contract to Berachain.

To start, let’s create a new Deploy component.

# FROM: ./berachain-walletconnect-expo;

mkdir components/Deploy;
touch components/Deploy/index.tsx;

We’ll add the following functionality to our Deploy component.

File: ./components/Deploy/index.tsx

// Imports
// ========================================================
import { useState } from "react";
import { Pressable, Text } from "react-native";
import { useAccount, useWaitForTransaction } from "wagmi";
import { encodeAbiParameters } from "viem";
import { openURL } from "expo-linking";

// Constants
// ========================================================
/**
 * @dev ByteCode for HelloWorld Contract see https://github.com/berachain/guides/blob/main/apps/hardhat-viem-helloworld/contracts/HelloWorld.sol
 */
const CONTRACT_BYTECODE =
  "0x60806040523480156200001157600080fd5b5060405162000da238038062000da283398181016040528101906200003791906200021e565b8060009081620000489190620004ba565b507fcbc299eeb7a1a982d3674880645107c4fe48c3227163794e48540a752272235433826040516200007c92919062000638565b60405180910390a1506200066c565b6000604051905090565b600080fd5b600080fd5b600080fd5b600080fd5b6000601f19601f8301169050919050565b7f4e487b7100000000000000000000000000000000000000000000000000000000600052604160045260246000fd5b620000f482620000a9565b810181811067ffffffffffffffff82111715620001165762000115620000ba565b5b80604052505050565b60006200012b6200008b565b9050620001398282620000e9565b919050565b600067ffffffffffffffff8211156200015c576200015b620000ba565b5b6200016782620000a9565b9050602081019050919050565b60005b838110156200019457808201518184015260208101905062000177565b60008484015250505050565b6000620001b7620001b1846200013e565b6200011f565b905082815260208101848484011115620001d657620001d5620000a4565b5b620001e384828562000174565b509392505050565b600082601f8301126200020357620002026200009f565b5b815162000215848260208601620001a0565b91505092915050565b60006020828403121562000237576200023662000095565b5b600082015167ffffffffffffffff8111156200025857620002576200009a565b5b6200026684828501620001eb565b91505092915050565b600081519050919050565b7f4e487b7100000000000000000000000000000000000000000000000000000000600052602260045260246000fd5b60006002820490506001821680620002c257607f821691505b602082108103620002d857620002d76200027a565b5b50919050565b60008190508160005260206000209050919050565b60006020601f8301049050919050565b600082821b905092915050565b600060088302620003427fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff8262000303565b6200034e868362000303565b95508019841693508086168417925050509392505050565b6000819050919050565b6000819050919050565b60006200039b620003956200038f8462000366565b62000370565b62000366565b9050919050565b6000819050919050565b620003b7836200037a565b620003cf620003c682620003a2565b84845462000310565b825550505050565b600090565b620003e6620003d7565b620003f3818484620003ac565b505050565b5b818110156200041b576200040f600082620003dc565b600181019050620003f9565b5050565b601f8211156200046a576200043481620002de565b6200043f84620002f3565b810160208510156200044f578190505b620004676200045e85620002f3565b830182620003f8565b50505b505050565b600082821c905092915050565b60006200048f600019846008026200046f565b1980831691505092915050565b6000620004aa83836200047c565b9150826002028217905092915050565b620004c5826200026f565b67ffffffffffffffff811115620004e157620004e0620000ba565b5b620004ed8254620002a9565b620004fa8282856200041f565b600060209050601f8311600181146200053257600084156200051d578287015190505b6200052985826200049c565b86555062000599565b601f1984166200054286620002de565b60005b828110156200056c5784890151825560018201915060208501945060208101905062000545565b868310156200058c578489015162000588601f8916826200047c565b8355505b6001600288020188555050505b505050505050565b600073ffffffffffffffffffffffffffffffffffffffff82169050919050565b6000620005ce82620005a1565b9050919050565b620005e081620005c1565b82525050565b600082825260208201905092915050565b600062000604826200026f565b620006108185620005e6565b93506200062281856020860162000174565b6200062d81620000a9565b840191505092915050565b60006040820190506200064f6000830185620005d5565b8181036020830152620006638184620005f7565b90509392505050565b610726806200067c6000396000f3fe608060405234801561001057600080fd5b50600436106100365760003560e01c8063a41368621461003b578063fe50cc7214610057575b600080fd5b610055600480360381019061005091906102ad565b610075565b005b61005f6100c1565b60405161006c9190610375565b60405180910390f35b806000908161008491906105ad565b507fcbc299eeb7a1a982d3674880645107c4fe48c3227163794e48540a752272235433826040516100b69291906106c0565b60405180910390a150565b6060600080546100d0906103c6565b80601f01602080910402602001604051908101604052809291908181526020018280546100fc906103c6565b80156101495780601f1061011e57610100808354040283529160200191610149565b820191906000526020600020905b81548152906001019060200180831161012c57829003601f168201915b5050505050905090565b6000604051905090565b600080fd5b600080fd5b600080fd5b600080fd5b6000601f19601f8301169050919050565b7f4e487b7100000000000000000000000000000000000000000000000000000000600052604160045260246000fd5b6101ba82610171565b810181811067ffffffffffffffff821117156101d9576101d8610182565b5b80604052505050565b60006101ec610153565b90506101f882826101b1565b919050565b600067ffffffffffffffff82111561021857610217610182565b5b61022182610171565b9050602081019050919050565b82818337600083830152505050565b600061025061024b846101fd565b6101e2565b90508281526020810184848401111561026c5761026b61016c565b5b61027784828561022e565b509392505050565b600082601f83011261029457610293610167565b5b81356102a484826020860161023d565b91505092915050565b6000602082840312156102c3576102c261015d565b5b600082013567ffffffffffffffff8111156102e1576102e0610162565b5b6102ed8482850161027f565b91505092915050565b600081519050919050565b600082825260208201905092915050565b60005b83811015610330578082015181840152602081019050610315565b60008484015250505050565b6000610347826102f6565b6103518185610301565b9350610361818560208601610312565b61036a81610171565b840191505092915050565b6000602082019050818103600083015261038f818461033c565b905092915050565b7f4e487b7100000000000000000000000000000000000000000000000000000000600052602260045260246000fd5b600060028204905060018216806103de57607f821691505b6020821081036103f1576103f0610397565b5b50919050565b60008190508160005260206000209050919050565b60006020601f8301049050919050565b600082821b905092915050565b6000600883026104597fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff8261041c565b610463868361041c565b95508019841693508086168417925050509392505050565b6000819050919050565b6000819050919050565b60006104aa6104a56104a08461047b565b610485565b61047b565b9050919050565b6000819050919050565b6104c48361048f565b6104d86104d0826104b1565b848454610429565b825550505050565b600090565b6104ed6104e0565b6104f88184846104bb565b505050565b5b8181101561051c576105116000826104e5565b6001810190506104fe565b5050565b601f82111561056157610532816103f7565b61053b8461040c565b8101602085101561054a578190505b61055e6105568561040c565b8301826104fd565b50505b505050565b600082821c905092915050565b600061058460001984600802610566565b1980831691505092915050565b600061059d8383610573565b9150826002028217905092915050565b6105b6826102f6565b67ffffffffffffffff8111156105cf576105ce610182565b5b6105d982546103c6565b6105e4828285610520565b600060209050601f8311600181146106175760008415610605578287015190505b61060f8582610591565b865550610677565b601f198416610625866103f7565b60005b8281101561064d57848901518255600182019150602085019450602081019050610628565b8683101561066a5784890151610666601f891682610573565b8355505b6001600288020188555050505b505050505050565b600073ffffffffffffffffffffffffffffffffffffffff82169050919050565b60006106aa8261067f565b9050919050565b6106ba8161069f565b82525050565b60006040820190506106d560008301856106b1565b81810360208301526106e7818461033c565b9050939250505056fea264697066735822122051a137f3f2f370792efdafdfd52aa1721451dfaa2e804a5236730d97a26f237664736f6c63430008110033";


// Component
// ========================================================
export default function Deploy() {
  // Hooks
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState('');
  const [transactionHash, setTransactionHash] = useState<`0x${string}` | undefined>();
  const { isConnected, address, connector } = useAccount();

  // Functions
  /**
   * @dev hook that waits for a transaction hash
   */
  const txResult = useWaitForTransaction({
    hash: transactionHash
  });

  /**
   * @dev handles deploying the contract
   */
  const onPressDeployContract = async () => {
    console.group('onPressDeployContract');
    setError('');
    setIsLoading(true);
    try {
      const provider = await connector?.getProvider(); // get's the provider from wagmi directly - needed for the walletconnection
      console.log({ provider });
      console.log({ request: provider?.request });

      // Based on constructor - constructor(string memory _greeting) {
      // encodes the function name and the input of `Hello World!`
      const encodedData = encodeAbiParameters(
        [{ name: "_greeting", type: "string" }],
        ["Hello World!"]
      );

      // Need slide(2) to remove 0x from encodedData at the beginning
      const fullByteCode = `${CONTRACT_BYTECODE}${encodedData.slice(2)}`;

      // Send eth transsaction
      const tx = await provider.request({
        method: "eth_sendTransaction",
        params: [
          {
            from: address,
            data: fullByteCode,
          },
        ],
      });
      console.log({ tx });

      // Set the state transaction hash for `useWaitForTransaction` to wait for it
      setTransactionHash(tx);
    } catch (error: unknown) {
      console.error(error);
      setError('Error could not deploy contract.')
    }
    setIsLoading(false);

    console.groupEnd();
  };

  /**
   * @dev function that handles opening url to the final transaction hash in a block explorer
   */
  const onPressSeeTransaction = () => {
    openURL(`${process.env.EXPO_PUBLIC_CHAIN_BLOCKEXPLORER_URL}/tx/${txResult?.data?.transactionHash}`);
  };

  /**
   * If not connected and no address, then don't show anything
   */
  if (!isConnected || !address) return null;

  return (
    <>
      <Text className="Text">Deploy Contract</Text>
      <Pressable
        disabled={isLoading}
        className={"Button"}
        onPress={onPressDeployContract}>
        <Text className="text-white text-base">
          Deploy
        </Text>
      </Pressable>

      {isLoading && <Text className="Code">Loading...</Text>}

      {!isLoading && txResult?.data?.transactionHash
        ? <Pressable
          className="Button"
          onPress={onPressSeeTransaction}>
          <Text className="text-white text-base">
            See Successful Transaction
          </Text>
        </Pressable>
        : null}
      {error ? <Text className="TextError">{error}</Text> : null}
    </>
  );
}

Now if we go through the process, we should be able to tap Deploy, be prompted by our wallet to confirm the transaction, wait for the transaction to complete and see the transaction on the block explorer.

🐻 Full Code Repository

If you want to see the final code and see other guides, check out Berachain WalletConnect Expo Guide Code.

guides/apps/walletconnect-expo at main · berachain/guides

🛠️ Want To Build More?

Want to build more on Berachain and see more examples. Take a look at our Berachain GitHub Guides Repo for a wide variety of implementations that include NextJS, Hardhat, Viem, Foundry, and more.

GitHub - berachain/guides: A demonstration of different contracts, languages, and libraries that work with Berachain EVM.

If you’re looking to dive deeper into the details, take a look at our Berachain Docs.

Berachain Docs

Looking For Dev Support?

Make sure to join our Berachain Discord server and check out our developer channels to ask questions.

Join the Berachain Discord Server!

❤️ Don’t forget to show some love for this article 👏🏼.

Build A Berachain Mobile dApp With WalletConnect & Expo was originally published in berachain-devs on Medium, where people are continuing the conversation by highlighting and responding to this story.