adding correct toolpit text and cleaning

explorer/src/api/index.ts

@@ -94,17 +94,6 @@ export class Api {
     return res.json();
   };
 
-  // static fetchGatewayByID = async (id: string): Promise<GatewayResponseItem | undefined> => {
-  //   const response = await fetch(`${GATEWAYS_API}/${id}`);
-
-  //   // when the mixnode is not found, returned undefined
-  //   if (response.status === 404) {
-  //     return undefined;
-  //   }
-
-  //   return response.json();
-  // };
-
   static fetchGatewayUptimeStoryById = async (id: string): Promise<UptimeStoryResponse> =>
     (await fetch(`${UPTIME_STORY_API_GATEWAY}/${id}/history`)).json();
 

explorer/src/components/DetailTable.tsx

@@ -6,7 +6,7 @@ import { CopyToClipboard } from '@nymproject/react/clipboard/CopyToClipboard';
 import { Box } from '@mui/system';
 import { cellStyles } from './Universal-DataGrid';
 import { currencyToString } from '../utils/currency';
-import { GatewayEnridedRowType } from './Gateways';
+import { GatewayEnrichedRowType } from './Gateways';
 import { MixnodeRowType } from './MixNodes';
 
 export type ColumnsType = {
@@ -46,7 +46,7 @@ function formatCellValues(val: string | number, field: string) {
 export const DetailTable: React.FC<{
   tableName: string;
   columnsData: ColumnsType[];
-  rows: MixnodeRowType[] | GatewayEnridedRowType[];
+  rows: MixnodeRowType[] | GatewayEnrichedRowType[];
 }> = ({ tableName, columnsData, rows }: UniversalTableProps) => {
   const theme = useTheme();
   return (

explorer/src/components/Gateways.ts

@@ -9,7 +9,7 @@ export type GatewayRowType = {
   location: string;
 };
 
-export type GatewayEnridedRowType = GatewayRowType & {
+export type GatewayEnrichedRowType = GatewayRowType & {
   routing_score: string;
   avg_uptime: string;
   clients_port: number;
@@ -32,7 +32,7 @@ export function gatewayToGridRow(arrayOfGateways: GatewayResponse): GatewayRowTy
 export function gatewayEnrichedToGridRow(
   gateway: GatewayResponseItem,
   report: GatewayReportResponse,
-): GatewayEnridedRowType {
+): GatewayEnrichedRowType {
   return {
     id: gateway.owner,
     owner: gateway.owner,

explorer/src/context/gateway.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { ApiState, GatewayReportResponse, UptimeStoryResponse } from '../typeDefs/explorer-api';
 import { Api } from '../api';
+import { useApiState } from './hooks';
 
 /**
  * This context provides the state for a single gateway by identity key.
@@ -59,47 +60,3 @@ export const GatewayContextProvider: React.FC<GatewayContextProviderProps> = ({
 
   return <GatewayContext.Provider value={state}>{children}</GatewayContext.Provider>;
 };
-
-/**
- * Custom hook to get data from the API by passing an id to a delegate method that fetches the data asynchronously
- * @param id                The id to fetch
- * @param fn                Delegate the fetching to this method (must take `(id: string)` as a parameter)
- * @param errorMessage      A static error message, to use when no dynamic error message is returned
- */
-function useApiState<T>(
-  id: string,
-  fn: (id: string) => Promise<T>,
-  errorMessage: string,
-): [ApiState<T> | undefined, () => Promise<ApiState<T>>, () => void] {
-  // stores the state
-  const [value, setValue] = React.useState<ApiState<T> | undefined>();
-
-  // clear the value
-  const clearValueFn = () => setValue(undefined);
-
-  // this provides a method to trigger the delegate to fetch data
-  const wrappedFetchFn = React.useCallback(async () => {
-    try {
-      // keep previous state and set to loading
-      setValue((prevState) => ({ ...prevState, isLoading: true }));
-
-      // delegate to user function to get data and set if successful
-      const data = await fn(id);
-      const newValue: ApiState<T> = {
-        isLoading: false,
-        data,
-      };
-      setValue(newValue);
-      return newValue;
-    } catch (error) {
-      // return the caught error or create a new error with the static error message
-      const newValue: ApiState<T> = {
-        error: error instanceof Error ? error : new Error(errorMessage),
-        isLoading: false,
-      };
-      setValue(newValue);
-      return newValue;
-    }
-  }, [setValue, fn]);
-  return [value || { isLoading: true }, wrappedFetchFn, clearValueFn];
-}

explorer/src/context/hooks.ts

@@ -1,30 +1,46 @@
 import * as React from 'react';
 import { ApiState } from '../typeDefs/explorer-api';
 
-type WrappedApiFn<T> = () => Promise<ApiState<T>>;
-
+/**
+ * Custom hook to get data from the API by passing an id to a delegate method that fetches the data asynchronously
+ * @param id                The id to fetch
+ * @param fn                Delegate the fetching to this method (must take `(id: string)` as a parameter)
+ * @param errorMessage      A static error message, to use when no dynamic error message is returned
+ */
 export const useApiState = <T>(
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  fn: Function,
+  id: string,
+  fn: (argId: string) => Promise<T>,
   errorMessage: string,
-): [ApiState<T>, WrappedApiFn<T>] => {
-  const [value, setValue] = React.useState<ApiState<T>>();
-  const wrappedFn = React.useCallback(async () => {
+): [ApiState<T> | undefined, () => Promise<ApiState<T>>, () => void] => {
+  // stores the state
+  const [value, setValue] = React.useState<ApiState<T> | undefined>();
+
+  // clear the value
+  const clearValueFn = () => setValue(undefined);
+
+  // this provides a method to trigger the delegate to fetch data
+  const wrappedFetchFn = React.useCallback(async () => {
     try {
+      // keep previous state and set to loading
       setValue((prevState) => ({ ...prevState, isLoading: true }));
-      const data = await fn();
-      setValue({
+
+      // delegate to user function to get data and set if successful
+      const data = await fn(id);
+      const newValue: ApiState<T> = {
         isLoading: false,
         data,
-      });
-      return data;
+      };
+      setValue(newValue);
+      return newValue;
     } catch (error) {
-      setValue({
+      // return the caught error or create a new error with the static error message
+      const newValue: ApiState<T> = {
         error: error instanceof Error ? error : new Error(errorMessage),
         isLoading: false,
-      });
-      return undefined;
+      };
+      setValue(newValue);
+      return newValue;
     }
   }, [setValue, fn]);
-  return [value || { isLoading: true }, wrappedFn];
+  return [value || { isLoading: true }, wrappedFetchFn, clearValueFn];
 };

explorer/src/context/mixnode.tsx

@@ -11,6 +11,7 @@ import {
   UptimeStoryResponse,
 } from '../typeDefs/explorer-api';
 import { Api } from '../api';
+import { useApiState } from './hooks';
 import { mixNodeResponseItemToMixnodeRowType, MixnodeRowType } from '../components/MixNodes';
 
 /**
@@ -153,47 +154,3 @@ export const MixnodeContextProvider: React.FC<MixnodeContextProviderProps> = ({
 
   return <MixnodeContext.Provider value={state}>{children}</MixnodeContext.Provider>;
 };
-
-/**
- * Custom hook to get data from the API by passing an id to a delegate method that fetches the data asynchronously
- * @param id                The id to fetch
- * @param fn                Delegate the fetching to this method (must take `(id: string)` as a parameter)
- * @param errorMessage      A static error message, to use when no dynamic error message is returned
- */
-function useApiState<T>(
-  id: string,
-  fn: (argId: string) => Promise<T>,
-  errorMessage: string,
-): [ApiState<T> | undefined, () => Promise<ApiState<T>>, () => void] {
-  // stores the state
-  const [value, setValue] = React.useState<ApiState<T> | undefined>();
-
-  // clear the value
-  const clearValueFn = () => setValue(undefined);
-
-  // this provides a method to trigger the delegate to fetch data
-  const wrappedFetchFn = React.useCallback(async () => {
-    try {
-      // keep previous state and set to loading
-      setValue((prevState) => ({ ...prevState, isLoading: true }));
-
-      // delegate to user function to get data and set if successful
-      const data = await fn(id);
-      const newValue: ApiState<T> = {
-        isLoading: false,
-        data,
-      };
-      setValue(newValue);
-      return newValue;
-    } catch (error) {
-      // return the caught error or create a new error with the static error message
-      const newValue: ApiState<T> = {
-        error: error instanceof Error ? error : new Error(errorMessage),
-        isLoading: false,
-      };
-      setValue(newValue);
-      return newValue;
-    }
-  }, [setValue, fn]);
-  return [value || { isLoading: true }, wrappedFetchFn, clearValueFn];
-}

explorer/src/pages/GatewayDetail/index.tsx

@@ -3,7 +3,7 @@ import { Alert, AlertTitle, Box, CircularProgress, Grid, Typography } from '@mui
 import { useParams } from 'react-router-dom';
 import { GatewayResponseItem } from '../../typeDefs/explorer-api';
 import { ColumnsType, DetailTable } from '../../components/DetailTable';
-import { gatewayEnrichedToGridRow, GatewayEnridedRowType } from '../../components/Gateways';
+import { gatewayEnrichedToGridRow, GatewayEnrichedRowType } from '../../components/Gateways';
 import { ComponentError } from '../../components/ComponentError';
 import { ContentCard } from '../../components/ContentCard';
 import { TwoColSmallTable } from '../../components/TwoColSmallTable';
@@ -31,14 +31,15 @@ const columns: ColumnsType[] = [
     title: 'Routing Score',
     flex: 1,
     headerAlign: 'left',
-    tooltipInfo: 'Estimated reward per epoch for this profit margin if your node is selected in the active set.',
+    tooltipInfo:
+      'Routing score is relative to that of the network. Each time a gateway is tested, the test packets have to go through the full path of the network (gateway + 3 nodes). If a node in the path drop packets it will affect the score of the gateway and other nodes in the test.',
   },
   {
     field: 'avg_uptime',
     title: 'Avg. Score',
     flex: 1,
     headerAlign: 'left',
-    tooltipInfo: 'Estimated reward per epoch for this profit margin if your node is selected in the active set.',
+    tooltipInfo: 'Is the average routing score in the last 24 hours',
   },
   {
     field: 'host',
@@ -66,7 +67,7 @@ const columns: ColumnsType[] = [
 const PageGatewayDetailsWithState: React.FC<{ selectedGateway: GatewayResponseItem | undefined }> = ({
   selectedGateway,
 }) => {
-  const [enrichGateway, setEnrichGateway] = React.useState<GatewayEnridedRowType>();
+  const [enrichGateway, setEnrichGateway] = React.useState<GatewayEnrichedRowType>();
   const [status, setStatus] = React.useState<number[] | undefined>();
   const { uptimeReport, uptimeStory } = useGatewayContext();
 

explorer/src/typeDefs/explorer-api.ts

@@ -1,7 +1,5 @@
 /* eslint-disable camelcase */
 
-import { UseButtonParameters } from "@mui/base";
-
 export interface ClientConfig {
   url: string;
   version: string;