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. Begin by changing the branch from main to doc-template.

  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. Navigate to the components folder under src

  2. Here, you'll create four new files with the .tsx extension:

    1. Config.tsx - This is where we are going to set our global config variable for the ParimutuelWeb3 connection

    2. PariBox.tsx - This component will be used for each parimutuel market we want to add

    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. PlacePosition.tsx - This component will handle the placement of the position and send a transaction request to the user's wallet

Last updated