Welcome to a comprehensive guide on "Building a Decentralized Messaging Application with Next.js, TypeScript, and Solidity". In this tutorial, we'll construct a decentralized messaging application that harnesses the power of blockchain technology.

You'll gain a clear understanding of the following:

By the end of this guide, you'll have a functioning decentralized platform where users can send and receive messages, with all transactions managed and secured by Rootstock | Ethereum smart contracts.

Prerequisites

You will need the following tools installed to build along with me:

Steps to add Rootstock Testnet Details in Metamask

  1. Open the MetaMask Chrome extension

  2. In the network options, choose custom RPC

  3. Enter RSK Testnet as the Network Name

  4. Enter https://public-node.testnet.rsk.co as the RPC URL

  5. Enter RBTC as SymbolPut and Save

  6. Copy the account address

  7. Get the Faucet (tRBTC) from: https://faucet.testnet.rsk.co/

With that said, let’s jump into the tutorial and set up our project.

Setup for Smart Contract Development

Next, we'll develop the smart contract for our platform:

  1. Create a contracts folder at the project root.
  2. Inside contracts, create a Message.sol file and add the contract code below.

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

contract MessagingApp {
    struct Message {
        address sender;
        address recipient;
        string content;
        uint256 timestamp;
    }
    Message[] public messages;

    event MessageSent(address indexed sender, address indexed recipient, string content, uint256 timestamp);

    function sendMessage(address _recipient, string calldata _content) external {
        require(_recipient != address(0), "Recipient address cannot be zero address");
        require(bytes(_content).length > 0, "Message content cannot be empty");

        Message memory newMessage = Message({
            sender: msg.sender,
            recipient: _recipient,
            content: _content,
            timestamp: block.timestamp
        });

        messages.push(newMessage);
        emit MessageSent(msg.sender, _recipient, _content, block.timestamp);
    }

    function getMessages() external view returns (Message[] memory) {
        return messages;
    }

    function getMessagesByRecipient(address _recipient) external view returns (Message[] memory) {
        uint256 messageCount = 0;
        for (uint256 i = 0; i < messages.length; i++) {
            if (messages[i].recipient == _recipient) {
                messageCount++;
            }
        }

        Message[] memory recipientMessages = new Message[](messageCount);
        uint256 j = 0;
        for (uint256 i = 0; i < messages.length; i++) {
            if (messages[i].recipient == _recipient) {
                recipientMessages[j] = messages[i];
                j++;
            }
        }

        return recipientMessages;
    }
}

The provided Solidity smart contract facilitates a decentralized messaging application, enabling users to send and receive messages securely on the blockchain.

Contract Deployment and Compilation

Now, let's deploy our smart contract and populate it with some dummy data:

  1. Create a scripts folder at the project root.
  2. Inside scripts, create a deploy.js and a seed.js file and add the following codes.

Deploy Script

import { ethers } from "hardhat";

async function main() {
  const MessagingApp = await ethers.deployContract("MessagingApp");

  await MessagingApp.waitForDeployment();

  console.log(`MessagingApp deployed to: ${MessagingApp.target}`);
}

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

Update the Hardhat Config File with the Below Code

import { HardhatUserConfig } from "hardhat/config";
import "@nomicfoundation/hardhat-toolbox";
require("dotenv").config();
const { PRIVATE_KEY } = process.env;
const config: HardhatUserConfig = {
  defaultNetwork: "localhost",
  networks: {
    localhost: {
      url: " http://127.0.0.1:8545/",
    },
    rootstock_testnet: {
      url: "https://public-node.testnet.rsk.co",
      accounts: [PRIVATE_KEY],
      chainId: 31,
    },
  },
  etherscan: {
    customChains: [
      {
        network: "rootstock_testnet",
        chainId: 31,
        urls: {
          apiURL: "https://api-rsk-testnet.explorer.rootstock.io/api/",
          browserURL: "https://explorer.testnet.rootstock.io/",
        },
      },
    ],
  },
  solidity: "0.8.20",
};

export default config;

If you did that correctly, you should see a similar output like the one below:

https://explorer.testnet.rootstock.io/address/0xbfff78bb02925e4d8671d0d90b2a6330fcaedd87?embedable=true

