PariBox.tsx

Importing Dependencies

We will start by importing the necessary dependencies needed for our PariBox component.

The dependencies that will be utilized are as follows:

import { useConnection } from "@solana/wallet-adapter-react";
import { FC, useState } from "react";
import {
ParimutuelWeb3,
MarketPairEnum,
getMarketPubkeys,
calculateNetOdd,
} from "@hxronetwork/parimutuelsdk";
import { useEffect } from "react";
import { PariConfig } from "./Config";

With these dependencies in place, we are now ready to start building our PariBox component.

Before diving in, let's first prepare a few essential elements under our imports that will be utilized later on:

  1. Create a PariObj interface to store the contest information, including the Long and Short Pools' amounts, odds, and pubkey.

interface PariObj {
    longPool: any; // This is how much money is in the Long Pool of the contest
    shortPool: any; // This is how much money is in the Short Pool of the contest
    longOdds: string; // This is the weighted odds of the Long Pool
    shortOdds: string; // This is the weighted odds of the Short Pool
    pubkey: string; // This is the contest pubkey
}Next, create a constant named TimeInterval to store various time intervals for ease of use.

  1. Create a constant named TimeInterval to store various time intervals for ease of use.

Setting up our component

  1. Start by creating a functional component called PariBox. It will take in a prop called time.

  1. Next, filter the TimeInterval array to find the object that matches the time prop passed in.

  1. Extract the seconds and title properties from the selected object.

  1. Define a state variable to store the PariObj data. The useState hook is used to manage this state in the function component.

  1. Define a state variable to store the countDownTime data. The useState hook is used to manage this state in the function component.

  1. Create a constant config that holds the configuration values imported from the Config.tsx file

  1. Create constant **connection** , which handles the connection to Solana depending on the user's wallet, and instantiate a new ParimutuelWeb3 object with config and connection as parameters.

  1. Define the marketPair with **MarketPairEnum** to select the market that we want to get the contests from. For markets , use the **getMarketPubkeys** method to retrieve all of the Pubkeys of the specified market/s, and create a marketsByTime variable that filters the markets based on whether the duration is the same as timeSeconds value so that we get only the contests from the desired time interval.

Getting contest data

  1. Use the useEffect hook to run a specific effect when the component is rendered. In this case, the effect will fetch data about the contest and set it in the pariObj state.

Retrieving contests

  1. Use the parimutuelWeb3.getParimutuels method to retrieve the parimutuel data from the parimutuels array marketsByTerm , and retrieve the duration of the selected parimutuel market.

  1. Use the parimutuelWeb3.getMarkets method to retrieve the market data.

  1. To retrieve only the next-in-line contests, filter the parimutuels array to find the parimutuel accounts that match the conditions.

Extracting data from contests

  • Assigning data to variables:

  • Formatting countdown timer to display:

Here, we can close our getPariStats() function.

Calling our data

To start a recurring function call, use the setInterval() function. The setInterval() function takes two parameters: the first parameter is the function that you want to call repeatedly, and the second parameter is the interval in milliseconds.

Here, we want to call the getPariData() function every second, so the interval is set to 1000 milliseconds or 1 second.

To avoid memory leaks, it's important to clean up any recurring functions when the component that started it unmounts. To do this, return a function that calls clearInterval() and pass in the intervalId.

Now, we have a function that updates our data every second until the component unmounts and the interval is cleared.

Rendering Our Data

Let's build the UI of our Pari Box component.

To make it easier, here is the code you can copy and paste inside of return:

Now, let's test it!

  1. Go to src/view/home.tsx and import PariBox.tsx

  2. Import the PariBox component

  1. Use the PariBox component inside of the HomeView return and pass in ‘1M’ as the time prop to get the 1-minute market contests for BTC-USD.

Bonus:

Use the following code to display (in a responsive way) the latest contests for all the time intervals available:

The output should look similar to this:

Last updated