Grin++ (mobile) - Progress update thread by @davidtavarez

Hello, this is my progress update… fasten your seatbelts. :rocket:

Grin++ Mobile Application UI/UX.

After pivoting several UI concepts I came up to the one I would like to use. This one makes use of swipe gestures, tries to simplify actions and keep alive that punk look that we like… let’s see how.

001 - Initial screen: this is the first screen that we see

002 - Login screen: after booting up, we can login into any of our wallets (in this case Personal, Donations and Test…), create a new wallet and restore it. This behavior is also present in the Desktop application.

Also, we can use our fingerprint to login after selecting a wallet.

Create a Wallet: Username, Password, Seed length and you’re good to go.

Restore Wallet: we also can restore a wallet.


PS: I would like to, later, use an encrypted wallet seed to restore it, I don’t like that much the idea of sharing the seed in plain text.

003 - Wallet screen: after the login we see this screen, here we can appreciate our spendable and the “in progress” transactions: Receiving and Sending. If we want to see the complete history we swipe right and for receiving, we swipe left. To see the details of a transaction we just need to make click on the transaction row.

Transaction details: important information regarding the transaction.

Transactions History: Completed transactions: Received and Sent, Cancelled and Coinbase.

Receive/Finalized: We can get this screen by swiping left from the Wallet Screen. Here we could Receive and Finalize a transaction using Slatepack. Also we can Enable and Disable the NFC, the feature here is that we could use proximity to make a transaction, for now this will be only available for Grin++, after making this stable enough I could migrate this to Ironbelly.

We see here a big button with our address, if the wallet is available we will see this button in Green if not, the button will be in Orange. To share your address, you just need to make click like this:

Now, if we want to send Grins, we could swipe up from the Wallet Screen.

004 - Sending screen: from here we can scan the Address using a QR Code, set the amount and choose a Sending method.

Without Interactivity: Offline sending, this is the classical grin method using slatepack.
Using Interactivity: This means that the app will attempt to complete the transaction using Tor, if it fails the slatepack string will be shown. If the user wallet isn’t available (sender or receiver) the button will be disabled like it is in the screenshot.
Through Proximity: In the end this should be like an offline transaction but everything happens wireless (NFC), both sender and receiver should be close to each other.

If everything goes well, we should see this screen:

Grin++ backend running on Android.


Grin++ has been compiled for Android and it’s able to sync after a while, but right now it isn’t stable enough because some device memory issues. Also Tor is properly running on Android.

There is a (unstable) branch for Raspberry Pi too in Grin++ github repository which uses Docker to compile an ARM64 binary. If you know what you’re doing feel free to play a bit with it.

Final thoughts.

First, thanks to @Mokhtar for helping me out to come up with the swiping gestures based wallet screen, I’m sorry for making you and @david suffer with the earliest ugly UIs :rofl:. Now, I will be open to any feedback for the UX/UI (not new features, please) while I’m working on mitigating the memory issues. The code will be released in the next progress update hopefully. At this pace we could have an APK for December. Stay tuned! :wave:

18 Likes

Congratulations man :wave: :wave:

Swipe up left and right…is there mini arrows to guide? :upside_down_face:

Here’s a screencast video:

7 Likes

Awesome, great progress! :rocket:

Regarding the UX, I think that “without interactivity” and “using interactivity” are not what is happening in that case, the question the buttons answer is how the slatepacks will be communicated. There will be interactivity in both cases, and “without interactivity” actually means more manual work (I’d expect it to be less).

3 Likes

Really nice to see ironbelly and grin++ mobile wallets look so cool! The only thing that’s not intuitive to me is the horizontal swiping, i might add something to let the user know he can swipe left and right (maybe tabs or whatever is used on mobiles to let the user know he can do that)

Great job, thanks for the update @davidtavarez :+1:

1 Like

Great work @davidtavarez, very impressive to have this result so quickly!

2 Likes

Realy nice :drooling_face:! The horizontal swipe is fine with me, as long as the screen moves slightly when you press and move left right (so innitiate a swipe), the user will automatically see he can swipe between screens so if implemented correctly it should feel totally intuitive, nice idear @Mokhtar .

1 Like

Nice! “Coinbase” is for mined transactions, right? Must users think of the company when they see that, and most users are not miners, so maybe something along these ideas:

  • hide that tab if it’s empty
  • and/or rename it to Newly Mined or Mined
4 Likes

Regarding the overall design. I think you should look at what BRD wallet and Tari Aurora are doing.
I find both app UX really great in term of setup and global usage.
I’m not fond of the multiple page where it’s not extra clear there is something else on the left and right.
Also I don’t think you need a Coinbase tab.
BRD login:


BRD main screen (unnecessary in your case IMO since there is only Grin):

And Bitcoin main screen:

And here is Tari first setup:

You might also want to look at Argent which I think looks great.
This is just my 2 cents :slight_smile:, design is a very personal thing and it’s your app.

7 Likes

This is really great! Congrats on such results so quickly! I’m looking forward to make Ironbelly and Grin++ Mobile to work together seamlessly!

4 Likes

It’s the other way around, coinbase company name comes from the fact that newly minted coins are called coinbase. Users who are confused by that will have to learn the terminology or something. If the mobile wallet will have coin control it will be important to know which outputs are coinbase. Maybe it can be an advanced feature that gets toggled on though

Awesome! I got two feature requests, if you find the time:

  • Add option to send max amount of coins, as I outlined here.
  • Not directly related to the mobile app; Add a Scan button to manually rescan for outputs. Currently Grin++ requires to resync the chain if there’s a discrepancy in balance (happens quite often). I don’t remember if the back-end for this has been implemented by davidb yet or not, but this is probably the biggest thing missing in Grin++ a the moment.

Cheers.

edit:

  • Option to connect wallet to a remote node.
2 Likes

Now there is two more post to follow the process:

And…

I will keep this thread exclusively for the updates and the app itself.

3 Likes

moved topic to #techtalk .

Some updates.

In short words: now, I will be focused on bringing the mobile app into life! even if I’m not able to deliver all the features that I want for the first release, I’m still very confident we will have a fully functional Grin++ mobile app for December.

13 Likes

Some screenshots now.

16 Likes

Looking great!
Gotta love that 〜(ᵐ‿ʷ)〜 touch at the end (thanks to @grn I guess).

5 Likes

Yes, thanks to @grn I will try to use the Some Grin Emoticons instead of the classic emoticons.

2 Likes

Thanks for using them. I love to see them in the wild.