Design - Flamingo wallet

[Mirabrar-21]

@todo

---

• Created Flamingo wallet Wireframes
  • @input 📦 Flamingo_wallet_wireframes in excalidraw
  • @input 📦 Discord #cypher
  • Created Flamingo wallet Wireframes in figma
  • @output 📦 Flamingo_wallet-v0.0.0 from comment

---

• Created Flamingo wallet Wireframes
  • @input 📦 Github Worklog - 70 feedback
  • @input 📦 Discord worklog - 70
  • Created Flamingo wallet Wireframes in figma
  • @output 📦 Flamingo_wallet-v0.0.1 from comment

---

• Created Flamingo wallet Wireframes
  • @input 📦 Github Worklog - 71 feedback
  • @input 📦 Discord worklog - 71
  • Created Flamingo wallet Wireframes in figma
  • @output 📦 Flamingo_wallet-v0.0.2 from comment

---

• Created Flamingo wallet Wireframes
  • @input 📦 Github Worklog - 72 feedback
  • @input 📦 Discord worklog - 72
  • Created Flamingo wallet Wireframes in figma
  • @output 📦 Flamingo_wallet-v0.0.3 from comment

---

• Created Flamingo wallet Wireframes
  • @input 📦 Github Worklog - 73 feedback
  • @input 📦 Discord worklog - 73
  • Created Flamingo wallet Wireframes in figma
  • @output 📦 Flamingo_wallet-v0.0.4 from comment

---

• Created Flamingo wallet Wireframes
  • @input 📦 Github Worklog - 75 feedback
  • @input 📦 Discord worklog - 75
  • Created Flamingo wallet Wireframes in figma
  • @output 📦 Flamingo_wallet-v0.0.5 from comment

---

• Created Flamingo wallet Wireframes
  • @input 📦 Discord worklog - 76
  • @input 📦 screencastify - feedback video
  • Created Flamingo wallet Wireframes in figma
  • @output 📦 Flamingo_wallet-v0.0.6 from comment
    • next https://github.com/playproject-io/flamingo-wallet/issues/1

[Mirabrar-21]

tasks - 2025.05.14

• Flamingo wallet wireframes
  • made Flamingo wallet wireframes - 4h25min
  • discussion/feedback -15min
  • created new issue and info -10min
  • recorded, updated task and worklog -18min
  • @output 📦 Flamingo wallet - v0.0.0

---

worklog

Worklog-70

---

feedback

---

proposal

[ninabreznik]

Great job, thanks for te first figma version.

• good catch regarding the closing of the modal. I agree, better to have both options available (click outside of the modal or click x for closing)
• regarding the arrows instead of + and - in the transaction lists, I have to say, I would prefer + and - for a simple reason -> it is just easier to translate it in your head if it was an outgoing or incoming transaction when you quickly glimpse through. I noticed this on Revolut when I just skim through the list of transactions, I get a quick feeling of how much I am spending vs getting in. And + and - are so deep in us I don't have to think, while arrows (although) very intuitive, I always need a split of a second to make a translation in my head.
• arrows on Receive and Send buttons (I wonder how reduntant vs necessary are they). My preferred take would be - leave out everything that is not super urgent. The only reason why I maybe would go with them is that maybe some people are not fluent in English (like my dad for example) and arrows can help them remember which one means sending money and which one receiving. But then again - people like my dad won't really be the users of this app. This will manly be nerds and they definitely understand what is send and what receive. So, my vote would be to even leave these arrows out and only go with the text.
• in the all transactions list I would still keep today and yesterday instead of the dates, but the rest of the history, we should have the dates, yes. But I agree, in all transaction list we don't need the date under each transactions, we only need the time there. Also, great idea to add the icon next to the transaction. Although we are in the BTC account, we might forget it and this gives us the information what transactions are we looking at (are they for BTC or for LN). Maybe we could add them next to the amounts. Like a currency. After + or - we could put a currency symbol (btc or ln) and then the amount. I just checked and have that in the Excalidraw, but I used a B symbol (but yours is way more visible). And there I have it before the amount and I would keep it this way.
• in the total wealth section we can just say BTC and then for each (bitcoin or lightning we use the symbol). Technically BTC and LN are bitcoin, just that they are on different networks, so we can say BTC for total and below we use symbols. So, that orange one you chose for bitcoin and the thunder for lightning. And we use this consistently also on all transactions and everywhere we use symbols.
• for the menu: the Contact title was supposed to be contacts but I was just doing some payments in my Revolut and noticed the title Payments would be better, because it is actually about the payments to a concrete person, so just Contacts is not saying what it is. It could also be Transactions, but it is a bit long...
• Send BTC modal:
  • it looks good, but in my version you could decide whether you want to type the amount in btc (and it says how much it is in usd) or the other way around. You know you want to send someone 100 usd and it calculates how much is that in btc. So, this I find very cool and would like to enable this option. I wish wallets had this every time I send btc to someone, but because they don't I need to calculate this somewhere else and then type in the btc amount, when instead I could just type the amount in usd and it would automatically calculate how much is that in btc. So, unless we find an even smoother way, I would keep it the way we have it in Excalidraw, This is also from Revolut and they work with multiple currencies so they worked hard on this type of UX so why not taking ideas from the best :)
  • I know adding a symbol for BTC is redundant because it already says BTC, because payments in crypto can not be reversed I would like to help people not miss something and forgeting they are actually sending money through BTC and not LN network, so maybe we could add a symbol on this send modals (same in lightning)
  • I like the notification about the unsufficient funds, good point
  • you asked about how to add balance to the wallet, it is actually just clicking RECEIVE button and then you can transfer it to yourself from another wallet or someone else can send the funds to you.
