Ionic v5

capacitor.config.ts

@@ -0,0 +1,12 @@
+import { CapacitorConfig } from '@capacitor/cli'
+
+const config: CapacitorConfig = {
+  appId: 'com.oasisprotocol.wallet',
+  appName: 'Oasis Wallet',
+  webDir: 'build',
+  server: {
+    androidScheme: 'https',
+  },
+}
+
+export default config

extension/src/popup/routes.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { RouteObject } from 'react-router-dom'
 import { App } from 'app'
 import { ConnectDevicePage } from 'app/pages/ConnectDevicePage'
-import { OpenWalletPageWebExtension } from 'app/pages/OpenWalletPage/webextension'
+import { FromLedgerWebExtension, OpenWalletPageWebExtension } from 'app/pages/OpenWalletPage/webextension'
 import { commonRoutes } from '../../../src/commonRoutes'
 
 export const routes: RouteObject[] = [
@@ -21,4 +21,8 @@ export const routes: RouteObject[] = [
     path: 'open-wallet/connect-device',
     element: <ConnectDevicePage />,
   },
+  {
+    path: 'open-wallet/ledger',
+    element: <FromLedgerWebExtension />,
+  },
 ]

package.json

@@ -26,7 +26,9 @@
     "lint-docs": "markdownlint --ignore '**/node_modules/**' '**/*.md'",
     "extract-messages": "rm src/locales/en/translation.json && i18next-scanner --config=internals/extractMessages/i18next-scanner.config.js",
     "fix-grommet-icons-types": "node ./internals/scripts/fix-grommet-icons-types.js",
