fix: production build lazyload walletconnect

split from other deploy PR

Author: cpb8010

packages/auth-server/app.vue

@@ -5,19 +5,7 @@
 </template>
 
 <script lang="ts" setup>
-import { createAppKit } from "@reown/appkit/vue";
-
-const { defaultChain } = useClientStore();
-const { metadata, projectId, wagmiAdapter } = useAppKit();
-
-createAppKit({
-  adapters: [wagmiAdapter],
-  networks: [defaultChain],
-  projectId,
-  metadata,
-});
-
-// BigInt polyfill
+// BigInt polyfill for JSON serialization
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 (BigInt.prototype as any).toJSON = function () {
   return this.toString();

packages/auth-server/composables/useAppKit.ts

@@ -1,28 +1,75 @@
+import { createAppKit } from "@reown/appkit/vue";
 import { WagmiAdapter } from "@reown/appkit-adapter-wagmi";
 
+// Track if AppKit has been initialized
+let appKitInitialized = false;
+let wagmiAdapterInstance: WagmiAdapter | null = null;
+
 export const useAppKit = () => {
   const runtimeConfig = useRuntimeConfig();
   const { defaultChain } = useClientStore();
 
   const projectId = runtimeConfig.public.appKitProjectId;
+  const origin = typeof window !== "undefined" ? window.location.origin : "https://auth.zksync.dev";
+
   const metadata = {
     name: "ZKsync SSO Auth Server",
     description: "ZKsync SSO Auth Server",
-    url: window.location.origin,
-    icons: [new URL("/icon-512.png", window.location.origin).toString()],
+    url: origin,
+    icons: [`${origin}/icon-512.png`],
   };
 
-  const wagmiAdapter = new WagmiAdapter({
-    networks: [defaultChain],
-    projectId,
-  });
+  // Create plain chain object to avoid Viem Proxy issues
+  const plainChain = {
+    id: defaultChain.id,
+    name: defaultChain.name,
+    nativeCurrency: {
+      name: defaultChain.nativeCurrency.name,
+      symbol: defaultChain.nativeCurrency.symbol,
+      decimals: defaultChain.nativeCurrency.decimals,
+    },
+    rpcUrls: {
+      default: {
+        http: [...defaultChain.rpcUrls.default.http],
+      },
+    },
+    blockExplorers: defaultChain.blockExplorers
+      ? {
+          default: {
+            name: defaultChain.blockExplorers.default.name,
+            url: defaultChain.blockExplorers.default.url,
+          },
+        }
+      : undefined,
+  };
+
+  // Lazy initialization - only create AppKit when first used
+  if (!appKitInitialized && typeof window !== "undefined") {
+    try {
+      wagmiAdapterInstance = new WagmiAdapter({
+        networks: [plainChain],
+        projectId,
+      });
+
+      createAppKit({
+        adapters: [wagmiAdapterInstance],
+        networks: [plainChain],
+        projectId,
+        metadata,
+      });
+
+      appKitInitialized = true;
+    } catch (error) {
+      console.warn("Failed to initialize AppKit:", error);
+    }
+  }
 
-  const wagmiConfig = wagmiAdapter.wagmiConfig;
+  const wagmiConfig = wagmiAdapterInstance?.wagmiConfig;
 
   return {
     metadata,
     projectId,
-    wagmiAdapter,
+    wagmiAdapter: wagmiAdapterInstance,
     wagmiConfig,
   };
 };