Draft RoboSats PRO: a frontend for large liquidity providers and advanced RoboSats users.

[Reckless-Satoshi]

Advanced users and large liquidity providers need better tools: a panel/workspace where they track many robots and orders, functions to batch load/save order configurations, further order customization, public order editing, etc. All these features add further complexity to the current frontend and will be very confusing for new users, yet they are critical for RoboSats to grow into a healthy and liquid market. So... Let's create a frontend specifically for advance users!

Let's fork RoboSats frontend into two: RoboSats Basic and RoboSats PRO

RoboSats basic

RoboSats basic (or simply "RoboSats") will stay as is currenctly. See source code in /frontend/src/ . Some of the advanced features included recently can be deleted (e.g., the Customize tab on the MakerPage.js). RoboSats basic must remain clean and easy to use for new users and takers and be as lightway and multiplatform as possible. RoboSats basic will also be eventually available as a Webview app for Android (...and iOS?) currently WIP #170

RoboSats PRO

RoboSats PRO will be a new frontend, designed for Desktop only. RoboSats PRO is a re-factoring of the current app with an added layer of abstraction: a workspace. A workspace is a client-side abstraction that consists of a set of Robot identities (and their orders). A workspace should be easy to export and import from/into the webapp as a file in the local disk. The objective of RoboSats PRO is simple: a user should be able to track the current state of all of his robots and orders with a quick glance (no need to click/scroll.) and interact with the contract of any of them with the click of a button.

We should use our previous learnings from RoboSats basic development and use Create React App w/ Typescript support and stick to best practices.

This issue is intended to discuss users expectations, define app requirements and create a rough draft of how RoboSats PRO must look.

Developing this app/feature is STRONGLY eligible for developer compensation (pilot program)

[Reckless-Satoshi]

To get started, I will roughly describe what I have in mind: "a table with a toolbar on top", not too different of how Google Sheets looks.

On the table (DataGrid)

Each Row of the table is a Robot identity with an active/past order that is being tracked.
Each column on this table can be a param like ["robot_nickname", "robot_token", "has_order", "order_id", "currency", "amount", "amount SATS", "premium", "exchange_rate", "order_state", "current_contract_box_prompt", "etc"]
(just for illustrative purpose, I did not think deeply how this table should look!!).

On the toolbar

The toolbar on the top can have multiple tools, but at least there should be an "Export/Import Workspace" button that will allow users to download a workspace.json file with all of the robots' credentials, active orders, maker order settings, etc. The import button will allow users to recover the full workspace by dropping a workspace.json file.

On the right side (or on a corner)

Embed the current Contract Box (TradeBox.js). So when you click over an order, you see the Contract text prompt and guides, as well as, invoice submission, counterpart chat, etc.

There are many components and utils that can/must be reused from RoboSats basic (e.g. token generation, PGP keys functionalities, currency flags, icons, MakerPage.js, EncryptedChat.js, etc).

Optionally, all robots on the same workspace are derived deterministically from a single master key.

[Reckless-Satoshi]

List of ideas collected from the Telegram:

• Pre-formated chat messages, e.g., "Hey {taker_nick}, this is my {payment_method_1} name: @cooldude" . Each order (row in the tablet) could be assigned one or several pre-formated messages. These will be sent automatically as soon as the chat is connected.
• Algorithmic premium. Makers seem to care about adjusting the premium on their order according to the order size (e.g. if the taker takes $100 the premium is 7%, but if he takes $400 premium is 5%). It is unclear how this sort of not-fixed premium can be displayed in a simple manner for the taker.
• Longer public expiry times: it is only doable since profesional makers can run a node and set their max HTLC expiry time.

[secondl1ght]

Once a design is done for this I might have some time so help develop the front-end.

[dsitti]

Oh nice, in the last days I actually thought more often about how it could look like and started to draw my ideas.
I think I can show my ideas in the next days to see what you guys think about it.
Unfortunately I don't have much experience with React and UI development so far. Understand the basics a bit but want to learn, get better and help :)

