Only show valid IDs during account creation and text when none are valid

Author: limemloh

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import Page from '@popup/popupX/shared/Page';
 import Text from '@popup/popupX/shared/Text';
 import { useTranslation } from 'react-i18next';
@@ -10,9 +10,31 @@ import Button from '@popup/popupX/shared/Button';
 import { generatePath, useNavigate } from 'react-router-dom';
 import { absoluteRoutes } from '@popup/popupX/constants/routes';
 
+/**
+ * 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 = new Date();
+        return identities.flatMap((id) => {
+            if (id.status !== CreationStatus.Confirmed) {
+                return [];
+            }
+            const validToDate = new Date(id.idObject.value.attributeList.validTo);
+            if (validToDate < now) {
+                return [];
+            }
+            return [id];
+        });
+    }, [identities]);
+}
+
 export default function CreateAccount() {
     const { t } = useTranslation('x', { keyPrefix: 'createAccount' });
-    const identities = useAtomValue(identitiesAtom);
     const nav = useNavigate();
     const navToCreateAccountConfirm = (identity: ConfirmedIdentity) => () =>
         nav(
@@ -21,35 +43,28 @@ export default function CreateAccount() {
                 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>
-                {identities.map((id) => {
-                    switch (id.status) {
-                        case CreationStatus.Confirmed:
-                            return (
-                                <Button.Base
-                                    className="id-card-button"
-                                    key={`${id.providerIndex}:${id.index}`}
-                                    onClick={navToCreateAccountConfirm(id)}
-                                >
-                                    <ConfirmedIdCard
-                                        identity={id}
-                                        shownAttributes={['idDocType', 'idDocNo']}
-                                        hideAccounts
-                                    />
-                                </Button.Base>
-                            );
-                        case CreationStatus.Pending:
-                            return null;
-                        case CreationStatus.Rejected:
-                            return null;
-                        default:
-                            return null;
-                    }
-                })}
+                {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/i18n/en.ts

@@ -1,5 +1,7 @@
 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?`,