Auto-Connect

Relevant source files

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

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

The Auto-Connect feature provides a persistent wallet connection experience for users. When enabled, it remembers the user's last connected wallet and automatically attempts to re-establish the connection on subsequent visits to the dApp. This process is managed by storing connection details in the browser's localStorage.

This feature is controlled by the autoConnect prop on the main SuiModule component. By default, it is disabled. When a user successfully connects to a wallet while autoConnect is active, the wallet's name and other session details are saved. On the next page load, the module reads this data and tries to connect to the same wallet if it is installed.

Sources: README.md:12, src/lib/SuiModule/SuiModule.svelte:1020-1029

Enabling Auto-Connect

To enable the auto-connect functionality, set the autoConnect prop on the SuiModule component to true.

<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 />
</SuiModule>

Sources: README.md:20-31, src/routes/+page.svelte:272-278

The autoConnect prop is defined as part of the SuiModuleProps interface and defaults to false.

Sources: src/lib/SuiModule/types.ts:251, src/lib/SuiModule/SuiModule.svelte:1008

Core Logic and Data Flow

The auto-connect mechanism is centered around the SuiModule component's lifecycle and its interaction with localStorage.

Sources: src/lib/SuiModule/SuiModule.svelte

Connection Persistence

When a user successfully connects to a wallet via the connect function, and the _autoConnect state is true, the saveConnectionData function is invoked. This function writes the wallet's name to localStorage, ensuring the session can be restored later.

The following sequence diagram illustrates how a successful connection leads to data being saved for auto-connect.

Reconnection on Page Load

Upon component initialization, a Svelte $effect hook checks if auto-connect should be performed. If autoConnect is enabled, the user is not already connected, and wallets are available, the autoConnectWallet function is called. This function reads the saved data from localStorage, finds the corresponding installed wallet, and initiates the connection.

This flowchart shows the logic executed on page load to automatically reconnect the user.

Data Storage

The auto-connect feature relies on the browser's localStorage to persist connection information across sessions.

LocalStorage Key

All connection data is stored under a single key:

• Key: sui-module-connection

Sources: src/lib/SuiModule/SuiModule.svelte:99

Data Structure

The data stored in localStorage is a JSON object conforming to the ConnectionData interface. This structure holds information necessary to restore the user's session.

Field	Type	Description
walletName	string	The name of the last successfully connected wallet.
autoConnect	boolean	A flag indicating if auto-connect was enabled during the last session.
selectedAccountAddress	string	The address of the account that was active.
selectedChain	string	The blockchain identifier (e.g., sui:mainnet) that was active.

Sources: src/lib/SuiModule/types.ts:107-113

The ConnectionData interface is defined as follows:

// src/lib/SuiModule/types.ts

export interface ConnectionData {
	walletName?: string;
	autoConnect?: boolean;
	selectedAccountAddress?: string;
	selectedChain?: string;
}

Sources: src/lib/SuiModule/types.ts:107-113

Key Functions

Several internal functions within SuiModule.svelte manage the auto-connect lifecycle.

Function	Description
autoConnectWallet()	Orchestrates the auto-reconnection process by reading from localStorage and calling connect.
saveConnectionData()	Saves the connected wallet's name to localStorage if autoConnect is enabled.
getConnectionData()	Retrieves and parses the ConnectionData object from localStorage.
updateConnectionData()	Updates parts of the ConnectionData object in localStorage, such as the selected account or chain.
clearConnectionData()	Removes the sui-module-connection key from localStorage, typically called on disconnect.

Sources: src/lib/SuiModule/SuiModule.svelte:408-422, src/lib/SuiModule/SuiModule.svelte:220-227, src/lib/SuiModule/SuiModule.svelte:232-238, src/lib/SuiModule/SuiModule.svelte:240-244, src/lib/SuiModule/SuiModule.svelte:246-249

Conclusion

The Auto-Connect feature significantly improves the user experience by creating a seamless, persistent session. It intelligently uses localStorage to remember the user's wallet choice, automatically reconnecting them upon their return. This functionality is easily managed through the autoConnect boolean prop on the SuiModule component, making it a simple yet powerful addition to any dApp built with sui-svelte-wallet-kit.

Sources: README.md:12, src/lib/SuiModule/SuiModule.svelte:1008