[Reckless-Satoshi]

Awesome, I was also thinking on putting forward some initial sketches. But will wait for @dsitti input. Once we have something solid I will luck into splitting the development into small tasks :)

[dsitti]

So here is my first draft:

Order overview:
In the center two tables:

1. ORDER BOOK (overview of all public orders, sortable and filterable)
2. MY ROBOTS (overview of own Robots and orders)

If you click on a row, the order will appear in the detail view below.

Detail view:
Below a detail view of the selected Robot / order with

• Info about selected Robot
• Status of the order
• Note / help for the order
• Details of the order

Toolbar:
At the top a toolbar with buttons:

• Buy / Sell: to see the wanted orders with one click

• Currency: select the currency, maybe via a dropdown menu or a selection list

• Add Robot: generates and opens a new Robot in the detail area

• Trade History: overview of previous trades

• Import Workspace: import a workspace from a saved file

• Export Workspace: exports the current workspace with all Robots and settings in a file

• Settings: opens and show the settings

Settings / Features:

• Generate an order template
• Define automatic chat messages for fiat payments
• Set password to lock the app
• Settings for the tables and views
• Connect to your node: Wallet integration or connection to your Node to automatically create and pay invoices.
  (Less privacy as it can be tracked from which Node all invoices come from? "disposable" wallets would be nice).

Liquidity overview or price chart:
On the left side, price chart or a liquidity overview of the order book, quantity, price, number of orders...
(only simplified, further considerations necessary)

And here is how the individual steps of the trade could look like in the detail view:

Is a first draft, I'm sure I forgot something, could done better or maybe you find the design generally awful...
So I'm open for your opinions and additions, please feel free to criticize :)

[dsitti]

Or here is a slightly modified version, a bit clearer and less colors. I like a little more I must say.

[Reckless-Satoshi]

Or here is a slightly modified version, a bit clearer and less colors. I like a little more I must say.

Hey @dsitti these look beautiful! I have enjoyed discovering every corner of your vision :D This contribution deserves some dev fund Sats. Please, submit an invoice for 100K Sats and long expiration time (make sure to use a proxy node_id or send it via private message in TG).

Some things that I like about this design that we should stick to:

• Single view for everything you really need.
• Order status (0 to 5) as flowchart.
• Compartmentalization and layout.
• History of robots/orders.
• Book depth chat (agree it might be better to not display it by default, as in your second design, or only display it in large displays)

Let's try to also fit a few of these constrains
These designs seems to require 100% new components. Let's constrain the creativity to reuse some of what we have built. Specifically we should try to fit somehow the existing Contract Box (the one that shows the QRs, the EncryptedChat, etc) and the existing Order Book. Why? By reusing some components: we have a smaller code base to maintain (if we fix something on PRO/Basics instantly reflects on the other frontend); users will feel more familiar with both frontends; we will have a working robosats PRO in a shorter time frame. And... if we are not happy about it we can create new component for PRO later on, even once the platform is live.

Some hurdles
The Contract Box we are using in RoboSats Basic is vertical, so we might choose to add it on the right margin. I think its rectangular shape is not great, but we can manage! The flowchart with the steps 0 to 5 (or 0 to 4 as a taker) are really useful and they are not part of the current Contract Box. We might want to include these steps into the current vertical design so they are also shown in RoboSats Basic.

Optimizing real state
A view of the Order Book is very useful as a taker. As a maker (main use case of RoboSats PRO, but not limited to) you might want to look at the book to get a clue of the market conditions, but probably there is no need to have it always displayed. Instead we could simply add a very visible button "View Book. It could display the book we have already created for RoboSats Basic as an pop up windows (MUI Dialog component). That will allow us to more efficiently use the screen real estate for the grid of robots/orders, historical trades, the Contract Box and details of the current selected order. By hiding the Book and optimizing the space use we can even add a new component...

Workspace summary
Some stats that summarize all of the trades made by the workspace robots. E.g. net balance of sold/bought Fiat, net balance of sold/bought Sats, effective premium gathered over market (weighted mean of the premium across all completed orders), etc. Yet this component could also only be shown as a pop up (it is not a must in the default view).

