Comment on page

Your First dApp

This tutorial shows you how to create a basic React dApp and use the Vault+ SDK to connect with the Vault+.

What you will learn in this tutorial:

  1. 1.
    Create a React dApp & Install Dependencies
  2. 2.
    Integrate your dApp with Vault+
  3. 3.
    Read credential and schema data from Vault+

Create a React dApp & Install Dependencies

We follow the instructions here for setting up a React project.
  1. 1.
    Create a React project
npx create-react-app your-first-dapp-react
cd your-first-dapp-react
  1. 2.
    Install the required dependencies
@serv-official/vault-sdk - For connecting and communicating with Vault+
npm install @serv-official/vault-sdk

Integrate your dApp with Vault+

Next we check whether or not the user currently has Vault+ installed if they do then we try and establish a connection and read the account's public blockchain address.
import Serv from "@serv-official/vault-sdk";
const [isReady, setIsReady] = useState();
useEffect(() => {
}, []);
const connectVault = async () => {
const isReady = await Serv.isReady();
if (!isReady) {
} else {
throw new Error(
"Please install the Vault+ extension to use this awesome dApp!"
const Vault = await Serv.connectVault();
if (!Vault) {
throw new Error("Vault+ not connected.");
if (Vault.address.length > 0) {
// Application logic starts here
} else {
throw new Error("Did not receive public key.");
Now that your dApp is connected to Vault+ you can add any of the more complex code examples or Vault+ and Blockchain SDK functions to your dApp.

Check out Mantis 👇️👇️👇️

After connecting to Vault+ feel free to call any of the functions listed in the Vault+ SDK documentation to create whatever flow is necessary for your dApp.