DEV Community: Bhaskar

What is the right way to do microservice ??

Bhaskar — Fri, 03 May 2024 19:23:26 +0000

I am exploring microservice-based architecture and have a doubt:

Should all my microservices have a common database?

While designing the application, I can take either of the following two approaches:

Approach 1: All microservices have a common database

Approach 2: All microservices have their database

With approach 1:

I can take advantage of the relational schema of the database.
However, since the database is common, when it comes to scalability, I am afraid it would act as a bottleneck.
Also there would be unnecessary code duplications and I don’t think this approach falls in line with the mantra of “Separation of Concern”, that is the main motivation behind choosing microservices in first place.

whereas with approach 2:

I think this approach would be more scalable and easier to maintain separation of concern.
However, with this approach I don’t get to enjoy the benefits of Relational Schema which would add to the code complexity.

Dear readers, I understand that the system requirements play a significant role in making any design decision, however I wonder, which of this two approaches would be more preferred in terms of scalability and be considered to be a better system design?

Biconomy - Win your customer's heart with Gasless Transactions

Bhaskar — Mon, 05 Dec 2022 03:32:41 +0000

Gas Price is a necessary evil in the world of Web3. Although it plays a vital role in terms of rewarding the “Miners” and making smart contract execution more secure, it creates an awful user experience. Even from a purely business perspective, it makes much more sense in having a fixed billing system for the users, while the execution costs are covered by the service provider. With the traditional approach, it’s impossible to build such a system without introducing a centralized entity into the system.

💡Biconomy - A ray of hope

Among other features, Biconomy makes it possible for developers to provide “Gasless Transactions” with the least amount of effort. This is a fully decentralized solution powered by smart contracts and no compromise is made in terms of security and stability.

Biconomy is based on the simple concept that the service provider pays the gas on behalf of the users. The users are only required to sign a particular message while interacting with the smart contract. This signature is then validated by Biconomy and if sufficient funds are available to sponsor the transaction, the gas is paid, and the transaction details are forwarded to the Dapp smart contract.

The important point to note is that there is nothing like a transaction without gas fees, however, Biconomy just enables us to maintain a special account where we deposit enough funds to pay for the gas price for all users. The gas price gets paid from this “special” account and it’s up to us or the project admin to ensure that sufficient funds are always available for sponsoring transactions. To make this even simpler, Biconomy provides an intuitive Dashboard for managing everything.

🎯Scope of this article

This article will act as a beginner-friendly tutorial for getting started with Biconomy. For the sake of simplicity, we will be focusing only on Gasless Transactions, specifically Gasless Transactions using EIP 2771-based approach. This article won’t discuss the architecture used by Biconomy nor the various other jaw-dropping features provided. To learn about them I recommend giving their official documentation a read.

In this tutorial we will:

Write a simple Smart Contract using EIP 2771 to make it compatible with Biconomy.
Deploy and test our smart contract on the Polygon Testnet (Mumbai).
Build a very simple front end using React to interact with our smart contract.

I follow a “code-first-explanation-next” approach. Please let me know if this is helpful or if I should try any different approach in the comment section.

⚠️Disclaimer

At the point of writing this article, Biconomy is transitioning to a newer SDK-based approach that brings yet more to the table, however here we will be using the older approach which is much simpler and sufficient for our needs. Documentation of the latest SDK can be found here. The new SDK is still WIP and not polished enough for developers to use. Once ready, I plan to cover it in my future articles.

🎒Pre-requisites

I know you all are excited to get started, but before we dive in, make sure you got the following pre-requisites sorted:

Remix IDE: For developing smart contracts
Metamask: Metamask is a popular non-custodial wallet used for interacting with the blockchain.
Connected with Testnet: Although you can use any network of your choice, I will be using Polygon’s Mumbai Testnet. If you want to follow along, make sure you have added Mumbai Testnet in Metamask following this article, and then fund your account using this faucet.

💻Writing the Smart Contract

Let’s get started with the crux of our project, i.e., the smart contract. In your Remix IDE create a new file named Greetings.sol and paste the following code.

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

contract Greetings {
    mapping (address => string) public greetings;

    function setGreeting(string memory newGreeting) public {
        greetings[msg.sender] = newGreeting;
    }
}

This is a very simple smart contract that stores a string each corresponding to each address that called the setGreetingfunction. The string to be stored is passed as an argument to the function. The important point to note here is msg.sender is used for finding the account address that invoked the setGreeting function.

Let’s try to understand the challenge of using the above contract with Biconomy. Refer to the following diagram to understand how Biconomy forwards transactions:

If you look closely, you will understand that a “TrustedForwarder” contract is used to invoke our smart contract. In this scenario, regardless of which account initiates the call, the msg.sender will always return the address of the caller, i.e., the TrustedForwarder’s address. To solve this issue, we have to make the following changes to our smart contract:

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

import "@openzeppelin/contracts/metatx/ERC2771Context.sol";

contract Greetings is ERC2771Context {

    constructor(address trustedForwarderAddress) ERC2771Context(trustedForwarderAddress) {}

    mapping (address => string) public greetings;

    function setGreeting(string memory newGreeting) public {
        greetings[_msgSender()] = newGreeting;
    }
}

Here we are doing the following:

We are using the ERC2771Context contract from OpenZeppelin contracts. It provides us with the _msgSender() function that will be very important to us.
The trustedForwarderAddress is the contract that we expect to call our smart contract. This forwarder is responsible for signature verification and protection against replay attacks. Before forwarding the transaction, the signer (our user’s address) is appended to the calldata and passed to the smart contact. The _msgSender() function returns this address.

You can find the list of Biconomy’s TrustedForwarder’s addresses here.
Inside our code we replace msg.sender with _msgSender() to reflect the correct user.

And with that our smart contract is ready for gasless transactions!!

Deployment and Biconomy Setup

Now that our smart contract is ready, it’s time to deploy our smart contract. Let’s deploy it to Mumbai Testnet (You can choose any other network of your choice).

