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():

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:

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:

PreviousNEAR and NEP141 Balance Widget NextLink an Account to Image, Text and Time Metadata with On-Chain Storage

Last updated 1 year ago

use near_sdk::collections::Vector; use near_sdk::{ collections::LookupMap, env, ext_contract, json_types::U128, log, near_bindgen, AccountId, Promise, }; use num_format::ToFormattedString; use shared::OutcomeId; use std::default::Default; use near_contract_standards::fungible_token::core::ext_ft_core; use crate::consts::*; use crate::storage::*; #[ext_contract(ext_self)] trait Callbacks { fn on_ft_transfer_callback( &mut self, amount_payable: WrappedBalance, outcome_id: OutcomeId, ) -> String; fn on_claim_fees_resolved_callback( &mut self, payee: AccountId, amount_paid: WrappedBalance, ) -> Option<Timestamp>; fn on_claim_balance_self_destruct_callback( &mut self, payee: AccountId, amount_payable: WrappedBalance, ) -> Option<Timestamp>; } #[ext_contract(ext_feed_parser)] trait SwitchboardFeedParser { fn aggregator_read(&self, msg: String) -> Promise; } impl Default for Market { fn default() -> Self { env::panic_str("ERR_MARKET_NOT_INITIALIZED") } } #[near_bindgen] impl Market { #[init] pub fn new( market: MarketData, management: Management, collateral_token: CollateralToken, ) -> Self { if env::state_exists() { env::panic_str("ERR_ALREADY_INITIALIZED"); } let starts_at: Timestamp = env::block_timestamp().try_into().unwrap(); let ends_at: Timestamp = starts_at + EVENT_PERIOD_NANOS; let reveal_window = ends_at + STAGE_PERIOD_NANOS; let resolution_window = reveal_window + STAGE_PERIOD_NANOS; // 7 days let self_destruct_window = resolution_window + 604_800_000_000_000; Self { market: MarketData { starts_at, ends_at, ..market }, outcome_tokens: LookupMap::new(StorageKeys::OutcomeTokens), players: Vector::new(b"p"), resolution: Resolution { window: resolution_window, reveal_window, resolved_at: None, result: None, }, fees: Fees { price: CREATE_OUTCOME_TOKEN_PRICE, fee_ratio: FEE_RATIO, claimed_at: None, }, collateral_token: CollateralToken { balance: 0, fee_balance: 0, // @TODO collateral_token_decimals should be set by a cross-contract call to ft_metadata ..collateral_token }, management: Management { self_destruct_window, buy_sell_threshold: BUY_SELL_THRESHOLD, ..management }, } } #[private] #[payable] pub fn create_outcome_token( &mut self, sender_id: AccountId, amount: WrappedBalance, payload: CreateOutcomeTokenArgs, ) -> WrappedBalance { self.assert_is_open(); self.assert_is_not_resolved(); self.assert_price(amount); let outcome_id = sender_id; let prompt = payload.prompt; match self.outcome_tokens.get(&outcome_id) { Some(_token) => env::panic_str("ERR_CREATE_OUTCOME_TOKEN_outcome_id_EXIST"), None => { self.internal_create_outcome_token(outcome_id, prompt, amount); } } amount } #[payable] pub fn sell(&mut self) -> WrappedBalance { if self.is_expired_unresolved() { return self.internal_sell_unresolved(); } self.assert_is_resolved(); return self.internal_sell_resolved(); } // During the resolution period, this method is called by the server (owner), setting the OutcomeTokenResult of each player pub fn reveal( &mut self, outcome_id: OutcomeId, result: OutcomeTokenResult, output_img_uri: String, ) { self.assert_only_owner(); self.assert_is_reveal_window_open(); self.assert_is_not_resolved(); self.assert_is_valid_outcome(&outcome_id); self.assert_is_resolution_window_open(); let mut outcome_token = self.outcome_tokens.get(&outcome_id).unwrap(); outcome_token.set_result(result); outcome_token.set_output_img_uri(output_img_uri); self.outcome_tokens.insert(&outcome_id, &outcome_token); log!("reveal: outcome_id: {}, result: {}", outcome_id, result); } // Gets the players accounts, // gets their outcome token results if they revealed on time // sorts the results, closest to 0 is first, closest to 0 wins #[payable] pub fn resolve(&mut self) { self.assert_only_owner(); self.assert_is_not_resolved(); self.assert_is_resolution_window_open(); if self.get_outcome_ids().is_empty() { self.resolution.resolved_at = Some(self.get_block_timestamp()); log!("resolve, market ended with 0 participants"); return; } let separator = "=".to_string(); let mut results: Vector<String> = Vector::new(b"r"); for player in self.get_outcome_ids().clone() { let outcome_token = self.outcome_tokens.get(&player).unwrap(); if outcome_token.result.is_none() { log!( "resolve â PLAYER_DID_NOT_REVEAL â outcome_id: {}, result: {}", outcome_token.outcome_id, outcome_token.result.unwrap_or(0.0) ); } else { let result_str = outcome_token.result.unwrap().to_string(); results.push(&(player.to_string() + &separator + &result_str)); } } log!("resolve, unsorted results: {:?}", results.to_vec()); let mut sort = results.to_vec(); sort.sort_by(|a, b| { let result_a = a.split(&separator).last().unwrap(); let result_b = b.split(&separator).last().unwrap(); return result_a.partial_cmp(result_b).unwrap(); }); log!("resolve, sorted results: {:?}", sort); // @TODO what happens if 2 or more players have exactly the same result? let winner = &sort[0]; let result = winner.split(&separator).next().unwrap(); log!("resolve, result: {}", result); self.internal_set_resolution_result(AccountId::new_unchecked(result.to_string())); } pub fn claim_fees(&mut self) { self.assert_is_resolution_window_expired(); self.assert_fees_not_claimed(); let payee = self.management.dao_account_id.clone(); let amount_payable = self.collateral_token.fee_balance; if amount_payable == 0 { self.fees.claimed_at = Some(self.get_block_timestamp()); env::panic_str("ERR_CLAIM_FEES_AMOUNT_PAYABLE_IS_ZERO"); } let ft_transfer_promise = ext_ft_core::ext(self.collateral_token.id.clone()) .with_attached_deposit(FT_TRANSFER_BOND) .with_static_gas(GAS_FT_TRANSFER) .ft_transfer(payee.clone(), U128::from(amount_payable), None); let ft_transfer_callback_promise = ext_self::ext(env::current_account_id()) .with_attached_deposit(0) .with_static_gas(GAS_FT_TRANSFER_CALLBACK) .on_claim_fees_resolved_callback(payee, amount_payable); ft_transfer_promise.then(ft_transfer_callback_promise); } pub fn self_destruct(&mut self) { self.assert_only_owner(); self.assert_is_resolution_window_expired(); if !self.is_self_destruct_window_expired() { env::panic_str("ERR_SELF_DESTRUCT_WINDOW_NOT_EXPIRED"); } if self.get_outcome_ids().is_empty() { env::panic_str("ERR_NO_OUTCOME_IDS"); } if !self.fees.claimed_at.is_some() || self.collateral_token.fee_balance > 0 { env::panic_str("ERR_SELF_DESTRUCT_FEES_UNCLAIMED"); } let amount_payable = self.collateral_token.balance; if amount_payable == 0 { Promise::new(env::current_account_id()) .delete_account(self.management.market_creator_account_id.clone()); return; } let payee = self.management.dao_account_id.clone(); let ft_transfer_promise = ext_ft_core::ext(self.collateral_token.id.clone()) .with_attached_deposit(FT_TRANSFER_BOND) .with_static_gas(GAS_FT_TRANSFER) .ft_transfer(payee.clone(), U128::from(amount_payable), None); let ft_transfer_callback_promise = ext_self::ext(env::current_account_id()) .with_attached_deposit(0) .with_static_gas(GAS_FT_TRANSFER_CALLBACK) .on_claim_balance_self_destruct_callback(payee, amount_payable); ft_transfer_promise.then(ft_transfer_callback_promise); } #[private] pub fn update_collateral_token_balance(&mut self, amount: WrappedBalance) -> WrappedBalance { self.collateral_token.balance = amount; log!( "update_collateral_token_balance: {}", amount.to_formatted_string(&FORMATTED_STRING_LOCALE) ); self.collateral_token.balance } #[private] pub fn update_collateral_token_fee_balance( &mut self, amount: WrappedBalance, ) -> WrappedBalance { self.collateral_token.fee_balance += amount; log!( "update_collateral_token_fee_balance, in: {}, total: {}", amount.to_formatted_string(&FORMATTED_STRING_LOCALE), self.collateral_token .fee_balance .to_formatted_string(&FORMATTED_STRING_LOCALE) ); self.collateral_token.fee_balance } } impl Market { // Mint a new token for the player fn internal_create_outcome_token( &mut self, outcome_id: OutcomeId, prompt: String, amount: WrappedBalance, ) -> WrappedBalance { let (amount_mintable, fee) = self.get_amount_mintable(amount); let outcome_token = OutcomeToken::new(&outcome_id, prompt, amount_mintable); self.players.push(&outcome_id); self.outcome_tokens.insert(&outcome_id, &outcome_token); self.update_collateral_token_balance(self.collateral_token.balance + amount_mintable); self.update_collateral_token_fee_balance(fee); self.outcome_tokens.insert(&outcome_id, &outcome_token); log!("CREATE_OUTCOME_TOKEN amount: {}, fee_ratio: {}, fee_result: {}, outcome_id: {}, sender_id: {}, ot_supply: {}, amount_mintable: {}, ct_balance: {}, fee_balance: {}", amount.to_formatted_string(&FORMATTED_STRING_LOCALE), self.fees.fee_ratio.to_formatted_string(&FORMATTED_STRING_LOCALE), fee.to_formatted_string(&FORMATTED_STRING_LOCALE), outcome_token.outcome_id, outcome_id, outcome_token.total_supply().to_formatted_string(&FORMATTED_STRING_LOCALE), amount_mintable.to_formatted_string(&FORMATTED_STRING_LOCALE), self.collateral_token.balance.to_formatted_string(&FORMATTED_STRING_LOCALE), self.collateral_token.fee_balance.to_formatted_string(&FORMATTED_STRING_LOCALE), ); amount_mintable } fn internal_sell_unresolved(&mut self) -> WrappedBalance { let payee = env::signer_account_id(); let (amount_payable, _weight) = self.get_amount_payable_unresolved(payee.clone()); self.internal_transfer(payee, amount_payable) } fn internal_sell_resolved(&mut self) -> WrappedBalance { let payee = self.resolution.result.clone().unwrap(); self.assert_is_winner(&payee); let (amount_payable, _weight) = self.get_amount_payable_resolved(); self.internal_transfer(payee, amount_payable) } fn internal_transfer( &mut self, payee: AccountId, amount_payable: WrappedBalance, ) -> WrappedBalance { if amount_payable <= 0 { env::panic_str("ERR_CANT_SELL_A_LOSING_OUTCOME"); } let outcome_token = self.get_outcome_token(&payee); log!( "TRANSFER amount: {}, account_id: {}, supply: {}, is_resolved: {}, ct_balance: {}, amount_payable: {}", amount_payable.to_formatted_string(&FORMATTED_STRING_LOCALE), payee, outcome_token.total_supply().to_formatted_string(&FORMATTED_STRING_LOCALE), self.is_resolved(), self.collateral_token.balance.to_formatted_string(&FORMATTED_STRING_LOCALE), amount_payable.to_formatted_string(&FORMATTED_STRING_LOCALE), ); let ft_transfer_promise = ext_ft_core::ext(self.collateral_token.id.clone()) .with_attached_deposit(FT_TRANSFER_BOND) .with_static_gas(GAS_FT_TRANSFER) .ft_transfer(payee.clone(), U128::from(amount_payable), None); let ft_transfer_callback_promise = ext_self::ext(env::current_account_id()) .with_attached_deposit(0) .with_static_gas(GAS_FT_TRANSFER_CALLBACK) .on_ft_transfer_callback(amount_payable, outcome_token.outcome_id); ft_transfer_promise.then(ft_transfer_callback_promise); amount_payable } fn internal_set_resolution_result(&mut self, result: ResolutionResult) { self.resolution.result = Some(result); self.resolution.resolved_at = Some(self.get_block_timestamp()); log!( "internal_set_resolution_result, result: {:?}", self.resolution.result.clone().unwrap() ); } }

