### Start Development Server with Deno Task

Source: https://github.com/creit-tech/stellar-wallets-kit/blob/main/examples/vite-preact/README.md

Use this command to start a local development server. Ensure Deno v2.0.0 or later is installed.

```bash
$ deno task dev
```

--------------------------------

### Install with deno

Source: https://github.com/creit-tech/stellar-wallets-kit/blob/main/docs/files/installation.md

Use this command to install the library with deno.

```shell
deno add jsr:@creit-tech/stellar-wallets-kit
```

--------------------------------

### Run Development Server

Source: https://github.com/creit-tech/stellar-wallets-kit/blob/main/examples/nextjs/README.md

Execute these commands to start the Next.js development server. Ensure you have Node.js installed and have navigated to your project directory.

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

--------------------------------

### Install with bunx

Source: https://github.com/creit-tech/stellar-wallets-kit/blob/main/docs/files/installation.md

Use this command to install the library with bunx.

```shell
bunx jsr add @creit-tech/stellar-wallets-kit
```

--------------------------------

### Install with npx

Source: https://github.com/creit-tech/stellar-wallets-kit/blob/main/docs/files/installation.md

Use this command to install the library with npx.

```shell
npx jsr add @creit-tech/stellar-wallets-kit
```

--------------------------------

### Install with yarn

Source: https://github.com/creit-tech/stellar-wallets-kit/blob/main/docs/files/installation.md

Use this command to install the library with yarn.

```shell
yarn add jsr:@creit-tech/stellar-wallets-kit
```

--------------------------------

### Start Development Server with npm start

Source: https://github.com/creit-tech/stellar-wallets-kit/blob/main/examples/create-react-app/README.md

Use this command to run the app in development mode. It opens the app at http://localhost:3000 and automatically reloads on code changes.

```bash
npm start
```

--------------------------------

### Install with pnpm

Source: https://github.com/creit-tech/stellar-wallets-kit/blob/main/docs/files/installation.md

Use this command to install the library with pnpm.

```shell
pnpm add jsr:@creit-tech/stellar-wallets-kit
```

--------------------------------

### Initialize StellarWalletsKit with Custom Theme

Source: https://github.com/creit-tech/stellar-wallets-kit/blob/main/docs/files/theme/custom-styles.md

Initialize the Stellar Wallets Kit with a custom theme by extending the default dark theme. This example overrides primary colors, border-radius, and background color.

```typescript
import { SwkAppDarkTheme } from "@creit-tech/stellar-wallets-kit/types";

StellarWalletsKit.init({
  theme: {
    ...SwkAppDarkTheme,
    primary: "#c19cfc",
    "primary-foreground": "#ffffff",
    "border-radius": "1.5rem",
    background: "#222222",
  },
});

```

--------------------------------

### Sign Transaction

Source: https://github.com/creit-tech/stellar-wallets-kit/blob/main/docs/files/how-to/the-easy-way.md

Sign a Stellar transaction using the user's connected wallet. This example demonstrates fetching the active address and then requesting a signature for a transaction.

```typescript
// We fetch the active address just to be sure we have the last one available
const {address} = await StellarWalletsKit.getAddress();

// We request the signature for the transaction `tx` using the PUBLIC network and the address we just fetched.
const {signedTxXdr} = await StellarWalletsKit.signTransaction(tx.toXDR(), {
  networkPassphrase: Networks.PUBLIC,
  address,
});

// Now we just submit the tx to the network
```

--------------------------------

### Show Authentication Modal and Get Address

Source: https://github.com/creit-tech/stellar-wallets-kit/blob/main/docs/files/how-to/authenticate.md

Use this snippet to display the authentication modal, allowing the user to select a wallet. The active address is returned after the user makes a selection. This is the primary method for initiating wallet connection.

```typescript
import { StellarWalletsKit } from "@creit-tech/stellar-wallets-kit/sdk";

const {address} = await StellarWalletsKit.authModal();
```

--------------------------------

### Get Network Information

Source: https://github.com/creit-tech/stellar-wallets-kit/blob/main/docs/files/wallets/create-wallet-module.md

Retrieves the current selected network and its passphrase from the wallet. This is useful for wallets that do not allow explicit network selection.

```APIDOC
## GET /network

### Description
Requests the current selected network in the wallet. This is useful when dealing with wallets that do not allow explicit network selection (e.g., Lobstr, Rabet).

### Method
GET

### Endpoint
/network

### Response
#### Success Response (200)
- **network** (string) - The name of the current network (e.g., "public", "testnet").
- **networkPassphrase** (string) - The passphrase for the current network.

#### Response Example
```json
{
  "network": "public",
  "networkPassphrase": "Public Global Stellar Network ; September 2015"
}
```
```

