[AUD-73] Add flags for node operators (#122)

package.json

@@ -20,6 +20,7 @@
     "numeral": "2.0.6",
     "react": "16.13.1",
     "react-chartjs-2": "2.10.0",
+    "react-country-flag": "3.0.2",
     "react-custom-scrollbars": "4.2.1",
     "react-dom": "16.13.1",
     "react-helmet": "6.1.0",

src/components/ServiceTable/ServiceTable.module.css

@@ -30,4 +30,8 @@
 
 .error > * {
   padding: 0;
-}
+}
+
+.countryFlag {
+  margin: var(--unit-2);
+}

src/components/ServiceTable/ServiceTable.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import clsx from 'clsx'
+import ReactCountryFlag from 'react-country-flag'
 import { NodeService, ContentNode, DiscoveryProvider } from 'types'
 import styles from './ServiceTable.module.css'
 import Table from 'components/Table'
@@ -46,6 +47,10 @@ const ServiceTable: React.FC<ServiceTableProps> = ({
     return (
       <div className={styles.rowContainer}>
         <div className={clsx(styles.rowCol, styles.colEndpoint)}>
+          <ReactCountryFlag
+            className={styles.countryFlag}
+            countryCode={data.country}
+          />
           {data.endpoint}
         </div>
         <div className={clsx(styles.rowCol, styles.colVersion)}>

src/services/Audius/AudiusClient.ts

@@ -18,7 +18,7 @@ import {
   displayShortAud,
   getAud,
   getWei,
-  getNodeVersion,
+  getNodeMetadata,
   getEthWallet,
   getBlock,
   getBlockNearTimestamp,
@@ -86,7 +86,7 @@ export class AudiusClient {
   static displayShortAud = displayShortAud
   static getAud = getAud
   static getWei = getWei
-  static getNodeVersion = getNodeVersion
+  static getNodeMetadata = getNodeMetadata
 }
 
 window.AudiusClient = AudiusClient

src/services/Audius/helpers.ts

@@ -128,15 +128,21 @@ export function getWei(amount: BigNumber) {
   return amount.mul(Utils.toBN('1000000000000000000'))
 }
 
-export async function getNodeVersion(endpoint: string): Promise<string> {
+type NodeMetadata = {
+  version: string
+  country: string
+}
+
+export async function getNodeMetadata(endpoint: string): Promise<NodeMetadata> {
   try {
-    const version = await fetchWithTimeout(`${endpoint}/health_check`).then(
-      r => r.data.version
+    const { data } = await fetchWithTimeout(
+      `${endpoint}/health_check?verbose=true`
     )
-    return version
+    const { version, country } = data
+    return { version, country }
   } catch (e) {
     console.error(e)
     // Return no version if we couldn't find one, so we don't hold everything up
-    return ''
+    return { version: '', country: '' }
   }
 }

src/store/cache/contentNode/hooks.ts

@@ -67,7 +67,7 @@ export const getFilteredNodes = ({
 // -------------------------------- Helpers  --------------------------------
 
 const processNode = async (node: Node, aud: Audius): Promise<ContentNode> => {
-  const version = await Audius.getNodeVersion(node.endpoint)
+  const { country, version } = await Audius.getNodeMetadata(node.endpoint)
   const isDeregistered = node.endpoint === ''
   let previousInfo = {}
   if (isDeregistered) {
@@ -76,11 +76,13 @@ const processNode = async (node: Node, aud: Audius): Promise<ContentNode> => {
       node.spID
     )
   }
+
   return {
     ...node,
     ...previousInfo,
     type: ServiceType.ContentNode,
     version,
+    country,
     isDeregistered
   }
 }

src/store/cache/discoveryProvider/hooks.ts

@@ -71,7 +71,7 @@ const processDP = async (
   node: Node,
   aud: Audius
 ): Promise<DiscoveryProvider> => {
-  const version = await Audius.getNodeVersion(node.endpoint)
+  const { version, country } = await Audius.getNodeMetadata(node.endpoint)
   const isDeregistered = node.endpoint === ''
   let previousInfo = {}
   if (isDeregistered) {
@@ -85,6 +85,7 @@ const processDP = async (
     ...previousInfo,
     type: ServiceType.DiscoveryProvider,
     version,
+    country,
     isDeregistered
   }
 }

src/types.ts

@@ -29,6 +29,7 @@ export type Node = {
   type: ServiceType
   blockNumber: BlockNumber
   delegateOwnerWallet: Wallet
+  country: string
 }
 
 export type DiscoveryProvider = {