Integration of MetaMask wallet in React application

Paulina Lewandowska

19 Dec 2022
Integration of MetaMask wallet in React application

Introduction

In decentralized applications, users typically need a crypto wallet to interact with the blockchain. To enable this, developers working on the frontend layer must integrate their application with users' wallet applications. This article is intended for developers using the React library who want to create user interfaces with the popular browser plugin, MetaMask. Here is a step-by-step guide on how to integrate a React application with MetaMask.

A basic application in React

The source code of the application written for this tutarial can be found at this link. I used the following libraries to create the application:

To work with this tutorial, you can use the application provided at the link above, or you can configure the application yourself in React with the help of, for example, create-react-app or vite.

Once our application is configured, you need to make sure that we have all the necessary dependencies installed, to do this, run the command

npm install wagmi ethers

To prepare the application, I also used a component library called Material-ui, if you also want to use it, install the following packages with the command:

npm install @mui/material @emotion/react @emotion/styled

Once the configuration is complete and all the necessary dependencies are installed, we can move on to the next point.

Wagmi Library

To integrate with the MetaMask wallet application, we will use a dedicated library for React called wagmi that contains a sizable number of hooks and functions needed for daily blockchain interactions in frontend applications.

The first step will be to configure the library, to do this we need to wrap our application in a WagmiConfig component passing a client variable with our configuration:

import { WagmiConfig, createClient } from "wagmi";
import { getDefaultProvider } from "ethers";
 
import { Home } from "./pages";
import "./styles.css";
 
const client = createClient({
 autoConnect: true,
 provider: getDefaultProvider()
});
 
export default function App() {
 return (
   <WagmiConfig client={client}>
     <Home />
   </WagmiConfig>
 );
}

All available configuration options can be found at this link in the official wagmi documentation

Connecting the MetaMask wallet

Once we have completed the configuration of the wagmi library, we can move on to creating the component responsible for connecting to our wallet. The hooks available in the blibliothek will be helpful in the implementation.

To access the function that will allow us to make a request to connect the wallet, use the useConnect() hooka. To indicate that the wallet we want to connect to is MetaMask, pass the created instance of the InjectedConnector class in the configuration object to the hooka under the connecter key

import { useConnect } from "wagmi";
import { InjectedConnector } from "wagmi/dist/connectors/injected";
 
 ...
 
 const { connect } = useConnect({
   connector: new InjectedConnector()
 });
 
 ...

Hook returns us a connect function that we can call, for example, when the button is clicked.

 ...
 
<Button onClick={() => connect()}>Connect</Button>
 
 ...

To get information about the connected wallet or its connection status, you can use the useAccount() hookup, which returns us such information as:

  • the address of the connected wallet
  • whether the wallet connection action is in progress
  • whether the user's wallet is currently connected in the application
...
 
 const { address, isConnected, isConnecting } = useAccount();
 
 ...

If the user of our application managed to connect the wallet we should also allow him to disconnect it, for this we need to use the disconnect function, which we can access with the help of the hookup useDisconnect()

 ...
 
 const { disconnect } = useDisconnect();
 
 ...

With the help of these three simple hooks, we are able to handle wallet connection. The full source code of the component that handles the connection from the sample application:

import { useConnect, useDisconnect, useAccount } from "wagmi";
import { InjectedConnector } from "wagmi/dist/connectors/injected";
import { Card, Button, Heading } from "../../components";
import Typography from "@mui/material/Typography";
import { WalletInfo } from "./WalletInfo";
 
export const WalletConnect = () => {
 const { isConnected, isConnecting } = useAccount();
 
 const { connect } = useConnect({
   connector: new InjectedConnector()
 });
 
 const { disconnect } = useDisconnect();
 
 return (
   <Card>
     <Heading sx={{ mb: 2 }}>
       {isConnected ? "Your connected wallet:" : "Connect your MetaMask"}
     </Heading>
 
     {isConnecting && <Typography>Connecting...</Typography>}
 
     {isConnected ? (
       <>
         <WalletInfo />
         <Button sx={{ mt: 2 }} onClick={() => disconnect()}>
           Disconnect
         </Button>
       </>
     ) : (
       <Button
         disabled={isConnecting}
         sx={{ mt: 2 }}
         onClick={() => connect()}
       >
         Connect
       </Button>
     )}
   </Card>
 );
};