--------------------------------

### Get Active Wallet Address

Source: https://github.com/creit-tech/stellar-wallets-kit/blob/main/docs/files/how-to/get-wallet-address.md

Use this method to retrieve the currently active Stellar address. Ensure that an address is available, as the method will throw an error if none is active.

```typescript
import { StellarWalletsKit } from "@creit-tech/stellar-wallets-kit/sdk";

const {address} = await StellarWalletsKit.getAddress();
```

--------------------------------

### Initialize Stellar Wallets Kit with Dark Theme

Source: https://github.com/creit-tech/stellar-wallets-kit/blob/main/docs/files/theme/default-themes.md

Import and apply the dark theme during the initialization of the Stellar Wallets Kit. Ensure the SwkAppDarkTheme is correctly imported from the library.

```typescript
import { SwkAppDarkTheme } from "@creit-tech/stellar-wallets-kit/types";

StellarWalletsKit.init({theme: SwkAppDarkTheme});
```

--------------------------------

### Initialize with Default Wallet Modules

Source: https://github.com/creit-tech/stellar-wallets-kit/blob/main/docs/files/kit-structure.md

Initialize the StellarWalletsKit with all default wallet modules using the `defaultModules()` utility. Be aware that this may not include all available wallet options.

```typescript
import { StellarWalletsKit, SwkAppDarkTheme } from '@creit-tech/stellar-wallets-kit'
import { defaultModules } from '@creit-tech/stellar-wallets-kit/modules/utils';

StellarWalletsKit.init({
  theme: SwkAppDarkTheme,
  modules: defaultModules(),
});
```

--------------------------------

### Initialize Stellar Wallets Kit

Source: https://github.com/creit-tech/stellar-wallets-kit/blob/main/docs/files/index.md

Initialize the StellarWalletsKit with default modules. Ensure this is done before creating buttons or signing transactions.

```typescript
import { StellarWalletsKit } from "@creit-tech/stellar-wallets-kit/sdk";
import { defaultModules } from '@creit-tech/stellar-wallets-kit/modules/utils';

StellarWalletsKit.init({modules: defaultModules()});
```

--------------------------------

### Initialize with Specific Wallet Modules

Source: https://github.com/creit-tech/stellar-wallets-kit/blob/main/docs/files/kit-structure.md

Import and initialize the StellarWalletsKit with specific wallet modules like Albedo, Freighter, Lobstr, and xBull. Ensure all necessary modules are imported.

```typescript
import { StellarWalletsKit, SwkAppDarkTheme } from '@creit-tech/stellar-wallets-kit'
import { AlbedoModule } from "@creit-tech/stellar-wallets-kit/modules/albedo";
import { FreighterModule } from "@creit-tech/stellar-wallets-kit/modules/freighter";
import { LobstrModule } from "@creit-tech/stellar-wallets-kit/modules/lobstr";
import { xBullModule } from "@creit-tech/stellar-wallets-kit/modules/xbull";

StellarWalletsKit.init({
  theme: SwkAppDarkTheme,
  modules: [
    new AlbedoModule(),
    new FreighterModule(),
    new LobstrModule(),
    new xBullModule(),
  ],
});
```

--------------------------------

### Initialize StellarWalletsKit with TrezorModule

Source: https://github.com/creit-tech/stellar-wallets-kit/blob/main/docs/files/wallets/trezor.md

Import and initialize the StellarWalletsKit, including the TrezorModule. Ensure the 'Buffer' object is globally available if not using a framework with polyfills.

```typescript
import { StellarWalletsKit } from '@creit-tech/stellar-wallets-kit/sdk'
import { defaultModules } from '@creit-tech/stellar-wallets-kit/modules/utils';
import { TrezorModule } from "@creit-tech/stellar-wallets-kit/modules/trezor";

StellarWalletsKit.init({
  modules: [
    ...defaultModules(),
    new TrezorModule(/* Params */),
  ],
});
```

--------------------------------

### Initialize StellarWalletsKit with LedgerModule

Source: https://github.com/creit-tech/stellar-wallets-kit/blob/main/docs/files/wallets/ledger.md

Import necessary modules and initialize the StellarWalletsKit with the LedgerModule. Ensure the 'Buffer' object is globally available if not using a framework with polyfill support.

