key recovery updates

packages/app-extension/src/components/Onboarding/pages/CreateOrImportWallet.tsx

@@ -1,4 +1,4 @@
-import { PrimaryButton } from "@coral-xyz/tamagui";
+import { PrimaryButton } from "@coral-xyz/react-common";
 import { Box } from "@mui/material";
 
 import { SubtextParagraph } from "../../common";
@@ -31,7 +31,7 @@ export const CreateOrImportWallet = ({
         <Box sx={{ mb: "16px" }}>
           <PrimaryButton
             label="Create a new wallet"
-            onPress={() => onNext("create")}
+            onClick={() => onNext("create")}
           />
         </Box>
         <SubtextParagraph onClick={() => onNext("import")}>

packages/app-extension/src/components/Onboarding/pages/KeyringTypeSelector.tsx

@@ -1,6 +1,11 @@
+import { useState } from "react";
 import type { KeyringType } from "@coral-xyz/common";
 import { toTitleCase } from "@coral-xyz/common";
-import { HardwareWalletIcon, PrimaryButton } from "@coral-xyz/react-common";
+import {
+  HardwareWalletIcon,
+  PrimaryButton,
+  SecondaryButton,
+} from "@coral-xyz/react-common";
 import { Box } from "@mui/material";
 
 import { Header, HeaderIcon, SubtextParagraph } from "../../common";
@@ -12,6 +17,7 @@ export const KeyringTypeSelector = ({
   action: "create" | "import" | "recover" | string;
   onNext: (keyringType: KeyringType) => void;
 }) => {
+  const [showAdvancedOptions, setShowAdvancedOptions] = useState(false);
   return (
     <div
       style={{
@@ -58,23 +64,39 @@ export const KeyringTypeSelector = ({
       >
         <Box style={{ marginBottom: "16px" }}>
           <PrimaryButton
-            label={`${toTitleCase(action)} with recovery phrase`}
+            label={`${toTitleCase(action)} with secret phrase`}
             onClick={() => onNext("mnemonic")}
           />
         </Box>
-        {action === "import" || action === "recover" ? (
-          <Box style={{ marginBottom: "16px" }}>
-            <PrimaryButton
-              label={`${toTitleCase(action)} with private key`}
-              onClick={() => onNext("private-key")}
-            />
-          </Box>
-        ) : null}
-        <SubtextParagraph onClick={() => onNext("ledger")}>
-          {action === "recover"
-            ? "Recover using a hardware wallet"
-            : "I have a hardware wallet"}
-        </SubtextParagraph>
+        {showAdvancedOptions ? (
+          <>
+            {action === "import" || action === "recover" ? (
+              <Box style={{ marginBottom: "16px" }}>
+                <SecondaryButton
+                  label={`${toTitleCase(action)} with private key`}
+                  onClick={() => onNext("private-key")}
+                />
+              </Box>
+            ) : null}
+            <Box style={{ marginBottom: "16px" }}>
+              <SecondaryButton
+                label={
+                  action === "recover"
+                    ? "Recover with hardware wallet"
+                    : "I have a hardware wallet"
+                }
+                onClick={() => onNext("ledger")}
+              />
+            </Box>
+            <SubtextParagraph onClick={() => setShowAdvancedOptions(false)}>
+              Hide advanced options
+            </SubtextParagraph>
+          </>
+        ) : (
+          <SubtextParagraph onClick={() => setShowAdvancedOptions(true)}>
+            Show advanced options
+          </SubtextParagraph>
+        )}
       </Box>
     </div>
   );

packages/app-extension/src/components/Unlocked/Settings/AddConnectWallet/CreateMnemonic.tsx

@@ -47,11 +47,9 @@ export function CreateOrImportMnemonic({
     },
     "Import recovery phrase": {
       onClick: () =>
-        nav.push("import-from-mnemonic", {
+        nav.push("set-and-sync-mnemonic", {
           blockchain,
           keyringExists,
-          forceSetMnemonic: true,
-          inputMnemonic: true,
         }),
       icon: (props: any) => <ImportedIcon {...props} />,
       detailIcon: <PushDetail />,

packages/app-extension/src/components/Unlocked/Settings/AddConnectWallet/ImportMnemonic.tsx

@@ -11,11 +11,16 @@ import {
   UI_RPC_METHOD_KEYRING_IMPORT_SECRET_KEY,
   UI_RPC_METHOD_KEYRING_IMPORT_WALLET,
   UI_RPC_METHOD_KEYRING_SET_MNEMONIC,
+  UI_RPC_METHOD_KEYRING_STORE_MNEMONIC_SYNC,
 } from "@coral-xyz/common";
-import { PrimaryButton, TextInput } from "@coral-xyz/react-common";
-import { useBackgroundClient, useRpcRequests } from "@coral-xyz/recoil";
+import { CheckIcon, PrimaryButton, TextInput } from "@coral-xyz/react-common";
+import {
+  useBackgroundClient,
+  useDehydratedWallets,
+  useRpcRequests,
+} from "@coral-xyz/recoil";
 import { useCustomTheme } from "@coral-xyz/themes";
-import { Box } from "@mui/material";
+import { Box, Typography } from "@mui/material";
 
 import { useSteps } from "../../../../hooks/useSteps";
 import { Header } from "../../../common";
@@ -29,6 +34,103 @@ import { useNavigation } from "../../../common/Layout/NavStack";
 
 import { ConfirmCreateWallet } from "./";
 
+// WARNING: this will force set the mnemonic. Only use this if no mnemonic
+//          exists.
+export function ImportMnemonicAutomatic() {
+  const background = useBackgroundClient();
+  const dehydratedWallets = useDehydratedWallets();
+  const [openDrawer, setOpenDrawer] = useState(false);
+  const { close } = useDrawerContext();
+
+  const onSync = async (mnemonic: string) => {
+    await background.request({
+      method: UI_RPC_METHOD_KEYRING_SET_MNEMONIC,
+      params: [mnemonic],
+    });
+    if (dehydratedWallets.length > 0) {
+      await background.request({
+        method: UI_RPC_METHOD_KEYRING_STORE_MNEMONIC_SYNC,
+        params: [dehydratedWallets],
+      });
+    }
+  };
+
+  return (
+    <>
+      <MnemonicInput
+        key="MnemonicInput"
+        buttonLabel="Import"
+        onNext={async (mnemonic) => {
+          onSync(mnemonic);
+          setOpenDrawer(true);
+        }}
+      />
+      <WithMiniDrawer
+        openDrawer={openDrawer}
+        setOpenDrawer={(isOpen: boolean) => {
+          setOpenDrawer(isOpen);
+          if (!isOpen) {
+            close();
+          }
+        }}
+        backdropProps={{
+          style: {
+            opacity: 0.8,
+            background: "#18181b",
+          },
+        }}
+      >
+        <ConfirmWalletSync
+          onClose={() => {
+            setOpenDrawer(false);
+            close();
+          }}
+        />
+      </WithMiniDrawer>
+    </>
+  );
+}
+
+export const ConfirmWalletSync = ({ onClose }: { onClose: () => void }) => {
+  const theme = useCustomTheme();
+  return (
+    <div
+      style={{
+        height: "232px",
+        backgroundColor: theme.custom.colors.bg2,
+        padding: "16px",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "space-between",
+      }}
+    >
+      <div>
+        <Typography
+          style={{
+            marginTop: "16px",
+            textAlign: "center",
+            fontWeight: 500,
+            fontSize: "18px",
+            lineHeight: "24px",
+            color: theme.custom.colors.fontColor,
+          }}
+        >
+          Recovery Phrase Set
+        </Typography>
+        <div
+          style={{
+            textAlign: "center",
+            marginTop: "24px",
+          }}
+        >
+          <CheckIcon />
+        </div>
+      </div>
+      <PrimaryButton label="Done" onClick={() => onClose()} />
+    </div>
+  );
+};
+
 export function ImportMnemonic({
   blockchain,
   keyringExists,
@@ -48,6 +150,7 @@ export function ImportMnemonic({
   const { step, nextStep } = useSteps();
   const { close: closeParentDrawer } = useDrawerContext();
   const { signMessageForWallet } = useRpcRequests();
+  const dehydratedWallets = useDehydratedWallets();
 
   const [openDrawer, setOpenDrawer] = useState(false);
   const [mnemonic, setMnemonic] = useState<string | true>(true);
@@ -78,6 +181,15 @@ export function ImportMnemonic({
         method: UI_RPC_METHOD_KEYRING_IMPORT_WALLET,
         params: [signedWalletDescriptor],
       });
+      const walletsToSync = dehydratedWallets.filter(
+        (w) => w.publicKey !== publicKey
+      );
+      if (walletsToSync.length > 0) {
+        await background.request({
+          method: UI_RPC_METHOD_KEYRING_STORE_MNEMONIC_SYNC,
+          params: [walletsToSync],
+        });
+      }
     } else {
       if (!inputMnemonic) {
         if (keyringExists) {