Getting Started with Svelte

Svelte frontend components for wallet connections.

Mesh provide a collection of useful UI components, so you can easily include web3 functionality and convenient utilities for your application.

Install

To start, install:

Next, add the Mesh CSS to your application, doing so will apply the default styles to the components. You can add this in +layout.svelte.

Connect Wallet

In order for dApps to communicate with the user's wallet, we need a way to connect to their wallet.

Add this CardanoWallet to allow the user to select a wallet to connect to your dApp. After the wallet is connected, see Browser Wallet for a list of CIP-30 APIs.

The signature for the CardanoWallet component is as follows:

Customization

For dark mode style, add isDark.

For a custom label, add the label prop.

The customization is limited. For more customization, you can easily build your own wallet connection component. You may also take reference from this component.

onConnected

If you want to run a function after the wallet is connected, you can add the onConnected prop.

The above code will log "Hello, World!" to the console when the wallet is connected.

Connect Wallet Component

Connect to user's wallet to interact with dApp

Get Wallet State

Provide information on the current wallet's state, and functions for connecting and disconnecting user wallet.

wallet is a Browser Wallet instance, which expose all CIP wallets functions from getting assets to signing tranasction.

connected, a boolean, true if user's wallet is connected.

name, a string, the name of the connect wallet.

connecting, a boolean, true if the wallet is connecting and initializing.

connect(walletName: string), a function, provide the wallet name to connect wallet. Retrive a list of available wallets with useWalletList().

disconnect(), a function, to disconnect the connected wallet.

Wallet State

Get the current wallet's state