```typescript
import { StellarWalletsKit } from '@creit-tech/stellar-wallets-kit/sdk'
import { defaultModules } from '@creit-tech/stellar-wallets-kit/modules/utils';
import { LedgerModule } from "@creit-tech/stellar-wallets-kit/modules/ledger";

StellarWalletsKit.init({
  modules: [
    ...defaultModules(),
    new LedgerModule(),
  ],
});
```

--------------------------------

### Initialize Stellar Wallets Kit

Source: https://github.com/creit-tech/stellar-wallets-kit/blob/main/docs/files/how-to/the-easy-way.md

Initialize the Stellar Wallets Kit in a browser environment. Ensure this is done after confirming the environment is the browser to avoid issues with SSR or pre-rendering.

```typescript
import { StellarWalletsKit } from "@creit-tech/stellar-wallets-kit/sdk";
import { SwkAppDarkTheme } from "@creit-tech/stellar-wallets-kit/types";
import { defaultModules } from '@creit-tech/stellar-wallets-kit/modules/utils';

StellarWalletsKit.init({
  theme: SwkAppDarkTheme,
  modules: defaultModules(),
});
```

--------------------------------

### Build Production Assets with Deno Task

Source: https://github.com/creit-tech/stellar-wallets-kit/blob/main/examples/vite-preact/README.md

Execute this command to build optimized assets for production deployment. Deno v2.0.0 or later is required.

```bash
$ deno task build
```

--------------------------------

### Initialize WalletConnect Module

Source: https://github.com/creit-tech/stellar-wallets-kit/blob/main/docs/files/wallets/wallet-connect.md

Import and initialize the WalletConnect module with your project ID and application metadata. Ensure you include default modules if needed.

```typescript
import { StellarWalletsKit } from '@creit-tech/stellar-wallets-kit/sdk'
import { defaultModules } from '@creit-tech/stellar-wallets-kit/modules/utils';
import { WalletConnectModule } from "@creit-tech/stellar-wallets-kit/modules/wallet-connect";

StellarWalletsKit.init({
  modules: [
    ...defaultModules(),
    new WalletConnectModule({
      projectId: "YOUR_PROJECT_ID",
      metadata: {
        name: "YOUR_APP_NAME",
        description: "DESCRIPTION_OF_YOUR_APP",
        icons: [ "LOGO_OF_YOUR_APP" ],
        url: 'YOUR_APP_URL',
      }
    }),
  ],
});
```

--------------------------------

### Import SDK and Default Theme

Source: https://github.com/creit-tech/stellar-wallets-kit/blob/main/docs/files/kit-structure.md

Import the StellarWalletsKit SDK and the default dark theme. This can be done from specific paths or the root level.

```typescript
import { StellarWalletsKit } from '@creit-tech/stellar-wallets-kit/sdk'
import { SwkAppDarkTheme } from '@creit-tech/stellar-wallets-kit/types'
```

```typescript
import { StellarWalletsKit, SwkAppDarkTheme } from '@creit-tech/stellar-wallets-kit'
```

--------------------------------

### StellarWalletsKit Initialization Parameters

Source: https://github.com/creit-tech/stellar-wallets-kit/blob/main/docs/files/how-to/init.md

Defines the parameters available for initializing the Stellar Wallets Kit. This includes specifying modules, selected wallet, network, theme, and authentication modal settings.

```typescript
export interface StellarWalletsKitInitParams {
  modules: ModuleInterface[];
  selectedWalletId?: string;
  network?: Networks;
  theme?: SwkAppTheme;

  authModal?: {
    showInstallLabel?: boolean;
    hideUnsupportedWallets?: boolean;
  };
}
```

--------------------------------

### Build for Production with npm run build

Source: https://github.com/creit-tech/stellar-wallets-kit/blob/main/examples/create-react-app/README.md

This command builds the application for production, optimizing it for performance and creating a minified output in the `build` folder. The filenames include hashes for cache busting.

```bash
npm run build
```

--------------------------------

### Import Default Wallet Modules

Source: https://github.com/creit-tech/stellar-wallets-kit/blob/main/docs/files/wallets/supported-wallets.md

Import all default wallet modules using the provided utility. Default modules do not require extra configuration or dependencies.

```typescript
import { defaultModules } from '@creit-tech/stellar-wallets-kit/modules/utils';
```

--------------------------------

### Import xBull Wallet Module

Source: https://github.com/creit-tech/stellar-wallets-kit/blob/main/docs/files/wallets/supported-wallets.md

Import a specific wallet module from the /modules path. Ensure the correct module name and path are used.

