Arweave-Wallet-Kit

A step-by-step guide for implementing Beacon Wallet to your AO application using Arweave-Wallet-Kit.

Arweave-Wallet-Kit Setup

npm install @arweave-wallet-kit/core @arweave-wallet-kit/react @arweave-wallet-kit/styles

the implement Arweave-Wallet-Kit as outlined below.

import { ArweaveWalletKit } from "@arweave-wallet-kit/react";

function App () {
    return (
      <ArweaveWalletKit
          config={{
            permissions: [
              "ACCESS_ADDRESS",
              "ACCESS_PUBLIC_KEY",
              "SIGN_TRANSACTION",
              "DISPATCH",
            ],
            ensurePermissions: true,
            strategies: [
            //... other strategies
            ],
          }}
        >
          <YourApp />
      </ArweaveWalletKit>
    )
}

Adding the AO-Sync strategy

Install package

npm install @vela-ventures/aosync-strategy

Providing AO-Sync to Wallet Kit

import AoSyncStrategy from "@vela-ventures/aosync-strategy";

strategies: [
    new AoSyncStrategy()
    //... other strategies
],

Usage

Connect with Beacon option will now be displayed as an option in the Arweave-Wallet-Kit modal.