Merge pull request #2063 from aeternity/ledger-ble

docs(account): connect to Ledger over Bluetooth in example aepp

Author: davidyuk

examples/browser/aepp/package.json

@@ -9,7 +9,8 @@
   "dependencies": {
     "@aeternity/aepp-calldata": "^1.5.1",
     "@aeternity/aepp-sdk": "file:../../..",
-    "@ledgerhq/hw-transport-webusb": "^6.27.17",
+    "@ledgerhq/hw-transport-web-ble": "^6.29.4",
+    "@ledgerhq/hw-transport-webusb": "^6.29.4",
     "buffer": "^6.0.3",
     "core-js": "^3.32.1",
     "tailwindcss": "^2.2.19",

examples/browser/aepp/src/components/ConnectLedger.vue

@@ -1,29 +1,70 @@
 <template>
   <div class="group">
+    <template v-if="!accountFactory">
+      <button :disabled="!isUsbSupported" @click="() => connect(false)">Connect over USB</button>
+      <button :disabled="!isBleSupported" @click="() => connect(true)">Connect over BLE</button>
+    </template>
+    <template v-else>
+      <div>
+        <div>Device</div>
+        <div>{{ accountFactory.transport.deviceModel.productName }}</div>
+      </div>
+      <div v-if="accounts.length">
+        <div>Accounts</div>
+        <div>{{ accounts.map((account) => account.address.slice(0, 8)).join(', ') }}</div>
+      </div>
+    </template>
     <div v-if="status">
       <div>Connection status</div>
       <div>{{ status }}</div>
     </div>
-    <button v-else-if="!accountFactory" @click="connect">Connect</button>
-    <template v-else>
+    <template v-else-if="accountFactory">
       <button @click="disconnect">Disconnect</button>
       <button @click="() => addAccount(true)">Add Account</button>
       <button @click="() => addAccount(false)">Add Account no Confirm</button>
       <button v-if="accounts.length > 1" @click="switchAccount">Switch Account</button>
       <button @click="discoverAccounts">Discover Accounts</button>
       <button @click="switchNode">Switch Node</button>
-      <div v-if="accounts.length">
-        <div>Accounts</div>
-        <div>{{ accounts.map((account) => account.address.slice(0, 8)).join(', ') }}</div>
-      </div>
     </template>
   </div>
 </template>
 
 <script>
 import { AccountLedgerFactory } from '@aeternity/aepp-sdk';
 import { mapState } from 'vuex';
-import TransportWebUSB from '@ledgerhq/hw-transport-webusb';
+import TransportWebUsb from '@ledgerhq/hw-transport-webusb';
+import TransportWebBle from '@ledgerhq/hw-transport-web-ble';
+import { listen } from '@ledgerhq/logs';
+
+// TODO: remove after fixing https://github.com/LedgerHQ/ledgerjs/issues/352#issuecomment-615917351
+class TransportWebBleAndroidFix extends TransportWebBle {
+  static async open(device, ...args) {
+    if (!navigator.userAgent.includes('Mobi')) return super.open(device, ...args);
+    const getPrimaryServicesOrig = device.gatt?.getPrimaryServices;
+    if (getPrimaryServicesOrig == null) return super.open(device, ...args);
+    device.gatt.getPrimaryServices = async () => {
+      const [service] = await getPrimaryServicesOrig.call(device.gatt);
+      const getCharacteristicOrig = service.getCharacteristic;
+      service.getCharacteristic = async (id) => {
+        const characteristic = await getCharacteristicOrig.call(service, id);
+        if (id === '13d63400-2c97-0004-0002-4c6564676572') {
+          const writeValueOrig = characteristic.writeValue;
+          let delayed = false;
+          characteristic.writeValue = async (data) => {
+            if (!delayed) {
+              await new Promise((resolve) => setTimeout(resolve, 250));
+              delayed = true;
+            }
+            return writeValueOrig.call(characteristic, data);
+          };
+        }
+        return characteristic;
+      };
+      return [service];
+    };
+    return super.open(device, ...args);
+  }
+}
 
 export default {
   created() {
@@ -32,27 +73,53 @@ export default {
   data: () => ({
     status: '',
     accounts: [],
+    isUsbSupported: false,
+    isBleSupported: false,
   }),
   computed: mapState(['aeSdk']),
   methods: {
-    async connect() {
+    async connect(isBle) {
+      let transport;
       try {
         this.status = 'Waiting for Ledger response';
-        const transport = await TransportWebUSB.create();
-        this.accountFactory = new AccountLedgerFactory(transport);
+        transport = await (isBle ? TransportWebBleAndroidFix : TransportWebUsb).create();
+        transport.on('disconnect', () => this.reset());
+        const factory = new AccountLedgerFactory(transport);
+        await factory.ensureReady();
+        this.accountFactory = factory;
+        this.status = '';
       } catch (error) {
-        if (error.name === 'TransportOpenUserCancelled') return;
+        transport?.close();
+        if (error.name === 'TransportOpenUserCancelled') {
+          this.status = '';
+          return;
+        }
+        if (error.name === 'LockedDeviceError') {
+          this.status = 'Device is locked, please unlock it';
+          return;
+        }
+        if (error.message.includes('UNKNOWN_APDU')) {
+          this.status = 'Ensure that aeternity app is opened on Ledger HW';
+          return;
+        }
+        if (error.name === 'UnsupportedVersionError') {
+          this.status = error.message;
+          return;
+        }
+        this.status = 'Unknown error';
         throw error;
-      } finally {
-        this.status = '';
       }
     },
-    async disconnect() {
+    reset() {
       this.accountFactory = null;
       this.accounts = [];
       this.$store.commit('setAddress', undefined);
       if (Object.keys(this.aeSdk.accounts).length) this.aeSdk.removeAccount(this.aeSdk.address);
     },
+    async disconnect() {
+      await this.accountFactory.transport.close();
+      this.reset();
+    },
     async addAccount(confirm) {
       try {
         this.status = 'Waiting for Ledger response';
@@ -95,5 +162,16 @@ export default {
       this.$store.commit('setAddress', account.address);
     },
   },
+  async mounted() {
+    this.isUsbSupported = await TransportWebUsb.isSupported();
+    this.isBleSupported = await TransportWebBle.isSupported();
+    this.unsubscribeLedgerLog = listen(({ type, id, date, message }) => {
+      console.log(type, id, date.toLocaleTimeString(), message);
+    });
+  },
+  async beforeUnmount() {
+    if (this.accountFactory) this.disconnect();
+    this.unsubscribeLedgerLog();
+  },
 };
 </script>