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

Public ADA Price

Holder $WORK Price

Similar Courses

Contact Us

Navigation