Landing view
Just some quick ideas on how it could look as soon as you visit RoboSats PRO. It could consist of two large squares, on the left one "It's my first time here: create a new workspace". On the right side "I am already a PRO and have a workspace. Drop here your workspace.json".

---

Some other unrelated ideas:

xToken
We can introduce a new concept: the xToken (short for extended token, similar to the concept of xPubKey/xPrivKey). That way every workspace has a single xToken. The xToken can be used to generate deterministically all of the robots using an offset index. An extended token might look like a regular token and we can make it start with xtoken-for easy identification e.g. "xtoken-LspDjUy837RbFxoFRYRai5W3mvWa8q3c" (maybe even add checksum chars at the end?). The derivation of a robot token can be as simple as a concatenation xtoken+index, so the hundredth robot token for the xToken above would be "LspDjUy837RbFxoFRYRai5W3mvWa8q3c-100".

I only missed on @dsitti's draft the button for the pre-formated chat messages :D It's a powerful feature, let's keep it present. EDIT: Oh, I see it is thought to be under "Settings"

I believe we can do a bit better at naming a "workspace". E.g. "Robot garage". Ideas? ^^

[dsitti]

Let's constrain the creativity to reuse some of what we have built. Specifically we should try to fit somehow the existing Contract Box (the one that shows the QRs, the EncryptedChat, etc) and the existing Order Book.

Initially also thought of a vertical detail view. Here, with screenshot of the current components, maybe that would be easier to implement in the first step?.

or with new new design, until i thought, if a horizontal detail view, you can make the tables wider.

probably there is no need to have it always displayed. Instead we could simply add a very visible button "View Book. It could display the book we have already created for RoboSats Basic as an pop up windows (MUI Dialog component). That will allow us to more efficiently use the screen real estate for the grid of robots/orders, historical trades, the Contract Box and details of the current selected order. By hiding the Book and optimizing the space use we can even add a new component...

or maybe with this little symbols to show/hide the different components?

The flowchart with the steps 0 to 5 (or 0 to 4 as a taker) are really useful and they are not part of the current Contract Box. We might want to include these steps into the current vertical design so they are also shown in RoboSats Basic.

I could try to make a component for this, I used Figma for making the drafts and have heard you can create components directly from it? But I have never done/used it before but could try if I make it, but no guarantee on "without bad practice" :D

[Reckless-Satoshi]

I really like these designs. The one with the two OrderPage does not look bad, although these boxes on your design might be too small (in any case we really want to reuse the ContractBox the OrderBox can be redisigned? )

I could try to make a component for this, I used Figma for making the drafts and have heard you can create components directly from it?

I have never used Figma. Is there any way for you to share a link to your draft for collaborative work?

It would be ideal to stick to React MUI components. I am not sure how suited Figma is for it, on a quick look there seems to be some friction: https://mui.com/store/items/figma-react/ (there is a free demo here https://www.figma.com/community/file/912837788133317724 )

[dsitti]

I have never used Figma. Is there any way for you to share a link to your draft for collaborative work?

Also for me first time, but sure, here is a link to view:
https://www.figma.com/file/1gBoB74W35wLD7X2wDEkCT/Robosats-Pro

If anyone want edit permissions ask for a link via TG (@RoboSats). :)

[Reckless-Satoshi]

Hey guys,

It's time to get moving and start writing code towards RoboSats PRO. I am very excited, I think we can build something fun and powerful here.

The setup

I have initialized the /pro route and created a basic framework for the app with placeholders for the components we need. The current plan is to very strongly reuse and share components with RoboSats Basics. I think the idea of a fully customizable viewport with "Widgets" is very powerful. I implemented three demo widgets (order maker, order book and depth chart). A few essential "PRO-only" components are missing: this is the task towards getting PRO ready.

