/teededung/sui-svelte-wallet-kit

Wiki directory

Browse AI-generated documentation for any repository.

Home

Relevant source files

The following files were used as context for generating this wiki page:

sui-svelte-wallet-kit is a developer toolkit for integrating Sui blockchain wallet functionality into Svelte 5 applications. It provides a streamlined way to handle wallet connections, manage multiple accounts, fetch on-chain data like SuiNS names and SUI balances, and sign transactions or messages. The package is built using Svelte 5 runes ($state, $effect) for reactive state management and includes pre-built UI components, comprehensive TypeScript support, and integration with Enoki for zkLogin.

The core of the kit is the SuiModule component, which acts as a provider, managing the wallet state and making it accessible throughout the application via a set of composable functions (hooks). This architecture simplifies dApp development by abstracting the complexities of wallet standards and blockchain interactions.

Sources: README.md:3-8, package.json:3-4, src/lib/SuiModule/SuiModule.svelte:1-10

Core Architecture

The library's architecture is centered around the SuiModule.svelte component, which wraps the application and manages all wallet-related state and logic. It utilizes Svelte 5 runes for reactivity.

Sources: src/lib/SuiModule/SuiModule.svelte

Component Hierarchy

The main components work together to provide a seamless user experience for wallet connection.

Generating architecture diagram...

This diagram shows that SuiModule wraps the application, ConnectButton triggers the ConnectModal, and SuiModule manages the central wallet state accessible via hooks.

Sources: README.md:19-25, src/lib/SuiModule/SuiModule.svelte:1138-1151

State Management

State is managed within SuiModule.svelte using Svelte 5 runes. Key state variables include:

walletAdapter: The current connected wallet adapter.
status: The connection status (CONNECTED, DISCONNECTED, CONNECTING).
_account: The currently active user account.
_wallet: Information about the connected wallet.
_accountsSnapshot: An array of all accounts available from the wallet.
_suiNames, _suiBalanceByAddress: Caches for fetched on-chain data.

These state variables are not directly exposed. Instead, they are accessed through exported functions and reactive stores like useCurrentAccount() and suiBalance.

Sources: src/lib/SuiModule/SuiModule.svelte:14-41

Wallet Discovery and Connection

The kit automatically discovers installed Sui wallets using @suiet/wallet-sdk's WalletRadar and the Wallet Standard getWallets registry. This process is initiated by initWalletDiscovery. Connection state can be persisted in localStorage to enable auto-reconnection on page loads.

The connection flow is as follows:

Generating architecture diagram...

This diagram illustrates the user interaction flow from clicking the connect button to the module establishing a connection and updating the UI.

Sources: src/lib/SuiModule/SuiModule.svelte:48-59, 321-330, 608-659

Key Features and Configuration

Components

The kit exports several pre-built Svelte components.

Component	Description	Source File
`SuiModule`	The main wrapper component that provides wallet context and state management to the application. Must wrap the root of your dApp.	`src/lib/SuiModule/SuiModule.svelte`
`ConnectButton`	A button that shows the connection state. When clicked, it opens the `ConnectModal` if disconnected or can be configured to disconnect.	`src/lib/ConnectButton/index.js` (inferred from `README.md` and `src/routes/+page.svelte:3`)
`ConnectModal`	A modal dialog that lists available wallets for the user to select. Used internally by `SuiModule` but can be accessed programmatically.	`src/lib/ConnectModal/index.js` (inferred from `README.md` and `src/lib/SuiModule/SuiModule.svelte:1139`)

Sources: README.md:79-103, src/lib/index.d.ts:2-7

`SuiModule` Configuration

The SuiModule component is the central configuration point.

Prop	Type	Default	Description
`onConnect`	`() => void`	`undefined`	A callback function that runs after a wallet successfully connects.
`autoConnect`	`boolean`	`false`	If `true`, automatically reconnects to the last used wallet on page load.
`autoSuiNS`	`boolean`	`true`	If `true`, automatically fetches SuiNS names for the connected account.
`autoSuiBalance`	`boolean`	`true`	If `true`, automatically fetches the SUI balance for the connected account.
`walletConfig`	`WalletConfig`	`{}`	An object to customize wallet display names and ordering in the `ConnectModal`.
`zkLoginGoogle`	`ZkLoginGoogleConfig`	`null`	Configuration object to enable "Sign in with Google" via Enoki zkLogin.

Sources: README.md:81-86, src/lib/SuiModule/SuiModule.svelte:1099-1107, src/lib/SuiModule/types.ts:145-153

zkLogin (Enoki) Integration

The kit supports Google-based zkLogin through Mysten Labs' Enoki service. To enable it, provide the zkLoginGoogle configuration object to SuiModule.

Generating architecture diagram...

This flowchart shows the logic for enabling zkLogin: the SuiModule validates the configuration, registers the Enoki wallet if valid, and then displays the Google sign-in option in the connection modal.

The configuration requires an Enoki API key and a Google OAuth Client ID. The kit performs a basic validity check on the API key by probing the Enoki /v1/app endpoint.

Sources: README.md:129-155, src/lib/SuiModule/SuiModule.svelte:131-180, 1039-1069, src/lib/SuiModule/types.ts:68-74

Data Fetching and Caching

The kit automatically fetches and provides reactive access to on-chain data.

SuiNS Names: When autoSuiNS is true, the kit calls resolveAddressToSuiNSNames to get names for the active account and caches them. This is triggered on account changes.
SUI Balance: When autoSuiBalance is true, the kit fetches the SUI balance. Balance fetches are cached with a default TTL of 2 seconds (_balanceCacheTTLms), which can be configured using setSuiBalanceCacheTTL. The refreshSuiBalance function can be used to manually trigger a refresh, optionally bypassing the cache.

Sources: src/lib/SuiModule/SuiModule.svelte:331-366, 369-412, 1125-1137

API Reference

The package exports a rich API of components, reactive stores (hooks), utility functions, and TypeScript types.

Exported Functions and Stores

These are the primary tools for interacting with the wallet state.

Name	Type	Description
`useCurrentAccount()`	Function	Returns a reactive store with the current `SuiAccount` or `undefined`.
`useAccounts()`	Function	Returns a reactive store with an array of all available `SuiAccount`s.
`useCurrentWallet()`	Function	Returns a reactive store with information about the currently connected wallet.
`useSuiClient()`	Function	Returns a `SuiClient` instance configured for the current network.
`connect(wallet)`	Function	Programmatically connect to a specific wallet.
`disconnect()`	Function	Disconnects the current wallet and clears session data.
`switchWallet(options?)`	Function	Opens the modal to allow the user to switch to a different wallet.
`switchAccount(selector)`	Function	Switch the active account by index or address.
`signAndExecuteTransaction()`	Function	Signs and executes a transaction using the connected wallet.
`signMessage()`	Function	Signs a message using the connected wallet.
`suiBalance`	Store	A readable store containing the SUI balance of the current account.
`suiNames`	Store	A readable store containing the SuiNS names of the current account.

Sources: README.md:157-175, src/lib/index.d.ts:10-39, src/lib/SuiModule/index.js:5-35

Core Data Types

The library is fully typed with TypeScript.

Type	Description
`SuiAccount`	Represents a wallet account, compatible with Wallet Standard.
`SuiWallet`	Represents a wallet, including its name, icon, and adapter.
`WalletConfig`	Configuration for customizing wallet display names and order.
`ZkLoginGoogleConfig`	Configuration for enabling Enoki zkLogin with Google.
`SignMessageResult`	The result object from a `signMessage` call.
`ConnectionResult`	The result object from a `connect` or `switchWallet` call.

Sources: src/lib/SuiModule/types.ts, src/lib/index.d.ts:41-55

Package Exports

The project is structured as a modern ESM package with explicit exports defined in package.json. This allows consumers to import specific components or the entire suite of utilities.

"exports": {
    ".": {
        "types": "./dist/index.d.ts",
        "svelte": "./dist/index.js"
    },
    "./ConnectButton": {
        "types": "./dist/ConnectButton/index.d.ts",
        "svelte": "./dist/ConnectButton/index.js"
    },
    "./ConnectModal": {
        "types": "./dist/ConnectModal/index.d.ts",
        "svelte": "./dist/ConnectModal/index.js"
    },
    "./SuiModule": {
        "types": "./dist/SuiModule/index.d.ts",
        "svelte": "./dist/SuiModule/index.js"
    }
}

