Merge branch 'dev' into refactor/dispute-resolver

Author: jaybuidl

package.json

@@ -71,7 +71,6 @@
   },
   "alias": {
     "process": "process/browser.js",
-    "buffer": "buffer",
-    "@lifi/sdk": "@tractors/lifi-sdk-parcel"
+    "buffer": "buffer"
   }
 }

web/global.d.ts

@@ -17,3 +17,9 @@ declare module "styled-components" {
   //eslint-disable-next-line @typescript-eslint/no-empty-interface
   export interface DefaultTheme extends Theme {}
 }
+
+declare module "chart.js" {
+  interface TooltipPositionerMap {
+    custom: TooltipPositionerFunction<ChartType>;
+  }
+}

web/package.json

@@ -79,14 +79,14 @@
     "@filebase/client": "^0.0.5",
     "@kleros/kleros-sdk": "workspace:^",
     "@kleros/ui-components-library": "^2.14.0",
-    "@lifi/widget": "^2.10.1",
+    "@lifi/wallet-management": "^3.0.3",
+    "@lifi/widget": "^3.2.0",
     "@middy/core": "^5.3.2",
     "@middy/http-json-body-parser": "^5.3.2",
     "@sentry/react": "^7.93.0",
     "@sentry/tracing": "^7.93.0",
     "@supabase/supabase-js": "^2.39.3",
     "@tanstack/react-query": "^5.40.1",
-    "@tractors/lifi-sdk-parcel": "^2.5.3",
     "@types/react-modal": "^3.16.3",
     "@web3modal/wagmi": "^4.1.10",
     "@yornaath/batshit": "^0.9.0",
@@ -102,9 +102,9 @@
     "moment": "^2.30.1",
     "overlayscrollbars": "^2.4.6",
     "overlayscrollbars-react": "^0.5.3",
-    "react": "^18.2.0",
+    "react": "^18.3.1",
     "react-chartjs-2": "^4.3.1",
-    "react-dom": "^18.2.0",
+    "react-dom": "^18.3.1",
     "react-error-boundary": "^3.1.4",
     "react-identicons": "^1.2.5",
     "react-is": "^18.2.0",
@@ -120,6 +120,6 @@
     "vanilla-jsoneditor": "^0.21.4",
     "viem": "^2.1.0",
     "vite": "^5.2.10",
-    "wagmi": "^2.2.1"
+    "wagmi": "^2.11.3"
   }
 }

web/src/components/ConnectWallet/index.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from "react";
 
 import { useWeb3Modal, useWeb3ModalState } from "@web3modal/wagmi/react";
-import { useAccount, useChainId, useSwitchChain } from "wagmi";
+import { useAccount, useSwitchChain } from "wagmi";
 
 import { Button } from "@kleros/ui-components-library";
 
