From 4c4d545778414c142f0d865a43fb36b3502b842a Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Sun, 7 Apr 2024 15:01:22 +0700 Subject: [PATCH 1/6] feat(web): court-badges --- web/.env.devnet.public | 1 + web/src/layout/Header/DesktopHeader.tsx | 23 ++------- web/src/layout/Header/Logo.tsx | 64 +++++++++++++++++++++++++ web/src/layout/Header/MobileHeader.tsx | 18 ++----- web/src/styles/themes.ts | 6 +++ 5 files changed, 79 insertions(+), 33 deletions(-) create mode 100644 web/src/layout/Header/Logo.tsx diff --git a/web/.env.devnet.public b/web/.env.devnet.public index 2abe7cc44..e4891fa14 100644 --- a/web/.env.devnet.public +++ b/web/.env.devnet.public @@ -4,3 +4,4 @@ export REACT_APP_CORE_SUBGRAPH=https://api.studio.thegraph.com/query/61738/klero export REACT_APP_DRT_ARBSEPOLIA_SUBGRAPH=https://api.studio.thegraph.com/query/61738/kleros-v2-drt-arbisep-devnet/version/latest export REACT_APP_STATUS_URL=https://kleros-v2-devnet.betteruptime.com/badge export REACT_APP_GENESIS_BLOCK_ARBSEPOLIA=3084598 +export REACT_APP_ARBITRATOR_TYPE="neo" diff --git a/web/src/layout/Header/DesktopHeader.tsx b/web/src/layout/Header/DesktopHeader.tsx index 30b97acfd..d807949d6 100644 --- a/web/src/layout/Header/DesktopHeader.tsx +++ b/web/src/layout/Header/DesktopHeader.tsx @@ -1,20 +1,9 @@ import React from "react"; import styled, { css } from "styled-components"; - -import { Link } from "react-router-dom"; +import { landscapeStyle } from "styles/landscapeStyle"; import { useToggle } from "react-use"; - -import KlerosCourtUniversityLogo from "svgs/header/kleros-court-university.svg"; -import KlerosCourtLogo from "svgs/header/kleros-court.svg"; -import KlerosSolutionsIcon from "svgs/menu-icons/kleros-solutions.svg"; - import { useLockOverlayScroll } from "hooks/useLockOverlayScroll"; - -import { isKlerosUniversity } from "src/consts"; - -import { landscapeStyle } from "styles/landscapeStyle"; -import { responsiveSize } from "styles/responsiveSize"; - +import KlerosSolutionsIcon from "svgs/menu-icons/kleros-solutions.svg"; import ConnectWallet from "components/ConnectWallet"; import LightButton from "components/LightButton"; import { Overlay } from "components/Overlay"; @@ -26,6 +15,8 @@ import Help from "./navbar/Menu/Help"; import Settings from "./navbar/Menu/Settings"; import { PopupContainer } from "."; +import { responsiveSize } from "styles/responsiveSize"; +import Logo from "./Logo"; const Container = styled.div` display: none; @@ -73,10 +64,6 @@ const LightButtonContainer = styled.div` margin-right: ${responsiveSize(12, 16)}; `; -const StyledLink = styled(Link)` - min-height: 48px; -`; - const StyledKlerosSolutionsIcon = styled(KlerosSolutionsIcon)` fill: ${({ theme }) => theme.white} !important; `; @@ -106,7 +93,7 @@ const DesktopHeader = () => { Icon={StyledKlerosSolutionsIcon} /> - {isKlerosUniversity() ? : } + diff --git a/web/src/layout/Header/Logo.tsx b/web/src/layout/Header/Logo.tsx new file mode 100644 index 000000000..31d195518 --- /dev/null +++ b/web/src/layout/Header/Logo.tsx @@ -0,0 +1,64 @@ +import React from "react"; +import { Link } from "react-router-dom"; +import styled, { Theme, useTheme } from "styled-components"; +import KlerosCourtLogo from "svgs/header/kleros-court.svg"; + +const arbitratorType = process.env.REACT_APP_ARBITRATOR_TYPE; + +const Container = styled.div` + display: flex; + flex-direction: row; + align-items: center; + gap: 16px; +`; + +const StyledLink = styled(Link)` + min-height: 48px; +`; + +const BadgeContainer = styled.div<{ backgroundColor: string }>` + transform: skewX(-15deg); + background-color: ${({ backgroundColor }) => backgroundColor}; + border-radius: 3px; + padding: 1px 8px; + height: fit-content; +`; + +const BadgeText = styled.label` + color: #220050; +`; + +const Badge: React.FC<{ text: string; color: keyof Theme }> = ({ text, color }) => { + const theme = useTheme(); + return ( + + {text} + + ); +}; + +const Logo: React.FC = () => { + let CourtBadge: JSX.Element | null = null; + switch (arbitratorType) { + case "neo": + CourtBadge = ; + break; + case "university": + CourtBadge = ; + break; + default: + break; + } + + return ( + + {" "} + + + + {CourtBadge} + + ); +}; + +export default Logo; diff --git a/web/src/layout/Header/MobileHeader.tsx b/web/src/layout/Header/MobileHeader.tsx index 53846ae11..7b9283d9d 100644 --- a/web/src/layout/Header/MobileHeader.tsx +++ b/web/src/layout/Header/MobileHeader.tsx @@ -1,20 +1,12 @@ import React, { useContext, useMemo, useRef } from "react"; import styled, { css } from "styled-components"; - -import { Link } from "react-router-dom"; import { useClickAway, useToggle } from "react-use"; - -import HamburgerIcon from "svgs/header/hamburger.svg"; -import KlerosCourtUniversityLogo from "svgs/header/kleros-court-university.svg"; -import KlerosCourtLogo from "svgs/header/kleros-court.svg"; - -import { isKlerosUniversity } from "src/consts"; - import { landscapeStyle } from "styles/landscapeStyle"; - +import HamburgerIcon from "svgs/header/hamburger.svg"; import LightButton from "components/LightButton"; import NavBar from "./navbar"; +import Logo from "./Logo"; const Container = styled.div` display: flex; @@ -41,10 +33,6 @@ const StyledLightButton = styled(LightButton)` } `; -const StyledLink = styled(Link)` - min-height: 48px; -`; - const OpenContext = React.createContext({ isOpen: false, toggleIsOpen: () => { @@ -64,7 +52,7 @@ const MobileHeader = () => { return ( - {isKlerosUniversity() ? : } + diff --git a/web/src/styles/themes.ts b/web/src/styles/themes.ts index 015f42704..7404e8396 100644 --- a/web/src/styles/themes.ts +++ b/web/src/styles/themes.ts @@ -41,6 +41,9 @@ export const lightTheme = { skeletonBackground: "#EBEBEB", skeletonHighlight: "#F5F5F5", + + paleCyan: "#ACFFFF", + limeGreen: "#F3FFD9", }; export const darkTheme = { @@ -84,4 +87,7 @@ export const darkTheme = { skeletonBackground: "#3A2270", skeletonHighlight: "#3E307C", + + paleCyan: "#ACFFFF", + limeGreen: "#F3FFD9", }; From 31cd5c3f5d21ddce3af568aac91ce8846ac658ce Mon Sep 17 00:00:00 2001 From: alcercu <333aleix333@gmail.com> Date: Mon, 8 Apr 2024 13:29:02 +0200 Subject: [PATCH 2/6] refactor(web): move CourtBadge out of the component --- web/src/layout/Header/Logo.tsx | 64 ++++++++++++++++------------------ 1 file changed, 31 insertions(+), 33 deletions(-) diff --git a/web/src/layout/Header/Logo.tsx b/web/src/layout/Header/Logo.tsx index 31d195518..51cc2bba3 100644 --- a/web/src/layout/Header/Logo.tsx +++ b/web/src/layout/Header/Logo.tsx @@ -1,9 +1,12 @@ -import React from "react"; +import React, { useMemo } from "react"; +import styled, { Theme } from "styled-components"; + import { Link } from "react-router-dom"; -import styled, { Theme, useTheme } from "styled-components"; + import KlerosCourtLogo from "svgs/header/kleros-court.svg"; -const arbitratorType = process.env.REACT_APP_ARBITRATOR_TYPE; +import { arbitratorType, ArbitratorTypes } from "consts/index"; +import { isUndefined } from "utils/index"; const Container = styled.div` display: flex; @@ -16,9 +19,9 @@ const StyledLink = styled(Link)` min-height: 48px; `; -const BadgeContainer = styled.div<{ backgroundColor: string }>` +const BadgeContainer = styled.div<{ backgroundColor: keyof Theme }>` transform: skewX(-15deg); - background-color: ${({ backgroundColor }) => backgroundColor}; + background-color: ${({ theme, backgroundColor }) => theme[backgroundColor]}; border-radius: 3px; padding: 1px 8px; height: fit-content; @@ -28,37 +31,32 @@ const BadgeText = styled.label` color: #220050; `; -const Badge: React.FC<{ text: string; color: keyof Theme }> = ({ text, color }) => { - const theme = useTheme(); - return ( - +const CourtBadge: React.FC = () => { + const { text, color } = useMemo<{ text?: string; color?: keyof Theme }>(() => { + switch (arbitratorType()) { + case ArbitratorTypes["neo"]: + return { text: "Neo", color: "paleCyan" }; + case ArbitratorTypes["university"]: + return { text: "Uni", color: "limeGreen" }; + } + return {}; + }, []); + + return !isUndefined(color) ? ( + {text} - ); + ) : null; }; -const Logo: React.FC = () => { - let CourtBadge: JSX.Element | null = null; - switch (arbitratorType) { - case "neo": - CourtBadge = ; - break; - case "university": - CourtBadge = ; - break; - default: - break; - } - - return ( - - {" "} - - - - {CourtBadge} - - ); -}; +const Logo: React.FC = () => ( + + {" "} + + + + + +); export default Logo; From 4a9bdac0829c9ab371f7a142d1dd7482f025e9a6 Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Mon, 8 Apr 2024 18:55:18 +0700 Subject: [PATCH 3/6] refactor(web): add-dark-purple-color-to-theme --- web/src/layout/Header/Logo.tsx | 2 +- web/src/styles/themes.ts | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/web/src/layout/Header/Logo.tsx b/web/src/layout/Header/Logo.tsx index 51cc2bba3..33fac9d01 100644 --- a/web/src/layout/Header/Logo.tsx +++ b/web/src/layout/Header/Logo.tsx @@ -28,7 +28,7 @@ const BadgeContainer = styled.div<{ backgroundColor: keyof Theme }>` `; const BadgeText = styled.label` - color: #220050; + color: ${({ theme }) => theme.darkPurple}; `; const CourtBadge: React.FC = () => { diff --git a/web/src/styles/themes.ts b/web/src/styles/themes.ts index 7404e8396..6715eccfb 100644 --- a/web/src/styles/themes.ts +++ b/web/src/styles/themes.ts @@ -6,6 +6,7 @@ export const lightTheme = { white: "#FFFFFF", primaryPurple: "#4D00B4", secondaryPurple: "#9013FE", + darkPurple: "#220050", mediumPurple: "#F8F1FF", lightPurple: "#FBF9FE", violetPurple: "#6A1DCD", @@ -52,6 +53,7 @@ export const darkTheme = { white: "#FFFFFF", primaryPurple: "#7E1BD4", secondaryPurple: "#B45FFF", + darkPurple: "#220050", mediumPurple: "#390F6C", lightPurple: "#FCFBFF", violetPurple: "#6A1DCD", From e3eec16277d8d35d84cf0744f122763935995ed4 Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Mon, 8 Apr 2024 19:27:42 +0700 Subject: [PATCH 4/6] feat: add-format-on-save-for-vscode-workspace --- .vscode/settings.json | 3 +++ web/src/layout/Header/DesktopHeader.tsx | 13 +++++++++---- web/src/layout/Header/MobileHeader.tsx | 8 ++++++-- 3 files changed, 18 insertions(+), 6 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index c54c7f3cb..34a94eef5 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -12,5 +12,8 @@ "sonarlint.connectedMode.project": { "connectionId": "kleros", "projectKey": "kleros_kleros-v2" + }, + "editor.codeActionsOnSave": { + "source.fixAll.eslint": true } } diff --git a/web/src/layout/Header/DesktopHeader.tsx b/web/src/layout/Header/DesktopHeader.tsx index d807949d6..a60e211e0 100644 --- a/web/src/layout/Header/DesktopHeader.tsx +++ b/web/src/layout/Header/DesktopHeader.tsx @@ -1,13 +1,20 @@ import React from "react"; import styled, { css } from "styled-components"; -import { landscapeStyle } from "styles/landscapeStyle"; + import { useToggle } from "react-use"; -import { useLockOverlayScroll } from "hooks/useLockOverlayScroll"; + import KlerosSolutionsIcon from "svgs/menu-icons/kleros-solutions.svg"; + +import { useLockOverlayScroll } from "hooks/useLockOverlayScroll"; + +import { landscapeStyle } from "styles/landscapeStyle"; +import { responsiveSize } from "styles/responsiveSize"; + import ConnectWallet from "components/ConnectWallet"; import LightButton from "components/LightButton"; import { Overlay } from "components/Overlay"; +import Logo from "./Logo"; import DappList from "./navbar/DappList"; import Explore from "./navbar/Explore"; import Menu from "./navbar/Menu"; @@ -15,8 +22,6 @@ import Help from "./navbar/Menu/Help"; import Settings from "./navbar/Menu/Settings"; import { PopupContainer } from "."; -import { responsiveSize } from "styles/responsiveSize"; -import Logo from "./Logo"; const Container = styled.div` display: none; diff --git a/web/src/layout/Header/MobileHeader.tsx b/web/src/layout/Header/MobileHeader.tsx index 7b9283d9d..c8a22877c 100644 --- a/web/src/layout/Header/MobileHeader.tsx +++ b/web/src/layout/Header/MobileHeader.tsx @@ -1,12 +1,16 @@ import React, { useContext, useMemo, useRef } from "react"; import styled, { css } from "styled-components"; + import { useClickAway, useToggle } from "react-use"; -import { landscapeStyle } from "styles/landscapeStyle"; + import HamburgerIcon from "svgs/header/hamburger.svg"; + +import { landscapeStyle } from "styles/landscapeStyle"; + import LightButton from "components/LightButton"; -import NavBar from "./navbar"; import Logo from "./Logo"; +import NavBar from "./navbar"; const Container = styled.div` display: flex; From bd121e11bd2919d8f53a8448d44341544a4cc2b5 Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Mon, 8 Apr 2024 19:33:49 +0700 Subject: [PATCH 5/6] refactor(web): rename-arbitrator-type-to-get-arbitrator-type --- web/.env.devnet.public | 1 - web/src/consts/index.ts | 6 +++--- web/src/layout/Header/Logo.tsx | 8 ++++---- web/wagmi.config.ts | 4 ++-- 4 files changed, 9 insertions(+), 10 deletions(-) diff --git a/web/.env.devnet.public b/web/.env.devnet.public index e4891fa14..2abe7cc44 100644 --- a/web/.env.devnet.public +++ b/web/.env.devnet.public @@ -4,4 +4,3 @@ export REACT_APP_CORE_SUBGRAPH=https://api.studio.thegraph.com/query/61738/klero export REACT_APP_DRT_ARBSEPOLIA_SUBGRAPH=https://api.studio.thegraph.com/query/61738/kleros-v2-drt-arbisep-devnet/version/latest export REACT_APP_STATUS_URL=https://kleros-v2-devnet.betteruptime.com/badge export REACT_APP_GENESIS_BLOCK_ARBSEPOLIA=3084598 -export REACT_APP_ARBITRATOR_TYPE="neo" diff --git a/web/src/consts/index.ts b/web/src/consts/index.ts index 2b6cad7cb..d2859b4e8 100644 --- a/web/src/consts/index.ts +++ b/web/src/consts/index.ts @@ -28,9 +28,9 @@ export const ETH_SIGNATURE_REGEX = /^0x[a-fA-F0-9]{130}$/; export const isProductionDeployment = () => process.env.REACT_APP_DEPLOYMENT === "mainnet"; -export const isKlerosUniversity = () => arbitratorType() === ArbitratorTypes.university; -export const isKlerosNeo = () => arbitratorType() === ArbitratorTypes.neo; -export const arbitratorType = (): ArbitratorTypes => +export const isKlerosUniversity = () => getArbitratorType() === ArbitratorTypes.university; +export const isKlerosNeo = () => getArbitratorType() === ArbitratorTypes.neo; +export const getArbitratorType = (): ArbitratorTypes => ArbitratorTypes[process.env.REACT_APP_ARBITRATOR_TYPE?.toLowerCase() ?? "vanilla"]; export const GENESIS_BLOCK_ARBSEPOLIA = BigInt(process.env.REACT_APP_GENESIS_BLOCK_ARBSEPOLIA ?? 0); diff --git a/web/src/layout/Header/Logo.tsx b/web/src/layout/Header/Logo.tsx index 33fac9d01..956bc5771 100644 --- a/web/src/layout/Header/Logo.tsx +++ b/web/src/layout/Header/Logo.tsx @@ -5,7 +5,7 @@ import { Link } from "react-router-dom"; import KlerosCourtLogo from "svgs/header/kleros-court.svg"; -import { arbitratorType, ArbitratorTypes } from "consts/index"; +import { ArbitratorTypes, getArbitratorType } from "consts/index"; import { isUndefined } from "utils/index"; const Container = styled.div` @@ -33,10 +33,10 @@ const BadgeText = styled.label` const CourtBadge: React.FC = () => { const { text, color } = useMemo<{ text?: string; color?: keyof Theme }>(() => { - switch (arbitratorType()) { - case ArbitratorTypes["neo"]: + switch (getArbitratorType()) { + case ArbitratorTypes.neo: return { text: "Neo", color: "paleCyan" }; - case ArbitratorTypes["university"]: + case ArbitratorTypes.university: return { text: "Uni", color: "limeGreen" }; } return {}; diff --git a/web/wagmi.config.ts b/web/wagmi.config.ts index bc481a0bb..2b98ff501 100644 --- a/web/wagmi.config.ts +++ b/web/wagmi.config.ts @@ -10,7 +10,7 @@ import { Abi } from "viem"; import IArbitrableV2 from "@kleros/kleros-v2-contracts/artifacts/src/arbitration/interfaces/IArbitrableV2.sol/IArbitrableV2.json" assert { type: "json" }; import IHomeGateway from "@kleros/kleros-v2-contracts/artifacts/src/gateway/interfaces/IHomeGateway.sol/IHomeGateway.json" assert { type: "json" }; -import { ArbitratorTypes, arbitratorType } from "src/consts"; +import { ArbitratorTypes, getArbitratorType } from "src/consts"; dotenv.config(); @@ -71,7 +71,7 @@ const readArtifacts = async (type: ArbitratorTypes, viemChainName: string, hardh const getConfig = async (): Promise => { const deployment = process.env.REACT_APP_DEPLOYMENT ?? "testnet"; - const type = arbitratorType(); + const type = getArbitratorType(); let viemNetwork: string; let hardhatNetwork: string; From a9b93a9176a2442df51824fdac72dfc6a5142da2 Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Mon, 8 Apr 2024 19:38:20 +0700 Subject: [PATCH 6/6] refactor(web): refactor-popup-container-to-separate-file --- web/src/layout/Header/DesktopHeader.tsx | 11 +++++++++-- web/src/layout/Header/index.tsx | 9 --------- web/src/layout/Header/navbar/index.tsx | 10 +++++++++- 3 files changed, 18 insertions(+), 12 deletions(-) diff --git a/web/src/layout/Header/DesktopHeader.tsx b/web/src/layout/Header/DesktopHeader.tsx index a60e211e0..0409b87f2 100644 --- a/web/src/layout/Header/DesktopHeader.tsx +++ b/web/src/layout/Header/DesktopHeader.tsx @@ -21,8 +21,6 @@ import Menu from "./navbar/Menu"; import Help from "./navbar/Menu/Help"; import Settings from "./navbar/Menu/Settings"; -import { PopupContainer } from "."; - const Container = styled.div` display: none; position: absolute; @@ -79,6 +77,15 @@ const ConnectWalletContainer = styled.div` } `; +const PopupContainer = styled.div` + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 30; +`; + const DesktopHeader = () => { const [isDappListOpen, toggleIsDappListOpen] = useToggle(false); const [isHelpOpen, toggleIsHelpOpen] = useToggle(false); diff --git a/web/src/layout/Header/index.tsx b/web/src/layout/Header/index.tsx index 96fca094c..fa8da3fb3 100644 --- a/web/src/layout/Header/index.tsx +++ b/web/src/layout/Header/index.tsx @@ -23,15 +23,6 @@ const HeaderContainer = styled.div` padding: 4px 24px 8px; `; -export const PopupContainer = styled.div` - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 30; -`; - const Header: React.FC = () => { return ( diff --git a/web/src/layout/Header/navbar/index.tsx b/web/src/layout/Header/navbar/index.tsx index 7742a7a68..c58742477 100644 --- a/web/src/layout/Header/navbar/index.tsx +++ b/web/src/layout/Header/navbar/index.tsx @@ -12,7 +12,6 @@ import ConnectWallet from "components/ConnectWallet"; import LightButton from "components/LightButton"; import { Overlay } from "components/Overlay"; -import { PopupContainer } from ".."; import { useOpenContext } from "../MobileHeader"; import DappList from "./DappList"; @@ -72,6 +71,15 @@ const DisconnectWalletButtonContainer = styled.div` align-items: center; `; +const PopupContainer = styled.div` + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 30; +`; + export interface ISettings { toggleIsSettingsOpen: () => void; }