Improving user experiences for token swapping

Usually, a DEX implements several components to improve user experiences. In this section, we will discuss how to implement the following two components for the purpose:

• The MAX button for the spending amount, which is useful when a user wants to sell all tokens in the wallet
• The floating action button (FAB) for switching the spending and receiving tokens

Now, let’s implement the MAX button with this line of code:

<Button sx={{ fontSize: 12, padding: '0px' }}
  onClick={() => handleMax()} >Max</Button>

Once the button is clicked, it will call the handleMax function to set the amount to spend to all of the balance of the token. The function then calls setTokenIndex(indexTokenA) so that the swap operation knows the user is setting spending. The function will also call getReceivingAmount to update the receiving amount at the same time:

const handleMax = () => {
 ...