fix(wc): wc connection should persist across refreshes (#1162)

Author: Michael Moldoveanu

account-kit/core/src/hydrate.ts

@@ -70,6 +70,7 @@ export function hydrate(
     initialState != null && "wagmi" in initialState
       ? initialState.wagmi
       : undefined;
+
   const { onMount: wagmi_onMount } = wagmi_hydrate(
     config._internal.wagmiConfig,
     {

account-kit/core/src/utils/cookies.ts

@@ -79,7 +79,7 @@ export function cookieToInitialState(
 
   const wagmiClientState = wagmiCookieToInitialState(
     config._internal.wagmiConfig,
-    cookie
+    decodeURIComponent(cookie)
   );
 
   return {

account-kit/react/src/components/auth/card/eoa.tsx

@@ -2,14 +2,14 @@ import { walletConnect } from "wagmi/connectors";
 import { useChain } from "../../../hooks/useChain.js";
 import { Spinner } from "../../../icons/spinner.js";
 import { WalletConnectIcon } from "../../../icons/walletConnectIcon.js";
+import { ls } from "../../../strings.js";
 import { Button } from "../../button.js";
 import { useAuthContext } from "../context.js";
+import { useConnectEOA } from "../hooks/useConnectEOA.js";
+import { useWalletConnectAuthConfig } from "../hooks/useWalletConnectAuthConfig.js";
 import { CardContent } from "./content.js";
 import { ConnectionError } from "./error/connection-error.js";
 import { EOAWallets } from "./error/types.js";
-import { useConnectEOA } from "../hooks/useConnectEOA.js";
-import { useWalletConnectAuthConfig } from "../hooks/useWalletConnectAuthConfig.js";
-import { ls } from "../../../strings.js";
 
 export const EoaConnectCard = () => {
   const { setAuthStep, authStep } = useAuthContext("eoa_connect");
@@ -153,30 +153,32 @@ export const EoaPickCard = () => {
 
   const { walletConnectParams } = useWalletConnectAuthConfig();
 
-  const connectorButtons = connectors.map((connector) => {
-    return (
-      <Button
-        className="justify-start"
-        variant="social"
-        key={connector.id}
-        icon={
-          connector.icon && (
-            <img
-              src={connector.icon}
-              alt={connector.name}
-              height={20}
-              width={20}
-            />
-          )
-        }
-        onClick={() => {
-          connect({ connector, chainId: chain.id });
-        }}
-      >
-        {connector.name}
-      </Button>
-    );
-  });
+  const connectorButtons = connectors
+    .filter((x) => x.type !== "walletConnect")
+    .map((connector) => {
+      return (
+        <Button
+          className="justify-start"
+          variant="social"
+          key={connector.id}
+          icon={
+            connector.icon && (
+              <img
+                src={connector.icon}
+                alt={connector.name}
+                height={20}
+                width={20}
+              />
+            )
+          }
+          onClick={() => {
+            connect({ connector, chainId: chain.id });
+          }}
+        >
+          {connector.name}
+        </Button>
+      );
+    });
 
   const walletConnectConnector = walletConnectParams
     ? walletConnect(walletConnectParams)

account-kit/react/src/components/auth/hooks/useWalletConnectAuthConfig.tsx

@@ -2,6 +2,7 @@
 
 import type { WalletConnectParameters } from "wagmi/connectors";
 import { useAuthConfig } from "../../../hooks/internal/useAuthConfig.js";
+import { getWalletConnectParams } from "../../../utils.js";
 import type { AuthType } from "../types.js";
 
 export const useWalletConnectAuthConfig = (): {
@@ -21,18 +22,7 @@ export const useWalletConnectAuthConfig = (): {
   });
 
   // Add z-index to the wallet connect modal if not already set
-  const walletConnectParams = walletConnectAuthConfig
-    ? ({
-        ...walletConnectAuthConfig,
-        qrModalOptions: {
-          ...walletConnectAuthConfig.qrModalOptions,
-          themeVariables: {
-            "--wcm-z-index": "1000000",
-            ...walletConnectAuthConfig.qrModalOptions?.themeVariables,
-          },
-        },
-      } as WalletConnectParameters)
-    : undefined;
+  const walletConnectParams = getWalletConnectParams(walletConnectAuthConfig);
 
   return {
     walletConnectParams,

account-kit/react/src/createConfig.ts

@@ -3,8 +3,11 @@ import {
   type AlchemyAccountsConfig,
   type CreateConfigProps,
 } from "@account-kit/core";
+import { walletConnect } from "wagmi/connectors";
+import type { AuthType } from "./components/auth/types.js";
 import { ReactLogger } from "./metrics.js";
 import type { AlchemyAccountsUIConfig } from "./types";
+import { getWalletConnectParams } from "./utils.js";
 
 export type AlchemyAccountsConfigWithUI = AlchemyAccountsConfig & {
   ui?: AlchemyAccountsUIConfig;
@@ -54,6 +57,25 @@ export const createConfig = (
     props.enablePopupOauth = true;
   }
 
+  const externalWalletSection = ui?.auth?.sections
+    .find((x) => x.some((y) => y.type === "external_wallets"))
+    ?.find((x) => x.type === "external_wallets") as
+    | Extract<AuthType, { type: "external_wallets" }>
+    | undefined;
+
+  if (
+    externalWalletSection?.walletConnect &&
+    !props.connectors?.some((x) => "type" in x && x.type === "walletConnect")
+  ) {
+    const walletConnectAuthConfig = externalWalletSection?.walletConnect;
+    const walletConnectParams = getWalletConnectParams(
+      walletConnectAuthConfig
+    )!;
+
+    props.connectors ??= [];
+    props.connectors.push(walletConnect(walletConnectParams));
+  }
+
   const config = createCoreConfig(props);
 
   ReactLogger.trackEvent({

account-kit/react/src/hooks/useUser.ts

@@ -33,7 +33,11 @@ export const useUser = (): UseUserResult => {
     () => getUser(config) ?? null
   );
   const eoaUser = useMemo(() => {
-    if (account.status !== "connected") {
+    if (account.status !== "connected" && account.status !== "reconnecting") {
+      return null;
+    }
+
+    if (!account.address) {
       return null;
     }
 

account-kit/react/src/utils.ts

@@ -1,3 +1,5 @@
+import type { WalletConnectParameters } from "wagmi/connectors";
+
 export function capitalize(str: string) {
   return str
     .split(" ")
@@ -8,3 +10,22 @@ export function capitalize(str: string) {
 export function assertNever(msg: string) {
   throw new Error(msg);
 }
+
+export function getWalletConnectParams(
+  walletConnectAuthConfig: WalletConnectParameters | undefined
+): WalletConnectParameters | undefined {
+  if (!walletConnectAuthConfig) return undefined;
+
+  return walletConnectAuthConfig
+    ? ({
+        ...walletConnectAuthConfig,
+        qrModalOptions: {
+          ...walletConnectAuthConfig.qrModalOptions,
+          themeVariables: {
+            "--wcm-z-index": "1000000",
+            ...walletConnectAuthConfig.qrModalOptions?.themeVariables,
+          },
+        },
+      } as WalletConnectParameters)
+    : undefined;
+}

examples/ui-demo/src/app/config.tsx

@@ -4,6 +4,7 @@ import { cookieStorage, createConfig } from "@account-kit/react";
 import { AccountKitTheme } from "@account-kit/react/tailwind";
 import { type KnownAuthProvider } from "@account-kit/signer";
 import { QueryClient } from "@tanstack/react-query";
+import { walletConnect } from "wagmi/connectors";
 
 export type Config = {
   auth: {
@@ -75,6 +76,9 @@ export const alchemyConfig = () =>
       chain: arbitrumSepolia,
       ssr: true,
       policyId: process.env.NEXT_PUBLIC_PAYMASTER_POLICY_ID,
+      connectors: [
+        walletConnect({ projectId: "30e7ffaff99063e68cc9870c105d905b" }),
+      ],
       storage: cookieStorage,
       enablePopupOauth: true,
     },

examples/ui-demo/src/state/index.tsx

@@ -86,6 +86,7 @@ export function ConfigSync() {
     classes.forEach((x) => root.classList.add(x));
 
     const uiConfig = convertDemoConfigToUiConfig(config);
+
     updateConfig(uiConfig);
   }, [config, updateConfig]);