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

• Install Superhero Wallet extension for simplicity of example. You can build your own wallet in the next example

1. Specify imports and constants

https://github.com/aeternity/aepp-sdk-js/blob/f60d1b8a1124b32781769342e4941c8dacf6ad53/examples/browser/aepp/src/StoreAeSdkPlugin.js#L1-L5

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';

2. Initialize the AeSdkAepp class

https://github.com/aeternity/aepp-sdk-js/blob/f60d1b8a1124b32781769342e4941c8dacf6ad53/examples/browser/aepp/src/StoreAeSdkPlugin.js#L34-L49

        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'),
        });

3. Scan for wallets and connect to a wallet

https://github.com/aeternity/aepp-sdk-js/blob/f60d1b8a1124b32781769342e4941c8dacf6ad53/examples/browser/aepp/src/Connect.vue#L66-L85

    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)
      })
    },

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