hoprnet / hopr-admin Goto Github PK

• Use this project (xDAI to Node PART): https://www.figma.com/file/qjTbRGulmsPBQ2E0aHY7HI/Staking-UI-v3?type=design&node-id=553-3600&mode=design
• each step should be a separate component in src/steps folder
• store state in component (useState)
• if there is something missing in the figma/logic/app, report to Michal
  CREATE SAFE PART:

xDAI to Node PART:

definition of done:

• create a tx proposal
• accept a tx proposal
• reject a tx proposal
• get all txs
• get safe information

Definition of done:

• if a nodes xDai will fall under 0.003, push a notification You xDai level is low, HOPRd node might stop working soon. Top up xDai
• push the notification right away on connect to the node

Definition of Done:

• a table which will take an array as the column data (for the header)

  [{
     name: string,
     key: string,
     searchable: bool,
     sortable: bool,
     width: number (px),
  },{}]
  

• a table with search function (if you can search in a column, should be in the header array)
• a table should accept data from an array of objects
• a 'loading' props which will showi a loader
• a 'No entries' row if there is no entries after it's loaded
• should be based off this table: https://mui.com/material-ui/react-table/ Sorting & selecting

In the component placed here; http://127.0.0.1:5173/steps/node-address add Node ETH address as delegate: this is via endpoint /v1/delegates/ in SAFE Infra. One signature from one owner is sufficient (according to the doc https://safe-transaction-mainnet.safe.global/)

Definition of done:

• create 3 modals: Add alias, Open channel, Send Message
• the modals should replace the Add new alias on the /networking/aliases subpage, and the parallel function on the channels subpage
• add buttons for the 2 modals on the aliases and channels subpages next to other buttons
• add buttons for the 2 modals on the peers table in Actions column in the each row. The PeerId should be populated automatically
• for the Send Message, use the logic from the messages subpage (take it out into the modal component)

Definition of Done:

• on the channels subpage under the channels table add a "sigma" map, like the one on https://network.hoprnet.org/
• the map should be generated from the data already present in the Redux
• connections: only incoming and outgoing channels (to connected node) should be on the map
• nodes around: nodes from peers on the network should be on the map
• your node should be bigger on the map

maybe even adding a node as a delegate?

blocked by hoprnet/hopr-sdk#38.

Overview

As we can export channels as a csv file, we should also support importing multiple channels from a single click of a button.

The idea would be to parse the contents of the csv file into an array which would then be passed to re respective API call to open all the channels in the csv file.

However, specific handling of the csv import will be necessary, as the currently designed API implemented in the near future expects an array of only peerIds and the same amount to fund all channels.

Definition of Done:

• Have a button that opens a popup window (Mui dialog is useful for this) that will ask to upload a csv file or manually input multiple peerIds and an amount to fund all the newly created channels.

Definition of Done:

• channel is funded
• channel is closed
• node is funded
• netowork state changed
• when message is received
• redux slice for notifications (array?)
• there might be other thigs to watch for (WIP)

Tasks:

• metrics page
• #18
• #16
• #17
• #19
• #20
• #21
• #22
• #23
• #61
• Integrate available node statistics from https://network.hoprnet.org/ into the admin interface (I.e. The node runner wants his 24 hours availability to show up in the admin interface.
• Be able to copy the list of peers
• Auto refresh

Sources:

• https://docs.google.com/document/d/1uD9ahRIzG3-7IgcQQbFwlBAlvqMF6cFNp67i4yiyudg/edit
• https://www.notion.so/hoprnet/Admin-UI-improvements-Andrius-28ee59ce08764b429d30916a50c23d37
• hoprnet/hoprnet#4576

• Use this project (INSTALL NODES PART): https://www.figma.com/file/qjTbRGulmsPBQ2E0aHY7HI/Staking-UI-v3?type=design&node-id=553-3600&mode=design
• each step should be a separate component in src/steps folder
• store state in component (useState)
• if there is something missing in the figma/logic/app, report to Michal
  CREATE SAFE PART:

Install Nodes Stepper:

Definition of done:

