updated visualization of farmer state and expected time to win

moved components into the components directory

electron-react/src/components/core/GuestRoute/GuestRoute.tsx → electron-react/src/components/core/components/GuestRoute/GuestRoute.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import { Route, Redirect, RouteProps } from 'react-router-dom';
-import type { RootState } from '../../../modules/rootReducer';
+import type { RootState } from '../../../../modules/rootReducer';
 
 type Props = RouteProps;
 

electron-react/src/components/core/LocaleToggle/LocaleToggle.tsx → electron-react/src/components/core/components/LocaleToggle/LocaleToggle.tsx

@@ -3,7 +3,7 @@ import { Trans } from '@lingui/macro';
 import { useToggle } from 'react-use';
 import { Button, Menu, MenuItem } from '@material-ui/core';
 import { Translate, ExpandMore } from '@material-ui/icons';
-import useLocale from '../../../hooks/useLocale';
+import useLocale from '../../../../hooks/useLocale';
 
 // https://www.codetwo.com/admins-blog/list-of-office-365-language-id/
 const locales: { [char: string]: string } = {

electron-react/src/components/core/ModalDialogs/ModalDialogs.tsx → electron-react/src/components/core/components/ModalDialogs/ModalDialogs.tsx

@@ -1,5 +1,5 @@
 import React, { cloneElement } from 'react';
-import type { Dialog } from '../../../modules/dialog';
+import type { Dialog } from '../../../../modules/dialog';
 
 type Props = {
   dialogs: Dialog[];

electron-react/src/components/core/PrivateRoute/PrivateRoute.tsx → electron-react/src/components/core/components/PrivateRoute/PrivateRoute.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import { Route, Redirect, RouteProps } from 'react-router-dom';
-import type { RootState } from '../../../modules/rootReducer';
+import type { RootState } from '../../../../modules/rootReducer';
 
 type Props = RouteProps;
 

electron-react/src/components/core/components/StateIndicator/StateIndicator.tsx

@@ -0,0 +1,42 @@
+import React, { ReactNode } from 'react';
+import styled from 'styled-components';
+import { FiberManualRecord as FiberManualRecordIcon } from '@material-ui/icons';
+import Flex from '../Flex';
+import State from '../../constants/State';
+import StateColor from '../../constants/StateColor';
+
+const Color = {
+  [State.SUCCESS]: StateColor.SUCCESS,
+  [State.WARNING]: StateColor.WARNING,
+  [State.ERROR]: StateColor.ERROR,
+};
+
+const StyledFiberManualRecordIcon = styled(FiberManualRecordIcon)`
+  font-size: 1rem;
+`;
+
+const StyledFlexContainer = styled(({ color: Color, ...rest }) => <Flex {...rest} />)`
+  color: ${({ color }) => color};
+`;
+
+type Props = {
+  children: ReactNode;
+  state: State;
+  indicator?: boolean;
+};
+
+export default function StateComponent(props: Props) {
+  const { children, state, indicator } = props;
+  const color = Color[state];
+
+  return (
+    <StyledFlexContainer color={color} alignItems="center" gap={1}>
+      <span>
+        {children}
+      </span>
+      {indicator && (
+        <StyledFiberManualRecordIcon />
+      )} 
+    </StyledFlexContainer>
+  );
+}

electron-react/src/components/core/components/StateIndicator/index.ts

@@ -0,0 +1 @@
+export { default } from './StateIndicator';

electron-react/src/components/core/components/index.ts

@@ -0,0 +1,36 @@
+export { default as Accordion } from './Accordion';
+export { default as AdvancedOptions } from './AdvancedOptions';
+export { default as AlertDialog } from './AlertDialog';
+export { default as Button } from './Button';
+export { default as ButtonSelected } from './ButtonSelected';
+export { default as Card } from './Card';
+export { default as CardHero } from './CardHero';
+export { default as CardStep } from './CardStep';
+export { default as Checkbox } from './Checkbox';
+export { default as ConfirmDialog } from './ConfirmDialog';
+export { default as DarkModeToggle } from './DarkModeToggle';
+export { default as Flex } from './Flex';
+export { default as Form } from './Form';
+export { default as FormatBytes } from './FormatBytes';
+export { default as FormatConnectionStatus } from './FormatConnectionStatus';
+export { default as GuestRoute } from './GuestRoute';
+export { default as IconButton } from './IconButton';
+export { default as Indicator } from './Indicator';
+export { default as Link } from './Link';
+export { default as Loading } from './Loading';
+export { default as LocaleToggle } from './LocaleToggle';
+export { default as Log } from './Log';
+export { default as Logo } from './Logo';
+export { default as ModalDialogs } from './ModalDialogs';
+export { default as More } from './More';
+export { default as PrivateRoute } from './PrivateRoute';
+export { default as RadioGroup } from './RadioGroup';
+export { default as Select } from './Select';
+export { default as SideBarItem } from './SideBarItem';
+export { default as Spinner } from './Spinner';
+export { default as StateIndicator } from './StateIndicator';
+export { default as Table } from './Table';
+export { default as TextField } from './TextField';
+export { default as ThemeProvider } from './ThemeProvider';
+export { default as ToolbarSpacing } from './ToolbarSpacing';
+export { default as TooltipIcon } from './TooltipIcon';

electron-react/src/components/core/constants/State.ts

@@ -0,0 +1,7 @@
+enum State {
+  SUCCESS,
+  WARNING,
+  ERROR,
+}
+
+export default State;

electron-react/src/components/core/constants/index.ts

@@ -0,0 +1,2 @@
+export { default as State } from './State';
+export { default as StateColor } from './StateColor';

electron-react/src/components/core/index.ts

@@ -1,35 +1,2 @@
-export { default as Accordion } from './Accordion';
-export { default as AdvancedOptions } from './AdvancedOptions';
-export { default as AlertDialog } from './AlertDialog';
-export { default as Button } from './Button';
-export { default as ButtonSelected } from './ButtonSelected';
-export { default as Card } from './Card';
-export { default as CardHero } from './CardHero';
-export { default as CardStep } from './CardStep';
-export { default as Checkbox } from './Checkbox';
-export { default as ConfirmDialog } from './ConfirmDialog';
-export { default as DarkModeToggle } from './DarkModeToggle';
-export { default as Flex } from './Flex';
-export { default as Form } from './Form';
-export { default as FormatBytes } from './FormatBytes';
-export { default as FormatConnectionStatus } from './FormatConnectionStatus';
-export { default as GuestRoute } from './GuestRoute';
-export { default as IconButton } from './IconButton';
-export { default as Indicator } from './Indicator';
-export { default as Link } from './Link';
-export { default as Loading } from './Loading';
-export { default as LocaleToggle } from './LocaleToggle';
-export { default as Log } from './Log';
-export { default as Logo } from './Logo';
-export { default as ModalDialogs } from './ModalDialogs';
-export { default as More } from './More';
-export { default as PrivateRoute } from './PrivateRoute';
-export { default as RadioGroup } from './RadioGroup';
-export { default as Select } from './Select';
-export { default as SideBarItem } from './SideBarItem';
-export { default as Spinner } from './Spinner';
-export { default as Table } from './Table';
-export { default as TextField } from './TextField';
-export { default as ThemeProvider } from './ThemeProvider';
-export { default as ToolbarSpacing } from './ToolbarSpacing';
-export { default as TooltipIcon } from './TooltipIcon';
+export * from './components';
+export * from './constants';

electron-react/src/components/farm/FarmLastAttemptedProof.tsx

@@ -4,7 +4,7 @@ import { Trans } from '@lingui/macro';
 import moment from 'moment';
 import { Table, Card, FormatBytes } from '@chia/core';
 import { Typography } from '@material-ui/core';
-import type { Row } from '../core/Table/Table';
+import type { Row } from '../core/components/Table/Table';
 import usePlots from '../../hooks/usePlots';
 import { RootState } from '../../modules/rootReducer';
 

electron-react/src/components/farm/FarmLatestBlockChallenges.tsx

@@ -9,7 +9,7 @@ import {
 } from '@material-ui/core';
 import { Table, Card } from '@chia/core';
 import type { RootState } from '../../modules/rootReducer';
-import type { Row } from '../core/Table/Table';
+import type { Row } from '../core/components/Table/Table';
 
 const cols = [
   {

electron-react/src/components/farm/FarmerStatus.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
 import styled from 'styled-components';
 import { Trans } from '@lingui/macro';
-import { Flex } from '@chia/core';
+import { Flex, StateColor } from '@chia/core';
 import { FiberManualRecord as FiberManualRecordIcon } from '@material-ui/icons';
 import FarmerStatus from '../../constants/FarmerStatus';
-import StateColor from '../../constants/StateColor';
 import useFarmerStatus from '../../hooks/useFarmerStatus';
 
 const Color = {

electron-react/src/components/farm/card/FarmCardExpectedTimeToWin.tsx

@@ -1,19 +1,14 @@
 import React, { useMemo } from 'react';
 import { Trans } from '@lingui/macro';
-import styled from 'styled-components';
 import { useSelector } from 'react-redux';
 import moment from 'moment';
-import { Flex } from '@chia/core';
+import { State } from '@chia/core';
 import type { RootState } from '../../../modules/rootReducer';
 import FarmCard from './FarmCard';
 import type Plot from '../../../types/Plot';
-import StateColor from '../../../constants/StateColor';
 import FullNodeState from '../../../constants/FullNodeState';
 import useFullNodeState from '../../../hooks/useFullNodeState';
-
-const StyledFlexContainer = styled(({ color: Color, ...rest }) => <Flex {...rest} />)`
-  color: ${({ color }) => color};
-`;
+import FarmCardNotAvailable from './FarmCardNotAvailable';
 
 const MINUTES_PER_BLOCK = (24 * 60) / 4608; // 0.3125
 
@@ -46,19 +41,18 @@ export default function FarmCardExpectedTimeToWin() {
   const expectedTimeToWin = moment.duration({ minutes }).humanize();
 
   if (fullNodeState !== FullNodeState.SYNCED) {
+    const state = fullNodeState === FullNodeState.SYNCHING
+      ? State.WARNING
+      : undefined;
+
     return (
-      <FarmCard
+      <FarmCardNotAvailable
         title={
           <Trans id="FarmCardExpectedTimeToWin.title">Expected Time to Win</Trans>
         }
-        value={(
-          <StyledFlexContainer color={StateColor.WARNING} alignItems="center" gap={1}>
-            <Trans id="FarmCardExpectedTimeToWin.synching">Syncing</Trans>
-          </StyledFlexContainer>
-        )}
+        state={state}
       />
     );
-
   }
 
   return (

electron-react/src/components/farm/card/FarmCardNotAvailable.tsx

@@ -0,0 +1,32 @@
+import React, { ReactNode } from 'react';
+import { Trans } from '@lingui/macro';
+import { State, StateIndicator } from '@chia/core';
+import FarmCard from './FarmCard';
+
+type Props = {
+  title: ReactNode;
+  state?: State;
+};
+
+export default function FarmCardNotAvailable(props: Props) {
+  const { title, state } = props;
+
+  return (
+    <FarmCard
+      title={title}
+      value={state ? (
+        <StateIndicator state={state}>
+          <Trans id="FarmCardExpectedTimeToWin.notAvailable">Not Available</Trans>
+        </StateIndicator>
+      ) : (
+        <Trans id="FarmCardExpectedTimeToWin.notAvailable">Not Available</Trans>
+      )}
+      description={(
+        <Trans id="FarmCardExpectedTimeToWin.notAvailableDescription">
+          Wait for synchronization
+        </Trans>
+      )}
+      valueColor="initial"
+    />
+  );
+}

electron-react/src/components/farm/card/FarmCardStatus.tsx

@@ -1,13 +1,81 @@
 import React from 'react';
 import { Trans } from '@lingui/macro';
+import { useSelector } from 'react-redux';
+import { StateIndicator, State } from '@chia/core';
+import type { RootState } from '../../../modules/rootReducer';
 import FarmCard from './FarmCard';
-import FarmStatus from '../FarmerStatus';
+import useFullNodeState from '../../../hooks/useFullNodeState';
+import FullNodeState from '../../../constants/FullNodeState';
+import FarmCardNotAvailable from './FarmCardNotAvailable';
 
 export default function FarmCardStatus() {
+  const fullNodeState = useFullNodeState();
+  const farmerConnected = useSelector(
+    (state: RootState) => state.daemon_state.farmer_connected,
+  );
+  const farmerRunning = useSelector(
+    (state: RootState) => state.daemon_state.farmer_running,
+  );
+
+  if (fullNodeState === FullNodeState.SYNCHING) {
+    return (
+      <FarmCard
+        title={<Trans id="FarmCardStatus.title">Farming Status</Trans>}
+        value={(
+          <StateIndicator state={State.WARNING} indicator>
+            <Trans id="FarmCardStatus.synching">Syncing</Trans>
+          </StateIndicator>
+        )}
+      />
+    );
+  }
+
+  if (fullNodeState === FullNodeState.ERROR) {
+    return (
+      <FarmCardNotAvailable
+        title={
+          <Trans id="FarmCardStatus.title">Farming Status</Trans>
+        }
+      />
+    );
+  }
+
+  if (!farmerConnected) {
+    return (
+      <FarmCard
+        title={<Trans id="FarmCardStatus.title">Farming Status</Trans>}
+        value={(
+          <StateIndicator state={State.ERROR} indicator>
+            <Trans id="FarmCardStatus.error">Error</Trans>
+          </StateIndicator>
+        )}
+        description={<Trans id="FarmCardStatus.farmerIsNotConnected">Farmer is not connected</Trans>}
+      />
+    );
+  }
+
+  if (!farmerRunning) {
+    return (
+      <FarmCard
+        title={<Trans id="FarmCardStatus.title">Farming Status</Trans>}
+        value={(
+          <StateIndicator state={State.ERROR} indicator>
+            <Trans id="FarmCardStatus.error">Error</Trans>
+          </StateIndicator>
+        )}
+        description={<Trans id="FarmCardStatus.farmerIsNotRunning">Farmer is not running</Trans>}
+      />
+    );
+  }
+
   return (
     <FarmCard
       title={<Trans id="FarmCardStatus.title">Farming Status</Trans>}
-      value={<FarmStatus />}
+      value={(
+        <StateIndicator state={State.SUCCESS} indicator>
+          <Trans id="FarmerStatus.farming">Farming</Trans>
+        </StateIndicator>
+      )}
     />
   );
 }

electron-react/src/components/fullNode/FullNode.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Trans } from '@lingui/macro';
-import { FormatBytes, Flex, Card, Loading, Table } from '@chia/core';
+import { FormatBytes, Flex, Card, Loading, StateColor, Table } from '@chia/core';
 import { Status } from '@chia/icons';
 import { useRouteMatch, useHistory } from 'react-router-dom';
 import { useSelector, useDispatch } from 'react-redux';
@@ -13,7 +13,6 @@ import {
   openConnection,
 } from '../../modules/fullnodeMessages';
 import LayoutMain from '../layout/LayoutMain';
-import StateColor from '../../constants/StateColor';
 
 /* global BigInt */
 

electron-react/src/components/icons/Status.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
+import { StateColor } from '@chia/core';
 import { FiberManualRecord as FiberManualRecordIcon } from '@material-ui/icons';
-import StateColor from '../../constants/StateColor';
 
 const StyledFiberManualRecordIcon = styled(({ color, ...rest }) => <FiberManualRecordIcon {...rest} />)`
   font-size: 1rem;

electron-react/src/components/layout/LayoutLoading.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode } from 'react';
 import { Typography } from '@material-ui/core';
+import { Loading } from '@chia/core';
 import LayoutHero from './LayoutHero';
-import Loading from '../core/Loading/Loading';
 
 type Props = {
   children?: ReactNode;