In the deploy section of Remix, select Injected Provider - MetaMask as the Environment. Also, make sure your Metamask is connected with your desired chain.
For your chosen chain, find the respective TrustedForwarder address here. Since I am using Mumbai Testnet, mine is 0x69015912AA33720b842dCD6aC059Ed623F28d9f7. You must pass this address as a constructor argument while deploying the contract.
Finally, click on transact and confirm the MetaMask popup to deploy the smart contract. Now to set up Biconomy, sign in to your Biconomy Dashboard. Next, you have to register a new Dapp and mention the chain in which your smart contract is deployed. Once registered, click on the card corresponding to your Dapp and this will open the respective Dapp’s dashboard. Here you can see the various details associated with your Dapp. For a freshly created Dapp, the Gas Balance would be 0. Before you can let users enjoy gasless transactions, you have to load crypto (native token) into this Dapp to pay for the gas on behalf of the users. Click on the Fill Gas button, enter the amount of token you want to deposit, and click Fill Me Up. A MetaMask popup will ask you to send the required amount of tokens and confirm it to deposit the funds. It should be reflected on your Dapp promptly under GAS BALANCE.

A single Dapp can be associated with multiple smart contracts. Head to the Smart Contract section in your dashboard. Enter the Name, address, and ABI of your smart contract. All these details can be found in Remix. Make sure that Meta Transaction Type is set to Trusted Forwarder. Click on Add to add the smart contract to your Dapp.

Now the final step is to create API Endpoints for the function we want to invoke. Head to the Dapp APIs section.

Click on the white Add Button
Enter a suitable name for your API.
Choose the corresponding Smart Contract and Method to be invoked.
Click on the orange Add button to create a new API endpoint. Hurray!! Finally, we are ready for gasless transactions 👏👏👏.

🌐Building a basic website

Now that we are ready for gasless transactions, it’s time to build a simple website for interacting with our smart contract. In this tutorial, we are going to use React for building our demo website.

Use the following command to create a new react project:

npx create-react-app biconomy_tutorial

I have named my project biconomy_tutorial, however, feel free to choose any name of your liking. Once the project is initialized, move inside the newly created project folder. Next, we will be using the biconomy/mexa package for interacting with our smart contract. Use the following command for installing it:

npm install @biconomy/mexa

🚫Known Issue

In case you have used any other libraries like web3.js, you must be already familiar with the Webpack Error. For those who are new, whenever you try to import the biconomy/mexa package in your React code, you would get an error message similar to the following:

To resolve this we will need react-app-rewired. First, install the required dependencies using the following command:

npm install react-app-rewired crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url path-browserify browserify-zlib process buffer util

Now create a new file called config-overrides.js and paste in the following code:

const webpack = require('webpack');
module.exports = function override(config) {
  config.ignoreWarnings = [/Failed to parse source map/];
  const fallback = config.resolve.fallback || {};
  Object.assign(fallback, {
    crypto: require.resolve("crypto-browserify"),
    stream: require.resolve("stream-browserify"),
    assert: require.resolve("assert"),
    http: require.resolve("stream-http"),
    https: require.resolve("https-browserify"),
    os: require.resolve("os-browserify"),
    url: require.resolve("url"),
    path: require.resolve("path-browserify"),
    zlib: require.resolve("browserify-zlib"),
    process: require.resolve("process/browser"),
    buffer: require.resolve("buffer"),
    util: require.resolve("util"),
    fs: false,
    tls: false,
    net: false,
  });
  config.resolve.fallback = fallback;
  config.plugins = (config.plugins || []).concat([
    new webpack.ProvidePlugin({
      process: 'process/browser',
      Buffer: ['buffer', 'Buffer'],
    })
  ])
  return config;
}

Finally in the package.json file change the start task to react-app-wired start. Finally, close and restart the react app. Now this problem should be resolved.

Building the website

Open the App.js file in our react project in any code editor of your choice and make the following modifications:

import './App.css';
import { Biconomy } from "@biconomy/mexa";
import { ethers } from 'ethers';

function App() {

  const setMessage = async (message) => {
  }

  return (
    <div className="App">
      <header className="App-header">
        <button onClick={() => setMessage("Hello World")}>Set Message</button>
      </header>
    </div>
  );
}

export default App;

Here we added a simple button that calls the setMessage function. This function takes a string as input and passes it to the smart contract function. For simplicity, here we are hardcoding the string to be “Hello World”. To simplify our project even further, we will implement the complete logic of using Biconomy inside the setMessage function, however, an experienced React developer would prefer to use proper state management.

Before using Biconomy, we have to first initialize it. The code for initializing Biconomy is as follows:

const setMessage = async (message) => {
  const biconomy = new Biconomy(window.ethereum, {
    apiKey: "5hUl....1a87",
    debug: true,
    contractAddresses: [
      "0x160d3a01bf31cabbb6fcb60b5573bbad859e46c7"
    ]
  })
  await biconomy.init();
}

In the above code snippet note that:

As the Ethereum provider, we are using window.ethereum, i.e., the Ethereum object injected by the Metamask wallet. In case you want to use a different wallet, you have to modify it respectively. (Let me know in the comments if you want an example of using a different wallet).
Make sure you enter your own API Key for Biconomy that you will find in the Biconomy Dashboard. Needless to say, instead of hardcoding it, it’s recommended to use environment variables.
We also have to pass a list of contract addresses that we want to interact with. Ideally, this list will contain only those contract addresses that we want to interact with, and not all the contract addresses added to our dashboard.

The next step is to create a contract instance. The beauty of Biconomy is from here on, the process of interacting with the smart contract is similar to the traditional approach. I am using ethers, however, in the official documentation, you will also find how to use web3.js.

const setMessage = async(message) => {
  ...
    const contractInstance = new ethers.Contract(
        CONTRACT_ADDRESS,
        CONTRACT_ABI,
        biconomy.ethersProvider
    )

    const ethersProvider = new ethers.providers.Web3Provider(window.ethereum);
    const connectedAddress = (await ethersProvider.listAccounts())[0];

    const tx = await contractInstance.populateTransaction.setGreeting(message, {
        gasLimit: 1000000,
        gasPrice: 1000000000
    })
    const txDetails = {
        from: contractAddress,
        to: CONTRACT_ADDRESS,
        data: tx.data,
        signatureType: "PERSONAL_SIGN"
    }

    const provider = await biconomy.provider
    await provider.send("eth_sendTransaction", [txDetails])
}

Here we are performing the following tasks:

