Swarm inteface

[Antanasijevic]

use second brain layout with only 6-7 boxes

Box/icon similar to second brain for the following: - LND node - Tribe server - Relay - Proxy server - Meme server - Line = lightning channel - Line = MQTT connection

3 variations of a server icons variety of colors Colored Box with icon and name

[Antanasijevic]

@pitoi Do you think any of these samples may work?

[Evanfeenstra]

@Antanasijevic can you attach the raw icons here?

[Antanasijevic]

@Evanfeenstra Here are PNG icons You can also grab additional icons, and other properties in this figma project https://www.figma.com/file/Bm9JpMST4u9BFeiZdggmZX/Swarm?node-id=508%3A1114

[Evanfeenstra]

@Antanasijevic I think we should have some metadata on each box too. Like a name, a logo, and another area for extra metadata (like how many users are signed up etc). Check out Polar, it has a similar UX to what we are building. https://lightningpolar.com/

[pitoi]

@Antanasijevic this is a quick prototype to test how the functionality works.

[Evanfeenstra]

@Antanasijevic

Ok... requirements are evolving on this, but here is what we know we need:

1. Flowchart like you made above, but with a little more metadata on each box. Remember this is an interface for getting work done. Definitely check out the Polar UI, i think it looks and feels very professional. Each box should have:

   • service name
   • service logo
   • some metadata (like 42 connected clients for relay, for example).

2. When you click on a box, it opens a sidebar with form fields for that box (depending on the type).

3. The Relay sidebar will be the most complex, so maybe you could design that one.

   • List current users (and see their balance)
   • Click on a user and see their name, pubkey, route hint, and invite QR code
   • Add new user

4. A top-level button for adding a new node (like a new LND instance) to the graph. It will also need to connect with others, so this might be a form where there is a dropdown to select other nodes to connect to.

[Antanasijevic]

@Evanfeenstra Thanks Evan, this specification helps a lot, I will now be able to produce pretty detailed first version. Let me put together a mockup with all elements included, and we can continue from there. If that is ok, I may reach out to you in the process of making first version, to consult you about details.

[Antanasijevic]

@Evanfeenstra I have assembled a rough version based on current description. You can check out Figma prototype here https://www.figma.com/proto/Bm9JpMST4u9BFeiZdggmZX/Swarm?node-id=728%3A365&scaling=contain&page-id=508%3A1114&starting-point-node-id=728%3A365

Or check the video preview below. Please let me know when is a good time for a call so we can review it together. Thanks.

https://user-images.githubusercontent.com/13258550/201120318-9c13b940-60da-4de2-a7a4-be04e00f8877.mp4

[Evanfeenstra]

looks amazing @Antanasijevic ! Can we get the PNG logos with their correct colors? or SVGs so we can alter the colors?

[Antanasijevic]

@Evanfeenstra Sure, maybe it is best to go with SVG and switch color in code. I will send you files shortly. Please let me know if you want to connect so we can review it together.

[Antanasijevic]

@Evanfeenstra Here is a link with SVG icons. Beside ones used in mockup, there are few additional icons, in case they are needed.

[Evanfeenstra]

@Antanasijevic I love the designs! Here it is running in the wild http://52.207.79.163:8000/

The next thing we need to build is a channel manager UI for LND

• list your open channels with local and remote balance, available liquidity
  • highlight if a channel balance is low or unbalanced
• open a new channel
• setup alerts for low liquidity (like you could have the swarm send you an email or text if you are running low on one side of a channel)

[Antanasijevic]

@Evanfeenstra Wow, that was fast. Looks great. Please let me know if we can catch up on a call, i may need few additional details.

[Evanfeenstra]

@Antanasijevic sorry i am travelling, so pretty busy. I think we will need:

• add peer (and maybe list peers?)
• add channel
• a list of channels and their local+remote balances
• alerts if channels are low

I think there are probably other UX around this. Again, you might want to check out Polar for inspiration

[kevkevinpal]

Just adding this link as it has a lot of elements that we'd want for the LND portion https://raw.githubusercontent.com/lightninglabs/lightning-terminal/master/app/src/assets/images/screenshot.png

[Antanasijevic]

@Evanfeenstra @kevkevinpal Do you think something like this may work?

[Evanfeenstra]

@Evanfeenstra @kevkevinpal Do you think something like this may work?

looks pretty awesome

[Antanasijevic]

@Evanfeenstra @kevkevinpal Great, thank you. The layout is in the same project, so you can take it from there if no adjustment is needed. https://www.figma.com/file/Bm9JpMST4u9BFeiZdggmZX/Swarm?node-id=508%3A1114&t=h52DepieUe4Lo54g-1