Render a Data Table from Contract VIEW Methods

Iterate over contract addresses and fetch their data to render a data table. Learn this useful React hook pattern to implement this in your own dApp.

Getting Started

Follow the Project Setup instructions to start the project in your local machine and try the recipes yourself. You can also clone or navigate the repo to get just what you need.

Fetching the latest market ids

For Prompt Wars, this table is rendered in the /previous-rounds URL. It will load this page component:

Let's dive into pulse.promptWars.getLatestMarketId():

https://github.com/aufacicenta/pulsemarkets/blob/prompt-wars/app/src/providers/pulse/prompt-wars/getLatestMarketId.ts

import { MarketFactoryContract } from "providers/near/contracts/market-factory";

export default async () => {
  const marketFactory = await MarketFactoryContract.loadFromGuestConnection();
  const marketsList = await marketFactory.get_markets_list();

  if (!marketsList) {
    throw new Error("ERR_FAILED_TO_FETCH_MARKETS");
  }

  const latestMarketId = marketsList.pop();

  return latestMarketId;
};

As you can see, it is creating a guest connection to get data from a Rust NEAR contract get_markets_list VIEW method.

Creating the game contracts

This contract is a games factory implementation that stores only the game IDs after their contract accounts are created:

https://github.com/aufacicenta/pulsemarkets/blob/prompt-wars/contracts/market-factory/src/contract.rs

use near_sdk::{
    collections::Vector, env, json_types::Base64VecU8, near_bindgen, serde_json, serde_json::Value,
    AccountId, Promise,
};
use std::default::Default;

use crate::consts::*;
use crate::ext_self;
use crate::storage::*;

impl Default for MarketFactory {
    fn default() -> Self {
        Self {
            markets: Vector::new(b"d".to_vec()),
        }
    }
}

#[near_bindgen]
impl MarketFactory {
    #[payable]
    pub fn create_market(&mut self, name: AccountId, args: Base64VecU8) -> Promise {
        let market_account_id: AccountId = format!("{}.{}", name, env::current_account_id())
            .parse()
            .unwrap();

        let mut init_args: Value = serde_json::from_slice(&args.0.as_slice()).unwrap();

        init_args["management"]["market_creator_account_id"] =
            Value::String(env::signer_account_id().to_string());

        let collateral_token_account_id: AccountId = init_args["collateral_token"]["id"]
            .as_str()
            .unwrap()
            .parse()
            .unwrap();

        // @TODO if this promise fails, the funds (attached_deposit) are not returned to the signer
        let create_market_promise = Promise::new(market_account_id.clone())
            .create_account()
            .deploy_contract(MARKET_CODE.to_vec())
            .transfer(env::attached_deposit() - STORAGE_DEPOSIT_BOND)
            .function_call(
                "new".to_string(),
                init_args.to_string().into_bytes(),
                0,
                GAS_FOR_CREATE_MARKET,
            );

        let create_market_callback = ext_self::ext(env::current_account_id())
            .with_attached_deposit(0)
            .with_static_gas(GAS_FOR_CREATE_MARKET_CALLBACK)
            .on_create_market_callback(market_account_id, collateral_token_account_id);

        create_market_promise.then(create_market_callback)
    }
}

Fetching the game contracts IDs

The VIEW methods are in the same contract suite, but in this file:

This way, we are able to get an array of game IDs which we'll use to fetch their storage metadata.

Game metadata storage

Pay attention to pub struct MarketData and its type definitions. We should have VIEW and CHANGE methods to modify some of these properties and get them later:

Getting game metadata

We add VIEW methods to set these properties, for example get_market_data:

Setting immutable storage values at contract initialization

Some of the storage values are set when the contract is initialized, meant to NOT be modified later:

Deploy the factory contract

Run sh build.sh to build the factory contract:

and then deploy it:

near deploy --wasmFile target/wasm32-unknown-unknown/release/market_factory.wasm --accountId $NEAR_PROMPT_WARS_FACTORY_ACCOUNT_ID

Creating game contracts

Now that there's an on-chain factory contract, we should be able to create new games on the server side:

Getting contract metadata from the client side

When a new game is created, the factory contract should return the game IDs with get_markets_list as we explained earlier. Once you can get a game ID, you should also be able to get its metadata:

Iterate over game IDs, fetch the data and render the table

Finally, we should be able to render a table component with the contract values.

Notice how the table row component is wrapped with a context controller:

{markets.map((marketId) => (
          <NearPromptWarsMarketContractContextController marketId={marketId} key={marketId}>
            <PreviousRoundsTableRow marketId={marketId} />
          </NearPromptWarsMarketContractContextController>
        ))}

The Table Row

useNearPromptWarsMarketContractContext hook will help us to organize the VIEW methods implementation better and render the data in the td elements:

Getting game contract values for each row

Lastly, this is the implementation of a Promise.all call to get all the on-chain values needed for the table and other game info components: