From c3570ac2fbe27db8e16b9690b0a4107159bdb20d Mon Sep 17 00:00:00 2001
From: Denis Davidyuk <denis_davidyuk@hotmail.com>
Date: Sat, 22 Jul 2023 20:22:34 +0600
Subject: [PATCH 1/3] feat(aepp): extract class to connect to wallet from
 AeSdkAepp

---
 examples/browser/aepp/src/Connect.vue         |  37 ++++--
 examples/browser/aepp/src/store.js            |  14 +--
 package-lock.json                             |   6 +
 package.json                                  |   1 +
 src/AeSdkAepp.ts                              |   1 +
 .../WalletConnectorFrame.ts                   |  41 ++++++
 .../WalletConnectorFrameBase.ts               | 119 ++++++++++++++++++
 .../WalletConnectorFrameWithNode.ts           |  45 +++++++
 src/index-browser.ts                          |   2 +
 9 files changed, 245 insertions(+), 21 deletions(-)
 create mode 100644 src/aepp-wallet-communication/WalletConnectorFrame.ts
 create mode 100644 src/aepp-wallet-communication/WalletConnectorFrameBase.ts
 create mode 100644 src/aepp-wallet-communication/WalletConnectorFrameWithNode.ts

diff --git a/examples/browser/aepp/src/Connect.vue b/examples/browser/aepp/src/Connect.vue
index 3d335e6292..4ca9b09dfb 100644
--- a/examples/browser/aepp/src/Connect.vue
+++ b/examples/browser/aepp/src/Connect.vue
@@ -58,6 +58,7 @@
 <script>
 import {
   walletDetector, BrowserWindowMessageConnection, RpcConnectionDenyError, RpcRejectedByUserError,
+  WalletConnectorFrame,
 } from '@aeternity/aepp-sdk';
 import { mapState } from 'vuex';
 
@@ -93,6 +94,7 @@ export default {
             stopDetection();
             resolve(newWallet.getConnection());
             this.cancelWalletDetection = null;
+            this.walletInfo = newWallet.info;
           }
         });
         this.cancelWalletDetection = () => {
@@ -103,25 +105,40 @@ export default {
         };
       });
     },
+    async setNode(networkId) {
+      const [{ name }] = (await this.aeSdk.getNodesInPool())
+        .filter((node) => node.nodeNetworkId === networkId);
+      this.aeSdk.selectNode(name);
+      this.$store.commit('setNetworkId', networkId);
+    },
+    setAccount(account) {
+      if (Object.keys(this.aeSdk.accounts).length) this.aeSdk.removeAccount(this.aeSdk.address);
+      this.aeSdk.addAccount(account, { select: true });
+      this.$store.commit('setAddress', account.address);
+    },
     async connect() {
       this.walletConnecting = true;
-      this.aeSdk.onDisconnect = () => {
-        this.walletConnected = false;
-        this.walletInfo = null;
-        this.$store.commit('setAddress', undefined);
-        if (this.reverseIframe) this.reverseIframe.remove();
-      };
       try {
         const connection = await this.detectWallets();
         try {
-          this.walletInfo = await this.aeSdk.connectToWallet(connection);
+          this.walletConnector = await WalletConnectorFrame.connect('Simple æpp', connection);
         } catch (error) {
           if (error instanceof RpcConnectionDenyError) connection.disconnect();
           throw error;
         }
+        this.walletConnector.on('disconnect', () => {
+          this.walletConnected = false;
+          this.walletInfo = null;
+          this.$store.commit('setAddress', undefined);
+          if (this.reverseIframe) this.reverseIframe.remove();
+        });
         this.walletConnected = true;
-        const { address: { current } } = await this.aeSdk.subscribeAddress('subscribe', 'connected');
-        this.$store.commit('setAddress', Object.keys(current)[0]);
+
+        this.setNode(this.walletConnector.networkId);
+        this.walletConnector.on('networkIdChange', (networkId) => this.setNode(networkId));
+
+        this.walletConnector.on('accountsChange', (accounts) => this.setAccount(accounts[0]));
+        await this.walletConnector.subscribeAccounts('subscribe', 'current');
       } catch (error) {
         if (
           error.message === 'Wallet detection cancelled'
@@ -134,7 +151,7 @@ export default {
       }
     },
     disconnect() {
-      this.aeSdk.disconnectWallet();
+      this.walletConnector.disconnect();
     },
   },
 };
