robosats icon indicating copy to clipboard operation
robosats copied to clipboard

PRO: Toolbar component

Open Reckless-Satoshi opened this issue 2 years ago • 15 comments

This is an excerpt of main thread for RoboSats PRO https://github.com/Reckless-Satoshi/robosats/issues/177#issuecomment-1289175371

Toolbar for RoboSats PRO

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 :zap: drop a comment to be assigned.

Reckless-Satoshi avatar Oct 24 '22 15:10 Reckless-Satoshi

I would like to work on this :)

cdmoss avatar Jan 15 '23 01:01 cdmoss

Nevermind, I'm unable to work on this as I'm having trouble getting the project running on my machine. I followed setup.md:

  • if I try using docker, I get this error in the docker-compose output Image and it just keeps trying to bundle repeatedly, with that same error everytime
  • when I tried without docker, going to robosats.onion.moe redirected me to http://wordle.ayra.ch:8081/wordle-err.html, and unsafe.testnet.robosats.com seems to be a dead link.

I'd love to work on this, so any feedback or guidance on my issues would be greatly appreciated.

cdmoss avatar Jan 15 '23 20:01 cdmoss

Hey @cdmoss , I'm so ashamed to admit I have just now seen this comment. Somehow the notification slipped. I hope you accept my "better late than never"

Nevermind, I'm unable to work on this as I'm having trouble getting the project running on my machine. I followed setup.md:

* if I try using docker, I get this error in the docker-compose output ![Image](https://user-images.githubusercontent.com/40777533/212564231-7c6832d8-3b8d-4d22-bfe2-681848647670.png) and it just keeps trying to bundle repeatedly, with that same error everytime

Looks like /mobile does not exist . NPM scripts also build the frontend into this directory since did the new setup for the Android app. It seems we did not update this docker-compose file back then. Probably an easy fix is to add - ./mobile:/usr/src/mobile on line 10. I will test whether this fixes it and commit a fix of the docker-compose.yml to main.

    volumes:
      - ./frontend:/usr/src/frontend
      - ./mobile:/usr/src/mobile

https://github.com/Reckless-Satoshi/robosats/blob/f00ece6073366b0edfe2ccf6bac00b80ea1d07a8/nodeapp/docker-compose.yml#L1-L10

One could also disable the npm script that compiles the mobile frontend while only RoboSats PRO development is indenteded.

* when I tried without docker, going to robosats.onion.moe redirected me to http://wordle.ayra.ch:8081/wordle-err.html, and unsafe.testnet.robosats.com seems to be a dead link.

Indeed, some of these are down. In any case it is better to not use the requestly hack for development. Still, using unsafe.robosats.com should work. I will research if there is any way to make unsafe.testnet.robosats.com alive again.

Once again my apologies for the very delayed answer! It's a pity to have missed it, there is nothing that motivates me more than new contributors wanting to jump in!

You can join the matrix development group for faster turn-around communication #robosats:matrix.org

Reckless-Satoshi avatar Mar 11 '23 18:03 Reckless-Satoshi

The lastest commit on main fixes the issue https://github.com/Reckless-Satoshi/robosats/commit/2fd4a0123e82d1e68dd2ff90624921eb04d14b2a. To run the frontend-only development environment:

cd nodeapp
docker-compose -f docker-compose-dev.yml up

I also added an example of a simple torified app deployment using the already-built image from docker hub (docker-compose.yml)

@cdmoss, I am assigning you to the task. However, given the lengthy amount of time that has passed, I would understand if you have different priorities now, just let me know!

Reckless-Satoshi avatar Mar 11 '23 19:03 Reckless-Satoshi

Hey no worries at all :) I just saw this. Thank you so much for getting back to me! I'm pretty swamped with school work right now, but I'll definitely make some time to work on this within the next week.

cdmoss avatar Mar 16 '23 16:03 cdmoss

I'm pretty swamped with school work right now

You probably know by now that this feature is not top priority :D So no rush at all. Join us in #robosats:matrix.org , there are some preliminary work to get this Toolbard done that might stilll be missing, we can draft a plan over there.

Reckless-Satoshi avatar Mar 17 '23 21:03 Reckless-Satoshi