• no styling, plain html
• 2 tabs incomming/outgoing with #tab-name added to url (use mui tabs)
• on each tab tables with columns: id (from 0 up), peerId, status, dedicated funds, actions
• export (into csv file) buttons on each tab
• aliases displayed in place of peersid (with peer id added as alt attribute in html) in the tables, but not in the export file
• open channel button over outgoing channels table
• close channel button in actions in table
• fund channel button in actions in table
• refresh button needed at the same line as title of the page, button should be on the right

Definition of Done:

• add columns:
  • Last seen, formatted to device local time, format YYYY-MM-DD HH:MM GMT+XX
  • quality
• make the table smaller by changing font-size to 12px or equivalent
• add export button at the top that will generate a csv file of the table

• Use this project (CREATE SAFE PART): https://www.figma.com/file/qjTbRGulmsPBQ2E0aHY7HI/Staking-UI-v3?type=design&node-id=553-3600&mode=design
• each step should be a separate component in src/steps folder
• store state in component (useState)
• if there is something missing in the figma/logic/app, report to Michal

CREATE SAFE PART:

Definition of Done:

• order Menu
• change Menu icons,
• and add Bell Icon to app bar

Definition of done:

• no styling, plain html
• Displays information about your redeemed and unredeemed tickets
• Button: Redeems all your tickets
• add buttons for all sdk tickets functons
• refresh button needed at the same line as title of the page, button should be on the right

Definition of done:

• use of Toastify: https://fkhadra.github.io/react-toastify/use-react-toastify-with-redux
• similar to that: https://codesandbox.io/s/2485wxy78j?from-embed
• when a new notification is added to Redux, show the toast at the bottom right
• if multiple notifications come, add new one at the bottom right and move the last one up by one
• 5s notification time
• support for all types: info, success, warning, error, default
• notifications should have 'seen' (instead of read) and 'new' keys in the object
• if 'x' is clicked on the toast, then 'seen' and 'new' should be true
• if a notification icon is pressed on the app bar, all the notifications should have be mared as 'new: false'
• notification that is not 'seen' should have a background highlight of hopr blue with some transparency
• if you click on the notification in the list in the app bar, it shoud be marked as 'seen: true'
• the number on the notification bell in the app bar should count the 'new: true' notifications
• add more details on the toast than we have at the appbar dropdown

Use this project (STAKING PART): https://www.figma.com/file/qjTbRGulmsPBQ2E0aHY7HI/Staking-UI-v3?type=design&node-id=553-3600&mode=design

• should be a separate component in src/steps folder
• store state in component (useState)
• if there is something missing in the figma/logic/app, report to Michal

Definition of done:
If unable to connect to the node, check the balance of the node:

• if the xDai balance will be below 0.001 then the state.status.error in authSlice should say = 'Unable to connect.\n\nYour xDai balance seems to low to operate the node. Please top up your node.\nAddress: 0xXXXXXXXXXXXXXX \n\n' + JSON.stringify(meta.error);
• if the xDai balance will be over 0.001 then leave the same logic as before

Definition of done:

• new subpage 'requires signature'
• a list of pending transitions to sign in a table on that subpage
• an action button in each row of the table to sign pending transitions
• a list of pending transitions to sign in a notification bar
• when clicked on the pending transition in a notification bar, you get taken to the 'requires signature' subpage
• a check on safe login if new pending transitions are to sign (watcher part?)
• a check every 10s if new pending transitions are to sign (watcher part)

To be done at the last stage of development

Definition of done:

• if a bad apiEndpoint and apiToken are provided in the url, redirect to the connect page and put up a toast with info of bad login credentials

Definition of Done:

• add hamburger to the app-bar
• humberger should show/hide the names of the buttons and it should grow/minimalize the drawer like
• drawer will have 2 states:
  
• only if the drawer is minimalized, then each icon should have a tooltip on the right with the name of the right
• opened/closing of the drawer should nicely slide like it is now
• highlight of the drawer when on a page with hopr blue
• the title of a section should get cut if its too long and ellipsis should be shown

Definition of done:

• should look very similar to the logs we have now on the main page of the Node Admin UI

Definition of done:

• DrawerRight created in the ./src/components folder
• drawer on the right added to the layout of the page in the router.tsx as a prop drawerRight

