Merge branch 'fix(web)/court-ongoing-stats' of https://github.com/kleros/kleros-v2 into fix(web)/court-ongoing-stats

nhestrompia · nhestrompia · commit d9c3ed19d4c8 · 2023-09-02T21:42:40.000+03:00
diff --git a/web/src/assets/svgs/header/header-darkmode-desktop.svg b/web/src/assets/svgs/header/header-darkmode-desktop.svg
diff --git a/web/src/assets/svgs/header/header-darkmode-mobile.svg b/web/src/assets/svgs/header/header-darkmode-mobile.svg
diff --git a/web/src/assets/svgs/header/header-lightmode-desktop.svg b/web/src/assets/svgs/header/header-lightmode-desktop.svg
diff --git a/web/src/assets/svgs/header/header-lightmode-mobile.svg b/web/src/assets/svgs/header/header-lightmode-mobile.svg
diff --git a/web/src/assets/svgs/icons/user.svg b/web/src/assets/svgs/icons/user.svg
@@ -1,3 +1,3 @@
-<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
+<svg  viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
 <path d="M10.8919 12.3125C14.119 12.3125 16.7373 9.66699 16.7373 6.40625C16.7373 3.14551 14.119 0.5 10.8919 0.5C7.6647 0.5 5.04644 3.14551 5.04644 6.40625C5.04644 9.66699 7.6647 12.3125 10.8919 12.3125ZM16.0878 13.625H13.8511C12.9499 14.0434 11.9473 14.2812 10.8919 14.2812C9.83643 14.2812 8.83784 14.0434 7.93261 13.625H5.69593C2.82599 13.625 0.5 15.9752 0.5 18.875V19.5312C0.5 20.6182 1.37275 21.5 2.44847 21.5H19.3352C20.411 21.5 21.2837 20.6182 21.2837 19.5312V18.875C21.2837 15.9752 18.9577 13.625 16.0878 13.625Z" />
 </svg>
diff --git a/web/src/components/ConnectWallet/AccountDisplay.tsx b/web/src/components/ConnectWallet/AccountDisplay.tsx
@@ -6,10 +6,9 @@ import { shortenAddress } from "utils/shortenAddress";
 
 const Container = styled.div`
   display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-content: center;
-  align-items: center;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
 `;
 
 const AccountContainer = styled.div`
diff --git a/web/src/components/ConnectWallet/index.tsx b/web/src/components/ConnectWallet/index.tsx
@@ -1,9 +1,19 @@
 import React from "react";
+import styled from "styled-components";
 import { useAccount, useNetwork, useSwitchNetwork } from "wagmi";
 import { useWeb3Modal } from "@web3modal/react";
 import { Button } from "@kleros/ui-components-library";
 import { SUPPORTED_CHAINS, DEFAULT_CHAIN } from "consts/chains";
 import AccountDisplay from "./AccountDisplay";
+import { DisconnectWalletButton } from "layout/Header/navbar/Menu/Settings/General";
+
+const Container = styled.div`
+  display: flex;
+  gap: 16px;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  align-items: center;
+`;
 
 export const SwitchChainButton: React.FC = () => {
   const { switchNetwork, isLoading } = useSwitchNetwork();
@@ -39,7 +49,13 @@ const ConnectWallet: React.FC = () => {
   if (isConnected) {
     if (chain && chain.id !== DEFAULT_CHAIN) {
       return <SwitchChainButton />;
-    } else return <AccountDisplay />;
+    } else
+      return (
+        <Container>
+          <AccountDisplay />
+          <DisconnectWalletButton />
+        </Container>
+      );
   } else return <ConnectButton />;
 };
 
diff --git a/web/src/components/StatDisplay.tsx b/web/src/components/StatDisplay.tsx
@@ -15,11 +15,10 @@ const SVGContainer = styled.div<{ iconColor: string; backgroundColor: string }>`
   display: flex;
   align-items: center;
   justify-content: center;
-
   svg {
     fill: ${({ iconColor }) => iconColor};
-    height: 32px;
-    width: 32px;
+    height: ${({ iconColor, theme }) => (iconColor === theme.success ? "24px" : "32px")};
+    width: ${({ iconColor, theme }) => (iconColor === theme.success ? "24px" : "32px")};
   }
 `;
 
@@ -51,6 +50,7 @@ const StatDisplay: React.FC<IStatDisplay> = ({ title, text, subtext, icon: Icon,
     blue: createPair(theme.primaryBlue, theme.mediumBlue),
     purple: createPair(theme.secondaryPurple, theme.mediumPurple),
   };
+
   return (
     <Container {...props}>
       <SVGContainer {...{ ...COLORS[color] }}>{<Icon />}</SVGContainer>
diff --git a/web/src/consts/coingecko.ts b/web/src/consts/coingecko.ts
@@ -0,0 +1,5 @@
+// https://apiguide.coingecko.com/getting-started/10-min-tutorial-guide/1-get-data-by-id-or-address
+export const CoinIds = {
+  ETH: "coingecko:ethereum",
+  PNK: "coingecko:kleros",
+};
diff --git a/web/src/pages/Courts/CourtDetails/Stats.tsx b/web/src/pages/Courts/CourtDetails/Stats.tsx
@@ -3,9 +3,9 @@ import styled from "styled-components";
 import { useParams } from "react-router-dom";
 import { useCourtDetails, CourtDetailsQuery } from "queries/useCourtDetails";
 import { useCoinPrice } from "hooks/useCoinPrice";
-import { usePNKAddress, useWETHAddress } from "hooks/useContractAddress";
 import { formatETH, formatPNK, formatUnitsWei, formatUSD, isUndefined } from "utils/index";
 import { calculateSubtextRender } from "utils/calculateSubtextRender";
+import { CoinIds } from "consts/coingecko";
 import StatDisplay, { IStatDisplay } from "components/StatDisplay";
 import { StyledSkeleton } from "components/StyledSkeleton";
 import BalanceIcon from "svgs/icons/law-balance.svg";
@@ -86,7 +86,7 @@ const stats: IStat[] = [
   {
     title: "PNK redistributed",
     coinId: 0,
-    getText: (data) => formatPNK(data?.paidPNK, 18),
+    getText: (data) => formatPNK(data?.paidPNK),
     getSubtext: (data, coinPrice) => formatUSD(Number(formatUnitsWei(data?.paidPNK)) * (coinPrice ?? 0)),
     color: "purple",
     icon: PNKRedistributedIcon,
@@ -96,14 +96,13 @@ const stats: IStat[] = [
 const Stats = () => {
   const { id } = useParams();
   const { data } = useCourtDetails(id);
-  const coinIdToAddress = [usePNKAddress(), useWETHAddress()];
-  const { prices: pricesData } = useCoinPrice(coinIdToAddress);
+  const coinIds = [CoinIds.PNK, CoinIds.ETH];
+  const { prices: pricesData } = useCoinPrice(coinIds);
 
   return (
     <StyledCard>
       {stats.map(({ title, coinId, getText, getSubtext, color, icon }, i) => {
-        const coinPrice = !isUndefined(pricesData) ? pricesData[coinIdToAddress[coinId!]]?.price : undefined;
-
+        const coinPrice = !isUndefined(pricesData) ? pricesData[coinIds[coinId!]]?.price : undefined;
         return (
           <StatDisplay
             key={i}
diff --git a/web/src/pages/Courts/CourtDetails/index.tsx b/web/src/pages/Courts/CourtDetails/index.tsx
@@ -39,7 +39,7 @@ const StyledBreadcrumb = styled(Breadcrumb)`
 `;
 
 const StyledBreadcrumbSkeleton = styled.div`
-  margin-top: 16px;
+  margin-bottom: 12px;
 `;
 
 const CourtDetails: React.FC = () => {
diff --git a/web/src/pages/Dashboard/JurorInfo/JurorRewards.tsx b/web/src/pages/Dashboard/JurorInfo/JurorRewards.tsx
@@ -5,9 +5,9 @@ import { useAccount } from "wagmi";
 import TokenRewards from "./TokenRewards";
 import WithHelpTooltip from "../WithHelpTooltip";
 import { isUndefined } from "utils/index";
+import { CoinIds } from "consts/coingecko";
 import { useUserQuery, UserQuery } from "queries/useUser";
 import { useCoinPrice } from "hooks/useCoinPrice";
-import { usePNKAddress, useWETHAddress } from "hooks/useContractAddress";
 
 interface IReward {
   token: "ETH" | "PNK";
@@ -54,8 +54,8 @@ const calculateTotalReward = (coinId: number, data: UserQuery): bigint => {
 const Coherency: React.FC = () => {
   const { address } = useAccount();
   const { data } = useUserQuery(address?.toLowerCase());
-  const coinIdToAddress = [usePNKAddress(), useWETHAddress()];
-  const { prices: pricesData } = useCoinPrice(coinIdToAddress);
+  const coinIds = [CoinIds.PNK, CoinIds.ETH];
+  const { prices: pricesData } = useCoinPrice(coinIds);
 
   return (
     <>
@@ -64,7 +64,7 @@ const Coherency: React.FC = () => {
           <label> Juror Rewards </label>
         </WithHelpTooltip>
         {rewards.map(({ token, coinId, getValue, getAmount }) => {
-          const coinPrice = !isUndefined(pricesData) ? pricesData[coinIdToAddress[coinId]]?.price : undefined;
+          const coinPrice = !isUndefined(pricesData) ? pricesData[coinIds[coinId]]?.price : undefined;
           const totalReward = data && calculateTotalReward(coinId, data);
           return (
             <TokenRewards
diff --git a/web/src/pages/Home/CourtOverview/Stats.tsx b/web/src/pages/Home/CourtOverview/Stats.tsx
@@ -10,9 +10,9 @@ import JurorIcon from "svgs/icons/user.svg";
 import BalanceIcon from "svgs/icons/law-balance.svg";
 import { formatETH, formatPNK, formatUnitsWei, formatUSD, isUndefined } from "utils/index";
 import { calculateSubtextRender } from "utils/calculateSubtextRender";
+import { CoinIds } from "consts/coingecko";
 import { useHomePageContext, HomePageQuery, HomePageQueryDataPoints } from "hooks/useHomePageContext";
 import { useCoinPrice } from "hooks/useCoinPrice";
-import { usePNKAddress, useWETHAddress } from "hooks/useContractAddress";
 
 const StyledCard = styled(Card)`
   width: auto;
