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