Standalone integration

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

Installing AO-Sync

npm install @vela-ventures/aosync-sdk-react

Setup

Wrap your application with the AOSyncProvider.

import { AOSyncProvider } from "@vela-ventures/aosync-sdk-react";

function App () {
    return (
      <AOSyncProvider
        gatewayConfig={{
          host: "arweave.net",
          port: 443,
          protocol: "https",
        }}
        appInfo={{ name: "App name" }}
        muUrl="https://mu.ao-testnet.xyz"
      >
        <YourApp />
      </AOSyncProvider>
    )
}

Usage

You can access all the function inside our SDK via the useWallet hook.

Connecting a wallet

When calling the connect method users will be presented with a QR code, that when scanned by the Beacon app creates a connection between your web app and Beacon for secure message signing.

import { useWallet } from '@vela-ventures/aosync-sdk-react'

function ConnectWalletDemo() {
    const { isConnected, connect, disconnect } = useWallet()

    return isConnected ? (
        <Button onClick={disconnect}>Disconnect Beacon</Button>
    ) : (
        <Button onClick={connect}>Connect Beacon</Button>
    )
}

Connect modal

While connecting users will be presented with the following:

Retrieving wallet details

Once connected, you can use the below methods to retrieve info about the connected wallet.

getAddress

returns address of currently connected wallet.

const { getAddress } = useWallet()
const connectedAddress = await getAddress()

getAllAddresses

Returns list of all addresses present in the users Beacon app.

const { getAllAddresses } = useWallet()
const addresses = await getAllAddresses()

Sending AR

You can use the sendAR method in order to create an Arweave transfer.

const { sendAR } = useWallet()
const addresses = await sendAR("recipient-address", "1000000"); // 1 AR (in winstons)

signAOMessage

Signs an ANS-104 item and submits the signed transaction to the AO network. When called the user will be promoted to approve the transaction inside the Beacon mobile app.

const { signAOMessage } = useWallet()
await signAOMessage({
    target: "process-id",
    tags: [
        {
            name: "Action",
            value: "Your-Action"
        },
        ...
    ],
    data: "data-item"
})