feat: add status indicator

apps/trading/components/footer/footer.tsx

@@ -1,10 +1,21 @@
+import { useEnvironment } from '@vegaprotocol/environment';
+import { Indicator, Intent } from '@vegaprotocol/ui-toolkit';
 import { Vega } from '../icons/vega';
+import get from 'lodash/get';
 
 export const Footer = () => {
+  const { VEGA_ENV, VEGA_NETWORKS } = useEnvironment();
   return (
     <footer className="px-4 py-2 text-xs border-t border-neutral-300 dark:border-neutral-700">
       <div className="flex justify-between">
-        <div>Status</div>
+        <div>
+          <Indicator
+            variant={
+              get(VEGA_NETWORKS, VEGA_ENV) ? Intent.Success : Intent.Danger
+            }
+          />
+          Status
+        </div>
         <Vega className="w-13" />
       </div>
     </footer>

libs/environment/src/components/network-switcher/network-switcher.tsx

@@ -6,9 +6,12 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
+  Indicator,
+  Intent,
 } from '@vegaprotocol/ui-toolkit';
 import { useEnvironment } from '../../hooks/use-environment';
 import { Networks } from '../../types';
+import get from 'lodash/get';
 
 export const envNameMapping: Record<Networks, string> = {
   [Networks.CUSTOM]: t('Custom'),
@@ -72,7 +75,6 @@ export const NetworkSwitcher = () => {
   const { VEGA_ENV, VEGA_NETWORKS } = useEnvironment();
   const [isOpen, setOpen] = useState(false);
   const [isAdvancedView, setAdvancedView] = useState(false);
-
   const handleOpen = useCallback(
     (isOpen: boolean) => {
       setOpen(isOpen);
@@ -86,6 +88,9 @@ export const NetworkSwitcher = () => {
   return (
     <DropdownMenu open={isOpen} onOpenChange={handleOpen}>
       <DropdownMenuTrigger className="text-white dark:text-white">
+        {VEGA_NETWORKS && VEGA_ENV && (
+          <Indicator variant={getStatusIndicator(VEGA_NETWORKS, VEGA_ENV)} />
+        )}
         {envTriggerMapping[VEGA_ENV]}
       </DropdownMenuTrigger>
       <DropdownMenuContent align="start">
@@ -98,6 +103,7 @@ export const NetworkSwitcher = () => {
                 disabled={!VEGA_NETWORKS[key]}
               >
                 <a href={VEGA_NETWORKS[key]}>
+                  <Indicator variant={getStatusIndicator(VEGA_NETWORKS, key)} />
                   {envNameMapping[key]}
                   <NetworkLabel
                     isCurrent={VEGA_ENV === key}
@@ -122,6 +128,7 @@ export const NetworkSwitcher = () => {
             {advancedNetworkKeys.map((key) => (
               <DropdownMenuItem key={key} data-testid="network-item-advanced">
                 <div className="mr-4">
+                  <Indicator variant={getStatusIndicator(VEGA_NETWORKS, key)} />
                   <Link href={VEGA_NETWORKS[key]}>{envNameMapping[key]}</Link>
                   <NetworkLabel
                     isCurrent={VEGA_ENV === key}
@@ -139,3 +146,10 @@ export const NetworkSwitcher = () => {
     </DropdownMenu>
   );
 };
+
+const getStatusIndicator = (
+  networks: Partial<Record<Networks, string>>,
+  key: Networks
+): Intent => {
+  return get(networks, key) ? Intent.Success : Intent.Danger;
+};