Introduction

We all want to build amazing dapps easily. We know it's tough and not very user-friendly for developers to go with RPC approach. That's why the community has made open-source libraries like ethers, web3js, and Viem to tackle this issue. These tools make it much easier to work with, make public calls, interact with smart contracts and do things like encoding and decoding. It can be used with vanilla or any JS framework. In this post we are going to see how we can integrate Viem specifically with Metamask SDK.

What is Viem

Viem serves as a toolkit that empowers developers to craft applications and tools tailored for Ethereum, a widely used blockchain platform. It simplifies the process by providing pre-made building blocks for various tasks, such as handling Ethereum-related data, smart contracts, and diverse wallet types. Viem places emphasis on efficiency and compactness, while seamlessly integrating with TypeScript, a programming language.

Viem significantly enhances the user experience for developers. To delve deeper into its capabilities, visit https://viem.sh/docs/getting-started.html and explore all the possibilities it offers.

How to use Metamask with Viem

Step 1: Connect with Metamask

Time to put together a basic interface that leverages Metamask for user connections. First we've got the provider from Metamask, then we'll pass it to Viem and preferably save it in the app state so it can be reused before the user closes the app . Check out the code snippet below.

<button onClick={() => connect()}>Connect Wallet</button>

Now, we'll set up a simple button to 'Connect Wallet'.

Here's the magic touch, by incorporating the code snippet below, we can make the Metamask popup, giving users the ability to establish a connection effortlessly from Metamask Extension or Metamask Mobile.

import { MetaMaskSDK } from "@metamask/sdk";

const MMSDK = new MetaMaskSDK({ dappMetadata: "" });

const ethereum = MMSDK.getProvider();

await ethereum.request({ method: "eth_requestAccounts", params: [] });

Step 2: Create Viem Client

We instantiate the Viem client with the provider from Metamask and the chain name.

import { createWalletClient, custom } from "viem";

import { mainnet } from "viem/chains";

const client = createWalletClient({

chain: mainnet,

transport: custom(ethereum), // add here

});

Step 3: First action with Viem

Let’s make the user sign a message with Viem. You can also notice how human friendly it is to read the following snippet of code and realize immediately what it does.

const [address] = await client.getAddresses();

if (address) {

const signature = await client.signMessage({

account: address,

message: "hello world",

});

console.log("Signature:", signature)

}

If this popup appears when the user clicks the button, it indicates it is successfully integrated.

Conclusion

And that's it! You've just acquired the knowledge of connecting with the Metamask SDK and seamlessly integrating it with Viem, enabling users to sign messages. Now you can move forward by integrating in your project or start new projects with an enhanced development experience. This opens doors to dapp development with type-safe, and well documented libraries. As a result, you'll turbocharge your app-building process, delivering quicker and more robust results.