app: UI fixes and translation

Author: matevz

src/app/lib/ledger.test.ts

@@ -1,4 +1,4 @@
-import { DerivationPathLegacy, DerivationPathAdr8, Ledger, LedgerSigner } from './ledger'
+import { DerivationPathTypeLegacy, DerivationPathTypeAdr8, Ledger, LedgerSigner } from './ledger'
 import OasisApp from '@oasisprotocol/ledger'
 import { WalletError, WalletErrors } from 'types/errors'
 import { Wallet, WalletType } from 'app/state/wallet/types'
@@ -18,34 +18,46 @@ describe('Ledger Library', () => {
   describe('Ledger', () => {
     it('enumerateAccounts should pass when Oasis App is open', async () => {
       mockAppIsOpen('Oasis')
-      const accounts = Ledger.enumerateAccounts({} as any, DerivationPathLegacy, 0)
+      const accounts = Ledger.enumerateAccounts({} as any, DerivationPathTypeLegacy, 0)
       await expect(accounts).resolves.toEqual([])
     })
     it('enumerateAccounts should pass when Oasis App is open', async () => {
       mockAppIsOpen('Oasis')
-      const accounts = Ledger.enumerateAccounts({} as any, DerivationPathAdr8, 0)
+      const accounts = Ledger.enumerateAccounts({} as any, DerivationPathTypeAdr8, 0)
       await expect(accounts).resolves.toEqual([])
     })
 
     it('Should catch "Oasis App is not open"', async () => {
       mockAppIsOpen('BOLOS')
-      const accountsMainMenu = Ledger.enumerateAccounts({} as any, DerivationPathLegacy, 0)
+      const accountsMainMenu = Ledger.enumerateAccounts({} as any, DerivationPathTypeLegacy, 0)
       await expect(accountsMainMenu).rejects.toThrowError(WalletError)
       await expect(accountsMainMenu).rejects.toHaveProperty('type', WalletErrors.LedgerOasisAppIsNotOpen)
 
       mockAppIsOpen('Ethereum')
-      const accountsEth = Ledger.enumerateAccounts({} as any, DerivationPathLegacy, 0)
+      const accountsEth = Ledger.enumerateAccounts({} as any, DerivationPathTypeLegacy, 0)
       await expect(accountsEth).rejects.toThrowError(WalletError)
       await expect(accountsEth).rejects.toHaveProperty('type', WalletErrors.LedgerOasisAppIsNotOpen)
     })
 
-    it('Should enumerate and return the accounts', async () => {
+    it('Should enumerate and return adr8 accounts', async () => {
       mockAppIsOpen('Oasis')
       const pubKey: jest.Mock<any> = OasisApp.prototype.publicKey
       pubKey.mockResolvedValueOnce({ return_code: 0x9000, pk: Buffer.from(new Uint8Array([1, 2, 3])) })
       pubKey.mockResolvedValueOnce({ return_code: 0x9000, pk: Buffer.from(new Uint8Array([4, 5, 6])) })
 
-      const accounts = await Ledger.enumerateAccounts({} as any, DerivationPathLegacy, 2)
+      const accounts = await Ledger.enumerateAccounts({} as any, DerivationPathTypeAdr8, 2)
+      expect(accounts).toHaveLength(2)
+      expect(accounts).toContainEqual({ path: [44, 474, 0], publicKey: new Uint8Array([1, 2, 3]) })
+      expect(accounts).toContainEqual({ path: [44, 474, 1], publicKey: new Uint8Array([4, 5, 6]) })
+    })
+
+    it('Should enumerate and return legacy accounts', async () => {
+      mockAppIsOpen('Oasis')
+      const pubKey: jest.Mock<any> = OasisApp.prototype.publicKey
+      pubKey.mockResolvedValueOnce({ return_code: 0x9000, pk: Buffer.from(new Uint8Array([1, 2, 3])) })
+      pubKey.mockResolvedValueOnce({ return_code: 0x9000, pk: Buffer.from(new Uint8Array([4, 5, 6])) })
+
+      const accounts = await Ledger.enumerateAccounts({} as any, DerivationPathTypeLegacy, 2)
       expect(accounts).toHaveLength(2)
       expect(accounts).toContainEqual({ path: [44, 474, 0, 0, 0], publicKey: new Uint8Array([1, 2, 3]) })
       expect(accounts).toContainEqual({ path: [44, 474, 0, 0, 1], publicKey: new Uint8Array([4, 5, 6]) })
@@ -56,7 +68,7 @@ describe('Ledger Library', () => {
       const pubKey: jest.Mock<any> = OasisApp.prototype.publicKey
       pubKey.mockResolvedValueOnce({ return_code: 0x6804 })
 
-      const accounts = Ledger.enumerateAccounts({} as any, DerivationPathLegacy)
+      const accounts = Ledger.enumerateAccounts({} as any, DerivationPathTypeLegacy)
       await expect(accounts).rejects.toThrowError(WalletError)
       await expect(accounts).rejects.toHaveProperty('type', WalletErrors.LedgerCannotOpenOasisApp)
     })
@@ -66,7 +78,7 @@ describe('Ledger Library', () => {
       const pubKey: jest.Mock<any> = OasisApp.prototype.publicKey
       pubKey.mockResolvedValueOnce({ return_code: 0x6400 })
 
-      const accounts = Ledger.enumerateAccounts({} as any, DerivationPathLegacy)
+      const accounts = Ledger.enumerateAccounts({} as any, DerivationPathTypeLegacy)
       await expect(accounts).rejects.toThrowError(WalletError)
       await expect(accounts).rejects.toHaveProperty('type', WalletErrors.LedgerAppVersionNotSupported)
     })
@@ -76,7 +88,7 @@ describe('Ledger Library', () => {
       const pubKey: jest.Mock<any> = OasisApp.prototype.publicKey
       pubKey.mockResolvedValueOnce({ return_code: -1, error_message: 'unknown dummy error' })
 
-      const accounts = Ledger.enumerateAccounts({} as any, DerivationPathLegacy)
+      const accounts = Ledger.enumerateAccounts({} as any, DerivationPathTypeLegacy)
       await expect(accounts).rejects.toThrowError(WalletError)
       await expect(accounts).rejects.toThrow(/unknown dummy error/)
       await expect(accounts).rejects.toHaveProperty('type', WalletErrors.LedgerUnknownError)
@@ -116,7 +128,7 @@ describe('Ledger Library', () => {
 
       const signer = new LedgerSigner({
         type: WalletType.Ledger,
-        path: Ledger.mustGetPath(DerivationPathLegacy, 0),
+        path: Ledger.mustGetPath(DerivationPathTypeAdr8, 0),
         publicKey: 'aabbcc',
       } as Wallet)
 

src/app/lib/ledger.ts

@@ -5,8 +5,8 @@ import { WalletError, WalletErrors } from 'types/errors'
 import { hex2uint } from './helpers'
 import type Transport from '@ledgerhq/hw-transport'
 
-export const DerivationPathAdr8 = 'adr8';
-export const DerivationPathLegacy = 'legacy';
+export const DerivationPathTypeAdr8 = 'adr8';
+export const DerivationPathTypeLegacy = 'legacy';
 
 interface Response {
   return_code: number
@@ -39,9 +39,9 @@ const successOrThrow = (response: Response, message: string) => {
 export class Ledger {
   public static mustGetPath(pathType: string, i: number) {
     switch (pathType) {
-      case DerivationPathAdr8:
+      case DerivationPathTypeAdr8:
         return [44, 474, i];
-      case DerivationPathLegacy:
+      case DerivationPathTypeLegacy:
         return [44, 474, 0, 0, i];
     }
 

src/app/pages/OpenWalletPage/Features/FromLedger/index.tsx

@@ -7,7 +7,7 @@ import { ErrorFormatter } from 'app/components/ErrorFormatter'
 import { LedgerStepFormatter } from 'app/components/LedgerStepFormatter'
 import { ResponsiveLayer } from 'app/components/ResponsiveLayer'
 import { Account } from 'app/components/Toolbar/Features/AccountSelector'
-import { DerivationPathAdr8, DerivationPathLegacy } from 'app/lib/ledger'
+import { DerivationPathTypeAdr8, DerivationPathTypeLegacy } from 'app/lib/ledger'
 import { ledgerActions, useLedgerSlice } from 'app/state/ledger'
 import { selectLedger, selectSelectedLedgerAccounts } from 'app/state/ledger/selectors'
 import { LedgerAccount, LedgerStep } from 'app/state/ledger/types'
@@ -105,22 +105,37 @@ export function FromLedgerModal(props: FromLedgerModalProps) {
   const error = ledger.error
   const selectedAccounts = useSelector(selectSelectedLedgerAccounts)
   const dispatch = useDispatch()
+  const [initDerivationPathType, derivationPathSetValue] = useState(DerivationPathTypeAdr8);
+
+  const derivationPathTypes = [
+    {
+      label: t('ledger.derivationPathType.adr8', 'ADR 8 derivation path'),
+      value: DerivationPathTypeAdr8,
+    },
+    {
+      label: t('ledger.derivationPathType.legacy', 'Legacy derivation path'),
+      value: DerivationPathTypeLegacy,
+    },
+  ];
 
   const openAccounts = () => {
     dispatch(walletActions.openWalletsFromLedger(selectedAccounts))
   }
 
+  const onChangeDerivationPathType = (arg: any) => {
+    derivationPathSetValue(arg.value)
+    dispatch(ledgerActions.enumerateAccounts(arg.value))
+  }
+
   useEffect(() => {
-    dispatch(ledgerActions.enumerateAccounts())
+    dispatch(ledgerActions.enumerateAccounts(initDerivationPathType))
     return () => {
       dispatch(ledgerActions.clear())
     }
   }, [dispatch, ledgerActions])
 
   const cancelDisabled = ledger.step === LedgerStep.Done || error ? false : true
   const confirmDisabled = ledger.step !== LedgerStep.Done || selectedAccounts.length === 0
-  // TODO
-  const [value, setValue] = useState('');
 
   return (
     <ResponsiveLayer position="center" modal>
@@ -130,9 +145,12 @@ export function FromLedgerModal(props: FromLedgerModalProps) {
         </Heading>
         <Select
           id='DerivationPathSelect'
-          options={[ DerivationPathAdr8, DerivationPathLegacy ]}
-          value={DerivationPathAdr8}
-          onChange={({ value: nextValue }) => setValue(nextValue)}
+          labelKey="label"
+          margin={{ bottom: 'small', top: 'none' }}
+          onChange={onChangeDerivationPathType}
+          options={derivationPathTypes}
+          value={initDerivationPathType}
+          valueKey={{ key: 'value', reduce: true }}
         />
         {ledger.step && ledger.step !== LedgerStep.Done && (
           <Box direction="row" gap="medium" alignContent="center">

src/app/state/ledger/index.ts

@@ -13,10 +13,12 @@ const slice = createSlice({
   reducers: {
     clear(state, action: PayloadAction<void>) {
       state.accounts = []
+      state.derivationPathType = undefined
       state.error = undefined
     },
-    enumerateAccounts(state, action: PayloadAction<void>) {
+    enumerateAccounts(state, action: PayloadAction<string>) {
       state.step = undefined
+      state.derivationPathType = action.payload
       state.accounts = []
     },
     toggleAccount(state, action: PayloadAction<number>) {
@@ -29,6 +31,10 @@ const slice = createSlice({
     setStep(state, action: PayloadAction<LedgerStep>) {
       state.step = action.payload
     },
+    setDerivationPathType(state, action: PayloadAction<string>) {
+      state.derivationPathType = action.payload
+      state.accounts = []
+    },
     operationFailed(state, action: PayloadAction<ErrorPayload>) {
       state.error = action.payload
       state.step = undefined

src/app/state/ledger/saga.ts

@@ -1,17 +1,18 @@
 // import { take, call, put, select, takeLatest } from 'redux-saga/effects';
+import type Transport from '@ledgerhq/hw-transport'
 import TransportWebUSB from '@ledgerhq/hw-transport-webusb'
 import * as oasis from '@oasisprotocol/client'
 import { publicKeyToAddress, uint2hex } from 'app/lib/helpers'
-import {DerivationPathAdr8, Ledger, LedgerSigner} from 'app/lib/ledger'
+import { Ledger, LedgerSigner } from 'app/lib/ledger'
 import { OasisTransaction } from 'app/lib/transaction'
 import { all, call, put, select, takeEvery } from 'typed-redux-saga'
 import { ErrorPayload, WalletError, WalletErrors } from 'types/errors'
 
 import { ledgerActions } from '.'
 import { selectChainContext } from '../network/selectors'
 import { getBalance } from '../wallet/saga'
+import { selectDerivationPathType } from "./selectors";
 import { LedgerAccount, LedgerStep } from './types'
-import type Transport from '@ledgerhq/hw-transport'
 
 function* setStep(step: LedgerStep) {
   yield* put(ledgerActions.setStep(step))
@@ -41,8 +42,11 @@ function* enumerateAccounts() {
     transport = yield* getUSBTransport()
 
     yield* setStep(LedgerStep.LoadingAccounts)
-    // TODO: Pick the selected derivation path.
-    const accounts = yield* call(Ledger.enumerateAccounts, transport, DerivationPathAdr8)
+    const derivationPathType = yield* select(selectDerivationPathType)
+    if (!derivationPathType) {
+      throw new WalletError(WalletErrors.LedgerNoDerivationPathTypeProvided, 'No derivation path type provided')
+    }
+    const accounts = yield* call(Ledger.enumerateAccounts, transport, derivationPathType)
 
     const balances = yield* all(accounts.map(a => call(getBalance, a.publicKey)))
     const addresses = yield* all(accounts.map(a => call(publicKeyToAddress, a.publicKey)))

src/app/state/ledger/selectors.ts

@@ -7,6 +7,7 @@ const selectSlice = (state: RootState) => state.ledger || initialState
 
 export const selectError = createSelector([selectSlice], state => state.error)
 export const selectLedger = createSelector([selectSlice], state => state)
+export const selectDerivationPathType = createSelector([selectSlice], state => state.derivationPathType)
 export const selectLedgerAccounts = createSelector([selectSlice], state => state.accounts)
 export const selectSelectedLedgerAccounts = createSelector([selectLedgerAccounts], state =>
   state.filter(a => a.selected),

src/app/state/ledger/types.ts

@@ -19,6 +19,7 @@ export enum LedgerStep {
 
 export interface LedgerState {
   accounts: LedgerAccount[]
+  derivationPathType?: string
   step?: LedgerStep
   error?: ErrorPayload
 }

src/locales/en/translation.json

@@ -182,6 +182,10 @@
       "loadingAccounts": "Loading account details",
       "loadingBalances": "Loading balance details",
       "done": "Done"
+    },
+    "derivationPathType": {
+      "adr8": "ADR 8 derivation path",
+      "legacy": "Legacy derivation path"
     }
   },
   "transaction": {

src/locales/fr/translation.json

@@ -42,7 +42,8 @@
     "ledger": {
       "selectWallets": "Sélectionnez les portefeuilles à ouvrir",
       "cancel": "Annuler",
-      "openWallets": "Ouvrir"
+      "openWallets": "Ouvrir",
+      "header": "Open from Ledger device"
     },
     "bitpie": {
       "warning": "❗ Utilisateurs du portefeuille BitPie : vous ne pouvez pas importer la phrase mnémonique secrète directement depuis votre portefeuille BitPie. <0>Consultez la documentation pour plus de détails.</0>"
@@ -66,7 +67,8 @@
         "debonding": "Debonding",
         "delegations": "Délégué (stake)"
       },
-      "noTransactionFound": "Aucune transaction trouvée"
+      "noTransactionFound": "Aucune transaction trouvée",
+      "noWalletIsOpen": "To send, receive, stake and swap ROSE tokens, <0>open your wallet!</0>"
     },
     "transaction": {
       "transfer": {
@@ -89,7 +91,11 @@
       "recipient": "Destinataire",
       "enterAddress": "Entrez une adresse",
       "success": "Transaction effectuée. La transaction peut mettre une minute avant d'apparaître sur votre compte.",
-      "send": "Envoyer"
+      "send": "Envoyer",
+      "confirmSendingToValidator": {
+        "title": "",
+        "description": ""
+      }
     },
     "loading": "Chargement du compte",
     "addEscrow": {
@@ -122,7 +128,9 @@
     "delegator": "Délégateur",
     "validator": "Validateur",
     "cancel": "Cancel",
-    "validators": "Validateurs"
+    "validators": "Validateurs",
+    "confirm": "",
+    "unavailable": "Unavailable"
   },
   "errors": {
     "unknown": "Erreur inconnue : {{message}}",
@@ -138,7 +146,9 @@
     "ledgerTransactionRejected": "Transaction rejetée sur le Ledger.",
     "ledgerNoDeviceSelected": "Pas de Ledger sélectionné. Si vous voulez réessayer, fermez cette fenêtre et tentez à nouveau.",
     "ledgerCannotOpenOasisApp": "Impossible d'accéder à l'application Oasis sur le Ledger. Assurez vous qu'il est dévérouillé et que l'application Oasis est ouverte.",
-    "unknownLedgerError": "Erreur Ledger inconnue : {{message}}"
+    "unknownLedgerError": "Erreur Ledger inconnue : {{message}}",
+    "usbTransportNotSupported": "Your browser does not support WebUSB (e.g. Firefox). Try using Chrome.",
+    "LedgerOasisAppIsNotOpen": "Oasis App on Ledger is closed."
   },
   "toolbar": {
     "search": {
@@ -165,6 +175,17 @@
       "loadingAccounts": "Chargement des adresses",
       "loadingBalances": "Chargement du solde des adresses",
       "done": "Fin"
+    },
+    "instructionSteps": {
+      "header": "Steps:",
+      "connectLedger": "Connect your Ledger device to the computer",
+      "closeLedgerLive": "Close Ledger Live app on the computer",
+      "openOasisApp": "Open the Oasis App on your Ledger device",
+      "confirmPendingReview": "Press both buttons on Ledger device to confirm `Pending Ledger review`"
+    },
+    "derivationPathType": {
+      "adr8": "ADR 8 derivation path",
+      "legacy": "Legacy derivation path"
     }
   },
   "transaction": {

src/types/errors.ts

@@ -21,6 +21,7 @@ export enum WalletErrors {
   LedgerNoDeviceSelected = 'no_device_selected',
   LedgerTransactionRejected = 'transaction_rejected',
   LedgerAppVersionNotSupported = 'ledger_version_not_supported',
+  LedgerNoDerivationPathTypeProvided = 'no_derivation_path_type_provided'
 }
 
 export interface ErrorPayload {