Add Uniswap to token page

[DzhideX]

This PR aims to address the feature proposal outlined here: #878

Changes:

• Add Uniswap to "Where can you buy and sell JOY?" section
• Add a separate section with Uniswap iframe widget

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
joystream-org	✅ Ready (Inspect)	Visit Preview	Jan 20, 2025 1:30pm
joystream-org-storybook	✅ Ready (Inspect)	Visit Preview	Jan 20, 2025 1:30pm
joystream-org-translation	✅ Ready (Inspect)	Visit Preview	Jan 20, 2025 1:30pm

[DzhideX]

So, I've implemented the crux of the feature but I have 2 points I'd like to get clarity on, namely:

• I hadn't initially noticed but the iframe steals the focus on the page as it loads and scrolls down to it. After some research I've come to 2 potential solutions:
  • I can set the display of the iframe to "none" for like 1.5-2s (setTimeout) and then after setting it to "block" it will appear without stealing focus.
  • Potentially, we could show a blurred image of the iframe and a button on top of it. Only by clicking the button to interact with the iframe is the iframe rendered (and subsequently this will trigger the focus).
• leet_joy made some suggestions as well (picture below). My question here is on how we would want to address the copying?
  • He mentions potentially adding a button (maybe instead of the icon?)
  • My idea was to add a onClick handler which saves the address onto the clipboard with a little "successfully saved ${address}` popup message

cc @Lezek123 @leetjoy

[Lezek123]

1. visual separation of widgets and focus stealing

Let me start by saying that the first issue that actually caught my attention was that the 2 swap widgets we have now (Uniswap and ChangeNow) are not very well separated visually, so I experimented a little bit with the styles to see how we can improve it.

One idea I had was to use contrast like below:

Then I realized we can actually kill 2 birds with 1 stone here and solve both the visual separation issue and the iframe issue.
The idea is to to use switchable tabs, ie. users can switch between ChangeNOW and Uniswap (BASE) widget. By default we can display ChangeNOW one, so the Uniswap iframe won't steal focus (it will be hidden). I think ChangeNOW would be a good default also because it's just simpler to use.

2. other improvements

leet_joy made some suggestions as well (picture below). My question here is on how we would want to address the copying?

• He mentions potentially adding a button (maybe instead of the icon?)
• My idea was to add a onClick handler which saves the address onto the clipboard with a little "successfully saved ${address}` popup message

I think we should both change the icon to one which implies copying, like this one for example:

And also add the onClick handler (on the entire "tile" item) as you suggested.

I'm not a design expert, but I think there are a few other visual improvements that would be good to make:

1. Make DEX screener icon bigger. Currently it looks a bit too small, I think 25px (like on the screen above) would work better.
2. Don't use underline for links. Personally I think it doesn't match the website style very well. I suggest using something like the arrow I added on the screen above instead (or perhaps a different tile color?)
3. Use bigger font size for contract address (to match the elements above) and make it shorter. I think 0x8761...198C would be enough (that's also how the contract address is displayed on Uniswap as shown below):
   
4. Use border-radius for the iframe (I suggest 12px) to match the style of other elements.
5. Copying icon as mentioned above

[leetjoy]

I believe Uniswap should be set by default window because volume on Uniswap is much higher than on ChangeNOW
Other than that I agree with @Lezek123 feedback

thanks @Lezek123 @DzhideX for your contributions

[DzhideX]

I believe Uniswap should be set by default window because volume on Uniswap is much higher than on ChangeNOW
Other than that I agree with @Lezek123 feedback

The reason for choosing the Changenow widget as the primary one over the Uniswap one is that the Uniswap one steals the focus, causing the viewport to scroll down to it when the user opens the page. I think it's very apparent in the current version that the user is able to also use uniswap when they scroll to the section due to the new switch component which was added. On top of that, I've also implemented the ability for us to immediately link to the uniswap section by appending ?swap=base to the URL. For the deployment above that would be: https://joystream-dds1nlm6a-joystream.vercel.app/token?swap=base

Thoughts @leetjoy ?

[Lezek123]

Some quick observations:

• Icons in the swap buttons are a little to small, I'd make them at least 45x45
• When I first load the page there seems to be an issue with the ChangeNow icon (it has an ugly white border):
  
  Looks like it can be fixed by CTRL+R (some caching issue I guess?)
• I think it would be good to add some transition on hover to those buttons, for example:
  • inactive -> hover - background changes from #111316 to #6C6CFF slowly (~0.7 - 1s)
  • hover -> inactive - same as above but in opposite direction
  • hover -> active background changes from #6C6CFF to #4038FF quickly (~0.3s)
  • active -> hover - no effect
  • active -> inactive - background changes from #6C6CFF to #111316 quickly (~0.3s)
  • basically: transitions to/from active should be quick, transitions between hover and inactive should be slow
• It should be more clear that via the Uniswap extension you can buy JOY (BASE) and via ChangeNow JOY (Joystream). It's an important distinction because JOYSTREAM (BASE) is not directly usable on Joystream network and requires bridging. Perhaps we can add little subtitles to the switch buttons?
  
  (maybe that's an overkill though, let me know what you think)
• The entire DEX Screener and JOY <> BASE Bridge tiles should be links (not just the arrows)

[Lezek123]

Looks great, nice work 👍
Added just one question/remark about the code.

[Lezek123]

Why are you using role="presentation" here?
I think this actually should be a button and it's not recommended to use role="presentation" for items like that.

[Lezek123]

Thank you, LGTM! 👍