Research a design for 'Tracked contracts' screen

[jbargu]

The node connects to different chains and listens for any on-chain events from the contracts listed in tracked_contracts:

  {
    "name": "eth.mainnet",
    "type": "evm",
    "project": "eth",
    "url": "https://mainnet.infura.io/v3/<project_id>",
    "credentials": {},
    "tracked_contracts": []
  },
  {
    "name": "eth.dev-mainnet-fork",
    "type": "evm",
    "project": "eth",
    "url": "ws://localhost:8545",
    "credentials": {
      "private_key": "<private_key>"
    },
    "tracked_contracts": ["0x3194cBDC3dbcd3E11a07892e7bA5c3394048Cc87"]
  },
  {
    "name": "dev-canvas",
    "type": "substrate",
    "project": "canvas",
    "url": "ws://127.0.0.1:9944",
    "credentials": {
      "private_key": "<private_key>",
      "public_key": "<public_key>"
    },
    "tracked_contracts": ["5FnDzvXcnu3RCtQ3f3RFqaQnVLfcWLZ9FvUURNoPMdmsKZXP"],
  }

The chain can be either EVM or Substrate based. Propose a design for a tab called 'Tracked contracts', which will list chains with the corresponding tracked_contracts. The chains can be enabled/disabled. The contracts can be added/edited (validation of the addresses depending on the chain type) and deleted. User then clicks 'Save and apply', a response is returned by the backend, which should update the frontend as well as show a message box that the call was a success/an error.

Some possible designs:

1) Flat hierarchy, e.g. tabs = chains, contracts are listed below, editing could also be done inline

2) Tree like structure with 2 levels

Personally I would prefer this to be more like 2), on a single screen.

[ZiyedB]

@jbargu I did a small mockup design for this that I believe would work great in term of UX.
I think the 2nd option is good but unfortunately it might be hard to go through things or modify. The first one is nice for that but the tab can be annoying

ideally it would be something similar to this :

One left tab to select the chain you are in ( should visually display the chain on the tab bold & selected , and being the title on the right card ). Thinking that it could filter chain using a small search ( no need for BE it can be a simple filter )

A right card that contains all the tracked contracts inline editable with the + sign to add at the top & and some trash icons to either ( delete all if we want ) or delete per row

Let me know what you think, I can dig more and do a better design if you want or if you guys think it's good we can start going this way.

[ZiyedB]

This is the animation of the right table : https://dribbble.com/shots/4763069-Edit

[jbargu]

@ZiyedB I think it looks good! I appreciate the simplistic design and if need be we can add additional stuff later. The only important thing is that the inline editable textbox should be able to provide error message for incorrect address.

[ZiyedB]

We could change a smidge the design in the right table and instead when pressing edit that would expand or show a popup with the form. I'd check a few other designs that would fit well but I'd go for a popup as this doesn't disturb the user eye and leaves us space for displaying some nice error message

( This is an example of one field here but the idea would be to have the row in a form in here )

[ZiyedB]

I'll probably go with the first as we suggested, when inputing we would just display the error within and not let the user finishing modify the input if invalid