As it stand, both apps (basic and pro) are 'Webpacked' together. They share same i18n files, same package.json, same index.js etc. After a lot of thought I believe this leads to the lowest overhead for development and future maintenance. The only difference between basic and pro is that WebPack will replace /src/basic/main.tsx with /src/pro/main.tsx . The result is that /src/basic has the components that are exclusive to RoboSats Basic, i.e., five "Pages" that wrap /src/components and the NavBar. Then src/pro contains the components that are exclusive to RoboSats PRO, i.e., the Widgets that also wrap our /src/components, a LandingDialog and the Toolbar. See more in #296

Check the live concept at pro.robosats.com

You can have a look at the new route with the placeholders and demo widgets in https://unsafe.robosats.com/pro/
Note that the default layout of this draft is only suited for Desktop ~ 16:10 screens and ~1080p resolution.

I am amazed on how powerful and performant react-grid-layout is. The possibilities are endless and in combination with MUI it will allow us to build something awesome in short time. Give a try to resizing, re-locating the placeholder widgets, then freeze/unfree UI (top right).

RoboSats PRO components and tasks

At the moment, the tasks are highly parallelizable as the new components and widgets should not rely on each other. However, the Robot Table (aka Robot Garage) and its data model are the priority. We should aim for a default workspace layout close to the @dsitti design.

Robot Garage (aka "my robots & orders table")

This component is the core of PRO. It is a table where each row shows a robot with it's active order. We can each row a "slot" in our "garage".

This component needs a new data model: "Garage". A Robot Garage can be something like a list of slots where each is populated by a Robot and its current trade. In addition a Garage has a single extended token for which all other tokens are derived.

interface Garage {
  slots:{robot: Robot, trade: Trade}[];
  xToken:string;
}

this is just a hint, we only will get to know what structure is best once we start working on it

