Refactor keyring redux slice to remove importing field

background/main.ts

@@ -1668,7 +1668,7 @@ export default class Main extends BaseService<never> {
  return this.keyringService.exportPrivateKey(address)
  }
 
- async importSigner(signerRaw: SignerRawWithType): Promise<HexString | null> {
+ async importSigner(signerRaw: SignerRawWithType): Promise<string | null> {
  return this.keyringService.importSigner(signerRaw)
  }
 

background/redux-slices/keyrings.ts

@@ -1,7 +1,6 @@
 import { createSlice } from "@reduxjs/toolkit"
 import Emittery from "emittery"
 
-import { setNewSelectedAccount, UIState } from "./ui"
 import { createBackgroundAsyncThunk } from "./utils"
 import {
  Keyring,
@@ -10,6 +9,8 @@ import {
  SignerRawWithType,
 } from "../services/keyring/index"
 import { HexString } from "../types"
+import logger from "../lib/logger"
+import { UIState, setNewSelectedAccount } from "./ui"
 
 type KeyringToVerify = {
  id: string
@@ -22,7 +23,6 @@ export type KeyringsState = {
  metadata: {
  [keyringId: string]: SignerMetadata
  }
- importing: false | "pending" | "done" | "failed"
  status: "locked" | "unlocked" | "uninitialized"
  keyringToVerify: KeyringToVerify
 }
@@ -31,7 +31,6 @@ export const initialState: KeyringsState = {
  keyrings: [],
  privateKeys: [],
  metadata: {},
- importing: false,
  status: "uninitialized",
  keyringToVerify: null,
 }
@@ -50,23 +49,40 @@ export const importSigner = createBackgroundAsyncThunk(
  async (
  signerRaw: SignerRawWithType,
  { getState, dispatch, extra: { main } }
- ) => {
- const address = await main.importSigner(signerRaw)
- if (!address) return
+ ): Promise<{ success: boolean; errorMessage?: string }> => {
+ let address = null
+
+ try {
+ address = await main.importSigner(signerRaw)
+ } catch (error) {
+ logger.error("Internal signer import failed:", error)
+
+ return {
+ success: false,
+ errorMessage: "Unexpected error during account import.",
+ }
+ }
+
+ if (!address) {
+ return {
+ success: false,
+ errorMessage:
+ "Failed to import new account. Address may already be imported.",
+ }
+ }
 
  const { ui } = getState() as {
  ui: UIState
  }
- // Set the selected account as the first address of the last added keyring,
- // which will correspond to the last imported keyring, AKA this one. Note that
- // this does rely on the KeyringService's behavior of pushing new keyrings to
- // the end of the keyring list.
+
  dispatch(
  setNewSelectedAccount({
  address,
  network: ui.selectedAccount.network,
  })
  )
+
+ return { success: true }
  }
 )
 
@@ -108,28 +124,6 @@ const keyringsSlice = createSlice({
  keyringToVerify: payload,
  }),
  },
- extraReducers: (builder) => {
- builder
- .addCase(importSigner.pending, (state) => {
- return {
- ...state,
- importing: "pending",
- }
- })
- .addCase(importSigner.fulfilled, (state) => {
- return {
- ...state,
- importing: "done",
- keyringToVerify: null,
- }
- })
- .addCase(importSigner.rejected, (state) => {
- return {
- ...state,
- importing: "failed",
- }
- })
- },
 })
 
 export const {

background/redux-slices/migrations/to-28.ts

@@ -7,6 +7,7 @@ type OldState = {
  source: "import" | "internal"
  }
  }
+ importing: false | "pending" | "done" | "failed"
  [sliceKey: string]: unknown
  }
 }