-    "print-extension-dev-csp": "node ./internals/scripts/print-extension-dev-csp.js"
+    "print-extension-dev-csp": "node ./internals/scripts/print-extension-dev-csp.js",
+    "android": "yarn build && yarn cap run android -l --external",
+    "ios": "yarn build && yarn cap run ios -l --external"
   },
   "browserslist": {
     "production": [
@@ -53,11 +55,16 @@
     "report-dir": "cypress-coverage"
   },
   "dependencies": {
+    "@capacitor-community/bluetooth-le": "3.0.0",
+    "@capacitor/android": "5.0.4",
+    "@capacitor/core": "5.0.4",
+    "@capacitor/ios": "5.0.4",
     "@ethereumjs/util": "9.0.0",
     "@ledgerhq/hw-transport-webusb": "6.27.19",
     "@metamask/jazzicon": "2.0.0",
     "@oasisprotocol/client": "0.1.1-alpha.2",
     "@oasisprotocol/client-rt": "0.2.1-alpha.2",
+    "@oasisprotocol/ionic-ledger-hw-transport-ble": "1.0.0-beta",
     "@oasisprotocol/ledger": "1.0.0",
     "@reduxjs/toolkit": "1.9.7",
     "base64-arraybuffer": "1.0.2",
@@ -90,6 +97,7 @@
     "webextension-polyfill": "0.10.0"
   },
   "devDependencies": {
+    "@capacitor/cli": "5.0.4",
     "@cypress/code-coverage": "3.12.4",
     "@parcel/config-webextension": "2.9.3",
     "@parcel/packager-raw-url": "2.9.3",

playwright/tests/extension.spec.ts

@@ -64,6 +64,7 @@ test.describe('The extension popup should load', () => {
 
   test('ask for USB permissions in ledger popup', async ({ page, context, extensionId }) => {
     await page.goto(`chrome-extension://${extensionId}/${popupFile}#/open-wallet`)
+    await page.getByRole('button', { name: /Ledger/i }).click()
     const popupPromise = context.waitForEvent('page')
     await page.getByRole('button', { name: /Grant access to your Ledger/i }).click()
     const popup = await popupPromise

playwright/tests/ledger.spec.ts

@@ -6,7 +6,7 @@ test.describe('Ledger', () => {
     expect((await page.request.head('/')).headers()).toHaveProperty('permissions-policy')
     await expectNoErrorsInConsole(page)
 
-    await page.goto('/open-wallet/ledger')
+    await page.goto('/open-wallet/ledger/usb')
     await page.getByRole('button', { name: 'Select accounts to open' }).click()
     await expect(page.getByText('error').or(page.getByText('fail'))).toBeHidden()
   })

src/app/components/ErrorFormatter/index.tsx

@@ -98,6 +98,10 @@ export function ErrorFormatter(props: Props) {
         message,
       },
     ),
+    [WalletErrors.BluetoothTransportNotSupported]: t(
+      'errors.bluetoothTransportNotSupported',
+      'Your device does not support Bluetooth.',
+    ),
   }
 
   const error = errorMap[props.code]

src/app/components/ImportAccountsStepFormatter/index.tsx

@@ -12,9 +12,10 @@ export const ImportAccountsStepFormatter = memo((props: Props) => {
 
   const stepMap: { [code in Step]: string } = {
     [Step.Idle]: t('ledger.steps.idle', 'Idle'),
-    [Step.OpeningUSB]: t('ledger.steps.openingUsb', 'Opening Ledger through USB'),
+    [Step.AccessingLedger]: t('ledger.steps.openingUsb', 'Opening Ledger through USB'),
     [Step.LoadingAccounts]: t('ledger.steps.loadingAccounts', 'Loading account details'),
     [Step.LoadingBalances]: t('ledger.steps.loadingBalances', 'Loading balance details'),
+    [Step.LoadingBleDevices]: 'Loading devices',
   }
 
   const message = stepMap[step]

src/app/components/Toolbar/Features/Account/DerivationFormatter.tsx

@@ -11,7 +11,8 @@ export interface DerivationFormatterProps {
 export const DerivationFormatter = (props: DerivationFormatterProps) => {
   const { t } = useTranslation()
   const walletTypes: { [type in WalletType]: string } = {
-    [WalletType.Ledger]: t('toolbar.wallets.type.ledger', 'Ledger'),
+    [WalletType.UsbLedger]: t('toolbar.wallets.type.usbLedger', 'USB Ledger'),
+    [WalletType.BleLedger]: t('toolbar.wallets.type.bluetoothLedger', 'BLE Ledger'),
     [WalletType.Mnemonic]: t('toolbar.wallets.type.mnemonic', 'Mnemonic'),
     [WalletType.PrivateKey]: t('toolbar.wallets.type.privateKey', 'Private key'),
   }

src/app/components/Toolbar/Features/AccountSelector/__tests__/index.test.tsx

@@ -27,7 +27,7 @@ describe('<AccountSelector  />', () => {
             address: 'oasis1qq3xrq0urs8qcffhvmhfhz4p0mu7ewc8rscnlwxe',
             balance: { available: '100', debonding: '0', delegations: '0', total: '100' },
             publicKey: '00',
-            type: WalletType.Ledger,
+            type: WalletType.UsbLedger,
           },
         },
       },

src/app/lib/__tests__/ledger.test.ts

@@ -1,10 +1,16 @@
-import { Ledger, LedgerSigner, requestDevice } from '../ledger'
+import { canAccessBle, Ledger, LedgerSigner, requestDevice } from '../ledger'
 import OasisApp from '@oasisprotocol/ledger'
 import { WalletError, WalletErrors } from 'types/errors'
 import { Wallet, WalletType } from 'app/state/wallet/types'
 import { isSupported, requestLedgerDevice } from '@ledgerhq/hw-transport-webusb/lib-es/webusb'
+import BleTransport from '@oasisprotocol/ionic-ledger-hw-transport-ble/lib'
 
 jest.mock('@ledgerhq/hw-transport-webusb/lib-es/webusb')
+jest.mock('@oasisprotocol/ionic-ledger-hw-transport-ble/lib', () => {
+  return {
+    isEnabled: jest.fn(),
+  }
+})
 
 jest.mock('@oasisprotocol/ledger', () => ({
   ...(jest.createMockFromModule('@oasisprotocol/ledger') as any),
@@ -31,6 +37,30 @@ describe('Ledger Library', () => {
     jest.resetAllMocks()
   })
 
+  describe('BLE Ledger', () => {
+    it('should support Bluetooth', async () => {
+      ;(BleTransport.isEnabled as jest.Mock).mockResolvedValue(true)
+      Object.defineProperty(window.navigator, 'bluetooth', {
+        writable: true,
+        value: {
+          requestLEScan: jest.fn(),
+        },
+      })
+
+      const canAccessBluetooth = await canAccessBle()
+      expect(canAccessBluetooth).toBe(true)
+    })
+
+    it('should not throw if platform does not support Bluetooth', async () => {
+      ;(BleTransport.isEnabled as jest.Mock).mockRejectedValue(
+        new Error('Platform does not support Bluetooth'),
+      )
+
+      const canAccessBluetooth = await canAccessBle()
+      expect(canAccessBluetooth).toBe(false)
+    })
+  })
+
   describe('Ledger', () => {
     it('enumerateAccounts should pass when Oasis App is open', async () => {
       mockAppIsOpen('Oasis')
@@ -120,14 +150,14 @@ describe('Ledger Library', () => {
 
     it('Should fail if the wallet does not have a path', () => {
       const openWallet = () => {
-        new LedgerSigner({ type: WalletType.Ledger } as Wallet)
+        new LedgerSigner({ type: WalletType.UsbLedger } as Wallet)
       }
       expect(openWallet).toThrow(/ not a ledger wallet/)
     })
 
     it('Should fail without USB transport', async () => {
       const signer = new LedgerSigner({
-        type: WalletType.Ledger,
+        type: WalletType.UsbLedger,
         path: [44, 474, 0, 0, 0],
         pathDisplay: `m/44'/474'/0'/0'/0'`,
         publicKey: '00',
@@ -140,7 +170,7 @@ describe('Ledger Library', () => {
 
     it('Should return the public key', () => {
       const signer = new LedgerSigner({
-        type: WalletType.Ledger,
+        type: WalletType.UsbLedger,
         path: [44, 474, 0, 0, 0],
         pathDisplay: `m/44'/474'/0'/0'/0'`,
         publicKey: 'aabbcc',
@@ -160,7 +190,7 @@ describe('Ledger Library', () => {
       sign.mockResolvedValueOnce({ return_code: 0x6986, error_message: '' })
 
       const signer = new LedgerSigner({
-        type: WalletType.Ledger,
+        type: WalletType.UsbLedger,
         path: [44, 474, 0, 0, 0],
         pathDisplay: `m/44'/474'/0'/0'/0'`,
         publicKey: '00',
@@ -187,7 +217,7 @@ describe('Ledger Library', () => {
       })
 
       const signer = new LedgerSigner({
-        type: WalletType.Ledger,
+        type: WalletType.UsbLedger,
         path: [44, 474, 0, 0, 0],
         pathDisplay: `m/44'/474'/0'/0'/0'`,
         publicKey: '00',

src/app/lib/ledger.ts

@@ -1,11 +1,13 @@
 import { ContextSigner } from '@oasisprotocol/client/dist/signature'
 import OasisApp, { successOrThrow } from '@oasisprotocol/ledger'
 import { Response } from '@oasisprotocol/ledger/dist/types'
-import { Wallet, WalletType } from 'app/state/wallet/types'
+import { LedgerWalletType, Wallet, WalletType } from 'app/state/wallet/types'
 import { WalletError, WalletErrors } from 'types/errors'
 import { hex2uint, publicKeyToAddress } from './helpers'
 import type Transport from '@ledgerhq/hw-transport'
 import { isSupported, requestLedgerDevice } from '@ledgerhq/hw-transport-webusb/lib-es/webusb'
+import BleTransport from '@oasisprotocol/ionic-ledger-hw-transport-ble/lib'
+import { Capacitor } from '@capacitor/core'
 
 interface LedgerAccount {
   publicKey: Uint8Array
@@ -17,6 +19,13 @@ export async function canAccessNavigatorUsb(): Promise<boolean> {
   return await isSupported()
 }
 
+export async function canAccessBle(): Promise<boolean> {
+  const hasBLE = await BleTransport.isEnabled().catch(() => false)
+  // Scan depends on requestLEScan method, which is not available on the web(feature flag)
+  const hasLEScan = Capacitor.isNativePlatform() || !!navigator?.bluetooth?.requestLEScan
+  return hasBLE && hasLEScan
+}
+
 export async function requestDevice(): Promise<USBDevice | undefined> {
   if (await isSupported()) {
     return await requestLedgerDevice()
@@ -99,13 +108,15 @@ export class LedgerSigner implements ContextSigner {
   protected transport?: Transport
   protected path: number[]
   protected publicKey: Uint8Array
+  transportType: LedgerWalletType
 
   constructor(wallet: Wallet) {
-    if (!wallet.path || wallet.type !== WalletType.Ledger) {
+    if (!wallet.path || (wallet.type !== WalletType.UsbLedger && wallet.type !== WalletType.BleLedger)) {
       throw new Error('Given wallet is not a ledger wallet')
     }
     this.path = wallet.path
     this.publicKey = hex2uint(wallet.publicKey)
+    this.transportType = wallet.type
   }
 
   public setTransport(transport: Transport) {

src/app/pages/ConnectDevicePage/__tests__/__snapshots__/index.test.tsx.snap

@@ -252,7 +252,7 @@ exports[`<ConnectDevicePage /> should render component 1`] = `
       >
         <ol>
           <li>
-            ledger.instructionSteps.connectLedger
+            ledger.instructionSteps.connectUsbLedger
           </li>
           <li>
             ledger.instructionSteps.closeLedgerLive

src/app/pages/ConnectDevicePage/__tests__/index.test.tsx

@@ -4,6 +4,7 @@ import userEvent from '@testing-library/user-event'
 import { requestDevice } from 'app/lib/ledger'
 import { importAccountsActions } from 'app/state/importaccounts'
 import { ConnectDevicePage } from '..'
+import { WalletType } from '../../../state/wallet/types'
 
 jest.mock('app/lib/ledger')
 
@@ -31,7 +32,7 @@ describe('<ConnectDevicePage />', () => {
     expect(screen.getByLabelText('Status is okay')).toBeInTheDocument()
     expect(screen.queryByRole('button')).not.toBeInTheDocument()
     expect(mockDispatch).toHaveBeenCalledWith({
-      payload: undefined,
+      payload: WalletType.UsbLedger,
       type: importAccountsActions.enumerateAccountsFromLedger.type,
     })
   })

src/app/pages/ConnectDevicePage/index.tsx

@@ -14,6 +14,7 @@ import { WalletErrors } from 'types/errors'
 import { importAccountsActions } from 'app/state/importaccounts'
 import { requestDevice } from 'app/lib/ledger'
 import logotype from '../../../../public/logo192.png'
+import { WalletType } from '../../state/wallet/types'
 
 type ConnectionStatus = 'connected' | 'disconnected' | 'connecting' | 'error'
 type ConnectionStatusIconPros = {
@@ -53,7 +54,7 @@ export function ConnectDevicePage() {
       const device = await requestDevice()
       if (device) {
         setConnection('connected')
-        dispatch(importAccountsActions.enumerateAccountsFromLedger())
+        dispatch(importAccountsActions.enumerateAccountsFromLedger(WalletType.UsbLedger))
       }
     } catch {
       setConnection('error')
@@ -82,7 +83,10 @@ export function ConnectDevicePage() {
         <Box gap="medium">
           <ol>
             <li>
-              {t('ledger.instructionSteps.connectLedger', 'Connect your Ledger device to the computer')}
+              {t(
+                'ledger.instructionSteps.connectUsbLedger',
+                'Connect your USB Ledger device to the computer',
+              )}
             </li>
             <li>{t('ledger.instructionSteps.closeLedgerLive', 'Close Ledger Live app on the computer')}</li>
             <li>{t('ledger.instructionSteps.openOasisApp', 'Open the Oasis App on your Ledger device')}</li>