Installation

Relevant source files

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

• package.json
• README.md
• src/routes/+page.svelte
• src/lib/SuiModule/SuiModule.svelte
• src/lib/index.d.ts
• scripts/publish-check.sh
• src/lib/SuiModule/types.ts

This document provides instructions for installing and setting up the sui-svelte-wallet-kit in a Svelte 5 project. The package is designed to simplify Sui blockchain integration by providing pre-built components and utilities for wallet connection, account management, and transaction signing.

The installation process involves adding the package to your project, ensuring peer dependencies are met, and wrapping your application with the main SuiModule provider. This enables the reactive state and components to function correctly throughout your dApp.

Prerequisites

Before installing the kit, your project must meet the following peer dependency requirement.

Dependency	Version
svelte	^5.0.0

This is a strict requirement, as the library is built using Svelte 5 runes.

Sources: package.json:62-64, README.md:24-26

Standard Installation

To add sui-svelte-wallet-kit to your project, use your preferred package manager.

# Using pnpm
pnpm add sui-svelte-wallet-kit

# Using npm
npm install sui-svelte-wallet-kit

You must also ensure the svelte peer dependency is installed.

pnpm add svelte@^5.0.0

Sources: README.md:18-26

Core Dependencies

The package relies on several key libraries from the Sui and wallet-standard ecosystems to provide its functionality.

Package	Version	Description
@mysten/sui	^1.45.2	The official Sui TypeScript SDK for interacting with the Sui network.
@mysten/wallet-standard	^0.19.9	Implements the wallet-standard for wallet discovery and interaction.
@suiet/wallet-sdk	^0.5.0	A Sui wallet SDK used for wallet detection and management.
@mysten/enoki	^0.12.14	Enables zkLogin functionality, specifically for Google Sign-In.
@wallet-standard/core	^1.1.1	Core interfaces and utilities for the wallet-standard.

Sources: package.json:80-85

The following diagram illustrates the high-level dependencies of the sui-svelte-wallet-kit.

Quick Start & Basic Setup

After installation, you need to integrate the SuiModule at the root of your application (e.g., in a layout file or your main page). This component acts as a provider for all the wallet state and functionality.

The following diagram shows the basic flow for setting up the wallet kit in a Svelte application.

Here is a minimal implementation example:

<script>
	import { SuiModule, ConnectButton } from 'sui-svelte-wallet-kit';

	const onConnect = () => {
		console.log('Wallet connected');
	};
</script>

<SuiModule {onConnect} autoConnect={true}>
	<h1>My Sui dApp</h1>
	<ConnectButton class="connect-btn" />
</SuiModule>

In this example:

1. SuiModule is imported and wraps the main application content. It is configured to automatically reconnect to the last used wallet (autoConnect={true}).
2. ConnectButton is a pre-styled button that handles the connection flow by opening a modal.

Sources: README.md:28-40, src/routes/+page.svelte:260-267

Development Installation

If you intend to contribute to the sui-svelte-wallet-kit itself, you will need to set up the development environment.

1. Install Dependencies:

   pnpm i
   

2. Build the Package:
   The prepack script, which runs svelte-kit sync && svelte-package, is used to build the distributable files into the /dist directory.

   pnpm run prepack
   

3. Run Development Server:
   To run the local demo and test changes:

   pnpm run dev
   

Development Scripts

The package.json file contains several scripts for development, testing, and publishing.

Script	Description
dev	Starts the Vite development server.
build	Builds the SvelteKit application.
package	Packages the library for distribution into the dist/ folder.
check	Runs svelte-check for type-checking against tsconfig.json.
lint	Runs Prettier and ESLint to check for code formatting and quality.
format	Formats the entire codebase using Prettier.
publish:patch	Bumps the patch version, builds, and publishes the package.

Sources: package.json:14-27, README.md:434-445, scripts/publish-check.sh

A pre-publish check script is available to ensure the package is ready for release. It verifies that required files like package.json and README.md exist, checks for required fields, and confirms that the build process completes successfully and creates the necessary dist/ files.

Sources: scripts/publish-check.sh:3-48