+
{items.map((item) => (
diff --git a/apps/ui-kit/src/lib/styles/index.css b/apps/ui-kit/src/lib/styles/index.css
index 97fa4033aad..7579359862f 100644
--- a/apps/ui-kit/src/lib/styles/index.css
+++ b/apps/ui-kit/src/lib/styles/index.css
@@ -68,6 +68,10 @@
&:active::after {
@apply opacity-12;
}
+
+ &:disabled::after {
+ @apply opacity-0;
+ }
}
.state-layer {
diff --git a/apps/wallet/src/ui/app/components/accounts/AutoLockSelector.tsx b/apps/wallet/src/ui/app/components/accounts/AutoLockSelector.tsx
index fdde11b5396..ffb32d74792 100644
--- a/apps/wallet/src/ui/app/components/accounts/AutoLockSelector.tsx
+++ b/apps/wallet/src/ui/app/components/accounts/AutoLockSelector.tsx
@@ -7,9 +7,9 @@ import { useFormContext } from 'react-hook-form';
import { z } from 'zod';
import { CheckboxField } from '../../shared/forms/CheckboxField';
-import { Input } from '../../shared/forms/controls/Input';
import FormField from '../../shared/forms/FormField';
import { SelectField } from '../../shared/forms/SelectField';
+import { Input, InputType } from '@iota/apps-ui-kit';
const LOCK_INTERVALS = [
{ id: 'day', label: 'Day' },
@@ -62,7 +62,7 @@ export function AutoLockSelector({ disabled }: AutoLockSelectorProps) {
diff --git a/apps/wallet/src/ui/app/pages/accounts/AddAccountPage.tsx b/apps/wallet/src/ui/app/pages/accounts/AddAccountPage.tsx
index 4a3c1cb7199..1f6e1fb28f0 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,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);
@@ -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 (
-