10101 - New Design

[bonomat]

Vision

10101 is a new bitcoin and lightning wallet infused with self-sovereign trading features. Built on DLCs users can trade BTC/USD using Bitcoin as collateral. Building on this, users are able to hedge parts of their assets into USD. Differently said, using CFDs we allow users to hold parts of their bitcoin stable in USD terms.
The funds in this hedged wallet are transferable over the lightning network.

Design choices

1. Clear actions on the first screen: the main screen should have actions for trading and sending
2. No long transaction history: taken from a tweet from Breez (can't find it anymore): users don't want to see always the whole transaction history. They only want to see if the last transaction, which was sent just now, has been confirmed or not. Only once in a while they want to look up things from the past. Due to this, the tx-history should be hidden/not so prominent
3. Separate wallets: In the long run I see multiple wallets in our app, from on-chain to off-chain to view-only. Transactions and balances from different wallets should not be comingled together. Additionally, assets should be easily transferable from one wallet to the other (but that's a feature :))
4. Navigation: Slim top navigation bar. Instead of buttons we use a slim navigation bar. To reach other main screens you can either click on them or swipe left and right on the main screen.

Screen ideas

Start screen:

• an overview of the wallet with 1-2 tx history
• a drop down to chose which wallet to see
• quick actions for trading
• info/alerts and other actions come below

On-chain wallet

• reachable through swipe right from home screen
• 1-2 transaction visible in history --> needs to be pulled up to see full history: according to a user survey from breez wallet: users don't care about seeing the history at all times, only when sending a tx they wan tto see that it was confirmed.
• 3 buttons: send, receive and qr code scanner
• button next to header: transfer between wallets

Lightning wallet

• same as on-chain wallet
• tx history with more information than on-chain

Hedged ($) wallet

• same as lightning wallet
• is in-fact a lightning wallet
• tx history with more information than on-chain

Trade screen

• reachable through quick action from main screen or through menu
• top navigation: back button to home screen
• top 2 buttons:
  • candle chart
  • orderbook
• middle 3 buttons
  • Position: shows your current position: a combined position view because they always open with the same counterparty
  • Orders: a view on pending orders
  • Trade: historical trades
• Bottom buttons:
  • Buy/Sell: when clicked, menu comes up from bottom which can be expended to full screen, otherwise show the chart at all times
  • Center bottoms:
    • Buy/Sell: allows you to switch between buy and sell
    • dropdown: switch between limited and market. If limited, limited-price is editable
  • Center inputs:
    • Limit price: only editable if limited order.
      • two buttons: best bid/best ask: to get the latest price pre-filled in
    • Contracts:
      • the amount to trade
      • one button inline: chose max available balance
    • margin:
      • the margin needed, editable. when edited will update the contracts, leverage remains fixed
    • leverage:
      • slider between 1 and 5 (maybe more in the future)
  • bottom: needs to be slided up to see
    • information about liquidation price etc
  • Bottom button:
    • Buy/Sell: depends on whether we are in buy or sell
    • on-click opens confirmation screen

[bonomat]

Locked the conversation, wip figma mocks can be found here: https://www.figma.com/file/Sr3SfZ46sZstKjSwftmTtc/10101-v1-based-on-Bitcoin-Wallet-UI-Kit-%26-Design-System?node-id=4254%3A62685&t=yiiJYESKWfyGCqE6-0