@@ -79,12 +79,12 @@ const stats: IStat[] = [
 
 const Stats = () => {
   const { data } = useHomePageContext();
-  const coinIdToAddress = [usePNKAddress(), useWETHAddress()];
-  const { prices: pricesData } = useCoinPrice(coinIdToAddress);
+  const coinIds = [CoinIds.PNK, CoinIds.ETH];
+  const { prices: pricesData } = useCoinPrice(coinIds);
   return (
     <StyledCard>
       {stats.map(({ title, coinId, getText, getSubtext, color, icon }, i) => {
-        const coinPrice = !isUndefined(pricesData) ? pricesData[coinIdToAddress[coinId!]]?.price : undefined;
+        const coinPrice = !isUndefined(pricesData) ? pricesData[coinIds[coinId!]]?.price : undefined;
 
         return (
           <StatDisplay
diff --git a/web/src/pages/Home/Header.tsx b/web/src/pages/Home/Header.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+import { useTheme } from "styled-components";
+import { useMeasure } from "react-use";
+import { BREAKPOINT_SMALL_SCREEN } from "styles/smallScreenStyle";
+import HeaderLightMobile from "tsx:svgs/header/header-lightmode-mobile.svg";
+import HeaderDarkMobile from "tsx:svgs/header/header-darkmode-mobile.svg";
+import HeaderLightDesktop from "tsx:svgs/header/header-lightmode-desktop.svg";
+import HeaderDarkDesktop from "tsx:svgs/header/header-darkmode-desktop.svg";
+
+const Header = () => {
+  const [ref, { width }] = useMeasure();
+  const theme = useTheme();
+  const themeIsLight = theme.name === "light";
+  const screenIsBig = width > BREAKPOINT_SMALL_SCREEN;
+  return (
+    <div ref={ref}>
+      {screenIsBig ? <HeaderDesktop {...{ themeIsLight }} /> : <HeaderMobile {...{ themeIsLight }} />}
+    </div>
+  );
+};
+
+const HeaderDesktop: React.FC<{ themeIsLight: boolean }> = ({ themeIsLight }) => {
+  return themeIsLight ? <HeaderLightDesktop /> : <HeaderDarkDesktop />;
+};
+
+const HeaderMobile: React.FC<{ themeIsLight: boolean }> = ({ themeIsLight }) => {
+  return themeIsLight ? <HeaderLightMobile /> : <HeaderDarkMobile />;
+};
+
+export default Header;
diff --git a/web/src/pages/Home/index.tsx b/web/src/pages/Home/index.tsx
@@ -3,6 +3,7 @@ import styled from "styled-components";
 import CourtOverview from "./CourtOverview";
 import LatestCases from "./LatestCases";
 import Community from "./Community";
+import Header from "./Header";
 import { HomePageProvider } from "hooks/useHomePageContext";
 import { getOneYearAgoTimestamp } from "utils/date";
 
@@ -13,14 +14,17 @@ const Container = styled.div`
   padding: 32px;
 `;
 
-const Home: React.FC = () => (
-  <HomePageProvider timeframe={getOneYearAgoTimestamp()}>
-    <Container>
-      <CourtOverview />
-      <LatestCases />
-      <Community />
-    </Container>
-  </HomePageProvider>
-);
+const Home: React.FC = () => {
+  return (
+    <HomePageProvider timeframe={getOneYearAgoTimestamp()}>
+      <Header />
+      <Container>
+        <CourtOverview />
+        <LatestCases />
+        <Community />
+      </Container>
+    </HomePageProvider>
+  );
+};
 
 export default Home;
diff --git a/web/src/styles/global-style.ts b/web/src/styles/global-style.ts
@@ -98,4 +98,9 @@ export const GlobalStyle = createGlobalStyle`
       color: ${({ theme }) => theme.primaryText};
     }
   }
+
+  .react-loading-skeleton {
+    --base-color: ${({ theme }) => theme.skeletonBackground};
+    --highlight-color: ${({ theme }) => theme.skeletonHighlight};
+  }
 `;
diff --git a/web/src/styles/smallScreenStyle.ts b/web/src/styles/smallScreenStyle.ts
@@ -0,0 +1,9 @@
+import { css, FlattenSimpleInterpolation } from "styled-components";
+
+export const BREAKPOINT_SMALL_SCREEN = 768;
+
+export const smallScreenStyle = (style: FlattenSimpleInterpolation) => css`
+  @media (max-width: ${BREAKPOINT_SMALL_SCREEN}px) {
+    ${style}
+  }
+`;
diff --git a/web/src/styles/themes.ts b/web/src/styles/themes.ts
@@ -2,6 +2,7 @@ import { lightTheme as componentsLightTheme, darkTheme as componentsDarkTheme }
 
 export const lightTheme = {
   ...componentsLightTheme,
+  name: "light",
   primaryPurple: "#4D00B4",
   secondaryPurple: "#9013FE",
   mediumPurple: "#F8F1FF",
@@ -34,10 +35,14 @@ export const lightTheme = {
   tintPurple: "#F4F0FA",
 
   transitionSpeed: "0.25s",
+
+  skeletonBackground: "#EBEBEB",
+  skeletonHighlight: "#F5F5F5",
 };
 
 export const darkTheme = {
   ...componentsDarkTheme,
+  name: "dark",
   primaryPurple: "#7E1BD4",
   secondaryPurple: "#B45FFF",
   mediumPurple: "#390F6C",
@@ -70,4 +75,7 @@ export const darkTheme = {
   tintPurple: "#2F0960",
 
   transitionSpeed: "0.25s",
+
+  skeletonBackground: "#3A2270",
+  skeletonHighlight: "#3E307C",
 };
diff --git a/web/src/utils/commify.ts b/web/src/utils/commify.ts
@@ -48,5 +48,7 @@ export function commify(value: string | number): string {
     }
   }
 
+  if (suffix === ".0") suffix = "";
+
   return negative + formatted.join(",") + suffix;
 }
