ConnectButton Component

Relevant source files

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

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

The ConnectButton is a pre-built UI component that provides a simple and intuitive way for users to connect and disconnect their Sui wallet. It serves as the primary entry point for wallet interactions within a dApp built with sui-svelte-wallet-kit. The button's appearance and behavior are reactive, automatically toggling between "Connect" and "Disconnect" states based on the current wallet connection status.

This component is designed to be used within the context of the main SuiModule component, from which it derives its state and core functionality. When clicked in a disconnected state, it triggers the ConnectModal to open, allowing the user to select a wallet. It also provides a callback mechanism to handle user selections, which is particularly useful for notifying users if they select a wallet that is not installed.

Component API

The ConnectButton component is exported for direct use in Svelte applications. It can be imported from the main package entry point or its specific subpath.

Sources: package.json:33-36, src/lib/index.d.ts:2

Props

The component accepts several props to customize its appearance and behavior.

Prop	Type	Description
class	string	A custom CSS class name to apply to the button element for styling.
style	string	Custom inline styles to apply to the button element.
onWalletSelection	(payload: WalletSelectionPayload) => void	A callback function that is invoked when a user selects a wallet from the ConnectModal. The payload includes the selected wallet and its installation status.

Sources: src/lib/ConnectButton/ConnectButton.svelte.d.ts:7-18, README.md:100-103

Data Structures

WalletSelectionPayload

The onWalletSelection callback receives a payload object with the following structure, allowing the application to react to the user's choice, for instance, by showing a toast if the selected wallet is not installed.

// Defined in src/lib/SuiModule/SuiModule.svelte.js
interface WalletSelectionPayload {
  wallet: any; // The selected wallet object
  installed: boolean; // True if the wallet is installed
  connected: boolean; // The connection status after selection
  alreadyConnected?: boolean; // True if the wallet was already connected
}

Sources: README.md:112-119, src/lib/ConnectButton/ConnectButton.svelte.d.ts:4

Core Functionality

The component's logic is centered around the wallet's connection status, which it reads from the SuiModule context via the useCurrentAccount hook.

State-Driven Behavior

The button's text and onclick handler are determined by whether a wallet account is currently connected.

• Disconnected State: If useCurrentAccount() returns no account, the button displays "Connect Wallet".
• Connected State: If an account is present, the button displays "Disconnect" along with the connected account's address (truncated).

The following diagram illustrates the component's internal state logic.

This diagram shows how the ConnectButton decides what to display based on the connection status.
Sources: src/lib/SuiModule/SuiModule.svelte:612-613

Interaction Flow

The ConnectButton orchestrates the connection and disconnection processes by calling functions provided by the SuiModule.

Connection Flow

When a user clicks the button in a disconnected state, it initiates the wallet connection process.

1. The onclick event triggers the connectWithModal function.
2. connectWithModal opens the ConnectModal component, displaying a list of available wallets.
3. The onWalletSelection prop is passed to connectWithModal and is called when the user makes a selection.
4. If the user selects an installed wallet, connectWithModal proceeds to connect to it.

The sequence diagram below details this interaction.

This diagram shows the sequence of events when a user initiates a connection.
Sources: src/lib/SuiModule/SuiModule.svelte:737-758, src/routes/+page.svelte:220-231

Disconnection Flow

When a user clicks the button in a connected state, it triggers the disconnection process.

1. The onclick event calls the disconnect function from the SuiModule context.
2. The disconnect function clears the connection state, removes the account, and cleans up local storage.
3. The ConnectButton re-renders to show the "Connect Wallet" state.

This flowchart shows the steps involved in disconnecting a wallet.
Sources: src/lib/SuiModule/SuiModule.svelte:793-822

Usage Example

To use the ConnectButton, it must be placed inside a SuiModule component. This provides the necessary context for state management and wallet functions.

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

    // Callback to handle wallet selection from the modal
	const onWalletSelection = (payload) => {
		const picked = payload?.wallet ?? payload;
		const installed = typeof payload === 'object' ? !!payload?.installed : !!picked?.installed;
		if (!installed) {
			// Example: show an alert if the wallet is not installed
			alert('Please install the wallet: ' + picked?.name);
		}
	};

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

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

Sources: README.md:21-31, src/routes/+page.svelte:220-231

Styling

The component can be styled using the class and style props. The README.md and demo page provide an example of how to apply custom styles by targeting the component with a global CSS selector.

/* Example from src/routes/+page.svelte */
:global(.connect-btn) {
    background: #6366f1;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    font-size: 1rem;
    cursor: pointer;
}

:global(.connect-btn:hover) {
    filter: brightness(1.1);
}

Sources: src/routes/+page.svelte:440-456, README.md:200-218

Conclusion

The ConnectButton component is a crucial element of the sui-svelte-wallet-kit, abstracting the complexity of wallet connection and disconnection into a single, user-friendly button. Its reactive nature and tight integration with the SuiModule and ConnectModal provide a seamless experience for both developers and end-users. By leveraging its props, such as onWalletSelection, developers can build robust and helpful user flows for their Sui dApps.