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

feat(wallet): update AddAccountPage with template and refactor page #1707

Merged
merged 18 commits into from
Aug 13, 2024
Merged

feat(wallet): update AddAccountPage with template and refactor page #1707

Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
9758f74
feat: add header template
evavirseda Aug 7, 2024
940e8c2
feat: refine AddAcountPage to use HeaderTemplate
evavirseda Aug 7, 2024
bc9c946
feat: rename to PageTemplate
evavirseda Aug 7, 2024
22f041e
feat:cleanup
evavirseda Aug 7, 2024
134e180
feat: cleanup
evavirseda Aug 7, 2024
309e692
feat: update template
evavirseda Aug 7, 2024
c69940b
feat: revert changes
evavirseda Aug 8, 2024
1977b19
fix format
evavirseda Aug 8, 2024
1218864
Merge branch 'develop' into tooling-wallet/create-reusable-template
evavirseda Aug 8, 2024
0cb7423
feat: refactor AddAccountPage and use PageTemplate
evavirseda Aug 8, 2024
d985ec9
Merge branch 'develop' into tooling-wallet/update-addaccountpage-with…
evavirseda Aug 9, 2024
d3193c8
Merge branch 'develop' into tooling-wallet/update-addaccountpage-with…
evavirseda Aug 12, 2024
eab814f
fix import
evavirseda Aug 12, 2024
8905a85
Merge branch 'develop' into tooling-wallet/update-addaccountpage-with…
evavirseda Aug 12, 2024
bc4a541
Merge branch 'develop' into tooling-wallet/update-addaccountpage-with…
evavirseda Aug 12, 2024
0be7cd4
feat: apply suggestions
evavirseda Aug 13, 2024
6727582
Merge branch 'develop' into tooling-wallet/update-addaccountpage-with…
evavirseda Aug 13, 2024
937ec22
feat: use AccountsFormType
evavirseda Aug 13, 2024
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
197 changes: 107 additions & 90 deletions apps/wallet/src/ui/app/pages/accounts/AddAccountPage.tsx
View file
Open in desktop
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
Loading