At this point, we can start the integration of our smart contract to our front end.

git clone https://github.com/Kali-Decoder/Rootstock_Dapp
cd next
npm install

Finally, run npm run dev to start the project.

You will see the starting page click on meta mask to connect your account to this website and move to the Rootstock chain that is 31 (Chain ID)

As you can see in the UI, we are connected to the Rootstock Chain with an account address ending in 891. You can now send a message to the Rootstock Community by typing in the input box and clicking on "Send."

Metamask will then pop up, prompting you to sign the transaction and pay the gas fees.

Package.json
{
  "name": "next",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "biome check .",
    "preview": "vite preview"
  },
  "dependencies": {
    "@tanstack/react-query": "5.0.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "viem": "latest",
    "wagmi": "latest"
  },
  "devDependencies": {
    "@biomejs/biome": "^1.1.2",
    "@types/react": "^18.2.23",
    "@types/react-dom": "^18.2.8",
    "@vitejs/plugin-react": "^4.1.0",
    "@wagmi/cli": "latest",
    "autoprefixer": "^10.4.19",
    "buffer": "^6.0.3",
    "postcss": "^8.4.38",
    "tailwindcss": "^3.4.3",
    "typescript": "^5.2.2",
    "vite": "^4.4.9"
  }
}

Here’s an overview of the libraries we are using and their purposes:

Dependencies

  const account = useAccount();
  const { connectors, connect } = useConnect();
  const { disconnect } = useDisconnect();
  const [previousMessages,setPreviousMessages] = useState([]);
  const makeAnMessage = async (msg: string) => {
    let res = await writeContract({
      abi,
      address: "0xbfff78bb02925e4d8671d0d90b2a6330fcaedd87",
      functionName: "sendMessage",
      args: [
        "0x44c71DA900A47Fd1088c40a4a141f41d1f2b683D",
        msg,
      ],
    });

    console.log(res, "res");
  };

  const getMessages = async () => {
    let data = await readContract({
      abi: abi,
      address: "0xbfff78bb02925e4d8671d0d90b2a6330fcaedd87",
      functionName: "getMessagesByRecipient",
      args: ["0x44c71DA900A47Fd1088c40a4a141f41d1f2b683D"],
      chainId: rootstockTestnet.id
    });
    
    setPreviousMessages(data);
    console.log("data", data);
  };

  useEffect(() => {
    (async () => {
      await getMessages();
    })();
  }, []);

makeAnMessage Function

This function sends a message to a smart contract on the blockchain.

  1. async (msg: string): This is an asynchronous function that takes a message string as an argument.
  2. writeContract({...}): This function call interacts with a smart contract to execute the sendMessage function.
    • abi: The ABI (Application Binary Interface) of the smart contract, which defines its functions and their parameters.
    • address: The address of the smart contract on the blockchain.
    • functionName: The name of the function to call on the smart contract, which is sendMessage in this case.
    • args: The arguments to pass to the sendMessage function. Here, it includes the recipient's address and the message "Rajasthan Royals Won the Match"

getMessages Function

This function retrieves messages for a specific recipient from the smart contract.

  1. async (): This is an asynchronous function that doesn’t take any arguments.
  2. readContract({...}): This function call interacts with a smart contract to execute the getMessagesByRecipient function.
    • abi: The ABI of the smart contract.
    • address: The address of the smart contract on the blockchain.
    • functionName: The name of the function to call on the smart contract, which is getMessagesByRecipient in this case.
    • args: The arguments to pass to the getMessagesByRecipient function. Here, it includes the recipient's address.
    • chainId: The ID of the blockchain network (Rootstock Testnet in this case) where the contract is deployed.

Conclusion

In this tutorial, we have successfully built a decentralized messaging application using Next.js, TypeScript, and Solidity. We've set up our development environment,deployed our smart contract to the Rootstock network.

We've created dynamic interfaces, developed Rootstock smart contracts, and managed shared data with Context. By integrating the smart contract with the front end, we've enabled users to send and receive messages securely, with all transactions managed and recorded by Rootstock smart contracts.

Now, you're equipped with the skills to build your own decentralized messaging application. We've also provided you with a live demo and the finished project in our git repo for reference.

Happy coding!