Add a button to the Liquidity Pool tab (Add tokens in a balanced proportion).

[svoit7]

Motivation

In terms of usability UX / UI add a button to the Liquidity Pool tab (Add tokens in a balanced proportion).
https://prnt.sc/5DYD63oh-oC_ - Example screenshot

Objective:
The objective of this proposal is to enhance the user experience and provide a more convenient and efficient way for users to add liquidity to the SwaySwap platform. We propose the addition of an "Add Tokens in Balanced Proportion" button to the liquidity pool tab on the project's website: https://fuellabs.github.io/swayswap/pool/add-liquidity.

Description:
Currently, when users want to add liquidity to the SwaySwap platform, they need to manually input the desired amounts of each token they wish to contribute. This process can be time-consuming and prone to errors, especially when dealing with multiple tokens and their corresponding proportions.

To streamline the liquidity provisioning process, we suggest implementing an "Add Tokens in Balanced Proportion" button on the liquidity pool tab. This button would allow users to automatically allocate their desired liquidity contribution across the available tokens in a balanced manner.

Functionality:
Upon clicking the "Add Tokens in Balanced Proportion" button, the system would retrieve the current balances of the selected tokens in the liquidity pool.
The system would calculate the proportional allocation of liquidity based on the existing token balances. For example, if there are Token A, Token B, and Token C in the pool, and Token A has a balance of 10,000, Token B has a balance of 20,000, and Token C has a balance of 30,000, the proportional allocation would be 1:2:3 respectively.
The system would then display the calculated proportional amounts for each token in the input fields on the page.
Users would have the option to modify the calculated amounts manually if desired.
After confirming the desired contribution, users would proceed with the usual liquidity provisioning process, such as approving the transaction and confirming the liquidity addition.

Benefits:
Improved User Experience: The proposed feature would significantly simplify the liquidity provisioning process by automatically calculating the proportional amounts, reducing user effort and potential input errors.
Time Efficiency: Users would save time by eliminating the need to manually calculate and input proportional amounts for each token.
Accuracy: By automatically calculating the proportional allocation, the system would ensure a balanced distribution of liquidity, promoting fair participation and reducing potential arbitrage opportunities.

Implementation:
The proposed feature can be implemented by integrating the necessary logic into the existing codebase of the liquidity pool tab. The front-end development team would need to add the "Add Tokens in Balanced Proportion" button and implement the functionality described above. The back-end team would be responsible for retrieving token balances and performing the proportional allocation calculation.

Conclusion:
The addition of an "Add Tokens in Balanced Proportion" button to the liquidity pool tab on the SwaySwap platform would greatly enhance user experience, save time, and improve the accuracy of liquidity provisioning. We recommend implementing this feature to provide a more efficient and user-friendly solution for adding liquidity to the platform.

Usage example

Once the "Add Tokens in Balanced Proportion" button is added to the SwaySwap platform's liquidity pool tab, users will be able to easily allocate liquidity in a balanced manner. Here's an example of how a user can utilize this feature:

A good example of the implementation is already here: [https://syncswap.xyz/pool/0x80115c708E12eDd42E504c1cD52Aea96C547c05c]

The user visits the SwaySwap platform at https://fuellabs.github.io/swayswap/pool/add-liquidity.

On the liquidity pool tab, the user selects the desired token pair for liquidity provision. Let's assume they choose Token A and Token B.

The user clicks on the "Add Tokens in Balanced Proportion" button, which triggers the system to calculate the proportional allocation based on the current token balances in the pool.

The system retrieves the current balances of Token A and Token B, let's say Token A has a balance of 10,000 and Token B has a balance of 20,000.

The system automatically calculates the proportional allocation based on the balances, which in this case would be 1:2 (Token A:Token B). The calculated amounts are displayed in the input fields on the page.

The user has the option to manually adjust the calculated amounts if they wish to deviate from the proportional allocation.

After confirming the desired contribution, the user proceeds with the liquidity provisioning process, such as approving the transaction and confirming the liquidity addition.

Possible implementations

HTML-Example

html
Copy code
<div class="row gap-6 align">
  <label class="MuiSwitch-root MuiSwitch-sizeMedium css-ecvcn9">
    <input class="PrivateSwitchBase-input MuiSwitch-input css-1m9pwf3" type="checkbox" id="balancedProportionCheckbox" onchange="calculateBalancedProportion()">
    <span class="MuiSwitch-thumb css-19gndve"></span>
    <span class="MuiTouchRipple-root css-w0pj6f"></span>
  </label>
  <p class="MuiTypography-root MuiTypography-body1 css-3tr3aj">Add tokens in balanced proportion</p>
  <div class="flex-center pointer" aria-label="Deposit all tokens in the same proportion they currently are in the pool." onclick="calculateBalancedProportion()">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="-3 -3 30 30" fill="none" stroke="#5155a6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <circle cx="12" cy="14" r="10"></circle>
      <line x1="12" y1="18" x2="12" y2="12"></line>
      <line x1="12" y1="8" x2="12" y2="8"></line>
    </svg>
  </div>
</div>

<!-- JavaScript function to calculate and populate input fields -->
<script>
  function calculateBalancedProportion() {
    // Retrieve token balances from the liquidity pool
    const tokenABalance = parseFloat(document.getElementById('tokenABalance').innerText);
    const tokenBBalance = parseFloat(document.getElementById('tokenBBalance').innerText);

    // Calculate proportional allocation
    const allocationRatio = tokenABalance / tokenBBalance; // Modify calculation as needed
    const tokenAProportion = 0.5; // Modify initial proportion as needed
    const tokenBProportion = 1 - tokenAProportion;

    // Populate input fields with calculated amounts
    document.getElementById('tokenAInput').value = tokenAProportion * allocationRatio;
    document.getElementById('tokenBInput').value = tokenBProportion * allocationRatio;
  }
</script>