use components in netowrk stats

libs/network-stats/src/components/good-threshold-indicator/good-threshold-indicator.tsx

@@ -1,21 +0,0 @@
-import type { value, goodThreshold } from '../../config/types';
-
-interface GoodThresholdIndicatorProps {
-  goodThreshold: goodThreshold | undefined;
-  value: value;
-}
-
-export const GoodThresholdIndicator = ({
-  goodThreshold,
-  value,
-}: GoodThresholdIndicatorProps) => {
-  return (
-    <div
-      className={`inline-block w-8 h-8 mb-[0.15rem] mr-8 rounded ${
-        (goodThreshold &&
-          (goodThreshold(value) ? 'bg-intent-success' : 'bg-intent-danger')) ||
-        'bg-current'
-      }`}
-    />
-  );
-};

libs/network-stats/src/components/good-threshold-indicator/index.ts

@@ -1 +0,0 @@
-export { GoodThresholdIndicator } from './good-threshold-indicator';

libs/network-stats/src/components/promoted-stats-item/promoted-stats-item.tsx

@@ -1,7 +1,8 @@
 import { Tooltip } from '@vegaprotocol/ui-toolkit';
 import type { StatFields } from '../../config/types';
 import { defaultFieldFormatter } from '../table-row';
-import { GoodThresholdIndicator } from '../good-threshold-indicator';
+import { Card, Indicator, Variant } from '@vegaprotocol/ui-toolkit';
+import { useMemo } from 'react';
 
 export const PromotedStatsItem = ({
   title,
@@ -10,17 +11,26 @@ export const PromotedStatsItem = ({
   value,
   description,
 }: StatFields) => {
+  const variant = useMemo(
+    () =>
+      goodThreshold
+        ? goodThreshold(value)
+          ? Variant.Success
+          : Variant.Danger
+        : Variant.Highlight,
+    [goodThreshold, value]
+  );
   return (
     <Tooltip description={description} align="start">
-      <div className="px-24 py-16 pr-64 border items-center">
+      <Card>
         <div className="uppercase text-[0.9375rem]">
-          <GoodThresholdIndicator goodThreshold={goodThreshold} value={value} />
+          <Indicator variant={variant} />
           <span>{title}</span>
         </div>
         <div className="mt-4 text-h4 leading-none">
           {formatter ? formatter(value) : defaultFieldFormatter(value)}
         </div>
-      </div>
+      </Card>
     </Tooltip>
   );
 };

libs/network-stats/src/components/stats-manager/stats-manager.tsx

@@ -9,6 +9,7 @@ import { Table } from '../table';
 import { TableRow } from '../table-row';
 import { PromotedStats } from '../promoted-stats';
 import { PromotedStatsItem } from '../promoted-stats-item';
+import { Card } from '@vegaprotocol/ui-toolkit';
 
 interface StatsManagerProps {
   envName: string;

libs/network-stats/src/components/table-row/table-row.tsx

@@ -1,6 +1,7 @@
 import { Tooltip } from '@vegaprotocol/ui-toolkit';
 import type { StatFields } from '../../config/types';
-import { GoodThresholdIndicator } from '../good-threshold-indicator';
+import { useMemo } from 'react';
+import { Indicator, Variant } from '@vegaprotocol/ui-toolkit';
 
 export const defaultFieldFormatter = (field: unknown) =>
   field === undefined ? 'no data' : field;
@@ -12,6 +13,15 @@ export const TableRow = ({
   value,
   description,
 }: StatFields) => {
+  const variant = useMemo(
+    () =>
+      goodThreshold
+        ? goodThreshold(value)
+          ? Variant.Success
+          : Variant.Danger
+        : Variant.Highlight,
+    [goodThreshold, value]
+  );
   return (
     <Tooltip description={description} align="start">
       <tr className="border">
@@ -20,7 +30,7 @@ export const TableRow = ({
           {formatter ? formatter(value) : defaultFieldFormatter(value)}
         </td>
         <td className="py-4 px-8">
-          <GoodThresholdIndicator goodThreshold={goodThreshold} value={value} />
+          <Indicator variant={variant} />
         </td>
       </tr>
     </Tooltip>