1- import React from "react" ;
1+ import React , { useMemo } from "react" ;
22import styled from "styled-components" ;
33import { useSortitionModulePhase } from "hooks/contracts/generated" ;
4+ import { useToggleTheme } from "hooks/useToggleThemeContext" ;
45import { GIT_BRANCH , GIT_DIRTY , GIT_HASH , GIT_TAGS , GIT_URL , RELEASE_VERSION } from "consts/index" ;
56
67const Container = styled . div `
8+ display: flex;
9+ flex-direction: column;
10+ gap: 12px;
11+
712 label,
813 a {
914 font-family: "Roboto Mono", monospace;
@@ -13,6 +18,13 @@ const Container = styled.div`
1318 }
1419` ;
1520
21+ const StyledIframe = styled . iframe `
22+ border: none;
23+ width: 100%;
24+ height: 30px;
25+ border-radius: 300px;
26+ ` ;
27+
1628const Version = ( ) => (
1729 < label >
1830 v{ RELEASE_VERSION } { " " }
@@ -25,6 +37,13 @@ const Version = () => (
2537 </ label >
2638) ;
2739
40+ const ServicesStatus = ( ) => {
41+ const [ theme ] = useToggleTheme ( ) ;
42+ const statusUrlParameters = useMemo ( ( ) => ( theme === "light" ? "?theme=light" : "?theme=dark" ) , [ theme ] ) ;
43+ const statusUrl = process . env . REACT_APP_STATUS_URL ;
44+ return < label > { statusUrl && < StyledIframe src = { `${ statusUrl + statusUrlParameters } ` } /> } </ label > ;
45+ } ;
46+
2847enum Phases {
2948 staking ,
3049 generating ,
@@ -35,21 +54,13 @@ const Phase = () => {
3554 const { data : phase } = useSortitionModulePhase ( {
3655 watch : true ,
3756 } ) ;
38- return (
39- < >
40- { phase !== undefined && (
41- < label >
42- < br />
43- phase: { Phases [ phase ] }
44- </ label >
45- ) }
46- </ >
47- ) ;
57+ return < > { phase !== undefined && < label > Phase: { Phases [ phase ] } </ label > } </ > ;
4858} ;
4959
5060const Debug : React . FC = ( ) => {
5161 return (
5262 < Container >
63+ < ServicesStatus />
5364 < Version />
5465 < Phase />
5566 </ Container >
0 commit comments