fix: use network as derivation path

Author: ahsan-javaiid

background/constants/networks.ts

@@ -24,6 +24,7 @@ export const ROOTSTOCK: EVMNetwork = {
   name: "Rootstock",
   baseAsset: RBTC,
   chainID: "30",
+  derivationPath: "m/44'/137'/0'/0",
   family: "EVM",
   coingeckoPlatformID: "rootstock",
 }

background/main.ts

@@ -1083,13 +1083,14 @@ export default class Main extends BaseService<never> {
       })
     })
 
-    keyringSliceEmitter.on("generateNewKeyring", async () => {
+    keyringSliceEmitter.on("generateNewKeyring", async (path) => {
       // TODO move unlocking to a reasonable place in the initialization flow
       const generated: {
         id: string
         mnemonic: string[]
       } = await this.keyringService.generateNewKeyring(
-        KeyringTypes.mnemonicBIP39S256
+        KeyringTypes.mnemonicBIP39S256,
+        path
       )
 
       this.store.dispatch(setKeyringToVerify(generated))

background/networks.ts

@@ -35,6 +35,7 @@ export type Network = {
   family: NetworkFamily
   chainID?: string
   coingeckoPlatformID?: string
+  derivationPath?: string
 }
 
 /**

background/redux-slices/keyrings.ts

@@ -32,7 +32,7 @@ export type Events = {
   createPassword: string
   unlockKeyrings: string
   lockKeyrings: never
-  generateNewKeyring: never
+  generateNewKeyring: string | undefined
   deriveAddress: string
   importKeyring: ImportKeyring
 }
@@ -134,8 +134,8 @@ export default keyringsSlice.reducer
 // Async thunk to bubble the generateNewKeyring action from  store to emitter.
 export const generateNewKeyring = createBackgroundAsyncThunk(
   "keyrings/generateNewKeyring",
-  async () => {
-    await emitter.emit("generateNewKeyring")
+  async (path?: string) => {
+    await emitter.emit("generateNewKeyring", path)
   }
 )
 

background/redux-slices/selectors/accountsSelectors.ts

@@ -288,6 +288,7 @@ export type AccountTotal = AddressOnNetwork & {
   // FIXME Add `categoryFor(accountSigner): string` utility function to
   // FIXME generalize beyond keyrings.
   keyringId: string | null
+  path: string | null
   accountSigner: AccountSigner
   name?: string
   avatarURL?: string
@@ -373,6 +374,7 @@ function getNetworkAccountTotalsByCategory(
 
       const accountSigner = accountSignersByAddress[address]
       const keyringId = keyringsByAddresses[address]?.id
+      const path = keyringsByAddresses[address]?.path
 
       const accountType = getAccountType(
         address,
@@ -387,6 +389,7 @@ function getNetworkAccountTotalsByCategory(
           shortenedAddress,
           accountType,
           keyringId,
+          path,
           accountSigner,
         }
       }
@@ -397,6 +400,7 @@ function getNetworkAccountTotalsByCategory(
         shortenedAddress,
         accountType,
         keyringId,
+        path,
         accountSigner,
         name: accountData.ens.name ?? accountData.defaultName,
         avatarURL: accountData.ens.avatarURL ?? accountData.defaultAvatar,

background/services/keyring/index.ts

@@ -28,6 +28,7 @@ export const MAX_OUTSIDE_IDLE_TIME = 60 * MINUTE
 export type Keyring = {
   type: KeyringTypes
   id: string | null
+  path: string | null
   addresses: string[]
 }
 
@@ -301,7 +302,8 @@ export default class KeyringService extends BaseService<Events> {
    *          accessed at generation time through this return value.
    */
   async generateNewKeyring(
-    type: KeyringTypes
+    type: KeyringTypes,
+    path?: string
   ): Promise<{ id: string; mnemonic: string[] }> {
     this.requireUnlocked()
 
@@ -311,7 +313,13 @@ export default class KeyringService extends BaseService<Events> {
       )
     }
 
-    const newKeyring = new HDKeyring({ strength: 256 })
+    const options: { strength: number; path?: string } = { strength: 256 }
+
+    if (path) {
+      options.path = path
+    }
+
+    const newKeyring = new HDKeyring(options)
 
     const { mnemonic } = newKeyring.serializeSync()
 
@@ -382,6 +390,7 @@ export default class KeyringService extends BaseService<Events> {
           .filter((address) => this.#hiddenAccounts[address] !== true),
       ],
       id: kr.id,
+      path: kr.path,
     }))
   }
 

ui/components/AccountsNotificationPanel/AccountsNotificationPanelAccounts.tsx

@@ -11,6 +11,7 @@ import {
   updateSignerTitle,
 } from "@tallyho/tally-background/redux-slices/ui"
 import { deriveAddress } from "@tallyho/tally-background/redux-slices/keyrings"
+import { ROOTSTOCK } from "@tallyho/tally-background/constants"
 import {
   AccountTotal,
   selectCurrentNetworkAccountTotalsByCategory,
@@ -77,12 +78,14 @@ function WalletTypeHeader({
   accountType,
   onClickAddAddress,
   walletNumber,
+  path,
   accountSigner,
 }: {
   accountType: AccountType
   onClickAddAddress?: () => void
   accountSigner: AccountSigner
   walletNumber?: number
+  path?: string | null
 }) {
   const { t } = useTranslation()
   const { title, icon } = walletTypeDetails[accountType]
@@ -103,10 +106,13 @@ function WalletTypeHeader({
   const sectionTitle = useMemo(() => {
     if (accountType === AccountType.ReadOnly) return title
 
-    if (sectionCustomName) return sectionCustomName
+    let networkName = "" // Only for Rootstock
+    if (path === ROOTSTOCK.derivationPath) networkName = `(${ROOTSTOCK.name})`
 
-    return `${title} ${walletNumber}`
-  }, [accountType, title, sectionCustomName, walletNumber])
+    if (sectionCustomName) return `${sectionCustomName} ${networkName}`
+
+    return `${title} ${walletNumber} ${networkName}`
+  }, [accountType, title, sectionCustomName, walletNumber, path])
 
   const history = useHistory()
   const areKeyringsUnlocked = useAreKeyringsUnlocked(false)
@@ -339,6 +345,7 @@ export default function AccountsNotificationPanelAccounts({
                       <WalletTypeHeader
                         accountType={accountType}
                         walletNumber={idx + 1}
+                        path={accountTotalsByKeyringId[0].path}
                         accountSigner={
                           accountTotalsByKeyringId[0].accountSigner
                         }

ui/pages/Onboarding/OnboardingImportMetamask.tsx

@@ -5,6 +5,7 @@ import { isValidMnemonic } from "@ethersproject/hdnode"
 import classNames from "classnames"
 import { FeatureFlags, isEnabled } from "@tallyho/tally-background/features"
 import { useTranslation } from "react-i18next"
+import { selectCurrentNetwork } from "@tallyho/tally-background/redux-slices/selectors"
 import SharedButton from "../../components/Shared/SharedButton"
 import SharedBackButton from "../../components/Shared/SharedBackButton"
 import OnboardingDerivationPathSelect from "../../components/Onboarding/OnboardingDerivationPathSelect"
@@ -105,12 +106,15 @@ export default function OnboardingImportMetamask(props: Props): ReactElement {
     keyPrefix: "onboarding.addWallet.importExistingWallet",
   })
   const { nextPage } = props
+  const selectedNetwork = useBackgroundSelector(selectCurrentNetwork)
 
   const areKeyringsUnlocked = useAreKeyringsUnlocked(true)
 
   const [recoveryPhrase, setRecoveryPhrase] = useState("")
   const [errorMessage, setErrorMessage] = useState("")
-  const [path, setPath] = useState<string>("m/44'/60'/0'/0")
+  const [path, setPath] = useState<string>(
+    selectedNetwork.derivationPath ?? "m/44'/60'/0'/0"
+  )
   const [isImporting, setIsImporting] = useState(false)
 
   const dispatch = useBackgroundDispatch()

ui/pages/Onboarding/OnboardingInterstitialCreatePhrase.tsx

@@ -1,22 +1,28 @@
 import React, { ReactElement, useCallback, useEffect } from "react"
 import { generateNewKeyring } from "@tallyho/tally-background/redux-slices/keyrings"
+import { selectCurrentNetwork } from "@tallyho/tally-background/redux-slices/selectors"
 import { useHistory } from "react-router-dom"
-import { useBackgroundDispatch, useAreKeyringsUnlocked } from "../../hooks"
+import {
+  useBackgroundDispatch,
+  useAreKeyringsUnlocked,
+  useBackgroundSelector,
+} from "../../hooks"
 
 export default function OnboardingInterstitialCreatePhrase(): ReactElement {
   const dispatch = useBackgroundDispatch()
+  const selectedNetwork = useBackgroundSelector(selectCurrentNetwork)
   const history = useHistory()
 
   const areKeyringsUnlocked = useAreKeyringsUnlocked(true)
 
   const generateThenContinue = useCallback(
     async function generateThenContinue() {
       if (areKeyringsUnlocked) {
-        await dispatch(generateNewKeyring())
+        await dispatch(generateNewKeyring(selectedNetwork.derivationPath))
         history.push("/onboarding/save-seed")
       }
     },
-    [areKeyringsUnlocked, dispatch, history]
+    [areKeyringsUnlocked, dispatch, history, selectedNetwork]
   )
 
   useEffect(() => {

ui/pages/Onboarding/Tabbed/ImportSeed.tsx

@@ -4,6 +4,7 @@ import { Redirect, useHistory } from "react-router-dom"
 import { isValidMnemonic } from "@ethersproject/hdnode"
 import { FeatureFlags, isEnabled } from "@tallyho/tally-background/features"
 import { useTranslation } from "react-i18next"
+import { selectCurrentNetwork } from "@tallyho/tally-background/redux-slices/selectors"
 import SharedButton from "../../../components/Shared/SharedButton"
 import OnboardingDerivationPathSelect from "../../../components/Onboarding/OnboardingDerivationPathSelect"
 import {
@@ -19,12 +20,14 @@ type Props = {
 
 export default function ImportSeed(props: Props): ReactElement {
   const { nextPage } = props
-
+  const selectedNetwork = useBackgroundSelector(selectCurrentNetwork)
   const areKeyringsUnlocked = useAreKeyringsUnlocked(false)
 
   const [recoveryPhrase, setRecoveryPhrase] = useState("")
   const [errorMessage, setErrorMessage] = useState("")
-  const [path, setPath] = useState<string>("m/44'/60'/0'/0")
+  const [path, setPath] = useState<string>(
+    selectedNetwork.derivationPath ?? "m/44'/60'/0'/0"
+  )
   const [isImporting, setIsImporting] = useState(false)
 
   const { t } = useTranslation("translation", {