```typescript
import { xBullModule } from "@creit-tech/stellar-wallets-kit/modules/xbull";
```

--------------------------------

### Define Default Light Theme for Stellar Wallets Kit

Source: https://github.com/creit-tech/stellar-wallets-kit/blob/main/docs/files/theme/default-themes.md

Defines the `SwkAppLightTheme` object, which specifies the color palette and styling for the default light theme. This object should conform to the `SwkAppTheme` type.

```typescript
export const SwkAppLightTheme: SwkAppTheme = {
  "background": "#fcfcfcff",
  "background-secondary": "#f8f8f8ff",
  "foreground-strong": "#000000",
  "foreground": "#161619ff",
  "foreground-secondary": "#2d2d31ff",
  "primary": "#3b82f6",
  "primary-foreground": "#ffffff",
  "transparent": "rgba(0, 0, 0, 0)",
  "lighter": "#fcfcfc",
  "light": "#f8f8f8",
  "light-gray": "oklch(0.800 0.006 286.033)",
  "gray": "oklch(0.600 0.006 286.033)",
  "danger": "oklch(57.7% 0.245 27.325)",
  "border": "rgba(0, 0, 0, 0.15)",
  "shadow": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",
  "border-radius": "0.5rem",
  "font-family": "sans-serif",
};
```

--------------------------------

### Create Authentication Button

Source: https://github.com/creit-tech/stellar-wallets-kit/blob/main/docs/files/index.md

Create an authentication button and append it to a specified DOM element. The button handles wallet connection logic.

```typescript
const buttonWrapper = document.querySelector('#buttonWrapper');
StellarWalletsKit.createButton(buttonWrapper);
```

--------------------------------

### Listen to Kit Updates

Source: https://github.com/creit-tech/stellar-wallets-kit/blob/main/docs/files/how-to/the-easy-way.md

Subscribe to kit events to manage your website's logic based on user actions. Remember to unsubscribe when no longer needed to prevent memory leaks.

```typescript
import { KitEventType } from "@creit-tech/stellar-wallets-kit/types";

const sub1 = StellarWalletsKit.on(KitEventType.STATE_UPDATED, event => {
  // We update our website's logic with the new address: event.payload.address
});

const sub2 = StellarWalletsKit.on(KitEventType.DISCONNECT, () => {
  // We log out the user
});
```

--------------------------------

### Define Default Dark Theme for Stellar Wallets Kit

Source: https://github.com/creit-tech/stellar-wallets-kit/blob/main/docs/files/theme/default-themes.md

Defines the `SwkAppDarkTheme` object, which specifies the color palette and styling for the default dark theme. This object should conform to the `SwkAppTheme` type.

```typescript
export const SwkAppDarkTheme: SwkAppTheme = {
  "background": "oklch(0.333 0 89.876)",
  "background-secondary": "oklch(0 0 0)",
  "foreground-strong": "#fff",
  "foreground": "oklch(0.985 0 0)",
  "foreground-secondary": "oklch(0.97 0 0)",
  "primary": "#e0e0e0",
  "primary-foreground": "#1e1e1e",
  "transparent": "rgba(0, 0, 0, 0)",
  "lighter": "#fcfcfc",
  "light": "#f8f8f8",
  "light-gray": "oklch(0.800 0.006 286.033)",
  "gray": "oklch(0.600 0.006 286.033)",
  "danger": "oklch(57.7% 0.245 27.325)",
  "border": "rgba(58,58,58,0.15)",
  "shadow": "0 10px 15px -3px rgba(255, 255, 255, 0.1), 0 4px 6px -4px rgba(255, 255, 255, 0.1)",
  "border-radius": "0.5rem",
  "font-family": "sans-serif",
};
```

--------------------------------

### Listen to Kit Events

Source: https://github.com/creit-tech/stellar-wallets-kit/blob/main/docs/files/how-to/kit-events.md

Use the `on` method to subscribe to kit events. Call the returned subscription object to unsubscribe.

```typescript
import { StellarWalletsKit } from "@creit-tech/stellar-wallets-kit/sdk";

const sub = StellarWalletsKit.on(KitEventType.STATE_UPDATED, event => {
  console.log(`Address updated:`, event.payload.address);
});

// To unsubscribe from the updates, do this: `sub()`
```

--------------------------------

### Wallet Module Interface

Source: https://github.com/creit-tech/stellar-wallets-kit/blob/main/docs/files/wallets/create-wallet-module.md

This section details the `ModuleInterface` that wallet developers must implement for their modules to be compatible with the Stellar Wallets Kit. It covers essential properties and methods for wallet identification, availability checks, and transaction signing.

