Using Mobula to Fetch and Display Market Data For Assets

Mobula API is a powerful tool that allows developers to access curated datasets for various crypto assets, such as market data, wallet transactions, historical balances, and swap quotes.

Mobula API provides a unified and aggregated interface to query data from multiple blockchains and sources.

In this article, you will learn how to use Mobula API to fetch and display market data for any assets using React, a popular front-end library for building user interfaces.

Mobula API Overview

Mobula API is a blockchain data provider that offers developers a wide range of features and functionalities.

It provides curated datasets, market data with Octopus, wallet data, metadata with Metacore, and REST, GraphSQL & SQL interfaces to query them.

Mobula API supports several chains, including:

• Ethereum,
• Avalanche,
• Polygon,
• Fantom,
• Harmony,
• xDai,
• Cronos,
• DFK Subnet,
• SmartBCH,
• Celo,
• Klaytn,
• Aurora,
• HECO,
• Arbitrum,
• And more.

Developers can access vital data and perform key operations using Mobula API’s endpoints, designed to provide seamless integration and efficient access to blockchain features.

Retrieving Bitcoin Market Data

Key Requirements for API Calls:

• API Key:

  • Mandatory for production environments.
  • Obtainable from your Mobula Dashboard.
  • Not required for development mode.

• Method:

  • Use GET to retrieve data.

• Base URL:

  • https://api.mobula.io/api/1/

• Endpoint:

  • /market/query (for market data queries)

Query parameters:

Example Usage:

This example demonstrates how to retrieve market data for mid-cap cryptocurrencies with strong liquidity and promising potential.

Parameter Breakdown:

• filters:

  • liquidity:100:1000: Selects assets with liquidity between 100 and 1000 (inclusive). This ensures sufficient trading volume for easy entry and exit.
  • market_cap:10000:100000: Chooses assets with market capitalization between 10,000 and 100,000 (inclusive). This range targets mid-cap projects with established value and room for growth.

• sortBy=market_cap: Sorts the retrieved data by market capitalization in descending order. This prioritizes larger and potentially more stable assets.

• sortOrder=desc: Specifies descending order for sorting. This displays the largest cap currencies first, making it easier to identify prominent mid-cap contenders.

filters=liquidity:100:1000,market_cap:10000:100000
sortBy=market_cap
sortOrder=desc

Response:

{
    "name": "NFTDAO",
    "logo": "https://metacore.mobula.io/d0acfb425c161c8e3e5426c77ec36128ecfd688c2367a411cab9c440acb8b7a3.png",
    "symbol": "NAO",
    "liquidity": 769,
    "market_cap": 97230,
    "volume": 0,
    "price": 9.723276418969192e-10,
    "price_change_1h": 0,
    "price_change_24h": 0,
    "price_change_7d": 0,
    "contracts": [
      {
        "address": "0xd049206fb408a611e543791f2d8f102a8bc253dc",
        "blockchain": "Ethereum",
        "blockchainId": "1",
        "decimals": 18
      }
    ],
    "id": 4696,
    "rank": 4673
  }

Explanation of the response:

Exploring Block Data with Mobula Queries

To build a React project that interacts with the Mobula API and fetches data, follow these steps:

Step 1: Set Up Your React Project

First, ensure you have Node.js and npm installed on your machine. Then, create a new React project using Create React App:

npm create vite@latest mobula-market-app -- --template react
cd mobula-market-app

Step 2: Install Dependencies

Install Axios, a popular HTTP client for making API requests, to handle HTTP requests in your React project:

npm install axios

Step 3: Create a Component for API Interaction

Create a new file named MarketData.js inside the src directory to contain the logic for fetching market data:

// src/MarketData.js
import React, { useState, useEffect } from "react";
import axios from "axios";
import { Line } from "react-chartjs-2";