@@ -26,7 +27,7 @@ type NewState = {
 export default (prevState: Record<string, unknown>): NewState => {
  const oldState = prevState as OldState
  const {
- keyrings: { keyringMetadata, ...keyringsState },
+ keyrings: { keyringMetadata, importing, ...keyringsState },
  } = oldState
 
  return {

ui/pages/Onboarding/OnboardingImportMetamask.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, useCallback, useEffect, useState } from "react"
+import React, { ReactElement, useCallback, useState } from "react"
 import { importSigner } from "@tallyho/tally-background/redux-slices/keyrings"
 import { useHistory } from "react-router-dom"
 import { isValidMnemonic } from "@ethersproject/hdnode"
@@ -7,6 +7,7 @@ import { FeatureFlags, isEnabled } from "@tallyho/tally-background/features"
 import { useTranslation } from "react-i18next"
 import { selectCurrentNetwork } from "@tallyho/tally-background/redux-slices/selectors"
 import { SignerTypes } from "@tallyho/tally-background/services/keyring"
+import { AsyncThunkFulfillmentType } from "@tallyho/tally-background/redux-slices/utils"
 import SharedButton from "../../components/Shared/SharedButton"
 import SharedBackButton from "../../components/Shared/SharedBackButton"
 import OnboardingDerivationPathSelect from "../../components/Onboarding/OnboardingDerivationPathSelect"
@@ -119,19 +120,8 @@ export default function OnboardingImportMetamask(props: Props): ReactElement {
  const [isImporting, setIsImporting] = useState(false)
 
  const dispatch = useBackgroundDispatch()
- const keyringImport = useBackgroundSelector(
- (state) => state.keyrings.importing
- )
-
  const history = useHistory()
 
- useEffect(() => {
- if (areKeyringsUnlocked && keyringImport === "done" && isImporting) {
- setIsImporting(false)
- history.push(nextPage)
- }
- }, [history, areKeyringsUnlocked, keyringImport, nextPage, isImporting])
-
  const importWallet = useCallback(async () => {
  const plainRecoveryPhrase = recoveryPhrase
  .toLowerCase()
@@ -145,18 +135,25 @@ export default function OnboardingImportMetamask(props: Props): ReactElement {
  setErrorMessage(t("phraseLengthError"))
  } else if (isValidMnemonic(plainRecoveryPhrase)) {
  setIsImporting(true)
- dispatch(
+
+ const { success } = (await dispatch(
  importSigner({
  type: SignerTypes.keyring,
  mnemonic: plainRecoveryPhrase,
  path,
  source: "import",
  })
- )
+ )) as unknown as AsyncThunkFulfillmentType<typeof importSigner>
+
+ setIsImporting(false)
+
+ if (success) {
+ history.push(nextPage)
+ }
  } else {
  setErrorMessage(t("invalidPhraseError"))
  }
- }, [dispatch, recoveryPhrase, path, t])
+ }, [dispatch, recoveryPhrase, path, t, history, nextPage])
 
  if (!areKeyringsUnlocked) return <></>
 

ui/pages/Onboarding/Tabbed/ImportPrivateKey.tsx

@@ -5,6 +5,7 @@ import { SignerTypes } from "@tallyho/tally-background/services/keyring"
 import { isHexString } from "ethers/lib/utils"
 import React, { ReactElement, useCallback, useState } from "react"
 import { useTranslation } from "react-i18next"
+import { AsyncThunkFulfillmentType } from "@tallyho/tally-background/redux-slices/utils"
 import SharedButton from "../../../components/Shared/SharedButton"
 import SharedSeedInput from "../../../components/Shared/SharedSeedInput"
 import { useBackgroundDispatch } from "../../../hooks"
@@ -49,14 +50,19 @@ export default function ImportPrivateKey(props: Props): ReactElement {
  const trimmedPrivateKey = privateKey.toLowerCase().trim()
  if (validatePrivateKey(trimmedPrivateKey)) {
  setIsImporting(true)
- await dispatch(
+ const { success } = (await dispatch(
  importSigner({
  type: SignerTypes.privateKey,
  privateKey: trimmedPrivateKey,
  })
- )
- dispatch(sendEvent(OneTimeAnalyticsEvent.ONBOARDING_FINISHED))
- finalize()
+ )) as unknown as AsyncThunkFulfillmentType<typeof importSigner>
+
+ if (success) {
+ dispatch(sendEvent(OneTimeAnalyticsEvent.ONBOARDING_FINISHED))
+ finalize()
+ } else {
+ setIsImporting(false)
+ }
  } else {
  setErrorMessage(t("error"))
  }

ui/pages/Onboarding/Tabbed/ImportPrivateKeyJSON.tsx

@@ -1,11 +1,12 @@
-import React, { ReactElement, useCallback, useEffect, useState } from "react"
+import React, { ReactElement, useCallback, useState } from "react"
 import { useTranslation } from "react-i18next"
 import { importSigner } from "@tallyho/tally-background/redux-slices/keyrings"
 import { SignerTypes } from "@tallyho/tally-background/services/keyring"
 import classnames from "classnames"
 import { selectCurrentAccount } from "@tallyho/tally-background/redux-slices/selectors"
 import { sendEvent } from "@tallyho/tally-background/redux-slices/ui"
 import { OneTimeAnalyticsEvent } from "@tallyho/tally-background/lib/posthog"
+import { AsyncThunkFulfillmentType } from "@tallyho/tally-background/redux-slices/utils"
 import SharedButton from "../../../components/Shared/SharedButton"
 import PasswordInput from "../../../components/Shared/PasswordInput"
 import SharedFileInput from "../../../components/Shared/SharedFileInput"
@@ -21,10 +22,6 @@ type Props = {
 export default function ImportPrivateKeyJSON(props: Props): ReactElement {
  const { setIsImporting, isImporting, finalize } = props
 
- const keyringImportStatus = useBackgroundSelector(
- (state) => state.keyrings.importing
- )
-
  const dispatch = useBackgroundDispatch()
  const selectedAccountAddress =
  useBackgroundSelector(selectCurrentAccount).address
@@ -49,28 +46,25 @@ export default function ImportPrivateKeyJSON(props: Props): ReactElement {
  setHasError(false)
  setIsImporting(true)
 
- await dispatch(
+ const { success } = (await dispatch(
  importSigner({
  type: SignerTypes.jsonFile,
  jsonFile: file,
  password,
  })
- )
+ )) as unknown as AsyncThunkFulfillmentType<typeof importSigner>
 
  setIsImporting(false)
- setIsImported(true)
- }, [dispatch, file, password, setIsImporting])
 
- useEffect(() => {
- if (keyringImportStatus === "failed" && isImported) {
+ if (success) {
+ setIsImported(true)
+ setHasError(false)
+ dispatch(sendEvent(OneTimeAnalyticsEvent.ONBOARDING_FINISHED))
+ } else {
  setHasError(true)
  setIsImported(false)
  }
-
- if (keyringImportStatus === "done" && isImported) {
- dispatch(sendEvent(OneTimeAnalyticsEvent.ONBOARDING_FINISHED))
- }
- }, [isImported, keyringImportStatus, dispatch])
+ }, [dispatch, file, password, setIsImporting])
 
  const showJSONForm = !isImporting && !isImported
 

ui/pages/Onboarding/Tabbed/ImportSeed.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, useCallback, useEffect, useState } from "react"
+import React, { ReactElement, useCallback, useState } from "react"
 import { importSigner } from "@tallyho/tally-background/redux-slices/keyrings"
 import { Redirect, useHistory } from "react-router-dom"
 import { isValidMnemonic } from "@ethersproject/hdnode"
@@ -8,6 +8,7 @@ import { selectCurrentNetwork } from "@tallyho/tally-background/redux-slices/sel
 import { SignerTypes } from "@tallyho/tally-background/services/keyring"
 import { sendEvent } from "@tallyho/tally-background/redux-slices/ui"
 import { OneTimeAnalyticsEvent } from "@tallyho/tally-background/lib/posthog"
+import { AsyncThunkFulfillmentType } from "@tallyho/tally-background/redux-slices/utils"
 import SharedButton from "../../../components/Shared/SharedButton"
 import OnboardingDerivationPathSelect, {
  DefaultPathIndex,
@@ -42,24 +43,13 @@ export default function ImportSeed(props: Props): ReactElement {
  })
 
  const dispatch = useBackgroundDispatch()
- const keyringImport = useBackgroundSelector(
- (state) => state.keyrings.importing
- )
-
  const history = useHistory()
 
  const onInputChange = useCallback((seed: string) => {
  setRecoveryPhrase(seed)
  setErrorMessage("")
  }, [])
 
- useEffect(() => {
- if (areKeyringsUnlocked && keyringImport === "done" && isImporting) {
- setIsImporting(false)
- history.push(nextPage)
- }
- }, [history, areKeyringsUnlocked, keyringImport, nextPage, isImporting])
-
  const importWallet = useCallback(async () => {
  const plainRecoveryPhrase = recoveryPhrase
  .toLowerCase()
@@ -73,19 +63,26 @@ export default function ImportSeed(props: Props): ReactElement {
  setErrorMessage(t("errors.phraseLengthError"))
  } else if (isValidMnemonic(plainRecoveryPhrase)) {
  setIsImporting(true)
- await dispatch(
+
+ const { success } = (await dispatch(
  importSigner({
  type: SignerTypes.keyring,
  mnemonic: plainRecoveryPhrase,
  path,
  source: "import",
  })
- )
- dispatch(sendEvent(OneTimeAnalyticsEvent.ONBOARDING_FINISHED))
+ )) as unknown as AsyncThunkFulfillmentType<typeof importSigner>
+
+ if (success) {
+ await dispatch(sendEvent(OneTimeAnalyticsEvent.ONBOARDING_FINISHED))
+ history.push(nextPage)
+ } else {
+ setIsImporting(false)
+ }
  } else {
  setErrorMessage(t("errors.invalidPhraseError"))
  }
- }, [dispatch, recoveryPhrase, path, t])
+ }, [dispatch, recoveryPhrase, path, t, history, nextPage])
 
  if (!areKeyringsUnlocked)
  return (