Creating an instance of the smart contract.
We get and store the current connected Metamask account in the connectedAddress variable.
Next, we define the transaction and store it in tx variable. Note that here we are not sending the transaction to the blockchain. Rather we are using the populateTransaction method because we want to generate the calldata that would be sent to the blockchain.
Any function invocation in the blockchain is also recorded in form of a transaction. Without getting into the complexities, you can assume that what differentiates a transfer of native tokens (also called transaction) and calling a function is that in the latter, a signed payload containing the function signature and the arguments are passed which is also termed as the calldata. We generate these transaction details and store them in the txDetails variable.
Next, we obtain the provider from the defined Biconomy object.
Finally, we send the transaction for verification to the blockchain. Here we use the eth_sendTransaction function. This is where the users receive a Metamask popup asking them to sign a specific payload. Behind the hood, this transaction payload is actually passed by the Biconomy Relay to the TrustedForwarder contract, and it also pays for the required gas.

With this, you are now ready to make Gasless transactions 😎. Go ahead and give your newly created website a try. I have a small task for you:

👉Try to make a gasless transaction. Verify whether the message was set properly and
whether the user had to pay any gas.

👉Let me know your findings in the comment section

In case you run into errors or feel I was not able to explain the topic properly, please let me know and I will try my best to clear every doubt.

👨‍💻About Me

Hi, I am Bhaskar Dutta, a Software Developer here at Xenabler where we try to bring technology and people together, one commit at a time.

If you have read so far, I feel we are going to be partners in an otherwise long journey of exploring the ever-changing world of technology. I would really want to connect with my readers and know them a bit more and if you want something similar, do send a connect request on LinkedIn.

Before saying goodbye, remember to take care of yourself and let the special people in your life know you Love Them. We will soon meet again in a different tutorial, till then Take Care of Yourself, let the special people in your life know you Love Them, and Keep Building.

Signing message using Metamask in Flutter

Bhaskar — Tue, 28 Jun 2022 23:29:16 +0000

When it comes to decentralized applications, signed messages provide a way to authenticate a user or specific data. It plays a crucial role when it comes to meta-transactions (off-chain transactions) and helps in preventing Replay Attacks.

What we are going to build?

This blog is a continuation of our Building with Flutter and Metamask series where we learn how to build an app that can directly interact with the blockchain using Metamask. In this blog, we will learn how we can use Metamask to sign a particular message. After this tutorial, there will have an additional “Sign Message” step in the login process.

The user signing the message represents the user agrees to the Terms and Conditions provided by our app. While building this feature, we will also learn about how these signatures are verified by the t contracts.

Why sign a message?

A signature is the most common form to denote authorization. For example, in the real world, signing any legal document implies that the signer agrees to all the terms and conditions mentioned in the signed document. In the blockchain ecosystem, providing a signature implies a similar meaning. The user is asked to sign a message, and this signature can be later verified by the smart contract for performing several actions. The Magic of Digital Signature on Ethereum provides an in-depth view of digital signature and signature verification.

EIP-191 and EIP-712 are two of the most popular proposed standardization for signing messages in the Ethereum blockchain ecosystem. EIP-712 provides a more human-readable format of data while signing it, whereas EIP-191 is much more simple in implementing but users are asked to sign a hash, that is difficult to comprehend. Although EIP-712 provides a far superior user experience, it is still in its early stages of development.

For this tutorial, we will keep it very simple and provide our users with a hash of a simple text message for signing. We can also provide the raw text for signing, but this would make the process of signature verification more difficult as we must pass the length of the message signed for verification. We use keccak256 for hashing the message before signing it. Using keccak256 for hashing the message ensures that the hash will always be 256-bits long, regardless of the actual length of the message. It makes the process of signature verification significantly easier as the length of the signed message will always be 256-bit long. This will be more clear as we proceed with our application development and testing.

Pre-requisites

Readers are highly encouraged to complete the first part of this series.
Have all the pre-requisites mentioned in the first part.
You can continue with your code, however, in this tutorial, we will start from login-with-metamask branch of the FlutterAppWithMetamask repo.
Remix-ide for writing and testing smart contracts.

How to use signatures

Before we proceed with our application development, it is important to understand how messages are signed and verified using a smart contract. Let’s assume we want to sign the message “Hello Developers!”, the steps followed for this are shown in the following diagram:

The steps followed here are as follows:

We start with the Raw data, in this example, it is the string “Hello Developers!”. In more advanced situations, the raw data can be something like serialized JSON.
We use the keccak256 hashing algorithm to generate the hash of the Raw message. It is important to note that the generated hash is in form of a hexadecimal number.
Before signing, the passed message is structured in the following format:
```
"\x19Ethereum Signed Message:\n" + length(message) + message
```
The prefix denotes that the signed message is intended to be used in the Ethereum blockchain network. Since we are already hashing the raw message before passing it for signing, we know that the size of the message will be 32 bytes.

Hence if we follow the above format of hashing the raw message before sending it to get signed, we can deterministically say that the prefix will always be “\xEthereum Signed Message:\n32”.
Finally, the formatted message is signed using the private key and a signature is produced in hexadecimal number format.

Using solidity, we can write a function that will take in the generated signature and the raw message to compute the account that signed the message. This forms a basis to verify whether the concerned account has provided the required signatures.

Signature verification using solidity

Although writing a smart contract for signature verification is a complex topic and demands a tutorial of its own, the following YouTube video proves to be very helpful:

https://www.youtube.com/watch?v=vYwYe-Gv_XI&t=647s

I will use a smart contract similar to the one shown in the tutorial for demonstrating the above-explained idea and testing the generated signature in a later phase of this blog. The smart contract I am using is:

//SPDX-License-Identifier: Unlicensed

pragma solidity ^0.8.4;

