Using with TypeScript

Relevant source files

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

• src/lib/SuiModule/types.ts
• src/lib/index.d.ts
• README.md
• src/routes/+page.svelte
• src/lib/SuiModule/SuiModule.svelte
• tsconfig.json
• package.json

The sui-svelte-wallet-kit is built with TypeScript and provides comprehensive type definitions for all its components, reactive stores, and utility functions. This ensures a type-safe development experience, enabling benefits like autocompletion, compile-time error checking, and inline documentation within your IDE.

This guide details how to leverage these TypeScript features in your Svelte project. The package exports all necessary types, allowing you to create strongly-typed configurations, handle callbacks with defined payloads, and interact with reactive state in a safe and predictable manner.

Sources: README.md:214-216, package.json:45-48

TypeScript Configuration

To ensure proper type checking and module resolution, your project's tsconfig.json should be configured correctly. The library recommends using bundler for moduleResolution and enabling strict mode for maximum type safety.

{
	"compilerOptions": {
		"moduleResolution": "bundler",
		"strict": true
	}
}

Sources: tsconfig.json:4-9, README.md:301-307

Core Types

The library exposes a rich set of types that model the core entities of the Sui wallet ecosystem. These can be imported directly from sui-svelte-wallet-kit.

Sources: README.md:221-228, src/lib/index.d.ts:38-51

Key Data Structures

The following diagram illustrates the relationships between some of the most important data structures.

This diagram shows how SuiModuleProps uses configuration objects like WalletConfig and ZkLoginGoogleConfig, and the relationship between a SuiWallet, its SuiWalletAdapter, and the SuiAccount it manages.

Sources: src/lib/SuiModule/types.ts:1-200

Main Exported Types

Type	Description	Source File
SuiAccount	Represents a wallet account, compatible with WalletAccount from @wallet-standard/core.	[src/lib/SuiModule/types.ts:162-165](https://github.com/teededung/sui-svelte-wallet-kit/blob/HEAD/src/lib/SuiModule/types.ts#L162-L165)
SuiWallet	Represents a wallet, including its name, icon, and installation status.	[src/lib/SuiModule/types.ts:171-180](https://github.com/teededung/sui-svelte-wallet-kit/blob/HEAD/src/lib/SuiModule/types.ts#L171-L180)
WalletConfig	Configuration object for customizing wallet display names and ordering in the connect modal.	[src/lib/SuiModule/types.ts:90-93](https://github.com/teededung/sui-svelte-wallet-kit/blob/HEAD/src/lib/SuiModule/types.ts#L90-L93)
ZkLoginGoogleConfig	Configuration for enabling Enoki zkLogin with Google.	[src/lib/SuiModule/types.ts:98-104](https://github.com/teededung/sui-svelte-wallet-kit/blob/HEAD/src/lib/SuiModule/types.ts#L98-L104)
SignMessageResult	The result object returned from signMessage, containing the signature and message bytes.	[src/lib/SuiModule/types.ts:84-87](https://github.com/teededung/sui-svelte-wallet-kit/blob/HEAD/src/lib/SuiModule/types.ts#L84-L87)
ConnectionResult	The result object returned from connection functions like switchWallet.	[src/lib/SuiModule/types.ts:188-198](https://github.com/teededung/sui-svelte-wallet-kit/blob/HEAD/src/lib/SuiModule/types.ts#L188-L198)
SwitchWalletOptions	Options object for the switchWallet function, allowing custom callbacks.	[src/lib/SuiModule/types.ts:125-141](https://github.com/teededung/sui-svelte-wallet-kit/blob/HEAD/src/lib/SuiModule/types.ts#L125-L141)
SuiModuleProps	Type definition for the props accepted by the SuiModule component.	[src/lib/SuiModule/types.ts:214-222](https://github.com/teededung/sui-svelte-wallet-kit/blob/HEAD/src/lib/SuiModule/types.ts#L214-L222)

Sources: src/lib/SuiModule/types.ts, README.md:315-339

Type-Safe Component Usage

You can provide strongly-typed props to components like SuiModule and ConnectButton. This is especially useful for configuration objects and event handlers.

SuiModule Configuration

When initializing SuiModule, you can pass typed configuration objects for wallet ordering and zkLogin.

<script lang="ts">
	import { SuiModule, ConnectButton } from 'sui-svelte-wallet-kit';
	import type {
		WalletConfig,
		ZkLoginGoogleConfig,
		WalletSelectionPayload
	} from 'sui-svelte-wallet-kit';

	// Type-safe configuration
	const walletConfig: WalletConfig = {
		ordering: ['Slush — A Sui wallet', 'OKX Wallet'],
		customNames: {
			'Slush — A Sui wallet': 'Slush'
		}
	};

	const zkLoginGoogle: ZkLoginGoogleConfig = {
		apiKey: 'your-api-key',
		googleClientId: 'your-client-id.apps.googleusercontent.com',
		network: 'testnet'
	};

	// Type-safe callback
	const onWalletSelection = (payload: WalletSelectionPayload): void => {
		console.log('Selected:', payload.wallet.name);
		console.log('Installed:', payload.installed);
	};

	const onConnect = (): void => {
		console.log('Connected!');
	};
</script>

<SuiModule {walletConfig} {zkLoginGoogle} {onConnect} autoConnect={true}>
	<ConnectButton {onWalletSelection} />
</SuiModule>

Sources: README.md:230-267, src/routes/+page.svelte:248-258

Event Handlers

Callbacks like onWalletSelection for the ConnectButton receive a typed payload object, giving you access to wallet details and its installation status.

The flow for wallet selection with type safety is as follows:

This diagram shows how a user interaction on the ConnectButton triggers the onWalletSelection callback in your component with a strongly-typed WalletSelectionPayload.

Sources: README.md:129-142, src/routes/+page.svelte:238-247

State and Functions

All reactive stores and exported functions are fully typed, providing a seamless experience when working with Svelte 5 runes.

Reactive State

You can use hooks like useCurrentAccount and stores like suiBalance with $derived to create reactive, type-safe variables.

<script lang="ts">
	import {
		useCurrentAccount,
		useSuiClient,
		suiBalance,
	} from 'sui-svelte-wallet-kit';
	import type { SuiAccount, SuiClient } from 'sui-svelte-wallet-kit';

	// Use hooks for reactive state
	let account = $derived(useCurrentAccount());
	let client = $derived(useSuiClient());

	// Reactive values are type-safe
	$effect(() => {
		const a: SuiAccount | undefined = account;
		const c: SuiClient = client;
		const balance: string | null = suiBalance.value;

		console.log('Account:', a?.address);
	});
</script>

Sources: README.md:272-297, src/routes/+page.svelte:40-43

Type-Safe Functions

Functions such as signMessage and switchWallet have typed parameters and return promises that resolve to typed results. This allows you to handle success and error cases with full type support.

<script lang="ts">
	import { signMessage } from 'sui-svelte-wallet-kit';
	import type { SignMessageResult } from 'sui-svelte-wallet-kit';

	const handleSignMessage = async (message: string): Promise<void> => {
		try {
			const result: SignMessageResult = await signMessage(message);
			console.log('Signature:', result.signature);
			console.log('Message bytes:', result.messageBytes);
		} catch (error) {
			console.error('Signing failed:', error);
		}
	};
</script>

Sources: README.md:288-297, src/lib/SuiModule/SuiModule.svelte:779-839

Wallet Switching with Typed Options

The switchWallet function accepts a SwitchWalletOptions object, allowing you to hook into the wallet switching lifecycle with type-safe callbacks.

<script lang="ts">
	import { switchWallet } from 'sui-svelte-wallet-kit';
	import type { SwitchWalletOptions, ConnectionResult, SuiWallet } from 'sui-svelte-wallet-kit';

	const handleSwitchWallet = async (): Promise<void> => {
		const options: SwitchWalletOptions = {
			onSelection: ({ wallet, installed }) => {
				console.log('Selected:', wallet.name, 'Installed:', installed);
			},
			shouldConnect: ({ selectedWallet, currentWallet }) => {
				// Skip if selecting same wallet
				return selectedWallet?.name !== currentWallet?.name;
			},
			onConnected: (wallet) => {
				console.log('Connected to:', wallet?.name);
			}
		};

		const result: ConnectionResult = await switchWallet(options);

		if (result.connected) {
			console.log('Successfully switched to:', result.wallet?.name);
		}
	};
</script>

Sources: README.md:341-369, src/lib/SuiModule/types.ts:125-141

Summary

sui-svelte-wallet-kit is designed with TypeScript at its core, providing a robust and developer-friendly experience. By leveraging the exported types for components, state, and functions, you can build more reliable Sui dApps with the full benefits of static analysis, autocompletion, and compile-time safety.

Sources: README.md:214-219## Method Explanation

The user wants a technical wiki page about using sui-svelte-wallet-kit with TypeScript.

My process to generate this page is as follows:

1. Deconstruct the Request:

   • Topic: "Using with TypeScript".
   • Source Files: A list of 3 files is provided, but the prompt requires a minimum of 5. I need to identify and use additional relevant files from the repository context.
   • Structure: The output must be a Markdown wiki page with a specific structure: <details> block first, then H1 title, introduction, detailed sections with H2/H3, Mermaid diagrams, tables, optional code snippets, and mandatory source citations.
   • Content Constraints: All information must be derived solely from the provided source files. No external knowledge.
   • Formatting: Specific rules for Mermaid diagrams, citations (Sources: [filename.ext:line-start-line-end](https://github.com/teededung/sui-svelte-wallet-kit/blob/HEAD/filename.ext%3Aline-start-line-end)), and general Markdown usage.

2. File Analysis and Selection:

   • src/lib/SuiModule/types.ts: This is the goldmine. It contains all the TypeScript interface and type definitions. I will use this for the "Core Types" section, tables, and class diagrams.
   • src/lib/index.d.ts: This file acts as the public API surface for types, showing what's intended for consumer use. It's great for confirming which types are exported.
   • README.md: This is an excellent, high-level source. It contains a dedicated "TypeScript" section with ready-made examples, explanations, and a list of available types. I'll use this heavily for the introduction, code snippets, and overall structure.
   • src/routes/+page.svelte: This is the demo application. It's a practical, real-world example of how to use the library with TypeScript in a Svelte component. I'll pull code snippets and usage patterns from here, especially for demonstrating reactive state with $derived and $effect.
   • src/lib/SuiModule/SuiModule.svelte: The core component logic. The <script module lang="ts"> block is where the functions and state are defined. I'll use this to verify the implementation of functions like signMessage and switchWallet and to understand the props of SuiModule.
   • tsconfig.json: Directly relevant to the topic. I'll use this to create the "TypeScript Configuration" section.
   • package.json: Shows the project's dependencies (typescript, @sveltejs/package) and scripts (check, lint), confirming it's a TypeScript-first project.

3. Content Generation - Step-by-Step:

   • <details> Block: I'll start by listing all the files I've selected, ensuring there are at least 5. I'll format the list as requested.

   • H1 Title: Add # Using with TypeScript.

   • Introduction: I'll synthesize the purpose from the README.md. I'll state that the package is built with TypeScript and exports comprehensive types to improve the developer experience. I'll cite the README.md and package.json to support this.

   • TypeScript Configuration Section: I'll create an H2 section. I'll copy the relevant compilerOptions from tsconfig.json into a code block and explain their significance, citing tsconfig.json and the README.md's recommendation.

   • Core Types Section: This is a major section.

     • I'll create an H2 for "Core Types".
     • I'll use src/lib/SuiModule/types.ts to identify key interfaces like SuiModuleProps, WalletConfig, ZkLoginGoogleConfig, SuiAccount, and SuiWallet.
     • I'll create a Mermaid classDiagram to visually represent the relationships between these types. For instance, SuiModuleProps contains WalletConfig and ZkLoginGoogleConfig. SuiWallet has a SuiWalletAdapter. This makes the architecture easier to grasp.
     • I'll create a Markdown table listing the most important exported types, their descriptions, and the source file, citing types.ts and README.md.

   • Type-Safe Component Usage Section:

     • I'll create an H2 for this.
     • I'll pull the Svelte code snippet from the README.md that shows how to pass typed walletConfig and zkLoginGoogle props to SuiModule. This is a perfect, ready-to-use example.
     • I'll explain the onWalletSelection callback, using the WalletSelectionPayload type. I'll create a sequenceDiagram to illustrate the flow from a user click to the typed payload being received by the component, making the data flow explicit. I'll cite README.md and the demo page src/routes/+page.svelte.

   • State and Functions Section:

     • I'll create another H2.
     • I'll show how to use reactive stores like useCurrentAccount with Svelte 5's $derived rune, using the example from README.md or +page.svelte. I'll explicitly show the type annotations.
     • I'll demonstrate a type-safe function call, like signMessage, showing how the return value is typed as SignMessageResult.
     • I'll include the switchWallet example with the typed SwitchWalletOptions object, as it's a more complex and powerful feature.

   • Citations: Throughout the entire process, after every paragraph, diagram, table, or code block, I will add a Sources: [...](https://github.com/teededung/sui-svelte-wallet-kit/blob/HEAD/...) citation, meticulously referencing the file and line numbers where the information was found. This is a critical requirement.

   • Conclusion: I'll write a brief summary paragraph, reiterating the benefits mentioned in the introduction (type safety, autocompletion, etc.), based on the README.md.

4. Final Review: I'll read through the entire generated page to ensure it meets all the prompt's constraints: no preamble, correct formatting, accurate information derived only from the source, and proper citations. I will double-check the Mermaid syntax to ensure it's valid.