extension
extension copied to clipboard
leather-wallet
Personalize instructions to transfer STX from exchanges
Based on the work to be done for https://github.com/hirosystems/stacks-wallet-web/issues/2251. Both the Fund account step in the onboarding and the Buy page share the same design and interactions. When the user clicks on a non-onramp exchange, they will be shown the Instructions modal with a generic step by step guide to fund their account. Each instance of the instructions is customized with the exchange (icon, title, links within the copy, main button) so that it contextually makes sense.
Additionally, the modal presents the user with their account number and a copy/paste button.
Modal component This modal should follow the existing modal component behavior for scrolling and design styles (background, shadow, etc)
Responsive For the Buy page, we adapt this content to a full page.
Demo Check the demo Check the full content
@markmhx can you check this out and review the copy from @sjwhitely in this Figma? I did a few cuts and edits to make the contextualization work.
@markmhx I am ready to add this modal to my new fund page work, is this ready? Does each provider essentially have the same instructions?
I'm thinking that this content might be best hosted on the website vs. in the app itself, to help with maintenance going forward and reducing how much informational data is in the product itself. Instead of showing a modal, selecting a relevant exchange would simply open up the relevant webpage with a parameter to indicate which is selected (e.g. provider=binance).
Wdyt?
Wdyt?
Sound good to me, will wait for Fer to respond as well. It seems to make sense with how we handle other links in the wallet for a user to get more information. Also, it is easier to implement with how the current active fiat providers are linked to external websites.
I believe we discussed this before and decided to keep it in the app to facilitate the copy/pasting of the wallet's address. But if that's not an issue, moving it to the website sounds good to me.
Good point, though we could also pass the wallet's address as an additional parameter (e.g. provider=binance&address=abcdef...)
Good point, though we could also pass the wallet's address as an additional parameter (e.g.
provider=binance&address=abcdef...)
Yep, I can pass it as a param. Is that what you want to do here? What url should I use in the code as the link?
Yep let's use hiro.so/wallet-faq/exchange-purchase?provider=[PROVIDER_LABEL]&address=[ADDRESS]
@markmhx how do you want to coordinate this with releasing the new fund page? That PR is almost through design and code review. We will be on hold for illustrations here? I was wondering if when the user clicks on the provider tile in the wallet we could actually copy the wallet address at that point and show a toast, rather than sending the address as a param?
@eugeniadigon might you have capacity to take on illustrations for this new FAQ sometime soon?
@fbwoolf I don't think improvements to the FAQ need to block release of the new fund page in general. In fact, @sjwhitely could help integrate it at the URL above when she's back next week as just static text, even if the wallet includes these parameters but they're unused to start.
Then we can keep working in parallel to create illustrations and wire up the code for using the parameters to customize the page's copy per provider.
we could actually copy the wallet address at that point and show a toast, rather than sending the address as a param
That's an option, but then doesn't the user have to look at two places at once to figure out how to get STX and deposit? Vs. just look at the FAQ that opens?
@markmhx I might be missing something, what illustrations are needed for FAQ? We never do illustrations for those 🤔
That's an option, but then doesn't the user have to look at two places at once to figure out how to get STX and deposit? Vs. just look at the FAQ that opens?
I think the copy would just have to let them know on the faq page that their address has been copied so when they click on the button to go the provider they already have their address ...it would just remove the need to have the button on the faq page to copy the address before going to the provider website.
Then we can keep working in parallel to create illustrations and wire up the code for using the parameters to customize the page's copy per provider.
So, we are ok if it goes to a dead page until the content is up? I feel like we should hold on releasing this until the faq page is ready so it is not confusing? The PR still needs to go thru QA so won't likely hold it up long (if at all). Kyran is out and I need his approval on the CR.
I'd suggest waiting to release this new functionality until @sjwhitely is back next week and can help by getting the new FAQ live, even if it's just copy for now. Then we can work on improving this FAQ generally.
@eugeniadigon this is a special FAQ of sorts, and perhaps we shouldn't really be calling it an "FAQ" per se. But we're hoping to host more visual content on the website that serves as an extension of the product experience for getting STX into the wallet from an exchange.
There are more details here in the Notion doc.
I think a regular FAQ, for now, should be ok, just to get the feature live. But to improve this in the future, I'd suggest taking this as a part of a "knowledge hub" mini-site, à la https://learn.rainbow.me/
Still not sure how illustrations could help here, though
Is the idea that we'll have specific instructions for each exchange? I reckon this might quickly become burdensome; exchanges update their UIs all the time (were we to include screenshots), and even our instructions will quickly become outdated (or simply wrong).
Just how much instruction do we think we need to give our users? And, even for the ultra-beginners, is a wall of text the best way to help? How many first time users, unfamiliar with cryptocurrency exchanges, begin their journey in our wallet and need hand holding?
We could instead link to external resources on how to get started. Most exchanges provide these instructions, and they're better than whatever we can write and maintain ourselves.
Could the page designed here be used as a place to share generic, very high-level instruction, and link to external resources with the relevant, in depth help a novice might need?
Could the page designed here be used as a place to share generic, very high-level instruction, and link to external resources with the relevant, in depth help a novice might need?
The idea is to share very high-level instructions, indeed. The text will be 99% the same for all exchanges, as it gives an overview of what needs to be done, without going into the specifics of each exchange or their UIs. The 1% is the customized logo and links to the corresponding exchange. I didn't think about adding relevant links, I think that could be useful: like at the end add a Related links section, for example. If we foresee.
I don't think illustrations will have much impact in this particular case. If the text is too long, we should just cut it to make one short paragraph per action.
@fbwoolf @landitus FAQ here: https://www.hiro.so/wallet-faq/how-do-i-buy-stx-from-an-exchange
