search

blockworks-foundation / mango-ui-v3

Mango Markets V3 UI
https://trade.mango.markets
GNU Affero General Public License v3.0
83 stars 115 forks source link

Swap Page Improvements #123

Closed dafyddd closed 2 years ago

dafyddd commented 2 years ago

It's pretty cool that we have the ability to swap any token on the Mango UI now, but I think the page is a bit sparse and unintuitive for new users. For example, as a new user, I don't immediately know why I should use this on Mango instead of just going to Orca/Raydium/Serum. My first thought is: oh look Mango has a swap thing that's probably just a worse version of some other project that focuses on that exclusively.

@saml33 Can you work on making this a bit more intuitive to use? Maybe, some kind of info to signal that the Swap feature is strictly better than going elsewhere. If you think it's already perfect please say so!

saml33 commented 2 years ago

Yeah, I think the best way to achieve this is to have a great UX. Could also have some text about best range/price etc...

Been thinking about some improvements/features:

  1. Is it necessary to show more than the best route by default or even at all? Matcha do this pretty well

    Screen Shot 2021-12-29 at 9 54 07 am

  2. Users should be able to enter an output amount of tokens as well as an input. Would need to implement the above to achieve this I think

  3. Would be cool to have a chart using prices from both tokens. Any ideas where I could get prices? Coingecko has them but the timestamps are different for each asset. Might not need to be extremely accurate but good to show trending direction. Paraswap do this nicely

    Screen Shot 2021-12-29 at 9 58 03 am

Prism (SOL based swap https://prism.ag/) also does it but not as nice.

Screen Shot 2021-12-29 at 10 05 17 am

  1. Show market data of output token. We could have some basic stats/info on the output token. Matcha do this nicely

    Screen Shot 2021-12-29 at 10 03 12 am

  2. Show trending swaps/performance. Haven't seen any great examples of this but Jupiter have a page for most searched on CoinGecko (SOL eco) and trending on Solscan (whatever trending means). Prism have top/bottom performers by price change. Might be cool to have a combination of price, volume and interest/most searched

@dafyddd @mschneider @tjshipe

dafyddd commented 2 years ago

  1. Right now the multiple routes is the only indication I have of how much Jupiter is helping me. If we got rid of the multiple routes, there would be even fewer visual cues that this swap is superior to just swapping on one site. So I'd say keep the multiple routes unless you can provide the visual cue of Jupiter's value-add in another way.

  2. agreed this would be good. Are you able to do this or do you need help from @tjshipe ?

  3. Not sure about this. How different are the timestamps from coingecko? If close enough we could just make some assumptions and bin them together or something.

  4. This is a good idea. My only worry is we end up with too much info or it becomes cluttered. But I think you should do it any way because we do have a lot of open space.

  5. Good idea.

And here are some small UX things I'm considering.

  1. Would it be too ugly to just add a small statement about Jupiter finding you the best price or something?
  2. When I search for a token, I'm unable to select the token I want from the drop down by just using the up and down arrows or tab as I expect. Can you enable this functionality?
  3. It feels like there is too much precision on values below 1 and there should be commas in very large values. For example swapping for SHIB image

It's hard to make sense of this quickly if I don't have commas. should be an easy fix

It's a bit harder with decimals because there needs to be some notion of value there. We don't need 6 decimals places for USDC values but we might for BTC values because 1e-6 BTC is still 5 cents. Not sure of the solution here except to take into account the value of the coin but that may be hard without having a USD market for every coin!

saml33 commented 2 years ago
  1. What about something like this? Screen Shot 2021-12-29 at 10 53 21 pm

"X other routes" button pops modal

Screen Shot 2021-12-29 at 10 53 54 pm

  1. I've got a branch up with the above design https://github.com/blockworks-foundation/mango-ui-v3/tree/swap-v2. If @tjshipe has time to hook the output token input up that would be helpful

  2. CoinGecko timestamps can be off by a few minutes from what I have seen.

  3. 👍

  4. 👍

  1. Yeah, can do this for sure

  2. Should be able to

  3. Can do.

There are a couple of bugs with the input (can't enter float in the input and max button gets an error on some tokens (SOL and USDC for me). Hoping @tjshipe can take a look

tlrjs commented 2 years ago

@saml33

  1. That looks great 👍

  2. Sure thing. I'll hook it up on your new branch and push it back up.

  3. I'll see if coingecko has a different api for this.

dafyddd commented 2 years ago

I really like the wallet on the side. Can you make it open by default and also have a more elegant slider bar

image

tlrjs commented 2 years ago

~@saml33 the .thin-scroll class or some variation of it might work there~ added the class for now, feel free to change

tlrjs commented 2 years ago

@saml33 took a look at # 2 but jupiter ag doesn't support setting the output amount

saml33 commented 2 years ago

@saml33 took a look at # 2 but jupiter ag doesn't support setting the output amount

@tjshipe – Bummer. Thanks for taking a look at it