# Exchange

In XdYe Exchange we will deep dive about its functionalities as it is the main DEX functionality for the final users.

Once you land for first time one XdYe Dapp Exchange you will need to allow XDYE Router Contract to use your funds in your behalf, obviously we could do that for every trade so you allow just the required amount for that use case, but as a DEX is thought to easily and quickly allow you to exchange we ask user to allow any possible input amount. This is possible through:

`web3.utils.toBN(2).pow(web3.utils.toBN(256)).sub(web3.utils.toBN(1))`

<figure><img src="https://1716109615-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaLpsXqP00Znm3KwSX02Z%2Fuploads%2FztiiskUfq7djwUIuwsfQ%2FCaptura%20de%20pantalla%202022-10-14%20a%20las%2013.28.00.png?alt=media&#x26;token=69c0ea34-0877-4f5b-b55b-7f28990c4ba2" alt=""><figcaption><p>User needs to Approve Router for token manipulation (we use both at same time for the seek of not asking it back when he wants to trade it back) we could just add the approve for the token user needs to allow access (the one on the first input field)</p></figcaption></figure>

Once tokens have been approved user will be displayed with the following screen:

<figure><img src="https://1716109615-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaLpsXqP00Znm3KwSX02Z%2Fuploads%2F0bXjsVOIv3sNX4fwAASe%2FCaptura%20de%20pantalla%202022-10-14%20a%20las%2012.58.21.png?alt=media&#x26;token=07e47916-e0df-4a9f-9b81-13203c6cd963" alt=""><figcaption><p>XdYe Exchange</p></figcaption></figure>

Some of the most important features

* **Coin Selector:** That reads from a list a set of basic attributes like: *name, symbol, address & image.* So we can easily select the trade/swap we want to consider.

<figure><img src="https://1716109615-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaLpsXqP00Znm3KwSX02Z%2Fuploads%2FY1uOoIoGSkpoz5GMlN1o%2FCaptura%20de%20pantalla%202022-10-14%20a%20las%2013.02.40.png?alt=media&#x26;token=e1987559-e0d1-49c5-8a0e-e55e05d7648f" alt=""><figcaption><p>Coin Selector Pop Up</p></figcaption></figure>

Once a certain token is selected, we execute the `getBlockData()` function, this way we can tell the front-end/UI to refetch data. This way once user inputs a certain amount of any of both tokens he wants to trade or receive, XdYe Dapp will be able to show/display the corresponding amount of the other token.

<figure><img src="https://1716109615-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaLpsXqP00Znm3KwSX02Z%2Fuploads%2FyDQpPwNUXbvdRKIVf1vb%2FCaptura%20de%20pantalla%202022-10-14%20a%20las%2013.05.53.png?alt=media&#x26;token=fed1c5ff-af29-448e-8109-d5e128a13be6" alt=""><figcaption><p>User types on 1st Input Field, XdYe Dex writes on 2nd Input Field the estimated expected amount</p></figcaption></figure>

<figure><img src="https://1716109615-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaLpsXqP00Znm3KwSX02Z%2Fuploads%2FnIxG7VLMqKrTUV4fCu1j%2FCaptura%20de%20pantalla%202022-10-14%20a%20las%2013.07.50.png?alt=media&#x26;token=ef604dcf-9864-4e0d-999a-90679f91df8f" alt=""><figcaption><p>User types on 2nd Input Field, XdYe Dex writes on 1st Input Field the estimated output amount</p></figcaption></figure>

For the seek of simplicity we have also added two MAX buttons that easily allow users to input their maximum amount available for the trade, as we have 18 decimals users can decide or not to use all their available token amount.

Before proceeding to perform the Swap/Exchange user can also click on settings on top-right corner, in order to set the slippage tolerance that he wants to take in to account for that trade.&#x20;

In other words the amount of value he wants to be tolerant in the received output amount. As we are dealing with Smart Contracts, information can change from Tx starts to Tx finish, this value allows user to tell XdYe how much variation in expected output does he want to tolerate.

<figure><img src="https://1716109615-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaLpsXqP00Znm3KwSX02Z%2Fuploads%2FsvDvh0LHCLiaEqjElSd3%2FCaptura%20de%20pantalla%202022-10-14%20a%20las%2013.11.00.png?alt=media&#x26;token=470e30b3-0649-4911-a5a0-210076f3aeee" alt=""><figcaption><p>XdYe Slippage Tolerance is set by default at 0.7%</p></figcaption></figure>

Before exchanging user has also information about:

* **Minumum Received:** Considering Inputed Slippage Tolerance
* **Price Impact:** That this trade will cause in to the Pair.
* **Liquidity Provider Fee:** The amount that will be paid to those that are providing liquidity so your trade can take place.
* **Price:** The amount of Input 1 that equals 1 output token.

Once we proceed to Swap we are going to be prompted with a Metamask Tx Pop up request, in which we are signing the transaction that will make this exchange/trade to happen.

<figure><img src="https://1716109615-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaLpsXqP00Znm3KwSX02Z%2Fuploads%2FzeWPFnUDtZfxmmmHmAi3%2FCaptura%20de%20pantalla%202022-10-14%20a%20las%2013.18.50.png?alt=media&#x26;token=914dbf5d-3efc-49bd-abff-98dd73927c94" alt=""><figcaption><p>Trade on XdYe Dapp</p></figcaption></figure>

If the trade is correctly done and submitted to the blockchain, we are going to be prompted with this pop up.

<figure><img src="https://1716109615-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaLpsXqP00Znm3KwSX02Z%2Fuploads%2FGRprlD8fUzGmBJYYEWuX%2FCaptura%20de%20pantalla%202022-10-14%20a%20las%2013.21.05.png?alt=media&#x26;token=0f9b7892-cb1e-45c8-9663-8c6ea285d814" alt=""><figcaption><p>Tx Success</p></figcaption></figure>

In here we can easily View the corresponding Tx on Volta Explorer by just clicking on View on Explorer button. We have also created a functionality to add token image inside your Metamask.

In case transaction could not be processed user will get prompted with an error pop up.

{% hint style="info" %}
**Good to know:** There are other settings that we could give to the user a part from slippage, like for example deadline for the transaction to be processed.
{% endhint %}

You can check it out on:

{% embed url="<https://rogercapone.github.io/xdye/#/exchange>" %}
XdYe Exchange
{% endembed %}

{% hint style="warning" %}
**Attention:** If you want to check it out and see real data you will need to make sure to have [added Volta TestNet Network to your Metamask](https://rogercapone.gitbook.io/xdye-documentation/technology/blockchain#which-one-are-we-picking-for-xdye). If you want to interact with XdYe Dapp be sure to have [claimed some VT from Volta Faucet](https://voltafaucet.energyweb.org/).
{% endhint %}
