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.

Most viewed


Never miss a story

Stay updated about Nextrope news as it happens.

You are subscribed

What is Account Abstraction?

Karolina

10 Nov 2023
What is Account Abstraction?

Account abstraction is a new way of thinking about how users interact with blockchains. Instead of using traditional externally owned accounts (EOAs), account abstraction allows users to create and manage their accounts using smart contracts. This has a number of potential benefits, including improved security, enhanced privacy, and increased flexibility.

What is account abstraction?

Account abstraction is a concept that, at its core, aims to simplify the user's interaction with blockchain networks. It is a transformative approach that seeks to mask the technicalities of blockchain operations from end-users. It is making transactions as straightforward as sending an email. Account Abstr. allows users to interact with the blockchain without worrying about the underlying technical details.

How does account abstraction differ from the traditional model?

In the traditional account model, each user has an EOA. EOAs are controlled by private keys, which must be kept secret in order to protect the user's funds. Acc. abstraction allows users to create and manage their accounts using smart contracts.

Historical Context

The journey towards acc. abstraction began with the first generation of blockchain technologies, characterized by their "one-size-fits-all" approach to account management. Bitcoin, for instance, introduced the concept of accounts and transactions in a form that was accessible to tech-savvy individuals but remained perplexing to the layperson. Ethereum expanded on this by introducing smart contracts, which opened the door to programmable transactions but did not alter the fundamental account structure. The idea of acc. abstraction has been discussed in the Ethereum community for several years as a part of various Ethereum Improvement Proposals (EIPs), particularly as a feature to be potentially implemented in Ethereum 2.0. It is a direct response to the need for a more versatile and user-centric design that can cater to a broader audience and spur the widespread adoption of blockchain technology.

The Technicalities of Account Abstraction

Account abstraction is not merely a theoretical construct but a technical innovation with specific mechanisms underpinning its operation. In essence, it alters the way transactions are initiated and executed within a blockchain network.

How Account Abstraction Works

Under traditional blockchain models, initiating a transaction involves an externally owned account (EOA) signing a transaction with a private key. This transaction is then broadcast to the network for validation and inclusion in the blockchain. Account abstraction, however, replaces this process with a more flexible one. Here, every account is a smart contract, and transactions are messages sent through these contracts. These smart contracts can encode complex rules for transaction validation, beyond what EOAs can do, such as multi-signature requirements or conditional transactions based on certain triggers.

The technical crux of account abstraction lies in the smart contract’s ability to define its own conditions for transaction execution. This means that user accounts can have unique security protocols or automated operations without the user needing to understand the underlying smart contract code.

Hey! Are you interested in the latest technologies in the blockchain area? be sure to read the article 'Top Zero-Knowledge Proof Projects to watch in 2023'

The Benefits of Account Abstraction

The implications of account abstraction are profound, offering a range of benefits that can enhance the blockchain experience for users and developers alike.

Improved User Experience

One of the most significant advantages of account abstraction is the improvement it brings to user experience. By abstracting away the complexities of key management and transaction rules, it presents a more intuitive interface for users.

Enhanced Security Features

Account abstraction also allows for the implementation of advanced security measures. Since each account can define its own logic, users can tailor their security settings to their specific needs. For instance, one might set up an account that requires additional verification for transactions exceeding a certain value or restricts withdrawals to certain addresses.

Future Implications

The future implications of account abstraction are vast. As the technology matures, it could become a standard feature of blockchain networks, potentially making the current distinction between user accounts and smart contracts obsolete. This could lead to a new wave of blockchain applications that are both powerful and accessible, bringing us closer to the vision of blockchain technology as a seamless part of everyday life.

Challenges and Considerations

Technical Limitations

One of the primary technical challenges of Acc. abstraction lies in its integration with existing blockchain protocols. Current networks are optimized for the EOA model, and introducing a new account structure necessitates significant changes to the core protocol. This includes modifications to the way transactions are propagated in the network, how gas fees are calculated, and how the state of the blockchain is managed. Ensuring that these changes do not compromise the network's performance or security requires careful planning and extensive testing.

Compatibility with Current Systems

Another consideration is the compatibility of account abstr. with the vast ecosystem of existing blockchain applications and services. Wallets, exchanges, and other services have been built around the traditional account model. Transitioning to an acc. abstraction model will require these services to update their infrastructure, which may be a complex and resource-intensive process. Furthermore, there is a need for standardization across the industry to ensure that different implementations of account abstr. can work seamlessly together.

