Sui Svelte dApp

A comprehensive Svelte library for building dApps on the Sui blockchain. This library provides easy-to-use components and utilities for wallet connection, transaction signing, and account management in Svelte applications.

Features

• 🔌 Easy Wallet Connection - Support for all major Sui wallets (Sui Wallet, Suiet, Ethos, etc.)
• 🎨 Pre-built Components - Ready-to-use Connect Button and Modal components
• 📱 Responsive Design - Mobile-friendly wallet selection modal with custom CSS
• 🔐 Secure Transactions - Built-in transaction signing and execution
• 🎯 Type-Safe - Full TypeScript support
• ⚡ Svelte 5 Ready - Built with the latest Svelte features (runes, snippets)
• 🎛️ Customizable - Easy to style and integrate with your design system
• 🔄 Auto-Connect - Automatically reconnect users with saved wallet preferences

Installation

npm install sui-svelte-dapp-dapp
# or
pnpm install sui-svelte-dapp-dapp
# or
yarn add sui-svelte-dapp-dapp

Peer Dependencies

Make sure you have the required peer dependencies installed:

npm install svelte@^5.0.0

Quick Start

1. Basic Setup

Wrap your app with the SuiModule component:

<script>
    import { SuiModule, ConnectButton } from 'sui-svelte-dapp-dapp';
</script>

<SuiModule>
    <h1>My Sui dApp</h1>
    <ConnectButton />
</SuiModule>

2. Auto-Connect Setup

Enable automatic wallet connection to reconnect users automatically:

<script>
    import { SuiModule, ConnectButton } from 'sui-svelte-dapp-dapp';
</script>

<SuiModule autoConnect={true}>
    <h1>My Sui dApp</h1>
    <ConnectButton />
</SuiModule>

3. Using the Connect Button

The simplest way to add wallet connection:

<script>
    import { ConnectButton } from 'sui-svelte-dapp-dapp';
</script>

<ConnectButton class="my-custom-class" style="color: blue;" />

4. Custom Connection Logic

<script>
    import { SuiModule, connectWithModal, disconnect, account } from 'sui-svelte-dapp-dapp';

    const handleConnect = async () => {
        await connectWithModal();
    };

    const handleDisconnect = () => {
        disconnect();
    };
</script>

