Nimiq Wallet Demo

[onmax]

Moved to #278

[julianbauer]

Hey Maxi, thanks for putting this together, this will be such a helfpul resource!
I'll comment on your suggested UX improvements, and a bit beyond that on the videos you shared:

[julianbauer]

Buy Fake NIM

Completely agree with you, an interface where users can enter a number and that amount gets added to the balance is perfect. This is not too far from how the original interface for buying via OASIS looked like:

I think it would be cool to bring it as close as possible to this, as even though users right now will have to go through moonpay et al, this would be the most native way to buy within the wallet. Can we mock a bank and identicon (we do have a generic bank icon too)? Can we show the fiat equivalent or would this be too much work? Here's the link to the Figma designs

Commented by Maxi: ✅ Done

Instead of the DEMO banner in the modal, I'd add a note to the whole interface (e.g. where we have the "POS Testnet" note), additionally if we think that's not enough, maybe a little note below the button saying that this is not real money and just for demo purposes.

Commented by Maxi: ✅ Done

Also in the TX list, would be cool to have a [fake bank icon instead of the identicon].(https://www.figma.com/design/D07VHQmmYSaOipkiivRjwv/Wallet-Fiat-Swaps?node-id=756-0&t=Ruacw6pwydVVUxsh-11)

Commented by Maxi: ✅ Done

[onmax]

Thanks @julianbauer. You can also add yourself as reviewer and add a review with request changes option ;)

Instead of the DEMO banner in the modal, I'd add a note to the whole interface (e.g. where we have the "POS Testnet" note), additionally if we think that's not enough, maybe a little note below the button saying that this is not real money and just for demo purposes.

Really nice solution. I will update the designs and propose a wording that we like :).

Also in the TX list, would be cool to have a [fake bank icon instead of the identicon].(figma.com/design/D07VHQmmYSaOipkiivRjwv/Wallet-Fiat-Swaps?node-id=756-0&t=Ruacw6pwydVVUxsh-11)

Yep I think we can do that. For that I believe we need to fake the swap as if the user has used supersimpleswap. I didn't want to add a sss swap since the service is offline for more than a year. Should we really add it?

I believe this swap is only in EUR, so a person from other continent don't care about this feature.

[julianbauer]

Yep I think we can do that. For that I believe we need to fake the swap as if the user has used supersimpleswap. I didn't want to add a sss swap since the service is online for more than a year. Should we really add it?

As we're faking it all anyway, could we just... fake it? Like, we probably have a fixed address for this transaction, couldn't we just replace the identicon with the bank icon? Or am I missing sth?

Commented by Maxi: ✅ Done

[sisou]

I'm against adding a EUR swap, as we are not currently offering that and don't know if we'll ever do again.

[julianbauer]

Stake NIM

Looks good! Probably obvious but 2 things:

• We need some more fake content for the staking pool profile
  Commented by Maxi: ❌ Should be in the staking PR
• The staking interface in the address overview is still the old one, would be great to work with the new, iterated designs here (Figma):
  Commented by Maxi: ❌ Should be in the staking PR

[julianbauer]

@sisou

I'm against adding a EUR swap, as we are not currently offering that and don't know if we'll ever do again.

I'm with you, I wouldn't call it "the EUR swap" or link it to any of the services currently unavailable. It does provide an interface though that I think is nicer and closer to reality than just a single input, and by itself is quite neutral. Considering we have these anyway, why not use them?

Commented by Maxi: ✅ Done!

[julianbauer]

Swap NIM

• Probably makes sense to speed this up a little bit – e.g. just stay for 1-2 seconds on each step
  Commented by Maxi: ✅ Done!
• Before highlighting the BTC tile, first the NIM tile on the left should be filled (to show it's ready)
• You're using the "clap hands" icon for a successful buy experience – for consistency I suggest to use that for the swap as well (or the other way around. I think in the wallet we're using the checkmarks, I do think the hands emoji is nicer though – should then ofc be updated in the wallet too)
  Commented by Maxi: ✅ Done!
• The "Swap successful" toast stays indefinitely, and clicking on it opens the success step in the modal ;)

[julianbauer]

