Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

remove hardware wallet from create wallet flow #3384

Merged
merged 1 commit into from
Mar 16, 2023
Merged

remove hardware wallet from create wallet flow #3384

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 13 additions & 73 deletions packages/app-extension/src/components/Unlocked/Settings/AddConnectWallet/CreateMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,42 +2,31 @@ import { useEffect, useState } from "react";
import type { Blockchain } from "@coral-xyz/common";
import {
getAddMessage,
openConnectHardware,
UI_RPC_METHOD_BLOCKCHAIN_KEYRINGS_ADD,
UI_RPC_METHOD_FIND_WALLET_DESCRIPTOR,
UI_RPC_METHOD_KEYRING_DERIVE_WALLET,
UI_RPC_METHOD_KEYRING_IMPORT_WALLET,
UI_RPC_METHOD_KEYRING_STORE_READ_ALL_PUBKEYS,
} from "@coral-xyz/common";
import {
HardwareIcon,
MnemonicIcon,
PushDetail,
} from "@coral-xyz/react-common";
import {
useBackgroundClient,
useEnabledBlockchains,
useKeyringHasMnemonic,
useRpcRequests,
useUser,
} from "@coral-xyz/recoil";
import { Box } from "@mui/material";

import { Header, SubtextParagraph } from "../../../common";
import {
useDrawerContext,
WithMiniDrawer,
} from "../../../common/Layout/Drawer";
import { useNavigation } from "../../../common/Layout/NavStack";
import { SettingsList } from "../../../common/Settings/List";

import { ConfirmCreateWallet } from "./";

