Skip to content

Connect an æpp to a wallet

This guide describes the 4 steps that are necessary to connect your application to a wallet using the RPC API.

Prerequisites

1. Specify imports and constants

examples/browser/aepp/src/StoreAeSdkPlugin.js
import { AeSdkAepp, Node } from '@aeternity/aepp-sdk';

const TESTNET_NODE_URL = 'https://testnet.aeternity.io';
const MAINNET_NODE_URL = 'https://mainnet.aeternity.io';
const COMPILER_URL = 'https://compiler.aepps.com';
View at GitHub

2. Initialize the AeSdkAepp class

examples/browser/aepp/src/StoreAeSdkPlugin.js
        aeSdk = new AeSdkAepp({
          name: 'Simple æpp',
          nodes: [
            { name: 'testnet', instance: new Node(TESTNET_NODE_URL) },
            { name: 'mainnet', instance: new Node(MAINNET_NODE_URL) },
          ],
          compilerUrl: COMPILER_URL,
          onNetworkChange: async ({ networkId }) => {
            const [{ name }] = (await aeSdk.getNodesInPool())
              .filter((node) => node.nodeNetworkId === networkId);
            aeSdk.selectNode(name);
            commit('setNetworkId', networkId);
          },
          onAddressChange: ({ current }) => commit('setAddress', Object.keys(current)[0]),
          onDisconnect: () => alert('Aepp is disconnected'),
        });
View at GitHub

3. Scan for wallets and connect to a wallet

examples/browser/aepp/src/Connect.vue
    async scanForWallets () {
      return new Promise((resolve) => {
        const handleWallets = async ({ wallets, newWallet }) => {
          newWallet = newWallet || Object.values(wallets)[0]
          if (confirm(`Do you want to connect to wallet ${newWallet.info.name} with id ${newWallet.info.id}`)) {
            console.log('newWallet', newWallet)
            stopScan()

            this.walletInfo = await this.aeSdk.connectToWallet(newWallet.getConnection())
            this.walletConnected = true
            const { address: { current } } = await this.aeSdk.subscribeAddress('subscribe', 'connected')
            this.$store.commit('aeSdk/setAddress', Object.keys(current)[0])
            resolve()
          }
        }

        const scannerConnection = new BrowserWindowMessageConnection()
        const stopScan = walletDetector(scannerConnection, handleWallets)
      })
    },
View at GitHub

Alternatively, aepp can request wallet to share node url it connected to. If agreed, then aepp can connect to the wallet's node.

await this.aeSdk.connectToWallet(
  wallet.getConnection(),
  { connectNode: true, name: 'wallet-node', select: true },
);

It can be used to

  • improve responsiveness by connecting to the exact node that wallet uses;
  • allow to connect aepps to private/development networks without changing their configuration;
  • simplify configuration on aepp side.

Note:

  • The steps above are snippets taken from the full implementation of the Simple æpp