Upgrade packages and dependencies (#14)

* ⬆️ upgrade wagmi, viem and connectkit

* ⬆️ upgrade node engine version

* 🚧 update rpc url from infura

Author: starwiz-7

Dockerfile

@@ -13,7 +13,7 @@ FROM chef as dep_cacher
 COPY --from=dep_planner /siwe-oidc/recipe.json recipe.json
 RUN cargo chef cook --release --recipe-path recipe.json
 
-FROM node:18.17.1-alpine3.18 as node_builder
+FROM node:18.20.0-alpine3.18 as node_builder
 
 # Reference https://github.com/mhart/alpine-node/issues/27#issuecomment-880663905
 RUN apk add --no-cache --virtual .build-deps alpine-sdk python3

js/ui/package.json

@@ -8,17 +8,18 @@
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
   },
   "dependencies": {
+    "@tanstack/react-query": "5.51.1",
     "buffer": "6.0.3",
-    "connectkit": "1.5.3",
+    "connectkit": "1.8.2",
     "ethers": "6.6.1",
     "js-cookie": "3.0.5",
     "process": "0.11.10",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "siwe": "2.1.4",
     "usehooks-ts": "3.1.0",
-    "viem": "1.1.7",
-    "wagmi": "1.3.0"
+    "viem": "2.x",
+    "wagmi": "2.x"
   },
   "devDependencies": {
     "@babel/core": "7.22.5",
@@ -61,6 +62,6 @@
     "webpack-dev-server": "4.6.0"
   },
   "engines": {
-    "node": ">=18.17.1"
+    "node": ">=18.18.1"
   }
 }

js/ui/src/App.tsx

@@ -1,13 +1,14 @@
 import React from "react";
+import Cookies from "js-cookie";
 import { ConnectKitButton, ConnectKitProvider } from "connectkit";
 import { SiweMessage } from "siwe";
-import { useAccount, useDisconnect } from "wagmi";
-import Cookies from "js-cookie";
+import { useAccount, useChainId, useDisconnect, useSignMessage } from "wagmi";
+import { useCountdown } from "usehooks-ts";
+
 import devfolioLogoFull from "./assets/devfolio-logo-full.svg";
 import connectWallet from "./assets/connect-wallet.svg";
 import stepCheck from "./assets/step-check.svg";
 import loader from "./assets/loader.svg";
-import { useCountdown } from "usehooks-ts";
 
 type ACTION_TYPE = "signin" | "signup" | "connect";
 type STEP_STAGE = "complete" | "incomplete";
@@ -20,6 +21,8 @@ const oidc_nonce = params.get("oidc_nonce") ?? "";
 const client_id = params.get("client_id") ?? "";
 const action = (params.get("action") as ACTION_TYPE | undefined) ?? "signin";
 
