# Interface gap analysis: "CasperSwap" vs "Raydium" and "Uniswap"
###### tags: uniswap-interface, casper-swap, rengo-labs, gap-analysis, examples, raydium-interface

## Missing features:

## General application interface

### 1. Change text of Notifications.
* "**Try to connect your wallet**" - Change for "**Connecting your wallet**".
* "**let me try to swap! be patient!**" - Change for "**Pending transaction**" (Swapping in progress, Waiting network confirmation).

### 2. Position Notifications in right bottom corner:

Move *Notifications, Loading, Waiting, Pending transaction messages* to right bottom corner of the application page.
**Currently** appear in upper middle part of the application screen.
**Problems:** User can't navigate in application, if message is stack.

### 3. Hide Launch app button.

Once user left *casper-swap* lending page and entered application.

### 4. Add Transaction history.

Should be available in **profile menu** (click on wallet address) in upper right corner.


### 5. Move Slippage setting.
Move to upper right corner of:
- **Swap** window.
- **Add liquidity** window.

**Currently**: non-interactive **Star sign** (replace for settings).

### 6. Make notifications to fade away.
Notifications keep existing too long.

### 7. Erase LP token list from setting.
Move it to "POOLS" page.
.

## Swap Page:
### 1. Activate Select token search engine.
Search by token name / ticker. Currently doesn't work.

### 2. From - To keywords.
On swap interface add **From** (Token A) and **To** (Token B) keywords.
 

### 3. Max and Half amount of tokens.
For both tokens add buttons:
- Max
- Half

On click should put *Max* or *Half* value of user balance.
**Currently**: One unworking **Max** button for token A.

### 4. Show balance for any selected token.
Show **0 balances** as **0**.
**Currently shows**:
- Balances higher then 0.
- CSPR native token balance.
- Nothing if balance is 0.

### 5. Edit Amount value for both tokens.
If changed **amount value** for any of the tokens,#
then make automatic calculations for second token.
**Currently**: user can edit only *Token A* amount.

### 6. Price chart (1A = XB).
Depending on main token selected.
**Example**: 1 CSPR = 15.5 WETH
.

### 7. **Insufficient "TokenName" balance** button.
Check if **selected token amount** exceeds **current token balance** value. If so, then:
- Make **Swap** button unavailable.
- Change button text to **Insufficient "TokenName" balance**.

### 8. Market value for selected amount.
Calculate and display current price for selected token amount.

### 9. Detailed swap info.
Make that window **fold / unfold on click**.
Add next data:
* Minimum Received (Expected output).
* Price Impact (%).
* Swap Fee.

### 10. **Approve button**.
Check if user approved DEX protocol to spend it's tokens:
* Add **Approve "TokenName"** button.
* Make **swap button** unavailable.

If token spending **approved**:
* Hide **Approve "TokenName"** button.
* Make **swap button** available.

### 11. Confirm swap window.
Clicking on **Swap** - open ultimate confirmation window.
Data is similar to **Detailed swap info**.
Window should contain **Confirm swap** button and next **Info fields**:
* TokenA amount
* TokenA amount * price
* TokenB amount
* TokenB amount * price
* Exchange rate "1 tokenA = X tokenB"
* Expected output (Minimum Received)
* Price impact
* **Confirm swap** button

### 12. **Waiting for confirmation** window.
Window with **loading / processing** logo.
Open once **Confirm swap** button pressed and wallet confirmation is requested.

### 13. **Transaction submited** window.
Open after transaction was signed in wallet.
Should provide link to submitted transaction on block explorer.

### 14. Interactive notification.

- Popup notification for user, when swap transaction signed on wallet.
- Notification should containt link to the transaction on block explorer.
- Inform user when transaction approved on chain.
- Provide user with a link to transaction on block scanner.


## Pools Page:

### 1. Available pools page.
- Merge pages: **\liquidity** and **\pools** into "POOLS".
- List of the pools should be available by "Pools" link.
- "Liquidity" link should open "Add liqudity" window.
- Delete LP tokens info from setting menu. Move to "Pools".

### 2. Pool info.

Pool info should be foldable - to expand for short / full details.
Two main options:
1. Uniswap like (Super short).
**Fold**:
- Tokens picture
- Token A / Token B.
- Manage button (to unfold detailed info).
**Unfold**:
- Your total pool tokes.
- Pooled Token A.
- Pooled Token B.
- Your pool share (%).
- **Add** button.
- **Remove** button.