const MarketData = () => {
  const [marketData, setMarketData] = useState(null);
  const [selectedCrypto, setSelectedCrypto] = useState(null);
  const [filters, setFilters] = useState("");
  const [sortBy, setSortBy] = useState("");
  const [sortOrder, setSortOrder] = useState("");
  const [showModal, setShowModal] = useState(false);

  const fetchData = async () => {
    try {
      const response = await axios.get(
        `https://api.mobula.io/api/1/market/query?filters=${filters}&sortBy=${sortBy}&sortOrder=${sortOrder}`
      );
      setMarketData(response.data);
    } catch (error) {
      console.error("Error fetching data:", error);
    }
  };

  useEffect(() => {
    fetchData();
  }, [filters, sortBy, sortOrder]);

  const handleCardClick = (item) => {
    setSelectedCrypto(item);
    setShowModal(true); // Ensure showModal is set to true when a card is clicked
  };

  const handleCloseModal = () => {
    setShowModal(false);
  };

  const renderChart = () => {
    if (!selectedCrypto) return null;

    const data = {
      labels: ["1h", "24h", "7d"],
      datasets: [
        {
          label: "Price Change",
          data: [
            selectedCrypto.price_change_1h,
            selectedCrypto.price_change_24h,
            selectedCrypto.price_change_7d,
          ],
          fill: false,
          borderColor: "rgb(75, 192, 192)",
          tension: 0.1,
        },
      ],
    };

    return (
      <div
        style={{
          position: "fixed",
          top: "50%",
          left: "50%",
          transform: "translate(-50%, -50%)",
          backgroundColor: "#fff",
          padding: "20px",
          zIndex: 9999,
        }}
      >
        <button
          onClick={handleCloseModal}
          style={{ position: "absolute", top: "10px", right: "10px" }}
        >
          Close
        </button>
        <h3>Price Change Chart for {selectedCrypto.name}</h3>
        <Line data={data} />
      </div>
    );
  };

  const renderCryptoCards = (cryptoData) => {
    return cryptoData.map((item, index) => (
      <div
        key={item.id}
        style={{
          border: "1px solid #ccc",
          borderRadius: "5px",
          padding: "10px",
          marginBottom: "20px",
          width: "calc(33.33% - 20px)",
          marginRight: "20px",
          display: "inline-block",
        }}
      >
        <img
          src={item.logo}
          alt={`${item.name} logo`}
          style={{ width: "50px", height: "50px", marginRight: "10px" }}
        />
        <div>
          <h3>{item.name}</h3>
          <p>
            <strong>Symbol:</strong> {item.symbol}
          </p>
          <p>
            <strong>Liquidity:</strong> {item.liquidity}
          </p>
          <p>
            <strong>Market Cap:</strong> {item.market_cap}
          </p>
          <button onClick={() => handleCardClick(item)}>View Graph</button>
        </div>
      </div>
    ));
  };

  const renderBlockchainTabs = () => {
    if (!marketData) return null;

    const categorizedData = {};

    marketData.forEach((item) => {
      const blockchain = item.contracts[0].blockchain;
      if (!categorizedData[blockchain]) {
        categorizedData[blockchain] = [];
      }
      categorizedData[blockchain].push(item);
    });

    return Object.entries(categorizedData).map(([blockchain, data]) => (
      <div key={blockchain}>
        <h2>{blockchain}</h2>
        <div style={{ display: "flex", flexWrap: "wrap" }}>
          {renderCryptoCards(data)}
        </div>
      </div>
    ));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    fetchData();
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <label>
          Filters:
          <input
            type="text"
            value={filters}
            onChange={(e) => setFilters(e.target.value)}
          />
        </label>
        <label>
          Sort By:
          <select value={sortBy} onChange={(e) => setSortBy(e.target.value)}>
            <option value="">Select</option>
            <option value="liquidity">Liquidity</option>
            <option value="market_cap">Market Cap</option>
          </select>
        </label>
        <label>
          Sort Order:
          <select
            value={sortOrder}
            onChange={(e) => setSortOrder(e.target.value)}
          >
            <option value="">Select</option>
            <option value="asc">Ascending</option>
            <option value="desc">Descending</option>
          </select>
        </label>
        <button type="submit">Fetch Data</button>
      </form>
      {renderBlockchainTabs()}
      {showModal && renderChart()}
    </div>
  );
};

export default MarketData;

Step 4: Integrate the Component in Your App

Modify the App.js file to include the MarketData component:

// src/App.js
import React from 'react';
import './App.css';
import MarketData from './MarketData';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Mobula Market Data</h1>
      </header>
      <main>
        <MarketData />
      </main>
    </div>
  );
}

export default App;

Folder structure:

Step 5: Run Your React App

Start your React development server to see the app in action:

npm start