Tabbed Onboarding - Additional accounts

background/main.ts

@@ -1096,10 +1096,6 @@ export default class Main extends BaseService<never> {
       await this.keyringService.unlock(password, true)
     })
 
-    keyringSliceEmitter.on("unlockKeyrings", async (password) => {
-      await this.keyringService.unlock(password)
-    })
-
     keyringSliceEmitter.on("lockKeyrings", async () => {
       await this.keyringService.lock()
     })
@@ -1580,6 +1576,10 @@ export default class Main extends BaseService<never> {
     )
   }
 
+  async unlockKeyrings(password: string): Promise<boolean> {
+    return this.keyringService.unlock(password)
+  }
+
   async getActivityDetails(txHash: string): Promise<ActivityDetail[]> {
     const addressNetwork = this.store.getState().ui.selectedAccount
     const transaction = await this.chainService.getTransaction(

background/redux-slices/keyrings.ts

@@ -30,7 +30,6 @@ export const initialState: KeyringsState = {
 
 export type Events = {
   createPassword: string
-  unlockKeyrings: string
   lockKeyrings: never
   generateNewKeyring: string | undefined
   deriveAddress: string
@@ -148,8 +147,8 @@ export const deriveAddress = createBackgroundAsyncThunk(
 
 export const unlockKeyrings = createBackgroundAsyncThunk(
   "keyrings/unlockKeyrings",
-  async (password: string) => {
-    await emitter.emit("unlockKeyrings", password)
+  async (password: string, { extra: { main } }) => {
+    return { success: await main.unlockKeyrings(password) }
   }
 )
 

ui/_locales/en/messages.json

@@ -113,7 +113,8 @@
         "stepsExplainer": "Please follow the steps below and click on Try Again!",
         "step1": "Plug in a single Ledger",
         "step2": "Enter pin to unlock",
-        "step3": "Open Ethereum App"
+        "step3": "Open Ethereum App",
+        "tip": "After clicking continue, select device and click connect"
       },
       "selectDevice": "Select the device",
       "clickConnect": "Click connect",
@@ -300,23 +301,20 @@
   },
   "onboarding": {
     "tabbed": {
+      "walletShortcut": "Did you know that you can open Taho using a keyboard shortcut?",
       "routeBasedContent": {
         "newSeed": {
-          "tip": "If you want an easy way to preview Taho, you can start by adding a view only account",
+          "tip": "If you want an easy way to preview Taho, you can start by adding a read only account.",
           "action": "Add preview account"
         },
-        "ledger": {
-          "tip": "Trezor integration coming soon, check out the open ",
-          "action": "Gitcoin bounty"
-        },
         "addWallet": {
-          "tip": "Some of the code for this was written by Community contributors"
+          "tip": "Several of Taho's most popular features were developed by our community."
         },
         "viewOnly": {
-          "tip": "A good way to take a peek at what Taho offers"
+          "tip": "A good way to take a peek at what Taho offers."
         },
         "importSeed": {
-          "tip": "Taho offers the possibility of adding multiple recovery phrases"
+          "tip": "Taho offers the possibility of adding multiple recovery phrases."
         },
         "default": {
           "fact1": "Fully owned by the community",
@@ -331,11 +329,15 @@
       },
       "addWallet": {
         "title": "Use existing wallet",
-        "tip": "You can always add more wallets later",
+        "titleExisting": "Add account",
+        "tip": "You can always add more wallets later.",
+        "existingListTitle": "Existing account",
+        "newWalletTitle": "New wallet",
         "options": {
           "importSeed": "Import recovery phrase",
           "ledger": "Connect to Ledger",
-          "readOnly": "Read-only address"
+          "readOnly": "Read-only address",
+          "createNew": "Create new wallet"
         },
         "importSeed": {
           "title": "Import secret recovery phrase",
@@ -352,14 +354,19 @@
           "title": "Read-only address",
           "subtitle": "Add an Ethereum address or ENS name to view an existing wallet in Taho",
           "submit": "Preview Taho",
-          "tip": "You can upgrade a view-only wallet later"
+          "tip": "You can upgrade a read-only wallet later."
         }
       },
       "newWalletIntro": {
         "title": "Before we get started",
         "warning": "It's important to write down your secret recovery phrase and store it somewhere safe.<br /><br />This is the only way to recover your accounts and funds.<br /><br /><u>You will not be able to export your recovery phrase later.</u>",
         "submit": "Create recovery phrase",
-        "tip": "You can upgrade a view-only wallet later"
+        "tip": "You can upgrade a read-only wallet later."
+      },
+      "unlockWallet": {
+        "title": "Password required",
+        "passwordInput": "Signing password",
+        "submit": "Confirm"
       },
       "newWalletReview": {
         "title": "Save and store your recovery phrase",
@@ -375,10 +382,11 @@
         "invalidStateMsg": "Verify the order and remove the ones that aren't in the right position.",
         "verifyValidState": "Verify recovery phrase",
         "submit": "Finalize",
-        "tip": "If you didn’t write it down, you can <url>start with a new phrase</url>"
+        "tip": "If you didn’t write it down, you can <url>start with a new phrase.</url>"
       },
       "complete": {
         "title": "Welcome to Taho",
+        "titleExisting": "Account added to Taho!",
         "subtitle": "For faster access we recommend pinning Taho to your browser",
         "animationAlt": "Pin the wallet"
       }
@@ -624,7 +632,7 @@
     }
   },
   "addNewChain": {
-    "subtitle": "Wants to add a main network to Tally Ho!",
+    "subtitle": "Wants to add a main network to Taho",
     "name": "Name",
     "chainId": "Chain ID",
     "currency": "Currency",

ui/components/AccountsNotificationPanel/AccountsNotificationPanelAccounts.tsx

@@ -435,7 +435,14 @@ export default function AccountsNotificationPanelAccounts({
           size="medium"
           iconSmall="add"
           iconPosition="left"
-          linkTo="/onboarding/add-wallet"
+          onClick={() => {
+            if (isEnabled(FeatureFlags.SUPPORT_TABBED_ONBOARDING)) {
+              window.open("/tab.html#onboarding")
+              window.close()
+            } else {
+              history.push("/onboarding/add-wallet")
+            }
+          }}
         >
           {t("accounts.notificationPanel.addWallet")}
         </SharedButton>

ui/components/Ledger/LedgerPanelContainer.tsx

@@ -27,7 +27,7 @@ export default function LedgerPanelContainer({
         .panel {
           display: flex;
           flex-flow: column;
-          max-width: 24rem;
+          max-width: 450px;
           margin: 0 auto;
           padding: 1rem;
         }

ui/components/Onboarding/OnboardingDerivationPathSelect.tsx

@@ -2,44 +2,60 @@ import React, {
   KeyboardEventHandler,
   ReactElement,
   useEffect,
+  useMemo,
   useRef,
   useState,
 } from "react"
 import { useTranslation } from "react-i18next"
-import { i18n } from "../../_locales/i18n"
+import { I18nKey } from "../../_locales/i18n"
 import SharedButton from "../Shared/SharedButton"
 import SharedInput from "../Shared/SharedInput"
 import SharedModal from "../Shared/SharedModal"
 import SharedSelect, { Option } from "../Shared/SharedSelect"
 
+type DerivationPath = {
+  value: string
+  label: I18nKey
+  hideActiveValue?: boolean
+}
+
+export enum DefaultPathIndex {
+  ledgerLive,
+  bip44,
+  ethTestnet,
+  ledgerLegacy,
+  rootstock,
+  rootstockTestnet,
+}
+
 // TODO make this network specific
-const initialDerivationPaths: Option[] = [
-  {
+const defaultDerivationPaths: Record<DefaultPathIndex, DerivationPath> = {
+  [DefaultPathIndex.ledgerLive]: {
     value: "m/44'/60'/x'/0/0",
-    label: i18n.t("ledger.derivationPaths.ledgerLive"),
+    label: "ledger.derivationPaths.ledgerLive",
   },
-  {
+  [DefaultPathIndex.bip44]: {
     value: "m/44'/60'/0'/0",
-    label: i18n.t("ledger.derivationPaths.bip44"),
+    label: "ledger.derivationPaths.bip44",
   },
-  {
+  [DefaultPathIndex.ethTestnet]: {
     value: "m/44'/1'/0'/0",
-    label: i18n.t("ledger.derivationPaths.ethTestnet"),
+    label: "ledger.derivationPaths.ethTestnet",
   },
-  {
+  [DefaultPathIndex.ledgerLegacy]: {
     value: "m/44'/60'/0'",
-    label: i18n.t("ledger.derivationPaths.ledgerLegacy"),
+    label: "ledger.derivationPaths.ledgerLegacy",
     hideActiveValue: true,
   },
-  {
+  [DefaultPathIndex.rootstock]: {
     value: "m/44'/137'/0'/0",
-    label: i18n.t("ledger.derivationPaths.rsk"),
+    label: "ledger.derivationPaths.rsk",
   },
-  {
+  [DefaultPathIndex.rootstockTestnet]: {
     value: "m/44'/37310'/0'/0",
-    label: i18n.t("ledger.derivationPaths.rskTestnet"),
+    label: "ledger.derivationPaths.rskTestnet",
   },
-]
+}
 
 const initialCustomPath = {
   coinType: "0",
@@ -50,16 +66,30 @@ const initialCustomPath = {
 
 export default function OnboardingDerivationPathSelect({
   onChange,
+  defaultPath,
 }: {
   onChange: (path: string) => void
+  defaultPath?: DefaultPathIndex
 }): ReactElement {
-  const { t } = useTranslation("translation", { keyPrefix: "onboarding" })
-  const [derivationPaths, setDerivationPaths] = useState(initialDerivationPaths)
+  const { t, i18n } = useTranslation("translation", { keyPrefix: "onboarding" })
+
+  const defaultPaths: Option[] = useMemo(
+    () =>
+      Object.values(defaultDerivationPaths).map((path) => ({
+        ...path,
+        label: i18n.t(path.label),
+      })),
+    [i18n]
+  )
+
+  const [derivationPaths, setDerivationPaths] = useState<Option[]>([])
 
   const [modalStep, setModalStep] = useState(0)
   const [customPath, setCustomPath] = useState(initialCustomPath)
   const [customPathLabel, setCustomPathLabel] = useState("")
-  const [defaultIndex, setDefaultIndex] = useState<number>()
+  const [defaultIndex, setDefaultIndex] = useState<number | undefined>(
+    defaultPath
+  )
 
   // Reset value to display placeholder after adding a custom path
   const customPathValue = customPath.isReset
@@ -113,6 +143,8 @@ export default function OnboardingDerivationPathSelect({
     if (e.key === "Enter") setModalStep(1)
   }
 
+  const derivationPathOptions = [...defaultPaths, ...derivationPaths]
+
   return (
     <>
       <SharedModal
@@ -183,14 +215,15 @@ export default function OnboardingDerivationPathSelect({
       </SharedModal>
       <SharedSelect
         label={t("derivationPath")}
-        options={derivationPaths}
+        options={derivationPathOptions}
         onChange={onChange}
         defaultIndex={defaultIndex}
         triggerLabel={t("addCustomPath")}
         onTrigger={() => setModalStep(1)}
         showValue
         showOptionValue
         placement="top"
+        width="100%"
       />
       <style jsx>{`
         .input_wrap {

ui/components/Onboarding/RouteBasedContent.tsx

@@ -0,0 +1,94 @@
+import React from "react"
+import { useTranslation } from "react-i18next"
+import { Route, Switch } from "react-router-dom"
+import OnboardingRoutes from "../../pages/Onboarding/Tabbed/Routes"
+import SharedButton from "../Shared/SharedButton"
+import WalletShortcut from "./WalletShortcut"
+
+export default function RouteBasedContent(): JSX.Element {
+  const { t } = useTranslation("translation", {
+    keyPrefix: "onboarding.tabbed.routeBasedContent",
+  })
+  return (
+    <Switch>
+      <Route key={OnboardingRoutes.NEW_SEED} path={OnboardingRoutes.NEW_SEED}>
+        <div className="fadeIn">
+          {t("newSeed.tip")}
+          <SharedButton
+            type="secondary"
+            size="medium"
+            linkTo={OnboardingRoutes.VIEW_ONLY_WALLET}
+          >
+            {t("newSeed.action")}
+          </SharedButton>
+        </div>
+        <style jsx>{`
+          div {
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+            align-items: center;
+          }
+        `}</style>
+      </Route>
+      <Route
+        key={OnboardingRoutes.ADD_WALLET}
+        path={OnboardingRoutes.ADD_WALLET}
+      >
+        <div className="fadeIn">{t("addWallet.tip")}</div>
+      </Route>
+      <Route
+        key={OnboardingRoutes.VIEW_ONLY_WALLET}
+        path={OnboardingRoutes.VIEW_ONLY_WALLET}
+      >
+        <div className="fadeIn">{t("viewOnly.tip")}</div>
+      </Route>
+      <Route
+        key={OnboardingRoutes.IMPORT_SEED}
+        path={OnboardingRoutes.IMPORT_SEED}
+      >
+        <div className="fadeIn">{t("importSeed.tip")}</div>
+      </Route>
+      <Route
+        key={OnboardingRoutes.ONBOARDING_COMPLETE}
+        path={OnboardingRoutes.ONBOARDING_COMPLETE}
+      >
+        <div className="fadeIn">
+          <WalletShortcut />
+        </div>
+      </Route>
+      <Route>
+        <div className="onboarding_facts fadeIn">
+          <p>{t("default.fact1")}</p>
+          <p>{t("default.fact2")}</p>
+          <p>{t("default.fact3")}</p>
+          <style jsx>
+            {`
+              .onboarding_facts {
+                color: var(--green-20);
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                gap: 24px;
+              }
+
+              .onboarding_facts p {
+                margin: 0;
+                text-align: left;
+                font-size: 18px;
+                line-height: 24px;
+              }
+
+              .onboarding_facts p::before {
+                content: url("./images/check.svg");
+                width: 16px;
+                height: 16px;
+                margin-right: 16px;
+              }
+            `}
+          </style>
+        </div>
+      </Route>
+    </Switch>
+  )
+}