• lightning account:
  • I would also remove icons from the create invoice and pay invoice buttons. They are redundant and don't add more info to the buttons. So, in order to keep it simple, let's remove everything that is not super necessary.
  • I would also move the lightning symbol after + or - and between the amount (in the transactions list)
  • send lightning:
    • same as for btc send modal, I would here make an exception and add a symbol for the network (lightning in this case). After the lightning invoice will be pasted here, we will be able to read from it, for whom is it and what is the requested amount. So, after the paste we will display also this. And then the user will be able to click Pay invoice or exit (close the modal?)
      • so, because lightning invoice includes all this information, we can't say Invoice address, because it is technically not an address. See the chat gpt ideas and explanation below

• create lightning (the input field placeholder is same for all the fields, just a minor thing you might have missed)
• details and more: we will go in details in the future, because I am also not sure yet, what exactly will be there. But for now
  • under details we will need to help people backup their Recovery phrase (phrase, not phase)
  • nodes: I wonder why would we introduce a different way of switching between nodes. Isn't it easiest for user to just always use the same component (it helps them, because they already know how to use it from some other section and it is also easier for us because we implement only one component and reuse it)? I know it feels more colorful to use different components, but I wonder if it makes sense from the users perspective. These crypto things are already difficult so I would like that the app is as simple and clean as it can be.
  • your comment in the worklog was that you would want to enable easy switchign between nodes and peers, but then we could at least leave switching between bitcoin and lightning the same as we have it when we switch between the accounts.