```APIDOC
## Wallet Module Interface

Wallet developers need to create modules that adhere to the `ModuleInterface` to be integrated into the Stellar Wallets Kit. This interface defines the contract for how the kit interacts with different wallets.

### Interface Definition

```typescript
export interface ModuleInterface {
  /**
   * The Module type is used for filtering purposes, define the correct one in
   * your module so we display it accordingly
   */
  moduleType: ModuleType;

  /**
   * The ID of the module, you should expose this ID as a constant variable
   * so developers can use it to show/filter this module if they need to.
   */
  productId: string;

  /**
   * This is the name the kit will show in the builtin Modal.
   */
  productName: string;

  /**
   * This is the URL where users can either download, buy and just know how to
   * get the product.
   */
  productUrl: string;

  /**
   * This icon will be displayed in the builtin Modal along with the product name.
   */
  productIcon: string;

  /**
   * This function should return true is the wallet is installed and/or available.
   * If for example this wallet/service doesn't need to be installed to be used, return `true`.
   *
   * Important:
   * Your wallet/library needs to be able to answer this function in less than 1000ms.
   * Otherwise, the kit will show it as unavailable
   */
  isAvailable(): Promise<boolean>;

  /**
   * This method is optional and is only used if the wallet can handle changes in its state.
   * For example if the user changes the current state of the wallet like it switches to another network, this should be triggered
   */
  onChange?(callback: (event: IOnChangeEvent) => void): void;

  /**
   * Function used to request the public key from the active account or
   * specific path on a wallet.
   *
   * IMPORTANT: This method will do everything that is needed to get the address, in some wallets this could mean opening extra components for the user to pick (hardware wallets for example)
   *
   * @param params
   * @param params.path - The path to tell the wallet which position to ask. This is commonly used in hardware wallets.
   *
   * @return Promise<{ address: string }>
   */
  getAddress(params?: { path?: string; skipRequestAccess?: boolean }): Promise<{ address: string }>;

  /**
   * A function to request a wallet to sign a built transaction in its XDR mode
   *
   * @param xdr - A Transaction or a FeeBumpTransaction
   * @param opts - Options compatible with https://github.com/stellar/stellar-protocol/blob/master/ecosystem/sep-0043.md#signtransaction
   * @param opts.networkPassphrase - The Stellar network to use when signing
   * @param opts.address - The public key of the account that should be used to sign
   * @param opts.path - This options is added for special cases like Hardware wallets
   *
   * @return Promise<{ signedTxXdr: string; signerAddress: string }>
   */
  signTransaction(
    xdr: string,
    opts?: {
      networkPassphrase?: string;
      address?: string;
      path?: string;
    },
  ): Promise<{ signedTxXdr: string; signerAddress?: string }>;

  /**
   * A function to request a wallet to sign an AuthEntry XDR.
   *
   * @param authEntry - An XDR string version of `HashIdPreimageSorobanAuthorization`
   * @param opts - Options compatible with https://github.com/stellar/stellar-protocol/blob/master/ecosystem/sep-0043.md#signauthentry
   * @param opts.networkPassphrase - The Stellar network to use when signing
   * @param opts.address - The public key of the account that should be used to sign
   * @param opts.path - This options is added for special cases like Hardware wallets
   *
   * @return - Promise<{ signedAuthEntry: string; signerAddress: string }>
   */
  signAuthEntry(
    authEntry: string,
    opts?: {
      networkPassphrase?: string;
      address?: string;
      path?: string;
    },
  ): Promise<{ signedAuthEntry: string; signerAddress?: string }>;

  /**
   * A function to request a wallet to sign an AuthEntry XDR.
   *
   * @param message - An arbitrary string rather than a transaction or auth entry
   * @param opts - Options compatible with https://github.com/stellar/stellar-protocol/blob/master/ecosystem/sep-0043.md#signmessage
   * @param opts.networkPassphrase - The Stellar network to use when signing
   * @param opts.address - The public key of the account that should be used to sign
   * @param opts.path - This options is added for special cases like Hardware wallets
   *
   * @return - Promise<{ signedMessage: string; signerAddress: string }>
   */
  signMessage(
    message: string,
    opts?: {
      networkPassphrase?: string;
      address?: string;
      path?: string;
    },
  ): Promise<{ signedMessage: string; signerAddress?: string }>;
}
```

### Key Components of the Interface:

*   **`moduleType`**: Identifies the type of module for filtering.
*   **`productId`**: A unique identifier for the module.
*   **`productName`**: The display name of the wallet/service.
*   **`productUrl`**: A URL for more information or download.
*   **`productIcon`**: An icon to represent the wallet/service.
*   **`isAvailable()`**: Asynchronously checks if the wallet is installed or available.
*   **`onChange()`**: (Optional) A callback for state changes in the wallet.
*   **`getAddress()`**: Requests the public key/address from the wallet, potentially with path parameters for hardware wallets.
*   **`signTransaction()`**: Signs a Stellar transaction XDR.
*   **`signAuthEntry()`**: Signs an `AuthEntry` XDR for Soroban authorizations.
*   **`signMessage()`**: Signs an arbitrary string message.
```

