From 4760f3509fb456bacdd98f424350445ffe43c111 Mon Sep 17 00:00:00 2001 From: Alex Barnsley <8069294+alexbarnsley@users.noreply.github.com> Date: Mon, 3 Aug 2020 13:14:30 +0100 Subject: [PATCH] fix: create wallet issues (#2570) --- .../SelectNetwork/SelectNetwork.tsx | 8 +- .../__snapshots__/SelectNetwork.test.tsx.snap | 3 + .../profile/e2e/create-profile-action.e2e.ts | 1 + .../SendTransactionForm.test.tsx.snap | 3 + .../__snapshots__/Registration.test.tsx.snap | 9 + .../SendIPFSTransaction.test.tsx.snap | 3 + .../Votes/__snapshots__/Votes.test.tsx.snap | 12 + .../pages/CreateWallet/CreateWallet.test.tsx | 47 +- .../pages/CreateWallet/CreateWallet.tsx | 45 +- .../__snapshots__/CreateWallet.test.tsx.snap | 450 ++++++++++++++++++ .../__snapshots__/ImportWallet.test.tsx.snap | 14 + 11 files changed, 566 insertions(+), 29 deletions(-) diff --git a/src/domains/network/components/SelectNetwork/SelectNetwork.tsx b/src/domains/network/components/SelectNetwork/SelectNetwork.tsx index 14e8a4c48d..484200bfe7 100644 --- a/src/domains/network/components/SelectNetwork/SelectNetwork.tsx +++ b/src/domains/network/components/SelectNetwork/SelectNetwork.tsx @@ -15,12 +15,13 @@ type SelectNetworkProps = { name?: string; value?: string; id?: string; + disabled?: boolean; onSelect?: (network?: NetworkData | null) => void; }; export const itemToString = (item: Network | null) => item?.extra?.displayName || ""; -export const SelectNetwork = ({ networks, placeholder, onSelect, name, id }: SelectNetworkProps) => { +export const SelectNetwork = ({ networks, placeholder, onSelect, name, id, disabled }: SelectNetworkProps) => { const [items] = React.useState(() => networks.map((network) => { const extended = getNetworkExtendedData({ coin: network.coin(), network: network.id() }); @@ -94,6 +95,7 @@ export const SelectNetwork = ({ networks, placeholder, onSelect, name, id }: Sel {items.map((item, index) => (
  • @@ -115,6 +116,7 @@ exports[`SelectNetwork should render with networks 1`] = `
  • @@ -138,6 +140,7 @@ exports[`SelectNetwork should render with networks 1`] = `
  • diff --git a/src/domains/profile/e2e/create-profile-action.e2e.ts b/src/domains/profile/e2e/create-profile-action.e2e.ts index dfbd78818b..582b59b95e 100644 --- a/src/domains/profile/e2e/create-profile-action.e2e.ts +++ b/src/domains/profile/e2e/create-profile-action.e2e.ts @@ -24,6 +24,7 @@ test("should create a profile and navigate to welcome screen", async (t) => { await t.click(Selector("button").withExactText(translations().COMMON.COMPLETE)); // Check welcome with created profiles + await t.wait(1000); // TODO: the profile loading is async so we need to give it a moment await t.expect(Selector("p").withText("John Doe").exists).ok(); await t.expect(Selector("p").withText("Anne Doe").exists).ok(); }); diff --git a/src/domains/transaction/components/SendTransactionForm/__snapshots__/SendTransactionForm.test.tsx.snap b/src/domains/transaction/components/SendTransactionForm/__snapshots__/SendTransactionForm.test.tsx.snap index 18ea69c831..d518c961ca 100644 --- a/src/domains/transaction/components/SendTransactionForm/__snapshots__/SendTransactionForm.test.tsx.snap +++ b/src/domains/transaction/components/SendTransactionForm/__snapshots__/SendTransactionForm.test.tsx.snap @@ -69,6 +69,7 @@ exports[`SendTransactionForm should render 1`] = `
  • @@ -92,6 +93,7 @@ exports[`SendTransactionForm should render 1`] = `
  • @@ -115,6 +117,7 @@ exports[`SendTransactionForm should render 1`] = `
  • diff --git a/src/domains/transaction/pages/Registration/__snapshots__/Registration.test.tsx.snap b/src/domains/transaction/pages/Registration/__snapshots__/Registration.test.tsx.snap index c2b7f4d2fe..b8e6406e7c 100644 --- a/src/domains/transaction/pages/Registration/__snapshots__/Registration.test.tsx.snap +++ b/src/domains/transaction/pages/Registration/__snapshots__/Registration.test.tsx.snap @@ -364,6 +364,7 @@ exports[`Registration should render 1st step 1`] = `
  • @@ -387,6 +388,7 @@ exports[`Registration should render 1st step 1`] = `
  • @@ -410,6 +412,7 @@ exports[`Registration should render 1st step 1`] = `
  • @@ -3377,6 +3380,7 @@ exports[`Registration should select registration type 1`] = `
  • @@ -3400,6 +3404,7 @@ exports[`Registration should select registration type 1`] = `
  • @@ -3423,6 +3428,7 @@ exports[`Registration should select registration type 1`] = `
  • @@ -3963,6 +3969,7 @@ exports[`Registration should should go back 1`] = `
  • @@ -3986,6 +3993,7 @@ exports[`Registration should should go back 1`] = `
  • @@ -4009,6 +4017,7 @@ exports[`Registration should should go back 1`] = `
  • diff --git a/src/domains/transaction/pages/SendIPFSTransaction/__snapshots__/SendIPFSTransaction.test.tsx.snap b/src/domains/transaction/pages/SendIPFSTransaction/__snapshots__/SendIPFSTransaction.test.tsx.snap index 391256cc31..f954c4e548 100644 --- a/src/domains/transaction/pages/SendIPFSTransaction/__snapshots__/SendIPFSTransaction.test.tsx.snap +++ b/src/domains/transaction/pages/SendIPFSTransaction/__snapshots__/SendIPFSTransaction.test.tsx.snap @@ -648,6 +648,7 @@ exports[`SendIPFSTransaction should render 1st step 1`] = `
  • @@ -671,6 +672,7 @@ exports[`SendIPFSTransaction should render 1st step 1`] = `
  • @@ -694,6 +696,7 @@ exports[`SendIPFSTransaction should render 1st step 1`] = `
  • diff --git a/src/domains/vote/pages/Votes/__snapshots__/Votes.test.tsx.snap b/src/domains/vote/pages/Votes/__snapshots__/Votes.test.tsx.snap index 43bf13cd57..6c688328e7 100644 --- a/src/domains/vote/pages/Votes/__snapshots__/Votes.test.tsx.snap +++ b/src/domains/vote/pages/Votes/__snapshots__/Votes.test.tsx.snap @@ -305,6 +305,7 @@ exports[`Votes should render 1`] = `
  • @@ -328,6 +329,7 @@ exports[`Votes should render 1`] = `
  • @@ -351,6 +353,7 @@ exports[`Votes should render 1`] = `
  • @@ -781,6 +784,7 @@ exports[`Votes should select a delegate 1`] = `
  • @@ -804,6 +808,7 @@ exports[`Votes should select a delegate 1`] = `
  • @@ -827,6 +832,7 @@ exports[`Votes should select a delegate 1`] = `
  • @@ -2098,6 +2104,7 @@ exports[`Votes should select a network 1`] = `
  • @@ -2121,6 +2128,7 @@ exports[`Votes should select a network 1`] = `
  • @@ -2144,6 +2152,7 @@ exports[`Votes should select a network 1`] = `
  • @@ -3238,6 +3247,7 @@ exports[`Votes should select address 1`] = `
  • @@ -3261,6 +3271,7 @@ exports[`Votes should select address 1`] = `
  • @@ -3284,6 +3295,7 @@ exports[`Votes should select address 1`] = `
  • diff --git a/src/domains/wallet/pages/CreateWallet/CreateWallet.test.tsx b/src/domains/wallet/pages/CreateWallet/CreateWallet.test.tsx index 1096eb89d8..945e2828d4 100644 --- a/src/domains/wallet/pages/CreateWallet/CreateWallet.test.tsx +++ b/src/domains/wallet/pages/CreateWallet/CreateWallet.test.tsx @@ -79,7 +79,7 @@ describe("CreateWallet", () => { bip39GenerateMock.mockRestore(); }); - it("should render 1st step", () => { + it("should render 1st step", async () => { const { result: form } = renderHook(() => useForm()); const { getByTestId, asFragment } = render( @@ -101,7 +101,11 @@ describe("CreateWallet", () => { fireEvent.keyDown(selectAssetsInput, { key: "Enter", code: 13 }); }); + expect(selectAssetsInput).toHaveAttribute("disabled"); + expect(selectAssetsInput).toHaveValue("Ark"); + + await waitFor(() => expect(selectAssetsInput).not.toHaveAttribute("disabled")); }); it("should render 2nd step", async () => { @@ -189,6 +193,41 @@ describe("CreateWallet", () => { expect(form.current.getValues()).toEqual({ name: "Test" }); }); + it("should not allow quick swapping of networks", async () => { + const history = createMemoryHistory(); + const createURL = `/profiles/${fixtureProfileId}/wallets/create`; + history.push(createURL); + + const { queryAllByText, getAllByTestId, getByTestId, getByText, asFragment } = renderWithRouter( + + + , + { + routes: [createURL], + history, + }, + ); + + await waitFor(() => expect(getByTestId(`CreateWallet__first-step`)).toBeTruthy()); + expect(asFragment()).toMatchSnapshot(); + + const continueButton = getByTestId("CreateWallet__continue-button"); + const networkIcons = getAllByTestId("SelectNetwork__NetworkIcon--container"); + + fireEvent.click(networkIcons[0]); // click ARK + fireEvent.click(networkIcons[1]); // click DARK + + expect(getByTestId("SelectNetworkInput__input")).toHaveAttribute("disabled"); + for (const networkIcon of getAllByTestId("SelectNetwork__NetworkIcon--container")) { + expect(networkIcon).toHaveAttribute("disabled"); + } + expect(continueButton).toHaveAttribute("disabled"); + + expect(getByTestId("NetworkIcon-ARK-mainnet")).toHaveClass("border-theme-success-200"); + + await waitFor(() => expect(continueButton).not.toHaveAttribute("disabled")); + }); + it("should render", async () => { const history = createMemoryHistory(); const createURL = `/profiles/${fixtureProfileId}/wallets/create`; @@ -297,14 +336,14 @@ describe("CreateWallet", () => { await waitFor(() => expect(getByTestId(`CreateWallet__fourth-step`)).toBeTruthy()); + const historySpy = jest.spyOn(history, "push"); act(() => { fireEvent.change(getByTestId("CreateWallet__wallet-name"), { target: { value: "Test Wallet" } }); fireEvent.click(getByTestId(`CreateWallet__save-button`)); }); - await waitFor(() => - expect(profile.wallets().values()[0].settings().get(WalletSetting.Alias)).toEqual("Test Wallet"), - ); + await waitFor(() => expect(historySpy).toHaveBeenCalledWith(`/profiles/${profile?.id()}/dashboard`)); + expect(profile.wallets().values()[0].settings().get(WalletSetting.Alias)).toEqual("Test Wallet"); expect(asFragment()).toMatchSnapshot(); }); diff --git a/src/domains/wallet/pages/CreateWallet/CreateWallet.tsx b/src/domains/wallet/pages/CreateWallet/CreateWallet.tsx index 5cb5934c2a..b73857fa8d 100644 --- a/src/domains/wallet/pages/CreateWallet/CreateWallet.tsx +++ b/src/domains/wallet/pages/CreateWallet/CreateWallet.tsx @@ -26,6 +26,7 @@ import { MnemonicVerification } from "../../components/MnemonicVerification"; export const FirstStep = ({ env, profile }: { env: Environment; profile: Profile }) => { const { getValues, setValue } = useFormContext(); + const [isGeneratingWallet, setIsGeneratingWallet] = React.useState(false); const networks = useMemo(() => env.availableNetworks(), [env]); const { t } = useTranslation(); @@ -45,9 +46,11 @@ export const FirstStep = ({ env, profile }: { env: Environment; profile: Profile return; } + setIsGeneratingWallet(true); const { mnemonic, wallet } = await profile.wallets().generate(network.coin(), network.id()); setValue("wallet", wallet, true); setValue("mnemonic", mnemonic, true); + setIsGeneratingWallet(false); }; return ( @@ -63,7 +66,12 @@ export const FirstStep = ({ env, profile }: { env: Environment; profile: Profile
    - + @@ -225,7 +233,6 @@ export const CreateWallet = () => { const { t } = useTranslation(); const [activeTab, setActiveTab] = useState(1); - const [hasSubmitted, setHasSubmitted] = useState(false); const activeProfile = useActiveProfile(); const dashboardRoute = `/profiles/${activeProfile?.id()}/dashboard`; @@ -237,7 +244,7 @@ export const CreateWallet = () => { ]; const form = useForm({ mode: "onChange" }); - const { getValues, formState, register } = form; + const { getValues, formState, register, setValue } = form; useEffect(() => { register("network", { required: true }); @@ -250,29 +257,21 @@ export const CreateWallet = () => { await persist(); - setHasSubmitted(true); + setValue("wallet", null); + + history.push(dashboardRoute); }; - useEffect(() => { - if (hasSubmitted) { - history.push(dashboardRoute); - } + useEffect( + () => () => { + const currentWallet = getValues("wallet"); - // TODO: Figure out a way without setTimeout - return () => { - setTimeout(() => { - if (hasSubmitted) { - return; - } - - const currentWallet = getValues("wallet"); - - if (currentWallet) { - activeProfile?.wallets().forget(currentWallet.id()); - } - }, 100); - }; - }, [activeProfile, dashboardRoute, getValues, hasSubmitted, history]); + if (currentWallet) { + activeProfile?.wallets().forget(currentWallet.id()); + } + }, + [activeProfile, getValues], + ); const handleBack = () => { setActiveTab(activeTab - 1); diff --git a/src/domains/wallet/pages/CreateWallet/__snapshots__/CreateWallet.test.tsx.snap b/src/domains/wallet/pages/CreateWallet/__snapshots__/CreateWallet.test.tsx.snap index 1e16df904a..a6e2bf90b2 100644 --- a/src/domains/wallet/pages/CreateWallet/__snapshots__/CreateWallet.test.tsx.snap +++ b/src/domains/wallet/pages/CreateWallet/__snapshots__/CreateWallet.test.tsx.snap @@ -1,5 +1,449 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`CreateWallet should not allow quick swapping of networks 1`] = ` + +
    + +
    +
    + + arrow-back.svg + +
    +
    + + + Go back to Portfolio + + +
    +
    +
    +
    +
    +
    +
    +
      +
    • +
    • +
    • +
    • +
    +
    +
    +
    +
    +
    +
    +

    + Select a Network +

    +
    + Select a Network to create your new wallet address +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    + + +
    +
    +
    +
    +
    +
    +
    +
    +     +`; + exports[`CreateWallet should not have a pending wallet if leaving on step 1 1`] = ``; exports[`CreateWallet should remove pending wallet if not submitted 1`] = ` @@ -364,6 +808,7 @@ exports[`CreateWallet should remove pending wallet if not submitted 1`] = `
  • @@ -387,6 +832,7 @@ exports[`CreateWallet should remove pending wallet if not submitted 1`] = `
  • @@ -808,6 +1254,7 @@ exports[`CreateWallet should render 1`] = `
  • @@ -831,6 +1278,7 @@ exports[`CreateWallet should render 1`] = `
  • @@ -978,6 +1426,7 @@ exports[`CreateWallet should render 1st step 1`] = `
  • @@ -1001,6 +1450,7 @@ exports[`CreateWallet should render 1st step 1`] = `
  • diff --git a/src/domains/wallet/pages/ImportWallet/__snapshots__/ImportWallet.test.tsx.snap b/src/domains/wallet/pages/ImportWallet/__snapshots__/ImportWallet.test.tsx.snap index b2b8cb4686..aa9d9b1a68 100644 --- a/src/domains/wallet/pages/ImportWallet/__snapshots__/ImportWallet.test.tsx.snap +++ b/src/domains/wallet/pages/ImportWallet/__snapshots__/ImportWallet.test.tsx.snap @@ -366,6 +366,7 @@ exports[`ImportWallet should go to previous step 1`] = `
  • @@ -389,6 +390,7 @@ exports[`ImportWallet should go to previous step 1`] = `
  • @@ -803,6 +805,7 @@ exports[`ImportWallet should import by address 1`] = `
  • @@ -826,6 +829,7 @@ exports[`ImportWallet should import by address 1`] = `
  • @@ -1240,6 +1244,7 @@ exports[`ImportWallet should import by mnemonic 1`] = `
  • @@ -1263,6 +1268,7 @@ exports[`ImportWallet should import by mnemonic 1`] = `
  • @@ -1401,6 +1407,7 @@ exports[`ImportWallet should render 1st step 1`] = `
  • @@ -1424,6 +1431,7 @@ exports[`ImportWallet should render 1st step 1`] = `
  • @@ -1930,6 +1938,7 @@ exports[`ImportWallet should show an error if import a NEO mainnet address 1`] =
  • @@ -1953,6 +1962,7 @@ exports[`ImportWallet should show an error if import a NEO mainnet address 1`] =
  • @@ -2367,6 +2377,7 @@ exports[`ImportWallet should show an error message for invalid address 1`] = `
  • @@ -2390,6 +2401,7 @@ exports[`ImportWallet should show an error message for invalid address 1`] = `
  • @@ -2804,6 +2816,7 @@ exports[`ImportWallet should show an error message if trying to import a duplica
  • @@ -2827,6 +2840,7 @@ exports[`ImportWallet should show an error message if trying to import a duplica