Intro - Wander Connect

A simplified, lightweight, customizable embedded wallet for Arweave and AO that bridges the gap between web2 and web3, helping non-crypto native users onboard into web3 easily!

• 🪪 Familiar Authentication: Users sign up/in with their favorite and familiar authentication method: email and password, passkeys and social providers (Facebook, Twitter/X, Apple).

• 🔑 No Seed Phrases: 5 clicks is all it takes for your users to get to their fully functional wallet. Managing seed phrases and backups is an optional step that can be taken care of later.

• 📱 Simplified UI: De-clutter UI with all the functionality your users need, but the same functionality as the mighty Wander Browser Extension.

• ✨ Refined Experience: Light and dark themes, and responsive out-of-the-box. A wallet that works on any device and platform, with no download needed.

And offering a great developer experience too:

• 🔌 Easy Integration: Easy to use SDK to embed Wander Connect wallet in your dApp.

• 🎨 Customizable UI: Extensive customization and layout options. A white-label wallet that can match your brand & site/app's look and feel.

• 🔒 Secure: User keys are secured using advanced cryptography, such as AES and Shamir Secret Sharing. Neither we nor your app will ever get access to users' private keys.

Installation

npm install @wanderapp/connect

yarn add @wanderapp/connect

pnpm add @wanderapp/connect

bun add @wanderapp/connect

Basic Usage

To use the Wander Connect embedded wallet, you first need to instante it and listen for the arweaveWalletLoaded event, which signals that the wallet API is ready:

import { WanderConnect } from "@wanderapp/connect";

// Initialize Wander Connect:
const wander = new WanderConnect({
  clientId: "FREE_TRIAL",
});

// Wait for the wallet API to be injected and for
// the user to authenticate:
window.addEventListener("arweaveWalletLoaded", async (e) => {
  try {  
    const { permissions = [] } = e.detail || {};
    
    if (permissions.length === 0) {
      // Your app is not connected to the wallet yet, so
      // you first need to call `connect()`:
      await window.arweaveWallet.connect([...]);
    }
    
    // Create Arweave transaction:
    const tx = await arweave.createTransaction({ ... });
  
    // Sign transaction:
    await arweave.transactions.sign(tx);
  
    // TODO: Handle (e.g. post) signed transaction.
  } catch (err) {
    alert(`Error: ${ err.message }`);
  }
});

After this, the default Wander Connect button will appear fixed in the bottom-right corner of the screen:

Clicking it will open a popup where your users can authenticate:

And, once authenticated, the default wallet UI will appear, again, fixed in the bottom-right corner of the screen:

Once the user authenticates, an arweaveWalletLoaded event will be dispatched. You can then request permissions using connect(). This will prompt your users to connect their wallet to your dApp:

Depending on what type of access the user granted, they'll be prompted again to sign the transaction:

Additional features and options, only available for Wander Connect (not available for the Wander Browser Extension), are available through the SDK options, methods and callbacks:

Options

Options

Event Callbacks

Event Callbacks

Methods

Methods

React

When using React, the example above stays mostly the same. The main change needed is to add a useEffect block to run it, and, optionally, a Ref to keep a reference to theWanderConnect instance you've just created:;

import { useRef, useState } from "react";
import { WanderConnect } from "@wanderapp/connect";

export function MyApp() {
  const wanderRef = useRef(null);

  useEffect(() => {
    // Initialize Wander Connect:
    const wander = new WanderConnect({
      clientId: "FREE_TRIAL",
    });
    
    // Keep a reference to the instance:
    wanderRef.current = wander;
    
    const handleWalletLoaded = async (e) => {
      try {  
        const { permissions = [] } = e.detail || {};
        
        if (permissions.length === 0) {
          // Your app is not connected to the wallet yet, so
          // you first need to call `connect()`:
          await window.arweaveWallet.connect([...]);
        }
        
        // Create Arweave transaction:
        const tx = await arweave.createTransaction({ ... });
      
        // Sign transaction:
        await arweave.transactions.sign(tx);
      
        // TODO: Handle (e.g. post) signed transaction.
      } catch (err) {
        alert(`Error: ${ err.message }`);
      }
    }
    
    // Wait for the wallet API to be injected and for
    // the user to authenticate:
    window.addEventListener("arweaveWalletLoaded", handleWalletLoaded);

    // Clean up on unmount:
    return () => {
      wander?.destroy();
      wanderRef.current = null;
      window.removeEventListener("arweaveWalletLoaded", handleWalletLoaded);
    };
  }, []);

  return ...;
}

Next.js

To use Wander Connect on a Next.js site, you would follow the same steps describe above in the React section. However, if you are using the App Router, you need to make sure you load Wander Connect in a client component.

Customization

Wander Connect supports 4 types of layout plus light and dark themes, which should be enough for most projects. If you need to better match your brand and app look and feel, Wander Connect also includes various advanced customization options, but if that's still not enough, you can always opt-out of the default UI and provide a custom one:

Architecture & Security

Wander Connect uses Shamir Secret Sharing to split users' private keys in 2 shares, one stored in the users' device and one stored in our servers.

In order for users to use one of their private keys, they need to authenticate and prove they have the corresponding (device) share, without actually transferring it to our servers (so that users' private keys never reach our servers).

Once they do that, the server will send back its share, and the Wander Connect app running in the user's device will reconstruct the private key.

We use Privy's shamir-secret-sharing package, which has been audited and is actively maintained.

Browser Support

The SDK supports all modern browsers (Chrome, Firefox, Safari, Edge, etc).