Browser Quickstart

This guide will walk you through creating a simple web application that interacts with the Sonr network directly from the browser. We will use the Sonr JavaScript SDK to create a new user identity, claim a Vault, and send a transaction.

Prerequisites

A local Sonr network running. See the Installation Guide for instructions.
A modern web browser with WebAuthn support (Chrome, Firefox, Safari, Edge).

1. Project Setup

Create an HTML File

Create a new index.html file and add the following basic structure:

<!DOCTYPE html>
<html>
  <head>
    <title>Sonr Browser Quickstart</title>
    <script type="module" src="app.js"></script>
  </head>
  <body>
    <h1>Sonr Browser Quickstart</h1>
    <button id="create-identity">Create Identity</button>
    <div id="output"></div>
  </body>
</html>

Create a JavaScript File

Create a new app.js file in the same directory. This is where we will write our application logic.

Install the Sonr SDK

For this quickstart, we will use the Sonr SDK from a CDN. Add the following script tag to the <head> of your index.html file:

<script type="module">
  import { Sonr, WebAuthn } from "https://cdn.jsdelivr.net/npm/@sonr/sdk";
  window.Sonr = Sonr;
  window.WebAuthn = WebAuthn;
</script>

2. Creating an Identity

Now, let's add the logic to create a new user identity and claim a Vault.

Add Event Listener

In app.js, add an event listener to the "Create Identity" button:

document
  .getElementById("create-identity")
  .addEventListener("click", async () => {
    const output = document.getElementById("output");
    output.innerHTML = "Creating identity...";

    try {
      // Code to create identity will go here
    } catch (error) {
      output.innerHTML = `Error: ${error.message}`;
    }
  });

Implement Identity Creation

Inside the event listener, use the WebAuthn.createCredential method to create a new WebAuthn credential and the Sonr.claimVault method to claim a new Vault on the network.

// Inside the try block
const credential = await WebAuthn.createCredential({
  rp: { name: "Sonr Quickstart" },
  user: {
    id: new Uint8Array(16), // Should be a unique user ID
    name: "user@example.com",
    displayName: "Test User",
  },
});

output.innerHTML = `Credential created: ${credential.id}`;

const sonr = new Sonr({ httpUrl: "http://localhost:1317" });
const vault = await sonr.claimVault(credential);

output.innerHTML = `Vault claimed! DID: ${vault.did}`;

In a real application, the user ID should be a unique and stable identifier for the user, not a random value.

3. Running the Application

To run the application, you need a simple web server. You can use the http-server package for this.

# Install http-server
npm install -g http-server

# Start the server
http-server

Now, open your browser and navigate to http://localhost:8080. When you click the "Create Identity" button, your browser will prompt you to create a new passkey using your device's biometrics or a security key.

4. Sending a Transaction

Once you have a Vault, you can use it to send transactions.

Add a Send Button

Add a new button to your index.html file:

<button id="send-transaction" disabled>Send Transaction</button>

Implement Transaction Sending

In app.js, add an event listener to the new button. This will use the sonr.send method to send a transaction.

let vaultInstance;

// After claiming the vault...
vaultInstance = vault;
document.getElementById("send-transaction").disabled = false;

document
  .getElementById("send-transaction")
  .addEventListener("click", async () => {
    const output = document.getElementById("output");
    output.innerHTML = "Sending transaction...";

    try {
      const result = await vaultInstance.send({
        to: "snr1..._recipient_address_...",
        amount: "1000000usnr", // 1 SNR
      });

      output.innerHTML = `Transaction successful! TxHash: ${result.txhash}`;
    } catch (error) {
      output.innerHTML = `Error: ${error.message}`;
    }
  });

Next Steps

Congratulations! You have successfully created a web application that interacts with the Sonr network. From here, you can explore more advanced features:

Service Registration: Register your application as a trusted service on the network.
UCAN Authorization: Request and manage user permissions for your application.
Cross-Chain Operations: Interact with other blockchains through IBC.

Browser Quickstart

On this page