connect-aepp-to-wallet.md

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

aepp-sdk-js/examples/browser/aepp/src/StoreAeSdkPlugin.js

Lines 1 to 5 in f60d1b8

	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

aepp-sdk-js/examples/browser/aepp/src/StoreAeSdkPlugin.js

Lines 34 to 49 in f60d1b8

	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

aepp-sdk-js/examples/browser/aepp/src/Connect.vue

Lines 66 to 85 in f60d1b8

	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