contract SignaturesInEth {

    function _split(bytes memory signature) internal pure returns(bytes32 r, bytes32 s, uint8 v) {
        require(signature.length == 65, "Signature must be 65 bytes long");
        assembly {
            r := mload(add(signature, 32))
            s := mload(add(signature, 64))
            v := byte(0, mload(add(signature, 96)))
        }
    }

    function getMessageHash(string memory message) public pure returns(bytes32) {
        return keccak256(abi.encodePacked(message));
    }

    function getEthSignedMessageHash(bytes32 messageHash) public pure returns(bytes32) {
        return keccak256(abi.encodePacked("\x19Ethereum Signed Message:\n32", messageHash));
    }

    function recover(bytes32 ethSignedMessageHash, bytes memory signature) public pure returns(address) {
        (bytes32 r, bytes32 s, uint8 v) = _split(signature);
        return ecrecover(ethSignedMessageHash, v, r, s);
    }

    function verifySignature(string memory message, bytes memory signature) public pure returns(address) {
        bytes32 messageHash = getMessageHash(message);
        bytes32 ethSignedMessageHash = getEthSignedMessageHash(messageHash);

        return recover(ethSignedMessageHash, signature);
    }

}

Sample verification

Let’s take a small tangent and verify the details shown in the above flow diagram. The details shown in the flow diagram are as follows:

Raw Message: ****Hello Developers!
Hash of Raw Message: 0x8a67fef1b0a61b7d4e8f0921c7c93372ab0e38f1317b2e9431cdca324c041792
Eth-Signed Message: 0x21d8c6f7bbaa104e61dfba68f68eabdfe47968b3f9b3fea6d9146214743cb01d
Signature: 0xa01b7764293ccab794ef74b7d3d21f88f62eeac7acc2959c422d254a3aadb60f08f7c4afd25b088af870772d20df8482d85f0b675441bbe61474d75c5c2663761b
Signer: ****0xcDb333BCE61C1E4a3Da9F4a2831e23b155f3949B

We can use the above smart contract to verify this details. Paste the contract into Remix and deploy it to the Javascript VM.

To start with, we can use the verify function passing in the Raw Message and Signature to obtain the signing account. We can then verify manually that the returned signer is the correct account signing the message.

Similarly, we can also use the other functions to calculate the other values specified in the flow diagram. We will again use this contract after we have completed our app but for now, let's back to our main objective of app development.

Developing the App

If you want to continue with your code, that is highly encouraged, however, if you want to have a common starting point with this tutorial, clone this repo and create a new branch, called signing-message from the login-with-metamask branch.

git clone https://github.com/BhaskarDutta2209/FlutterAppWithMetamask
cd FlutterAppWithMetamask
git checkout login-with-metamask
git checkout -b signing-message

Open the project folder in your code editor of choice and we are Ready To Go!

Installing dependencies

For this tutorial, we will be using keccak256 for hashing our message. For doing so, we will need the web3dart package. For this blog we will be limiting ourselves to only the crypto library, however, in future blogs, this same package will also be used for interacting with the smart contracts. To add the package, type the following command:

flutter pub add web3dart

Creating a function for signing message

Open the login_page.dart file inside the _LoginPageState class where we have previously defined _session and _uri variables, define a new variable called _signature for storing the signed data.

var _session, _uri, _signature;

Now inside the same class we define a new function called signMessageWithMetamask as shown below:

signMessageWithMetamask(BuildContext context, String message) async {}

Besides the BuildContext, this function takes in a String parameter that represents the message to be signed. In the later section of this blog, we will see that the message is nothing but the keccak256 hash of the data we want to be signed.

Writing the function body

The main content of the function body is as follows:

signMessageWithMetamask(BuildContext context, String message) async {
  if (connector.connected) {
    try {
      print("Message received");
      print(message);

      EthereumWalletConnectProvider provider =
          EthereumWalletConnectProvider(connector);
      launchUrlString(_uri, mode: LaunchMode.externalApplication);
      var signature = await provider.personalSign(
          message: message, address: _session.accounts[0], password: "");
      print(signature);
      setState(() {
        _signature = signature;
      });
    } catch (exp) {
      print("Error while signing transaction");
      print(exp);
    }
  }
}

Here, we are doing the following:

First, we check whether we are already connected with an external wallet using the connect variable defined in the previous tutorial.
If we are connected, we proceed with signing our message. We are using try-catch block for error handling and are printing the error to the console. In a production-ready app, we should properly notify the user about any caused error. The most common cause where an error can be generated is if the user rejects signing the message, after the metamask popup.
Before signing the message, we must define a provider. This step may seem familiar if you have used web3.js or ethers.js before. Since our targeted blockchain is Polygon, which is a fork of the Ethereum blockchain network, the provider type is EthereumWalletConnectProvider and we pass the connector as an argument.
We want the Metamask app to pop up for signing the message. To open the Metamask app, we use the launchUrlString function passing in the _uri. This is similar to how we opened Metamask during login.

Note: Here we are not using await keyword, because we want to open Metamask and continue with the rest of our function execution and not wait for Metamask to close. After a user signs the message, metamask will close automatically.
Now we use the personalSign method in the provider object defined for signing the message passed as a function parameter. This method also takes the signing account as a parameter. We use _seesion.accounts[0] to pass the current metamask account connected with the app.

Here we are using await keyword because we want the function execution to wait until the user signs the data.
Finally, we use setState method to update the value of _signature variable with the latest obtained signature. Using the setState function will also re-render the app screen and will display the updated information.

Adding the button

We want to add a simple Sign Message button before the Slide to login slider. For showing the button we will use a similar ternary-operator syntax used in our previous tutorial. We check whether the _signature variable is null as a null value would signify that the message is not signed. If the value of _signature is set, aka the message is signed by the user, we display the signature on the app screen.

Inside our login_page.dart file, we replace the SliderButton() section with the following code:

...
(_signature == null)
  ? Container(
      alignment: Alignment.center,
      child: ElevatedButton(
        onPressed: () =>
          signMessageWithMetamask(
            context,
            generateSessionMessage(
              _session.accounts[0])),
        child: const Text('Sign Message')),
    )
  : Column(
      crossAxisAlignment:
        CrossAxisAlignment.center,
      children: [
        Row(
          children: [
            Text(
              "Signature: ",
              style: GoogleFonts.merriweather(
                fontWeight: FontWeight.bold,
                fontSize: 16),
            ),
            Text(
              truncateString(
                _signature.toString(), 4, 2),
              style: GoogleFonts.inconsolata(
                fontSize: 16))
          ],
        ),
        const SizedBox(height: 20),
        SliderButton(
          action: () async {
            // TODO: Navigate to main page
          },
          label: const Text('Slide to login'),
          icon: const Icon(Icons.check),
        )
      ],
    )