diff --git a/examples/browser/aepp/src/store.js b/examples/browser/aepp/src/store.js
index 5205b8fd69..cb7a1297e9 100644
--- a/examples/browser/aepp/src/store.js
+++ b/examples/browser/aepp/src/store.js
@@ -1,6 +1,6 @@
 import { shallowReactive } from 'vue';
 import { createStore } from 'vuex';
-import { AeSdkAepp, Node, CompilerHttp } from '@aeternity/aepp-sdk';
+import { AeSdk, Node, CompilerHttp } from '@aeternity/aepp-sdk';
 
 const TESTNET_NODE_URL = 'https://testnet.aeternity.io';
 const MAINNET_NODE_URL = 'https://mainnet.aeternity.io';
@@ -10,21 +10,13 @@ const store = createStore({
   state: {
     address: undefined,
     networkId: undefined,
-    // AeSdkAepp instance can't be in deep reactive https://github.com/aeternity/aepp-sdk-js/blob/develop/docs/README.md#vue3
-    aeSdk: shallowReactive(new AeSdkAepp({
-      name: 'Simple æpp',
+    // AeSdk instance can't be in deep reactive https://github.com/aeternity/aepp-sdk-js/blob/develop/docs/README.md#vue3
+    aeSdk: shallowReactive(new AeSdk({
       nodes: [
         { name: 'testnet', instance: new Node(TESTNET_NODE_URL) },
         { name: 'mainnet', instance: new Node(MAINNET_NODE_URL) },
       ],
       onCompiler: new CompilerHttp(COMPILER_URL),
-      async onNetworkChange({ networkId }) {
-        const [{ name }] = (await this.getNodesInPool())
-          .filter((node) => node.nodeNetworkId === networkId);
-        this.selectNode(name);
-        store.commit('setNetworkId', networkId);
-      },
-      onAddressChange: ({ current }) => store.commit('setAddress', Object.keys(current)[0]),
     })),
   },
   mutations: {
diff --git a/package-lock.json b/package-lock.json
index e74fad9953..75839b30ec 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,6 +31,7 @@
         "bs58": "^5.0.0",
         "buffer": "^6.0.3",
         "canonicalize": "^2.0.0",
+        "eventemitter3": "^5.0.1",
         "events": "^3.3.0",
         "isomorphic-ws": "^5.0.0",
         "json-bigint": "^1.0.0",
@@ -6657,6 +6658,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/eventemitter3": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
+      "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA=="
+    },
     "node_modules/events": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
diff --git a/package.json b/package.json
index c9433d5c4e..82f76b6ac0 100644
--- a/package.json
+++ b/package.json
@@ -97,6 +97,7 @@
     "bs58": "^5.0.0",
     "buffer": "^6.0.3",
     "canonicalize": "^2.0.0",
+    "eventemitter3": "^5.0.1",
     "events": "^3.3.0",
     "isomorphic-ws": "^5.0.0",
     "json-bigint": "^1.0.0",
diff --git a/src/AeSdkAepp.ts b/src/AeSdkAepp.ts
index e04d26eda1..066431b9e0 100644
--- a/src/AeSdkAepp.ts
+++ b/src/AeSdkAepp.ts
@@ -21,6 +21,7 @@ import BrowserConnection from './aepp-wallet-communication/connection/Browser';
 /**
  * RPC handler for AEPP side
  * Contain functionality for wallet interaction and connect it to sdk
+ * @deprecated use WalletConnectorFrame instead
  * @category aepp wallet communication
  */
 export default class AeSdkAepp extends AeSdkBase {
diff --git a/src/aepp-wallet-communication/WalletConnectorFrame.ts b/src/aepp-wallet-communication/WalletConnectorFrame.ts
new file mode 100644
index 0000000000..582725e914
--- /dev/null
+++ b/src/aepp-wallet-communication/WalletConnectorFrame.ts
@@ -0,0 +1,41 @@
+import { Network } from './rpc/types';
+import BrowserConnection from './connection/Browser';
+import WalletConnectorFrameBase from './WalletConnectorFrameBase';
+
+interface EventsNetworkId {
+  networkIdChange: (networkId: string) => void;
+}
+
+/**
+ * Connect to wallet as iframe/web-extension
+ * @category aepp wallet communication
+ */
+export default class WalletConnectorFrame extends WalletConnectorFrameBase<EventsNetworkId> {
+  #networkId = '';
+
+  /**
+   * The last network id reported by wallet
+   */
+  get networkId(): string {
+    return this.#networkId;
+  }
+
+  protected override _updateNetwork(params: Network): void {
+    this.#networkId = params.networkId;
+    this.emit('networkIdChange', this.#networkId);
+  }
+
+  /**
+   * Connect to wallet
+   * @param name - Aepp name
+   * @param connection - Wallet connection object
+   */
+  static async connect(
+    name: string,
+    connection: BrowserConnection,
+  ): Promise<WalletConnectorFrame> {
+    const connector = new WalletConnectorFrame();
+    await WalletConnectorFrame._connect(name, connection, connector, false);
+    return connector;
+  }
+}
diff --git a/src/aepp-wallet-communication/WalletConnectorFrameBase.ts b/src/aepp-wallet-communication/WalletConnectorFrameBase.ts
new file mode 100644
index 0000000000..350b77aaf2
--- /dev/null
+++ b/src/aepp-wallet-communication/WalletConnectorFrameBase.ts
@@ -0,0 +1,119 @@
+import EventEmitter from 'eventemitter3';
+import AccountRpc from '../account/Rpc';
+import { Encoded } from '../utils/encoder';
+import {
+  Accounts, RPC_VERSION, Network, WalletApi, AeppApi,
+} from './rpc/types';
+import RpcClient from './rpc/RpcClient';
+import { METHODS, SUBSCRIPTION_TYPES } from './schema';
+import { NoWalletConnectedError } from '../utils/errors';
+import BrowserConnection from './connection/Browser';
+
+interface EventsBase {
+  accountsChange: (accounts: AccountRpc[]) => void;
+  disconnect: (p: any) => void;
+}
+
+export default abstract class WalletConnectorFrameBase<T extends {}>
+  extends EventEmitter<EventsBase | T> {
+  #rpcClient?: RpcClient<WalletApi, AeppApi>;
+
+  #getRpcClient(): RpcClient<WalletApi, AeppApi> {
+    if (this.#rpcClient == null) throw new NoWalletConnectedError('You are not connected to Wallet');
+    return this.#rpcClient;
+  }
+
+  /**
+   * Is connected to wallet
+   */
+  get isConnected(): boolean {
+    return this.#rpcClient != null;
+  }
+
+  #accounts: AccountRpc[] = [];
+
+  /**
+   * Accounts provided by wallet over subscription
+   */
+  get accounts(): AccountRpc[] {
+    return this.#accounts;
+  }
+
+  protected constructor() {
+    super();
+  }
+
+  protected abstract _updateNetwork(params: Network): void;
+
+  #updateAccounts(params: Accounts): void {
+    const addresses = [...new Set(
+      [...Object.keys(params.current), ...Object.keys(params.connected)],
+    )] as Encoded.AccountAddress[];
+    this.#accounts = addresses.map((address) => new AccountRpc(this.#getRpcClient(), address));
+    this.emit('accountsChange', this.#accounts);
+  }
+
+  static async _connect(
+    name: string,
+    connection: BrowserConnection,
+    connector: WalletConnectorFrameBase<any>,
+    connectNode: boolean,
+  ): Promise<void> {
+    let disconnectParams: any;
+
+    const client = new RpcClient<WalletApi, AeppApi>(
+      connection,
+      () => {
+        connector.#rpcClient = undefined;
+        connector.#accounts = [];
+        connector.emit('disconnect', disconnectParams);
+      },
+      {
+        [METHODS.updateAddress]: connector.#updateAccounts.bind(connector),
+        [METHODS.updateNetwork]: connector._updateNetwork.bind(connector),
+        [METHODS.closeConnection]: (params) => {
+          disconnectParams = params;
+          client.connection.disconnect();
+        },
+        [METHODS.readyToConnect]: () => {},
+      },
+    );
+    connector.#rpcClient = client;
+    const walletInfo = await connector.#rpcClient
+      .request(METHODS.connect, { name, version: RPC_VERSION, connectNode });
+    connector._updateNetwork(walletInfo);
+  }
+
+  /**
+   * Disconnect from wallet
+   */
+  disconnect(): void {
+    const client = this.#getRpcClient();
+    client.notify(METHODS.closeConnection, { reason: 'bye' });
+    client.connection.disconnect();
+  }
+
+  /**
+   * Request accounts from wallet
+   */
+  async getAccounts(): Promise<AccountRpc[]> {
+    const client = this.#getRpcClient();
+    const addresses = await client.request(METHODS.address, undefined);
+    return addresses.map((address) => new AccountRpc(client, address));
+  }
+
+  /**
+   * Subscribe for wallet accounts, get account updates adding handler to `accountsChange` event
+   * @param type - Subscription type
+   * @param value - Should be one of 'current' (the selected account), 'connected' (all)
+   * @returns Accounts from wallet
+   */
+  async subscribeAccounts(
+    type: SUBSCRIPTION_TYPES,
+    value: 'current' | 'connected',
+  ): Promise<AccountRpc[]> {
+    const result = await this.#getRpcClient().request(METHODS.subscribeAddress, { type, value });
+    this.#updateAccounts(result.address);
+    return this.#accounts;
+  }
+}
diff --git a/src/aepp-wallet-communication/WalletConnectorFrameWithNode.ts b/src/aepp-wallet-communication/WalletConnectorFrameWithNode.ts
new file mode 100644
index 0000000000..a5c9986ce9
--- /dev/null
+++ b/src/aepp-wallet-communication/WalletConnectorFrameWithNode.ts
@@ -0,0 +1,45 @@
+import { Network } from './rpc/types';
+import { RpcConnectionError } from '../utils/errors';
+import Node from '../Node';
+import BrowserConnection from './connection/Browser';
+import WalletConnectorFrameBase from './WalletConnectorFrameBase';
+
+interface EventsWithNode {
+  nodeChange: (node: Node) => void;
+}
+
+/**
+ * Connect to wallet as iframe/web-extension, asks wallet to provide node url
+ * In comparison with WalletConnectorFrame, this would work better for decentralized applications
+ * @category aepp wallet communication
+ */
+export default class WalletConnectorFrameWithNode extends WalletConnectorFrameBase<EventsWithNode> {
+  #node: Node = null as unknown as Node;
+
+  /**
+   * The node instance provided by wallet
+   */
+  get node(): Node {
+    return this.#node;
+  }
+
+  protected override _updateNetwork(params: Network): void {
+    if (params.node?.url == null) throw new RpcConnectionError('Missing URLs of the Node');
+    this.#node = new Node(params.node.url);
+    this.emit('nodeChange', this.#node);
+  }
+
+  /**
+   * Connect to wallet
+   * @param name - Aepp name
+   * @param connection - Wallet connection object
+   */
+  static async connect(
+    name: string,
+    connection: BrowserConnection,
+  ): Promise<WalletConnectorFrameWithNode> {
+    const connector = new WalletConnectorFrameWithNode();
+    await super._connect(name, connection, connector, true);
+    return connector;
+  }
+}
diff --git a/src/index-browser.ts b/src/index-browser.ts
index c3ae0d7984..c27bdffda5 100644
--- a/src/index-browser.ts
+++ b/src/index-browser.ts
@@ -62,6 +62,8 @@ export { default as AeSdkMethods } from './AeSdkMethods';
 export { default as AeSdkBase } from './AeSdkBase';
 export { default as AeSdk } from './AeSdk';
 export { default as AeSdkAepp } from './AeSdkAepp';
+export { default as WalletConnectorFrame } from './aepp-wallet-communication/WalletConnectorFrame';
+export { default as WalletConnectorFrameWithNode } from './aepp-wallet-communication/WalletConnectorFrameWithNode';
 export { default as AeSdkWallet } from './AeSdkWallet';
 export { default as Node } from './Node';
 export { default as verifyTransaction } from './tx/validator';

From f606d33009252e6861f0e43faa328e55b0d90095 Mon Sep 17 00:00:00 2001
From: Denis Davidyuk <denis_davidyuk@hotmail.com>
Date: Sat, 22 Jul 2023 22:13:43 +0600
Subject: [PATCH 2/3] docs(aepp): add buttons to get accounts

---
 examples/browser/aepp/src/Connect.vue         | 39 ++++++++++++++++++-
 examples/browser/aepp/src/styles.scss         |  2 +-
 .../browser/wallet-iframe/src/styles.scss     |  2 +-
 .../wallet-web-extension/src/styles.scss      |  2 +-
 4 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/examples/browser/aepp/src/Connect.vue b/examples/browser/aepp/src/Connect.vue
index 4ca9b09dfb..976efc07ea 100644
--- a/examples/browser/aepp/src/Connect.vue
+++ b/examples/browser/aepp/src/Connect.vue
@@ -34,6 +34,30 @@
     >
       Cancel detection
     </button>
+
+    <template v-if="walletConnected">
+      <br>
+      <button @click="getAccounts">
+        Get accounts
+      </button>
+      <button @click="subscribeAccounts('subscribe', 'current')">
+        Subscribe current
+      </button>
+      <button @click="subscribeAccounts('unsubscribe', 'current')">
+        Unsubscribe current
+      </button>
+      <button @click="subscribeAccounts('subscribe', 'connected')">
+        Subscribe connected
+      </button>
+      <button @click="subscribeAccounts('unsubscribe', 'connected')">
+        Unsubscribe connected
+      </button>
+
+      <div>
+        <div>Accounts</div>
+        <div>{{ rpcAccounts.map((account) => account.address.slice(0, 8)).join(', ') }}</div>
+      </div>
+    </template>
   </div>
 
   <div class="group">
@@ -71,6 +95,7 @@ export default {
     reverseIframeWalletUrl: process.env.VUE_APP_WALLET_URL ?? 'http://localhost:9000',
     walletInfo: null,
     cancelWalletDetection: null,
+    rpcAccounts: [],
   }),
   computed: {
     ...mapState(['aeSdk']),
@@ -80,6 +105,13 @@ export default {
     },
   },
   methods: {
+    async getAccounts() {
+      this.rpcAccounts = await this.walletConnector.getAccounts();
+      if (this.rpcAccounts.length) this.setAccount(this.rpcAccounts[0]);
+    },
+    async subscribeAccounts(type, value) {
+      await this.walletConnector.subscribeAccounts(type, value);
+    },
     async detectWallets() {
       if (this.connectMethod === 'reverse-iframe') {
         this.reverseIframe = document.createElement('iframe');
@@ -129,6 +161,7 @@ export default {
         this.walletConnector.on('disconnect', () => {
           this.walletConnected = false;
           this.walletInfo = null;
+          this.rpcAccounts = [];
           this.$store.commit('setAddress', undefined);
           if (this.reverseIframe) this.reverseIframe.remove();
         });
@@ -137,8 +170,10 @@ export default {
         this.setNode(this.walletConnector.networkId);
         this.walletConnector.on('networkIdChange', (networkId) => this.setNode(networkId));
 
-        this.walletConnector.on('accountsChange', (accounts) => this.setAccount(accounts[0]));
-        await this.walletConnector.subscribeAccounts('subscribe', 'current');
+        this.walletConnector.on('accountsChange', (accounts) => {
+          this.rpcAccounts = accounts;
+          if (accounts.length) this.setAccount(accounts[0]);
+        });
       } catch (error) {
         if (
           error.message === 'Wallet detection cancelled'
diff --git a/examples/browser/aepp/src/styles.scss b/examples/browser/aepp/src/styles.scss
index 080d68ea8e..fc001b22ec 100644
--- a/examples/browser/aepp/src/styles.scss
+++ b/examples/browser/aepp/src/styles.scss
@@ -19,7 +19,7 @@ body {
 }
 
 button {
-  @extend .w-40, .p-2, .m-2, .rounded-full, .bg-purple-500, .text-white, .text-xs;
+  @extend .w-44, .p-2, .m-2, .rounded-full, .bg-purple-500, .text-white, .text-xs;
 
   &:disabled {
     @extend .bg-purple-300, .cursor-not-allowed;
diff --git a/examples/browser/wallet-iframe/src/styles.scss b/examples/browser/wallet-iframe/src/styles.scss
index 1e921cc8fb..3b0fcd7873 100644
--- a/examples/browser/wallet-iframe/src/styles.scss
+++ b/examples/browser/wallet-iframe/src/styles.scss
@@ -15,7 +15,7 @@ body {
 }
 
 button {
-  @extend .w-40, .p-2, .m-2, .rounded-full, .bg-purple-500, .text-white, .text-xs;
+  @extend .w-44, .p-2, .m-2, .rounded-full, .bg-purple-500, .text-white, .text-xs;
 
   &:disabled {
     @extend .bg-purple-300, .cursor-not-allowed;
diff --git a/examples/browser/wallet-web-extension/src/styles.scss b/examples/browser/wallet-web-extension/src/styles.scss
index 6130689684..32eff37895 100644
--- a/examples/browser/wallet-web-extension/src/styles.scss
+++ b/examples/browser/wallet-web-extension/src/styles.scss
@@ -7,7 +7,7 @@ body {
 }
 
 button {
-  @extend .w-40, .p-2, .m-2, .rounded-full, .bg-purple-500, .text-white, .text-xs;
+  @extend .w-44, .p-2, .m-2, .rounded-full, .bg-purple-500, .text-white, .text-xs;
 
   &:disabled {
     @extend .bg-purple-300, .cursor-not-allowed;

From 099548736d45200730bb4dcd599d7a9e26204608 Mon Sep 17 00:00:00 2001
From: Denis Davidyuk <denis_davidyuk@hotmail.com>
Date: Sun, 23 Jul 2023 15:42:31 +0600
Subject: [PATCH 3/3] docs(aepp): connect to Ledger HW

---
 examples/browser/aepp/package.json    |  4 ++
 examples/browser/aepp/src/Connect.vue | 86 ++++++++++++++++++++++++++-
 examples/browser/aepp/vue.config.js   |  6 ++
 3 files changed, 94 insertions(+), 2 deletions(-)

diff --git a/examples/browser/aepp/package.json b/examples/browser/aepp/package.json
index 13f5bd8856..141d25d978 100644
--- a/examples/browser/aepp/package.json
+++ b/examples/browser/aepp/package.json
@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "@aeternity/aepp-sdk": "file:../../..",
+    "@ledgerhq/hw-transport-webusb": "^6.27.17",
     "buffer": "^6.0.3",
     "core-js": "^3.22.6",
     "tailwindcss": "^2.2.19",
@@ -20,6 +21,9 @@
     "sass": "^1.52.1",
     "sass-loader": "^13.0.0"
   },
+  "peerDependencies": {
+    "webpack": "^5.0.0"
+  },
   "browserslist": [
     "> 1%",
     "last 2 versions",
diff --git a/examples/browser/aepp/src/Connect.vue b/examples/browser/aepp/src/Connect.vue
index 976efc07ea..dcd87e0e83 100644
--- a/examples/browser/aepp/src/Connect.vue
+++ b/examples/browser/aepp/src/Connect.vue
@@ -54,12 +54,49 @@
       </button>
 
       <div>
-        <div>Accounts</div>
+        <div>RPC Accounts</div>
         <div>{{ rpcAccounts.map((account) => account.address.slice(0, 8)).join(', ') }}</div>
       </div>
     </template>
   </div>
 
+  <h2>Ledger Hardware Wallet</h2>
+  <div class="group">
+    <template v-if="ledgerStatus">
+      <div>
+        <div>Connection status</div>
+        <div>{{ ledgerStatus }}</div>
+      </div>
+    </template>
+    <button
+      v-else-if="!ledgerAccountFactory"
+      @click="connectLedger"
+    >
+      Connect
+    </button>
+    <template v-else>
+      <button @click="disconnectLedger">
+        Disconnect
+      </button>
+      <button @click="addLedgerAccount">
+        Add Account
+      </button>
+      <button
+        v-if="ledgerAccounts.length > 1"
+        @click="switchLedgerAccount"
+      >
+        Switch Account
+      </button>
+      <button @click="switchNode">
+        Switch Node
+      </button>
+      <div v-if="ledgerAccounts.length">
+        <div>Ledger Accounts</div>
+        <div>{{ ledgerAccounts.map((account) => account.address.slice(0, 8)).join(', ') }}</div>
+      </div>
+    </template>
+  </div>
+
   <div class="group">
     <div>
       <div>SDK status</div>
@@ -82,9 +119,10 @@
 <script>
 import {
   walletDetector, BrowserWindowMessageConnection, RpcConnectionDenyError, RpcRejectedByUserError,
-  WalletConnectorFrame,
+  WalletConnectorFrame, AccountLedgerFactory,
 } from '@aeternity/aepp-sdk';
 import { mapState } from 'vuex';
+import TransportWebUSB from '@ledgerhq/hw-transport-webusb';
 
 export default {
   data: () => ({
@@ -96,6 +134,9 @@ export default {
     walletInfo: null,
     cancelWalletDetection: null,
     rpcAccounts: [],
+    ledgerStatus: '',
+    ledgerAccountFactory: null,
+    ledgerAccounts: [],
   }),
   computed: {
     ...mapState(['aeSdk']),
@@ -105,6 +146,47 @@ export default {
     },
   },
   methods: {
+    async connectLedger() {
+      try {
+        this.ledgerStatus = 'Waiting for Ledger response';
+        const transport = await TransportWebUSB.create();
+        this.ledgerAccountFactory = new AccountLedgerFactory(transport);
+      } catch (error) {
+        if (error.name === 'TransportOpenUserCancelled') return;
+        throw error;
+      } finally {
+        this.ledgerStatus = '';
+      }
+    },
+    async disconnectLedger() {
+      this.ledgerAccountFactory = null;
+      this.ledgerAccounts = [];
+      this.$store.commit('setAddress', undefined);
+      if (Object.keys(this.aeSdk.accounts).length) this.aeSdk.removeAccount(this.aeSdk.address);
+    },
+    async addLedgerAccount() {
+      try {
+        this.ledgerStatus = 'Waiting for Ledger response';
+        const idx = this.ledgerAccounts.length;
+        const account = await this.ledgerAccountFactory.initialize(idx);
+        this.ledgerStatus = `Ensure that ${account.address} is displayed on Ledger HW screen`;
+        await this.ledgerAccountFactory.getAddress(idx, true);
+        this.ledgerAccounts.push(account);
+        this.setAccount(this.ledgerAccounts[0]);
+      } catch (error) {
+        if (error.statusCode === 0x6985) return;
+        throw error;
+      } finally {
+        this.ledgerStatus = '';
+      }
+    },
+    switchLedgerAccount() {
+      this.ledgerAccounts.push(this.ledgerAccounts.shift());
+      this.setAccount(this.ledgerAccounts[0]);
+    },
+    async switchNode() {
+      await this.setNode(this.$store.state.networkId === 'ae_mainnet' ? 'ae_uat' : 'ae_mainnet');
+    },
     async getAccounts() {
       this.rpcAccounts = await this.walletConnector.getAccounts();
       if (this.rpcAccounts.length) this.setAccount(this.rpcAccounts[0]);
diff --git a/examples/browser/aepp/vue.config.js b/examples/browser/aepp/vue.config.js
index 383f082ae8..ee973b9d69 100644
--- a/examples/browser/aepp/vue.config.js
+++ b/examples/browser/aepp/vue.config.js
@@ -1,8 +1,14 @@
 const { defineConfig } = require('@vue/cli-service');
+const webpack = require('webpack');
 
 module.exports = defineConfig({
   publicPath: process.env.PUBLIC_PATH ?? '/',
   devServer: {
     port: 9001,
   },
+  configureWebpack: {
+    plugins: [
+      new webpack.ProvidePlugin({ Buffer: ['buffer', 'Buffer'] }),
+    ],
+  },
 });