This configuration ensures that developers can import the main library functions from sui-svelte-wallet-kit, or cherry-pick components like sui-svelte-wallet-kit/ConnectButton.

Sources: package.json:52-73

Home

Relevant source files

The following files were used as context for generating this wiki page:

Sources: README.md:3-8, package.json:3-4, src/lib/SuiModule/SuiModule.svelte:1-10

Core Architecture

The library's architecture is centered around the SuiModule.svelte component, which wraps the application and manages all wallet-related state and logic. It utilizes Svelte 5 runes for reactivity.

Sources: src/lib/SuiModule/SuiModule.svelte

Component Hierarchy

The main components work together to provide a seamless user experience for wallet connection.

Generating architecture diagram...

This diagram shows that SuiModule wraps the application, ConnectButton triggers the ConnectModal, and SuiModule manages the central wallet state accessible via hooks.

Sources: README.md:19-25, src/lib/SuiModule/SuiModule.svelte:1138-1151

State Management

State is managed within SuiModule.svelte using Svelte 5 runes. Key state variables include:

walletAdapter: The current connected wallet adapter.
status: The connection status (CONNECTED, DISCONNECTED, CONNECTING).
_account: The currently active user account.
_wallet: Information about the connected wallet.
_accountsSnapshot: An array of all accounts available from the wallet.
_suiNames, _suiBalanceByAddress: Caches for fetched on-chain data.

These state variables are not directly exposed. Instead, they are accessed through exported functions and reactive stores like useCurrentAccount() and suiBalance.

Sources: src/lib/SuiModule/SuiModule.svelte:14-41

Wallet Discovery and Connection

The connection flow is as follows:

Generating architecture diagram...

This diagram illustrates the user interaction flow from clicking the connect button to the module establishing a connection and updating the UI.

Sources: src/lib/SuiModule/SuiModule.svelte:48-59, 321-330, 608-659

Key Features and Configuration

Components

The kit exports several pre-built Svelte components.

Component	Description	Source File
`SuiModule`	The main wrapper component that provides wallet context and state management to the application. Must wrap the root of your dApp.	`src/lib/SuiModule/SuiModule.svelte`
`ConnectButton`	A button that shows the connection state. When clicked, it opens the `ConnectModal` if disconnected or can be configured to disconnect.	`src/lib/ConnectButton/index.js` (inferred from `README.md` and `src/routes/+page.svelte:3`)
`ConnectModal`	A modal dialog that lists available wallets for the user to select. Used internally by `SuiModule` but can be accessed programmatically.	`src/lib/ConnectModal/index.js` (inferred from `README.md` and `src/lib/SuiModule/SuiModule.svelte:1139`)

Sources: README.md:79-103, src/lib/index.d.ts:2-7

`SuiModule` Configuration

The SuiModule component is the central configuration point.

Prop	Type	Default	Description
`onConnect`	`() => void`	`undefined`	A callback function that runs after a wallet successfully connects.
`autoConnect`	`boolean`	`false`	If `true`, automatically reconnects to the last used wallet on page load.
`autoSuiNS`	`boolean`	`true`	If `true`, automatically fetches SuiNS names for the connected account.
`autoSuiBalance`	`boolean`	`true`	If `true`, automatically fetches the SUI balance for the connected account.
`walletConfig`	`WalletConfig`	`{}`	An object to customize wallet display names and ordering in the `ConnectModal`.
`zkLoginGoogle`	`ZkLoginGoogleConfig`	`null`	Configuration object to enable "Sign in with Google" via Enoki zkLogin.

Sources: README.md:81-86, src/lib/SuiModule/SuiModule.svelte:1099-1107, src/lib/SuiModule/types.ts:145-153

zkLogin (Enoki) Integration

The kit supports Google-based zkLogin through Mysten Labs' Enoki service. To enable it, provide the zkLoginGoogle configuration object to SuiModule.

Generating architecture diagram...

The configuration requires an Enoki API key and a Google OAuth Client ID. The kit performs a basic validity check on the API key by probing the Enoki /v1/app endpoint.