var routes = [
 {
   path: '/',
   element: (
     <Layout
       drawer
       drawerItems={applicationMap}
       itemsNavbarRight={<ConnectWeb3 />}
       drawerRight={<DrawerRight/>}
     />
   ),
   children: [] as RouteObject[],
 },
];

• Redux connected to the DrawerRight
• at the top, on the tight we should have a refresh button (for refreshing all info)
• at each line of data we should have a refresh button for refreshing specific info. If SDK call updaging that specific field will update more fields, then all the fields from that specific SDK call should be updated.
• Info on the drawer:
  • 'TOTAL' balance: of xDai, wxHOPR (addition of safe and connected nodes to safe)
  • 'TOTAL' balance: number of open channels with differenciations of incoming and outgoing (connected nodes to safe)
  • 'TOTAL' balance: number of tickets with differenciations of redeemed and unredeemed (connected nodes to safe)
  • 'SAFE' balance of xDai, wxHOPR (through safe sdk or wallet)
  • 'NODES' balance of xDai, wxHOPR (through HOPR-SDK)
  • 'NODES' balance: number of open channels with differenciations of incoming and outgoing (connected nodes to safe)
  • 'NODES' balance: number of tickets with differenciations of redeemed and unredeemed (connected nodes to safe)
  • 'WALLET' balance of xDai, xHOPR, wxHOPR (through wallet)
  • 'NODE' balance of xDai, wxHOPR (through HOPR-SDK)
  • 'NODE' balance: number of open channels with differenciations of incoming and outgoing (through HOPR-SDK)
  • 'NODE' balance: number of tickets with differenciations of redeemed and unredeemed (through HOPR-SDK)
  • 'NODE' statistics: next estimated rewards, 24h avail, avail from the https://network.hoprnet.org/dashboard (might need extra REST API endpoint on https://network.hoprnet.org/dashboard)

In the future we will hide data depending on use-case of the application.

Example positioning of element on the right drawer to follow:

Fix the follwoing:

• When copying the url from 1 tab and going onto another, you should be placed in the same part of the application. Now you are always placed on the #incoming tab.
• when logging off on the channels subpage, we get logged in right away with null credentials

Definition of Done:

• connect through WalletConnect as any other MM compatible wallet
• have a possibility of signing transations/sefe req. though WalletConnect

Definition of done:

• redux app slice

     notifications: [
           { 
                 name: 
                 source: 
                 seen: 
                 timeout ?: 
                 url ?: 
           }
      ]
  

• a place to skeep snackbars in an array
• timeout on snackbars
• if you click the notification in the drawer of the bell icon, to goes from seen: false to seen: true
• the bell icon has a counter, it should display the number of unseed notifications
• more to come...

Definition of Done:

• Between notification icon and wallet icon add a safe menu that will look like that:
  
• use Safe icon (not MM)
• In the menu that will be opeded by clicking on the Safe in AppBar, you will list other safes and onClick, you will connect to them

Extra:

• style the current MM field in AppBar in the same way (without the dropdown arrow)

Definition of Done:

• if logged in: connect functionality in the app bar as a switch and disconect button
• if not logged in: connect functionality in the app bar as a switch and login button which will link to connect subpage

Definition of Done: Fix:

• ws (all of them) don't connect if we copy url and paste it in another tab #65
• some messages are added to messages but not to notifications

Definition of done:

• no styling, plain html
• title: Peers seen in the network (${peers.length})
• table with columns: id (from 0 up), peerId, alias, Eligible, Multiaddrs
• refresh button needed at the same line as title of the page, button should be on the right

Expected Behavior

Web sockets should re-connect after page is refreshed

Current Behavior

When you refresh the page initializeMessagesWebsocket and initializeLogsWebsocket are not being called, we should have the useNode behavior if the apiToken and apiEnpoint are valid.

(Optional) Possible Solution

Add the web socket initializers at the useEffect on router.tsx, maybe a code refactor would be needed? As we are working with React.StrictMode, this effect is being called twice but its not being unmounted, so if these actions are added right away we would get four web socket connections (duplicated ones)

Steps to Reproduce

1. Login to node
2. Go to logs page
3. Refresh your browser
4. You still will be logged to the node, but you wont be able to see ant logs

Definition of done:

