Merge pull request #1658 from kleros/chore/update-lifi-widget-to-v3

Chore/update lifi widget to v3

Author: jaybuidl

package.json

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

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