ui+pages: Integrate SubServerStatus component into loop and pool pages

Author: itsrachelfish

app/src/components/history/HistoryPage.tsx

@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 import { usePrefixedTranslation } from 'hooks';
 import { useStore } from 'store';
 import PageHeader from 'components/common/PageHeader';
+import SubServerStatus from 'components/common/SubServerStatus';
 import HistoryList from './HistoryList';
 
 const Styled = {
@@ -14,7 +15,18 @@ const Styled = {
 
 const HistoryPage: React.FC = () => {
   const { l } = usePrefixedTranslation('cmps.history.HistoryPage');
-  const { swapStore } = useStore();
+  const { swapStore, subServerStore } = useStore();
+
+  if (subServerStore.subServers.loop?.disabled) {
+    return <SubServerStatus isDisabled={true} />;
+  } else if (subServerStore.subServers.loop?.error) {
+    return (
+      <SubServerStatus
+        isDisabled={false}
+        errorMessage={subServerStore.subServers.loop.error}
+      />
+    );
+  }
 
   const { Wrapper } = Styled;
   return (

app/src/components/loop/LoopPage.tsx

@@ -5,6 +5,7 @@ import { usePrefixedTranslation } from 'hooks';
 import { useStore } from 'store';
 import { Badge } from 'components/base';
 import PageHeader from 'components/common/PageHeader';
+import SubServerStatus from 'components/common/SubServerStatus';
 import ChannelList from './ChannelList';
 import LoopActions from './LoopActions';
 import LoopTiles from './LoopTiles';
@@ -26,8 +27,20 @@ const LoopPage: React.FC = () => {
     registerSidecarView,
     channelStore,
     nodeStore,
+    subServerStore,
   } = useStore();
 
+  if (subServerStore.subServers.loop?.disabled) {
+    return <SubServerStatus isDisabled={true} />;
+  } else if (subServerStore.subServers.loop?.error) {
+    return (
+      <SubServerStatus
+        isDisabled={false}
+        errorMessage={subServerStore.subServers.loop.error}
+      />
+    );
+  }
+
   const title = (
     <>
       {l('pageTitle')}

app/src/components/pool/PoolPage.tsx

@@ -5,6 +5,7 @@ import { usePrefixedTranslation } from 'hooks';
 import { useStore } from 'store';
 import { Badge, Column, Row } from 'components/base';
 import PageHeader from 'components/common/PageHeader';
+import SubServerStatus from 'components/common/SubServerStatus';
 import AccountSection from './AccountSection';
 import BatchSection from './BatchSection';
 import OrderFormSection from './OrderFormSection';
@@ -34,23 +35,40 @@ const Styled = {
 
 const PoolPage: React.FC = () => {
   const { l } = usePrefixedTranslation('cmps.pool.PoolPage');
-  const { accountStore, orderStore, batchStore } = useStore();
+  const { accountStore, orderStore, batchStore, subServerStore } = useStore();
 
   useEffect(() => {
-    accountStore.fetchAccounts();
-    orderStore.fetchOrders();
-    batchStore.fetchNextBatchInfo();
-    if (!batchStore.batches.size) {
-      // fetch batches if there aren't any in the store
-      batchStore.fetchBatches();
+    if (
+      subServerStore.subServers.pool?.running &&
+      !subServerStore.subServers.pool?.error
+    ) {
+      accountStore.fetchAccounts();
+      orderStore.fetchOrders();
+      batchStore.fetchNextBatchInfo();
+      if (!batchStore.batches.size) {
+        // fetch batches if there aren't any in the store
+        batchStore.fetchBatches();
+      }
+      // start polling when this component is mounted
+      batchStore.startPolling();
     }
-    // start polling when this component is mounted
-    batchStore.startPolling();
+
     // stop polling when this component is unmounted
     return () => {
       batchStore.stopPolling();
     };
-  }, [accountStore, orderStore, batchStore]);
+  }, [accountStore, orderStore, batchStore, subServerStore.subServers.pool]);
+
+  if (subServerStore.subServers.pool?.disabled) {
+    return <SubServerStatus isDisabled={true} />;
+  } else if (subServerStore.subServers.pool?.error) {
+    return (
+      <SubServerStatus
+        isDisabled={false}
+        errorMessage={subServerStore.subServers.pool.error}
+      />
+    );
+  }
 
   const title = (
     <>