React MiniDapp

In this tutorial, we will build a MiniDapp using React.

Pre-requisites

• Node.js https://nodejs.org/en/download/
• A Code Editor, we recommend Visual Studio code https://code.visualstudio.com/

Before we start, make sure you have a running Minima Node running. You can start your own single testnet node by following the instructions here.

Getting Started

To get started, we will use the create-minima-app CLI to create a new project.

npx @minima-global/create-minima-app init

To streamline development you can enable RPC on you minima node and the cli will configure your new project automatically.

To enable RPC on your node, run the following command in the Minima Terminal:

rpc enable:true

you can also enable RPC by passing the -rpcenable flag when starting your node.

Balance Tutorial

Let's dive into a short tutorial that will show you how to show the balance of your wallet in the app.

Open /src/routes/index.tsx, this is the index file for the / route.

We can start by cleaning up the file and remove all the code, replace it with the following:

import { createFileRoute } from "@tanstack/react-router";
 
export const Route = createFileRoute("/")({
  component: Index,
});
 
function Index() {
  return <div>Home</div>;
}

The first step is to create a new component folder inside the src folder, lets call it components.

Inside the components folder, create a new file called balance.tsx.

export function Balance() {
  return <div>Balance Tutorial</div>;
}

Now let's import this component into our index.tsx.

We need to add import Balance from '../components/balance'; and <Balance /> in the return, feel free to add any html you want alongside the Balance component.

import { createFileRoute } from "@tanstack/react-router";
import { Balance } from "../components/balance";
 
export const Route = createFileRoute("/")({
  component: Index,
})
 
function Index() {
  return <Balance />;
}

You should now see Balance Tutorial printed in the browser window.

Now let's go back to the src/compontents/balace.tsx and add the following inside our function:

import { useCallback } from "react"; 
import { MDS } from "@minima-global/mds"; 
 
export function Balance() {
  const getBalance = useCallback(async() => { 
    const balance = await MDS.cmd.balance(); 
      console.log(balance.response); 
  }, []); 
 
  return <div>Balance Tutorial</div>;
}

We can imort MDS from @minima-global/mds this adds a typesafe version of MDS to our project.

useCallback ensures the function is not re-run unless one of the dependencies change, you can read more about it in the React documentation: https://react.dev/reference/react/useCallback

To run our function we need to add a useEffect, this is a function that is called when the component is rendered to the screen.

import { useCallback, useEffect } from "react"; 
import { MDS } from "@minima-global/mds";
 
export function Balance() {
  const getBalance = useCallback(async() => {
    const balance = await MDS.cmd.balance();
      console.log(balance.response);
  }, []);
 
  useEffect(() => {    
    getBalance(); 
  }, [getBalance]); 
 
  return <div>Balance Tutorial</div>;
}

Now go to the browser and open the developer tools, open the Console tab and reload the page to refresh the logs. You should see an array being printed to the logs.

[
  {
    "coins": "1",
    "confirmed": "100",
    "sendable": "100",
    "token": "Minima",
    "tokenid": "0x00",
    "total": "1000000000",
    "unconfirmed": "0"
  }
]

Now we need to update our component so that we can store the balance for it to show up on the screen, we can use useState for this.

import { useCallback, useEffect, useState } from "react"; 
import { MDS } from "@minima-global/mds";
 
export function Balance() {
  const [balance, setBalance] = useState<string | undefined>(""); 
 
  const getBalance = useCallback(async() => {
    const balance = await MDS.cmd.balance();
      console.log(balance.response);
  }, []);
 
  useEffect(() => {
    getBalance();
  }, [getBalance]);
 
  return <div>Balance Tutorial</div>;
}

useState allows us to create a value that will cause React to re-render when the value changes.
We can use setBalance in this case to change the value of balance.

Now let's remove the console.log and use the setter that we have just created

import { useCallback, useEffect, useState } from "react";
import { MDS } from "@minima-global/mds";
 
 
export function Balance() {
  const [balance, setBalance] = useState<string | undefined>("");
 
   const getBalance = useCallback(async () => {
     const balance = await MDS.cmd.balance();
     if (balance.response) { 
       const minimaToken = balance.response.find((token) => token.token === "Minima"); 
         setBalance(minimaToken?.confirmed); 
     }
   }, []);
 
  useEffect(() => {
    getBalance();
  }, [getBalance]);
 
  return <div>Balance Tutorial</div>;
}

Now we can use the balance state to print the value to the screen:

import { useCallback, useEffect, useState } from "react";
import { MDS } from "@minima-global/mds";
 
export function Balance() {
  const [balance, setBalance] = useState<string | undefined>("");
 
  const getBalance = useCallback(async () => {
    const balance = await MDS.cmd.balance();
    if (balance.response) {
      const minimaToken = balance.response.find((token) => token.token === "Minima");
      setBalance(minimaToken?.confirmed);
    }
  }, []);
 
  useEffect(() => {
    getBalance();
  }, [getBalance]);
 
  return (
    <div> // [!code highlight]
      Balance Tutorial <br /> Your confirmed balance is: {balance} // [!code highlight]
    </div> 
  );
}