...

Sorry for the mess that this Dart code is, but if you look closely into the code, it only does the following things:

If the value of _signature is null, we create an ElevatedButton with the text Sign Message. On clicking this button, the signMessageWithMetamask function is called passing in the current context and the message to be signed as a parameter. To obtain the message to be signed we are using the generateSessionMessage function that takes in the currently connected account as a parameter. We will define this function in the next section.
If the value of _signature is not null, we show the signature on the app screen. Since the signature is a very long string, we use a function called truncateString to truncate it in the AAAA…BB format. We will define this function also in the next section.

Creating the helper functions

Inside the utils folder, we create a new file named helperfunctions.dart. In this file, we will specify the two helper functions used above. We start with the truncateString function, which is the easier of the two to implement.

String truncateString(String text, int front, int end) {
  int size = front + end;

  if (text.length > size) {
    String finalString =
        "${text.substring(0, front)}...${text.substring(text.length - end)}";
    return finalString;
  }

  return text;
}

In this function:

front and end represent the number of characters to be displayed before and after the truncation symbol (…) respectively.
We check if it’s possible to truncate the string based on the passed parameters, i.e. the passed text has a length greater than front + end. If so, we use the substring method to truncate the string to our requirement.
Finally, we return the truncated string or the original string if truncating is not possible.

Now we define the generateSessionMessage function. Since in this function we will need to implement keccak256 hashing, we import the web3dart/crypto.dart package by adding the following line at the top of our script:

import 'package:web3dart/crypto.dart';

This will give us access to a function called keccak256Utf8 which uses the keccak256 hashing algorithm. This will return the data in form of an array of bytes. We will then use another function called bytesToHex to convert this array to hexadecimal string format. We prefix “0x” with the generated string to denote that the string is in hexadecimal format. For simplicity, we have initialized the raw message as a string containing the account address of the user. However, it is possible and encouraged to use a more complex data structure for the raw message e.g. serialized JSON. The complete function looks like this:

String generateSessionMessage(String accountAddress) {
  String message = 'Hello $accountAddress, welcome to our app. By signing this message you agree to learn and have fun with blockchain';
    print(message);

  var hash = keccakUtf8(message);
  final hashString = '0x${bytesToHex(hash).toString()}';

  return hashString;
}

Finally, we import our helper functions in our login_page.dart file using the following import statement:

import 'package:my_app/utils/helperfunctions.dart';

Running our app

Finally, we are ready to run our app 🤞🏾🤞🏾🤞🏾!

If everything was done correctly, on running the app, we will be presented with a flow similar to our previous tutorial. However, when we are connected with the correct network, we will be presented with an additional “Sign Message” button. On clicking on it, we are treated with a Metamask popup that looks something like the following:

Here you can notice one of the challenges of using the Metamask app, that is the message shown is not human readable. Due to some internal bug in the app, the message section is not able to show the hexadecimal hash properly.

Nevertheless, when we click on the Sign button, we are returned to our app screen. Now we can see the truncated version of the signature along with our old Slide to login slider.

You can get the complete signature from the console. In my case the details are as follows:

Account: 0x11Ea3D9B50116986C77E17Fa177D56fae0b73631
Signature: 0xd4e8b7997d5e244981965a5f301658f780242ff51226e0fc6af21564867a0d560292b1aa17e41ca836111b7413bbbd3a0a430c0715ae511dd206396c8bed7abe1b

Verifying the signature using a smart contract

Now we get back to our smart contract and try to verify this signature. Depending on the account you used, the message and the signature will be different. In my case:

Message: "Hello 0x11ea3d9b50116986c77e17fa177d56fae0b73631, welcome to our app. By signing this message you agree to learn and have fun with blockchain"

We call the verifySignature function with the above parameters to obtain the signing account.

We can cross-check the returned address with the address used for signing. This proves that by using the signature we can determine the account that provided the signature. Mission Accomplished 😎🎉!

Wrapping up

In this tutorial, we learned about signing messages using Ethereum wallets like Metamask. We also learned how we can use Metamask in a Flutter app for generating the signature of a String message. Finally, we verified our signature using a simple smart contract.

The code for this project is uploaded to Github here. The updated code for this tutorial will be present in the signing-message branch.

About me

I am working in the domain of blockchain technology for more than 2years now. I aspire to learn new technologies targeted at solving real-world problems and write tutorials with unique approaches. Kindly follow me to stay updated as I write new tutorials and show you support through reactions and comments.

I am also looking forward to writing sponsored articles and creating YouTube videos based on my articles. If you want to connect with me or provide your feedback, you can find me on LinkedIn, Twitter, or through my mail.

We will meet again with another new tutorial or blog, till then stay safe, spend time with your family and KEEP BUIDLING!

Building with Flutter and Metamask

Bhaskar — Sat, 04 Jun 2022 20:59:22 +0000

Building apps is one of the coolest things to be done as a software developer and tech enthusiast. Apps are not only more portable and user friendly, based on the requirements, but sometimes they are the only option for a particular application In this tutorial and the upcoming series, we will learn how to build a cool cross-platform mobile application using Flutter and Metamask.

The problem we are solving

To interact with the blockchain, the users must have an account (public and private key pair) on the blockchain that is used to sign the transactions. Sharing the private key with someone is equivalent to sharing access to the account. Because of this, users will be reluctant to provide their private key to the app since this would raise a lot of security concerns. The industry-trusted method is to use a “Non-custodial wallet” like Metamask.

Although there are numerous tutorials on how to use the browser extension of Metamask, using the mobile app version isn’t properly documented yet. In this tutorial series, we will be covering how to connect a Flutter App with Metamask for user login and in later articles, interacting with smart contracts will also be covered. We are using Flutter as our development framework of choice because we want to build a cross-platform application that is supported in both Android and IOS.

In this tutorial, we will be building an App that will be using Metamask for login. It will get the public key from Metamask. Metamask can also be used for signing messages and transactions but that will be covered in a different tutorial. The following GIF shows what we are going to build:

Pre-requisites

Flutter is installed in your system. You can follow the official guide of Flutter here.
Have an Android / Ios emulator or physical device connected that will be used for testing the application. I recommend using Android Emulator as there are some bugs while working with Ios.
Install and set up Metamask Mobile App in your Android emulator.