+const COUNTDOWN_IN_SECONDS = 3;
+
 const TITLE: Record<ACTION_TYPE, string> = {
   signin: "Sign in with Ethereum",
   signup: "Sign up with Ethereum",
@@ -106,41 +109,99 @@ const Step = ({
 };
 
 function App() {
+  let siweSessionTimeout: NodeJS.Timeout;
+  let redirectTimeout: NodeJS.Timeout;
+
   const account = useAccount();
   const { disconnect } = useDisconnect();
+  const chainId = useChainId();
 
-  const [isVerifyingAddress, setIsVerifyingAddress] =
-    React.useState<boolean>(false);
-  const [activeStepNumber, setActiveStepNumber] = React.useState<number>(1);
+  const { signMessage: wagmiSignMessage } = useSignMessage({
+    mutation: {
+      onSuccess: (signature) => onVerifyAddressSuccess(signature),
+    },
+  });
 
   const [count, { startCountdown }] = useCountdown({
-    countStart: 3,
+    countStart: COUNTDOWN_IN_SECONDS,
     intervalMs: 1000,
   });
 
-  const onWalletConnectSuccess = () => {
-    setActiveStepNumber(2);
-  };
+  const [localSession, setLocalSession] = React.useState<{
+    message: SiweMessage;
+    raw: string;
+    signature?: string;
+  } | null>(null);
+
+  const [isVerifyingAddress, setIsVerifyingAddress] =
+    React.useState<boolean>(false);
+
+  const [activeStepNumber, setActiveStepNumber] = React.useState<number>(1);
+
+  const expirationTime = React.useMemo(() => {
+    return new Date(
+      new Date().getTime() + 2 * 24 * 60 * 60 * 1000, // 48h
+    );
+  }, []);
+
+  // Clear all the timeout before closing the tab/app
+  React.useEffect(() => {
+    return () => {
+      clearTimeout(siweSessionTimeout);
+      clearTimeout(redirectTimeout);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const onVerifyAddressSuccess = (signature?: string) => {
+    if (
+      !localSession?.message ||
+      !localSession?.raw ||
+      typeof signature !== "string" ||
+      signature?.length === 0
+    )
+      return;
 
-  const onVerifyAddressSuccess = () => {
     // Start countdown for redirect
     startCountdown();
     setIsVerifyingAddress(false);
 
     setActiveStepNumber(3);
+
+    siweSessionTimeout = setTimeout(
+      () => {
+        Cookies.set(
+          "siwe",
+          JSON.stringify({
+            ...localSession,
+            signature,
+          }),
+          {
+            expires: expirationTime,
+          },
+        );
+      },
+      (COUNTDOWN_IN_SECONDS - 2) * 1000,
+    );
+
+    redirectTimeout = setTimeout(() => {
+      window.location.replace(
+        `/sign_in?redirect_uri=${encodeURI(redirect)}&state=${encodeURI(
+          state,
+        )}&client_id=${encodeURI(client_id)}${encodeURI(oidc_nonce)}`,
+      );
+    }, COUNTDOWN_IN_SECONDS * 1000);
+  };
+
+  const onWalletConnectSuccess = () => {
+    setActiveStepNumber(2);
   };
 
   const handleSignInWithEthereum = async (e: React.MouseEvent) => {
     e.preventDefault();
     setIsVerifyingAddress(true);
     const address = account?.address;
     try {
-      const expirationTime = new Date(
-        new Date().getTime() + 2 * 24 * 60 * 60 * 1000, // 48h
-      );
-
-      const chainId = await account.connector?.getChainId();
-
       const signMessage = new SiweMessage({
         domain: window.location.host,
         address: address,
@@ -152,33 +213,18 @@ function App() {
         nonce,
         resources: [redirect],
       }).prepareMessage();
-      const walletClient = await account.connector?.getWalletClient();
 
-      const signature = await walletClient?.signMessage({
+      wagmiSignMessage({
         account: account.address,
         message: signMessage,
       });
 
       const message = new SiweMessage(signMessage);
-      const session = {
+
+      setLocalSession({
         message,
         raw: signMessage,
-        signature,
-      };
-
-      onVerifyAddressSuccess();
-
-      setTimeout(() => {
-        Cookies.set("siwe", JSON.stringify(session), {
-          expires: expirationTime,
-        });
-
-        window.location.replace(
-          `/sign_in?redirect_uri=${encodeURI(redirect)}&state=${encodeURI(
-            state,
-          )}&client_id=${encodeURI(client_id)}${encodeURI(oidc_nonce)}`,
-        );
-      }, 3000);
+      });
 
       return;
     } catch (e) {

js/ui/src/main.tsx

@@ -1,29 +1,41 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import { WagmiConfig, createConfig, mainnet } from "wagmi";
+import { WagmiProvider, createConfig, fallback, http } from "wagmi";
 import { getDefaultConfig } from "connectkit";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { mainnet } from "wagmi/chains";
+
 import App from "./App";
 import "./index.css";
 
 const config = createConfig(
   getDefaultConfig({
-    // Required API Keys
-    infuraId: process.env.INFURA_ID,
-    walletConnectProjectId: process.env.WALLET_CONNECT_ID ?? '',
+    walletConnectProjectId: process.env.WALLET_CONNECT_ID ?? "",
     chains: [mainnet],
+    transports: {
+      [mainnet.id]: fallback([
+        http(
+          `https://mainnet.infura.io/v3/${process.env.INFURA_ID ?? ""}`,
+        ),
+        http(), // public fallback
+      ]),
+    },
 
     // Required
     appName: "SIWE | Devfolio",
     appUrl: "https://devfolio.co", // your app's url
     appIcon: "https://siwe.devfolio.co/favicon.png", // your app's logo,no bigger than 1024x1024px (max. 1MB)
-    autoConnect: false,
-  })
+  }),
 );
 
+const queryClient = new QueryClient();
+
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
-    <WagmiConfig config={config}>
-      <App />
-    </WagmiConfig>
-  </React.StrictMode>
+    <WagmiProvider config={config}>
+      <QueryClientProvider client={queryClient}>
+        <App />
+      </QueryClientProvider>
+    </WagmiProvider>
+  </React.StrictMode>,
 );