--------------------------------

### TrezorModule Parameters Interface

Source: https://github.com/creit-tech/stellar-wallets-kit/blob/main/docs/files/wallets/trezor.md

Defines the required and optional parameters for initializing the TrezorConnect library within the TrezorModule.

```typescript
/**
 * These values are used to start the TrezorConnect library
 */
export interface ITrezorModuleParams {
  appUrl: string;
  appName: string;
  email: string;
  debug?: boolean;
  lazyLoad?: boolean;
  coreMode?: "auto" | "iframe" | "popup";
}
```

--------------------------------

### Run Tests with npm test

Source: https://github.com/creit-tech/stellar-wallets-kit/blob/main/examples/create-react-app/README.md

Launches the test runner in interactive watch mode. This command is useful for running tests frequently during development.

```bash
npm test
```

--------------------------------

### Kit Event Types and Payloads

Source: https://github.com/creit-tech/stellar-wallets-kit/blob/main/docs/files/how-to/kit-events.md

Defines the available event types and their corresponding payload structures for the Stellar Wallets Kit.

```typescript
export enum KitEventType {
  STATE_UPDATED = "STATE_UPDATE",
  WALLET_SELECTED = "WALLET_SELECTED",
  DISCONNECT = "DISCONNECT",
}

export type KitEventStateUpdated = {
  eventType: KitEventType.STATE_UPDATED;
  payload: {
    address: string | undefined;
    networkPassphrase: string;
  };
};
export type KitEventWalletSelected = {
  eventType: KitEventType.WALLET_SELECTED;
  payload: {
    id: string | undefined;
  };
};
export type KitEventDisconnected = {
  eventType: KitEventType.DISCONNECT;
  payload: Record<PropertyKey, never>;
};

export type KitEvent = KitEventStateUpdated | KitEventWalletSelected | KitEventDisconnected;
```

--------------------------------

### Module Interface Definition

Source: https://github.com/creit-tech/stellar-wallets-kit/blob/main/docs/files/wallets/create-wallet-module.md

Defines the structure and methods required for a wallet module to be compatible with the Stellar Wallets Kit. Ensure your module implements all required properties and methods.

```typescript
export interface ModuleInterface {
  moduleType: ModuleType;
  productId: string;
  productName: string;
  productUrl: string;
  productIcon: string;
  isAvailable(): Promise<boolean>;
  onChange?(callback: (event: IOnChangeEvent) => void): void;
  getAddress(params?: { path?: string; skipRequestAccess?: boolean }): Promise<{ address: string }>;
  signTransaction(
    xdr: string,
    opts?: {
      networkPassphrase?: string;
      address?: string;
      path?: string;
    },
  ): Promise<{ signedTxXdr: string; signerAddress?: string }>;
  signAuthEntry(
    authEntry: string,
    opts?: {
      networkPassphrase?: string;
      address?: string;
      path?: string;
    },
  ): Promise<{ signedAuthEntry: string; signerAddress?: string }>;
  signMessage(
    message: string,
    opts?: {
      networkPassphrase?: string;
      address?: string;
      path?: string;
    },
  ): Promise<{ signedMessage: string; signerAddress?: string }>;
}
```

--------------------------------

### Expand ESLint for React-Specific Rules

Source: https://github.com/creit-tech/stellar-wallets-kit/blob/main/examples/vite-react/README.md

Integrate eslint-plugin-react-x and eslint-plugin-react-dom into your ESLint configuration for enhanced React and React DOM linting. Specify project configurations for type checking.

```javascript
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs['recommended-typescript'],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])
```

--------------------------------

### StellarWalletsKit Signature Methods Interface

Source: https://github.com/creit-tech/stellar-wallets-kit/blob/main/docs/files/how-to/sign-with-wallet.md

This interface defines the available methods for signing different types of data within StellarWalletsKit. Note that not all wallets support all signing methods.

