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. Mobula API also offers easy-to-integrate tools to fetch market data, wallet transactions, holdings, etc. 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: Parameter Type Description Available Values filters string A comma-separated list of filters to apply to the data. liquidity, market_cap, volume, price, price_change_24h, price_change_1h, price_change_7d sortBy string A comma-separated list of fields to sort the data by. liquidity, market_cap, volume, price, price_change_24h, price_change_1h, price_change_7d sortOrder string The order in which to sort the data. asc (ascending), desc (descending) Example Usage: This example demonstrates how to retrieve market data for with and . mid-cap cryptocurrencies strong liquidity promising potential Parameter Breakdown: : filters : Selects assets with (inclusive). This ensures sufficient trading volume for easy entry and exit. liquidity:100:1000 liquidity between 100 and 1000 : Chooses assets with (inclusive). This range targets mid-cap projects with established value and room for growth. market_cap:10000:100000 market capitalization between 10,000 and 100,000 : Sorts the retrieved data by . This prioritizes larger and potentially more stable assets. sortBy=market_cap market capitalization in descending order : Specifies . This displays the largest cap currencies first, making it easier to identify prominent mid-cap contenders. sortOrder=desc descending order for sorting 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: Field Description Value name Name of the cryptocurrency NFTDAO logo URL of the cryptocurrency’s logo 1 symbol Symbol of the cryptocurrency NAO liquidity Liquidity of the cryptocurrency 769 market_cap Market capitalization of the cryptocurrency 97230 volume Volume of the cryptocurrency 0 price Price of the cryptocurrency 9.723276418969192e-10 price_change_1h Percentage change in price over the last hour 0 price_change_24h Percentage change in price over the last 24 hours 0 price_change_7d Percentage change in price over the last 7 days 0 contracts List of contracts associated with the cryptocurrency [{“address”: “0xd049206fb408a611e543791f2d8f102a8bc253dc”, “blockchain”: “Ethereum”, “blockchainId”: “1”, “decimals”: 18}] id Unique identifier for the cryptocurrency 4696 rank Rank of the cryptocurrency based on market capitalization 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 inside the directory to contain the logic for fetching market data: MarketData.js src // 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 file to include the component: App.js MarketData // 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

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Using Mobula to Fetch and Display Market Data For Assets

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Standing on the Shoulders of Giants: Conversations with the OGs of Technical Writing

$1B Capitalization: Meme Token Launch Strategy Under the Microscope

$1M Hackathon Prizes Announced By MultiversX to Expand the Blockchain Ecosystem

0 to $2000 MRR in One Month - Lessons Learned

07/03/2018: Biggest Stories in the Cryptosphere

Standing on the Shoulders of Giants: Conversations with the OGs of Technical Writing

$1B Capitalization: Meme Token Launch Strategy Under the Microscope

$1M Hackathon Prizes Announced By MultiversX to Expand the Blockchain Ecosystem

0 to $2000 MRR in One Month - Lessons Learned

07/03/2018: Biggest Stories in the Cryptosphere

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps