From 9758f744ec2166cbd0ad81888d2168761e535479 Mon Sep 17 00:00:00 2001 From: evavirseda Date: Wed, 7 Aug 2024 13:47:06 +0200 Subject: [PATCH 01/12] feat: add header template --- .../src/ui/app/components/HeaderTemplate.tsx | 47 +++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 apps/wallet/src/ui/app/components/HeaderTemplate.tsx diff --git a/apps/wallet/src/ui/app/components/HeaderTemplate.tsx b/apps/wallet/src/ui/app/components/HeaderTemplate.tsx new file mode 100644 index 00000000000..b873bddcb3a --- /dev/null +++ b/apps/wallet/src/ui/app/components/HeaderTemplate.tsx @@ -0,0 +1,47 @@ +// Copyright (c) 2024 IOTA Stiftung +// SPDX-License-Identifier: Apache-2.0 + +import { Header } from '@iota/apps-ui-kit'; +import { useCallback } from 'react'; +import type { ReactNode } from 'react'; +import { useNavigate } from 'react-router-dom'; + +interface HeaderTemplateProps { + title?: string; + children: ReactNode; + closeHeaderTemplate?: () => void; + setShowModal?: (showModal: boolean) => void; + isTitleCentered?: boolean; + displayBackButton?: boolean; +} + +function HeaderTemplate({ + title, + children, + closeHeaderTemplate, + setShowModal, + isTitleCentered, + displayBackButton, +}: HeaderTemplateProps) { + const closeModal = useCallback(() => { + closeHeaderTemplate && closeHeaderTemplate(); + setShowModal && setShowModal(false); + }, [closeHeaderTemplate, setShowModal]); + const navigate = useNavigate(); + + return ( +
+ {title && ( +
navigate(-1) : undefined} + onClose={closeModal} + /> + )} +
{children}
+
+ ); +} + +export default HeaderTemplate; From 940e8c2fa574967162d9ba11d9adb8e59b523ef3 Mon Sep 17 00:00:00 2001 From: evavirseda Date: Wed, 7 Aug 2024 13:47:33 +0200 Subject: [PATCH 02/12] feat: refine AddAcountPage to use HeaderTemplate --- .../ui/app/pages/accounts/AddAccountPage.tsx | 205 ++++++++++-------- 1 file changed, 115 insertions(+), 90 deletions(-) diff --git a/apps/wallet/src/ui/app/pages/accounts/AddAccountPage.tsx b/apps/wallet/src/ui/app/pages/accounts/AddAccountPage.tsx index 4a3c1cb7199..43ad205fc3a 100644 --- a/apps/wallet/src/ui/app/pages/accounts/AddAccountPage.tsx +++ b/apps/wallet/src/ui/app/pages/accounts/AddAccountPage.tsx @@ -8,14 +8,13 @@ import toast from 'react-hot-toast'; import { useNavigate, useSearchParams } from 'react-router-dom'; import Browser from 'webextension-polyfill'; import { - Header, Card, CardType, CardImage, CardBody, - CardActionType, CardAction, ImageType, + CardActionType, } from '@iota/apps-ui-kit'; import { AccountsFormType, @@ -27,6 +26,15 @@ import { useAppSelector } from '../../hooks'; import { useCreateAccountsMutation } from '../../hooks/useCreateAccountMutation'; import { AppType } from '../../redux/slices/app/AppType'; import { Create, ImportPass, Key, Seed, Ledger } from '@iota/ui-icons'; +import HeaderTemplate from '../../components/HeaderTemplate'; + +enum CardActionTitle { + CreateNew = 'CreateNew', + ImportPassphrase = 'ImportPassphrase', + ImportPrivateKey = 'ImportPrivateKey', + ImportSeed = 'ImportSeed', + ImportLedger = 'ImportLedger', +} async function openTabWithSearchParam(searchParam: string, searchParamValue: string) { const currentURL = new URL(window.location.href); @@ -50,96 +58,113 @@ export function AddAccountPage() { const isPopup = useAppSelector((state) => state.app.appType === AppType.Popup); const [isConnectLedgerModalOpen, setConnectLedgerModalOpen] = useState(forceShowLedger); const createAccountsMutation = useCreateAccountsMutation(); + const cardData = [ + { + title: 'Create a new mnemonic profile', + cards: [ + { + title: 'Create New', + icon: Create, + actionType: CardActionTitle.CreateNew, + isDisabled: createAccountsMutation.isPending, + }, + ], + }, + { + title: 'Import', + cards: [ + { + title: 'Mnemonic', + icon: ImportPass, + actionType: CardActionTitle.ImportPassphrase, + isDisabled: createAccountsMutation.isPending, + }, + { + title: 'Private Key', + icon: Key, + actionType: CardActionTitle.ImportPrivateKey, + isDisabled: createAccountsMutation.isPending, + }, + { + title: 'Seed', + icon: Seed, + actionType: CardActionTitle.ImportSeed, + isDisabled: createAccountsMutation.isPending, + }, + ], + }, + { + title: 'Import from Legder', + cards: [ + { + title: 'Ledger', + icon: Ledger, + actionType: CardActionTitle.ImportLedger, + isDisabled: createAccountsMutation.isPending, + }, + ], + }, + ]; + + const handleCardAction = async (actionType: CardActionTitle) => { + switch (actionType) { + case CardActionTitle.CreateNew: + setAccountsFormValues({ type: AccountsFormType.NewMnemonic }); + ampli.clickedCreateNewAccount({ sourceFlow }); + navigate( + `/accounts/protect-account?accountsFormType=${AccountsFormType.NewMnemonic}`, + ); + break; + case CardActionTitle.ImportPassphrase: + ampli.clickedImportPassphrase({ sourceFlow }); + navigate('/accounts/import-passphrase'); + break; + case CardActionTitle.ImportPrivateKey: + ampli.clickedImportPrivateKey({ sourceFlow }); + navigate('/accounts/import-private-key'); + break; + case CardActionTitle.ImportSeed: + navigate('/accounts/import-seed'); + break; + case CardActionTitle.ImportLedger: + ampli.openedConnectLedgerFlow({ sourceFlow }); + if (isPopup) { + await openTabWithSearchParam('showLedger', 'true'); + window.close(); + } else { + setConnectLedgerModalOpen(true); + } + break; + default: + break; + } + }; return ( -
-
navigate('/')} - onBack={() => navigate('/')} - /> -
-
-
- - Create a new mnemonic profile - - { - setAccountsFormValues({ type: AccountsFormType.NewMnemonic }); - ampli.clickedCreateNewAccount({ sourceFlow }); - navigate( - `/accounts/protect-account?accountsFormType=${AccountsFormType.NewMnemonic}`, - ); - }} - isDisabled={createAccountsMutation.isPending} - > - - - - -
-
- Import - { - ampli.clickedImportPassphrase({ sourceFlow }); - navigate('/accounts/import-passphrase'); - }} - isDisabled={createAccountsMutation.isPending} - > - - - - - { - ampli.clickedImportPrivateKey({ sourceFlow }); - navigate('/accounts/import-private-key'); - }} - isDisabled={createAccountsMutation.isPending} - > - - - - - { - navigate('/accounts/import-seed'); - }} - isDisabled={createAccountsMutation.isPending} - > - - - - -
-
- Import from Legder - { - ampli.openedConnectLedgerFlow({ sourceFlow }); - if (isPopup) { - await openTabWithSearchParam('showLedger', 'true'); - window.close(); - } else { - setConnectLedgerModalOpen(true); - } - }} - isDisabled={createAccountsMutation.isPending} - > - - - - + navigate('/')} + displayBackButton + > +
+ {cardData.map((group, groupIndex) => ( +
+ {group.title} + {group.cards.map((card, cardIndex) => ( + handleCardAction(card.actionType)} + isDisabled={card.isDisabled} + > + + + + + ))}
-
+ ))}
{isConnectLedgerModalOpen && ( )} -
+ ); } From bc9c946abd4ad5ea8452aabb0aa13c643f91329c Mon Sep 17 00:00:00 2001 From: evavirseda Date: Wed, 7 Aug 2024 15:17:27 +0200 Subject: [PATCH 03/12] feat: rename to PageTemplate --- .../{HeaderTemplate.tsx => PageTemplate.tsx} | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) rename apps/wallet/src/ui/app/components/{HeaderTemplate.tsx => PageTemplate.tsx} (70%) diff --git a/apps/wallet/src/ui/app/components/HeaderTemplate.tsx b/apps/wallet/src/ui/app/components/PageTemplate.tsx similarity index 70% rename from apps/wallet/src/ui/app/components/HeaderTemplate.tsx rename to apps/wallet/src/ui/app/components/PageTemplate.tsx index b873bddcb3a..7213b3dc2cf 100644 --- a/apps/wallet/src/ui/app/components/HeaderTemplate.tsx +++ b/apps/wallet/src/ui/app/components/PageTemplate.tsx @@ -6,27 +6,24 @@ import { useCallback } from 'react'; import type { ReactNode } from 'react'; import { useNavigate } from 'react-router-dom'; -interface HeaderTemplateProps { +interface PageTemplateProps { title?: string; children: ReactNode; - closeHeaderTemplate?: () => void; - setShowModal?: (showModal: boolean) => void; + closePageTemplate?: () => void; isTitleCentered?: boolean; displayBackButton?: boolean; } -function HeaderTemplate({ +function PageTemplate({ title, children, - closeHeaderTemplate, - setShowModal, + closePageTemplate, isTitleCentered, displayBackButton, -}: HeaderTemplateProps) { +}: PageTemplateProps) { const closeModal = useCallback(() => { - closeHeaderTemplate && closeHeaderTemplate(); - setShowModal && setShowModal(false); - }, [closeHeaderTemplate, setShowModal]); + closePageTemplate && closePageTemplate(); + }, [closePageTemplate]); const navigate = useNavigate(); return ( @@ -44,4 +41,4 @@ function HeaderTemplate({ ); } -export default HeaderTemplate; +export default PageTemplate; From 22f041e03b100a585c98d81f591843cba327fd47 Mon Sep 17 00:00:00 2001 From: evavirseda Date: Wed, 7 Aug 2024 15:17:41 +0200 Subject: [PATCH 04/12] feat:cleanup --- .../ui/app/pages/accounts/AddAccountPage.tsx | 192 ++++++++---------- 1 file changed, 83 insertions(+), 109 deletions(-) diff --git a/apps/wallet/src/ui/app/pages/accounts/AddAccountPage.tsx b/apps/wallet/src/ui/app/pages/accounts/AddAccountPage.tsx index 43ad205fc3a..443927a1f31 100644 --- a/apps/wallet/src/ui/app/pages/accounts/AddAccountPage.tsx +++ b/apps/wallet/src/ui/app/pages/accounts/AddAccountPage.tsx @@ -26,15 +26,7 @@ import { useAppSelector } from '../../hooks'; import { useCreateAccountsMutation } from '../../hooks/useCreateAccountMutation'; import { AppType } from '../../redux/slices/app/AppType'; import { Create, ImportPass, Key, Seed, Ledger } from '@iota/ui-icons'; -import HeaderTemplate from '../../components/HeaderTemplate'; - -enum CardActionTitle { - CreateNew = 'CreateNew', - ImportPassphrase = 'ImportPassphrase', - ImportPrivateKey = 'ImportPrivateKey', - ImportSeed = 'ImportSeed', - ImportLedger = 'ImportLedger', -} +import PageTemplate from '../../components/PageTemplate'; async function openTabWithSearchParam(searchParam: string, searchParamValue: string) { const currentURL = new URL(window.location.href); @@ -58,113 +50,95 @@ export function AddAccountPage() { const isPopup = useAppSelector((state) => state.app.appType === AppType.Popup); const [isConnectLedgerModalOpen, setConnectLedgerModalOpen] = useState(forceShowLedger); const createAccountsMutation = useCreateAccountsMutation(); - const cardData = [ - { - title: 'Create a new mnemonic profile', - cards: [ - { - title: 'Create New', - icon: Create, - actionType: CardActionTitle.CreateNew, - isDisabled: createAccountsMutation.isPending, - }, - ], - }, - { - title: 'Import', - cards: [ - { - title: 'Mnemonic', - icon: ImportPass, - actionType: CardActionTitle.ImportPassphrase, - isDisabled: createAccountsMutation.isPending, - }, - { - title: 'Private Key', - icon: Key, - actionType: CardActionTitle.ImportPrivateKey, - isDisabled: createAccountsMutation.isPending, - }, - { - title: 'Seed', - icon: Seed, - actionType: CardActionTitle.ImportSeed, - isDisabled: createAccountsMutation.isPending, - }, - ], - }, - { - title: 'Import from Legder', - cards: [ - { - title: 'Ledger', - icon: Ledger, - actionType: CardActionTitle.ImportLedger, - isDisabled: createAccountsMutation.isPending, - }, - ], - }, - ]; - - const handleCardAction = async (actionType: CardActionTitle) => { - switch (actionType) { - case CardActionTitle.CreateNew: - setAccountsFormValues({ type: AccountsFormType.NewMnemonic }); - ampli.clickedCreateNewAccount({ sourceFlow }); - navigate( - `/accounts/protect-account?accountsFormType=${AccountsFormType.NewMnemonic}`, - ); - break; - case CardActionTitle.ImportPassphrase: - ampli.clickedImportPassphrase({ sourceFlow }); - navigate('/accounts/import-passphrase'); - break; - case CardActionTitle.ImportPrivateKey: - ampli.clickedImportPrivateKey({ sourceFlow }); - navigate('/accounts/import-private-key'); - break; - case CardActionTitle.ImportSeed: - navigate('/accounts/import-seed'); - break; - case CardActionTitle.ImportLedger: - ampli.openedConnectLedgerFlow({ sourceFlow }); - if (isPopup) { - await openTabWithSearchParam('showLedger', 'true'); - window.close(); - } else { - setConnectLedgerModalOpen(true); - } - break; - default: - break; - } - }; return ( - navigate('/')} + closePageTemplate={() => navigate('/')} displayBackButton >
- {cardData.map((group, groupIndex) => ( -
- {group.title} - {group.cards.map((card, cardIndex) => ( - handleCardAction(card.actionType)} - isDisabled={card.isDisabled} - > - - - - - ))} +
+
+ + Create a new mnemonic profile + + { + setAccountsFormValues({ type: AccountsFormType.NewMnemonic }); + ampli.clickedCreateNewAccount({ sourceFlow }); + navigate( + `/accounts/protect-account?accountsFormType=${AccountsFormType.NewMnemonic}`, + ); + }} + isDisabled={createAccountsMutation.isPending} + > + + + + +
+
+ Import + { + ampli.clickedImportPassphrase({ sourceFlow }); + navigate('/accounts/import-passphrase'); + }} + isDisabled={createAccountsMutation.isPending} + > + + + + + { + ampli.clickedImportPrivateKey({ sourceFlow }); + navigate('/accounts/import-private-key'); + }} + isDisabled={createAccountsMutation.isPending} + > + + + + + { + navigate('/accounts/import-seed'); + }} + isDisabled={createAccountsMutation.isPending} + > + + + + +
+
+ Import from Legder + { + ampli.openedConnectLedgerFlow({ sourceFlow }); + if (isPopup) { + await openTabWithSearchParam('showLedger', 'true'); + window.close(); + } else { + setConnectLedgerModalOpen(true); + } + }} + isDisabled={createAccountsMutation.isPending} + > + + + +
- ))} +
{isConnectLedgerModalOpen && ( )} - + ); } From 134e1802cfb37205a3327b8228091b1beadd1abf Mon Sep 17 00:00:00 2001 From: evavirseda Date: Wed, 7 Aug 2024 15:18:43 +0200 Subject: [PATCH 05/12] feat: cleanup --- apps/wallet/src/ui/app/pages/accounts/AddAccountPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/wallet/src/ui/app/pages/accounts/AddAccountPage.tsx b/apps/wallet/src/ui/app/pages/accounts/AddAccountPage.tsx index 443927a1f31..e36ca62cfb3 100644 --- a/apps/wallet/src/ui/app/pages/accounts/AddAccountPage.tsx +++ b/apps/wallet/src/ui/app/pages/accounts/AddAccountPage.tsx @@ -12,9 +12,9 @@ import { CardType, CardImage, CardBody, + CardActionType, CardAction, ImageType, - CardActionType, } from '@iota/apps-ui-kit'; import { AccountsFormType, From 309e6920c3cbbd22527a7d9c2018ea3b3d2008dd Mon Sep 17 00:00:00 2001 From: evavirseda Date: Wed, 7 Aug 2024 16:19:23 +0200 Subject: [PATCH 06/12] feat: update template --- apps/wallet/src/ui/app/components/PageTemplate.tsx | 12 ++++++------ .../src/ui/app/pages/accounts/AddAccountPage.tsx | 4 ++-- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/apps/wallet/src/ui/app/components/PageTemplate.tsx b/apps/wallet/src/ui/app/components/PageTemplate.tsx index 7213b3dc2cf..2ea8611b3bf 100644 --- a/apps/wallet/src/ui/app/components/PageTemplate.tsx +++ b/apps/wallet/src/ui/app/components/PageTemplate.tsx @@ -9,30 +9,30 @@ import { useNavigate } from 'react-router-dom'; interface PageTemplateProps { title?: string; children: ReactNode; - closePageTemplate?: () => void; + onClose?: () => void; isTitleCentered?: boolean; - displayBackButton?: boolean; + showBackButton?: boolean; } function PageTemplate({ title, children, - closePageTemplate, + onClose: closePageTemplate, isTitleCentered, - displayBackButton, + showBackButton, }: PageTemplateProps) { const closeModal = useCallback(() => { closePageTemplate && closePageTemplate(); }, [closePageTemplate]); const navigate = useNavigate(); - + const handleBack = useCallback(() => navigate(-1), [navigate]); return (
{title && (
navigate(-1) : undefined} + onBack={showBackButton ? handleBack : undefined} onClose={closeModal} /> )} diff --git a/apps/wallet/src/ui/app/pages/accounts/AddAccountPage.tsx b/apps/wallet/src/ui/app/pages/accounts/AddAccountPage.tsx index e36ca62cfb3..d366faf139a 100644 --- a/apps/wallet/src/ui/app/pages/accounts/AddAccountPage.tsx +++ b/apps/wallet/src/ui/app/pages/accounts/AddAccountPage.tsx @@ -55,8 +55,8 @@ export function AddAccountPage() { navigate('/')} - displayBackButton + onClose={() => navigate('/')} + showBackButton >
From c69940b2a260e6d59f12cd19535829052dd32493 Mon Sep 17 00:00:00 2001 From: evavirseda Date: Thu, 8 Aug 2024 10:14:05 +0200 Subject: [PATCH 07/12] feat: revert changes --- .../ui/app/pages/accounts/AddAccountPage.tsx | 21 +++++++++---------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/apps/wallet/src/ui/app/pages/accounts/AddAccountPage.tsx b/apps/wallet/src/ui/app/pages/accounts/AddAccountPage.tsx index d366faf139a..dbdc4c5b0f0 100644 --- a/apps/wallet/src/ui/app/pages/accounts/AddAccountPage.tsx +++ b/apps/wallet/src/ui/app/pages/accounts/AddAccountPage.tsx @@ -1,13 +1,13 @@ // Copyright (c) Mysten Labs, Inc. // Modifications Copyright (c) 2024 IOTA Stiftung // SPDX-License-Identifier: Apache-2.0 - import { ampli } from '_src/shared/analytics/ampli'; import { useState } from 'react'; import toast from 'react-hot-toast'; import { useNavigate, useSearchParams } from 'react-router-dom'; import Browser from 'webextension-polyfill'; import { + Header, Card, CardType, CardImage, @@ -26,7 +26,6 @@ import { useAppSelector } from '../../hooks'; import { useCreateAccountsMutation } from '../../hooks/useCreateAccountMutation'; import { AppType } from '../../redux/slices/app/AppType'; import { Create, ImportPass, Key, Seed, Ledger } from '@iota/ui-icons'; -import PageTemplate from '../../components/PageTemplate'; async function openTabWithSearchParam(searchParam: string, searchParamValue: string) { const currentURL = new URL(window.location.href); @@ -39,7 +38,6 @@ async function openTabWithSearchParam(searchParam: string, searchParamValue: str url: currentURL.href, }); } - export function AddAccountPage() { const [searchParams] = useSearchParams(); const navigate = useNavigate(); @@ -52,13 +50,14 @@ export function AddAccountPage() { const createAccountsMutation = useCreateAccountsMutation(); return ( - navigate('/')} - showBackButton - > -
+
+
navigate('/')} + onBack={() => navigate('/')} + /> +
@@ -157,7 +156,7 @@ export function AddAccountPage() { }} /> )} - +
); } From 1977b197867d1ec90813675f61aaadf28e402d9b Mon Sep 17 00:00:00 2001 From: evavirseda Date: Thu, 8 Aug 2024 10:14:55 +0200 Subject: [PATCH 08/12] fix format --- apps/wallet/src/ui/app/pages/accounts/AddAccountPage.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/apps/wallet/src/ui/app/pages/accounts/AddAccountPage.tsx b/apps/wallet/src/ui/app/pages/accounts/AddAccountPage.tsx index dbdc4c5b0f0..4a3c1cb7199 100644 --- a/apps/wallet/src/ui/app/pages/accounts/AddAccountPage.tsx +++ b/apps/wallet/src/ui/app/pages/accounts/AddAccountPage.tsx @@ -1,6 +1,7 @@ // Copyright (c) Mysten Labs, Inc. // Modifications Copyright (c) 2024 IOTA Stiftung // SPDX-License-Identifier: Apache-2.0 + import { ampli } from '_src/shared/analytics/ampli'; import { useState } from 'react'; import toast from 'react-hot-toast'; @@ -38,6 +39,7 @@ async function openTabWithSearchParam(searchParam: string, searchParamValue: str url: currentURL.href, }); } + export function AddAccountPage() { const [searchParams] = useSearchParams(); const navigate = useNavigate(); From 0cb742312efead0388b5090c3f6b3abc8905c3c2 Mon Sep 17 00:00:00 2001 From: evavirseda Date: Thu, 8 Aug 2024 11:39:38 +0200 Subject: [PATCH 09/12] feat: refactor AddAccountPage and use PageTemplate --- .../ui/app/pages/accounts/AddAccountPage.tsx | 205 ++++++++++-------- 1 file changed, 115 insertions(+), 90 deletions(-) diff --git a/apps/wallet/src/ui/app/pages/accounts/AddAccountPage.tsx b/apps/wallet/src/ui/app/pages/accounts/AddAccountPage.tsx index 4a3c1cb7199..bed39b2020a 100644 --- a/apps/wallet/src/ui/app/pages/accounts/AddAccountPage.tsx +++ b/apps/wallet/src/ui/app/pages/accounts/AddAccountPage.tsx @@ -8,14 +8,13 @@ import toast from 'react-hot-toast'; import { useNavigate, useSearchParams } from 'react-router-dom'; import Browser from 'webextension-polyfill'; import { - Header, Card, CardType, CardImage, CardBody, - CardActionType, CardAction, ImageType, + CardActionType, } from '@iota/apps-ui-kit'; import { AccountsFormType, @@ -27,6 +26,15 @@ import { useAppSelector } from '../../hooks'; import { useCreateAccountsMutation } from '../../hooks/useCreateAccountMutation'; import { AppType } from '../../redux/slices/app/AppType'; import { Create, ImportPass, Key, Seed, Ledger } from '@iota/ui-icons'; +import PageTemplate from '../../components/PageTemplate'; + +enum CardActionTitle { + CreateNew = 'CreateNew', + ImportPassphrase = 'ImportPassphrase', + ImportPrivateKey = 'ImportPrivateKey', + ImportSeed = 'ImportSeed', + ImportLedger = 'ImportLedger', +} async function openTabWithSearchParam(searchParam: string, searchParamValue: string) { const currentURL = new URL(window.location.href); @@ -50,96 +58,113 @@ export function AddAccountPage() { const isPopup = useAppSelector((state) => state.app.appType === AppType.Popup); const [isConnectLedgerModalOpen, setConnectLedgerModalOpen] = useState(forceShowLedger); const createAccountsMutation = useCreateAccountsMutation(); + const cardData = [ + { + title: 'Create a new mnemonic profile', + cards: [ + { + title: 'Create New', + icon: Create, + actionType: CardActionTitle.CreateNew, + isDisabled: createAccountsMutation.isPending, + }, + ], + }, + { + title: 'Import', + cards: [ + { + title: 'Mnemonic', + icon: ImportPass, + actionType: CardActionTitle.ImportPassphrase, + isDisabled: createAccountsMutation.isPending, + }, + { + title: 'Private Key', + icon: Key, + actionType: CardActionTitle.ImportPrivateKey, + isDisabled: createAccountsMutation.isPending, + }, + { + title: 'Seed', + icon: Seed, + actionType: CardActionTitle.ImportSeed, + isDisabled: createAccountsMutation.isPending, + }, + ], + }, + { + title: 'Import from Legder', + cards: [ + { + title: 'Ledger', + icon: Ledger, + actionType: CardActionTitle.ImportLedger, + isDisabled: createAccountsMutation.isPending, + }, + ], + }, + ]; + + const handleCardAction = async (actionType: CardActionTitle) => { + switch (actionType) { + case CardActionTitle.CreateNew: + setAccountsFormValues({ type: AccountsFormType.NewMnemonic }); + ampli.clickedCreateNewAccount({ sourceFlow }); + navigate( + `/accounts/protect-account?accountsFormType=${AccountsFormType.NewMnemonic}`, + ); + break; + case CardActionTitle.ImportPassphrase: + ampli.clickedImportPassphrase({ sourceFlow }); + navigate('/accounts/import-passphrase'); + break; + case CardActionTitle.ImportPrivateKey: + ampli.clickedImportPrivateKey({ sourceFlow }); + navigate('/accounts/import-private-key'); + break; + case CardActionTitle.ImportSeed: + navigate('/accounts/import-seed'); + break; + case CardActionTitle.ImportLedger: + ampli.openedConnectLedgerFlow({ sourceFlow }); + if (isPopup) { + await openTabWithSearchParam('showLedger', 'true'); + window.close(); + } else { + setConnectLedgerModalOpen(true); + } + break; + default: + break; + } + }; return ( -
-
navigate('/')} - onBack={() => navigate('/')} - /> -
-
-
- - Create a new mnemonic profile - - { - setAccountsFormValues({ type: AccountsFormType.NewMnemonic }); - ampli.clickedCreateNewAccount({ sourceFlow }); - navigate( - `/accounts/protect-account?accountsFormType=${AccountsFormType.NewMnemonic}`, - ); - }} - isDisabled={createAccountsMutation.isPending} - > - - - - -
-
- Import - { - ampli.clickedImportPassphrase({ sourceFlow }); - navigate('/accounts/import-passphrase'); - }} - isDisabled={createAccountsMutation.isPending} - > - - - - - { - ampli.clickedImportPrivateKey({ sourceFlow }); - navigate('/accounts/import-private-key'); - }} - isDisabled={createAccountsMutation.isPending} - > - - - - - { - navigate('/accounts/import-seed'); - }} - isDisabled={createAccountsMutation.isPending} - > - - - - -
-
- Import from Legder - { - ampli.openedConnectLedgerFlow({ sourceFlow }); - if (isPopup) { - await openTabWithSearchParam('showLedger', 'true'); - window.close(); - } else { - setConnectLedgerModalOpen(true); - } - }} - isDisabled={createAccountsMutation.isPending} - > - - - - + navigate('/')} + showBackButton + > +
+ {cardData.map((group, groupIndex) => ( +
+ {group.title} + {group.cards.map((card, cardIndex) => ( + handleCardAction(card.actionType)} + isDisabled={card.isDisabled} + > + + + + + ))}
-
+ ))}
{isConnectLedgerModalOpen && ( )} -
+ ); } From eab814f0ed88f2e05583f86786a45f8ba229765b Mon Sep 17 00:00:00 2001 From: evavirseda Date: Mon, 12 Aug 2024 15:03:35 +0200 Subject: [PATCH 10/12] fix import --- apps/wallet/src/ui/app/pages/accounts/AddAccountPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/wallet/src/ui/app/pages/accounts/AddAccountPage.tsx b/apps/wallet/src/ui/app/pages/accounts/AddAccountPage.tsx index bed39b2020a..c00f31ee4ab 100644 --- a/apps/wallet/src/ui/app/pages/accounts/AddAccountPage.tsx +++ b/apps/wallet/src/ui/app/pages/accounts/AddAccountPage.tsx @@ -26,7 +26,7 @@ import { useAppSelector } from '../../hooks'; import { useCreateAccountsMutation } from '../../hooks/useCreateAccountMutation'; import { AppType } from '../../redux/slices/app/AppType'; import { Create, ImportPass, Key, Seed, Ledger } from '@iota/ui-icons'; -import PageTemplate from '../../components/PageTemplate'; +import { PageTemplate } from '../../components/PageTemplate'; enum CardActionTitle { CreateNew = 'CreateNew', From 0be7cd4a31e6d19187b2e4b230df9a522e6b6fc8 Mon Sep 17 00:00:00 2001 From: evavirseda Date: Tue, 13 Aug 2024 09:39:09 +0200 Subject: [PATCH 11/12] feat: apply suggestions --- .../ui/app/pages/accounts/AddAccountPage.tsx | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/apps/wallet/src/ui/app/pages/accounts/AddAccountPage.tsx b/apps/wallet/src/ui/app/pages/accounts/AddAccountPage.tsx index c00f31ee4ab..9c1f63a4b4b 100644 --- a/apps/wallet/src/ui/app/pages/accounts/AddAccountPage.tsx +++ b/apps/wallet/src/ui/app/pages/accounts/AddAccountPage.tsx @@ -28,7 +28,7 @@ import { AppType } from '../../redux/slices/app/AppType'; import { Create, ImportPass, Key, Seed, Ledger } from '@iota/ui-icons'; import { PageTemplate } from '../../components/PageTemplate'; -enum CardActionTitle { +enum ActionType { CreateNew = 'CreateNew', ImportPassphrase = 'ImportPassphrase', ImportPrivateKey = 'ImportPrivateKey', @@ -58,14 +58,14 @@ export function AddAccountPage() { const isPopup = useAppSelector((state) => state.app.appType === AppType.Popup); const [isConnectLedgerModalOpen, setConnectLedgerModalOpen] = useState(forceShowLedger); const createAccountsMutation = useCreateAccountsMutation(); - const cardData = [ + const cardGroups = [ { title: 'Create a new mnemonic profile', cards: [ { title: 'Create New', icon: Create, - actionType: CardActionTitle.CreateNew, + actionType: ActionType.CreateNew, isDisabled: createAccountsMutation.isPending, }, ], @@ -76,19 +76,19 @@ export function AddAccountPage() { { title: 'Mnemonic', icon: ImportPass, - actionType: CardActionTitle.ImportPassphrase, + actionType: ActionType.ImportPassphrase, isDisabled: createAccountsMutation.isPending, }, { title: 'Private Key', icon: Key, - actionType: CardActionTitle.ImportPrivateKey, + actionType: ActionType.ImportPrivateKey, isDisabled: createAccountsMutation.isPending, }, { title: 'Seed', icon: Seed, - actionType: CardActionTitle.ImportSeed, + actionType: ActionType.ImportSeed, isDisabled: createAccountsMutation.isPending, }, ], @@ -99,34 +99,34 @@ export function AddAccountPage() { { title: 'Ledger', icon: Ledger, - actionType: CardActionTitle.ImportLedger, + actionType: ActionType.ImportLedger, isDisabled: createAccountsMutation.isPending, }, ], }, ]; - const handleCardAction = async (actionType: CardActionTitle) => { + const handleCardAction = async (actionType: ActionType) => { switch (actionType) { - case CardActionTitle.CreateNew: + case ActionType.CreateNew: setAccountsFormValues({ type: AccountsFormType.NewMnemonic }); ampli.clickedCreateNewAccount({ sourceFlow }); navigate( `/accounts/protect-account?accountsFormType=${AccountsFormType.NewMnemonic}`, ); break; - case CardActionTitle.ImportPassphrase: + case ActionType.ImportPassphrase: ampli.clickedImportPassphrase({ sourceFlow }); navigate('/accounts/import-passphrase'); break; - case CardActionTitle.ImportPrivateKey: + case ActionType.ImportPrivateKey: ampli.clickedImportPrivateKey({ sourceFlow }); navigate('/accounts/import-private-key'); break; - case CardActionTitle.ImportSeed: + case ActionType.ImportSeed: navigate('/accounts/import-seed'); break; - case CardActionTitle.ImportLedger: + case ActionType.ImportLedger: ampli.openedConnectLedgerFlow({ sourceFlow }); if (isPopup) { await openTabWithSearchParam('showLedger', 'true'); @@ -148,7 +148,7 @@ export function AddAccountPage() { showBackButton >
- {cardData.map((group, groupIndex) => ( + {cardGroups.map((group, groupIndex) => (
{group.title} {group.cards.map((card, cardIndex) => ( From 937ec22223be9755e4784fa5d016448340d81d79 Mon Sep 17 00:00:00 2001 From: evavirseda Date: Tue, 13 Aug 2024 11:26:45 +0200 Subject: [PATCH 12/12] feat: use AccountsFormType --- .../ui/app/pages/accounts/AddAccountPage.tsx | 30 +++++++------------ 1 file changed, 11 insertions(+), 19 deletions(-) diff --git a/apps/wallet/src/ui/app/pages/accounts/AddAccountPage.tsx b/apps/wallet/src/ui/app/pages/accounts/AddAccountPage.tsx index 9c1f63a4b4b..1f6e1fb28f0 100644 --- a/apps/wallet/src/ui/app/pages/accounts/AddAccountPage.tsx +++ b/apps/wallet/src/ui/app/pages/accounts/AddAccountPage.tsx @@ -28,14 +28,6 @@ import { AppType } from '../../redux/slices/app/AppType'; import { Create, ImportPass, Key, Seed, Ledger } from '@iota/ui-icons'; import { PageTemplate } from '../../components/PageTemplate'; -enum ActionType { - CreateNew = 'CreateNew', - ImportPassphrase = 'ImportPassphrase', - ImportPrivateKey = 'ImportPrivateKey', - ImportSeed = 'ImportSeed', - ImportLedger = 'ImportLedger', -} - async function openTabWithSearchParam(searchParam: string, searchParamValue: string) { const currentURL = new URL(window.location.href); const [currentHash, currentHashSearch] = currentURL.hash.split('?'); @@ -65,7 +57,7 @@ export function AddAccountPage() { { title: 'Create New', icon: Create, - actionType: ActionType.CreateNew, + actionType: AccountsFormType.NewMnemonic, isDisabled: createAccountsMutation.isPending, }, ], @@ -76,19 +68,19 @@ export function AddAccountPage() { { title: 'Mnemonic', icon: ImportPass, - actionType: ActionType.ImportPassphrase, + actionType: AccountsFormType.ImportMnemonic, isDisabled: createAccountsMutation.isPending, }, { title: 'Private Key', icon: Key, - actionType: ActionType.ImportPrivateKey, + actionType: AccountsFormType.ImportPrivateKey, isDisabled: createAccountsMutation.isPending, }, { title: 'Seed', icon: Seed, - actionType: ActionType.ImportSeed, + actionType: AccountsFormType.ImportSeed, isDisabled: createAccountsMutation.isPending, }, ], @@ -99,34 +91,34 @@ export function AddAccountPage() { { title: 'Ledger', icon: Ledger, - actionType: ActionType.ImportLedger, + actionType: AccountsFormType.ImportLedger, isDisabled: createAccountsMutation.isPending, }, ], }, ]; - const handleCardAction = async (actionType: ActionType) => { + const handleCardAction = async (actionType: AccountsFormType) => { switch (actionType) { - case ActionType.CreateNew: + case AccountsFormType.NewMnemonic: setAccountsFormValues({ type: AccountsFormType.NewMnemonic }); ampli.clickedCreateNewAccount({ sourceFlow }); navigate( `/accounts/protect-account?accountsFormType=${AccountsFormType.NewMnemonic}`, ); break; - case ActionType.ImportPassphrase: + case AccountsFormType.ImportMnemonic: ampli.clickedImportPassphrase({ sourceFlow }); navigate('/accounts/import-passphrase'); break; - case ActionType.ImportPrivateKey: + case AccountsFormType.ImportPrivateKey: ampli.clickedImportPrivateKey({ sourceFlow }); navigate('/accounts/import-private-key'); break; - case ActionType.ImportSeed: + case AccountsFormType.ImportSeed: navigate('/accounts/import-seed'); break; - case ActionType.ImportLedger: + case AccountsFormType.ImportLedger: ampli.openedConnectLedgerFlow({ sourceFlow }); if (isPopup) { await openTabWithSearchParam('showLedger', 'true');