### Install Stellar Wallets Kit Source: https://stellarwalletskit.dev/ Use the JSR package manager to add the library to your project. ```shell npx jsr add @creit-tech/stellar-wallets-kit ``` -------------------------------- ### Install Stellar Wallets Kit via package managers Source: https://stellarwalletskit.dev/installation.html Use these commands to add the library to your project using your preferred package manager. ```shell npx jsr add @creit-tech/stellar-wallets-kit ``` ```shell pnpm add jsr:@creit-tech/stellar-wallets-kit ``` ```shell deno add jsr:@creit-tech/stellar-wallets-kit ``` ```shell yarn add jsr:@creit-tech/stellar-wallets-kit ``` ```shell bunx jsr add @creit-tech/stellar-wallets-kit ``` -------------------------------- ### Initializing with Default Modules Source: https://stellarwalletskit.dev/kit-structure.html Initializes the kit using the default set of supported wallets. ```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(), }); ``` -------------------------------- ### Importing SDK and Theme Source: https://stellarwalletskit.dev/kit-structure.html Demonstrates importing the kit and theme from specific paths versus 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' ``` -------------------------------- ### Initialize the Stellar Wallets Kit Source: https://stellarwalletskit.dev/how-to/the-easy-way.html Initialize the kit in a browser-only environment using the default modules and theme. ```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(), }); ``` -------------------------------- ### Initialize Stellar Wallets Kit with a theme Source: https://stellarwalletskit.dev/theme/default-themes.html Apply a specific theme during the initialization of the Stellar Wallets Kit. If no theme is provided, the kit defaults to the light theme. ```typescript import { SwkAppDarkTheme } from "@creit-tech/stellar-wallets-kit/types"; StellarWalletsKit.init({theme: SwkAppDarkTheme}); ``` -------------------------------- ### StellarWalletsKit.init Source: https://stellarwalletskit.dev/how-to/init.html Initializes the Stellar Wallets Kit with the required modules and optional configuration parameters. ```APIDOC ## StellarWalletsKit.init ### Description Initializes the Stellar Wallets Kit to enable interaction with supported wallets. This method must be called to configure the SDK with the necessary modules. ### Parameters - **modules** (ModuleInterface[]) - Required - List of supported wallet modules. - **selectedWalletId** (string) - Optional - The ID of the wallet to be selected by default. - **network** (Networks) - Optional - The Stellar network to connect to. - **theme** (SwkAppTheme) - Optional - The theme configuration for the UI. - **authModal** (object) - Optional - Configuration for the authentication modal. - **showInstallLabel** (boolean) - Optional - Whether to show the install label. - **hideUnsupportedWallets** (boolean) - Optional - Whether to hide wallets that are not supported. ### Example ```typescript import { StellarWalletsKit } from "@creit-tech/stellar-wallets-kit/sdk"; import { defaultModules } from '@creit-tech/stellar-wallets-kit/modules/utils'; StellarWalletsKit.init({modules: defaultModules()}); ``` ``` -------------------------------- ### Initializing Wallets with Specific Modules Source: https://stellarwalletskit.dev/kit-structure.html Shows how to import and initialize specific wallet modules that are not exported at the root level. ```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 the Kit Source: https://stellarwalletskit.dev/ Import the kit and default modules to initialize the library. ```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 WalletConnect Module Source: https://stellarwalletskit.dev/wallets/wallet-connect.html Import the necessary modules and initialize the StellarWalletsKit with the WalletConnect configuration. ```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', } }), ], }); ``` -------------------------------- ### WalletConnectModule Initialization Source: https://stellarwalletskit.dev/wallets/wallet-connect.html How to initialize the StellarWalletsKit with the WalletConnectModule. ```APIDOC ## WalletConnectModule Initialization ### Description Initializes the StellarWalletsKit with the WalletConnectModule to enable WalletConnect support. ### Configuration - **projectId** (string) - Required - The project ID from WalletConnect. - **metadata** (object) - Required - App metadata including name, description, icons, and url. ``` -------------------------------- ### TrezorModule Initialization Source: https://stellarwalletskit.dev/wallets/trezor.html How to initialize the StellarWalletsKit with the TrezorModule. ```APIDOC ## TrezorModule Initialization ### Description Initialize the StellarWalletsKit by including the TrezorModule in the modules array. ### Usage ```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(/* ITrezorModuleParams */), ], }); ``` ``` -------------------------------- ### Importing default wallet modules Source: https://stellarwalletskit.dev/wallets/supported-wallets.html Use this utility to import all wallets included in the default list, which require no extra configuration. ```typescript import { defaultModules } from '@creit-tech/stellar-wallets-kit/modules/utils'; ``` -------------------------------- ### Initialize with custom theme Source: https://stellarwalletskit.dev/theme/custom-styles.html Override specific theme properties by spreading an existing theme object during the StellarWalletsKit initialization. ```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", }, }); ``` -------------------------------- ### Initialize Trezor Module Source: https://stellarwalletskit.dev/wallets/trezor.html Import and initialize the TrezorModule within the StellarWalletsKit configuration. Ensure the Buffer object is polyfilled globally before importing the kit. ```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 */), ], }); ``` -------------------------------- ### Listen to Kit Events Source: https://stellarwalletskit.dev/how-to/the-easy-way.html Subscribe to state updates and disconnection events to synchronize your application logic with the user's wallet status. ```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 }); ``` -------------------------------- ### Initialize Ledger Module Source: https://stellarwalletskit.dev/wallets/ledger.html Import and register the LedgerModule within the StellarWalletsKit initialization. Ensure the Buffer object is globally available to prevent runtime errors. ```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(), ], }); ``` -------------------------------- ### Create Authentication Button Source: https://stellarwalletskit.dev/ Render the wallet connection button into a specified DOM element. ```typescript const buttonWrapper = document.querySelector('#buttonWrapper'); StellarWalletsKit.createButton(buttonWrapper); ``` -------------------------------- ### Define WalletConnect Module Parameters Source: https://stellarwalletskit.dev/wallets/wallet-connect.html Configuration types and enums required for setting up the WalletConnect module. ```typescript import type { SignClientTypes } from "@walletconnect/types"; import type { CreateAppKit } from "@reown/appkit/core"; export type TWalletConnectModuleParams = { projectId: string; metadata: Required["metadata"]; allowedChains?: WalletConnectTargetChain[]; signClientOptions?: SignClientTypes.Options; appKitOptions?: CreateAppKit; }; export enum WalletConnectTargetChain { PUBLIC = "stellar:pubnet", TESTNET = "stellar:testnet", } ``` -------------------------------- ### StellarWalletsKitInitParams Interface Source: https://stellarwalletskit.dev/how-to/init.html Defines the configuration object structure for the kit initialization, including network, theme, and auth modal settings. ```typescript export interface StellarWalletsKitInitParams { modules: ModuleInterface[]; selectedWalletId?: string; network?: Networks; theme?: SwkAppTheme; authModal?: { showInstallLabel?: boolean; hideUnsupportedWallets?: boolean; }; } ``` -------------------------------- ### Importing a specific wallet module Source: https://stellarwalletskit.dev/wallets/supported-wallets.html Use this import pattern to include a specific wallet module by referencing its path within the modules directory. ```typescript import { xBullModule } from "@creit-tech/stellar-wallets-kit/modules/xbull"; ``` -------------------------------- ### Define Trezor Module Parameters Source: https://stellarwalletskit.dev/wallets/trezor.html Interface defining the required configuration values for the TrezorConnect library initialization. ```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"; } ``` -------------------------------- ### StellarWalletsKit.on Source: https://stellarwalletskit.dev/how-to/kit-events.html Registers a listener for specific kit events. Returns an unsubscribe function to stop receiving updates. ```APIDOC ## StellarWalletsKit.on(eventType, callback) ### Description Subscribes to events emitted by the StellarWalletsKit. Returns a function that can be called to unsubscribe from the event. ### Parameters - **eventType** (KitEventType) - Required - The type of event to listen for (STATE_UPDATED, WALLET_SELECTED, DISCONNECT). - **callback** (Function) - Required - The function to execute when the event occurs, receiving the event payload as an argument. ### Event Types - **STATE_UPDATED**: Emitted when the kit state changes. Payload contains `address` (string | undefined) and `networkPassphrase` (string). - **WALLET_SELECTED**: Emitted when a wallet is selected. Payload contains `id` (string | undefined). - **DISCONNECT**: Emitted when the user disconnects. Payload is empty. ``` -------------------------------- ### Wallet Module Interface Methods Source: https://stellarwalletskit.dev/wallets/create-wallet-module.html Defines the required getNetwork method and optional disconnect method for wallet modules. ```typescript /** * A function to request the current selected network in the wallet. This comes * handy when you are dealing with a wallet that doesn't allow you to specify which network to use (For example Lobstr and Rabet) * * @return - Promise<{ network: string; networkPassphrase: string }> */ getNetwork(): Promise<{ network: string; networkPassphrase: string }>; /** * This method should be included if your wallet have some sort of async connection, for example WalletConnect * Once this method is called, the module should clear all connections */ disconnect?(): Promise; } ``` -------------------------------- ### Authenticate user via modal Source: https://stellarwalletskit.dev/how-to/authenticate.html Triggers the authentication modal to prompt the user to select and connect their wallet, returning the active address. ```typescript import { StellarWalletsKit } from "@creit-tech/stellar-wallets-kit/sdk"; const {address} = await StellarWalletsKit.authModal(); ``` -------------------------------- ### Sign a transaction with Stellar Wallets Kit Source: https://stellarwalletskit.dev/how-to/sign-with-wallet.html Request a transaction signature by providing the XDR and optional network configuration. ```typescript const {signedTxXdr} = await StellarWalletsKit.signTransaction(tx.toXDR(), { networkPassphrase: Networks.PUBLIC, address: 'THE_STELLAR_ADDRESS', }); ``` -------------------------------- ### Define the default light theme Source: https://stellarwalletskit.dev/theme/default-themes.html The structure and color values for the default light theme. ```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", }; ``` -------------------------------- ### Subscribe to Kit Events Source: https://stellarwalletskit.dev/how-to/kit-events.html Use the on method to register event listeners and call the returned function 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()` ``` -------------------------------- ### Stellar Wallets Kit signature interface definitions Source: https://stellarwalletskit.dev/how-to/sign-with-wallet.html Interface definitions for the available signing methods in the kit. ```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 }> } ``` -------------------------------- ### getNetwork() Source: https://stellarwalletskit.dev/wallets/create-wallet-module.html Requests the currently selected network from the wallet. This is useful for wallets that do not allow explicit network specification. ```APIDOC ## getNetwork() ### Description Retrieves the current network and network passphrase from the wallet. ### Returns - **Promise<{ network: string; networkPassphrase: string }>** - A promise that resolves to an object containing the network name and its corresponding passphrase. ``` -------------------------------- ### Sign a Transaction Source: https://stellarwalletskit.dev/how-to/the-easy-way.html Retrieve the active address and request a transaction signature using the Stellar Wallets Kit. ```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 ``` -------------------------------- ### Implement ModuleInterface for Stellar Wallets Kit Source: https://stellarwalletskit.dev/wallets/create-wallet-module.html The ModuleInterface defines the required properties and methods for a custom wallet module. Ensure the isAvailable method returns a result within 1000ms to avoid being marked as unavailable. ```typescript /** * A module is a "plugin" we can use within the kit so is able to handle a * specific type of wallet/service. There are some modules that are already * in the kit but any wallet developer can create their own modules */ 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; /** * This 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; /** * 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 }>; } ``` -------------------------------- ### TWalletConnectModuleParams Source: https://stellarwalletskit.dev/wallets/wallet-connect.html Configuration parameters for the WalletConnectModule. ```APIDOC ## TWalletConnectModuleParams ### Parameters - **projectId** (string) - Required - The project ID. - **metadata** (object) - Required - App metadata. - **allowedChains** (WalletConnectTargetChain[]) - Optional - List of allowed chains. - **signClientOptions** (SignClientTypes.Options) - Optional - Options for the SignClient. - **appKitOptions** (CreateAppKit) - Optional - Options for AppKit. ``` -------------------------------- ### Sign a Transaction Source: https://stellarwalletskit.dev/ Retrieve the user's address and sign a transaction XDR using the kit. ```typescript const {address} = await StellarWalletsKit.getAddress(); const {signedTxXdr} = await StellarWalletsKit.signTransaction(tx.toXDR(), { networkPassphrase: Networks.PUBLIC, address, }); console.log("Signed Transaction:", signedTxXdr); ``` -------------------------------- ### Define Kit Event Types and Payloads Source: https://stellarwalletskit.dev/how-to/kit-events.html Reference the available event types and their corresponding payload structures for type-safe event handling. ```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; }; export type KitEvent = KitEventStateUpdated | KitEventWalletSelected | KitEventDisconnected; ``` -------------------------------- ### signAuthEntry Source: https://stellarwalletskit.dev/how-to/sign-with-wallet.html Requests the user to sign an authentication entry. ```APIDOC ## signAuthEntry(authEntry, opts) ### Description Requests the user to sign an authentication entry string. ### Parameters - **authEntry** (string) - Required - The authentication entry string. - **opts** (object) - Optional - Configuration options including networkPassphrase, address, and path. ### Returns - **Promise<{ signedAuthEntry: string; signerAddress?: string }>** - A promise resolving to the signed auth entry and the signer's address. ``` -------------------------------- ### signMessage Source: https://stellarwalletskit.dev/how-to/sign-with-wallet.html Requests the user to sign a message string. ```APIDOC ## signMessage(message, opts) ### Description Requests the user to sign a message string. ### Parameters - **message** (string) - Required - The message string to sign. - **opts** (object) - Optional - Configuration options including networkPassphrase, address, and path. ### Returns - **Promise<{ signedMessage: string; signerAddress?: string }>** - A promise resolving to the signed message and the signer's address. ``` -------------------------------- ### ITrezorModuleParams Source: https://stellarwalletskit.dev/wallets/trezor.html Configuration parameters required for the TrezorModule. ```APIDOC ## ITrezorModuleParams ### Description Interface defining the configuration values used to start the TrezorConnect library. ### Parameters - **appUrl** (string) - Required - The URL of your application. - **appName** (string) - Required - The name of your application. - **email** (string) - Required - Contact email for the application. - **debug** (boolean) - Optional - Enable debug mode. - **lazyLoad** (boolean) - Optional - Enable lazy loading for the module. - **coreMode** ("auto" | "iframe" | "popup") - Optional - The core mode for TrezorConnect. ``` -------------------------------- ### Define the default dark theme Source: https://stellarwalletskit.dev/theme/default-themes.html The structure and color values for the default dark theme. ```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", }; ``` -------------------------------- ### Define SwkAppTheme structure Source: https://stellarwalletskit.dev/theme/custom-styles.html The SwkAppTheme type defines the required color and style properties for the kit's components. ```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; }; ``` -------------------------------- ### disconnect() Source: https://stellarwalletskit.dev/wallets/create-wallet-module.html Clears all active connections for the wallet module. ```APIDOC ## disconnect() ### Description Clears all existing connections. This method should be implemented if the wallet supports asynchronous connections, such as WalletConnect. ### Returns - **Promise** - A promise that resolves when the disconnection is complete. ``` -------------------------------- ### Retrieve Active Wallet Address Source: https://stellarwalletskit.dev/how-to/get-wallet-address.html Use this method to fetch the current active address. Ensure an address is active before calling, as this method throws an error otherwise. ```typescript import { StellarWalletsKit } from "@creit-tech/stellar-wallets-kit/sdk"; const {address} = await StellarWalletsKit.getAddress(); ``` -------------------------------- ### Insert the Connection Button Source: https://stellarwalletskit.dev/how-to/the-easy-way.html Inject the built-in connection button into a DOM element. You can use the default styling or apply custom CSS classes by setting the mode to free. ```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' }); ``` -------------------------------- ### signTransaction Source: https://stellarwalletskit.dev/how-to/sign-with-wallet.html Requests the user to sign a transaction XDR string. ```APIDOC ## signTransaction(xdr, opts) ### Description Requests the user to sign a transaction provided as an XDR string. ### Parameters - **xdr** (string) - Required - The transaction XDR string. - **opts** (object) - Optional - Configuration options including networkPassphrase, address, and path. ### Returns - **Promise<{ signedTxXdr: string; signerAddress?: string }>** - A promise resolving to the signed transaction XDR and the signer's address. ``` -------------------------------- ### AuthModalParams type definition Source: https://stellarwalletskit.dev/how-to/authenticate.html Defines the optional configuration parameters for the authentication modal, specifically the container element. ```typescript export type AuthModalParams = { container?: HTMLElement; }; ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.