2. Detailed (Raydium).
**Fold** (X is a time frame selected 24h, 7d, 30d):
- Tokens picture
- Token A / Token B.
- Liquidity.
- Volume X.
- Fees X.
- APR X.
**Unfold**:
- Your liquidity.
- Assets pooled Token A.
- Assets pooled Token B.
- Your share (%).
- **Add** button.
- **Remove** button.
- **Swap** button (leads to Swap interface and select same token Pair).

### 3. Fold / unfold Pool info.

Pool info should be foldable. For short / full details.

### 4. Add, Remove, Swapp buttons.

Buttons are availabe - on Pool full details (unfolded).
Buttons are not availabe - on Pool short details (folded).
Each pool should have it's own "Add, Remove, Swap" buttons.

**Currently**: Buttons are split.

### 5. Liquidity provider rewards info.

Protocol fee info and warnings for providers.

### 6. Remove X and Y buttons.
Slippage setting been described in **General application interface**.
5. Move Slippage setting

## Add liquidity Page:

### 1. Liquidity window.
Should be available by click on *Liquidity* link,
And open next window:

**Currently**: Opens empty list of pools:

### 2. Edit token amount for both token fields.
Same like for "Swap" window.
When token amount changed - automatically calculate amount for pair token.

### 3. Add "Tip" info.
Tip: When you add liquidity, you will receive pool tokens representing your position. These tokens automatically earn fees proportional to your share of the pool, and can be redeemed at any time.

### 4. Insufficient "TokenName" balance.
If not enough balance:
- Make "Add liquidity" button unavailable.
- Make button text red.
- Change button text for "Insufficient "TokenName" balance".
**Currently**: show's message, that balance is too low and keep "Add liquidity" button active.

### 5. Prices and pool share.
Add additional information:
- X tokenA per 1 tokenB (0.000474278 ETH per 1INCH).
- X tokenB per 1 tokenA (2108.47 1INCH per ETH).
- Share of Poo (%).

### 6. Current LP position info.
Under "Add liquidity" window provide user information about his current LP token:
- Your position.
- Pool share (%).
- TokenA (amount).
- TokenB (amount).

## Remove liquidity:

### 0. "Decrease allowance" transaction.
**Currently**: On "Remove liquidity" - opens wallet to sign transaction called "Decrease allowance".
**Should be**: Open "Select amount" window.

### 1. Select amount.
Open window for user to select amount of LP tokens to remove.
Slide bar with pre-set option (trigger on click):
- 25%
- 50%
- 75%
- 100%

### 2. Tip.
Keep advice (Tip) for user:
*Tip: Removing pool tokens converts your position back into underlying tokens at the current rate, proportional to your share of the pool. Accrued fees are included in the amounts you receive.*

### 3. Amount of tokens to recieve.
Show user corresponding amount of each token to recieve, upon removing selected amount of LP tokens.

### 4. Price chart.
Price chart for both tokens:
- 1 tokenA = X tokenB (1 1INCH = 0.000474278 ETH).
- 1 tokenB = X tokenA (1 ETH = 2108.47 1INCH).

### 5. "Approve" button.
- Check if user approved Casper-Swap protocol to spend LP tokens.
- Keep button inactive - if "0" amount selected.
- Make button active - if not approved.
- Make button inactive - once approved.

### 6. "Remove" button.
- Change button text to "Enter amount" - if selected amount is "0".
- Change text back to "Remove" - if selected any value except "0".
- Make button anavailable if user not approve LP tokens spending.

### 7. "Your postion" info.
Under "Remove liquidity" window provide user information about his current LP token:
- Your position.
- Pool share (%).
- TokenA (amount).
- TokenB (amount).

## Personal expirience:

### 1. **Change Tokens button**. Button that change position (up/down) of Tokens (TokenA will be changed for TokebB). It looks like **Refresh page** button. And not very clear what will happen *on click*.
* Suggestions from *Uniswap* and *Raydium*.

### 2. Testing issues.
Currently it's not working full cycle.
So it's nearly impossible to test it fast.

### 3. User guide / test case.
- Prepare step-by-step guide for user.
Could be used as test case.