Skip to content

Commit

Permalink
key recovery updates (#3427)
Browse files Browse the repository at this point in the history
  • Loading branch information
@armaniferrante
armaniferrante authored Apr 1, 2023
1 parent 099cce3 commit 567f0f5
Show file tree
Hide file tree
Showing 8 changed files with 273 additions and 93 deletions.
4 changes: 2 additions & 2 deletions packages/app-extension/src/components/Onboarding/pages/CreateOrImportWallet.tsx
View file
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -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")}>
Expand Down
52 changes: 37 additions & 15 deletions packages/app-extension/src/components/Onboarding/pages/KeyringTypeSelector.tsx
View file
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -12,6 +17,7 @@ export const KeyringTypeSelector = ({
action: "create" | "import" | "recover" | string;
onNext: (keyringType: KeyringType) => void;
}) => {
const [showAdvancedOptions, setShowAdvancedOptions] = useState(false);
return (
<div
style={{
Expand Down Expand Up @@ -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>
);
Expand Down
4 changes: 1 addition & 3 deletions packages/app-extension/src/components/Unlocked/Settings/AddConnectWallet/CreateMnemonic.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 />,
Expand Down
118 changes: 115 additions & 3 deletions packages/app-extension/src/components/Unlocked/Settings/AddConnectWallet/ImportMnemonic.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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,
Expand All @@ -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);
Expand Down Expand Up @@ -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) {
Expand Down
Loading

1 comment on commit 567f0f5

@vercel
Copy link

@vercel vercel bot commented on 567f0f5 Apr 1, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

backpack – ./

www.backpack.app
backpack-git-master-200ms.vercel.app
devnet.backpack.app
backpack.app
backpack-200ms.vercel.app

Please sign in to comment.