New Home page

[2ndtlmining]

Problem statement

Currently the Home page is straight into a search for the wallet with a lot of information on the screen. Like to split this into two distinct pages. Home Page and Wallet Page. The wallet page will only be triggered once the user has clicked the search. This will hopefully free up some space and have a better UI experience.

Current Home page

The idea is to keep this for now as the Wallet page, but create a new Home page that only displays key and is very clean. Idea is zero state for the user. Thus when they enter wallet in only display the wallet related information.

Information

Like to display the following information on the Home page:

Decentralised Network

Not sure if we can do interactive pie chart of sort but data looking to show

• Nodes:
  • Cumulus Count
  • Nimbus Count
  • Stratus Count
  • Fractus Count
  • Node operators (this is something new looking to count the amount of unique wallets to show decentralisation). Need to use some sort of person icon here
  • Map (if we could do some sort of map that would be awesome) Big if on this one

Network Utilisation

Love to show the data in % based on what we already have today in the current home page:

• Node Utilisation
• CPU Utilisation
• Ram Utilisation
• SSD Utilisation

Application Deployment

Like to highlight some of the applications that is deployed on the Flux network. Again similar to Node counts like to do some sort of Pie chart or icons if possible with the logos if we can some how, but the thinking is:

• Total Application Instances: This will be a raw count
• Wordpress: How many Wordpress instances there are on the Flux network
• Kadena: Amount of Kadena instances on Flux
• Presearch: Amount of Presearch instances on Flux
• Other: Anything that is not Wordpress. Kadena or Presearch

UI

Map Not exactly sure where we place the map, but my thinking was just below the main stats just to show the amount of nodes around the world. Thus what i am looking for is just a number within a country. For example if the US has 3000 nodes just like to show the number, and if possible gradient of colour. Thus darker is more and lighter is less. This data should be obtainable from the API information. Couple ideas on map:

React Maps

• Examples1
• Examples2
• Example 3

API & Calculations

Most of the information above we already have as part of the site, but just displaying it in a different place such as the Utilisation ect. There are couple new pieces of information we dont have yet:

Node Operators: In this example we are looking for the unique count of wallet addresses attached to nodes.

API: https://stats.runonflux.io/fluxinfo?projection=flux,node

Need to count the unique count of: "payment_address"

Application Deployments: This can be achieved by searching for the app deployments based on docker repo for that:

• API: https://stats.runonflux.io/fluxinfo?projection=apps.runningapps.Image
• Sample Code:

We will need to maintain in the Variable file the Docker repo searches to be used in case it changes in the future.

The above will count instances. Suspect for something like wordpress where there is master slave relationship and streamer might need to want to count it differently. The above will count repos with instances. But what we can also do is this:

API:https://api.runonflux.io/apps/globalappsspecifications Sample count code:

This sample code will count how many Wordpress websites hosted. Think we dont need to count individual instances of repo. Might need to do same for Presearch

Spotted another API: https://jetpackbridge.runonflux.io/api/v1/wordpress.php?action=COUNT

Think its not private but hopefully we can use it.

Country Count (Map): Suspect in order to display values on the Map idea we would need values per country. Not sure what information we can put on a map yet, but below is some ideas, depending on how gradular we can get and what makes sense UI wise:

API: https://stats.runonflux.io/fluxinfo?projection=flux,geolocation

Details are available for example:

continentCode":"EU","country":"Germany","countryCode":"DE","region":"RP","regionName":"Rheinland-Pfalz","lat":50.7159,"lon":7.9805

Sample code for unique addresses:

fetch('https://api.runonflux.io/daemon/viewdeterministiczelnodelist')
  .then(response => response.json())
  .then(data => {
    const uniquePaymentAddresses = new Set();
    data.data.forEach(item => {
      uniquePaymentAddresses.add(item.payment_address);
    });
    console.log(Array.from(uniquePaymentAddresses));
  })
  .catch(error => console.error(error));

[2ndtlmining]

Included now thanks @Usman34266