Changenow section on token page

[bedeho]

We are integrating Changenow imminently, and this will allow people to very easily obtain JOY. We should add a new section to the token page which exposes the buy now widget right on the page, and some context, so as to allow people to start the trade right there.

Requirements

• Add a new section with title: "Instantly Buy or Sell"
• mini title: "INSTANT SWAP"
• Explains the benefits very visibly
  • No signup
  • No KYC
  • Less than 3 minutes.
  • +200 Currencies supported
• Remind the user somehow they need to pick a wallet and install it if the are going to buy JOY.
• Embed some suitable styled widget which is focused on buying JOY by default, but also allows selling.
• Placed after exchange section but before earn section

[msmadeline]

Hey @bedeho I prepared some mockups for the changenow section on the token page. Looking forward to your feedback

➡ figma file https://www.figma.com/file/DBo3NaMYybpCzBqg52j4hU/Token-page?type=design&node-id=38-3411&mode=design&t=LictduhZthx0rWyu-4

[bedeho]

Great work! I think this is a good start.

1. I think the benefits (fast, ..) have to be appear before the swap widget, but while being secondary in terms of attention, so they should not draw attention away from the primary widget by being too salient. I think putting that stuff after the widget means people will just not see it at all before they evaluate whether to engage or not.
2. Be aware that Changenow actually support +900 cryptos, not 200 like I originally stated.
3. Since we are making a custom version of the weidget, it seems anyway, feel free to make it bigger, with bigger input fields and controls.
4. I think expalining the stuff about the wallet after the widget again will not work, people will not see it, and they will fail during the flow. For that reason, I think its more useful to make it so that when the "Swap" button is pressed, then we show a new screen or interface that shows the user that they are about to buy tokens, but that they need to have a wallet to store their tokens. We can ask them if they ahve a wallet where they want to receie the JOY, if they do, we can just proceed as normal, if not, we just tell them to install a specific wallet and come back. I suggest we just tell them to install Talisman. We ahve to make sure to link them to the appropriate appstore or extension store. The user shuold be able to click "I am ready" or something on this interface, to indicate that they now have a wallet.
5. What is supposed to happen when the swap trade begins? Do we stay on the same page? do we go to a new page? this is unclear. I think it would be better if everything happened on the page, so you are not sent anywhere else, can you make it that way?

[msmadeline]

Hey @bedeho I created another interations of the changenow section on a token page. I've also created 2 new user stories. Looking forward to your feedback!

🎥Loom video https://www.loom.com/share/f8beda11a287445bbd3e0b6e42f53724?sid=532df808-e4d3-437b-9486-4b62ab7739f8

➡Figma file: https://www.figma.com/file/DBo3NaMYybpCzBqg52j4hU/Token-page?type=design&node-id=84-26499&mode=design&t=7skR8qJNk9dC3WQ1-4

[bedeho]

1. Lets go with this one: https://www.figma.com/file/DBo3NaMYybpCzBqg52j4hU/Token-page?type=design&node-id=84-27411&mode=design&t=uSg68d9XfrqbvwXM-4
2. Remember that you cannot copy the flow exactly like in Atlas, because in Atlas when the user is buying JOY, the app is automatically providing a JOY address to send the funds to for the user to Changenow, but now we have to allow the user to manually input it, as they will be getting it from their external wallet where they want to store JOY. So we will need a new screen or stage where the user inputs the JOY address where they want to receive funds, remember that this will require input valiation of that address also. Please perhaps also consider double checking that we have not missed any other difference between the Atlas use case and the website use case.
3. It's not clear from the design, but are you suggesting that the rest of the flow happens in a model? I think that should be fine, I just want to make sure I understand.
4. I'm not sure we should tell people to pick Talisman, the reaon is that Talisman is only a browser extension wallet, and people may not like adding that. I think one of the other wallets works both on mobile and desktop, so it has a choice. If we can allow the user to chose between where to install it, that can help a lot. Also making the install a bit more inviting can help. Right now the Talisman brand is really small and hard to perceive. If you go to their website for example, you will see much more compellign ways of selling it visually (https://www.talisman.xyz/). The screen you have adapted was originally made for showing many wallets at once, and having the user pick one. Lastly, lets change "I'm ready" to "My wallet is ready".
5. "Do you have a gitial wallet" => "Do you have a JOY wallet?"

[msmadeline]

@bedeho Hey I've implemented your feedback and updated the user stories about buying/selling JOY from the token page.

🎥 quick Loom: https://www.loom.com/share/04c660084b2f4ce4b03d5f234a25dcae?sid=fd657d94-b9ab-4434-806b-a681669299b9

➡figma file: https://www.figma.com/file/DBo3NaMYybpCzBqg52j4hU/Token-page?type=design&node-id=75-8594&mode=design&t=J7qnZwfq9sCSUXby-4

[bedeho]

Loosk really sharp, I will not review right now, as I think we are going with widget right off the bat, but lets get back to this when we have that nailed.