• no styling, plain html

At the top:

• Table of received messages, each message in seperate div. New messages should have a class 'message-unseen', and seen messages 'message-seen'.
• over each message, you should see timestamp of received message

At the bottom:

• Textfield with a counter and max char input of 500 (use plain mui TextField)
• Textfield for number of hops
• Textfield for a receiver (should work with aliases)
• send button

update auth slice property loginData to use apiEndpoint and apiToken instead of ip and apiKey

definition of done

• all references of ip and apiKey are updated to apiEndpoint and apiToken
• update types for auth slice

Definition of Done:

• check if there are ready to use packages to show the data easly
• show all metris on a Metrics subpage that you can get from getMetrics from the HOPR-SDK

Denifinition of done:

• All store fields are populated in the Redux store
• All sdk functions are linked to Redux Actions in ./store/node/actions

Definition of done:

• Component with expandable place for explanations
• title of the component should be provided as a props
• type (eg 'blue', 'orange') of the component be provided as a props, what will change the className by which colors in styled will be selected to the component (class based, not props based in styled)
• data to the FAQ component should be provided in an array of objects with keys: title, text (text can also take JSX)
• for the Accordion, use the following componet: https://mui.com/material-ui/react-accordion/ styled by styled

Figma: https://www.figma.com/file/qjTbRGulmsPBQ2E0aHY7HI/Staking-UI-v3?type=design&node-id=0-1&mode=design&t=P6A7vm2E0SccYfPq-0

Definition of done:

• add Wrapper subpage to 'DEVELOP' section in the drawer
• mirror the wrapping functonality of the https://wrapper.hoprnet.org/ by writing new code (not a copy/paste) on the new Wrapper subpage

UI:
https://www.figma.com/proto/qjTbRGulmsPBQ2E0aHY7HI/Staking-UI-v3?type=design&node-id=647-6493&scaling=min-zoom&page-id=0%3A1&starting-point-node-id=553%3A3600&show-proto-sidebar=1

Definition of Done:

• Settings subpage
• table showing following entries under name column {
  "includeRecipient"
  "strategy"
  }
• column with selects/dropdowns with all options possible per setting
• save button below the table to change settings which are chosen
• current settings in Redux
• changes to settings done before saving should be kept in useState in the Section
• onClick of Save button, the Redux action should send the new settings to the node and on success, save them to Redux store

Definition of done:

• all buttons work
• the node subpages are not accesible if we are not logged in
• the /?apiEndpoint=http://xxxx&apiToken=xxxxx automatically log you in

Definition of done:

• no styling, plain html
• display the native and HOPR addresses of this node
• display your current HOPR and native balance
• display number of channels
• display number of peers
• display version, network name
• display all info from getInfo
• refresh button needed at the same line as title of the page, button should be on the right

Is your feature related to a problem?

When you try to open payment channel, you need to wait for an half a minute until it will print a message (successfully opened channel). For some users it could be confusing because they need to wait for quite some time.

Describe the feature you'd like

Add additional status called 'pending' when requesting 'channels' in the console.

After opening a channel:

• it will print a message similar to: Opening payment channel is in progress
• it would immediately appear on a channels list with a status pending

Another point:
After it prints a message about a successfully opened channel, I recommend to explain, that it's status is "waiting for commitment" , which means they need to wait until status will change to open so they could send HOP messages.

How is should look like:

Definition of done:

• update Hopr gray button if needed (from future components)
• add HOPR font to the project
• add Safe/Staking subpage to router in Safe-H section

Denifinition of done:

• Done through Ethers 5 and Safe-SDK
• You can create a new safe from a button on http://localhost:3000/develop/safe
• You can add owner to your safe from http://localhost:3000/develop/safe
• Get all safes that an account provided by MM is an owner of

Definition of done:

• no styling, plain html
• table with 4 columns: id (from 0 up), peerId, alias, actions
• import and export (into csv file) buttons
• add alias button
• remove alias button (in actions of the table)
• refresh button needed at the same line as title of the page, button should be on the right

Definition of done:

• work to be done only in Redux or app, no html
• each message should be stored in redux
• each message should have a property 'seen' and 'timestamp'
• there should be a counter of unseen messages in redux