###### tags: `documentation` `design`

# Pool Swap UI

The current process of moving liquidity between different decentralized exchanges is arduous. For example a liquidity provider whishing to move their assets from Uniswap to bancor must first navigate to the Pool withdrawal on the Uniswap App then go to the Bancor App with different UX and navigate to the new Pool to deposit the liquidity again.

This collection of discrete steps is automatable. Therefore, we were inspired to create a clean user interface that would allow such transfers to take place in a more convenient manner. The objective is to facilitate liquidity movements between pools both within the same protocol and across protocols.

Check out the current code [here](https://github.com/JhonnyJason/pool-swap-ui).

## Features v0.1
- support bancor pools
- support uniswap pools
- support sushiswap pools
- capability to select source pool -> gives us the source assets
- capability to select source wallet -> gives us more sources assets
- capability to select wallet as destination for an asset
- capability to select a pool as destination for an asset
- capability to do all transactions step by step
- capability to start the automatic process for executing all required transactions

## Features v0.2
- support balancer pools
- ...

## UI Basics

### General UX Design Decisions
- Only relevant/possible Options to choose from
- Firm guidance throw the whole process
- Use Range Elements for selecting an amount

### Hanging Ideas
- There would be arrows to symbolize the flow of the assets.
- One could either click on the arrows to do one specific transaction.
- Or one could define the whole flow and then use the master button - execute the full transaction Process.

### Approach From Source

#### Flow
- Choose Source (WalletToken or Liquidity Pool) -> Gives Available Assets
- Choose Protocol -> Choose Destination Pool
- Check assets which should stay on wallet

### Approach From Destination

#### Flow
- Choose Protocol -> Choose Liquidity Pool -> Gives Required Assets
- Choose Source for each required Asset

## Components
- Very simple header for a button to connect to wallet. :heavy_check_mark:
- Source section :heavy_check_mark:
- button for adding a liquidity pool -> leads to protocol selection -> leads to available pools where you have liquidity
- button for adding a wallet token -> leads to available tokens where you have a balance > 0
- Amount Select Element (Range > typed Percentage > typed amount)
- Source - add Liquidity Pool Popup
- choose Protocol
- when having chosen a protocol -> display the pools you have liquidity (in vertical blocks)
- when having choose a protocol it is written as banner in the popup with an x to unchoose it again by clicking it

- Source - add Wallet Token Popup :heavy_check_mark:
- All tokens where the user has a balance are listed to be chosen (in vertical blocks)
- Destination section

## Wallet Management :heavy_check_mark:

- first we just check if the Wallet is connected -> apply UI-state accordingly

### UI states

#### Wallet is connected
- all app usage will work as expected
- the #wallet-connect-button is not reacting and displays the current wallet address

#### Wallet is not connected
- every attempt of using the App will prompt the users to connect their Wallet
- the #wallet-connect-button is listening on 'click' events for connecting to the wallet

#### No Ethereum Provider detected
- every attempt of using the App will prompt the users to connect their Wallet
- the #wallet-connect-button is listening on 'click' events for installing MetaMask

## ABI Cache Service :heavy_check_mark:
As we donot know the specific contracs' ABI in beforehand we will just request our service which caches the available ABIs from [etherscan.io](https://etherscan.io)

[Here](https://hackmd.io/taH_79GQSSiMeZaTlhGkLQ?view) is the documentation for that small service.