feat(extension): LW-6779 on-demand addresses discovery (#673)

---------

Co-authored-by: Tomek Marciniak <tmarciniakm@gmail.com>

---------

Signed-off-by: Szymon Masłowski <szymon.maslowski@iohk.io>
Co-authored-by: Tomek Marciniak <tmarciniakm@gmail.com>

Author: szymonmaslowski

apps/browser-extension-wallet/src/assets/icons/refresh.component.svg

@@ -0,0 +1,48 @@
+import RefreshIcon from '@assets/icons/refresh.component.svg';
+import WarningIcon from '@assets/icons/warning.component.svg';
+import styles from '@components/MainLoader/MainLoader.module.scss';
+import { Loader, toast } from '@lace/common';
+import { AddressesDiscoveryStatus } from '@lib/communication';
+import { useWalletStore } from '@stores';
+import { WarningModal } from '@views/browser/components';
+import React, { FC, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export const AddressesDiscoveryOverlay: FC = ({ children }) => {
+  const { t } = useTranslation();
+  const { hdDiscoveryStatus, initialHdDiscoveryCompleted } = useWalletStore();
+  const [prevHdDiscoveryStatus, setPrevHdDiscoveryStatus] = useState<AddressesDiscoveryStatus | null>();
+
+  useEffect(() => {
+    const prevStatusWasInProgress = prevHdDiscoveryStatus === AddressesDiscoveryStatus.InProgress;
+    setPrevHdDiscoveryStatus(hdDiscoveryStatus);
+
+    if (
+      !prevStatusWasInProgress ||
+      ![AddressesDiscoveryStatus.Error, AddressesDiscoveryStatus.Idle].includes(hdDiscoveryStatus)
+    ) {
+      return;
+    }
+
+    toast.notify({
+      icon: AddressesDiscoveryStatus.Error === hdDiscoveryStatus ? WarningIcon : RefreshIcon,
+      text: t(
+        AddressesDiscoveryStatus.Error === hdDiscoveryStatus
+          ? 'addressesDiscovery.toast.errorText'
+          : 'addressesDiscovery.toast.successText'
+      ),
+      withProgressBar: true
+    });
+  }, [hdDiscoveryStatus, prevHdDiscoveryStatus, t]);
+
+  return (
+    <>
+      {children}
+      <WarningModal
+        header={t('addressesDiscovery.overlay.title')}
+        content={<Loader className={styles.loader} data-testid="hd-discovery-loader" />}
+        visible={initialHdDiscoveryCompleted && hdDiscoveryStatus === AddressesDiscoveryStatus.InProgress}
+      />
+    </>
+  );
+};

apps/browser-extension-wallet/src/assets/icons/warning.component.svg

@@ -0,0 +1 @@
+export { AddressesDiscoveryOverlay } from './AddressesDiscoveryOverlay';

apps/browser-extension-wallet/src/components/AddressesDiscoveryOverlay/AddressesDiscoveryOverlay.tsx

@@ -18,6 +18,7 @@ import { BackgroundServiceAPIProvider } from '@providers/BackgroundServiceAPI';
 import { APP_MODE_POPUP } from './utils/constants';
 import { PostHogClientProvider } from '@providers/PostHogClientProvider';
 import { ExperimentsProvider } from '@providers/ExperimentsProvider/context';
+import { AddressesDiscoveryOverlay } from 'components/AddressesDiscoveryOverlay';
 
 const App = (): React.ReactElement => (
   <BackgroundServiceAPIProvider>
@@ -32,7 +33,9 @@ const App = (): React.ReactElement => (
                     <ExperimentsProvider>
                       <AnalyticsProvider>
                         <ThemeProvider>
-                          <DappConnectorView />
+                          <AddressesDiscoveryOverlay>
+                            <DappConnectorView />
+                          </AddressesDiscoveryOverlay>
                         </ThemeProvider>
                       </AnalyticsProvider>
                     </ExperimentsProvider>

apps/browser-extension-wallet/src/components/AddressesDiscoveryOverlay/index.ts

@@ -22,3 +22,4 @@ export * from './useUpdateAddressStatus';
 export * from './useOnAddressSave';
 export * from './useSendEvent';
 export * from './useAppInit';
+export * from './useAddressesDiscoverer';

apps/browser-extension-wallet/src/dapp-connector.tsx

@@ -0,0 +1,23 @@
+import { Shutdown } from '@cardano-sdk/util';
+import { Wallet } from '@lace/cardano';
+import { consumeAddressesDiscoverer, exposeKeyAgent } from '@lib/communication';
+import { useCallback } from 'react';
+
+const addressesDiscoverer = consumeAddressesDiscoverer();
+let shutdownExposedKeyAgent: Shutdown['shutdown'];
+
+type useAddressesDiscovererSetupParams = {
+  asyncKeyAgent: Wallet.KeyManagement.AsyncKeyAgent;
+  chainName: Wallet.ChainName;
+};
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export const useAddressesDiscoverer = () => ({
+  addressesDiscoverer,
+  prepare: useCallback(async ({ asyncKeyAgent, chainName }: useAddressesDiscovererSetupParams) => {
+    shutdownExposedKeyAgent?.();
+    const { channelName, shutdown } = await exposeKeyAgent(asyncKeyAgent);
+    shutdownExposedKeyAgent = shutdown;
+    await addressesDiscoverer.setup({ chainName, keyAgentChannelName: channelName });
+  }, [])
+});

apps/browser-extension-wallet/src/hooks/index.ts

@@ -1,11 +1,11 @@
 /* eslint-disable unicorn/no-null */
 import { WalletManagerUi } from '@cardano-sdk/web-extension';
-import { useWalletManager } from '@hooks';
+import { useAddressesDiscoverer, useWalletManager } from '@hooks';
+import { Wallet } from '@lace/cardano';
 import { useWalletStore } from '@stores';
 import { getValueFromLocalStorage } from '@utils/local-storage';
 import { useCallback, useEffect } from 'react';
 import { runtime } from 'webextension-polyfill';
-import { Wallet } from '@lace/cardano';
 
 const useAddressesListener = (
   callback: (addresses: Wallet.KeyManagement.GroupedAddress[]) => void | Promise<void>,
@@ -21,17 +21,34 @@ const useAddressesListener = (
 };
 
 export const useAppInit = (): void => {
-  const { environmentName, setWalletInfo, setWalletManagerUi, walletManagerUi } = useWalletStore();
+  const { cardanoWallet, environmentName, setHdDiscoveryStatus, setWalletInfo, setWalletManagerUi, walletManagerUi } =
+    useWalletStore();
   const { updateAddresses } = useWalletManager();
+  const { addressesDiscoverer, prepare: prepareAddressesDiscoverer } = useAddressesDiscoverer();
 
   useEffect(() => {
     const walletManager = new WalletManagerUi({ walletName: process.env.WALLET_NAME }, { logger: console, runtime });
     setWalletManagerUi(walletManager);
   }, [setWalletManagerUi]);
 
+  useEffect(() => {
+    (async () => {
+      if (!cardanoWallet?.asyncKeyAgent) return;
+      await prepareAddressesDiscoverer({ chainName: environmentName, asyncKeyAgent: cardanoWallet?.asyncKeyAgent });
+    })();
+  }, [cardanoWallet?.asyncKeyAgent, environmentName, prepareAddressesDiscoverer]);
+
+  useEffect(() => {
+    const subscription = addressesDiscoverer.status$.subscribe(setHdDiscoveryStatus);
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [addressesDiscoverer, setHdDiscoveryStatus]);
+
   useAddressesListener(
     useCallback(
       async (addresses) => {
+        if (!addresses) return;
         const { name } = getValueFromLocalStorage('wallet');
         setWalletInfo({
           name: name ?? 'Lace',

apps/browser-extension-wallet/src/hooks/useAddressesDiscoverer.ts

@@ -0,0 +1,47 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+import { Wallet } from '@lace/cardano';
+import { consumeRemoteApi, exposeApi, RemoteApiPropertyType } from '@cardano-sdk/web-extension';
+import { Subject, of } from 'rxjs';
+import { runtime } from 'webextension-polyfill';
+
+type AddressesDiscovererSetupDependencies = {
+  chainName: Wallet.ChainName;
+  keyAgentChannelName: string;
+};
+
+export enum AddressesDiscoveryStatus {
+  Idle = 'Idle',
+  InProgress = 'InProgress',
+  Error = 'Error'
+}
+
+export type AddressesDiscoverer = {
+  status$: Subject<AddressesDiscoveryStatus>;
+  discover: () => Promise<Wallet.KeyManagement.GroupedAddress[]>;
+  setup: (dependencies: AddressesDiscovererSetupDependencies) => void;
+};
+
+export type AddressesDiscovererExposed = Omit<AddressesDiscoverer, 'setup'> & {
+  setup: (dependencies: AddressesDiscovererSetupDependencies) => Promise<void>;
+};
+
+const commonConfig = {
+  baseChannel: 'addresses-discoverer',
+  properties: {
+    status$: RemoteApiPropertyType.HotObservable,
+    discover: RemoteApiPropertyType.MethodReturningPromise,
+    setup: RemoteApiPropertyType.MethodReturningPromise
+  }
+} as const;
+
+export const exposeAddressesDiscoverer = (addressesDiscoverer: AddressesDiscoverer) =>
+  exposeApi(
+    {
+      ...commonConfig,
+      api$: of(addressesDiscoverer)
+    },
+    { logger: console, runtime }
+  );
+
+export const consumeAddressesDiscoverer = () =>
+  consumeRemoteApi<AddressesDiscovererExposed>(commonConfig, { logger: console, runtime });

apps/browser-extension-wallet/src/hooks/useAppInit.ts

@@ -0,0 +1,7 @@
+export {
+  AddressesDiscoveryStatus,
+  consumeAddressesDiscoverer,
+  exposeAddressesDiscoverer
+} from './addresses-discoverer';
+export type { AddressesDiscoverer } from './addresses-discoverer';
+export { consumeKeyAgent, exposeKeyAgent } from './key-agent';