AB on Nostr: Not sure if this is threading properly and in the correct posted order from the ...
Not sure if this is threading properly and in the correct posted order from the original post... 🤷
Anyways here is a look at the new home screen for v2 so far:
I'll go through and explain some of the changes compared to v1.
So first up I am not a designer by any stretch, but we are currently a team of two, so design is on me for the moment. I think once we get v2 out and stable, we might try and contract a designer to give it a thorough work over.
I am really just going by feel and instinct after having the privilege of working consistently with some world class designers at my day job for a few years now.
I really like having the UI being ultra clean and minimalistic, but that also leaves the app lacking colour and just overall vibe. I think it is lame that most apps basically look the same these days, so I got to thinking of how I could add some vibe, but keep the UI clean. I had the idea of a lava lamp canvas animation that I have wanted to put in an app for ages and I actually found a Codepen that implemented just that! I had to make some modifications to suit what we needed and you can see the results in the above gif. It is obviously a lot smoother when not compressed as a gif.
Ok so in terms of UI elements, we have the buttons on the top left that are always available for quick access for common operations. Lock, Scan(input) and Receive.
The lock button will clear the decrypted session secret from memory and removes the UI, leaving only a "Unlock" button in the centre of the screen. When clicked this will prompt you to enter your passphrase to decrypt your session secret from storage. So that is one major design decision that we changed in v2 is that when you first visit the app, you will be prompted to enter a passphrase. That passphrase will be used to encrypt your session secret which is never stored unencrypted and is only decrypted in memory. The session secret is then used as a kind of app identity and used to encrypt/decrypt all sensitive information in the app. For example we use it when connecting to CLN nodes so that you can restrict your rune auth token to this specific session which provides an extra level of security when handling runes. Down the line we might also use this session secret to derive Nostr identities or just use it for signing DM's that are used for notifications.
Next we have the scan button which takes you to an "Input" route which allows you to use the camera to scan a QR, text input to type/paste a string, image upload to upload saved QR's, and a NFC scanner if it is available on your device (mostly just Android for now).
Still not sure if this is the right icon and name for this route. The idea is that is a universal input for getting info in to the app. It's tricky as it is not just for sending to an invoice or address. The input accepts LNURL Auth and Withdraw as well as Offers which don't all fit cleanly in to a "Send" category. It is not just a scanner either, but hard to convey all of the functionality in a single icon, so I figure the scan icon is the most used and recognisable. Would love some suggestions on this!
Finally the receive button takes you to the receive route:
You select the connection you would like to receive to, whether to generate an invoice or onchain address, or both and then you can input an optional amount. In v1 we had the option to denominate all values in fiat or sats, but for v2 we are opting to make sats the standard. If you do need to create an invoice quickly for a fiat value, you can click the fiat calculator button:
Enter your fiat amount (denomination is set in the settings), click "Set Amount" and it will fill out the amount input with the corresponding amount in sats.
Once you create the payment it will take you to the detail route for that payment with a QR. You can see the tabs on the QR component that allows you to switch between different QR's. If there is both an onchain address and invoice available, we will have a "Unified" option which is a BIP21 QR.
Tomorrow I will go through the new connection flow and explain a little more about how we are thinking about connections in v2.
Anyways here is a look at the new home screen for v2 so far:
I'll go through and explain some of the changes compared to v1.
So first up I am not a designer by any stretch, but we are currently a team of two, so design is on me for the moment. I think once we get v2 out and stable, we might try and contract a designer to give it a thorough work over.
I am really just going by feel and instinct after having the privilege of working consistently with some world class designers at my day job for a few years now.
I really like having the UI being ultra clean and minimalistic, but that also leaves the app lacking colour and just overall vibe. I think it is lame that most apps basically look the same these days, so I got to thinking of how I could add some vibe, but keep the UI clean. I had the idea of a lava lamp canvas animation that I have wanted to put in an app for ages and I actually found a Codepen that implemented just that! I had to make some modifications to suit what we needed and you can see the results in the above gif. It is obviously a lot smoother when not compressed as a gif.
Ok so in terms of UI elements, we have the buttons on the top left that are always available for quick access for common operations. Lock, Scan(input) and Receive.
The lock button will clear the decrypted session secret from memory and removes the UI, leaving only a "Unlock" button in the centre of the screen. When clicked this will prompt you to enter your passphrase to decrypt your session secret from storage. So that is one major design decision that we changed in v2 is that when you first visit the app, you will be prompted to enter a passphrase. That passphrase will be used to encrypt your session secret which is never stored unencrypted and is only decrypted in memory. The session secret is then used as a kind of app identity and used to encrypt/decrypt all sensitive information in the app. For example we use it when connecting to CLN nodes so that you can restrict your rune auth token to this specific session which provides an extra level of security when handling runes. Down the line we might also use this session secret to derive Nostr identities or just use it for signing DM's that are used for notifications.
Next we have the scan button which takes you to an "Input" route which allows you to use the camera to scan a QR, text input to type/paste a string, image upload to upload saved QR's, and a NFC scanner if it is available on your device (mostly just Android for now).
Still not sure if this is the right icon and name for this route. The idea is that is a universal input for getting info in to the app. It's tricky as it is not just for sending to an invoice or address. The input accepts LNURL Auth and Withdraw as well as Offers which don't all fit cleanly in to a "Send" category. It is not just a scanner either, but hard to convey all of the functionality in a single icon, so I figure the scan icon is the most used and recognisable. Would love some suggestions on this!
Finally the receive button takes you to the receive route:
You select the connection you would like to receive to, whether to generate an invoice or onchain address, or both and then you can input an optional amount. In v1 we had the option to denominate all values in fiat or sats, but for v2 we are opting to make sats the standard. If you do need to create an invoice quickly for a fiat value, you can click the fiat calculator button:
Enter your fiat amount (denomination is set in the settings), click "Set Amount" and it will fill out the amount input with the corresponding amount in sats.
Once you create the payment it will take you to the detail route for that payment with a QR. You can see the tabs on the QR component that allows you to switch between different QR's. If there is both an onchain address and invoice available, we will have a "Unified" option which is a BIP21 QR.
Tomorrow I will go through the new connection flow and explain a little more about how we are thinking about connections in v2.