export function CreateMenu({ blockchain }: { blockchain: Blockchain }) {
export function CreateMenuAction({ blockchain }: { blockchain: Blockchain }) {
const nav = useNavigation();
const background = useBackgroundClient();
const hasMnemonic = useKeyringHasMnemonic();
const user = useUser();
const enabledBlockchains = useEnabledBlockchains();
const keyringExists = enabledBlockchains.includes(blockchain);
const { close: closeParentDrawer } = useDrawerContext();
Expand All @@ -51,7 +40,6 @@ export function CreateMenu({ blockchain }: { blockchain: Blockchain }) {
// adding then additional logic is required to select the account index of
// the first derivation path added
const [hasHdPublicKeys, setHasHdPublicKeys] = useState(false);
const [hasLedgerPublicKeys, setHasLedgerPublicKeys] = useState(false);

useEffect(() => {
(async () => {
Expand All @@ -62,21 +50,12 @@ export function CreateMenu({ blockchain }: { blockchain: Blockchain }) {
const blockchainPublicKeys = publicKeys[blockchain];
if (blockchainPublicKeys) {
setHasHdPublicKeys(blockchainPublicKeys.hdPublicKeys.length > 0);
setHasLedgerPublicKeys(
blockchainPublicKeys.ledgerPublicKeys.length > 0
);
}

createNewWithPhrase();
})();
}, [background, blockchain]);

useEffect(() => {
const prevTitle = nav.title;
nav.setOptions({ headerTitle: "" });
return () => {
nav.setOptions({ headerTitle: prevTitle });
};
}, [nav]);

const createNewWithPhrase = async () => {
// Mnemonic based keyring. This is the simple case because we don't
// need to prompt for the user to open their Ledger app to get the
Expand Down Expand Up @@ -146,65 +125,26 @@ export function CreateMenu({ blockchain }: { blockchain: Blockchain }) {
}
};

const createMenu = {
"Secret recovery phrase": {
onClick: createNewWithPhrase,
icon: (props: any) => <MnemonicIcon {...props} />,
detailIcon: <PushDetail />,
},
"Hardware wallet": {
onClick: () => {
openConnectHardware(
blockchain,
// `create` gets a default account index for derivations
// where no wallets are used, `derive` just gets the next
// wallet in line given the existing derivation paths
keyringExists && hasLedgerPublicKeys ? "derive" : "create"
);
window.close();
},
icon: (props: any) => <HardwareIcon {...props} />,
detailIcon: <PushDetail />,
},
};

return (
<>
<div
style={{
display: "flex",
flexDirection: "column",
height: "100%",
}}
>
<Box sx={{ margin: "24px" }}>
<Header text="Create a wallet" />
<SubtextParagraph>
Add a new wallet for @{user.username} using one of the following:
</SubtextParagraph>
</Box>
<SettingsList menuItems={createMenu} />
</div>
<WithMiniDrawer
openDrawer={openDrawer}
setOpenDrawer={setOpenDrawer}
backdropProps={{
<WithMiniDrawer
openDrawer={openDrawer}
setOpenDrawer={setOpenDrawer}
backdropProps={{
style: {
opacity: 0.8,
background: "#18181b",
},
}}
>
<ConfirmCreateWallet
blockchain={blockchain}
publicKey={newPublicKey}
onClose={() => {
<ConfirmCreateWallet
blockchain={blockchain}
publicKey={newPublicKey}
onClose={() => {
setOpenDrawer(false);
closeParentDrawer();
}}
isLoading={loading}
isLoading={loading}
/>
</WithMiniDrawer>
</>
</WithMiniDrawer>
);
}
40 changes: 23 additions & 17 deletions packages/app-extension/src/components/Unlocked/Settings/AddConnectWallet/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useEffect } from "react";
import { useEffect, useState } from "react";
import type { Blockchain } from "@coral-xyz/common";
import { openAddUserAccount, openConnectHardware } from "@coral-xyz/common";
import {
Expand All @@ -23,6 +23,8 @@ import { useNavigation } from "../../../common/Layout/NavStack";
import { SettingsList } from "../../../common/Settings/List";
import { WalletListItem } from "../YourAccount/EditWallets";

import { CreateMenuAction } from "./CreateMenu";

export function AddConnectPreview() {
const nav = useNavigation();
const user = useUser();
Expand Down Expand Up @@ -144,10 +146,11 @@ export function AddConnectWalletMenu({
export function AddWalletMenu({ blockchain }: { blockchain: Blockchain }) {
const navigation = useNavigation();
const user = useUser();
const [showCreateMenuAction, setShowCreateMenuAction] = useState(false);

const createOrImportMenu = {
"Create a new wallet": {
onClick: () => navigation.push("create-wallet", { blockchain }),
onClick: () => setShowCreateMenuAction(true),
icon: (props: any) => <PlusCircleIcon {...props} />,
detailIcon: <PushDetail />,
},
Expand All @@ -159,21 +162,24 @@ export function AddWalletMenu({ blockchain }: { blockchain: Blockchain }) {
};

return (
<div
style={{
display: "flex",
flexDirection: "column",
height: "100%",
}}
>
<Box sx={{ margin: "24px" }}>
<Header text="Create or import a wallet" />
<SubtextParagraph>
Add a new wallet for @{user.username} on Backpack.
</SubtextParagraph>
</Box>
<SettingsList menuItems={createOrImportMenu} />
</div>
<>
<div
style={{
display: "flex",
flexDirection: "column",
height: "100%",
}}
>
<Box sx={{ margin: "24px" }}>
<Header text="Create or import a wallet" />
<SubtextParagraph>
Add a new wallet for @{user.username} on Backpack.
</SubtextParagraph>
</Box>
<SettingsList menuItems={createOrImportMenu} />
</div>
{showCreateMenuAction ? <CreateMenuAction blockchain={blockchain} /> : null}
</>
);
}

Expand Down
7 changes: 1 addition & 6 deletions packages/app-extension/src/components/Unlocked/Settings/SettingsNavStackDrawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,7 @@ import { ResetWelcome } from "../../Locked/Reset/ResetWelcome";
import { ContactRequests, Contacts } from "../Messages/Contacts";
import { Requests } from "../Messages/Requests";

import { CreateMenu } from "./AddConnectWallet/CreateMenu";
import { CreateMnemonic } from "./AddConnectWallet/CreateMnemonic"
import { CreateMnemonic } from "./AddConnectWallet/CreateMnemonic";
import { ImportMenu } from "./AddConnectWallet/ImportMenu";
import { ImportMnemonic } from "./AddConnectWallet/ImportMnemonic";
import { ImportSecretKey } from "./AddConnectWallet/ImportSecretKey";
Expand Down Expand Up @@ -70,10 +69,6 @@ export function SettingsNavStackDrawer({
name="add-connect-wallet"
component={(props: any) => <AddConnectWalletMenu {...props} />}
/>
<NavStackScreen
name="create-wallet"
component={(props: any) => <CreateMenu {...props} />}
/>
<NavStackScreen
name="create-mnemonic"
component={(props: any) => <CreateMnemonic {...props} />}
Expand Down
5 changes: 0 additions & 5 deletions packages/app-extension/src/components/common/WalletList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,6 @@ import {
AddConnectPreview,
AddConnectWalletMenu,
} from "../Unlocked/Settings/AddConnectWallet";
import { CreateMenu } from "../Unlocked/Settings/AddConnectWallet/CreateMenu";
import { CreateMnemonic } from "../Unlocked/Settings/AddConnectWallet/CreateMnemonic";
import { ImportMenu } from "../Unlocked/Settings/AddConnectWallet/ImportMenu";
import { ImportMnemonic } from "../Unlocked/Settings/AddConnectWallet/ImportMnemonic";
Expand Down Expand Up @@ -248,10 +247,6 @@ function WalletNavStack({
name="edit-wallets-blockchain-selector"
component={(props: any) => <WalletListBlockchainSelector {...props} />}
/>
<NavStackScreen
name="create-wallet"
component={(props: any) => <CreateMenu {...props} />}
/>
<NavStackScreen
name="import-wallet"
component={(props: any) => <ImportMenu {...props} />}
Expand Down