```typescript
interface StellarWalletsKit {
  signTransaction(
    xdr: string,
    opts?: { networkPassphrase?: string; address?: string; path?: string; },
  ): Promise<{ signedTxXdr: string; signerAddress?: string }>;

  signAuthEntry(
    authEntry: string,
    opts?: { networkPassphrase?: string; address?: string; path?: string },
  ): Promise<{ signedAuthEntry: string; signerAddress?: string }>;

  signMessage(
    message: string,
    opts?: { networkPassphrase?: string; address?: string; path?: string },
  ): Promise<{ signedMessage: string; signerAddress?: string }>
}
```

--------------------------------

### Create Built-in Connection Button

Source: https://github.com/creit-tech/stellar-wallets-kit/blob/main/docs/files/how-to/the-easy-way.md

Insert the built-in connection button into your HTML. This button handles opening authentication or profile modals based on the kit's state. It automatically adopts the kit's theme.

```typescript
// First fetch the html element that will contain it
const buttonWrapper = document.querySelector('#buttonWrapper');
// Then insert the button
StellarWalletsKit.createButton(buttonWrapper);
```

```typescript
import { ButtonMode } from '@creit-tech/stellar-wallets-kit/components';

StellarWalletsKit.createButton(buttonWrapper, {
  mode: ButtonMode.free,
  classes: 'btn btn-primary'
});
```

--------------------------------

### WalletConnect Module Parameters Type

Source: https://github.com/creit-tech/stellar-wallets-kit/blob/main/docs/files/wallets/wallet-connect.md

Defines the required and optional parameters for the WalletConnect module, including project ID, metadata, allowed chains, and client options.

```typescript
import type { SignClientTypes } from "@walletconnect/types";
import type { CreateAppKit } from "@reown/appkit/core";

export type TWalletConnectModuleParams = {
  projectId: string;
  metadata: Required<CreateAppKit>["metadata"];
  allowedChains?: WalletConnectTargetChain[];
  signClientOptions?: SignClientTypes.Options;
  appKitOptions?: CreateAppKit;
};

export enum WalletConnectTargetChain {
  PUBLIC = "stellar:pubnet",
  TESTNET = "stellar:testnet",
}
```

--------------------------------

### Eject from Create React App Configuration

Source: https://github.com/creit-tech/stellar-wallets-kit/blob/main/examples/create-react-app/README.md

This is a one-way operation that removes the single build dependency from your project, copying all configuration files (webpack, Babel, ESLint) into your project for full control. Use with caution as it cannot be undone.

```bash
npm run eject
```

--------------------------------

### Sign Auth Entry

Source: https://github.com/creit-tech/stellar-wallets-kit/blob/main/docs/files/how-to/sign-with-wallet.md

Requests the user to sign an authorization entry.

```APIDOC
## POST /signAuthEntry

### Description
Requests the user to sign an authorization entry.

### Method
POST

### Endpoint
/signAuthEntry

### Parameters
#### Request Body
- **authEntry** (string) - Required - The authorization entry to be signed.
- **networkPassphrase** (string) - Optional - The network passphrase.
- **address** (string) - Optional - The Stellar address to use for signing.
- **path** (string) - Optional - The path for the signing key.

### Request Example
```json
{
  "authEntry": "auth_entry_string",
  "networkPassphrase": "Networks.PUBLIC",
  "address": "THE_STELLAR_ADDRESS"
}
```

### Response
#### Success Response (200)
- **signedAuthEntry** (string) - The signed authorization entry.
- **signerAddress** (string) - Optional - The address of the signer.
```

--------------------------------

### Define SwkAppTheme Type

Source: https://github.com/creit-tech/stellar-wallets-kit/blob/main/docs/files/theme/custom-styles.md

This TypeScript type defines the structure for the theme object used by the Stellar Wallets Kit. It includes properties for colors, borders, shadows, and fonts.

```typescript
export type SwkAppTheme = {
  "background": string;
  "background-secondary": string;
  "foreground-strong": string;
  "foreground": string;
  "foreground-secondary": string;
  "primary": string;
  "primary-foreground": string;
  "transparent": string;
  "lighter": string;
  "light": string;
  "light-gray": string;
  "gray": string;
  "danger": string;
  "border": string;
  "shadow": string;
  "border-radius": string;
  "font-family": string;
};

```

--------------------------------

### Sign a Stellar Transaction

Source: https://github.com/creit-tech/stellar-wallets-kit/blob/main/docs/files/how-to/sign-with-wallet.md

