From c20b886a8d399f1eb7b0c7bf027bef1495a50d06 Mon Sep 17 00:00:00 2001 From: Calvin Kei Date: Tue, 24 Aug 2021 23:22:29 +0800 Subject: [PATCH 01/13] close ledger devices on back --- components/AddAccountButton/index.tsx | 2 ++ components/ConnectLedgerDialogContent/index.tsx | 4 ++-- components/CreateWalletDialog/index.tsx | 15 ++++++++++++--- contexts/WalletsContext.tsx | 2 +- locales/en/common.json | 2 +- misc/utils.ts | 6 ++++++ 6 files changed, 24 insertions(+), 7 deletions(-) diff --git a/components/AddAccountButton/index.tsx b/components/AddAccountButton/index.tsx index 02316bbd..f72828d6 100644 --- a/components/AddAccountButton/index.tsx +++ b/components/AddAccountButton/index.tsx @@ -15,6 +15,7 @@ import SelectAddressesContent from './SelectAddresses' import SecurityPasswordDialogContent from '../SecurityPasswordDialogContent' import SuccessContent from '../Success' import ConnectLedgerDialogContent from '../ConnectLedgerDialogContent' +import { closeAllLedgerConnections } from '../../misc/utils' let ledgerTransport @@ -38,6 +39,7 @@ const AddAccountButton: React.FC = ({ walletId }) => { const [dialogOpen, setDialogOpen] = React.useState(false) const onClose = () => { setDialogOpen(false) + closeAllLedgerConnections() } const theme = useTheme() const isMobile = useIsMobile() diff --git a/components/ConnectLedgerDialogContent/index.tsx b/components/ConnectLedgerDialogContent/index.tsx index 4aba7f3e..58bfa5ff 100644 --- a/components/ConnectLedgerDialogContent/index.tsx +++ b/components/ConnectLedgerDialogContent/index.tsx @@ -5,6 +5,7 @@ import TransportWebHID from '@ledgerhq/hw-transport-webhid' import { LaunchpadLedger } from '@cosmjs/ledger-amino' import LedgerImage from '../../assets/images/ledger.svg' import useStyles from './styles' +import { closeAllLedgerConnections } from '../../misc/utils' interface ConnectLedgerDialogContentProps { onConnect(transport: any): void @@ -27,8 +28,7 @@ const ConnectLedgerDialogContent: React.FC = ({ } catch (err) { // Ledger is connected previously. Close the previous connections if (err.message === 'The device is already open.') { - const devices = await TransportWebHID.list() - await Promise.all(devices.map((d) => d.close())) + closeAllLedgerConnections() } retryTimeout = setTimeout(connectLedger, 1000) } diff --git a/components/CreateWalletDialog/index.tsx b/components/CreateWalletDialog/index.tsx index 17ab3894..e66215bc 100644 --- a/components/CreateWalletDialog/index.tsx +++ b/components/CreateWalletDialog/index.tsx @@ -19,6 +19,7 @@ import useStateHistory from '../../misc/useStateHistory' import ConnectLedgerDialogContent from '../ConnectLedgerDialogContent' import useIsMobile from '../../misc/useIsMobile' import getWalletAddress from '../../misc/getWalletAddress' +import { closeAllLedgerConnections } from '../../misc/utils' let ledgerSigner @@ -134,7 +135,9 @@ const CreateWalletDialog: React.FC = ({ open, onClose, const saveWallet = React.useCallback( async (name: string, cryptos: string[], type = 'mnemonic') => { const addresses = await Promise.all( - cryptos.map((c) => getWalletAddress(mnemonic, c, 0, ledgerSigner)) + cryptos.map((c) => + getWalletAddress(mnemonic, c, 0, type === 'ledger' ? ledgerSigner : undefined) + ) ) await addWallet({ type, @@ -249,14 +252,20 @@ const CreateWalletDialog: React.FC = ({ open, onClose, return ( {isPrevStageAvailable ? ( - + { + toPrevStage() + closeAllLedgerConnections() + }} + > ) : null} - {content.title} + {content.title ? {content.title} : null} {content.content} ) diff --git a/contexts/WalletsContext.tsx b/contexts/WalletsContext.tsx index 08b3df62..8061e69f 100644 --- a/contexts/WalletsContext.tsx +++ b/contexts/WalletsContext.tsx @@ -112,7 +112,7 @@ const WalletsProvider: React.FC = ({ children }) => { }, }) setIsFirstTimeUser(false) - setWallets((ws) => [result.wallet, ...ws]) + setWallets((ws) => [{ ...result.wallet, type: wallet.type }, ...ws]) setAccounts((acs) => [...result.accounts, ...acs]) }, [password, setIsFirstTimeUser, setWallets, setAccounts] diff --git a/locales/en/common.json b/locales/en/common.json index 4e756edd..c25b9537 100644 --- a/locales/en/common.json +++ b/locales/en/common.json @@ -33,7 +33,7 @@ "create new wallet button": "I have written it down", "create new wallet caption": "We’ll confirm on the next screen", "confirm secret recovery description": "Please enter your secret recovery phrase in order and\nmake sure your secret recovery phrase is written correctly", - "invalid secret recovery phrase": "Invalid secret recovery phrase", + "invalid mnemonic": "Invalid secret recovery phrase", "unlock password title": "Unlock Password", "unlock password description": "Enter password to unlock your application", "incorrect password": "Incorrect password", diff --git a/misc/utils.ts b/misc/utils.ts index 0e3500f7..0bcff524 100644 --- a/misc/utils.ts +++ b/misc/utils.ts @@ -4,6 +4,7 @@ import cloneDeep from 'lodash/cloneDeep' import drop from 'lodash/drop' import keyBy from 'lodash/keyBy' import { format, differenceInDays } from 'date-fns' +import TransportWebHID from '@ledgerhq/hw-transport-webhid' export const formatPercentage = (percent: number, lang: string): string => new Intl.NumberFormat(lang, { @@ -646,3 +647,8 @@ export const isAddressValid = (prefix: string, address: string): boolean => { export const formatHeight = (height: number, lang?: string): string => `${new Intl.NumberFormat(lang).format(height || 0)}` + +export const closeAllLedgerConnections = async () => { + const devices = await TransportWebHID.list() + await Promise.all(devices.map((d) => d.close())) +} From 039252d336883569993a1a7fb8c435d479c179fb Mon Sep 17 00:00:00 2001 From: Calvin Kei Date: Wed, 25 Aug 2021 14:44:01 +0800 Subject: [PATCH 02/13] fix test --- tests/contexts/WalletsContext.test.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/tests/contexts/WalletsContext.test.tsx b/tests/contexts/WalletsContext.test.tsx index 3089c2fb..b294ca4b 100644 --- a/tests/contexts/WalletsContext.test.tsx +++ b/tests/contexts/WalletsContext.test.tsx @@ -11,6 +11,7 @@ const wallet = { name: 'test', id: '123', cryptos: ['DARIC'], + type: 'mnemonic', } const account = { @@ -80,6 +81,7 @@ describe('context: WalletsContext', () => { name: 'test 2', id: '1234', cryptos: ['DARIC'], + type: 'mnemonic', }, accounts: [], }) @@ -88,6 +90,7 @@ describe('context: WalletsContext', () => { cryptos: ['DARIC'], mnemonic: 'mnemonic', securityPassword: 'password', + type: 'mnemonic', } const wrapper: React.FC = ({ children }) => {children} @@ -105,6 +108,7 @@ describe('context: WalletsContext', () => { name: wallet2.name, id: '1234', cryptos: ['DARIC'], + type: 'mnemonic', }, wallet, ] From 71ec16d7ad5990cdaaccaa408938f1b76178bfd2 Mon Sep 17 00:00:00 2001 From: Rachel Ho Date: Thu, 26 Aug 2021 09:51:19 +0800 Subject: [PATCH 03/13] disable dialog close on backdropClick --- components/CreateWalletDialog/index.tsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/components/CreateWalletDialog/index.tsx b/components/CreateWalletDialog/index.tsx index e66215bc..54f73648 100644 --- a/components/CreateWalletDialog/index.tsx +++ b/components/CreateWalletDialog/index.tsx @@ -44,7 +44,7 @@ type Stage = CommonStage | ImportStage interface CreateWalletDialogProps { open: boolean - onClose(): void + onClose(val1?: unknown, reason?: string): void initialStage?: Stage } @@ -250,7 +250,16 @@ const CreateWalletDialog: React.FC = ({ open, onClose, }, [stage, t]) return ( - + { + if (reason !== 'backdropClick') { + onClose(event, reason) + } + }} + fullScreen={isMobile} + > {isPrevStageAvailable ? ( Date: Thu, 26 Aug 2021 09:53:30 +0800 Subject: [PATCH 04/13] onClose params --- components/CreateWalletDialog/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/CreateWalletDialog/index.tsx b/components/CreateWalletDialog/index.tsx index 54f73648..fcf8b20d 100644 --- a/components/CreateWalletDialog/index.tsx +++ b/components/CreateWalletDialog/index.tsx @@ -44,7 +44,7 @@ type Stage = CommonStage | ImportStage interface CreateWalletDialogProps { open: boolean - onClose(val1?: unknown, reason?: string): void + onClose(event?: unknown, reason?: string): void initialStage?: Stage } From 19ee1cbebf279fb7a8f55b80c146e82c65661973 Mon Sep 17 00:00:00 2001 From: Rachel Ho Date: Thu, 26 Aug 2021 10:29:10 +0800 Subject: [PATCH 05/13] test --- .../CreateWalletDialog/__snapshots__/index.test.tsx.snap | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tests/components/CreateWalletDialog/__snapshots__/index.test.tsx.snap b/tests/components/CreateWalletDialog/__snapshots__/index.test.tsx.snap index 022d6a45..68c1ddd6 100644 --- a/tests/components/CreateWalletDialog/__snapshots__/index.test.tsx.snap +++ b/tests/components/CreateWalletDialog/__snapshots__/index.test.tsx.snap @@ -5,7 +5,7 @@ exports[`component: CreateWalletDialog renders closed state correctly 1`] = ` fullScreen={false} fullWidth={true} id="dialog" - onClose={[MockFunction]} + onClose={[Function]} open={false} > + */} ) diff --git a/components/CreateWalletDialog/styles.ts b/components/CreateWalletDialog/styles.ts index a418ad72..9b01bc98 100644 --- a/components/CreateWalletDialog/styles.ts +++ b/components/CreateWalletDialog/styles.ts @@ -20,11 +20,12 @@ const useStyles = makeStyles( selectionBox: { border: `1px solid ${theme.palette.grey[200]}`, borderRadius: theme.shape.borderRadius, - height: theme.spacing(38), + height: theme.spacing(32), padding: theme.spacing(2, 4), display: 'flex', flexDirection: 'column', - justifyContent: 'flex-end', + width: '100%', + justifyContent: 'center', '&:hover': { border: `1px solid ${theme.palette.grey[300]}`, }, diff --git a/locales/en/common.json b/locales/en/common.json index c25b9537..8933d486 100644 --- a/locales/en/common.json +++ b/locales/en/common.json @@ -25,8 +25,8 @@ "invalid confirm password": "Confirm password does not match", "create wallet title": "Getting Started", "create wallet description": "Select one of method that can describe you", - "i have secret recovery phrase": "I have 12 / 24 word secret recovery phrase", - "i dont have secret recovery phrase": "I don’t have any secret recovery phrase", + "import wallet": "Import Wallet", + "create wallet": "Create Wallet", "what is secret recovery phrase": "What is secret recovery phrase?", "create new wallet title": "Create Wallet", "create new wallet description": "Please write down and safe your secret recovery phrase\nIt’s the ONLY WAY to restore your account", From abb048c32b7f68b5eddd864744502053ac472562 Mon Sep 17 00:00:00 2001 From: Calvin Kei Date: Sat, 28 Aug 2021 02:35:16 +0800 Subject: [PATCH 08/13] update create wallet design --- components/CreateWalletDialog/AccessMyWallet.tsx | 6 +++--- pages/wallets.tsx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/components/CreateWalletDialog/AccessMyWallet.tsx b/components/CreateWalletDialog/AccessMyWallet.tsx index ac878f13..9b6fd451 100644 --- a/components/CreateWalletDialog/AccessMyWallet.tsx +++ b/components/CreateWalletDialog/AccessMyWallet.tsx @@ -25,7 +25,7 @@ const AccessMyWallet: React.FC = ({ onConfirm, onCreateWall <> {t('access my wallet description')} - + {Object.values(ImportStage).map((stage) => ( = ({ onConfirm, onCreateWall - + */} ) diff --git a/pages/wallets.tsx b/pages/wallets.tsx index d2d8540d..fac317b0 100644 --- a/pages/wallets.tsx +++ b/pages/wallets.tsx @@ -56,7 +56,7 @@ const Wallets: React.FC = () => { setIsCreateWalletDialogOpen(false)} - initialStage={CommonStage.AccessMyWalletStage} + // initialStage={CommonStage.AccessMyWalletStage} /> ) From 52ad8c63e611e5b8bc276bf88562326240dc7b97 Mon Sep 17 00:00:00 2001 From: Calvin Kei Date: Sat, 28 Aug 2021 02:40:32 +0800 Subject: [PATCH 09/13] fix test --- .../AccessMyWallet.test.tsx | 18 +- .../AccessMyWallet.test.tsx.snap | 27 +- .../__snapshots__/index.test.tsx.snap | 329 ++++++++---------- 3 files changed, 152 insertions(+), 222 deletions(-) diff --git a/tests/components/CreateWalletDialog/AccessMyWallet.test.tsx b/tests/components/CreateWalletDialog/AccessMyWallet.test.tsx index 31c0b6c3..e36a3669 100644 --- a/tests/components/CreateWalletDialog/AccessMyWallet.test.tsx +++ b/tests/components/CreateWalletDialog/AccessMyWallet.test.tsx @@ -41,15 +41,15 @@ describe('component: CreateWalletDialog - AccessMyWallet', () => { }) expect(onConfirm).toBeCalledWith(ImportStage.ConnectLedgerDeviceStage) }) - it('calls onCreateWallet when last button is clicked', () => { - const component = renderer.create( - - ) - renderer.act(() => { - component.root.findAllByType('button')[3].props.onClick() - }) - expect(onCreateWallet).toBeCalled() - }) + // it('calls onCreateWallet when last button is clicked', () => { + // const component = renderer.create( + // + // ) + // renderer.act(() => { + // component.root.findAllByType('button')[3].props.onClick() + // }) + // expect(onCreateWallet).toBeCalled() + // }) }) afterEach(() => { diff --git a/tests/components/CreateWalletDialog/__snapshots__/AccessMyWallet.test.tsx.snap b/tests/components/CreateWalletDialog/__snapshots__/AccessMyWallet.test.tsx.snap index cde1a625..47a2da37 100644 --- a/tests/components/CreateWalletDialog/__snapshots__/AccessMyWallet.test.tsx.snap +++ b/tests/components/CreateWalletDialog/__snapshots__/AccessMyWallet.test.tsx.snap @@ -104,31 +104,6 @@ Array [ ,
- -
, + />, ] `; diff --git a/tests/components/CreateWalletDialog/__snapshots__/index.test.tsx.snap b/tests/components/CreateWalletDialog/__snapshots__/index.test.tsx.snap index 022d6a45..4955b816 100644 --- a/tests/components/CreateWalletDialog/__snapshots__/index.test.tsx.snap +++ b/tests/components/CreateWalletDialog/__snapshots__/index.test.tsx.snap @@ -58,117 +58,93 @@ exports[`component: CreateWalletDialog renders closed state correctly 1`] = ` common:create wallet description

-
-

- common:i have secret recovery phrase -

- - -
-
-
+
-
- + +
+

+ common:create wallet +

+ -
-

- common:i dont have secret recovery phrase -

- - + +
- -
+ /> `; @@ -227,107 +203,86 @@ exports[`component: CreateWalletDialog renders open state correctly 1`] = ` common:create wallet description

- -
-
-
+

+ common:import wallet +

+ +
+
-
- -
-

- common:i dont have secret recovery phrase -

- +
+ +
+

+ common:create wallet +

+ +
- -
+ /> `; From 2c1fbc0af03617304c2385482d4181c0a1693024 Mon Sep 17 00:00:00 2001 From: Calvin Kei Date: Sat, 28 Aug 2021 02:49:23 +0800 Subject: [PATCH 10/13] fix e2e test --- cypress/integration/onboarding/createWallet.spec.ts | 2 +- cypress/integration/onboarding/importMnemonicPhrase.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/cypress/integration/onboarding/createWallet.spec.ts b/cypress/integration/onboarding/createWallet.spec.ts index 6c933815..0e88fe0f 100644 --- a/cypress/integration/onboarding/createWallet.spec.ts +++ b/cypress/integration/onboarding/createWallet.spec.ts @@ -47,7 +47,7 @@ describe('Create wallet on first visit', () => { cy.get('button').contains('Confirm').click() }) it('create and confirm secret recovery phrase', () => { - cy.contains('have any').click() + cy.contains('Create Wallet').click() cy.get('.mnemonic').should('be.visible') cy.get('.mnemonic').then((e) => { const mnemonic = [] diff --git a/cypress/integration/onboarding/importMnemonicPhrase.ts b/cypress/integration/onboarding/importMnemonicPhrase.ts index a1693a8f..b3de49d8 100644 --- a/cypress/integration/onboarding/importMnemonicPhrase.ts +++ b/cypress/integration/onboarding/importMnemonicPhrase.ts @@ -46,7 +46,7 @@ describe('Create wallet by importing secret recovery phrase on first visit', () cy.get('button').contains('Confirm').click() }) it('import secret recovery phrase', () => { - cy.contains('12 / 24 word secret recovery phrase').click() + cy.contains('Import Wallet').click() cy.contains('Import Secret Recovery Phrase').click() cy.get('#mnemonic-0').type(mnemonic) cy.contains('Next').click() From b3b7c82d87b0644e48ff4a2bccf8df0f119240fa Mon Sep 17 00:00:00 2001 From: Calvin Kei Date: Mon, 30 Aug 2021 14:13:53 +0800 Subject: [PATCH 11/13] v0.4.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 184f6d14..b204763e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "forbole-x", - "version": "0.4.0", + "version": "0.4.1", "private": true, "scripts": { "dev": "next dev", From 1cc5ddd2f33889ae9d3b8612f3aa3e31fce47631 Mon Sep 17 00:00:00 2001 From: Calvin Kei Date: Mon, 30 Aug 2021 14:19:58 +0800 Subject: [PATCH 12/13] update create wallet flow --- components/CreateWalletDialog/AccessMyWallet.tsx | 12 ++++++------ components/CreateWalletDialog/index.tsx | 7 ++++++- 2 files changed, 12 insertions(+), 7 deletions(-) diff --git a/components/CreateWalletDialog/AccessMyWallet.tsx b/components/CreateWalletDialog/AccessMyWallet.tsx index 9b6fd451..c0797333 100644 --- a/components/CreateWalletDialog/AccessMyWallet.tsx +++ b/components/CreateWalletDialog/AccessMyWallet.tsx @@ -14,10 +14,10 @@ import { ImportStage } from '.' interface AccessMyWalletProps { onConfirm(stage: ImportStage): void - onCreateWallet(): void + onWhatIsMnemonicClick(): void } -const AccessMyWallet: React.FC = ({ onConfirm, onCreateWallet }) => { +const AccessMyWallet: React.FC = ({ onConfirm, onWhatIsMnemonicClick }) => { const { t } = useTranslation('common') const classes = useStyles() @@ -25,7 +25,7 @@ const AccessMyWallet: React.FC = ({ onConfirm, onCreateWall <> {t('access my wallet description')} - + {Object.values(ImportStage).map((stage) => ( = ({ onConfirm, onCreateWall - {/* */} + ) diff --git a/components/CreateWalletDialog/index.tsx b/components/CreateWalletDialog/index.tsx index fcf8b20d..f9902c6f 100644 --- a/components/CreateWalletDialog/index.tsx +++ b/components/CreateWalletDialog/index.tsx @@ -232,7 +232,12 @@ const CreateWalletDialog: React.FC = ({ open, onClose, case CommonStage.AccessMyWalletStage: return { title: t('access my wallet title'), - content: , + content: ( + setStage(CommonStage.WhatIsMnemonicStage)} + /> + ), } case CommonStage.StartStage: default: From 718f145b341a09423075378790c4d94b87f7c6f2 Mon Sep 17 00:00:00 2001 From: Calvin Kei Date: Mon, 30 Aug 2021 14:21:22 +0800 Subject: [PATCH 13/13] fix test --- .../AccessMyWallet.test.tsx.snap | 26 ++++++++++++++++++- 1 file changed, 25 insertions(+), 1 deletion(-) diff --git a/tests/components/CreateWalletDialog/__snapshots__/AccessMyWallet.test.tsx.snap b/tests/components/CreateWalletDialog/__snapshots__/AccessMyWallet.test.tsx.snap index 47a2da37..54b51575 100644 --- a/tests/components/CreateWalletDialog/__snapshots__/AccessMyWallet.test.tsx.snap +++ b/tests/components/CreateWalletDialog/__snapshots__/AccessMyWallet.test.tsx.snap @@ -104,6 +104,30 @@ Array [ ,
, + > + +
, ] `;