Reduce the balance to a certain amount. For example, $200 in NIM, $1300 in BTC and a few hundred in USD.
Dynamic balance depending on your country. We could use an API that gives an economic index based on a country code to set a balance that fits an average person in that country.

Great ideas, agreed!

Fallback modal

For the fallback modal, we'll come up with a custom design for this. Essentially we want to say "Hey this functionality doesn't exist because this is a demo, but if you're hooked, create a wallet and see the real thing"

Commented by Maxi:

✅ Done!

Fake addresses

Could we just use special characters in the middle of the addresses? Like NQ26 2Y2M XXXX XXXX XXXX XXXX XXXX MDIF 5SKD? That should generate identicons too, right? On top of that we should definitely deactivate all copy functionality (like clicking the address in Receive modal), and add a note to users to not send funds to these addresses because they don't exist

Commented by Maxi:

✅ Done!

NIM	BTC	USDC

[onmax]

The staking interface in the address overview is still the old one, would be great to work with the new, iterated designs here (Figma)

Agreed, but outside of the scope of this PR. The UI will be updated automatically when new designs get implemented.

I'm with you, I wouldn't call it "the EUR swap" or link it to any of the services currently unavailable. It does provide an interface though that I think is nicer and closer to reality than just a single input, and by itself is quite neutral. Considering we have these anyway, why not use them?

I will check how to do it, but I believe I might need to change some code in the application side, which is something I am trying to minimize. I will see how I can do it :)

Probably makes sense to speed this up a little bit – e.g. just stay for 1-2 seconds on each step

No problem

Before highlighting the BTC tile, first the NIM tile on the left should be filled (to show it's ready)

Ok, I think I missed a step in the faking process.

You're using the "clap hands" icon for a successful buy experience – for consistency I suggest to use that for the swap as well (or the other way around. I think in the wallet we're using the checkmarks, I do think the hands emoji is nicer though – should then ofc be updated in the wallet too)

I will update the buy flow with check mark then.

Dynamic balance depending on your country. We could use an API that gives an economic index based on a country code to set a balance that fits an average person in that country.

I will see the easiest way to do it without any impact.

For the fallback modal, we'll come up with a custom design for this. Essentially we want to say "Hey this functionality doesn't exist because this is a demo, but if you're hooked, create a wallet and see the real thing"

Ok, waiting for it.

Could we just use special characters in the middle of the addresses? Like NQ26 2Y2M XXXX XXXX XXXX XXXX XXXX MDIF 5SKD? That should generate identicons too, right? On top of that we should definitely deactivate all copy functionality (like clicking the address in Receive modal), and add a note to users to not send funds to these addresses because they don't exist

It will not generate identicons as I believe the code will say is a invalid address. but I can look for a work-around.

Thanks for you valuable feedback. I have updated the TODOs section in this PR to track progress

[julianbauer]

It will not generate identicons as I believe the code will say is a invalid address. but I can look for a work-around.

Btw I'm basing my assumption on this demo here, where any text creates an identicon. Not sure how applicable this is of course: https://github.com/nimiq/identicons?tab=readme-ov-file

But then, as another workaround, you could use a real address for the identicon, but only show the masked version of it. There's no way to guess the address from the identicon so we should be safe!

[onmax]

Under the hood we are using ValidationUtils.isValidAddress(address) here.

But I think is going to change just the text content that we render and leave the identicon itself with a correct address as you mention

[onmax]

@julianbauer

Working on your feedback now.

I just realized that we didn't think about the receive modal. I am thinking of disabling the receive modal completely and always redirecting to the fallback modal. There is no need to show the receive modal at all in the demo. Let me know if this works for you.

Thanks a lot!

[julianbauer]

@julianbauer

Working on your feedback now.

I just realized that we didn't think about the receive modal. I am thinking of disabling the receive modal completely and always redirecting to the fallback modal. There is no need to show the receive modal at all in the demo. Let me know if this works for you.

Thanks a lot!

Ach, I think it's nice seeing how it looks like. If we mask the address properly like in your screenshot, I think there's value in showing it, just for context.

Commented by Maxi: ✅ Done

[onmax]

The issue now is the QR codes and request link. How should we handle those?

[julianbauer]

I'd suggest to draw the line there: These can be left out :) – show the fallback modal when clicking on them

[onmax]

minor adjustments needed