Upgrade Stellar Wallet Kits to the latest version

.gitignore

@@ -51,3 +51,6 @@ mise.toml
 
 # Sentry Config File
 .env.sentry-build-plugin
+
+# asdf
+.tool-versions

.tool-versions

@@ -0,0 +1,2 @@
+nodejs 23.0.0
+yarn 1.22.22

package.json

@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@amplitude/analytics-browser": "^2.20.1",
-    "@creit.tech/stellar-wallets-kit": "^1.9.3",
+    "@creit-tech/stellar-wallets-kit": "jsr:2.0.0-beta.9",
     "@ledgerhq/hw-app-str": "^7.2.9",
     "@ledgerhq/hw-transport-webhid": "^6.30.9",
     "@monaco-editor/react": "^4.7.0",

src/app/(sidebar)/smart-contracts/contract-explorer/components/InvokeContractForm.tsx

@@ -22,6 +22,7 @@ import {
 import { BASE_FEE, contract } from "@stellar/stellar-sdk";
 import { Api } from "@stellar/stellar-sdk/rpc";
 import { JSONSchema7 } from "json-schema";
+import { StellarWalletsKit } from "@creit-tech/stellar-wallets-kit/sdk";
 
 import { RpcErrorResponse } from "@/components/TxErrorResponse";
 
@@ -156,7 +157,7 @@ export const InvokeContractForm = ({
     reset: resetSubmitRpc,
   } = useSubmitRpcTx();
 
-  const walletKitInstance = useContext(WalletKitContext);
+  const walletKitContext = useContext(WalletKitContext);
 
   const IS_BLOCK_EXPLORER_ENABLED =
     network.id === "testnet" || network.id === "mainnet";
@@ -165,7 +166,7 @@ export const InvokeContractForm = ({
   const responseErrorEl = useRef<HTMLDivElement | null>(null);
 
   const signTx = async (xdr: string): Promise<string | null> => {
-    if (!walletKitInstance?.walletKit || !walletKit?.publicKey) {
+    if (!walletKitContext.isInitialized || !walletKit?.publicKey) {
       return null;
     }
 
@@ -185,13 +186,10 @@ export const InvokeContractForm = ({
           }, 180000);
         });
 
-        const signPromise = walletKitInstance.walletKit.signTransaction(
-          xdr || "",
-          {
-            address: walletKit.publicKey,
-            networkPassphrase: network.passphrase,
-          },
-        );
+        const signPromise = StellarWalletsKit.signTransaction(xdr || "", {
+          address: walletKit.publicKey,
+          networkPassphrase: network.passphrase,
+        });
 
         const result = await Promise.race([signPromise, timeoutPromise]);
 

src/app/layout.tsx

@@ -3,7 +3,7 @@ import type { Metadata } from "next";
 
 import { LayoutMain } from "@/components/layout/LayoutMain";
 import { LayoutContextProvider } from "@/components/layout/LayoutContextProvider";
-import { WalletKitContextProvider } from "@/components/WalletKit/WalletKitContextProvider";
+import { DynamicWalletKitProvider } from "@/components/WalletKit/DynamicWalletKitProvider";
 import { CustomAiButton } from "@/components/CustomAiButton";
 
 import { QueryProvider } from "@/query/QueryProvider";
@@ -35,9 +35,9 @@ export default function RootLayout({
             <StoreProvider>
               <QueryProvider>
                 <LayoutContextProvider>
-                  <WalletKitContextProvider>
+                  <DynamicWalletKitProvider>
                     <LayoutMain>{children}</LayoutMain>
-                  </WalletKitContextProvider>
+                  </DynamicWalletKitProvider>
                   <CustomAiButton />
                 </LayoutContextProvider>
               </QueryProvider>

src/components/WalletKit/ConnectWallet.tsx

@@ -2,7 +2,7 @@
 
 import { useContext, useEffect, useState } from "react";
 import { Button, Modal, Text } from "@stellar/design-system";
-import { ISupportedWallet } from "@creit.tech/stellar-wallets-kit";
+import { StellarWalletsKit } from "@creit-tech/stellar-wallets-kit/sdk";
 import { useStore } from "@/store/useStore";
 
 import { useAccountInfo } from "@/query/useAccountInfo";
@@ -23,7 +23,7 @@ export const ConnectWallet = () => {
   const [errorMessageOnConnect, setErrorMessageOnConnect] = useState("");
   const [hasAttemptedAutoConnect, setHasAttemptedAutoConnect] =
     useState<boolean>(false);
-  const walletKitInstance = useContext(WalletKitContext);
+  const walletKitContext = useContext(WalletKitContext);
   const savedWallet = localStorageSavedWallet.get();
 
   const { data: accountInfo, refetch: fetchAccountInfo } = useAccountInfo({
@@ -38,6 +38,7 @@ export const ConnectWallet = () => {
       walletType: undefined,
     });
 
+    StellarWalletsKit.disconnect();
     setShowModal(false);
     setConnected(false);
     setHasAttemptedAutoConnect(false);
@@ -52,18 +53,13 @@ export const ConnectWallet = () => {
       !hasAttemptedAutoConnect &&
       !!savedWallet?.id &&
       ![undefined, "false", "wallet_connect"].includes(savedWallet?.id) &&
-      savedWallet.network.id === network.id
+      savedWallet.network.id === network.id &&
+      walletKitContext.isInitialized
     ) {
       t = setTimeout(async () => {
-        if (!walletKitInstance?.walletKit) {
-          return;
-        }
-
         try {
-          walletKitInstance.walletKit?.setWallet(savedWallet.id);
-          const success = await handleSetWalletAddress({
-            skipRequestAccess: true,
-          });
+          StellarWalletsKit.setWallet(savedWallet.id);
+          const success = await handleSetWalletAddress();
 
           // Only set the flag if connection failed, so we can retry on successful connections
           if (!success) {
@@ -83,22 +79,21 @@ export const ConnectWallet = () => {
     };
     // Not including savedWallet.network.id
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [savedWallet?.id, connected, hasAttemptedAutoConnect, walletKitInstance]);
+  }, [
+    savedWallet?.id,
+    connected,
+    hasAttemptedAutoConnect,
+    walletKitContext.isInitialized,
+  ]);
 
   // Reset auto-connect attempt when network changes
   useEffect(() => {
     setHasAttemptedAutoConnect(false);
   }, [network.id]);
 
-  const handleSetWalletAddress = async ({
-    skipRequestAccess,
-  }: {
-    skipRequestAccess: boolean;
-  }): Promise<boolean> => {
+  const handleSetWalletAddress = async (): Promise<boolean> => {
     try {
-      const addressResult = await walletKitInstance.walletKit?.getAddress({
-        skipRequestAccess,
-      });
+      const addressResult = await StellarWalletsKit.getAddress();
 
       if (!addressResult?.address) {
         return false;
@@ -124,38 +119,43 @@ export const ConnectWallet = () => {
 
   const connectWallet = async () => {
     try {
-      await walletKitInstance.walletKit?.openModal({
-        onWalletSelected: async (option: ISupportedWallet) => {
-          walletKitInstance.walletKit?.setWallet(option.id);
-          const isWalletConnected = await handleSetWalletAddress({
-            skipRequestAccess: false,
-          });
-
-          if (!isWalletConnected) {
-            const errorMessage = "Unable to load wallet information";
-            setErrorMessageOnConnect(errorMessage);
-            disconnect();
-            return;
-          }
+      const { address } = await StellarWalletsKit.authModal();
+
+      if (!address) {
+        const errorMessage = "Unable to load wallet information";
+        setErrorMessageOnConnect(errorMessage);
+        disconnect();
+        return;
+      }
 
-          localStorageSavedWallet.set({
-            id: option.id,
-            network: {
-              id: network.id,
-              label: network.label,
-            },
-          });
-
-          trackEvent(TrackingEvent.WALLET_KIT_SELECTED, {
-            walletType: option.id,
-          });
-        },
+      updateWalletKit({
+        publicKey: address,
+        walletType: walletKitContext.selectedWalletId,
       });
+      setConnected(true);
+
+      // Use the wallet ID from the kit event (set via WALLET_SELECTED event in context)
+      if (walletKitContext.selectedWalletId) {
+        localStorageSavedWallet.set({
+          id: walletKitContext.selectedWalletId,
+          network: {
+            id: network.id,
+            label: network.label,
+          },
+        });
+
+        trackEvent(TrackingEvent.WALLET_KIT_SELECTED, {
+          walletType: walletKitContext.selectedWalletId,
+        });
+      }
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
     } catch (e) {
       const errorMessage =
         (e as { message?: string })?.message || "Unknown error occurred";
-      setErrorMessageOnConnect(errorMessage);
+      // Don't show error if user just closed the modal
+      if (errorMessage !== "The user closed the modal.") {
+        setErrorMessageOnConnect(errorMessage);
+      }
       disconnect();
     }
   };
@@ -199,6 +199,10 @@ export const ConnectWallet = () => {
     );
   };
 
+  if (!walletKitContext.isInitialized) {
+    return;
+  }
+
   return walletKit?.publicKey ? (
     <>
       <Button

src/components/WalletKit/DynamicWalletKitProvider.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+// Dynamically import WalletKitContextProvider with SSR disabled
+// This ensures the StellarWalletsKit only loads on the client side
+export const DynamicWalletKitProvider = dynamic(
+  () =>
+    import("@/components/WalletKit/WalletKitContextProvider").then(
+      (mod) => mod.WalletKitContextProvider,
+    ),
+  {
+    ssr: false,
+  },
+);