## **INTRODUCTION**

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.

INTRODUCTION

## **SETUP**

The fastest way to get started a new project with Svelte is to use the Mesh-CLI, which will scaffold a new project for you. To do this, run the following:

`npx meshjs your-app-name`

During the installation process, you will be asked to choose a template. Choose the Svelte template. This will scaffold a new Svelte project with Mesh pre-installed.

To manually, install the Mesh Svelte package, run the following:

`npm install @meshsdk/svelte`

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`**.

```
<script lang="ts">
	import '@meshsdk/svelte/styles.css';
	let { children } = $props();
</script>

{@render children()}
```



SETUP

## **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](https://meshjs.dev/apis/wallets/browserwallet)** Wallet for a list of CIP-30 APIs.

The signature for the CardanoWallet component is as follows:

```
{
  label?: string;
  onConnected?: Function;
  isDark?: boolean;
}
```

**Customization**

For dark mode style, add isDark.

`<CardanoWallet isDark={true} />`

For a custom label, add the label prop.

`<CardanoWallet label={"Connect a Wallet"} />`

The customization is limited. For more customization, you can easily build your own wallet connection component. You may also take reference from **[this component](https://github.com/MeshJS/mesh/tree/main/packages/mesh-svelte/src/lib/cardano-wallet)**.

**onConnected**

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

```
export default function Page() {

  function afterConnectedWallet() {
    // do something
  }

  return (
    <>
      <CardanoWallet onConnected={afterConnectedWallet} />
    </>
  );
}
```

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



CONNECT WALLET

## **GET WALLET STATE**

Obtain information on the current wallet's state, all fields on the **`BrowserWalletState`** JavaScript object are Svelte 5 runes, meaning when using the accessor, these values are reactive.

```
<script lang="ts">
  import { BrowserWalletState } from "@meshsdk/svelte";
</script>
```

**`wallet`** is a **[Browser Wallet](https://meshjs.dev/apis/wallets/browserwallet)** 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.



**Wallet State**

Get the current wallet's state


```
<script lang="ts">
  import { CardanoWallet, BrowserWalletState } from "@meshsdk/svelte";

  // Will run every time the underlying BrowserWallet instance changes.  $effect(() => {

    if (BrowserWalletState.wallet) {
      BrowserWalletState.wallet.getChangeAddress().then(address => {
        console.log(address);
      });
    }
  });
</script>

<div>
  <CardanoWallet />
</div>
```

GET WALLET STATE

GETTING STARTED WITH SVELTE

## **INTRODUCTION**

UI components to speed up your app development.

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

## **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:

```
{
  label?: string;
  onConnected?: Function;
  isDark?: boolean;
}
```

**Customization**

For dark mode style, add isDark.

`<CardanoWallet isDark={true} />`

For a custom label, add the label prop.

`<CardanoWallet label={"Connect a Wallet"} />`

The customization is limited. For more customization, you can easily build your own wallet connection component. You may also take reference from **[this component](https://github.com/MeshJS/mesh/tree/main/packages/mesh-svelte/src/lib/cardano-wallet)**.

**onConnected**

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

```
export default function Page() {

  function afterConnectedWallet() {
    // do something
  }

  return (
    <>
      <CardanoWallet onConnected={afterConnectedWallet} />
    </>
  );
}
```

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


```
<script lang="ts">
  import { CardanoWallet } from "@meshsdk/svelte";
</script>

<main>
  <CardanoWallet />
</main>
```

UI COMPONENTS

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.

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

Getting Started with Svelte meshjs.dev

Course Details

Level

Ratings

Modules

Lessons

Holder $WORK Price

Contact Us

Documentation

Navigation