💡 It is recommended to use VS Code with Flutter extension.

Known challenges

While writing this article, there are some challenges with building and running the app on IoS.

IoS doesn’t support installing third-party applications from App Store for simulators. So we have to install Metamask directly from its Github repo.
If you are using a MacBook with Apple Silicon, there are some extra steps needed for setting up Metamask in a simulator. You can read about it here.
Deep Linking with Metamask is not working as expected. (For this tutorial it is recommended to use Android Emulator)

I will update this article if I find the solutions to the above problems. Till then your helpful comments are highly expected.

Project initiation

We start by running flutter doctor to make sure we have everything set up properly for our development journey. You should see similar to :

Now we start by creating a new flutter project. To do this, open the location where you want to store your project folder in your terminal and type the following command:

flutter create my_app

Here my_app is the name of the project we are going to build. This will create a folder with the same name where all our code will reside. You should see an output similar to:

Open this folder in a code editor of your choice. You can run your app by typing flutter run or using the Flutter Debugger if you are using VS Code.

Installing dependencies

For this project we will require the following dependencies:

url_launcher: This will be used for opening Metamask from our app using a URI.
walletconnect_dart: This will be used for generating a URI that will be used to launch Metamask.
google_fonts: Optional dependency for using Google Fonts in our app.
slider_button: Optional dependency for using a Slider Button for login purposes.

To install these dependencies, type in the following command

flutter pub add url_launcher walletconnect_dart google_fonts slider_button

Adding assets folder

We want to use static images in our app’s UI. For that, we have to create a folder that will contain our assets and tell flutter to use them as assets for our project.

Create a folder called assets inside the root my_app folder. The name of the root folder will be whatever name you used for creating the flutter project. Inside the assets folder, we will create an images folder for storing our image assets. Finally, inside the pubspec.yaml file we add this folder by adding the following lines in the flutter section:

flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
    - assets/images/

Understanding the flow

Finally, before we start coding our app, it is important to understand the user flow. The following diagram represents the flow a user will go through starting from when he opens our app:

Code Along

We will start from the main.dart inside the lib folder. The main.dart is the first file to be compiled and executed by Flutter. Clear all the contents of this file and paste in the following lines of code:

import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp();
  }
}

We start by creating a new Stateless Widget. This widget will act as the starting point of our project. Based on the flow diagram shown above, the first thing to do will be to create the Login Page. Although for this tutorial our app will have only one page, we should have a proper routing system so that we can easily keep on adding newer pages as we proceed with our project.

Creating routes

The way routing works in flutter is quite similar to how it works for web apps, i.e. using the /path format. In simple words, routes are nothing but a mapping of a path to its respective widget. An example of how routes work is:

return MaterialApp(
  initialRoute: "/login",
    routes: {
      "/login": (context) => const LoginPage(),
          "/home": (context) => const HomePage()
    },
);

Inside routes we define all the routes that will be used in our project and their respective widgets. In this example we are saying that the widget LoginPage will be rendered when the user is in the /login router and similarly when the user is in the /home route, the HomePage widget will be rendered. The initialRoute field tells the initial or starting route to be loaded. In this example, the first widget the user sees on opening the app will be the LoginPage widget.

Since there will be multiple routes present in a project which are used across multiple files, it is not wise to directly type the route. Rather, one should have constant variable names defined for the code to be more robust. For this create a new folder called utils inside the lib folder and inside the utils folder create a new file called routes.dart. This file will store all our routes. Inside this file define the routes like this:

class MyRoutes {
  static String loginRoute = '/login';
}

Now let’s get back to our main.dart file and make the following changes:

import 'package:flutter/material.dart';
import 'package:my_app/utils/routes.dart';

void main(List<String> args) {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: MyRoutes.loginRoute,
      routes: {
        MyRoutes.loginRoute: (context) => const LoginPage(),
      },
    );
  }
}

Here we are importing our newly created routes.dart file and using the variable name instead of directly typing the route. Since we don’t have the LoginPage widget yet, we will be getting an error message. So let’s create our login page.

Creating Login Page

Inside the lib folder, let’s create a new folder called pages that will have all our pages. This folder will have all our pages. Inside the pages folder, create a new file called login_page.dart. Inside this file paste in the following code:

import 'package:flutter/material.dart';

class LoginPage extends StatefulWidget {
  const LoginPage({Key? key}) : super(key: key);

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold();
  }
}

Here we are creating a new Stateful Widget called LoginPage. Now we can import this into our main.dart file by adding import 'package:my_app/pages/login_page.dart'; at the start of the file. The final main.dart file looks like this:

import 'package:flutter/material.dart';
import 'package:my_app/utils/routes.dart';
import 'package:my_app/pages/login_page.dart';

void main(List<String> args) {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: MyRoutes.loginRoute,
      routes: {
        MyRoutes.loginRoute: (context) => const LoginPage(),
      },
    );
  }
}

Designing the Login Page

Now it’s time to design our Login Page. For this tutorial, we will be designing a very simple Login Page. To start with, it only has an image along with Connect with Metamask button. When Metamask is connected, it will display the account address and the chain connected with it. If the chain is not the officially supported chain (Mumbai Testnet for our case), we display a warning asking the users to connect to the appropriate chain. Finally, if the user is connected with the connected network, we show the details along with a “Slide to login” slider. These three are shown in the following diagrams respectively:

Building the default Login Page

We start by editing the login_page.dart file. Make the following changes inside the _LoginPageState class:

class _LoginPageState extends State<LoginPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Login Page'),
      ),
      body: SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Image.asset(
              'assets/images/main_page_image.png',
              fit: BoxFit.fitHeight,
            ),
            ElevatedButton(
                onPressed: () => {}, child: const Text("Connect with Metamask"))
          ],
        ),
      ),
    );
  }
}

Here we are doing the following:

We start by returning a Scaffold. Scaffold in flutter is used to implement the basic material design layout. You can read more about it here.
Then we are defining an AppBar with the title “Login Page”. This will be the title to be displayed on top of our app.
We start the body of our app by defining a SingleChildScrollView. This is helpful when our App is opened on a phone with a relatively smaller display. It enables the users to scroll through our widget. Read more about it here.
Inside the SingleChildScrollView we define a Column to contain the various components of our page as its children.
The first child we define is an image. We want to render an image stored inside our assets folder. For this, we use Image.asset() and pass in the path to where the image is stored. Remember to use a path already added as a source of assets. Previously we added the assets/images/ as a source of assets. I am using this image that I downloaded into the images folder and named main_page_image.png.
Next, we create a button using the ElevatedButton class. It takes two arguments:
- onPressed: The function to be executed when the button is clicked. For now, this is blank.
- child: A child widget that will determine how our button will look. For now, it is a Text with the string “Connect with Metamask”.

If you run the app now, you should see something like:

Although pressing the button doesn’t do anything right now, we have our default look ready. It only gets more interesting from here 😎😎😎.

Understanding the dependencies

Next, we will be writing the logic behind the “Connect with Metamask” button. For these we will be using two important dependencies:

walletconnect_dart: This dependency will be used for connecting with Metamask. Practically it can be used with other wallets like Trust Wallet as well, but for this tutorial, we will focus only on Metamask.

To understand how this works, we must first understand how Wallet Connect works. Wallet Connect is a popularly used protocol for connecting web apps with mobile wallets (commonly by scanning a QR code). It generates a URI that is used by the mobile app for securely signing transactions over a remote connection. The way our app works is, that we directly open the URI in Metamask using our next dependency.

walletconnect_dart is a package for flutter written in dart programming language. We will use this dependency to generate our URI and connect with Metamask. This package also provides us with callback functions that can be used to listen to any changes done in Metamask, like changing the network connected with.
url_launcher: This dependency is used for launching URLs in android and ios. We will be using this dependency for launching the URI generated by walletconnect_dart in the Metamask app.

Using the dependencies in our code

We start by importing the dependencies in our login_page.dart file

import 'package:walletconnect_dart/walletconnect_dart.dart';
import 'package:url_launcher/url_launcher_string.dart';

Next, inside our _LoginPageState class we define a connector that will be used to connect with Metamask

var connector = WalletConnect(
  bridge: 'https://bridge.walletconnect.org',
  clientMeta: const PeerMeta(
    name: 'My App',
    description: 'An app for converting pictures to NFT',
    url: 'https://walletconnect.org',
    icons: [
      'https://files.gitbook.com/v0/b/gitbook-legacy-files/o/spaces%2F-LJJeCjcLrr53DcT1Ml7%2Favatar.png?alt=media'
    ]));

We are using the WalletConnect class to define our connector. It takes in the following arguments:

bridge: Link to the Wallet Connect bridge
clientMeta: This contains optional metadata about the client
- name: Name of the application
- description: A small description of the application
- url: Url of the website
- icon: The icon to be shown in the Metamask connection pop-up

We also define two variables called _session and _uri, which will be used to store the session and URI respectively when our widget state is updated.

We define a function called loginUsingMetamask to handle the login process as follows:

loginUsingMetamask(BuildContext context) async {
  if (!connector.connected) {
    try {
      var session = await connector.createSession(onDisplayUri: (uri) async {
        _uri = uri;
        await launchUrlString(uri, mode: LaunchMode.externalApplication);
       });
             print(session.accounts[0]);
             print(session.chainId);
       setState(() {
         _session = session;
       });
    } catch (exp) {
      print(exp);
    }
  }
}

Here we are doing the following:

First, we check if the connection is already established by checking the value of connector.connected variable. If the connection is not already established, we proceed with the code inside the if block.
We use try-catch block to catch any exception that may arise during establishing the connection, like the user clicking on cancel in the Metamask pop-up.
Inside the try block, we create a new session by using the connector.createSession() function. It takes in a function as an argument that is executed when the URI is generated. Inside this function, we use the launchUrlString() function to open the generated URI in an external app. We pass in the generated URI as a parameter and since it will be opening an external application, we set the mode as LaunchMode.externalApplication. Finally, since we want our code to wait until the connection is confirmed using Metamask, we use the await keyword with launchUrlString() function.
We can fetch the accounts connected by using session.accounts and the chain id by using session.chainId. For now, we print the selected account using session.accounts[0] and the chain Id to the console to check if our code is working properly.
Finally, we update the state of our app using setState and store the created session in the _session variable.
If any exception is generated in any of the above statements, the catch block will be executed. Right now we only print the generated exception, but in the latter stages of the project, we can use more robust exception handling.

Finally, we call the loginUsingMetamask function as the onPressed argument of our created button. The final code looks something like this:

import 'package:flutter/material.dart';
import 'package:walletconnect_dart/walletconnect_dart.dart';
import 'package:url_launcher/url_launcher_string.dart';

class LoginPage extends StatefulWidget {
  const LoginPage({Key? key}) : super(key: key);

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  var connector = WalletConnect(
      bridge: 'https://bridge.walletconnect.org',
      clientMeta: const PeerMeta(
          name: 'My App',
          description: 'An app for converting pictures to NFT',
          url: 'https://walletconnect.org',
          icons: [
            'https://files.gitbook.com/v0/b/gitbook-legacy-files/o/spaces%2F-LJJeCjcLrr53DcT1Ml7%2Favatar.png?alt=media'
          ]));

  var _session, _uri;

  loginUsingMetamask(BuildContext context) async {
    if (!connector.connected) {
      try {
        var session = await connector.createSession(onDisplayUri: (uri) async {
          _uri = uri;
          await launchUrlString(uri, mode: LaunchMode.externalApplication);
        });
        setState(() {
          _session = session;
        });
      } catch (exp) {
        print(exp);
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Login Page'),
      ),
      body: SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Image.asset(
              'assets/images/main_page_image.png',
              fit: BoxFit.fitHeight,
            ),
            ElevatedButton(
                onPressed: () => loginUsingMetamask(context),
                child: const Text("Connect with Metamask"))
          ],
        ),
      ),
    );
  }
}

Now, we run our app 🤞🏾. If everything is done as described, we will be greeted with a familiar Login Page. But when we click on the Connect with Metamask button, it will redirect to Metamask. Metamask will prompt you to connect your wallet. It will show the URL and icon specified in the clientMeta field.

When we click on the blue Connect button, we will be redirected back to our wallet. Right now we won’t see anything different, but if we check back the logs, you should see flutter printed the account address and the chain id.

