Running the Demo App

Relevant source files

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

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

The demo application, located at src/routes/+page.svelte, serves as a comprehensive showcase and practical implementation guide for the sui-svelte-wallet-kit. It is built using SvelteKit and demonstrates the full range of features, from wallet connection and account management to transaction signing and zkLogin integration. The application leverages Svelte 5 runes for reactive state management, providing a modern and efficient example of how to integrate the wallet kit into a dApp.

This document breaks down the structure and functionality of the demo app, explaining how core components and utilities from the library are used to build a feature-rich user experience. It is intended for developers looking to understand the library's capabilities and find concrete usage examples.

Sources: src/routes/+page.svelte, README.md:1-12

Setup and Execution

To run the demo application locally, you need to install the project dependencies and use the provided npm scripts.

Dependencies

The demo relies on several key dependencies defined in package.json.

Dependency	Version	Purpose
svelte	^5.0.0	The core Svelte framework (peer dependency).
@sveltejs/kit	^2.49.1	The application framework for building the demo app.
@mysten/sui	^1.45.2	Official Sui TypeScript SDK for transactions and client interaction.
@suiet/wallet-sdk	^0.5.0	Used for wallet discovery and SuiNS name resolution.
@mysten/enoki	^0.12.14	Enables zkLogin (Google) functionality.
sui-svelte-wallet-kit	0.9.1	The wallet kit itself, being demonstrated.

Sources: package.json:1, 41, 52-56

Running the Demo

The project includes scripts to run the development server.

# Install dependencies
pnpm i

# Run the development server
pnpm run dev

The dev script, defined in package.json, uses vite dev to start the SvelteKit development server.

Sources: package.json:13, README.md:329-332

Application Architecture

The demo app's architecture is centered around the <SuiModule> component, which acts as the main provider and state manager for all wallet-related functionalities.

Core Component Structure

The entire demo UI in +page.svelte is wrapped by the <SuiModule> component. This component initializes the wallet connection logic, manages state, and makes wallet data and functions available to all child components through reactive stores and exported functions.

This diagram illustrates the high-level component hierarchy of the demo application.

State Management with Svelte 5 Runes

The demo extensively uses Svelte 5 runes for state management.

• $state: Used for local, mutable state within the +page.svelte component, such as transactionResult, isLoading, and error.
• $derived: Used to create reactive values based on the wallet kit's stores. For example, const account = $derived(useCurrentAccount()); creates a variable account that automatically updates whenever the current wallet account changes.
• $effect: Used to run side effects in response to state changes. For instance, an $effect is used to fetch zkLogin information whenever the account value changes.

// src/routes/+page.svelte:39-42
const account = $derived(useCurrentAccount());
const accounts = $derived(useAccounts());
const currentWallet = $derived(useCurrentWallet());
const suiClient = $derived(useSuiClient());

This reactive model simplifies data flow, as UI elements automatically re-render when the underlying wallet state (e.g., connection status, account address, balance) is updated by the <SuiModule>.

Sources: src/routes/+page.svelte:39-55, 161-175

Feature Implementation

The demo is divided into sections, each demonstrating a specific feature of the wallet kit.

Wallet Connection and Configuration

Wallet connection is initiated via the <ConnectButton> component. The demo also showcases programmatic connection and wallet switching.

Configuration

The <SuiModule> is configured with walletConfig to customize wallet ordering in the connection modal and zkLoginGoogle to enable Google sign-in via Enoki.

<!-- src/routes/+page.svelte:264-273 -->
const walletConfig: WalletConfig = {
    ordering: [
        'Sign in with Google',
        'Slush — A Sui wallet',
        'OKX Wallet',
        'Phantom',
        'Suiet'
    ]
};

const zkLoginGoogle: ZkLoginGoogleConfig = {
    apiKey: PUBLIC_ENOKI_API_KEY,
    googleClientId: PUBLIC_GOOGLE_CLIENT_ID,
    network: 'testnet'
};

Sources: src/routes/+page.svelte:264-282

Connection Flow

The following sequence diagram shows the process of connecting a wallet using the <ConnectButton>.

The onWalletSelection callback is passed to the <ConnectButton> to handle cases where a user selects a wallet that is not installed, allowing the app to show an alert.

Sources: src/routes/+page.svelte:238-250, 286, src/lib/ConnectModal/ConnectModal.svelte:129-148

Displaying Account Data

Once connected, the demo app displays detailed information about the current account using various hooks and reactive stores.

Hook/Store	Purpose
useCurrentAccount	Provides the currently active SuiAccount object.
useAccounts	Provides an array of all accounts available from the connected wallet.
suiBalance	A readable store holding the SUI balance of the current account.
suiNames	A readable store holding the SuiNS names for the current account.
suiNamesByAddress	A store mapping all known addresses to their SuiNS names.
useSuiClient	Provides a SuiClient instance for the current network.

This data is rendered reactively. For example, the SUI balance display automatically shows a "Loading..." message managed by the suiBalanceLoading store.

Sources: src/routes/+page.svelte:19-35, 318-356

Transaction and Message Signing

The demo provides interactive sections for testing transaction execution and message signing.

Test Transaction

The testTransaction function demonstrates how to build and sign a transaction.

1. It checks if an account is connected.
2. It creates a new Transaction object from @mysten/sui/transactions.
3. It constructs a simple transaction (a 0 SUI transfer to self).
4. It calls signAndExecuteTransaction(tx) from the wallet kit.
5. The result or error is stored in a $state variable to be displayed in the UI.

This flow is illustrated below.

Sign Message

The message signing section first checks if the connected wallet supports this feature using canSignMessage(). If supported, it allows the user to input a message and sign it using the signMessage function.

<!-- src/routes/+page.svelte:476-478 -->
{#if canSignMessage()}
    <!-- UI for signing -->
{:else}
    <!-- Message explaining feature is not supported -->
{/if}

The testSignMessage function is similar to testTransaction, calling signMessage(message) and updating the UI with the resulting signature or an error.

Sources: src/routes/+page.svelte:120-139, 474-515

zkLogin (Enoki) Integration

The demo shows how to integrate Google-based zkLogin using Enoki.

1. Configuration: The zkLoginGoogle configuration object, containing the Enoki API key and Google Client ID, is passed as a prop to <SuiModule>. This enables the "Sign in with Google" option in the ConnectModal.
2. Data Fetching: An $effect hook is used to call getZkLoginInfo() whenever the account changes. If the connected wallet is a zkLogin wallet, this function returns session and metadata, which are then displayed in the UI.

// src/routes/+page.svelte:161-175
$effect(() => {
    // Fetch zkLogin info when account changes
    if (account) {
        getZkLoginInfo()
            .then((info: ZkLoginInfo | null) => {
                zkInfo = info;
            })
            .catch(() => {
                zkInfo = null;
            });
    } else {
        zkInfo = null;
    }
});

Sources: src/routes/+page.svelte:54, 161-175, 275-282, 358-372, src/lib/SuiModule/SuiModule.svelte:1155-1175