Conclusion

Acc. abstraction represents a significant leap forward in the quest for a more user-friendly blockchain experience. By streamlining the transaction process and offering enhanced security features, acc abstraction has the potential to make blockchain technology more accessible to a broader audience. However, the path to widespread adoption is not without its obstacles. Technical challenges and compatibility issues must be carefully navigated to integrate it into the existing blockchain landscape.

Key Takeaways

How to Add Gnosis Chain to MetaMask: A Simple Tutorial

Karolina

03 Nov 2023
How to Add Gnosis Chain to MetaMask: A Simple Tutorial

As the cryptocurrency ecosystem expands, there is an increasing need for various blockchains with distinct capabilities. Gnosis Chain enters the scene, offering a selection of unique characteristics. By integrating Gnosis Chain with MetaMask, users can access a more comprehensive array of decentralized services. We will walk you through the steps to add Gnosis Chain to your MetaMask wallet in this tutorial.

Prerequisites

Setting up MetaMask

Before exploring the integration of Gnosis Chain, it is crucial to have MetaMask installed and operational:

  • Download and Install: If you have not done so already, visit the official website to download and install the MetaMask browser extension.
  • Setup Account: After completing the installation, create your account and make sure to remember the provided seed phrase. This phrase serves as your primary means for account recovery, so keep it secure.
  • Secure Your Account: Protecting your MetaMask account is of utmost importance. Use a robust password and never disclose your seed phrase to anyone.

Gnosis Chain

It is always helpful to have a basic understanding before incorporating any new blockchain into your wallet:

  • Gnosis Chain Overview: Gnosis Chain, a rising star in the blockchain world, brings a range of decentralized solutions to the table, such as prediction markets and decentralized trading platforms.
  • Benefits & Features: Among Gnosis Chain's main selling points are its accelerated transaction speeds and potentially lower fees when compared to congested networks.

Tutorial: How to Add Gnosis Chain to MetaMask

In the top right-hand corner of your browser, you'll find the wallet. If pinned, click on the MetaMask fox icon; if not, click the three dots in the top-right corner. The following screen will appear:

An option to expand the wallet to a new browser page is available by clicking "Expand view:"

This action will launch MetaMask in a new tab:

By clicking on the ‘Ethereum mainnet’ in the top left corner, you can add another network. Click ‘Add Network’

Choose option ‘Add a network manually’

Then, input the information below:

Network Name: Gnosis Chain formerly xDai

RPC URL: https://rpc.gnosischain.com

ChainID: 100

Symbol: XDAI

Block Explorer URL: https://gnosisscan.io

After saving the settings, Gnosis Chain will be added to your network.

The Benefits of Adding Gnosis Chain to MetaMask

With multiple blockchains becoming more common, integrating Gnosis Chain with MetaMask offers numerous advantages:

Expanded Capabilities: Accessing Gnosis Chain through MetaMask opens up a collection of exclusive applications and features inherent to this particular blockchain, which may include unique dapps or cutting-edge financial products.

Diversification: The crypto domain is extensive and constantly growing. By incorporating various chains like Gnosis into MetaMask, you broaden your potential investment opportunities and decentralized application experiences, ensuring no opportunities are missed.

Speed & Cost-Effectiveness: Network congestion and high gas fees on established platforms like Ethereum can discourage many users. Gnosis Chain's architecture has the potential to provide relief through quicker transaction times and more affordable fees.

In summary, as the possibilities within the crypto sphere continue to evolve, tools like MetaMask grant users access to this expanding world. By adding chains like Gnosis, users can stay ahead in this decentralized revolution.

Conclusion

By bridging platforms like Gnosis Chain with accessible tools like MetaMask, individuals not only amplify their engagement with decentralized applications but also fortify their position in this expansive realm. The integration of Gnosis Chain to MetaMask epitomizes the evolution of the crypto landscape – a testament to its ever-growing diversity and potential. As we continue to delve deeper into the decentralized future, tools and integrations like these will undoubtedly play a pivotal role in shaping our digital experiences and opportunities. Whether you're seeking more efficient transactions, diverse dapp interactions, or simply a broader understanding of the crypto ecosystem, this guide's steps open doors to a new horizon. 

Tagi