Bring back persistence of selected EthHDMode

Has been removed in #2379/#2376 before...

src/renderer/components/settings/WalletSettings.tsx

@@ -87,6 +87,8 @@ type Props = {
   validatePassword$: ValidatePasswordHandler
   collapsed: boolean
   toggleCollapse: FP.Lazy<void>
+  ethHDMode: EthHDMode
+  updateEthHDMode: (mode: EthHDMode) => void
 }
 
 type AddressToVerify = O.Option<{ address: Address; chain: Chain }>
@@ -108,7 +110,9 @@ export const WalletSettings: React.FC<Props> = (props): JSX.Element => {
     clickAddressLinkHandler,
     validatePassword$,
     collapsed,
-    toggleCollapse
+    toggleCollapse,
+    updateEthHDMode,
+    ethHDMode
   } = props
 
   const intl = useIntl()
@@ -186,8 +190,6 @@ export const WalletSettings: React.FC<Props> = (props): JSX.Element => {
 
   const [ledgerAddressToVerify, setLedgerAddressToVerify] = useState<AddressToVerify>(O.none)
 
-  const [ethDerivationMode, setEthDerivationMode] = useState<EthHDMode>('ledgerlive')
-
   const renderLedgerNotSupported = useMemo(
     () => (
       <div className="mt-10px w-full">
@@ -217,11 +219,11 @@ export const WalletSettings: React.FC<Props> = (props): JSX.Element => {
         addLedgerAddress$({
           chain,
           walletIndex,
-          hdMode: isEthChain(chain) ? ethDerivationMode : 'default'
+          hdMode: isEthChain(chain) ? ethHDMode : 'default' // other Ledgers uses `default` path
         })
       )
     },
-    [addLedgerAddress$, setLedgerChainToAdd, ethDerivationMode, resetAddLedgerAddressRD, subscribeAddLedgerAddressRD]
+    [resetAddLedgerAddressRD, subscribeAddLedgerAddressRD, addLedgerAddress$, ethHDMode]
   )
 
   const verifyLedgerAddressHandler = useCallback(
@@ -243,7 +245,7 @@ export const WalletSettings: React.FC<Props> = (props): JSX.Element => {
     (chain: Chain, oAddress: O.Option<WalletAddress>) => {
       const renderAddAddress = () => {
         const onChangeEthDerivationMode = (e: RadioChangeEvent) => {
-          setEthDerivationMode(e.target.value as EthHDMode)
+          updateEthHDMode(e.target.value as EthHDMode)
         }
 
         const selectedWalletIndex = walletIndexMap[chain]
@@ -299,7 +301,7 @@ export const WalletSettings: React.FC<Props> = (props): JSX.Element => {
                 <StyledR.Radio.Group
                   className="!flex flex-col items-start lg:flex-row lg:items-center lg:!pl-30px"
                   onChange={onChangeEthDerivationMode}
-                  value={ethDerivationMode}>
+                  value={ethHDMode}>
                   <StyledR.Radio value="ledgerlive" key="ledgerlive">
                     <Styled.EthDerivationModeRadioLabel>
                       {intl.formatMessage({ id: 'common.ledgerlive' })}
@@ -372,12 +374,13 @@ export const WalletSettings: React.FC<Props> = (props): JSX.Element => {
       walletIndexMap,
       ledgerChainToAdd,
       addLedgerAddressRD,
-      ethDerivationMode,
+      ethHDMode,
+      updateEthHDMode,
       addLedgerAddress,
       network,
       clickAddressLinkHandler,
-      removeLedgerAddress,
-      verifyLedgerAddressHandler
+      verifyLedgerAddressHandler,
+      removeLedgerAddress
     ]
   )
 

src/renderer/contexts/EthereumContext.tsx

@@ -1,5 +1,12 @@
 import React, { createContext, useContext } from 'react'
 
+import * as FP from 'fp-ts/lib/function'
+import * as O from 'fp-ts/lib/Option'
+import * as Rx from 'rxjs'
+import * as RxOp from 'rxjs/operators'
+
+import { DEFAULT_ETH_HD_MODE } from '../../shared/ethereum/const'
+import { EthHDMode } from '../../shared/ethereum/types'
 import {
   client$,
   clientState$,
@@ -19,6 +26,7 @@ import {
   approveFee$,
   reloadApproveFee
 } from '../services/ethereum'
+import { getStorageState$, modifyStorage } from '../services/storage/common'
 
 export type EthereumContextValue = {
   client$: typeof client$
@@ -38,6 +46,23 @@ export type EthereumContextValue = {
   isApprovedERC20Token$: typeof isApprovedERC20Token$
   approveFee$: typeof approveFee$
   reloadApproveFee: typeof reloadApproveFee
+  ethHDMode$: Rx.Observable<EthHDMode>
+  updateEthHDMode: (m: EthHDMode) => void
+}
+
+const ethHDMode$ = FP.pipe(
+  getStorageState$,
+  RxOp.map(
+    FP.flow(
+      O.map(({ ethDerivationMode }) => ethDerivationMode),
+      O.getOrElse(() => DEFAULT_ETH_HD_MODE)
+    )
+  ),
+  RxOp.distinctUntilChanged()
+)
+
+const updateEthHDMode = (mode: EthHDMode) => {
+  modifyStorage(O.some({ ethDerivationMode: mode }))
 }
 
 const initialContext: EthereumContextValue = {
@@ -57,7 +82,9 @@ const initialContext: EthereumContextValue = {
   approveERC20Token$,
   isApprovedERC20Token$,
   approveFee$,
-  reloadApproveFee
+  reloadApproveFee,
+  ethHDMode$,
+  updateEthHDMode
 }
 
 const EthereumContext = createContext<EthereumContextValue | null>(null)

src/renderer/views/wallet/WalletSettingsView.tsx

@@ -21,6 +21,8 @@ import * as Rx from 'rxjs'
 import * as RxOp from 'rxjs/operators'
 
 import { LedgerErrorId } from '../../../shared/api/types'
+import { DEFAULT_ETH_HD_MODE } from '../../../shared/ethereum/const'
+import { EthHDMode } from '../../../shared/ethereum/types'
 import { HDMode } from '../../../shared/wallet/types'
 import { WalletSettings } from '../../components/settings'
 import { useBinanceContext } from '../../contexts/BinanceContext'
@@ -74,13 +76,15 @@ export const WalletSettingsView: React.FC<Props> = ({ keystoreUnlocked }): JSX.E
 
   const { address$: thorAddressUI$ } = useThorchainContext()
   const { addressUI$: bnbAddressUI$ } = useBinanceContext()
-  const { addressUI$: ethAddressUI$ } = useEthereumContext()
+  const { addressUI$: ethAddressUI$, ethHDMode$, updateEthHDMode } = useEthereumContext()
   const { addressUI$: btcAddressUI$ } = useBitcoinContext()
   const { addressUI$: ltcAddressUI$ } = useLitecoinContext()
   const { addressUI$: bchAddressUI$ } = useBitcoinCashContext()
   const { addressUI$: dogeAddressUI$ } = useDogeContext()
   const { addressUI$: cosmosAddressUI$ } = useCosmosContext()
 
+  const ethHDMode: EthHDMode = useObservableState(ethHDMode$, DEFAULT_ETH_HD_MODE)
+
   const {
     addAddress: addLedgerThorAddress,
     verifyAddress: verifyLedgerThorAddress,
@@ -342,6 +346,8 @@ export const WalletSettingsView: React.FC<Props> = ({ keystoreUnlocked }): JSX.E
       validatePassword$={validatePassword$}
       collapsed={collapsed}
       toggleCollapse={toggleCollapse}
+      ethHDMode={ethHDMode}
+      updateEthHDMode={updateEthHDMode}
     />
   )
 }

src/shared/api/types.ts

@@ -6,14 +6,15 @@ import { Chain } from '@xchainjs/xchain-util'
 import * as E from 'fp-ts/lib/Either'
 import * as O from 'fp-ts/Option'
 
+import { EthHDMode } from '../ethereum/types'
 import { Locale } from '../i18n/types'
 import { HDMode, WalletAddress } from '../wallet/types'
 import { IPCLedgerAddressesIO, KeystoreWallets, PoolsStorageEncoded } from './io'
 
 // A version number starting from `1` to avoid to load deprecated files
 export type StorageVersion = { version: string }
 export type UserNodesStorage = Readonly<Record<Network, Address[]> & StorageVersion>
-export type CommonStorage = Readonly<{ locale: Locale } & StorageVersion>
+export type CommonStorage = Readonly<{ locale: Locale; ethDerivationMode: EthHDMode } & StorageVersion>
 
 /**
  * Hash map of common store files

src/shared/const.ts

@@ -1,5 +1,6 @@
 import { PoolsStorageEncoded } from './api/io'
 import { StoreFilesContent, UserNodesStorage } from './api/types'
+import { DEFAULT_ETH_HD_MODE } from './ethereum/const'
 import { DEFAULT_LOCALE } from './i18n/const'
 
 export enum ExternalUrl {
@@ -33,13 +34,13 @@ const POOLS_STORAGE_DEFAULT: PoolsStorageEncoded = {
 }
 
 // increase it by `1` if you want to ignore previous version of `common` storage
-const COMMON_STORAGE_VERSION = '2'
+const COMMON_STORAGE_VERSION = '1'
 /**
  * When adding a new store file do not forget to expose
  * public api for it at src/main/preload.ts
  */
 export const DEFAULT_STORAGES: StoreFilesContent = {
-  common: { version: COMMON_STORAGE_VERSION, locale: DEFAULT_LOCALE },
+  common: { version: COMMON_STORAGE_VERSION, ethDerivationMode: DEFAULT_ETH_HD_MODE, locale: DEFAULT_LOCALE },
   userNodes: USER_NODES_STORAGE_DEFAULT,
   pools: POOLS_STORAGE_DEFAULT
 }

src/shared/ethereum/const.ts

@@ -14,4 +14,4 @@ export const FEE_BOUNDS: Record<Network, FeeBounds | undefined> = {
   }
 }
 
-export const DEFAULT_ETH_DERIVATION_MODE: EthHDMode = 'ledgerlive'
+export const DEFAULT_ETH_HD_MODE: EthHDMode = 'ledgerlive'

src/shared/mock/api.ts

@@ -38,7 +38,8 @@ export const apiHDWallet: ApiHDWallet = {
 
 const commonStorageData: CommonStorage = {
   locale: Locale.EN,
-  version: '2'
+  ethDerivationMode: 'metamask',
+  version: '1'
 }
 
 export const apiCommonStorage: ApiFileStoreService<CommonStorage> = {