Merge pull request #1558 from kleros/feat(web)/badges

feat(web): court-badges

Author: alcercu

.vscode/settings.json

@@ -12,5 +12,8 @@
   "sonarlint.connectedMode.project": {
     "connectionId": "kleros",
     "projectKey": "kleros_kleros-v2"
+  },
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
   }
 }

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);

web/src/layout/Header/DesktopHeader.tsx

@@ -1,32 +1,26 @@
 import React from "react";
 import styled, { css } from "styled-components";
 
-import { Link } from "react-router-dom";
 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 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";
 import Help from "./navbar/Menu/Help";
 import Settings from "./navbar/Menu/Settings";
 
-import { PopupContainer } from ".";
-
 const Container = styled.div`
   display: none;
   position: absolute;
@@ -73,10 +67,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;
 `;
@@ -87,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);
@@ -106,7 +105,7 @@ const DesktopHeader = () => {
               Icon={StyledKlerosSolutionsIcon}
             />
           </LightButtonContainer>
-          <StyledLink to={"/"}>{isKlerosUniversity() ? <KlerosCourtUniversityLogo /> : <KlerosCourtLogo />}</StyledLink>
+          <Logo />
         </LeftSide>
 
         <MiddleSide>

web/src/layout/Header/Logo.tsx

@@ -0,0 +1,62 @@
+import React, { useMemo } from "react";
+import styled, { Theme } from "styled-components";
+
+import { Link } from "react-router-dom";
+
+import KlerosCourtLogo from "svgs/header/kleros-court.svg";
+
+import { ArbitratorTypes, getArbitratorType } from "consts/index";
+import { isUndefined } from "utils/index";
+
+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: keyof Theme }>`
+  transform: skewX(-15deg);
+  background-color: ${({ theme, backgroundColor }) => theme[backgroundColor]};
+  border-radius: 3px;
+  padding: 1px 8px;
+  height: fit-content;
+`;
+
+const BadgeText = styled.label`
+  color: ${({ theme }) => theme.darkPurple};
+`;
+
+const CourtBadge: React.FC = () => {
+  const { text, color } = useMemo<{ text?: string; color?: keyof Theme }>(() => {
+    switch (getArbitratorType()) {
+      case ArbitratorTypes.neo:
+        return { text: "Neo", color: "paleCyan" };
+      case ArbitratorTypes.university:
+        return { text: "Uni", color: "limeGreen" };
+    }
+    return {};
+  }, []);
+
+  return !isUndefined(color) ? (
+    <BadgeContainer {...{ backgroundColor: color }}>
+      <BadgeText>{text}</BadgeText>
+    </BadgeContainer>
+  ) : null;
+};
+
+const Logo: React.FC = () => (
+  <Container>
+    {" "}
+    <StyledLink to={"/"}>
+      <KlerosCourtLogo />
+    </StyledLink>
+    <CourtBadge />
+  </Container>
+);
+
+export default Logo;

web/src/layout/Header/MobileHeader.tsx

@@ -1,19 +1,15 @@
 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 LightButton from "components/LightButton";
 
+import Logo from "./Logo";
 import NavBar from "./navbar";
 
 const Container = styled.div`
@@ -41,10 +37,6 @@ const StyledLightButton = styled(LightButton)`
   }
 `;
 
-const StyledLink = styled(Link)`
-  min-height: 48px;
-`;
-
 const OpenContext = React.createContext({
   isOpen: false,
   toggleIsOpen: () => {
@@ -64,7 +56,7 @@ const MobileHeader = () => {
   return (
     <Container ref={containerRef}>
       <OpenContext.Provider value={memoizedContext}>
-        <StyledLink to={"/"}>{isKlerosUniversity() ? <KlerosCourtUniversityLogo /> : <KlerosCourtLogo />}</StyledLink>
+        <Logo />
         <NavBar />
         <StyledLightButton text="" Icon={HamburgerIcon} onClick={toggleIsOpen} />
       </OpenContext.Provider>

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 (
     <Container>

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;
 }

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",
@@ -41,6 +42,9 @@ export const lightTheme = {
 
   skeletonBackground: "#EBEBEB",
   skeletonHighlight: "#F5F5F5",
+
+  paleCyan: "#ACFFFF",
+  limeGreen: "#F3FFD9",
 };
 
 export const darkTheme = {
@@ -49,6 +53,7 @@ export const darkTheme = {
   white: "#FFFFFF",
   primaryPurple: "#7E1BD4",
   secondaryPurple: "#B45FFF",
+  darkPurple: "#220050",
   mediumPurple: "#390F6C",
   lightPurple: "#FCFBFF",
   violetPurple: "#6A1DCD",
@@ -84,4 +89,7 @@ export const darkTheme = {
 
   skeletonBackground: "#3A2270",
   skeletonHighlight: "#3E307C",
+
+  paleCyan: "#ACFFFF",
+  limeGreen: "#F3FFD9",
 };

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<Config> => {
   const deployment = process.env.REACT_APP_DEPLOYMENT ?? "testnet";
-  const type = arbitratorType();
+  const type = getArbitratorType();
 
   let viemNetwork: string;
   let hardhatNetwork: string;