Wallet-as-a-ServiceUsage

Usage

There are two ways to use the Mesh wallet as a service:

  1. Using @meshsdk/web3-sdk for any TypeScript/JavaScript applications.
  2. Using @meshsdk/react for React/NextJS and integrating with a wallet connect UI.

Before you begin, you need to create a project on Mesh Web3 Services. To do so follow these steps:

  1. Create an account by logging in with one of the supported providers.
  2. From the dashboard, create a new project.
  3. Copy the Project ID from the project settings.

Using @meshsdk/web3-sdk

1. Install packages

Install the latest version of Web3 Services SDK and Mesh Provider package with npm:

npm install @meshsdk/web3-sdk @meshsdk/provider

2. Initialize wallet

Import the required packages and initialize the wallet with the network ID, fetcher, submitter, and project ID.

import { InitWeb3WalletOptions, Web3Wallet } from "@meshsdk/web3-sdk";
import { BlockfrostProvider } from "@meshsdk/provider";
 
const provider = new BlockfrostProvider('API-KEY');
 
const _options: InitWeb3WalletOptions = {
  networkId: 0, // 0: preprod, 1: mainnet
  fetcher: provider,
  submitter: provider,
  projectId: "11111111-2222-3333-YOUR-PROJECTID",
};
 
const wallet = await Web3Wallet.enable(_options);

Using @meshsdk/react

For React/NextJS applications, using @meshsdk/react provides you the user interface to connect wallet and hooks to query wallet’s data.

1. Install packages

Install the latest version of Mesh with npm:

npm install @meshsdk/core @meshsdk/react

2. Use CardanoWallet

CardanoWallet component provides a user interface to connect wallet. You need to provide the web3Services object with the network ID, fetcher, submitter, and project ID.

In this code snippet we used BlockfrostProvider, however you can use any other support providers.

import { CardanoWallet, useWallet } from "@meshsdk/react";
import { BlockfrostProvider } from "@meshsdk/core";
 
const provider = new BlockfrostProvider('API-KEY');
 
export default function Page() {  
  const { wallet } = useWallet();
 
  return (
    <CardanoWallet
      web3Services={{
        networkId: 0, // 0: preprod, 1: mainnet
        fetcher: provider,
        submitter: provider,
        projectId: "11111111-2222-3333-YOUR-PROJECTID",
      }}
    />;
  );
}

Wallet API

All wallet endpoints can be found in Mesh SDK documentation. Here are a few.

Get change address

Get a change address for the wallet.

const changeAddress = await wallet.getChangeAddress();

Get wallet’s UTXO

Get all UTXOs for the wallet.

const utxos = await wallet.getUtxos();

Sign transaction

const signedTx = await wallet.signTx(tx, partialSign?);

Sign data

const signature = await wallet.signData(data);

Submit transaction

const txHash = await wallet.submitTx(signedTx);

Examples

Create, sign, and submit a transaction

Here is an example of how to create a transaction, sign it, and submit it to the network.

import { Web3Sdk } from "@meshsdk/web3-sdk";
import { BlockfrostProvider, MeshTxBuilder } from "@meshsdk/core";
 
const provider = new BlockfrostProvider("API-KEY");
 
const _options: InitWeb3WalletOptions = {
  networkId: 0, // 0: preprod, 1: mainnet
  fetcher: provider,
  submitter: provider,
  projectId: "11111111-2222-3333-YOUR-PROJECTID",
};
 
const wallet = await Web3Wallet.enable(_options);
 
const tx = new MeshTxBuilder({
  fetcher: provider,
});
 
tx.txOut("addr_test1.....abc123", [{ unit: "lovelace", quantity: "1000000" }])
  .changeAddress(await wallet.getChangeAddress())
  .selectUtxosFrom(await wallet.getUtxos());
 
const unsignedTx = await tx.complete();
const signedTx = await wallet.signTx(unsignedTx);
const txHash = await wallet.submitTx(signedTx);
User InterfaceOverview