Links

Parimutuel Typescript + React Project

This project walkthrough outlines how to create a dAPP UI that allows users to place positions, and various other interactions using the Hxro TS SDK and the Solana web3.js Lib
Here is a sneak peek of the application built in this project walkthrough:

Getting Started

Requirements:

  • Complete the Typescript SDK Quickstart, which helps with extracting the necessary information needed to showcase users
  • Clone the Parimutuel TS Project repo
  • Start the project
    • Run yarn install to install all project dependencies
    • Run yarn dev to run the application

Next Steps:

Now that all of the requirements are met, it's time to dive into the code.
  1. 1.
    Begin by changing the branch from main to doc-template.
  2. 2.
    Our next stop is src/views/home/index.tsx, which will be the homepage view.
With the groundwork laid, set up your files:
  1. 1.
    Navigate to the components folder under src
  2. 2.
    Here, you'll create four new files with the .tsx extension:
    1. 1.
      Config.tsx - This is where we are going to set our global config variable for the ParimutuelWeb3 connection
    2. 2.
      PariBox.tsx - This component will be used for each parimutuel market we want to add
    3. 3.
      PlacePositionBox.tsx - This component will handle the amount a user wants to set for a trade and make the call to the PlacePosition component to place the trade
    4. 4.
      PlacePosition.tsx - This component will handle the placement of the position and send a transaction request to the user's wallet