Skip to content

Commit

Permalink
feat(wallet): update AddAccountPage with template and refactor page (…
Browse files Browse the repository at this point in the history 
…#1707)

* feat: add header template

* feat: refine AddAcountPage to use HeaderTemplate

* feat: rename to PageTemplate

* feat:cleanup

* feat: cleanup

* feat: update template

* feat: revert changes

* fix format

* feat: refactor AddAccountPage and use PageTemplate

* fix import

* feat: apply suggestions

* feat: use AccountsFormType
  • Loading branch information
@evavirseda @bingyanglin
evavirseda authored and bingyanglin committed Aug 19, 2024
1 parent 10958b0 commit b351e41
Showing 1 changed file with 107 additions and 90 deletions.
197 changes: 107 additions & 90 deletions apps/wallet/src/ui/app/pages/accounts/AddAccountPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -27,6 +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';

async function openTabWithSearchParam(searchParam: string, searchParamValue: string) {
const currentURL = new URL(window.location.href);
Expand All @@ -50,96 +50,113 @@ export function AddAccountPage() {
const isPopup = useAppSelector((state) => state.app.appType === AppType.Popup);
const [isConnectLedgerModalOpen, setConnectLedgerModalOpen] = useState(forceShowLedger);
const createAccountsMutation = useCreateAccountsMutation();
const cardGroups = [
{
title: 'Create a new mnemonic profile',
cards: [
{
title: 'Create New',
icon: Create,
actionType: AccountsFormType.NewMnemonic,
isDisabled: createAccountsMutation.isPending,
},
],
},
{
title: 'Import',
cards: [
{
title: 'Mnemonic',
icon: ImportPass,
actionType: AccountsFormType.ImportMnemonic,
isDisabled: createAccountsMutation.isPending,
},
{
title: 'Private Key',
icon: Key,
actionType: AccountsFormType.ImportPrivateKey,
isDisabled: createAccountsMutation.isPending,
},
{
title: 'Seed',
icon: Seed,
actionType: AccountsFormType.ImportSeed,
isDisabled: createAccountsMutation.isPending,
},
],
},
{
title: 'Import from Legder',
cards: [
{
title: 'Ledger',
icon: Ledger,
actionType: AccountsFormType.ImportLedger,
isDisabled: createAccountsMutation.isPending,
},
],
},
];

const handleCardAction = async (actionType: AccountsFormType) => {
switch (actionType) {
case AccountsFormType.NewMnemonic:
setAccountsFormValues({ type: AccountsFormType.NewMnemonic });
ampli.clickedCreateNewAccount({ sourceFlow });
navigate(
`/accounts/protect-account?accountsFormType=${AccountsFormType.NewMnemonic}`,
);
break;
case AccountsFormType.ImportMnemonic:
ampli.clickedImportPassphrase({ sourceFlow });
navigate('/accounts/import-passphrase');
break;
case AccountsFormType.ImportPrivateKey:
ampli.clickedImportPrivateKey({ sourceFlow });
navigate('/accounts/import-private-key');
break;
case AccountsFormType.ImportSeed:
navigate('/accounts/import-seed');
break;
case AccountsFormType.ImportLedger:
ampli.openedConnectLedgerFlow({ sourceFlow });
if (isPopup) {
await openTabWithSearchParam('showLedger', 'true');
window.close();
} else {
setConnectLedgerModalOpen(true);
}
break;
default:
break;
}
};

return (
<div className="h-full w-full">
<Header
title="Add Profile"
titleCentered
onClose={() => navigate('/')}
onBack={() => navigate('/')}
/>
<div className="flex h-full w-full flex-col gap-4 bg-white p-md">
<div className="flex flex-col gap-y-4">
<div className="flex flex-col gap-y-2">
<span className="text-label-lg text-neutral-60">
Create a new mnemonic profile
</span>
<Card
type={CardType.Filled}
onClick={() => {
setAccountsFormValues({ type: AccountsFormType.NewMnemonic });
ampli.clickedCreateNewAccount({ sourceFlow });
navigate(
`/accounts/protect-account?accountsFormType=${AccountsFormType.NewMnemonic}`,
);
}}
isDisabled={createAccountsMutation.isPending}
>
<CardIcon Icon={Create} />
<CardBody title="Create New" />
<CardAction type={CardActionType.Link} />
</Card>
</div>
<div className="flex flex-col gap-y-2">
<span className="text-label-lg text-neutral-60">Import</span>
<Card
type={CardType.Filled}
onClick={() => {
ampli.clickedImportPassphrase({ sourceFlow });
navigate('/accounts/import-passphrase');
}}
isDisabled={createAccountsMutation.isPending}
>
<CardIcon Icon={ImportPass} />
<CardBody title="Mnemonic" />
<CardAction type={CardActionType.Link} />
</Card>
<Card
type={CardType.Filled}
onClick={() => {
ampli.clickedImportPrivateKey({ sourceFlow });
navigate('/accounts/import-private-key');
}}
isDisabled={createAccountsMutation.isPending}
>
<CardIcon Icon={Key} />
<CardBody title="Private Key" />
<CardAction type={CardActionType.Link} />
</Card>
<Card
type={CardType.Filled}
onClick={() => {
navigate('/accounts/import-seed');
}}
isDisabled={createAccountsMutation.isPending}
>
<CardIcon Icon={Seed} />
<CardBody title="Seed" />
<CardAction type={CardActionType.Link} />
</Card>
</div>
<div className="flex flex-col gap-y-2">
<span className="text-label-lg text-neutral-60">Import from Legder</span>
<Card
type={CardType.Filled}
onClick={async () => {
ampli.openedConnectLedgerFlow({ sourceFlow });
if (isPopup) {
await openTabWithSearchParam('showLedger', 'true');
window.close();
} else {
setConnectLedgerModalOpen(true);
}
}}
isDisabled={createAccountsMutation.isPending}
>
<CardIcon Icon={Ledger} />
<CardBody title="Ledger" />
<CardAction type={CardActionType.Link} />
</Card>
<PageTemplate
title="Add Profile"
isTitleCentered
onClose={() => navigate('/')}
showBackButton
>
<div className="flex h-full w-full flex-col gap-4 ">
{cardGroups.map((group, groupIndex) => (
<div key={groupIndex} className="flex flex-col gap-y-2">
<span className="text-label-lg text-neutral-60">{group.title}</span>
{group.cards.map((card, cardIndex) => (
<Card
key={cardIndex}
type={CardType.Filled}
onClick={() => handleCardAction(card.actionType)}
isDisabled={card.isDisabled}
>
<CardIcon Icon={card.icon} />
<CardBody title={card.title} />
<CardAction type={CardActionType.Link} />
</Card>
))}
</div>
</div>
))}
</div>
{isConnectLedgerModalOpen && (
<ConnectLedgerModal
Expand All @@ -158,7 +175,7 @@ export function AddAccountPage() {
}}
/>
)}
</div>
</PageTemplate>
);
}

Expand Down

0 comments on commit b351e41

Please sign in to comment.