use near_sdk::{ borsh::{self, BorshDeserialize, BorshSerialize}, collections::{LookupMap, Vector}, near_bindgen, serde::{Deserialize, Serialize}, AccountId, BorshStorageKey, }; use shared::OutcomeId; pub type Timestamp = i64; pub type WrappedBalance = u128; pub type OutcomeTokenResult = f32; pub type ResolutionResult = OutcomeId; #[derive(BorshSerialize, BorshDeserialize, Serialize, Deserialize, Clone)] #[cfg_attr(not(target_arch = "wasm32"), derive(Debug, PartialEq))] #[serde(crate = "near_sdk::serde")] pub struct MarketData { // The IPFS reference-image hash of the expected prompts pub image_uri: String, // Datetime nanos: the market is open pub starts_at: Timestamp, // Datetime nanos: the market is closed pub ends_at: Timestamp, } #[near_bindgen] #[derive(BorshSerialize, BorshDeserialize)] pub struct Market { // Market metadata pub market: MarketData, // NEP141 token metadata pub collateral_token: CollateralToken, // MArket resolution metadata pub resolution: Resolution, // Market management account ids metadata pub management: Management, // Keeps track of Outcomes prices and balances pub outcome_tokens: LookupMap<AccountId, OutcomeToken>, // Keeps track of the outcome_ids that have bet on the market pub players: Vector<AccountId>, // Market fees metadata pub fees: Fees, } #[derive(Serialize, Deserialize)] pub enum SetPriceOptions { Increase, Decrease, } #[derive(BorshSerialize, BorshDeserialize, Serialize)] pub struct OutcomeToken { // the account id of the outcome_token pub outcome_id: OutcomeId, // the outcome value, in this case, the prompt submitted to the competition pub prompt: String, // the outcome value, in this case, the prompt submitted to the competition pub output_img_uri: Option<String>, // store the result from the image comparison: percentage_diff or pixel_difference pub result: Option<OutcomeTokenResult>, // total supply of this outcome_token pub total_supply: WrappedBalance, } #[derive(BorshSerialize, BorshDeserialize, Deserialize, Serialize, Clone)] pub struct CollateralToken { pub id: AccountId, pub balance: WrappedBalance, pub decimals: u8, pub fee_balance: WrappedBalance, } #[derive(BorshSerialize, BorshDeserialize, Serialize, Deserialize, Clone)] pub struct Resolution { // Time to free up the market pub window: Timestamp, // Time after the market ends and before the resolution window starts pub reveal_window: Timestamp, // When the market is resolved, set only by fn resolve pub resolved_at: Option<Timestamp>, // When the market is resolved, set only by fn resolve pub result: Option<ResolutionResult>, } #[derive(BorshSerialize, BorshDeserialize, Serialize, Deserialize, Clone)] pub struct Management { // Gets sent fees when claiming window is open pub dao_account_id: AccountId, // Gets back the storage deposit upon self-destruction pub market_creator_account_id: AccountId, // Set at initialization, the market may be destroyed by the creator to claim the storage deposit pub self_destruct_window: Timestamp, // Set at initialization, determines when to close bets pub buy_sell_threshold: f32, } #[derive(BorshSerialize, BorshDeserialize, Deserialize, Serialize, Clone)] pub struct Fees { // Price to charge when creating an outcome token pub price: WrappedBalance, // Decimal fee to charge upon a bet pub fee_ratio: WrappedBalance, // When fees got sent to the DAO pub claimed_at: Option<Timestamp>, } #[derive(BorshStorageKey, BorshSerialize)] pub enum StorageKeys { OutcomeTokens, StakingFees, MarketCreatorFees, } #[derive(Serialize, Deserialize)] pub struct CreateOutcomeTokenArgs { // the outcome value, in this case, the prompt submitted to the competition pub prompt: String, } #[derive(Serialize, Deserialize)] pub enum Payload { CreateOutcomeTokenArgs(CreateOutcomeTokenArgs), } #[derive(BorshSerialize, BorshDeserialize, Serialize, Deserialize, Clone)] pub struct Ix { pub address: [u8; 32], }