• contacts -> rename to payments:
  • in my sketches I didn't add any currency symbols, but we should, I agree,but let's make them consistent (always befor the amount and always an icon instead of text (so orange circle icon instead of btc or B and lightning symbol instead of ln or lightning)
    • I like add button below, but I think intuitively it should be next to search, so then let's also try to move the search below so they are next to each other. I imagine you search if you have this contact already and if not, you add it.
  • Payments/Request should look preferably same as the request in the Accounts/Lightning/Create Invoice because it is the same thing, You are creating an invoice, which means when thinking of one concrete contact in the chat view you are actually requesting the lightning payment.

[Mirabrar-21]

tasks - 2025.05.20

• Flamingo wallet wireframes
  • made Flamingo wallet wireframes and updated - 3h03min
  • discussion/feedback -20min
  • recorded, updated task and worklog -20min
  • @output 📦 Flamingo wallet - v0.0.1

---

worklog

Worklog-71

---

feedback

---

proposal

[ninabreznik]

Thanks for the worklog, @Mirabrar-21!

I have some feedback and some thoughts and will go right into it!

HOME PAGE

• looks great now. The only remaining thing for me at the moment is the symbol on top of the page, above the Accounts title. We now have a B, but maybe it would be better to put an icon there as well. Circle for bitcoin account and thunder for lightning. You can try just the icon or icon and BTC to see which works best.
• Hm, I now checked the Total wealth section and for all together bitcoin and lightning we have BTC and then below we have btc and lightning. I know I last time suggested this, but now I see it doesn't feel rigt. Sorry about that. I thought about it a bit and asked around and I think maybe best would be to go with:
  Total wealth
  BTC 500
  circle icon On-chain: BTC 300
  thunder icon Lightning: BTC 200

Basically they are both bitcoins, so we should reflect that by using the BTC for both amounts, but show they are on a different network with the icons.

Does that sound good to you?

PAYMENT PAGE

• you suggest Pay instead of Payment. I like it. The only worry I have is that Pay might mean you just go there to do some payment and not to check the received payments, because word Pay suggests that while Payments are broader and encompass making and receiving and even requesting payments. Another possibility would be to have Transactions instead of Payments, but to shorten it with Txs (ten it would be as short as Pay but would cover all the use cases: make, receive and request payment). But not sure people would know what Txs stands for. If you want you can think a bit or brainstorm this a bit with chat gpt and see what they suggest and if you find something better, let me know. But I worry that just Pay is maybe not the best, although I would love it to be as it is so nicely short.

SEND BTC modal

• very cool suggestion, I have to say I like the second more (the one with the tabs) because I would probably not know I can switch the input currency with the click on the arrows icon (as shown in the first option). I find this second option fantastic and way better than what Revolut has, so I would be happy to proceed with this one.
• also great point about ehere to put the icon, I agree with you
• you asked if address in send btc is correct term - yes it is, because on-chain network enables paying directly on another person's account (address) while on lightning network the receiver needs to first create an invoice to be able to receive the payment.

PAY INVOICE modal

• just a typo: paste instead of just past
• and there is also this thing that once you paste the lightning invoice string, we will decypher it to read from it the amount requested and some additional info. So, after user pastes the invoice, we will display additional fields (amount, receipient, description and expiration time (we can display when it expires (i.e. 20.6. at 20:14) or we rather display how much time is left (i.e. 29min). Once payee sees all the data they get from pasting the invoice they can double check the amount and other info and only then clicks Pay the invoice.

MONEY REQUESTS

• i like that you started thinking about this, however I was always imagining this wouldn't be a separate thing, but basically part of a chat. So, when a new requests would pop up, the 'chat' with that person would go on top and be marked as 'unread' same as if someone would just send you a new message. But because for now I am not sure if we want to support jsut sending messages or only actions, let's imagine we only send via the chat the payment requests and payment confirmations. and these can be bitcoin or lightning.

But inside of the chat itself we need to figure out how to display these. Something like You have a missed call in Facebbok or Whatsapp or any other messenger. It is basically an autogenerated message (always same) based on what the action was (in the Whatsapp it would be a call that would result with a summary of a call or a missed call message) but in our case it would be a payment request and then after we pay it a payment confirmation. And on the receiver's side it would be You sent this payment request, it is pending and after a new message Payment was done or Invoice has been paid (for lightning) or something like this or because invoices have the expiry date - if the payment hasn't been done until the expiry date it would display a message: Ypour invoice has expired and payment hasn't been made. Do you want to create a new invoice? Something along these lines. But I imagine all this happening in the chat between 2 people and notifications would basically work like in any other messenger - every new action is a new chat message and that pushes that chat up in the list of all the chats and makes them unread (usually bold or somehow sitcking out from other read chats). By chat I here mean a room between 2 people. So, we would then not have a separate notifications just for payment requests I guess which would make things simpler and more lightweight I think. What do you think?

[Mirabrar-21]

tasks - 2025.05.31

• Flamingo wallet wireframes
  • made Flamingo wallet wireframes and updated - 4h11min
  • gathered UX ideas & suggestions - 2h12min
  • discussion/feedback -25min
  • recorded, updated task and worklog -20min
  • @output 📦 Flamingo wallet - v0.0.2

---

worklog

Worklog-72

---

feedback

---

proposal

[ninabreznik]

Thanks @Mirabrar-21, it looks great.

Here are some tiny refinements request:

• in add new contact let's also add another field (nickname). We will then have address and nickname.
• when on Lightning account view, icon should be a Lightning not bitcoin in the circle (this one is for Bitcoin on-chain account view)
• rename Contact menu item to Contacts
• rename Messages on top of Contacts view to Contacts so we have same titles as on menu (users then know where they are more easily and we don't intriduce new words)
• make some better separation between All contacts and All apps (I guess a border around each item ( transactions plus title See all contacts) would make sense)

I will now watch your video and maybe add more comments

• regarding the indication about payment requests or other important messages. I like the solution. Just wondering
  • if after payment request there would be more messages, we would probably still keep that icon there, right, because that important message is still there. Do we remove it once it is read? Or only once it is paid (maybe better).
  • And also, what if there's more requests, do we add a tiny number like they do it on notification icon for how many unread messages you have?
• for See all contacts, we basically throw a user on Contacts page view where they can see all Contacts (and chats)
• for See all apps we should also open a full screen for all apps but I wouldn't make a new button for that or should we? We could make users always access All apps from the home screen. Maybe that's not very user friendly?
• regarding invite link
  • my bad, it is not an invite link, but invite code. So when other side gets that code, they can resolve it in their app (their flamingo or any other app that supports our technology). How? In Flamingo by clicking a + button and ten choosing Add contact and pasting this code in.
    What happens behind the scenes? In the code is users public key and we can now find them on a p2p network and send them a message saying: connect to me + invite code. And they check in their database if they really generated this invite code and if they did, they say: ok, we can connect and they can start exchanging information in p2p way (they send each other immediately a link to their profiles so we can just pull and display data about their name and some other stuff). Hope that makes sense.
    We also can't make this invite a link, because it will be used in different apps (not like Discord invite that is literally only used in Discord)
• so, on Add a contact we need to change the text above the input link to Paste the invite code (not paste the address)
• and maybe we should rename a button from save to connect or add
• regarding the connected and not connected apps. The interesting thing is, this will also be a chat between my Flamingo and this app. And they will send each other different messages, including an connection request and disconnected message. But there will be also other messages, so we will need the time, like with other contacts, to indicate when the last message was sent or received.
  The only difference is that it's an app, not a physical person (another peer), but otherwise everything is more or less the same. Just some different types of messages that will be sent, but otherwise we can display it and treat it as any other contact (just with a logo) and let's separate them, so it's easier to find if one is searching for apps.

Technically we could achieve this also with a filter. Or by using a search bar. Let me know what you think. If we list them like any other contacts, we could technically design them slightly differently (different background color or something) so you can more easily see what's an app and what other contact. In this case, we then wouldn't need another view I mentioned above for All apps but we would just list them all under All contacts. maybe that's actually smooter. I am currently leaning toward tis option so we can keep the app sleek and simple.

• I like the payment requests in the chatroom. Also super sleek to click and expand. I would make it say You requested... instead of Luis Fredrick requested in the Luis's view. But in my view it would look as you suggested.
  The only thing is -if this is a payment request from Luis to me, then when the payment expires, I can't create a new invoice, Luis has to do it. Maybe you could play around and design both view for different scenarios:

  • Luis creates an invoice, I receive it and pay it. What shows up for each side.
  • Next: Luis creates invoice, I don't pay in time and invoice expires.
  • Last: this time I create an invoice, Luis hasn't paid it yet, but it still hasn't expired, so it's pending.

• In the Pay invoice modal we should use a Lightning icon, because we are paying in lightning, not on chain BTC (in the Recipient will get section)

• filter through requests only looks great. If we figure out we need more filters in the future we will add them but so far this is the only thing I can think of.

• very good point about Create invoice - [ ] it needs to be sent somewhere. If you click request Payment in the chatroom it is clear it will be sent to that person. But if you click Create invoice in general, it's not clear for whom is it and it's also not clear if we have the contact we want to send it too, already added. so, we need to do something like with invite code - [ ] share option (share via some other app OR share with your existing contact, Luis for example) or copy button and then we go on and paste it in Whatsapp or wherever.

• and same with Pay invoice - [ ] if we pay an invoice requested by our existing contact, great, it could be just paid through our chatroom by clicking Pay, but if we are useing our Flamingo wallet to pay someone who is not using our technology and is just a regular bitcoin user with account on Binance for example, we can still pay them by pasting the invoice in the Pay invoice section. Because Binance doesn't support our p2p technology, we sadly can't add this person to our contacts in this way. We could still save them and create a chatroom with them, but we would need to treat request payment and other stuff differently because we they won't see our messages, because they don't have the chatroom with us. It's a great poing and we should also think of this edge case, so if you get some inspiration, please do or ask me for more info, because maybe I need to explain more.

[Mirabrar-21]

tasks - 2025.06.07

• Flamingo wallet wireframes
  • made Flamingo wallet wireframes and updated - 4h45min
  • discussion/feedback -38min
  • recorded, updated task and worklog and hackmd -47min
  • @output 📦 Flamingo wallet - v0.0.3

---

worklog

Worklog-73

---

feedback

---

proposal

[ninabreznik]

Hey,

a few things from the previous todos are not completed or there is a minor thing to be fixed:

• rename Contact menu item to Contacts (not done on all the screens)
• make some better separation between All contacts and All apps (I guess a border around each item ( transactions plus title See all contacts) would make sense) (we later said we should merge Contacts and Apps as they are the same things and list them all under Contacts

Maybe it was a bit unclear, so, on the home page we wouldn't have Apps and Contacts separtely but all together, because they are all contacts (showing last 3 or 4) - see version 0. We go back to this view.
When you click See all contacts, we also show all contacts - peers and apps. They are all contacts, just different types, so we can make them look a bit different to differentiate them, but they are listed together.

• indication about payment requests or other important messages - when we have more requests, we could maybe make the number on the side of the icon, not next to it. Like this (but the icon is lightning or bitcoin and not chat icon like on Facebook).

You used bitcoin icon, but in bitcoin (on-chain) there is no invoices, you can request payment, but the other side has to manually transfer the amount. While in lightning, you can't just transfer the funds, you need to make an invoice and then the other side pays that invoice. So, because we in the example use lightning invoices (Luis), we should in the notifications use the lightning icon, not the bitcoin one. If we will have an example for bitcoin payment requests, we can use the bitcoin icon, but to be consistent, we should in this example use the lightning icon (and attach number on the upper right side (like Facebook messenger example shows), not next to it).

• dffferent views for these scenarios:

  • Luis creates an invoice, Angela receive it and pay it. (Luis's view, Angela's view)

  • Next: Luis creates invoice, Angela doesn't pay in time and invoice expires. (Luis's view, Angela's view)

  • Last: this time Angela creates an invoice, Luis hasn't paid it yet, but it still hasn't expired, so it's pending. (Luis's view, Angela's view)

We only have Luis's view, not the other person's view (Me)

• create invoice and share it looks good for the part where we are choosing contacts fro our list, but below, when we share it to other platforms we need to use something that can be shared to (messengers), because sadly we can't share it to Binance or other wallets. So, maybe Signal, Whatsapp, Discord, X, Keet...

• aligning lightning icons in front of the payments (like in btc)

[ninabreznik]

I now watched the video and went through the latest Figma and these are some minor things we could/should fix but otherwise I love it, looks great (also the mini notification numbers look great to me):

• rename from Past Lightning Invoice to Pay Lightning Invoice (this is also how it's written on the button we click to get to this modal, so I think it's great we have the same title, so user knows they are in the right place)
  

• fix the menu (it still says payments instead of contacts)

• input for amount looks better in the preview for create lightning invoice. Maybe tis is how the form should actually look like, instead of those 3 boring input fields I suggested before.

• we need to figure out where to share to (which socials and no Binance and other stuff where we can't share to) and rename from Share files via to Share invoice via

• why do we still need expired if pov is paid invoice?

• we should also consolidate all the todos from this past interactions so we don't forget something we figured out we should do in the process, could you please list them in the next worklog (those that you plan or know we need to still do, thanks)

[Mirabrar-21]

tasks - 2025.06.13

• Flamingo wallet wireframes
  • made Flamingo wallet wireframes and updated - 1h
  • discussion/feedback -15min
  • recorded, updated task and worklog and hackmd -16min
  • @output 📦 Flamingo wallet - v0.0.4

---

worklog

Worklog-75

---

feedback

---

proposal

[ninabreznik]

Ok, I prepared the list of next things we should work on:

• share invoice - we should enable sharing to existing contacts (which you have already done) + copy the invoice string + scan QR code

• qr code - for paying qr code we for now don't need it, because we won't launch on the mobile for now, so users won't use their computers to scan codes in order to pay an invoice or send BTC

• we should unify the design to match the home screen (you asked in the video if we should switch the whole design to the new one, but I asked Alex for the opinion and also my gut feeling says, we should start with the old design and later we can add other themes)

• for Account (under details) we don't have everything figured out yet (Alex is studying this and we will be able to continue once all is clear)

• For More - we for now know only that we will display logs from each node (bitcoin and lightning) and it will look like a terminal logs. I think later we will also enable users to switch to a hosted node (or we will start with a hosted node and enable users to later switch to their own node) so for now I would also still leave out this screen.

• wire-up the app - Once all the tasks above are done (apart for Details and More), you could try to wire up the whole app so we could click around and see how the flow feels and test different scenarios.

[Mirabrar-21]

tasks - 2025.06.21

• Flamingo wallet wireframes
  • updated Flamingo wallet home page- 1h32min
  • discussion/feedback -20min
  • recorded, updated task and worklog -18min
  • @output 📦 Flamingo wallet - v0.0.5

---

worklog

Worklog-76

---

feedback

---

proposal

[Mirabrar-21]

tasks - 2025.06.25

• Flamingo wallet wireframes
  • updated Flamingo wallet home page- 1h02min
  • discussion/feedback video -30min
  • recorded, updated task and worklog -11min
  • @output 📦 Flamingo wallet - v0.0.6

---

worklog

Worklog-77

---

feedback

---

proposal