Update Freighter module and react example

Author: earrietadev

CHANGELOG.md

@@ -38,6 +38,11 @@ See [standard-version](https://github.com/conventional-changelog/standard-versio
 - Fully remove both `submit` and `submitUrl` parameters
 - And many more.
 
+### Fix
+
+- Update Freighter module `signAuthEntry` method so it ignores the freighter-api types and follow a similar logic to the
+  `signMessage` method uses (handle both a string and buffer response)
+
 ### [1.9.5](https://github.com/Creit-Tech/Stellar-Wallets-Kit/compare/v1.9.4...v1.9.5) (2025-09-05)
 
 ### Add

examples/vite-react/src/App.tsx

@@ -1,28 +1,41 @@
-import { Component } from 'react'
-import './App.css'
+import { Component } from "react";
+import "./App.css";
 
-import { KitEventType, SwkAppDarkTheme } from "@creit-tech/stellar-wallets-kit/types";
+import {
+  KitEventType,
+  SwkAppDarkTheme,
+} from "@creit-tech/stellar-wallets-kit/types";
 import { StellarWalletsKit } from "@creit-tech/stellar-wallets-kit/sdk";
-import { activeAddress, activeModule, } from "@creit-tech/stellar-wallets-kit/state";
-import { ButtonMode } from '@creit-tech/stellar-wallets-kit/components';
-import { defaultModules } from '@creit-tech/stellar-wallets-kit/modules/utils';
+import {
+  activeAddress,
+  activeModule,
+} from "@creit-tech/stellar-wallets-kit/state";
+import { ButtonMode } from "@creit-tech/stellar-wallets-kit/components";
+import { defaultModules } from "@creit-tech/stellar-wallets-kit/modules/utils";
 import { TrezorModule } from "@creit-tech/stellar-wallets-kit/modules/trezor";
+import { LedgerModule } from "@creit-tech/stellar-wallets-kit/modules/ledger";
 import { WalletConnectModule } from "@creit-tech/stellar-wallets-kit/modules/wallet-connect";
 
-import { Account, Networks, Operation, TransactionBuilder, } from "@stellar/stellar-sdk";
+import {
+  Account,
+  Networks,
+  Operation,
+  TransactionBuilder,
+} from "@stellar/stellar-sdk";
 
 StellarWalletsKit.init({
   theme: {
     ...SwkAppDarkTheme,
-    primary: '#1a1a1a',
-    'primary-foreground': 'rgba(255, 255, 255, 0.87)',
-    'border-radius': '8px',
-    shadow: 'none',
-    background: '#1a1a1a',
-    foreground: 'rgba(255, 255, 255, 0.87)'
+    primary: "#1a1a1a",
+    "primary-foreground": "rgba(255, 255, 255, 0.87)",
+    "border-radius": "8px",
+    shadow: "none",
+    background: "#1a1a1a",
+    foreground: "rgba(255, 255, 255, 0.87)",
   },
   modules: [
     ...defaultModules(),
+    new LedgerModule(),
     new TrezorModule({
       appName: "Stellar Wallets Kit",
       appUrl: "http://localhost:5173",
@@ -34,8 +47,8 @@ StellarWalletsKit.init({
         name: "Stellar Wallets Kit",
         description: "Add support to all Stellar Wallets with a single library",
         icons: [],
-        url: 'http://localhost:5173/',
-      }
+        url: "http://localhost:5173/",
+      },
     }),
   ],
 });
@@ -51,25 +64,25 @@ export class App extends Component<any, any> {
      * IMPORTANT: In this example we are not destroying these subscriptions,
      * in your app you should do it when components are unmount.
      */
-    StellarWalletsKit.on(KitEventType.STATE_UPDATED, event => {
+    StellarWalletsKit.on(KitEventType.STATE_UPDATED, (event) => {
       console.log(`Address updated:`, event.payload.address);
-      this.setState({address: event.payload.address});
+      this.setState({ address: event.payload.address });
     });
-    StellarWalletsKit.on(KitEventType.WALLET_SELECTED, event => {
+    StellarWalletsKit.on(KitEventType.WALLET_SELECTED, (event) => {
       console.log(`Wallet ID:`, event.payload.id);
-      this.setState({moduleId: event.payload.id});
+      this.setState({ moduleId: event.payload.id });
     });
     StellarWalletsKit.on(KitEventType.DISCONNECT, () => {
-      this.setState({address: undefined, productName: undefined});
+      this.setState({ address: undefined, productName: undefined });
     });
-    StellarWalletsKit.createButton(document.querySelector('#button')!, {
+    StellarWalletsKit.createButton(document.querySelector("#button")!, {
       mode: ButtonMode.free,
     });
   }
 
   async authModal(): Promise<void> {
     try {
-      const {address} = await StellarWalletsKit.authModal();
+      const { address } = await StellarWalletsKit.authModal();
       console.log(`Address fetched:`, address);
     } catch (e) {
       console.error(e);
@@ -81,7 +94,7 @@ export class App extends Component<any, any> {
   }
 
   async signTransaction(): Promise<void> {
-    const {address} = await StellarWalletsKit.getAddress();
+    const { address } = await StellarWalletsKit.getAddress();
     console.log("StellarWalletsKit::getAddress", address);
     const tx = new TransactionBuilder(new Account(address, "-1"), {
       networkPassphrase: Networks.PUBLIC,
@@ -96,12 +109,28 @@ export class App extends Component<any, any> {
       )
       .build();
 
-    const {signedTxXdr} = await StellarWalletsKit.signTransaction(tx.toXDR(), {
+    const { signedTxXdr } = await StellarWalletsKit.signTransaction(
+      tx.toXDR(),
+      {
+        networkPassphrase: Networks.PUBLIC,
+        address,
+      },
+    );
+
+    console.log("Signed Transaction:", signedTxXdr);
+  }
+
+  async signAuthEntry(): Promise<void> {
+    const { address } = await StellarWalletsKit.getAddress();
+    const xdr =
+      "AAAACXrDOZdUTjF10ma9AiQ5sizbFlCMARY/JuXLKj4QRal5Ueb3t2qeufIDkl6TAAAAAAAAAAHD5Dhm6FraoWtNw3xmsftfw43aav9gLsi5kDYD1ccr/gAAAApzdGFydF9nYW1lAAAAAAAFAAAAAy2DQRwAAAASAAAAAAAAAACO+drsns+C8ivJ7BbEvGPuuaf+RI7JYRYQh3tTDoG6yAAAABIAAAAAAAAAADzwlU9pvQCCZwaS876OkOohieXRjEidV8RoVpxgVhODAAAACgAAAAAAAAAAAAAAAAAPQkAAAAAKAAAAAAAAAAAAAAAAAA9CQAAAAAEAAAAAAAAAAQ711IO2j2xojpimQQ1dzE4A9Kskd2MeHXPKwLGFTKYYAAAACnN0YXJ0X2dhbWUAAAAAAAYAAAASAAAAAcPkOGboWtqha03DfGax+1/Djdpq/2AuyLmQNgPVxyv+AAAAAy2DQRwAAAASAAAAAAAAAACO+drsns+C8ivJ7BbEvGPuuaf+RI7JYRYQh3tTDoG6yAAAABIAAAAAAAAAADzwlU9pvQCCZwaS876OkOohieXRjEidV8RoVpxgVhODAAAACgAAAAAAAAAAAAAAAAAPQkAAAAAKAAAAAAAAAAAAAAAAAA9CQAAAAAA=";
+
+    const { signedAuthEntry } = await StellarWalletsKit.signAuthEntry(xdr, {
       networkPassphrase: Networks.PUBLIC,
       address,
     });
 
-    console.log("Signed Transaction:", signedTxXdr);
+    console.log("Signed Auth Entry:", signedAuthEntry);
   }
 
   render() {
@@ -111,37 +140,46 @@ export class App extends Component<any, any> {
         <div className="card">
           <section>
             <div>
-              <button onClick={ () => this.authModal() }>
+              <button onClick={() => this.authModal()}>
                 Connect Wallet
               </button>
 
-              <button onClick={ () => this.disconnect() }>
+              <button onClick={() => this.disconnect()}>
                 Disconnect
               </button>
 
-              <button onClick={ () => this.signTransaction() }>
+              <button onClick={() => this.signTransaction()}>
                 Sign transaction
               </button>
 
-              <button onClick={ () => StellarWalletsKit.profileModal() }>
+              <button onClick={() => this.signAuthEntry()}>
+                Sign auth Entry
+              </button>
+
+              <button onClick={() => StellarWalletsKit.profileModal()}>
                 Profile Modal
               </button>
             </div>
 
             <div>
               <p>
-                Your selected wallet is: <br/> { this.state.moduleId }
+                Your selected wallet is: <br /> {this.state.moduleId}
               </p>
               <p>
-                Your account is: <br/> { this.state.address &&
-                `${ this.state.address.slice(0, 4) }....${ this.state.address.slice(-6) }` }
+                Your account is: <br /> {this.state.address &&
+                  `${this.state.address.slice(0, 4)}....${
+                    this.state.address.slice(-6)
+                  }`}
               </p>
 
-              <div style={ {marginBottom: '3rem'} }></div>
+              <div style={{ marginBottom: "3rem" }}></div>
 
               <div>
-                <p>This is the built button, it follows the theme configured in the kit but we are using the "free" mode
-                  of the button so it uses our global React defined styles :</p>
+                <p>
+                  This is the built button, it follows the theme configured in
+                  the kit but we are using the "free" mode of the button so it
+                  uses our global React defined styles :
+                </p>
                 <div id="button"></div>
               </div>
             </div>
@@ -152,4 +190,4 @@ export class App extends Component<any, any> {
   }
 }
 
-export default App
+export default App;

src/sdk/modules/freighter.module.ts

@@ -111,10 +111,13 @@ export class FreighterModule implements ModuleInterface {
     try {
       await this.runChecks();
 
+      /**
+       * TODO: We are using "any" because the Freighter api has a bug with the types, they will fix it in a future version. Remove the "any" once we update the dependency
+       */
       const { signedAuthEntry, signerAddress, error } = await signAuthEntry(authEntry, {
         address: opts?.address,
         networkPassphrase: opts?.networkPassphrase,
-      });
+      }) as any;
 
       if (error) return Promise.reject(error);
       if (!signedAuthEntry) {
@@ -124,7 +127,12 @@ export class FreighterModule implements ModuleInterface {
         });
       }
 
-      return { signedAuthEntry: encodeBase64(new Uint8Array(signedAuthEntry)), signerAddress: signerAddress };
+      return {
+        signedAuthEntry: typeof signedAuthEntry === "string"
+          ? signedAuthEntry
+          : encodeBase64(new Uint8Array(signedAuthEntry)),
+        signerAddress: signerAddress,
+      };
     } catch (e) {
       throw parseError(e);
     }