Congratulations 🥳 🎉!! You have successfully connected with your Metamask wallet and it was that simple.

There is still one challenge left. Users may not connect with the blockchain your Smart Contracts are deployed to. So before we let users inside our platform, we should check if connected with the correct blockchain. Also, we should update if the user changes the connected network and also the selected account.

Subscribing to events

Using our connector variable we can subscribe to connect, session_update and disconnect event. Paste the following code inside the build function:

Widget build(BuildContext context) {
    connector.on(
        'connect',
        (session) => setState(
              () {
                _session = _session;
              },
            ));
    connector.on(
        'session_update',
        (payload) => setState(() {
              _session = payload;
                            print(payload.accounts[0]);
                            print(payload.chainId);
            }));
    connector.on(
        'disconnect',
        (payload) => setState(() {
              _session = null;
            }));

    ...
  }

Here we are subscribing to the different events. On a session_update we update the state of our app using setState and assign the updated payload inside the _session variable. We also print the new account address and the chain Id, so that we can check if our code is working properly from the terminal.

Perform a hot reload of your app and perform the same steps to connect Metamask with your app. Now you can change the network and the connected account from inside Metamask and observe the chain Id and account address change in your terminal/console.

Displaying the data on the screen

We have successfully connected Metamask with our app. Although the tutorial can end right here, I would prefer to display the details on the screen for users to verify and create a better login experience.

The first thing we want is when the user has connected with Metamask, we want to display the details instead of the button. For this we wrap our ElevatedButton in a ternary operator as follows:

(_session != null) ? Container() : ElevatedButton()

Here, if the _session variable is null, i.e. Metamask is not connected, it would render the ElevatedButton else the Container will be rendered.

We start with the following code inside our Container:

Container(
  padding: const EdgeInsets.fromLTRB(20, 0, 20, 0),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text(
        'Account',
        style: GoogleFonts.merriweather(
          fontWeight: FontWeight.bold, fontSize: 16),
      ),
      Text(
        '${_session.accounts[0]}',
        style: GoogleFonts.inconsolata(fontSize: 16),
      ),
    ]
  )
)

We start by adding small padding of 20px from left and right.
We want our cross-axis alignment to be from the start, so we define crossAxisAlignment as CrossAxisAlignment.start.
We want the first widget in our column to be a simple saying Account and below it shows the account address of the connected Metamask account. We use the Text widget for displaying the data and use GoogleFonts for styling. You can import Google fonts by writing
```
import 'package:google_fonts/google_fonts.dart';
```
on top of the file. We use the ${} notation to access the _session variable inside a pair of single-quote(’’).

The next thing we want to show is the name of the chain users are connected to. We want to display it in the following way:

Since most of the users may not be familiar with the chain Ids of the different blockchains, it’s better to show them the name of the blockchain, rather than just the chain Id. To do this, we can write a simple function that takes in the chainId as input and returns the name of the chain. Inside the _LoginPageState define a function called getNetworkName as follows:

getNetworkName(chainId) {
  switch (chainId) {
    case 1:
      return 'Ethereum Mainnet';
    case 3:
      return 'Ropsten Testnet';
    case 4:
      return 'Rinkeby Testnet';
    case 5:
      return 'Goreli Testnet';
    case 42:
      return 'Kovan Testnet';
    case 137:
      return 'Polygon Mainnet';
    case 80001:
      return 'Mumbai Testnet';
    default:
      return 'Unknown Chain';
  }
}

The function uses switch-case statements to return the name of the chain based on chainId.

Inside our Container, after the two Text widgets, we add a SizedBox with height of 20px to add some gap. Next we define a Row with two children widgets, the text “Chain” and the name of the chain obtained by calling the getNetworkName function. We do it like this:

Row(
  children: [
    Text(
      'Chain: ',
      style: GoogleFonts.merriweather(
        fontWeight: FontWeight.bold, fontSize: 16),
      ),
      Text(
        getNetworkName(_session.chainId),
        style: GoogleFonts.inconsolata(fontSize: 16),
      )
  ],
),

Next, we want to check if the user is connected to the correct network. We check with _session.chainId matches the chain id of our supported blockchain (in this case 80001 for Mumbai Testnet). If it’s not equal to the required chain id, we create a Row to display our icon and the helper text, otherwise, we create a Container that will be used for our SliderButton.

(_session.chainId != 80001)
  ? Row(
      children: const [
        Icon(Icons.warning,
          color: Colors.redAccent, size: 15),
        Text('Network not supported. Switch to '),
        Text(
          'Mumbai Testnet',
          style:
            TextStyle(fontWeight: FontWeight.bold),
        )
      ],
    )
  : Container()

Next, we add out SliderButton. We import our dependency with the following statement at the start of our file:

import 'package:slider_button/slider_button.dart';

Finally inside our Container, we define our SliderButton like this:

Container(
  alignment: Alignment.center,
  child: SliderButton(
    action: () async {
      // TODO: Navigate to main page
    },
    label: const Text('Slide to login'),
    icon: const Icon(Icons.check),
  ),
)

For now, the SliderButton doesn’t do anything, but in further tutorials, it will navigate us to the main page of our application.

Now your app is fully ready to be run. If everything was done as described in this tutorial, your app should be now ready. You should be able to Login In to your app using Metamask. Although the app doesn’t login into any page, still you can connect with Metamask using your mobile app. How awesome is that ?!!

Wrapping Up

Wow!! That was a log tutorial. In this tutorial, we covered how to build a very basic flutter app from scratch. We learned how to interact with Metamask from our app. We explored two important dependencies, walletconnect_dart and url_launcher, and learned how they work and how they can be used to connect an app with a wallet like Metmask. We also learned how to update our app when the user updates the Metamask session. And finally, I hope we all had a great time learning something new and interesting.

The code for this project is uploaded to Github here.

I plan to extend this application into an app that does more cool things and dive deeper into the world of Defi, Blockchain, and beyond. If you liked this tutorial, don’t forget to show your love and share it on your socials or help me improve by posting your feedback in the Discussion. If you want to connect with me or recommend any topic, you can find me on LinkedIn, Twitter, or through my mail.

We will meet again with another new tutorial or blog, till then stay safe, spend time with your family and KEEP BUIDLING!