Use this method to request the user to sign a Stellar transaction. Ensure the correct network passphrase and Stellar address are provided.

```typescript
const {signedTxXdr} = await StellarWalletsKit.signTransaction(tx.toXDR(), {
  networkPassphrase: Networks.PUBLIC,
  address: 'THE_STELLAR_ADDRESS',
});
```

--------------------------------

### Sign Transaction

Source: https://github.com/creit-tech/stellar-wallets-kit/blob/main/docs/files/how-to/sign-with-wallet.md

Requests the user to sign a Stellar transaction.

```APIDOC
## POST /signTransaction

### Description
Requests the user to sign a Stellar transaction.

### Method
POST

### Endpoint
/signTransaction

### Parameters
#### Request Body
- **xdr** (string) - Required - The transaction XDR to be signed.
- **networkPassphrase** (string) - Optional - The network passphrase for the transaction.
- **address** (string) - Optional - The Stellar address to use for signing.
- **path** (string) - Optional - The path for the signing key.

### Request Example
```json
{
  "xdr": "tx_xdr_string",
  "networkPassphrase": "Networks.PUBLIC",
  "address": "THE_STELLAR_ADDRESS"
}
```

### Response
#### Success Response (200)
- **signedTxXdr** (string) - The signed transaction XDR.
- **signerAddress** (string) - Optional - The address of the signer.
```

--------------------------------

### Expand ESLint for Type-Aware Rules

Source: https://github.com/creit-tech/stellar-wallets-kit/blob/main/examples/vite-react/README.md

Update your ESLint configuration to enable type-aware lint rules for TypeScript files. Ensure 'tsconfig.node.json' and 'tsconfig.app.json' are correctly specified.

```javascript
export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...

      // Remove tseslint.configs.recommended and replace with this
      tseslint.configs.recommendedTypeChecked,
      // Alternatively, use this for stricter rules
      tseslint.configs.strictTypeChecked,
      // Optionally, add this for stylistic rules
      tseslint.configs.stylisticTypeChecked,

      // Other configs...
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])
```

--------------------------------

### Sign Message

Source: https://github.com/creit-tech/stellar-wallets-kit/blob/main/docs/files/how-to/sign-with-wallet.md

Requests the user to sign a message.

```APIDOC
## POST /signMessage

### Description
Requests the user to sign a message.

### Method
POST

### Endpoint
/signMessage

### Parameters
#### Request Body
- **message** (string) - Required - The message to be signed.
- **networkPassphrase** (string) - Optional - The network passphrase.
- **address** (string) - Optional - The Stellar address to use for signing.
- **path** (string) - Optional - The path for the signing key.

### Request Example
```json
{
  "message": "message_string",
  "networkPassphrase": "Networks.PUBLIC",
  "address": "THE_STELLAR_ADDRESS"
}
```

### Response
#### Success Response (200)
- **signedMessage** (string) - The signed message.
- **signerAddress** (string) - Optional - The address of the signer.
```

--------------------------------

### Define Auth Modal Container

Source: https://github.com/creit-tech/stellar-wallets-kit/blob/main/docs/files/how-to/authenticate.md

Optionally specify an HTML element to serve as the container for the authentication modal. This is typically not needed for most use cases but provides flexibility for custom integrations.

```typescript
export type AuthModalParams = {
  container?: HTMLElement;
};
```

--------------------------------

### Sign a Stellar Transaction

Source: https://github.com/creit-tech/stellar-wallets-kit/blob/main/docs/files/index.md

Sign a Stellar transaction using the provided transaction XDR and network passphrase. This requires obtaining the user's address first.

```typescript
const {address} = await StellarWalletsKit.getAddress();

const {signedTxXdr} = await StellarWalletsKit.signTransaction(tx.toXDR(), {
  networkPassphrase: Networks.PUBLIC,
  address,
});

console.log("Signed Transaction:", signedTxXdr);
```

--------------------------------

### Disconnect Wallet

Source: https://github.com/creit-tech/stellar-wallets-kit/blob/main/docs/files/wallets/create-wallet-module.md

Clears all connections to the wallet. This method is intended for wallets that support asynchronous connections, such as those using WalletConnect.

```APIDOC
## POST /disconnect

### Description
Clears all connections to the wallet. This method should be included if your wallet has some sort of async connection, for example WalletConnect. Once this method is called, the module should clear all connections.

### Method
POST

### Endpoint
/disconnect

### Response
#### Success Response (200)
- **message** (string) - Indicates successful disconnection.

#### Response Example
```json
{
  "message": "Disconnected successfully."
}
```
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.