From fcaf24936b416ec8b8bc565b1473c50dc5a507db Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Thu, 7 Dec 2023 11:44:19 +0530 Subject: [PATCH 1/3] feat(web): status-badge --- web/.env.devnet.public | 1 + web/.env.testnet.public | 1 + web/src/layout/Header/navbar/Menu/Help.tsx | 2 + .../layout/Header/navbar/Menu/StatusBadge.tsx | 44 +++++++++++++++++++ 4 files changed, 48 insertions(+) create mode 100644 web/src/layout/Header/navbar/Menu/StatusBadge.tsx diff --git a/web/.env.devnet.public b/web/.env.devnet.public index acfd07542..d620fed23 100644 --- a/web/.env.devnet.public +++ b/web/.env.devnet.public @@ -2,3 +2,4 @@ export REACT_APP_DEPLOYMENT=devnet export REACT_APP_KLEROS_CORE_SUBGRAPH_DEVNET=https://api.thegraph.com/subgraphs/name/kleros/kleros-v2-core-devnet export REACT_APP_DISPUTE_TEMPLATE_ARBGOERLI_SUBGRAPH_DEVNET=https://api.thegraph.com/subgraphs/name/kleros/kleros-v2-dr-devnet +export REACT_APP_DEVNET_STATUS_URL=https://kleros-v2-devnet.betteruptime.com/badge \ No newline at end of file diff --git a/web/.env.testnet.public b/web/.env.testnet.public index 813f673d9..7b08b59a4 100644 --- a/web/.env.testnet.public +++ b/web/.env.testnet.public @@ -2,3 +2,4 @@ export REACT_APP_DEPLOYMENT=testnet export REACT_APP_KLEROS_CORE_SUBGRAPH_TESTNET=https://api.thegraph.com/subgraphs/name/kleros/kleros-v2-core-testnet-2 export REACT_APP_DISPUTE_TEMPLATE_ARBGOERLI_SUBGRAPH_TESTNET=https://api.thegraph.com/subgraphs/name/kleros/kleros-v2-dr-testnet-2 +export REACT_APP_TESTNET_STATUS_URL=https://kleros-v2.betteruptime.com/badge \ No newline at end of file diff --git a/web/src/layout/Header/navbar/Menu/Help.tsx b/web/src/layout/Header/navbar/Menu/Help.tsx index 93a9445c2..277b04932 100644 --- a/web/src/layout/Header/navbar/Menu/Help.tsx +++ b/web/src/layout/Header/navbar/Menu/Help.tsx @@ -12,6 +12,7 @@ import Telegram from "svgs/socialmedia/telegram.svg"; import { IHelp } from ".."; import Debug from "../Debug"; import Onboarding from "components/Popup/MiniGuides/Onboarding"; +import { StatusBadge } from "./StatusBadge"; const Container = styled.div` display: flex; @@ -122,6 +123,7 @@ const Help: React.FC = ({ toggleIsHelpOpen }) => { {item.text} ))} + {isOnboardingMiniGuidesOpen && } diff --git a/web/src/layout/Header/navbar/Menu/StatusBadge.tsx b/web/src/layout/Header/navbar/Menu/StatusBadge.tsx new file mode 100644 index 000000000..e51daa2c1 --- /dev/null +++ b/web/src/layout/Header/navbar/Menu/StatusBadge.tsx @@ -0,0 +1,44 @@ +import React, { useMemo } from "react"; +import styled from "styled-components"; +import { useToggleTheme } from "hooks/useToggleThemeContext"; + +const Container = styled.div` + padding: 0px 3px; + max-width: 220px; +`; + +const StyledIframe = styled.iframe` + border: none; + width: 100%; + height: 30px; + background-color: ${({ theme }) => theme.mediumPurple}; + border-radius: 300px; +`; + +export const StatusBadge: React.FC = () => { + const [theme] = useToggleTheme(); + + const deployment = process.env.REACT_APP_DEPLOYMENT ?? "testnet"; + + let statusUrl: string; + + switch (deployment) { + case "devnet": + statusUrl = process.env.REACT_APP_DEVNET_STATUS_URL!; + break; + case "testnet": + statusUrl = process.env.REACT_APP_TESTNET_STATUS_URL!; + break; + default: + statusUrl = process.env.REACT_APP_TESTNET_STATUS_URL!; + } + + //update url on theme toggle + statusUrl = useMemo(() => (theme == "light" ? statusUrl + "?theme=light" : statusUrl + "?theme=dark"), [theme]); + + return ( + + + + ); +}; From b95079c0db86a9cf1a84036efeff5ba3d84e44d6 Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Thu, 7 Dec 2023 11:52:59 +0530 Subject: [PATCH 2/3] fix(web): fix-code-smells-status-badge --- web/src/layout/Header/navbar/Menu/StatusBadge.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web/src/layout/Header/navbar/Menu/StatusBadge.tsx b/web/src/layout/Header/navbar/Menu/StatusBadge.tsx index e51daa2c1..829086cdb 100644 --- a/web/src/layout/Header/navbar/Menu/StatusBadge.tsx +++ b/web/src/layout/Header/navbar/Menu/StatusBadge.tsx @@ -33,8 +33,8 @@ export const StatusBadge: React.FC = () => { statusUrl = process.env.REACT_APP_TESTNET_STATUS_URL!; } - //update url on theme toggle - statusUrl = useMemo(() => (theme == "light" ? statusUrl + "?theme=light" : statusUrl + "?theme=dark"), [theme]); + // update url on theme toggle + statusUrl = useMemo(() => (theme === "light" ? statusUrl + "?theme=light" : statusUrl + "?theme=dark"), [theme]); return ( From b82ac6180b0b2095c6e32b4abd4cb70830abedeb Mon Sep 17 00:00:00 2001 From: jaybuidl Date: Thu, 7 Dec 2023 16:31:41 +0000 Subject: [PATCH 3/3] refactor: moved to Debug component, simpler env variables --- web/.env.devnet.public | 2 +- web/.env.testnet.public | 2 +- web/src/layout/Header/navbar/Debug.tsx | 33 +++++++++----- web/src/layout/Header/navbar/Menu/Help.tsx | 2 - .../layout/Header/navbar/Menu/StatusBadge.tsx | 44 ------------------- 5 files changed, 24 insertions(+), 59 deletions(-) delete mode 100644 web/src/layout/Header/navbar/Menu/StatusBadge.tsx diff --git a/web/.env.devnet.public b/web/.env.devnet.public index d620fed23..1e24ba5bb 100644 --- a/web/.env.devnet.public +++ b/web/.env.devnet.public @@ -2,4 +2,4 @@ export REACT_APP_DEPLOYMENT=devnet export REACT_APP_KLEROS_CORE_SUBGRAPH_DEVNET=https://api.thegraph.com/subgraphs/name/kleros/kleros-v2-core-devnet export REACT_APP_DISPUTE_TEMPLATE_ARBGOERLI_SUBGRAPH_DEVNET=https://api.thegraph.com/subgraphs/name/kleros/kleros-v2-dr-devnet -export REACT_APP_DEVNET_STATUS_URL=https://kleros-v2-devnet.betteruptime.com/badge \ No newline at end of file +export REACT_APP_STATUS_URL=https://kleros-v2-devnet.betteruptime.com/badge \ No newline at end of file diff --git a/web/.env.testnet.public b/web/.env.testnet.public index 7b08b59a4..a88ef5904 100644 --- a/web/.env.testnet.public +++ b/web/.env.testnet.public @@ -2,4 +2,4 @@ export REACT_APP_DEPLOYMENT=testnet export REACT_APP_KLEROS_CORE_SUBGRAPH_TESTNET=https://api.thegraph.com/subgraphs/name/kleros/kleros-v2-core-testnet-2 export REACT_APP_DISPUTE_TEMPLATE_ARBGOERLI_SUBGRAPH_TESTNET=https://api.thegraph.com/subgraphs/name/kleros/kleros-v2-dr-testnet-2 -export REACT_APP_TESTNET_STATUS_URL=https://kleros-v2.betteruptime.com/badge \ No newline at end of file +export REACT_APP_STATUS_URL=https://kleros-v2.betteruptime.com/badge \ No newline at end of file diff --git a/web/src/layout/Header/navbar/Debug.tsx b/web/src/layout/Header/navbar/Debug.tsx index a8333db56..7c1f0ec87 100644 --- a/web/src/layout/Header/navbar/Debug.tsx +++ b/web/src/layout/Header/navbar/Debug.tsx @@ -1,9 +1,14 @@ -import React from "react"; +import React, { useMemo } from "react"; import styled from "styled-components"; import { useSortitionModulePhase } from "hooks/contracts/generated"; +import { useToggleTheme } from "hooks/useToggleThemeContext"; import { GIT_BRANCH, GIT_DIRTY, GIT_HASH, GIT_TAGS, GIT_URL, RELEASE_VERSION } from "consts/index"; const Container = styled.div` + display: flex; + flex-direction: column; + gap: 12px; + label, a { font-family: "Roboto Mono", monospace; @@ -13,6 +18,13 @@ const Container = styled.div` } `; +const StyledIframe = styled.iframe` + border: none; + width: 100%; + height: 30px; + border-radius: 300px; +`; + const Version = () => ( ); +const ServicesStatus = () => { + const [theme] = useToggleTheme(); + const statusUrlParameters = useMemo(() => (theme === "light" ? "?theme=light" : "?theme=dark"), [theme]); + const statusUrl = process.env.REACT_APP_STATUS_URL; + return ; +}; + enum Phases { staking, generating, @@ -35,21 +54,13 @@ const Phase = () => { const { data: phase } = useSortitionModulePhase({ watch: true, }); - return ( - <> - {phase !== undefined && ( - - )} - - ); + return <>{phase !== undefined && }; }; const Debug: React.FC = () => { return ( + diff --git a/web/src/layout/Header/navbar/Menu/Help.tsx b/web/src/layout/Header/navbar/Menu/Help.tsx index 277b04932..93a9445c2 100644 --- a/web/src/layout/Header/navbar/Menu/Help.tsx +++ b/web/src/layout/Header/navbar/Menu/Help.tsx @@ -12,7 +12,6 @@ import Telegram from "svgs/socialmedia/telegram.svg"; import { IHelp } from ".."; import Debug from "../Debug"; import Onboarding from "components/Popup/MiniGuides/Onboarding"; -import { StatusBadge } from "./StatusBadge"; const Container = styled.div` display: flex; @@ -123,7 +122,6 @@ const Help: React.FC = ({ toggleIsHelpOpen }) => { {item.text} ))} - {isOnboardingMiniGuidesOpen && } diff --git a/web/src/layout/Header/navbar/Menu/StatusBadge.tsx b/web/src/layout/Header/navbar/Menu/StatusBadge.tsx deleted file mode 100644 index 829086cdb..000000000 --- a/web/src/layout/Header/navbar/Menu/StatusBadge.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import React, { useMemo } from "react"; -import styled from "styled-components"; -import { useToggleTheme } from "hooks/useToggleThemeContext"; - -const Container = styled.div` - padding: 0px 3px; - max-width: 220px; -`; - -const StyledIframe = styled.iframe` - border: none; - width: 100%; - height: 30px; - background-color: ${({ theme }) => theme.mediumPurple}; - border-radius: 300px; -`; - -export const StatusBadge: React.FC = () => { - const [theme] = useToggleTheme(); - - const deployment = process.env.REACT_APP_DEPLOYMENT ?? "testnet"; - - let statusUrl: string; - - switch (deployment) { - case "devnet": - statusUrl = process.env.REACT_APP_DEVNET_STATUS_URL!; - break; - case "testnet": - statusUrl = process.env.REACT_APP_TESTNET_STATUS_URL!; - break; - default: - statusUrl = process.env.REACT_APP_TESTNET_STATUS_URL!; - } - - // update url on theme toggle - statusUrl = useMemo(() => (theme === "light" ? statusUrl + "?theme=light" : statusUrl + "?theme=dark"), [theme]); - - return ( - - - - ); -};