Trade is a yet to implement model that results of storing the response of /api/order/?order_id=XXX (specs . Do not confuse with the Order model (/src/models/Order.model.ts), this model only contain the public view of an order as returned by /api/book (specs). Probably we should rename these models to "Order" (for /api/order ) and "PublicOrder" (for /api/book )

To kick-start this component we SHOULD work over the current /src/components/BookTable.tsx as there is a lot of code we can repurpose (plus this table columns are fully responsive to resizing).

The table columns can be very similar to the ones depicted in @dsitti's draft. To be precise it probably should have at least: [robotAvatar, type:(buy|sell), token (click to copy icon only), amount, currency, premium, pay_methods, current_trade_status, time_to_expiry, preset_message, ...others].

The rows in this table should be selectable (a checkbox in the beginning) so the user can perform an "action" over many Trades at once (e.g. "Pause selected orders"). This table should have a controls builtin (see BookTable and its BookControl component in the header for inspiration). The controls should have a button for "Add new robot" and a drop-down Select for "Actions" (..."pause", "cancel", "export summaries"...) .

Clicking anywhere in the row will make that garage.slot (a robot and its order) to be the one in focus (the Trade Widget will display the TradeBox prompts of the slot in focus)

This component will be in charge of keeping all current trades updated (i.e., fetch /api/order/?order_id... every X seconds), and alert the user (sound? intermittent light in the row?) if an order status changes.

Building the Robot Garage is quite the priority so I am hoping we can start working on it in the next 2-3 weeks and have it ready before the end of the year. If there is not volunteers I will start working on it and share progress once we are done with the new basic NavBar, SettingsPage and RobotPage

Rewarded with 3M Sats ⚡
Dedicated thread #302 (drop a comment there if you want to be assigned)

Trade Box (also for RoboSats Basic)

We need to turn the current /src/components/TradeBox into a reusable functional component that makes use of the new Trade type /src/models/trade.model.ts (read above). This component is currently used on the OrderPage of RoboSats Basic, therefore this work will be useful for both frontends. Refactoring this component into a more reusable functional component probably needs also turning the OrderPage into a functional component. The new TradeBox has to be wrapped into a simple widget for use in RoboSats Pro. These two components are pretty massive and composed themself of many little pieces that can be turned into standalone components (for example, the TradeSummary was already turned into /src/components/TradeBox/TradeSummary.tsx).

Turning both, the OrderPage and the TradeBox into functional components and building the Trade widget is rewarded with 2M Sats ⚡
Dedicated thread #303 (drop a comment there if you want to be assigned)

Settings (also for RoboSats Basic)

A simple For to set user settings: UI fontSize, mode (light|dark), language... Most likely I will build this one in the next couple of week as it is very needed for the next iteration of RoboSats Basic.

Toolbar

A simple component with a few buttons and selectables to: Import / Export a workspace (all: Garage/Layout/Settings/Maker models), add/remove widgets to the viewport and freeze/unfreeze the widgets. Adding and removing widgets via "drag and drop" would be really cool and is pretty easy (here a demo on how to easily implement it with RGL). The RoboSats logo on the top left will fit well as in @dsitti 's draft.

Rewarded with 200K Sats ⚡
Dedicated thread #304 (drop a comment there if you want to be assigned)

Others (low priority)

Garage History: A table with all past trades. Very cool if it generates all time statistics: number of orders, average lifetime premium, total fiat traded, earned Sats asssuming arbitrage over the CEX market ...
Trade Chart: A simple Breadcrumb chart that shows from 1 to 5 the steps of the trade with nice explanations of mouse hover (useful to embed on the OrderPage of RoboSats Basic too).
Message Templates: A list of messages written by the user as templates that can be sent automatically any time a Trade goes into the chat. Very cool if it implements some keywords "E.g. Hey, {peer_nick}, this is my revolut @xxxxx"
Federation table: table that shows info from fetching /api/info for each coordinator. With selectable rows to enable/disable coordinators at will. Relates to #228

These require some of the priority components to be built first. So let's talk more about them once we have a working app.

Some other widgets can be created in the future (very low priority): standalone chat box, tool to generate QR codes from any string, etc...

Other comments

I already failed at developing a frontend from scratch following best practices once :D So I would be very happy if some experienced dev checks over this plan in more depth. Also happy if they volunteer to fully lead RoboSats Pro development (@onelight ? @shattered ? @KoalaSat ?), leading the development would of course be a rewarded task as well.

Mentioning everyone who might potentially be interested on contributing (those who did frontend contributions in the past and participants of this thread):
@onelight
@KoalaSat
@fernandoporazzi
@ShatteredBunny
@fmitjans
@dsitti
@BrodaDemi
@domrishe
@LowEntropyFace
@ozoono

[Renato1478]

Hello everyone!

Following the drafts of @dsitti and comments of @Reckless-Satoshi , I tried my best to create a prototype more close to reality (using MUI patterns and +).

Here's the figma: https://www.figma.com/file/tvll4DmXOj7MWZjP9ywR2P/Robosats-Pro?type=design&node-id=0%3A1&mode=design&t=T2hiL22VX1Ow3H00-1

And here's the interactive prototype: https://www.figma.com/proto/tvll4DmXOj7MWZjP9ywR2P/Robosats-Pro?type=design&node-id=3-1641&t=k2qvQ7sYEg5tKvTu-1&scaling=scale-down&page-id=0%3A1&starting-point-node-id=1%3A2&show-proto-sidebar=1&mode=design

I droped some notes on the design. Also, if you're not familiar with Figma, in the interactive/playable prototype page you can switch FLOW 1 and FLOW 2 in the sidebar.

I separated in 2 alternatives. One (FLOW 1) following the drafts before and showing everything on the screen, and the other one (FLOW 2), I tried to hide unecessary stuff and only show it in dialog boxes, such as the "Create Order" feature.

Please give me some feedback and let me know if there's something to add/remove or improve.

"Original":

Alternative:

These are just some pages of example. In the Figma you can see the entire flow.

• Note 1: Since I'm new to te discussion/project, maybe I forgot to add some core component for this enhancement
• Note 2: Sorry if the colors are ugly, I'm daltonic
• Note 3: I think you can drop comments typing "C" while visualizing in Figma, if not, send a Edit request and I'll accept.