In the above example there is a <WalletInfo /> component, which we will use to display information about the connected wallet, we will deal with its creation in the next step.

Displaying information about the connected wallet

The next step will display to the user information about the connected wallet such as:

  • Wallet address
  • The current ETH balance of the wallet

To do this, we will prepare two simple components <WalletAddress/> and <WalletBalance/> and , which we will then put into the <WalletInfo/> component:

The address of the currently connected wallet

import { WalletAddress } from "./WalletAddress";
import { WalletBalance } from "./WalletBalance";
 
export const WalletInfo = () => {
 return (
   <div>
     <WalletAddress />
     <WalletBalance />
   </div>
 );
};
import { useAccount } from "wagmi";
import Typography from "@mui/material/Typography";
 
export const WalletAddress = () => {
 const { address } = useAccount();
 return (
   <Typography>
     <strong>Address: </strong>
     {address}
   </Typography>
 );
};

In order to display the connected wallet, we will use the previously mentioned useAccount() hookup, which returns us the address variable. The implementation of a simple component to display the address looks like this:

import { useAccount } from "wagmi";
import Typography from "@mui/material/Typography";
 
export const WalletAddress = () => {
 const { address } = useAccount();
 return (
   <Typography>
     <strong>Address: </strong>
     {address}
   </Typography>
 );
};

Balance of the currently connected wallet

The wagmi library also has a useBalance() hook, which will make the process of retrieving the current wallet balance much easier for us. The process of fetching this value from the blockchain is asynchronous, so this hook returns on, among other things, such information in variables as:

  • isLoading - whether the balance download is in progress
  • isFetched - whether the wallet's balance has been downloaded
  • isError - whether an error occurred while downloading the data
  • data - object containing such fields as:
    • value - user balance in WEI units
    • formatted - user's balance formatted to ETH units
    • symbol - Symbol of the asset for which the balance was downloaded
    • decimals - the number of decimal places that the number describing the quantity of the asset can have

For a better understanding of what a WEI, ETH unit or decimals parameter is, I encourage you to read these articles:

To indicate for which wallet we want to retrieve the balance of funds, we need to pass the address of this wallet as a parameter when calling the hookah as follows, to do this we can use the useAccount() hookah again from the previous step:

 ...
 
 const { address } = useAccount();
 const { isLoading, isFetched, isError, data } = useBalance({ address });
 
 ...

With this information, we are able to implement an entire component with support for the data loading process:

import { useAccount, useBalance } from "wagmi";
import Typography from "@mui/material/Typography";
import Skeleton from "@mui/material/Skeleton";
 
export const WalletBalance = () => {
 const { address } = useAccount();
 const { isLoading, isFetched, isError, data } = useBalance({ address });
 
 return (
   <Typography>
     {isLoading && <Skeleton width={200} />}
     {isFetched && (
       <>
         <strong>Balance: </strong>
         {data?.formatted} {data?.symbol}
       </>
     )}
     {isError && "Fetching balance failed!"}
   </Typography>
 );
};

Summary

The application presented here is just an example, in production applications developers often have to deal with integrating multiple wallet applications, supporting connectivity on multiple blockchain networks, and interactions of connected wallets with smart contracts. All of these functionalities and much more are supported by the wagmi library presented in this turorial. Therefore, I encourage you to study the documentation of this library to see what capabilities it offers.

Tagi

Most viewed


Never miss a story

Stay updated about Nextrope news as it happens.

You are subscribed

Master UI Component Creation with AI: The Ultimate Guide for Developers

Gracjan Prusik

24 Mar 2025
Master UI Component Creation with AI: The Ultimate Guide for Developers

