Building a Crypto Portfolio Tracker Using React and Mobula API

This tutorial guides you through creating a simple cryptocurrency portfolio tracker using React and the Mobula API. We'll start by setting up a React application, connect to the Mobula API to fetch portfolio data, and then display this data in a styled format. This guide is suitable for those with basic knowledge of React and web development.

Before you start, ensure that you have registered for a free Mobula API key.

Prerequisites

• Basic knowledge of React and web development.
• Generate a free API key.

Setting Up Your React App

1. Create a React Application:
   Initialize a new React application using create-react-app.

   npx create-react-app my-portfolio-app
   

2. Start the Project:
   Navigate to the project directory and start the application.

   cd my-portfolio-app
   npm start
   

3. Install Axios:
   Axios is used for making HTTP requests.

   npm install axios
   

Building the App Component

1. Import Necessary Modules:
   At the beginning of your App.js, import React hooks and Axios:

   import axios from "axios";
   import React, { useEffect, useState } from "react";
   

2. Initialize State with useState:
   Use useState to initialize a state variable (portfolio) to store the assets data.

   const [portfolio, setPortfolio] = useState([]);
   

3. Fetch Portfolio Data with useEffect and Axios:
   Use useEffect to fetch data from the Mobula API when the component mounts. useEffect is also set up to refetch data every 5 seconds.

   useEffect(() => {
     async function fetchPortfolio() {
       const wallet = "0x77A89C51f106D6cD547542a3A83FE73cB4459135";
       const response = await axios.get(
         `https://api.mobula.io/api/1/wallet/portfolio?wallet=${wallet}`,
         {
           headers: { Authorization: "b303c1d0-0c44-4332-9179-791dd08b5275" },
         }
       );
       setPortfolio(response.data.data.assets);
     }
   
     fetchPortfolio();
     const intervalId = setInterval(fetchPortfolio, 5000);
     return () => clearInterval(intervalId);
   }, []);
   

Explanation:

• fetchPortfolio is an asynchronous function that uses Axios to make a GET request to the Mobula API.
• The setInterval function is used to refetch data every 5 seconds.
• The cleanup function in useEffect clears the interval when the component unmounts.

Rendering the Portfolio Data

1. Map over the portfolio array to render each asset. Only assets with a non-zero USD value are displayed.

   return (
     <div className="App">
       <h1>Mobula Cryptocurrency Portfolio Tracker App</h1>
       <ul>
         {portfolio.map((item) => {
           const usdValue = item.estimated_balance * item.price;
           return usdValue > 0 ? (
             <li key={item.asset.id}>
               {item.asset.name}: Value in USD - {usdValue.toFixed(2)}
             </li>
           ) : null;
         })}
       </ul>
     </div>
   );
   

Explanation:

• Each asset's USD value is calculated by multiplying estimated_balance by price.
• .toFixed(2) is used to format the value to two decimal places.
• Assets with a 0 USD value are not displayed.

Styling the Portfolio Tracker

To enhance the visual appeal of your portfolio tracker, add the following CSS styles in your App.css file:

.App {
  text-align: center;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin: 10px 0;
  padding: 10px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 4px;
}

h1 {
  color: #333;
}

Explanation:

• .App centers the text inside the main div.
• ul and li styles remove the default list styling and add spacing, background color, and border to each list item for better readability.
• h1 styles the main heading.

Conclusion

By following these steps, you'll create a React application that dynamically fetches and updates cryptocurrency portfolio data, displaying each asset's value in USD. This application demonstrates data fetching, state management, conditional rendering, and basic styling in React.

Note on Security: The API key and wallet address are embedded in the front-end code, which is not recommended for production environments. Consider handling API requests on a backend server or using environment variables for sensitive data.