Try Svelteth live demo at: https://svelteth-demo.vercel.app/
Svelteth is an open-source library designed to simplify and amplify Web3 adoption in Svelte 5 projects. By leveraging Svelte's reactivity, Svelteth makes it easy to connect, manage, and interact with Ethereum wallets and providers in your Svelte applications.
- 🔗 Easy Wallet Connection: Seamlessly connect to Ethereum wallets using EIP-6963.
- ⚡ Reactive State: All wallet and provider states are fully reactive, thanks to Svelte 5.
- 🦊 Multi-Wallet Support: Detect and connect to multiple wallet extensions.
- 🛡️ TypeScript Support: Fully typed for safety and autocompletion.
npm install sveltethUse the reactive wallet state and actions directly:
import {
availableWallets,
wallet,
connectWallet,
disconnectWallet,
listenToProviderEvents,
isConnecting,
isSearching,
signMessage,
sendTransaction,
// Multi-wallet support
wallets,
activeWalletId,
getConnectedWalletIds,
getWallet,
switchWallet,
getAllWallets
} from 'svelteth';To make sure Svelteth can detect available wallets via EIP-6963,
you need to call listenToProviderEvents() inside the Svelte onMount lifecycle:
<script lang="ts">
import { onMount } from 'svelte';
import { listenToProviderEvents } from 'svelteth';
onMount(() => {
listenToProviderEvents();
});
</script>Svelteth supports connecting and managing multiple wallets simultaneously. This is useful for:
- Testing transactions between different accounts
- Managing multiple identities
- Switching between wallets without disconnecting
import {
wallets, // Record of all connected wallets
activeWalletId, // Currently active wallet ID
wallet, // Get the active wallet
getWallet, // Get a specific wallet by ID
switchWallet, // Switch to a different wallet
getAllWallets, // Get array of all connected wallets
getConnectedWalletIds // Get list of wallet IDs
} from 'svelteth';
// Connect multiple wallets
availableWallets.list.forEach(w => connectWallet(w));
// Get all connected wallets
const allWallets = getAllWallets();
// Switch active wallet
switchWallet('com.metamask'); // Use wallet's RDNS as ID
// Get specific wallet
const specificWallet = getWallet('com.coinbase.wallet');
// Access active wallet (reactive)
const activeWallet = wallet();
// Disconnect specific wallet or all
disconnectWallet('com.metamask'); // Disconnect one
disconnectWallet('all'); // Disconnect allEach wallet in the wallets object contains:
info: Wallet metadata (name, icon, rdns, uuid)provider: EIP-1193 provider instanceaddresses: Array of wallet addresseschainId: Current chain IDbalance: Current balance in weigas: EIP-1559 gas estimates (baseFee and priority fees)isConnected: Connection statuserror: Error details, if any
Want to see your chain supported in Svelteth? You can easily add it by editing the chain file:
- Open
src/lib/chain/index.ts - Add a new entry to the
CHAINconstant with your chain's ID, name, and logo.
12345 :{
name: 'Your Chain Name',
logo: 'URL to your chain logo'
},Feel free to contribute with a pull request on GitHub to make it available for everyone!
MIT
Made with ❤️ for the Svelte and Web3 communities.