Introduction

Modern frontend development is evolving rapidly, and creating UI components with AI tools is helping developers save time while enhancing interface quality. With AI, we can not only speed up the creation of UI components but also improve their quality, optimize styles, and ensure better accessibility.

This article explores how creating UI components with AI is transforming frontend development by saving time and improving workflows. Specifically, we will discuss:

  • Generating components from images,
  • AI for style analysis and optimization,
  • Automatic style conversion and code migration,
  • AI in generating UI animations.

Creating UI Components with AI from Images

One of the interesting applications of AI in frontend development is the ability to generate components from an image. AI can recognize the structure of the interface and generate HTML/CSS or JSX code that matches the provided image. One of the most popular tools for UI creation is Lovable.

For testing, let's see how the tool performs in creating a simple contact form from the page you are currently on, which is Nextrope.

Query:

"Recreate the image I've sent you in Next.js using CSS."

Sample image used in the query:

The result received:

Tworzenie komponentów UI - Wygenerowany widok

Lovable did an excellent job transforming the image into code. The view is fully responsive. It’s important to remember that the more precise the request, the better the AI will replicate the expected view. However, even with a simple command, the tool performed surprisingly well.

Of course, AI has its limitations. It still makes quite a few mistakes. The generated code still requires review and fixes from the developer, but in some cases, the entire process is significantly sped up—correcting the code often takes less time than creating the component from scratch.

Optimizing UI Components with AI Tools for Style Improvements

This problem of inaccurate code reproduction by AI can be partially addressed by using it to analyze and improve styles. Tools like ChatGPT, DeepSeek and Claude are capable of not only generating code but also diagnosing CSS errors and suggesting why a particular style might not be working as expected.

Simple example: Why is the div not centered?

Query: "Why is this div not centered?"

AI analyzes the code and provides the following response:

Problem: The parent container does not have a defined width or display: flex.
Solution: Add the appropriate styles to the parent container.

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}

AI for Automatic Style Conversion and Code Migration in UI Components

AI can assist with style conversion between different technologies, such as transferring code from traditional CSS to Styled Components or Tailwind CSS.

Let's assume we have a style written in traditional CSS:

.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: darkblue;
}

We can use AI for automatic conversion to Styled Components:

import styled from "styled-components";

const Button = styled.button`
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  transition: background-color 0.3s ease;

  &:hover {
    background-color: darkblue;
  }
`;

export default Button;

AI can also assist in migrating code between frameworks, such as from React to Vue or from CSS to Tailwind.

This makes style migration easier and faster.

How AI Enhances UI Animation Creation

Animations are crucial for enhancing user experience in interfaces, but they are not always provided in the project specification. In such cases, developers have to come up with how the animations should look, which can be time-consuming and require significant creativity. AI, in this context, becomes helpful because it can automatically generate CSS animations or animations using libraries like Framer Motion, saving both time and effort.

Example: Automatically Generated Button Animation

Suppose we need to add a subtle scaling animation to a button but don't have a ready-made animation design. Instead of creating it from scratch, AI can generate the code that meets our needs.

Code generated by AI:

import { motion } from "framer-motion";

const AnimatedButton = () => (
  <motion.button
    whileHover={{ scale: 1.1 }}
    whileTap={{ scale: 0.9 }}
    className="bg-blue-500 text-white px-4 py-2 rounded-lg"
  >
    Press me
  </motion.button>
);

In this way, AI accelerates the animation creation process, providing developers with a simple and quick option to achieve the desired effect without the need to manually design animations from scratch.

Summary

AI significantly accelerates the creation of UI components. We can generate ready-made components from images, optimize styles, transform code between technologies, and create animations in just a few seconds. Tools like ChatGPT, DeepSeek, Claude and Lovable are a huge help for frontend developers, enabling faster and more efficient work.

In the next part of the series, we will take a look at:

If you want to learn more about how AI is impacting the entire automation of frontend processes and changing the role of developers, check out our blog article: AI in Frontend Automation – How It's Changing the Developer's Job?

