refactor(web): abstract-phase-component

Author: tractorss

web/src/components/Phase.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import styled from "styled-components";
+
+import { useSortitionModulePhase } from "hooks/useSortitionModulePhase";
+
+import { isUndefined } from "src/utils";
+
+export enum Phases {
+  staking,
+  generating,
+  drawing,
+}
+
+const StyledLabel = styled.label``;
+
+const Phase: React.FC<{ className?: string }> = ({ className }) => {
+  const { data: phase } = useSortitionModulePhase();
+  return <>{isUndefined(phase) ? null : <StyledLabel {...{ className }}>Phase: {Phases[phase]}</StyledLabel>}</>;
+};
+
+export default Phase;

web/src/layout/Header/navbar/Debug.tsx

@@ -2,10 +2,11 @@ import React, { useMemo } from "react";
 import styled from "styled-components";
 
 import { GIT_BRANCH, GIT_DIRTY, GIT_HASH, GIT_TAGS, GIT_URL, RELEASE_VERSION } from "consts/index";
-import { useSortitionModulePhase } from "hooks/useSortitionModulePhase";
 import { useToggleTheme } from "hooks/useToggleThemeContext";
 import { isUndefined } from "utils/index";
 
+import Phase from "components/Phase";
+
 const Container = styled.div`
   display: flex;
   flex-direction: column;
@@ -32,6 +33,10 @@ const StyledLabel = styled.label`
   padding-left: 8px;
 `;
 
+const StyledPhase = styled(Phase)`
+  padding-left: 8px;
+`;
+
 const Version = () => (
   <StyledLabel>
     v{RELEASE_VERSION}{" "}
@@ -51,23 +56,12 @@ const ServicesStatus = () => {
   return <label>{isUndefined(statusUrl) ? null : <StyledIframe src={`${statusUrl + statusUrlParameters}`} />}</label>;
 };
 
-enum Phases {
-  staking,
-  generating,
-  drawing,
-}
-
-export const Phase = () => {
-  const { data: phase } = useSortitionModulePhase();
-  return <>{isUndefined(phase) ? null : <StyledLabel>Phase: {Phases[phase as number]}</StyledLabel>}</>;
-};
-
 const Debug: React.FC = () => {
   return (
     <Container>
       <ServicesStatus />
       <Version />
-      <Phase />
+      <StyledPhase />
     </Container>
   );
 };

web/src/pages/Courts/StakeMaintenanceButton/ExecuteDelayedStakeButton.tsx

@@ -16,7 +16,9 @@ import { wrapWithToast } from "utils/wrapWithToast";
 
 import { isUndefined } from "src/utils";
 
-import { IBaseStakeMaintenanceButton, Phases } from ".";
+import { Phases } from "components/Phase";
+
+import { IBaseStakeMaintenanceButton } from ".";
 
 const StyledButton = styled(Button)`
   width: 100%;

web/src/pages/Courts/StakeMaintenanceButton/PassPhaseButton.tsx

@@ -18,7 +18,9 @@ import { wrapWithToast } from "utils/wrapWithToast";
 
 import { isUndefined } from "src/utils";
 
-import { IBaseStakeMaintenanceButton, Phases } from ".";
+import { Phases } from "components/Phase";
+
+import { IBaseStakeMaintenanceButton } from ".";
 
 const StyledButton = styled(Button)`
   width: 100%;

web/src/pages/Courts/StakeMaintenanceButton/index.tsx

@@ -4,7 +4,7 @@ import styled from "styled-components";
 import DottedMenuButton from "components/DottedMenuButton";
 import { EnsureChain } from "components/EnsureChain";
 import { Overlay } from "components/Overlay";
-import { Phase } from "layout/Header/navbar/Debug";
+import Phase from "components/Phase";
 
 import ExecuteDelayedStakeButton from "./ExecuteDelayedStakeButton";
 import PassPhaseButton from "./PassPhaseButton";
@@ -37,12 +37,6 @@ const PopupContainer = styled.div`
   transform: translate(-100%, 100%);
 `;
 
-export enum Phases {
-  staking,
-  generating,
-  drawing,
-}
-
 export interface IBaseStakeMaintenanceButton {
   setIsOpen: (open: boolean) => void;
 }