hey @Reckless-Satoshi I can work on it, can we draft a plan?

murillo94 avatar Mar 17 '24 17:03 murillo94

Saw the draft. If I'm understanding right this will not be a front-end only work.

Do we have routes for trade history already, or it will be added later as it's a low priority feature?

I also can work on it if necessary.

Renato1478 avatar Mar 17 '24 18:03 Renato1478

hey @Reckless-Satoshi I can work on it, can we draft a plan?

Yes, let's move this forward. Have you taken a look at the current https://dex.robosats.com/pro (open in Tor Browser) ? It might not be too easy to work on this toolbar without first having some progress on the other components (specially the Garage) https://github.com/RoboSats/robosats/issues/177#issuecomment-1289175371

Saw the draft. If I'm understanding right this will not be a front-end only work.

Actually, this will be frontend only work! And that's what makes it soo cool, because you will be able to manage many identities at once, yet coordinators will not be able to learn that a single user is controlling several robot identities :rocket:. The "Garage" will be the aggregator of historical data. The Garage will be exported and imported into a workspace.json so users will always backup this file with all of their RoboSats PRO data.

Do we have routes for trade history already ?

Not needed, as you can guess based on what I said before. The PRO frontend will limit each robot to have only one trade. With the robot token you can always get the info of the latest trade. Therefore, calling the existing /api/order to the right coordinator for each of the robot tokens in the garage is enough to craft the full trade history of a PRO user.

The coordinator API is fully ready for all the frontend work needed to get the PRO frontend finished.

Reckless-Satoshi avatar Mar 18 '24 01:03 Reckless-Satoshi

We will review the Sats rewards for all of the existing tasks (i.e, all of the RoboSats PRO tasks), as these were assigned at a time when BTC price was different. The reward for this task (the PRO Toolbar) remains as is.

Reckless-Satoshi avatar Mar 18 '24 01:03 Reckless-Satoshi

Hey guys, just added a UI draft in the #177 issue following @dsitti and @Reckless-Satoshi comments. This draft also includes the toolbar/topbar design. Hope it helps with this enhancement!

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

Also, I think you can drop comments typing "C" while visualizing in Figma.

Renato1478 avatar Mar 19 '24 02:03 Renato1478

Hey @Renato1478, those look veeery clean! :rocket:

I favor a default layout similar to flow 1. I think it is best to avoid placing the core components on Dialogs (such as the Trade box or order details), so they can always be visible. I see however a very good point to leave the Settings component as a Dialog.

A core idea I had in the back of my head for PRO is to let users fully adjust the layout (this feature is already implemented in the dex.robosats.com/pro prototype). The layout is to be saved/restored with the workspace. We can create an awesome default layout following your flow 1 concept to fit great the most common 1920x1080 screens. Those who have multi-screen and like tinkering will certainly love to be able to move, resize, delete and add components to their liking.

Superb job!!

Reckless-Satoshi avatar Mar 20 '24 11:03 Reckless-Satoshi

Hi gentlemen!

Thanks for the feedback @Reckless-Satoshi. Saw the example on dex.robosats.com/pro

Following the example and your comments, I changed a little bit the "FLOW 1" to suit more the desirable concept.

So I added:

  • A onboarding dialog just like in dex.robosats.com/pro
  • A lock/unlock button to change the layout as @Reckless-Satoshi commented before
  • Prototype animation example of drag and drop
  • Buttons on the "Robot Garage": "Export Summary", "Cancel", "Pause"

Here's the result: (my pointer is not showing, too bad)

Screencast from 20-03-2024 19:06:49.webm

This flow example is available on the Figma link. I'll be happy to get your feedback.

Let's make it work!

If this is sufficient to start coding, I might volunteer on this once I finish the #714 issue.

Renato1478 avatar Mar 20 '24 22:03 Renato1478

Let's make it work!

If this is sufficient to start coding, I might volunteer on this once I finish the #714 issue.

It really looks great! I am assigning you. :rocket: :rocket:

I believe we will figure out a way for the components to fit in screen without need for scrolling :ok_hand:

Reckless-Satoshi avatar Mar 22 '24 22:03 Reckless-Satoshi