@@ -49,8 +49,8 @@ const ConnectButton: React.FC<{ className?: string }> = ({ className }) => {
 };
 
 const ConnectWallet: React.FC<{ className?: string }> = ({ className }) => {
-  const chainId = useChainId();
-  const { isConnected } = useAccount();
+  const { isConnected, chainId } = useAccount();
+
   if (isConnected) {
     if (chainId !== DEFAULT_CHAIN) {
       return <SwitchChainButton {...{ className }} />;

web/src/layout/Header/DesktopHeader.tsx

@@ -3,11 +3,14 @@ import styled, { css } from "styled-components";
 
 import { useLocation } from "react-router-dom";
 import { useToggle } from "react-use";
+import { useAccount } from "wagmi";
 
 import KlerosSolutionsIcon from "svgs/menu-icons/kleros-solutions.svg";
 
 import { useLockOverlayScroll } from "hooks/useLockOverlayScroll";
 
+import { DEFAULT_CHAIN } from "consts/chains";
+
 import { landscapeStyle } from "styles/landscapeStyle";
 import { responsiveSize } from "styles/responsiveSize";
 
@@ -21,7 +24,6 @@ import Explore from "./navbar/Explore";
 import Menu from "./navbar/Menu";
 import Help from "./navbar/Menu/Help";
 import Settings from "./navbar/Menu/Settings";
-import { useAccount } from "wagmi";
 
 const Container = styled.div`
   display: none;
@@ -73,13 +75,14 @@ const StyledKlerosSolutionsIcon = styled(KlerosSolutionsIcon)`
   fill: ${({ theme }) => theme.white} !important;
 `;
 
-const ConnectWalletContainer = styled.div<{ isConnected: boolean }>`
+const ConnectWalletContainer = styled.div<{ isConnected: boolean; isDefaultChain: boolean }>`
   label {
     color: ${({ theme }) => theme.white};
   }
 
-  ${({ isConnected }) =>
+  ${({ isConnected, isDefaultChain }) =>
     isConnected &&
+    isDefaultChain &&
     css`
       cursor: pointer;
       & > * {
@@ -105,7 +108,8 @@ const DesktopHeader: React.FC = () => {
   const [isOnboardingMiniGuidesOpen, toggleIsOnboardingMiniGuidesOpen] = useToggle(false);
   const [initialTab, setInitialTab] = useState<number>(0);
   const location = useLocation();
-  const { isConnected } = useAccount();
+  const { isConnected, chainId } = useAccount();
+  const isDefaultChain = chainId === DEFAULT_CHAIN;
 
   const initializeFragmentURL = useCallback(() => {
     const hash = location.hash;
@@ -141,7 +145,10 @@ const DesktopHeader: React.FC = () => {
         </MiddleSide>
 
         <RightSide>
-          <ConnectWalletContainer isConnected={isConnected} onClick={isConnected ? toggleIsSettingsOpen : undefined}>
+          <ConnectWalletContainer
+            {...{ isConnected, isDefaultChain }}
+            onClick={isConnected && isDefaultChain ? toggleIsSettingsOpen : undefined}
+          >
             <ConnectWallet />
           </ConnectWalletContainer>
           <Menu {...{ toggleIsHelpOpen, toggleIsSettingsOpen }} />

web/src/layout/Header/navbar/Menu/Settings/index.tsx

@@ -91,7 +91,7 @@ const Settings: React.FC<ISettings> = ({ toggleIsSettingsOpen, initialTab }) =>
           setCurrentTab(n);
         }}
       />
-      {currentTab === 0 ? <General /> : <NotificationSettings toggleIsSettingsOpen={toggleIsSettingsOpen} />}
+      {currentTab === 0 ? <General /> : <NotificationSettings {...{ toggleIsSettingsOpen }} />}
     </Container>
   );
 };

web/src/pages/GetPnk/WalletProvider.tsx

@@ -0,0 +1,51 @@
+import React, { useRef, type FC, type PropsWithChildren } from "react";
+
+import { useSyncWagmiConfig } from "@lifi/wallet-management";
+import { useAvailableChains } from "@lifi/widget";
+import { injected, walletConnect } from "@wagmi/connectors";
+import { createWeb3Modal } from "@web3modal/wagmi";
+import { createClient, http } from "viem";
+import { arbitrum, arbitrumSepolia, mainnet } from "viem/chains";
+import type { Config } from "wagmi";
+import { createConfig, WagmiProvider } from "wagmi";
+
+import { isProductionDeployment } from "consts/index";
+
+import { lightTheme } from "styles/themes";
+
+const projectId = import.meta.env.WALLETCONNECT_PROJECT_ID;
+
+const connectors = [injected(), walletConnect({ projectId })];
+
+export const WalletProvider: FC<PropsWithChildren> = ({ children }) => {
+  const { chains } = useAvailableChains();
+  const wagmi = useRef<Config>();
+
+  if (!wagmi.current) {
+    wagmi.current = createConfig({
+      chains: [mainnet],
+      client({ chain }) {
+        return createClient({ chain, transport: http() });
+      },
+      ssr: true,
+    });
+  }
+
+  useSyncWagmiConfig(wagmi.current, connectors, chains);
+
+  createWeb3Modal({
+    wagmiConfig: wagmi.current,
+    projectId,
+    defaultChain: isProductionDeployment() ? arbitrum : arbitrumSepolia,
+    allowUnsupportedChain: true,
+    themeVariables: {
+      "--w3m-color-mix": lightTheme.primaryPurple,
+      "--w3m-color-mix-strength": 20,
+    },
+  });
+  return (
+    <WagmiProvider config={wagmi.current} reconnectOnMount={false}>
+      {children}
+    </WagmiProvider>
+  );
+};

web/src/pages/GetPnk/Widget.tsx

@@ -5,6 +5,8 @@ import { LiFiWidget, WidgetConfig } from "@lifi/widget";
 
 import { responsiveSize } from "styles/responsiveSize";
 
+import { WalletProvider } from "./WalletProvider";
+
 const WidgetContainer = styled.div`
   width: 100%;
   > div {
@@ -19,18 +21,18 @@ const getWidgetConfig = (theme: Theme): WidgetConfig => ({
   toChain: 42161,
   fromToken: "0x93ED3FBe21207Ec2E8f2d3c3de6e058Cb73Bc04d",
   toToken: "0x330bD769382cFc6d50175903434CCC8D206DCAE5",
-  containerStyle: {
-    border: `1px solid ${theme.stroke}`,
-    borderRadius: "3px",
-    background: theme.whiteBackground,
-    width: responsiveSize(350, 500),
-    maxWidth: "600px",
-    height: "fit-content",
-    maxHeight: "none",
-    minWidth: "300px",
-  },
   hiddenUI: ["appearance", "language"],
   theme: {
+    container: {
+      border: `1px solid ${theme.stroke}`,
+      borderRadius: "3px",
+      background: theme.whiteBackground,
+      width: responsiveSize(350, 500),
+      maxWidth: "600px",
+      height: "fit-content",
+      maxHeight: "none",
+      minWidth: "300px",
+    },
     palette: {
       primary: {
         main: theme.primaryBlue,
@@ -40,7 +42,7 @@ const getWidgetConfig = (theme: Theme): WidgetConfig => ({
       },
       background: {
         paper: theme.whiteBackground, // bg color for cards
-        default: theme.whiteBackground, // bg color container
+        default: theme.lightBackground, // bg color container
       },
       grey: {
         300: theme.stroke, // border light theme
@@ -50,6 +52,21 @@ const getWidgetConfig = (theme: Theme): WidgetConfig => ({
         primary: theme.primaryText,
         secondary: theme.secondaryText,
       },
+      common: {
+        white: theme.primaryText,
+      },
+      warning: {
+        main: theme.warning,
+      },
+      error: {
+        main: theme.error,
+      },
+      info: {
+        main: theme.primaryBlue,
+      },
+      success: {
+        main: theme.success,
+      },
     },
     shape: {
       borderRadius: 3,
@@ -68,8 +85,10 @@ export const Widget = () => {
   const widgetConfig = useMemo(() => getWidgetConfig(theme), [theme]);
 
   return (
-    <WidgetContainer>
-      <LiFiWidget config={widgetConfig} integrator="Kleros" />
-    </WidgetContainer>
+    <WalletProvider>
+      <WidgetContainer>
+        <LiFiWidget config={widgetConfig} integrator="Kleros" />
+      </WidgetContainer>
+    </WalletProvider>
   );
 };

web/src/pages/Home/CourtOverview/Chart.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo, useState } from "react";
 import styled from "styled-components";
 
+import { Tooltip } from "chart.js";
 import { formatUnits } from "viem";
 
 import { DropdownSelect } from "@kleros/ui-components-library";
@@ -101,4 +102,23 @@ const Chart: React.FC = () => {
   );
 };
 
+// custom positioner for tooltip, we need dynamic top positioning, which is not available by default.
+Tooltip.positioners.custom = function (elements) {
+  const tooltip = this;
+  const height = tooltip.chart.chartArea.height;
+  const width = tooltip.chart.chartArea.width;
+
+  const x = elements[0]?.element.x;
+  const y = elements[0]?.element.y;
+  const isAtTop = height > y + tooltip.height;
+  const isAtEnd = width < x + tooltip.width;
+
+  return {
+    x: elements[0]?.element.x,
+    y: elements[0]?.element.y,
+    xAlign: isAtTop ? (isAtEnd ? "right" : "left") : "center",
+    yAlign: isAtTop ? "center" : "bottom",
+  };
+};
+
 export default Chart;

web/src/pages/Home/CourtOverview/TimeSeriesChart.tsx

@@ -1,7 +1,16 @@
 import React from "react";
 import styled, { useTheme } from "styled-components";
 
-import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, TimeScale, Tooltip } from "chart.js";
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  TimeScale,
+  Tooltip,
+  ScriptableContext,
+} from "chart.js";
 import { Line } from "react-chartjs-2";
 import "chartjs-adapter-moment";
 
@@ -51,6 +60,7 @@ const TimeSeriesChart: React.FC<ITimeSeriesChart> = ({ data }) => {
     },
     plugins: {
       tooltip: {
+        position: "custom",
         backgroundColor: theme.whiteBackground,
         titleColor: theme.primaryText,
         borderColor: theme.stroke,
@@ -74,18 +84,47 @@ const TimeSeriesChart: React.FC<ITimeSeriesChart> = ({ data }) => {
               datasets: [
                 {
                   data,
-                  borderColor: theme.primaryBlue,
+                  // borderColor: theme.primaryBlue,
                   stepped: true,
                   cubicInterpolationMode: "monotone",
+                  borderColor: (context: ScriptableContext<"line">) => {
+                    const ctx = context.chart.ctx;
+                    const gradient = ctx.createLinearGradient(0, 0, 0, 200);
+                    gradient.addColorStop(0, theme.primaryBlue);
+                    gradient.addColorStop(1, theme.secondaryPurple);
+                    return gradient;
+                  },
                 },
               ],
             },
             options,
           }}
+          plugins={[
+            {
+              id: "line-draw",
+              afterDatasetsDraw: (chart) => {
+                if (chart.tooltip?._active?.length) {
+                  const x = chart.tooltip._active[0].element.x;
+                  const y = chart.tooltip._active[0].element.y;
+                  const yAxis = chart.scales.y;
+
+                  const ctx = chart.ctx;
+                  ctx.save();
+                  ctx.beginPath();
+                  ctx.moveTo(x, y);
+                  ctx.lineTo(x, yAxis.bottom);
+                  ctx.lineWidth = 1;
+                  ctx.strokeStyle = theme.secondaryPurple;
+                  ctx.setLineDash([4, 4]);
+                  ctx.stroke();
+                  ctx.restore();
+                }
+              },
+            },
+          ]}
         />
       }
     </LineContainer>
   );
 };
-
 export default TimeSeriesChart;