add a ledger wallet as an option on stellar wallets kit

stellar · Mar 5, 2025 · c9eae7d · c9eae7d
1 parent c34f478
commit c9eae7d
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 4 deletions.
diff --git a/src/components/WalletKitContextProvider.tsx b/src/components/WalletKitContextProvider.tsx
@@ -4,9 +4,14 @@ import { createContext, useEffect, useMemo } from "react";
 import { useStore } from "@/store/useStore";
 
 import {
+  AlbedoModule,
+  FreighterModule,
+  HanaModule,
+  LobstrModule,
+  RabetModule,
   StellarWalletsKit,
   XBULL_ID,
-  allowAllModules,
+  xBullModule,
 } from "@creit.tech/stellar-wallets-kit";
 import { LedgerModule } from "@creit.tech/stellar-wallets-kit/modules/ledger.module";
 
@@ -79,7 +84,15 @@ export const WalletKitContextProvider = ({
     return new StellarWalletsKit({
       network: networkType,
       selectedWalletId: XBULL_ID,
-      modules: [...allowAllModules(), new LedgerModule()],
+      modules: [
+        new AlbedoModule(),
+        new xBullModule(),
+        new FreighterModule(),
+        new LobstrModule(),
+        new RabetModule(),
+        new HanaModule(),
+        new LedgerModule(),
+      ],
       ...(theme && {
         buttonTheme: isDarkTheme
           ? {

diff --git a/src/hooks/useSignWithExtensionWallet.ts b/src/hooks/useSignWithExtensionWallet.ts
@@ -34,8 +34,20 @@ export const useSignWithExtensionWallet = ({
     setErrorMsg("");
   };
 
-  const getErrorMsg = (error: any) =>
-    error?.message || error || "Something went wrong, please try again";
+  const getErrorMsg = (error: any) => {
+    const errorMessage =
+      error?.message || error || "Something went wrong, please try again";
+    const busyMessage = "is busy";
+
+    // Wallets Kit's Ledger returns a busy message as an error when the device is busy
+    // ex: TransportError: Ledger Device is busy (lock signHash)
+    // We don't want to show this error to the user
+    if (errorMessage.includes(busyMessage)) {
+      return "";
+    }
+
+    return errorMessage;
+  };
 
   const signTx = useCallback(async () => {
     if (isInProgress || !walletKitInstance?.walletKit) {
@@ -44,6 +56,11 @@ export const useSignWithExtensionWallet = ({
 
     setIsInProgress(true);
 
+    const timeoutId = setTimeout(() => {
+      setErrorMsg("Transaction signing timed out after a minute ");
+      setIsInProgress(false);
+    }, 60000);
+
     if (walletKitPubKey) {
       try {
         const result = await walletKitInstance.walletKit.signTransaction(
@@ -53,9 +70,12 @@ export const useSignWithExtensionWallet = ({
             networkPassphrase,
           },
         );
+        clearTimeout(timeoutId);
+
         setSignedTxXdr(result.signedTxXdr);
         setSuccessMsg(SUCCESS_MSG);
       } catch (error: any) {
+        clearTimeout(timeoutId);
         if (error?.message) {
           setErrorMsg(getErrorMsg(error));
         }
@@ -83,6 +103,7 @@ export const useSignWithExtensionWallet = ({
               );
 
               if (result?.signedTxXdr) {
+                clearTimeout(timeoutId);
                 setSignedTxXdr(result.signedTxXdr);
                 setSuccessMsg(SUCCESS_MSG);
               } else {
@@ -92,12 +113,14 @@ export const useSignWithExtensionWallet = ({
               }
             }
           } catch (error: any) {
+            clearTimeout(timeoutId);
             if (error?.message) {
               setErrorMsg(getErrorMsg(error));
             }
           }
         },
         onClosed: () => {
+          clearTimeout(timeoutId);
           setErrorMsg("The user closed the modal.");
         },
       });