Follow us to stay updated!

AI in Real Estate: How Does It Support the Housing Market?

Miłosz Mach

18 Mar 2025
AI in Real Estate: How Does It Support the Housing Market?

The digital transformation is reshaping numerous sectors of the economy, and real estate is no exception. By 2025, AI will no longer be a mere gadget but a powerful tool that facilitates customer interactions, streamlines decision-making processes, and optimizes sales operations. Simultaneously, blockchain technology ensures security, transparency, and scalability in transactions. With this article, we launch a series of publications exploring AI in business, focusing today on the application of artificial intelligence within the real estate industry.

AI vs. Tradition: Key Implementations of AI in Real Estate

Designing, selling, and managing properties—traditional methods are increasingly giving way to data-driven decision-making.

Breakthroughs in Customer Service

AI-powered chatbots and virtual assistants are revolutionizing how companies interact with their customers. These tools handle hundreds of inquiries simultaneously, personalize offers, and guide clients through the purchasing process. Implementing AI agents can lead to higher-quality leads for developers and automate responses to most standard customer queries. However, technical challenges in deploying such systems include:

  • Integration with existing real estate databases: Chatbots must have access to up-to-date listings, prices, and availability.
  • Personalization of communication: Systems must adapt their interactions to individual customer needs.
  • Management of industry-specific knowledge: Chatbots require specialized expertise about local real estate markets.

Advanced Data Analysis

Cognitive AI systems utilize deep learning to analyze complex relationships within the real estate market, such as macroeconomic trends, local zoning plans, and user behavior on social media platforms. Deploying such solutions necessitates:

  • Collecting high-quality historical data.
  • Building infrastructure for real-time data processing.
  • Developing appropriate machine learning models.
  • Continuously monitoring and updating models based on new data.

Intelligent Design

Generative artificial intelligence is revolutionizing architectural design. These advanced algorithms can produce dozens of building design variants that account for site constraints, legal requirements, energy efficiency considerations, and aesthetic preferences.

Optimizing Building Energy Efficiency

Smart building management systems (BMS) leverage AI to optimize energy consumption while maintaining resident comfort. Reinforcement learning algorithms analyze data from temperature, humidity, and air quality sensors to adjust heating, cooling, and ventilation parameters effectively.

Integration of AI with Blockchain in Real Estate

The convergence of AI with blockchain technology opens up new possibilities for the real estate sector. Blockchain is a distributed database where information is stored in immutable "blocks." It ensures transaction security and data transparency while AI analyzes these data points to derive actionable insights. In practice, this means that ownership histories, all transactions, and property modifications are recorded in an unalterable format, with AI aiding in interpreting these records and informing decision-making processes.

AI has the potential to bring significant value to the real estate sector—estimated between $110 billion and $180 billion by experts at McKinsey & Company.

Key development directions over the coming years include:

  • Autonomous negotiation systems: AI agents equipped with game theory strategies capable of conducting complex negotiations.
  • AI in urban planning: Algorithms designed to plan city development and optimize spatial allocation.
  • Property tokenization: Leveraging blockchain technology to divide properties into digital tokens that enable fractional investment opportunities.

Conclusion

For companies today, the question is no longer "if" but "how" to implement AI to maximize benefits and enhance competitiveness. A strategic approach begins with identifying specific business challenges followed by selecting appropriate technologies.

What values could AI potentially bring to your organization?
  • Reduction of operational costs through automation
  • Enhanced customer experience and shorter transaction times
  • Increased accuracy in forecasts and valuations, minimizing business risks
Nextrope Logo

Want to implement AI in your real estate business?

Nextrope specializes in implementing AI and blockchain solutions tailored to specific business needs. Our expertise allows us to:

  • Create intelligent chatbots that serve customers 24/7
  • Implement analytical systems for property valuation
  • Build secure blockchain solutions for real estate transactions
Schedule a free consultation

Or check out other articles from the "AI in Business" series