Merge pull request #566 from Concordium/x-create-account

Add create account pages

Author: limemloh

packages/browser-wallet/src/assets/svgX/fat-arrow-up.svg

@@ -133,6 +133,15 @@ export const relativeRoutes = {
                 path: 'private-key/:account',
             },
         },
+        createAccount: {
+            path: 'create-account',
+            confirm: {
+                path: 'confirm/:identityProviderIndex/:identityIndex',
+            },
+            config: {
+                backTitle: '',
+            },
+        },
         seedPhrase: {
             path: 'seedPhrase',
             config: {

packages/browser-wallet/src/popup/popupX/constants/routes.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import Plus from '@assets/svgX/plus.svg';
 import Arrows from '@assets/svgX/arrows-down-up.svg';
 import MagnifyingGlass from '@assets/svgX/magnifying-glass.svg';
@@ -112,12 +112,14 @@ function AccountListItem({ credential }: AccountListItemProps) {
 export default function Accounts() {
     const { t } = useTranslation('x', { keyPrefix: 'accounts' });
     const accounts = useAtomValue(credentialsAtom);
+    const nav = useNavigate();
+    const navToCreateAccount = useCallback(() => nav(absoluteRoutes.settings.createAccount.path), []);
     return (
         <Page className="accounts-x">
             <Page.Top heading={t('accounts')}>
                 <Button.Icon icon={<Arrows />} />
                 <Button.Icon icon={<MagnifyingGlass />} />
-                <Button.Icon icon={<Plus />} />
+                <Button.Icon icon={<Plus />} onClick={navToCreateAccount} />
             </Page.Top>
             <Page.Main>
                 {accounts.map((item) => (

packages/browser-wallet/src/popup/popupX/pages/Accounts/Accounts.tsx

@@ -0,0 +1,19 @@
+.create-account-x {
+    .id-card-button {
+        margin-top: rem(14px);
+        padding: unset;
+        background-color: unset;
+        border: none;
+        text-align: left;
+        cursor: pointer;
+    }
+
+    .justify-content-center {
+        display: flex;
+        justify-content: center;
+    }
+
+    .page__footer {
+        gap: rem(24px) !important;
+    }
+}

packages/browser-wallet/src/popup/popupX/pages/CreateAccount/CreateAccount.scss

@@ -0,0 +1,73 @@
+import React, { useMemo } from 'react';
+import Page from '@popup/popupX/shared/Page';
+import Text from '@popup/popupX/shared/Text';
+import { useTranslation } from 'react-i18next';
+import { identitiesAtom } from '@popup/store/identity';
+import { useAtomValue } from 'jotai';
+import { ConfirmedIdentity, CreationStatus } from '@shared/storage/types';
+import { ConfirmedIdCard } from '@popup/popupX/shared/IdCard';
+import Button from '@popup/popupX/shared/Button';
+import { generatePath, useNavigate } from 'react-router-dom';
+import { absoluteRoutes } from '@popup/popupX/constants/routes';
+import { compareYearMonth, getCurrentYearMonth } from 'wallet-common-helpers';
+
+/**
+ * Get the valid identities, which is Identities that are confirmed by the ID provider and are not
+ * expired.
+ * This is not recomputed by change of current time, meaning the returned identities might become
+ * expired over time.
+ */
+function useValidIdentities(): ConfirmedIdentity[] {
+    const identities = useAtomValue(identitiesAtom);
+    return useMemo(() => {
+        const now = getCurrentYearMonth();
+        return identities.flatMap((id) => {
+            if (id.status !== CreationStatus.Confirmed) {
+                return [];
+            }
+            // Negative number is indicating that `validTo` is before `now`, therefore expired.
+            const isExpired = compareYearMonth(id.idObject.value.attributeList.validTo, now) < 0;
+            if (isExpired) {
+                return [];
+            }
+            return [id];
+        });
+    }, [identities]);
+}
+
+export default function CreateAccount() {
+    const { t } = useTranslation('x', { keyPrefix: 'createAccount' });
+    const nav = useNavigate();
+    const navToCreateAccountConfirm = (identity: ConfirmedIdentity) => () =>
+        nav(
+            generatePath(absoluteRoutes.settings.createAccount.confirm.path, {
+                identityProviderIndex: identity.providerIndex.toString(),
+                identityIndex: identity.index.toString(),
+            })
+        );
+    const validIdentities = useValidIdentities();
+
+    return (
+        <Page className="create-account-x">
+            <Page.Top heading={t('selectIdentity')} />
+            <Page.Main>
+                <Text.MainRegular>{t('selectIdentityDescription')}</Text.MainRegular>
+                {validIdentities.length === 0 ? (
+                    <p className="m-t-40">
+                        <Text.Capture>{t('noValidIdentities')}</Text.Capture>
+                    </p>
+                ) : (
+                    validIdentities.map((id) => (
+                        <Button.Base
+                            className="id-card-button"
+                            key={`${id.providerIndex}:${id.index}`}
+                            onClick={navToCreateAccountConfirm(id)}
+                        >
+                            <ConfirmedIdCard identity={id} shownAttributes={['idDocType', 'idDocNo']} hideAccounts />
+                        </Button.Base>
+                    ))
+                )}
+            </Page.Main>
+        </Page>
+    );
+}

packages/browser-wallet/src/popup/popupX/pages/CreateAccount/CreateAccount.tsx

@@ -0,0 +1,137 @@
+import React, { useCallback } from 'react';
+import Page from '@popup/popupX/shared/Page';
+import { useTranslation } from 'react-i18next';
+import { Navigate, useNavigate, useParams } from 'react-router-dom';
+import Button from '@popup/popupX/shared/Button';
+import { identitiesAtom, identityProvidersAtom } from '@popup/store/identity';
+import { useAtom, useAtomValue, useSetAtom } from 'jotai';
+import { ConfirmedIdCard } from '@popup/popupX/shared/IdCard';
+import { ConfirmedIdentity, CreationStatus } from '@shared/storage/types';
+import FatArrowUp from '@assets/svgX/fat-arrow-up.svg';
+import { grpcClientAtom, networkConfigurationAtom } from '@popup/store/settings';
+import { useDecryptedSeedPhrase } from '@popup/shared/utils/seed-phrase-helpers';
+import { addToastAtom } from '@popup/state';
+import { creatingCredentialRequestAtom, credentialsAtom } from '@popup/store/account';
+import { getGlobal, getNet } from '@shared/utils/network-helpers';
+import { isIdentityOfCredential } from '@shared/utils/identity-helpers';
+import { getNextEmptyCredNumber } from '@popup/shared/utils/account-helpers';
+import { popupMessageHandler } from '@popup/shared/message-handler';
+import { InternalMessageType } from '@messaging';
+import { CredentialDeploymentBackgroundResponse } from '@shared/utils/types';
+import { absoluteRoutes } from '@popup/popupX/constants/routes';
+
+/**
+ * Hook providing function for sending credential deployments.
+ */
+function useSendCredentialDeployment() {
+    const providers = useAtomValue(identityProvidersAtom);
+    const credentials = useAtomValue(credentialsAtom);
+    const network = useAtomValue(networkConfigurationAtom);
+    const addToast = useSetAtom(addToastAtom);
+    const seedPhrase = useDecryptedSeedPhrase((e) => addToast(e.message));
+    const client = useAtomValue(grpcClientAtom);
+
+    const loading = !seedPhrase || !network || !providers || !credentials;
+    const sendCredentialDeployment = useCallback(
+        async (identity: ConfirmedIdentity) => {
+            if (loading) {
+                throw new Error('Still loading relevant information');
+            }
+
+            const identityProvider = providers.find((p) => p.ipInfo.ipIdentity === identity.providerIndex);
+            if (!identityProvider) {
+                throw new Error('provider not found');
+            }
+            const global = await getGlobal(client);
+
+            // Make request
+            const credsOfCurrentIdentity = credentials.filter(isIdentityOfCredential(identity));
+            const credNumber = getNextEmptyCredNumber(credsOfCurrentIdentity);
+
+            const response: CredentialDeploymentBackgroundResponse = await popupMessageHandler.sendInternalMessage(
+                InternalMessageType.SendCredentialDeployment,
+                {
+                    globalContext: global,
+                    ipInfo: identityProvider.ipInfo,
+                    arsInfos: identityProvider.arsInfos,
+                    seedAsHex: seedPhrase,
+                    net: getNet(network),
+                    idObject: identity.idObject.value,
+                    revealedAttributes: [],
+                    identityIndex: identity.index,
+                    credNumber,
+                }
+            );
+            return response;
+        },
+        [seedPhrase, network, providers, credentials, loading]
+    );
+
+    return { loading, sendCredentialDeployment };
+}
+
+type CreateAccountConfirmProps = {
+    identityProviderIndex: number;
+    identityIndex: number;
+};
+
+function ConfirmInfo({ identityProviderIndex, identityIndex }: CreateAccountConfirmProps) {
+    const { t } = useTranslation('x', { keyPrefix: 'createAccount' });
+    const identities = useAtomValue(identitiesAtom);
+    const identity = identities.find((id) => id.providerIndex === identityProviderIndex && id.index === identityIndex);
+    const [creatingCredentialRequest, setCreatingRequest] = useAtom(creatingCredentialRequestAtom);
+    const deployment = useSendCredentialDeployment();
+    const nav = useNavigate();
+    const onCreateAccount = useCallback(async () => {
+        if (identity === undefined || identity.status !== CreationStatus.Confirmed) {
+            throw new Error(`Invalid identity: ${identity}`);
+        }
+        setCreatingRequest(true);
+        deployment
+            .sendCredentialDeployment(identity)
+            .catch(() => {})
+            .then(() => {
+                nav(absoluteRoutes.home.path);
+            })
+            .finally(() => {
+                setCreatingRequest(false);
+            });
+    }, [deployment.sendCredentialDeployment]);
+
+    if (identity === undefined) {
+        return null;
+    }
+    if (identity.status !== CreationStatus.Confirmed) {
+        return <Navigate to="../" />;
+    }
+    const loading = creatingCredentialRequest.loading || creatingCredentialRequest.value || deployment.loading;
+    return (
+        <>
+            <div className="justify-content-center">
+                <FatArrowUp />
+            </div>
+            <ConfirmedIdCard identity={identity} shownAttributes={['idDocType', 'idDocNo']} hideAccounts />
+            <Button.Main disabled={loading} type="submit" label={t('confirmButton')} onClick={onCreateAccount} />
+        </>
+    );
+}
+
+export default function CreateAccountConfirm() {
+    const params = useParams();
+    if (params.identityProviderIndex === undefined || params.identityIndex === undefined) {
+        // No account address passed in the url.
+        return <Navigate to="../" />;
+    }
+    const identityIndex = parseInt(params.identityIndex, 10);
+    const identityProviderIndex = parseInt(params.identityProviderIndex, 10);
+    if (Number.isNaN(identityProviderIndex) || Number.isNaN(identityIndex)) {
+        return <Navigate to="../" />;
+    }
+    return (
+        <Page className="create-account-x">
+            <Page.Footer>
+                <ConfirmInfo identityIndex={identityIndex} identityProviderIndex={identityProviderIndex} />
+            </Page.Footer>
+        </Page>
+    );
+}

packages/browser-wallet/src/popup/popupX/pages/CreateAccount/CreateAccountConfirm.tsx

@@ -0,0 +1,11 @@
+const t = {
+    selectIdentity: 'Select an identity',
+    noValidIdentities:
+        'There are currently no confirmed and non-expired identities. Please issue a new identity first.',
+    selectIdentityDescription: `The ID Documents (e.g. Passport pictures) that are used for the ID verification, are held exclusively by our trusted, third-party identity providers in their own off-chain records. This means your ID data will not be share on-chain.
+
+Which identity do you want to use to create the account?`,
+    confirmButton: 'Create account',
+};
+
+export default t;

packages/browser-wallet/src/popup/popupX/pages/CreateAccount/i18n/en.ts

@@ -0,0 +1,2 @@
+export { default } from './CreateAccount';
+export { default as CreateAccountConfirm } from './CreateAccountConfirm';

packages/browser-wallet/src/popup/popupX/pages/CreateAccount/index.ts

@@ -20,14 +20,14 @@ import { cpStakingCooldown } from '@shared/utils/chain-parameters-helpers';
 import { submittedTransactionRoute } from '@popup/popupX/constants/routes';
 import Text from '@popup/popupX/shared/Text';
 import { useSelectedAccountInfo } from '@popup/shared/AccountInfoListenerContext/AccountInfoListenerContext';
+import ErrorMessage from '@popup/popupX/shared/Form/ErrorMessage';
 import {
     isRange,
     showCommissionRate,
     showValidatorAmount,
     showValidatorOpenStatus,
     showValidatorRestake,
 } from '../util';
-import ErrorMessage from '@popup/popupX/shared/Form/ErrorMessage';
 
 export type ValidationResultLocationState = {
     payload: ConfigureBakerPayload;