feat: make light-js example a proper debugging tool

[Ivansete-status]

Summary

Provide a "combobox" component that allows easily select the target node in https://examples.waku.org/light-js/

Details

The https://examples.waku.org/light-js/ is great indeed! and I use it very often. However, I think it would be great to make it easier to switch among the different known nwaku nodes.

I suggest having a "combobox/dropdown list" component where the user can easily pick up one of the major nwaku nodes.

For example, there could be the next values: test-ams; test-us; test-hk; prod-ams; prod-us; prod-hk.

I usually get the underlying multiaddress string from the information given by https://fleets.status.im/ although this is not the best source of this information.

Quotes:

@jm-clius: I don't think we should build anything on fleets.status.im - this is simply a handy "cheat list" of nodes, but is not meant to be maintained or be used in any features. @fryorcraken: Maybe the right way is to pull all nodes from DNS discovery to build the drop list

[weboko]

Here I added the easiest solution for now that just takes the first discovered peer and puts it into the input. https://github.com/waku-org/js-waku-examples/pull/250

This solution should be improved and drop-down can be made out of it.

Additionally, I think light-js can be reworked a bit: some CSS styles added and the readability of the code improved.

[fryorcraken]

I would rebrand light-js into a debugging tool and redirect developers on other example which have an "app" usage.

[danisharora099]

rename to debug-lightpush-waku?

(open to suggestions :P)

[fryorcraken]

rename to debug-lightpush-waku?

(open to suggestions :P)

just debug-waku at this point in time as we don't recommend/document the usage of relay.

[danisharora099]

thinking again: debug-waku sounds like a name of a draft PR to investigate a temp bug. waku-debugger perhaps?

[fryorcraken]

event better debugger as we would be in Waku context.

[weboko]

then we should extend the example to keep up with the name:

• [ ] add usage of Store;
• [ ] add usage of Relay (questionable); - not implementing
• [x] show list of peers;
• [ ] expose variables to window.* so that accessible from console;
• [ ] add info in the console about ability to run expressions there;
• [x] add list of peers to dial;
• [x] add input for multiaddr to dial particular peer;

[adklempner]

I will be taking this on

[adklempner]

Weekly Update

• achieved: added peer dropdown, list of connected peers, and button for querying past messages using store
• next: will take on my first issue in js-waku