PlacePositionBox.tsx

Go to src/components/PlacePositionBox.tsx where we will be building our next component to handle inputs.

Importing Dependencies:

  • At the top of the file, import the following dependencies:

import { PositionSideEnum } from '@hxronetwork/parimutuelsdk';
import React, { FC, useState } from 'react';
import { useEffect } from 'react';

Setting up our component

  1. Define the component PlacePositionBox using the functional component syntax and destructuring the props object for pubkey:

const PlacePositionBox: FC<{ pubkey: string }> = (props) => {
    const { pubkey } = props

  1. Use the useState hook to initialize the state for inputValue and amount. Set the initial value for inputValue to 'Enter Amount...' and for amount to '0':

		const [inputValue, setInputValue] = useState('Enter Amount...');
    const [amount, setAmount] = useState('0')

  1. Use the useEffect hook to specify the component should re-render whenever the pubkey changes:

		useEffect(() => {
    }, [pubkey]);

  1. If the pubkey is equal to 'Loading', return a loading message:

		if (pubkey === 'Loading') {
        return (
            <div>
                Loading...
            </div>
        )
    }

  1. Define a handleChange function that sets the inputValue and amount to the value of the event.target.value:

		const handleChange = (event) => {
        setInputValue(event.target.value);
        setAmount(event.target.value);

  1. Now, handle the change of the input value by creating the handleChange function. The handleChange function updates the input value with the entered amount using the setInputValue hook and sets the same value to amount with the setAmount hook. If the input value is empty, it sets the inputValue back to the placeholder text "Enter Amount...".

const handleChange = (event) => {
    setInputValue(event.target.value);
    setAmount(event.target.value);
    if (!event.target.value) {
      setInputValue('Enter Amount...');
    }
};

Returning our component:

Finally, return the component, which is a div that contains the input field and the two buttons for LONG and SHORT positions. The input field takes the value from inputValue and the onChange event is set to handleChange function. The styles for the input field are set using inline styling.

return (
    <div style={{ textAlign: 'center' }}>
        <input
            type="number"
            value={inputValue}
            onChange={handleChange}
            placeholder={inputValue}
            style={{ color: 'black', borderRadius: '10px', display: 'inline-block', textAlign: 'center', }}
        />
{/*
Here is where we are going to use the PlacePostion component and 
pass it in amount and pubkey to place the position of the user

        <div style={{ marginLeft: '-15px', marginTop: '10px' }}>
            <PlacePosition amount={amount} pariPubkey={pubkey} side={PositionSideEnum.LONG}/>
            <PlacePosition amount={amount} pariPubkey={pubkey} side={PositionSideEnum.SHORT} />
        </div>
*/}
    </div>
);
};

export default PlacePositionBox;

Now, let's test it!

  1. Go to src/components/PariBox.tsx

  2. Import the component into the file

import PlacePositionBox from './PlacePositionBox'

  1. Place it at the bottom of our second div:

<div style={{marginTop:'20px'}}>
	<PlacePositionBox pubkey={pariObj? pariObj.pubkey : 'Loading'}/>
</div>

The output should look similar to this:

Last updated