The user interface for DAXs is the same as the ones used for traditional exchanges, such as the stock exchange, or centralized crypto-exchanges, such as Binance. The idea is to provide a data-driven design where they can quickly understand the situation of the selected token pairs. A central section will be used for the data, a sidebar will be used for the actions that users may take, and an additional sidebar to the right will be used for secondary data; in our case, it will be used for past trades.
As usual, create a src and dist folder that will include our project. You can just copy the setup from previous projects by taking a look at my own version on github.com/merlox/dapp. Our design will be based on most exchanges since they have a studied formula that feels great. Create the sidebar with a new component inside your index.js file.
First, add...