Sources: README.md:129-155, src/lib/SuiModule/SuiModule.svelte:131-180, 1039-1069, src/lib/SuiModule/types.ts:68-74

Data Fetching and Caching

The kit automatically fetches and provides reactive access to on-chain data.

SuiNS Names: When autoSuiNS is true, the kit calls resolveAddressToSuiNSNames to get names for the active account and caches them. This is triggered on account changes.
SUI Balance: When autoSuiBalance is true, the kit fetches the SUI balance. Balance fetches are cached with a default TTL of 2 seconds (_balanceCacheTTLms), which can be configured using setSuiBalanceCacheTTL. The refreshSuiBalance function can be used to manually trigger a refresh, optionally bypassing the cache.

Sources: src/lib/SuiModule/SuiModule.svelte:331-366, 369-412, 1125-1137

API Reference

The package exports a rich API of components, reactive stores (hooks), utility functions, and TypeScript types.

Exported Functions and Stores

These are the primary tools for interacting with the wallet state.

Name	Type	Description
`useCurrentAccount()`	Function	Returns a reactive store with the current `SuiAccount` or `undefined`.
`useAccounts()`	Function	Returns a reactive store with an array of all available `SuiAccount`s.
`useCurrentWallet()`	Function	Returns a reactive store with information about the currently connected wallet.
`useSuiClient()`	Function	Returns a `SuiClient` instance configured for the current network.
`connect(wallet)`	Function	Programmatically connect to a specific wallet.
`disconnect()`	Function	Disconnects the current wallet and clears session data.
`switchWallet(options?)`	Function	Opens the modal to allow the user to switch to a different wallet.
`switchAccount(selector)`	Function	Switch the active account by index or address.
`signAndExecuteTransaction()`	Function	Signs and executes a transaction using the connected wallet.
`signMessage()`	Function	Signs a message using the connected wallet.
`suiBalance`	Store	A readable store containing the SUI balance of the current account.
`suiNames`	Store	A readable store containing the SuiNS names of the current account.

Sources: README.md:157-175, src/lib/index.d.ts:10-39, src/lib/SuiModule/index.js:5-35

Core Data Types

The library is fully typed with TypeScript.

Type	Description
`SuiAccount`	Represents a wallet account, compatible with Wallet Standard.
`SuiWallet`	Represents a wallet, including its name, icon, and adapter.
`WalletConfig`	Configuration for customizing wallet display names and order.
`ZkLoginGoogleConfig`	Configuration for enabling Enoki zkLogin with Google.
`SignMessageResult`	The result object from a `signMessage` call.
`ConnectionResult`	The result object from a `connect` or `switchWallet` call.

Sources: src/lib/SuiModule/types.ts, src/lib/index.d.ts:41-55

Package Exports

The project is structured as a modern ESM package with explicit exports defined in package.json. This allows consumers to import specific components or the entire suite of utilities.

"exports": {
    ".": {
        "types": "./dist/index.d.ts",
        "svelte": "./dist/index.js"
    },
    "./ConnectButton": {
        "types": "./dist/ConnectButton/index.d.ts",
        "svelte": "./dist/ConnectButton/index.js"
    },
    "./ConnectModal": {
        "types": "./dist/ConnectModal/index.d.ts",
        "svelte": "./dist/ConnectModal/index.js"
    },
    "./SuiModule": {
        "types": "./dist/SuiModule/index.d.ts",
        "svelte": "./dist/SuiModule/index.js"
    }
}

This configuration ensures that developers can import the main library functions from sui-svelte-wallet-kit, or cherry-pick components like sui-svelte-wallet-kit/ConnectButton.

Sources: package.json:52-73

Home

Core Architecture

Component Hierarchy

State Management

Wallet Discovery and Connection

Key Features and Configuration

Components

SuiModule Configuration

zkLogin (Enoki) Integration

Data Fetching and Caching

API Reference

Exported Functions and Stores

Core Data Types

Package Exports

Home

Core Architecture

Component Hierarchy

State Management

Wallet Discovery and Connection

Key Features and Configuration

Components

SuiModule Configuration

zkLogin (Enoki) Integration

Data Fetching and Caching

API Reference

Exported Functions and Stores

Core Data Types

Package Exports

`SuiModule` Configuration

`SuiModule` Configuration