<SuiModule>
    {#if account.value}
        <p>Connected: {account.value.address}</p>
        <button onclick={handleDisconnect}>Disconnect</button>
    {:else}
        <button onclick={handleConnect}>Connect Wallet</button>
    {/if}
</SuiModule>

Components

SuiModule

The main wrapper component that provides wallet connection state and functionality.

<script>
    import { SuiModule } from 'sui-svelte-dapp';

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

<SuiModule {onConnect}>
    <!-- Your app content -->
</SuiModule>

Props:

• onConnect?: () => void - Callback when wallet successfully connects
• autoConnect?: boolean - Automatically connect using saved wallet data (default: false)

ConnectButton

A pre-styled button that handles wallet connection/disconnection.

<script>
    import { ConnectButton } from 'sui-svelte-dapp';
</script>

<ConnectButton class="btn btn-primary" style="padding: 12px 24px;" />

Props:

• class?: string - CSS classes to apply
• style?: string - Inline styles

ConnectModal

A modal component for wallet selection (used internally by other components).

<script>
    import { ConnectModal } from 'sui-svelte-dapp';

    let modal;
    let availableWallets = []; // Your wallet list

    const openModal = async () => {
        const selectedWallet = await modal.openAndWaitForResponse();
        console.log('Selected:', selectedWallet);
    };
</script>

<ConnectModal bind:this={modal} {availableWallets} isCustom={false} />

API Reference

Functions

connectWithModal()

Opens the wallet selection modal and connects to the selected wallet.

<script>
    import { connectWithModal } from 'sui-svelte-dapp';

    const connect = async () => {
        await connectWithModal();
    };
</script>

connect(wallet: IWallet)

Connects to a specific wallet directly.

<script>
    import { connect } from 'sui-svelte-dapp';

    const connectToWallet = async (wallet) => {
        await connect(wallet);
    };
</script>

disconnect()

Disconnects the current wallet.

<script>
    import { disconnect } from 'sui-svelte-dapp';

    const handleDisconnect = () => {
        disconnect();
    };
</script>

signAndExecuteTransaction(transaction: Transaction)

Signs and executes a transaction with the connected wallet.

<script>
    import { signAndExecuteTransaction } from 'sui-svelte-dapp';
    import { Transaction } from '@mysten/sui/transactions';

    const sendTransaction = async () => {
        const tx = new Transaction();
        // ... build your transaction

        try {
            const result = await signAndExecuteTransaction(tx);
            console.log('Transaction result:', result);
        } catch (error) {
            console.error('Transaction failed:', error);
        }
    };
</script>

State

account

Reactive account information for the connected wallet.

<script>
    import { account } from 'sui-svelte-dapp';
</script>

{#if account.value}
    <div>
        <p>Address: {account.value.address}</p>
        <p>Label: {account.value.label || 'N/A'}</p>
        <p>Chains: {account.value.chains.join(', ')}</p>
    </div>
{:else}
    <p>No wallet connected</p>
{/if}

Advanced Usage

Custom Modal

You can create a custom wallet selection modal:

<script>
    import { SuiModule } from 'sui-svelte-dapp';
</script>

<SuiModule>
    <slot name="modal">
        <!-- Your custom modal content -->
        <div class="custom-modal">
            <h2>Choose Your Wallet</h2>
            <!-- Custom wallet selection UI -->
        </div>
    </slot>

    <!-- Your app content -->
</SuiModule>

Transaction Examples

Simple Transfer

<script>
    import { signAndExecuteTransaction, account } from 'sui-svelte-dapp';
    import { Transaction } from '@mysten/sui/transactions';

    const transferSui = async (recipient, amount) => {
        if (!account.value) throw new Error('No wallet connected');

        const tx = new Transaction();
        tx.transferObjects([tx.splitCoins(tx.gas, [amount])], recipient);

        const result = await signAndExecuteTransaction(tx);
        return result;
    };
</script>

Move Call

<script>
    import { signAndExecuteTransaction } from 'sui-svelte-dapp';
    import { Transaction } from '@mysten/sui/transactions';

    const callMoveFunction = async () => {
        const tx = new Transaction();
        tx.moveCall({
            target: 'package::module::function',
            arguments: [
                /* your arguments */
            ]
        });

        const result = await signAndExecuteTransaction(tx);
        return result;
    };
</script>

Styling

The components come with custom CSS styling (no longer using Tailwind CSS) that you can customize:

Override Default Modal Styles

/* Customize the modal overlay */
:global(.modal-overlay) {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
}

/* Customize the modal content */
:global(.modal-content) {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 16px;
}

/* Customize wallet buttons */
:global(.wallet-button) {
    background: #2a2a2a;
    border: 1px solid #444;
    color: white;
}

:global(.wallet-button:hover) {
    border-color: #667eea;
    background: #333;
}

Custom Connect Button Styling

<ConnectButton
    class="my-connect-btn"
    style="background: linear-gradient(45deg, #667eea, #764ba2);"
/>

<style>
    :global(.my-connect-btn) {
        border: none;
        border-radius: 8px;
        color: white;
        padding: 12px 24px;
        font-weight: 600;
        cursor: pointer;
        transition: transform 0.2s;
    }

    :global(.my-connect-btn:hover) {
        transform: translateY(-2px);
    }
</style>

Supported Wallets

• Sui Wallet (Official Sui wallet)
• Suiet (Popular community wallet)
• Slush (Formerly Sui Wallet, by Mysten Labs)
• Ethos (Ethos wallet)
• Surf (Surf wallet)
• Glass (Glass wallet)
• And more...

The library automatically detects installed wallets and displays them in the connection modal.

TypeScript Support

This library is built with TypeScript and provides full type definitions:

import type { IWallet, WalletAccount } from 'sui-svelte-dapp';
import type { SuiSignAndExecuteTransactionOutput } from '@mysten/wallet-standard';

// All exports are fully typed
const handleTransaction = async (): Promise<SuiSignAndExecuteTransactionOutput> => {
    // Type-safe transaction handling
};

Examples

Check out the example files for complete working examples:

• /src/routes/+page.svelte - Complete Svelte component example
• /examples/basic-usage.svelte - Basic usage with components
• /examples/advanced-usage.svelte - Advanced component usage

Complete examples include wallet connection, account display, transaction signing, error handling, and loading states.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT License - see LICENSE file for details.

Support

• Documentation: GitHub Repository
• Issues: Report bugs
• Discord: Sui Developer Community

Development

Building the Library

# Install dependencies
pnpm install

# Build the library
pnpm run prepack

# Check if ready for publication
./scripts/publish-check.sh

Publishing to NPM

1. Update package details in package.json:

   • Change author field
   • Update repository URLs
   • Verify name is available on NPM

2. Build and test:

   pnpm run prepack
   ./scripts/publish-check.sh
   

3. Publish:

   npm login
   npm publish
   

Changelog

v1.1.4

• NEW: Auto-Connect feature with autoConnect prop
• Automatic wallet persistence using localStorage
• Seamless reconnection on page load
• Enhanced disconnect functionality with data cleanup

v1.1.2

• BREAKING: Removed Tailwind CSS dependency - now uses custom CSS
• Improved modal styling with better animations and visual feedback
• Better cross-browser compatibility
• Performance improvements
• Enhanced TypeScript definitions

v1.0.0

• Initial release
• Basic wallet connection with components
• Transaction signing
• Svelte 5 support
• TypeScript definitions