Merge pull request #426 from Concordium/abort-recovery

Allow aborting recovery when there are no identities

Author: orhoj

packages/browser-wallet-message-hub/src/message.ts

@@ -47,6 +47,7 @@ export enum InternalMessageType {
     AddWeb3IdCredential = 'I_AddWeb3IdCredential',
     LoadWeb3IdBackup = 'I_LoadWeb3IdBackup',
     ImportWeb3IdBackup = 'I_ImportWeb3IdBackup',
+    AbortRecovery = 'I_AbortRecovery',
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any

packages/browser-wallet/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 1.4.0
+
+### Added
+
+-   Recovery can now be aborted when an identity has not yet been found.
+
 ## 1.3.2
 
 ### Added

packages/browser-wallet/src/background/recovery.ts

@@ -33,7 +33,7 @@ import { decrypt } from '@shared/utils/crypto';
 import { Buffer } from 'buffer/';
 import { GRPCTIMEOUT } from '@shared/constants/networkConfiguration';
 import { addCredential, addIdentity, updateCredentials, updateIdentities } from './update';
-import bgMessageHandler from './message-handler';
+import bgMessageHandler, { onMessage } from './message-handler';
 import { openWindow } from './window-management';
 
 // How many empty identityIndices are allowed before stopping
@@ -107,7 +107,7 @@ async function getSeed() {
     return Buffer.from(mnemonicToSeedSync(await decrypt(encryptedSeed, passcode))).toString('hex');
 }
 
-async function performRecovery() {
+async function performRecovery(respond: (i: RecoveryBackgroundResponse) => void) {
     try {
         let status = await sessionRecoveryStatus.get();
         if (!status) {
@@ -144,8 +144,12 @@ async function performRecovery() {
         let initialGap: number | undefined = status.identityGap || 0;
         let initialIndex: number | undefined = status.identityIndex || 0;
 
+        const aborted = new AbortController();
+        onMessage(InternalMessageType.AbortRecovery).then(() => aborted.abort());
+
         for (const provider of providers) {
             const providerIndex = provider.ipInfo.ipIdentity;
+
             if (completedProviders.includes(providerIndex)) {
                 // eslint-disable-next-line no-continue
                 continue;
@@ -160,6 +164,9 @@ async function performRecovery() {
             let identityIndex = initialIndex || 0;
             initialIndex = undefined;
             while (emptyIndices < maxEmpty) {
+                if (aborted.signal.aborted) {
+                    return;
+                }
                 // Check if there is already an identity on the current index
                 let identity = identities?.find(identityMatch({ index: identityIndex, providerIndex }));
                 if (!identity || identity.status === CreationStatus.Rejected) {
@@ -256,7 +263,7 @@ async function performRecovery() {
         if (newCreds.length) {
             await addCredential(newCreds, network.genesisHash);
         }
-        return {
+        const added = {
             identities: [...identitiesToAdd, ...identitiesToUpdate].map((id) => ({
                 index: id.index,
                 providerIndex: id.providerIndex,
@@ -265,6 +272,9 @@ async function performRecovery() {
                 return { address: pair.cred.address, balance: pair.balance };
             }),
         };
+        respond({ status: BackgroundResponseStatus.Success, added });
+    } catch (e) {
+        respond({ status: BackgroundResponseStatus.Error, reason: (e as Error).toString() });
     } finally {
         await sessionIsRecovering.set(false);
     }
@@ -284,10 +294,7 @@ export async function startRecovery() {
                 await openWindow();
                 bgMessageHandler.sendInternalMessage(InternalMessageType.RecoveryFinished, result);
             };
-            return performRecovery()
-                .then((added) => respond({ status: BackgroundResponseStatus.Success, added }))
-                .catch((e) => respond({ status: BackgroundResponseStatus.Error, reason: e.toString() }))
-                .finally(() => chrome.alarms.clear(RECOVERY_ALARM_NAME));
+            return performRecovery(respond).finally(() => chrome.alarms.clear(RECOVERY_ALARM_NAME));
         });
     }
 }

packages/browser-wallet/src/popup/pages/Recovery/Recovery.scss

@@ -60,6 +60,11 @@
             margin: $description-margin-top rem(20px) 0;
             margin-bottom: rem(10px);
         }
+
+        &__abort-button {
+            color: $color-cta;
+            text-decoration: underline;
+        }
     }
 
     &__exit-button {

packages/browser-wallet/src/popup/pages/Recovery/RecoveryMain.tsx

@@ -1,15 +1,24 @@
-import React, { useEffect, useState, useCallback } from 'react';
+import React, { useEffect, useState, useCallback, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import { useTranslation } from 'react-i18next';
 import { grpcClientAtom, networkConfigurationAtom } from '@popup/store/settings';
-import { identityProvidersAtom, isRecoveringAtom, setRecoveryPayloadAtom } from '@popup/store/identity';
+import {
+    identitiesAtom,
+    identityProvidersAtom,
+    isRecoveringAtom,
+    recoveryNewIdentitiesAtom,
+    setRecoveryPayloadAtom,
+} from '@popup/store/identity';
 import PendingArrows from '@assets/svg/pending-arrows.svg';
 import { BackgroundResponseStatus } from '@shared/utils/types';
 import { getIdentityProviders } from '@popup/shared/utils/wallet-proxy';
 import { getGlobal, getNet } from '@shared/utils/network-helpers';
 import PageHeader from '@popup/shared/PageHeader';
 import { absoluteRoutes } from '@popup/constants/routes';
+import Button from '@popup/shared/Button';
+import { popupMessageHandler } from '@popup/shared/message-handler';
+import { InternalMessageType } from '@concordium/browser-wallet-message-hub';
 
 export default function RecoveryMain() {
     const { t } = useTranslation('recovery');
@@ -18,6 +27,8 @@ export default function RecoveryMain() {
     const [providers, setProviders] = useAtom(identityProvidersAtom);
     const [isRecovering, setIsRecovering] = useAtom(isRecoveringAtom);
     const setRecoveryStatus = useSetAtom(setRecoveryPayloadAtom);
+    const newIdentities = useAtomValue(recoveryNewIdentitiesAtom);
+    const identities = useAtomValue(identitiesAtom);
     const [runRecovery, setRunRecovery] = useState<boolean>(true);
     const navigate = useNavigate();
 
@@ -60,12 +71,31 @@ export default function RecoveryMain() {
             .catch((error) => onError(error.message));
     }, [runRecovery, isRecovering.loading, isRecovering.value, providers.length]);
 
+    const abort = useCallback(async () => {
+        popupMessageHandler.sendInternalMessage(InternalMessageType.AbortRecovery);
+        await setIsRecovering(false);
+        navigate(absoluteRoutes.home.account.path);
+    }, []);
+
+    const noIdentities = useMemo(
+        () => identities.length === 0 && (!newIdentities || newIdentities.length === 0),
+        [identities.length, newIdentities?.length]
+    );
+
     return (
         <>
             <PageHeader>{t('main.title')}</PageHeader>
             <div className="recovery__main onboarding-setup__page-with-header">
                 <div className="onboarding-setup__page-with-header__description">{t('main.description')}</div>
                 <PendingArrows className="loading" />
+                {noIdentities && (
+                    <p className="m-t-auto m-b-10">
+                        {t('main.abort')}{' '}
+                        <Button className="recovery__main__abort-button" clear onClick={abort}>
+                            {t('main.abortClickable')}
+                        </Button>
+                    </p>
+                )}
             </div>
         </>
     );

packages/browser-wallet/src/popup/pages/Recovery/i18n/da.ts

@@ -8,6 +8,8 @@ const t: typeof en = {
     main: {
         title: 'Genskaber din wallet',
         description: 'Vent venligst mens der søges efter dine identiteter og konti.',
+        abort: 'Jeg har ikke lavet en konto,',
+        abortClickable: 'så spring over',
     },
     finish: {
         success: 'Følgende identiteter og konti blev fundet.',

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

@@ -6,6 +6,8 @@ const t = {
     main: {
         title: 'Restoring your wallet',
         description: 'Searching for your IDs and accounts. Please wait.',
+        abort: 'I have never created an account,',
+        abortClickable: 'so skip this check',
     },
     finish: {
         success: 'The following identities and accounts were recovered.',

packages/browser-wallet/src/popup/store/identity.ts

@@ -9,7 +9,7 @@ import {
     SessionPendingIdentity,
 } from '@shared/storage/types';
 import { Atom, atom, WritableAtom } from 'jotai';
-import { atomFamily } from 'jotai/utils';
+import { atomFamily, selectAtom } from 'jotai/utils';
 import { credentialsAtomWithLoading } from './account';
 import { AsyncWrapper, atomWithChromeStorage } from './utils';
 
@@ -53,6 +53,7 @@ const recoveryStatusAtom = atomWithChromeStorage<RecoveryStatus | undefined>(
 export const setRecoveryPayloadAtom = atom<null, RecoveryPayload, Promise<void>>(null, (_, set, payload) =>
     set(recoveryStatusAtom, { payload })
 );
+export const recoveryNewIdentitiesAtom = selectAtom(recoveryStatusAtom, (v) => v.value?.identitiesToAdd);
 
 export const identityByAddressAtomFamily = atomFamily<
     string | undefined,