Upgrade @creit.tech/stellar-wallets-kit to v2.0.1

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": "^2.0.1",
     "@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

@@ -30,6 +30,7 @@ import { ErrorText } from "@/components/ErrorText";
 import { JsonSchemaRenderer } from "@/components/SmartContractJsonSchema/JsonSchemaRenderer";
 import { TransactionSuccessCard } from "@/components/TransactionSuccessCard";
 import { WalletKitContext } from "@/components/WalletKit/WalletKitContextProvider";
+import { StellarWalletsKit } from "@creit.tech/stellar-wallets-kit";
 import { TabView } from "@/components/TabView";
 import { CodeEditor, SupportedLanguage } from "@/components/CodeEditor";
 
@@ -170,7 +171,7 @@ export const InvokeContractForm = ({
   const responseErrorEl = useRef<HTMLDivElement | null>(null);
 
   const signTx = async (xdr: string): Promise<string | null> => {
-    if (!walletKitInstance?.walletKit || !walletKit?.publicKey) {
+    if (!walletKitInstance?.isInitialized || !walletKit?.publicKey) {
       return null;
     }
 
@@ -190,13 +191,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/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";
 import { useStore } from "@/store/useStore";
 
 import { useAccountInfo } from "@/query/useAccountInfo";
@@ -55,12 +55,12 @@ export const ConnectWallet = () => {
       savedWallet.network.id === network.id
     ) {
       t = setTimeout(async () => {
-        if (!walletKitInstance?.walletKit) {
+        if (!walletKitInstance?.isInitialized) {
           return;
         }
 
         try {
-          walletKitInstance.walletKit?.setWallet(savedWallet.id);
+          StellarWalletsKit.setWallet(savedWallet.id);
           const success = await handleSetWalletAddress({
             skipRequestAccess: true,
           });
@@ -96,7 +96,7 @@ export const ConnectWallet = () => {
     skipRequestAccess: boolean;
   }): Promise<boolean> => {
     try {
-      const addressResult = await walletKitInstance.walletKit?.getAddress({
+      const addressResult = await StellarWalletsKit.selectedModule.getAddress({
         skipRequestAccess,
       });
 
@@ -124,39 +124,36 @@ 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,
-          });
+      const { address } = await StellarWalletsKit.authModal();
 
-          if (!isWalletConnected) {
-            const errorMessage = "Unable to load wallet information";
-            setErrorMessageOnConnect(errorMessage);
-            disconnect();
-            return;
-          }
+      if (!address) {
+        setErrorMessageOnConnect("No wallet address received");
+        return;
+      }
 
-          localStorageSavedWallet.set({
-            id: option.id,
-            network: {
-              id: network.id,
-              label: network.label,
-            },
-          });
+      const walletId = StellarWalletsKit.selectedModule.productId;
 
-          trackEvent(TrackingEvent.WALLET_KIT_SELECTED, {
-            walletType: option.id,
-          });
+      updateWalletKit({
+        publicKey: address,
+        walletType: walletId,
+      });
+      setConnected(true);
+
+      localStorageSavedWallet.set({
+        id: walletId,
+        network: {
+          id: network.id,
+          label: network.label,
         },
       });
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
+      trackEvent(TrackingEvent.WALLET_KIT_SELECTED, {
+        walletType: walletId,
+      });
     } catch (e) {
       const errorMessage =
         (e as { message?: string })?.message || "Unknown error occurred";
       setErrorMessageOnConnect(errorMessage);
-      disconnect();
     }
   };
 

src/components/WalletKit/WalletKitContextProvider.tsx

@@ -1,32 +1,34 @@
 "use client";
 
-import { createContext, useEffect, useMemo, useState } from "react";
+import { createContext, useEffect, useState } from "react";
 import { useStore } from "@/store/useStore";
 
 import {
-  AlbedoModule,
-  FreighterModule,
-  HanaModule,
-  LobstrModule,
-  RabetModule,
   StellarWalletsKit,
-  HotWalletModule,
-  xBullModule,
+  SwkAppDarkTheme,
+  SwkAppLightTheme,
 } from "@creit.tech/stellar-wallets-kit";
-import { LedgerModule } from "@creit.tech/stellar-wallets-kit/modules/ledger.module";
+import { AlbedoModule } from "@creit.tech/stellar-wallets-kit/modules/albedo";
+import { FreighterModule } from "@creit.tech/stellar-wallets-kit/modules/freighter";
+import { HanaModule } from "@creit.tech/stellar-wallets-kit/modules/hana";
+import { HotWalletModule } from "@creit.tech/stellar-wallets-kit/modules/hotwallet";
+import { LedgerModule } from "@creit.tech/stellar-wallets-kit/modules/ledger";
+import { LobstrModule } from "@creit.tech/stellar-wallets-kit/modules/lobstr";
+import { RabetModule } from "@creit.tech/stellar-wallets-kit/modules/rabet";
+import { xBullModule } from "@creit.tech/stellar-wallets-kit/modules/xbull";
 
 import { getWalletKitNetwork } from "@/helpers/getWalletKitNetwork";
 import { localStorageSavedTheme } from "@/helpers/localStorageSavedTheme";
 import { localStorageSavedWallet } from "@/helpers/localStorageSavedWallet";
 import { SavedWallet } from "@/types/types";
 
 type WalletKitProps = {
-  walletKit?: StellarWalletsKit;
+  isInitialized: boolean;
   walletId?: string;
 };
 
 export const WalletKitContext = createContext<WalletKitProps>({
-  walletKit: undefined,
+  isInitialized: false,
 });
 
 export const WalletKitContextProvider = ({
@@ -36,6 +38,7 @@ export const WalletKitContextProvider = ({
 }) => {
   const { network, theme, setTheme } = useStore();
   const [savedWallet, setSavedWallet] = useState<SavedWallet | null>(null);
+  const [isInitialized, setIsInitialized] = useState(false);
   const networkType = getWalletKitNetwork(network.id);
 
   useEffect(() => {
@@ -57,48 +60,14 @@ export const WalletKitContextProvider = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const walletKitInstance = useMemo(() => {
+  useEffect(() => {
     // Only initialize on client side to avoid "window is not defined" errors in terminal
     if (typeof window === "undefined") {
-      return undefined;
+      return;
     }
 
     const isDarkTheme = theme === "sds-theme-dark";
 
-    const commonDarkTheme = {
-      bgColor: "#161616",
-      textColor: "#fcfcfc",
-      solidTextColor: "#fcfcfc",
-      dividerColor: "#fcfcfc",
-    };
-
-    const commonLightTheme = {
-      bgColor: "#fcfcfc",
-      textColor: "#161616",
-      solidTextColor: "#161616",
-      dividerColor: "#161616",
-    };
-
-    const modalDarkTheme = {
-      ...commonDarkTheme,
-      dividerColor: "#161616",
-      headerButtonColor: "#161616",
-      helpBgColor: "#161616",
-      notAvailableTextColor: "#fcfcfc",
-      notAvailableBgColor: "#161616",
-      notAvailableBorderColor: "#fcfcfc",
-    };
-
-    const modalLightTheme = {
-      ...commonLightTheme,
-      dividerColor: "#fcfcfc",
-      headerButtonColor: "#fcfcfc",
-      helpBgColor: "#fcfcfc",
-      notAvailableTextColor: "#161616",
-      notAvailableBgColor: "#fcfcfc",
-      notAvailableBorderColor: "#161616",
-    };
-
     const TEST_MODULES = [
       new AlbedoModule(),
       new xBullModule(),
@@ -111,31 +80,20 @@ export const WalletKitContextProvider = ({
 
     const PROD_MODULES = [...TEST_MODULES, new HotWalletModule()];
 
-    return new StellarWalletsKit({
+    StellarWalletsKit.init({
       network: networkType,
       selectedWalletId: savedWallet?.id || "",
       modules: network.id === "mainnet" ? PROD_MODULES : TEST_MODULES,
-      ...(theme && {
-        buttonTheme: isDarkTheme
-          ? {
-              ...commonDarkTheme,
-              buttonPadding: "0.5rem 1.25rem",
-              buttonBorderRadius: "0.5rem",
-            }
-          : {
-              ...commonLightTheme,
-              buttonPadding: "0.5rem 1.25rem",
-              buttonBorderRadius: "0.5rem",
-            },
-        modalTheme: isDarkTheme ? modalDarkTheme : modalLightTheme,
-      }),
+      theme: isDarkTheme ? SwkAppDarkTheme : SwkAppLightTheme,
     });
+
+    setIsInitialized(true);
   }, [network.id, networkType, savedWallet?.id, theme]);
 
   return (
     <WalletKitContext.Provider
       value={{
-        walletKit: walletKitInstance,
+        isInitialized,
         walletId: savedWallet?.id,
       }}
     >

src/helpers/getWalletKitNetwork.ts

@@ -1,18 +1,18 @@
 import { NetworkType } from "@/types/types";
 
-import { WalletNetwork } from "@creit.tech/stellar-wallets-kit";
+import { Networks } from "@creit.tech/stellar-wallets-kit";
 
 export const getWalletKitNetwork = (network: NetworkType) => {
   switch (network) {
     case "testnet":
-      return WalletNetwork.TESTNET;
+      return Networks.TESTNET;
     case "mainnet":
-      return WalletNetwork.PUBLIC;
+      return Networks.PUBLIC;
     case "futurenet":
-      return WalletNetwork.FUTURENET;
+      return Networks.FUTURENET;
     // @TODO: stellar wallets kit doesn't support CUSTOM
     //   case "custom":
     default:
-      return WalletNetwork.TESTNET;
+      return Networks.TESTNET;
   }
 };