Feat/lw 11872 injection namespace less confusing (#1545)

mirceahasegan · web-flow · commit a2315b97238c · 2024-11-21T12:21:51.000+01:00
- dapp compatibility mode setting 
- inject cip30 based on dapp compat mode
diff --git a/apps/browser-extension-wallet/src/lib/scripts/background/__tests__/inject.test.ts b/apps/browser-extension-wallet/src/lib/scripts/background/__tests__/inject.test.ts
@@ -0,0 +1,142 @@
+/* eslint-disable no-magic-numbers */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { initializeInjectedScript } from '../inject';
+import { consumeRemoteAuthenticatorApi, consumeRemoteWalletApi } from '../api-consumers';
+import { getWalletMode } from '../injectUtil';
+import { injectGlobal } from '@cardano-sdk/dapp-connector';
+import { WalletMode } from '../../types';
+
+jest.mock('../api-consumers');
+jest.mock('../injectUtil', () => ({
+  ...jest.requireActual<any>('../injectUtil'),
+  getWalletMode: jest.fn()
+}));
+
+jest.mock('@cardano-sdk/dapp-connector', () => ({
+  ...jest.requireActual<any>('@cardano-sdk/dapp-connector'),
+  injectGlobal: jest.fn()
+}));
+
+describe('initializeInjectedScript', () => {
+  const logger = console;
+  const walletApi = {};
+  const authenticator = {};
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    (consumeRemoteAuthenticatorApi as jest.Mock).mockReturnValue(authenticator);
+    (consumeRemoteWalletApi as jest.Mock).mockReturnValue(walletApi);
+  });
+
+  describe('wallet mode not cached eagerly injects in lace with extensions', () => {
+    it('ignores dappInjectCompatibilityMode when in lace mode', async () => {
+      const latestWalletMode = Promise.resolve({ mode: 'lace', dappInjectCompatibilityMode: true });
+      (getWalletMode as jest.Mock).mockReturnValue({ latestWalletMode });
+
+      await initializeInjectedScript({ logger });
+
+      expect(injectGlobal).toHaveBeenCalledTimes(1);
+      expect(injectGlobal).toHaveBeenCalledWith(
+        expect.anything(),
+        expect.objectContaining({ supportedExtensions: [{ cip: 95 }] }),
+        expect.anything()
+      );
+    });
+
+    it('waits for dappInjectCompatibilityMode; does not inject in nami', async () => {
+      const latestWalletMode = Promise.resolve({ mode: 'nami', dappInjectCompatibilityMode: false });
+      (getWalletMode as jest.Mock).mockReturnValue({ latestWalletMode });
+
+      await initializeInjectedScript({ logger });
+
+      expect(injectGlobal).toHaveBeenCalledTimes(1);
+      expect(injectGlobal).toHaveBeenCalledWith(
+        expect.anything(),
+        expect.objectContaining({ supportedExtensions: [{ cip: 95 }] }),
+        expect.anything()
+      );
+    });
+
+    it('waits for dappInjectCompatibilityMode and lazy injects in nami too', async () => {
+      const latestWalletMode = Promise.resolve({ mode: 'nami', dappInjectCompatibilityMode: true });
+      (getWalletMode as jest.Mock).mockReturnValue({ latestWalletMode });
+
+      await initializeInjectedScript({ logger });
+
+      expect(injectGlobal).toHaveBeenCalledTimes(2);
+      expect(injectGlobal).toHaveBeenCalledWith(
+        expect.anything(),
+        expect.objectContaining({ supportedExtensions: [{ cip: 95 }] }),
+        expect.anything()
+      );
+
+      expect(injectGlobal).toHaveBeenCalledWith(
+        expect.anything(),
+        expect.objectContaining({ supportedExtensions: [] }),
+        expect.anything(),
+        'nami'
+      );
+    });
+  });
+
+  describe('wallet mode cached', () => {
+    describe('lace mode injects lace with extensions', () => {
+      it('eagerly injects in lace and ignores dappInjectCompatibilityMode', async () => {
+        const cachedWalletMode: WalletMode = { mode: 'lace', dappInjectCompatibilityMode: true };
+        const latestWalletMode = Promise.resolve({ mode: 'nami', dappInjectCompatibilityMode: false });
+        (getWalletMode as jest.Mock).mockReturnValue({ cachedWalletMode, latestWalletMode });
+
+        await initializeInjectedScript({ logger });
+
+        expect(injectGlobal).toHaveBeenCalledTimes(1);
+        expect(injectGlobal).toHaveBeenCalledWith(
+          expect.anything(),
+          expect.objectContaining({ supportedExtensions: [{ cip: 95 }] }),
+          expect.anything()
+        );
+      });
+    });
+
+    describe('nami mode injects lace with extensions', () => {
+      it('eagerly injects in nami and does not await latest because dappInjectCompatibilityMode is enabled', async () => {
+        const cachedWalletMode: WalletMode = { mode: 'nami', dappInjectCompatibilityMode: true };
+        const latestWalletMode = Promise.resolve({ mode: 'nami', dappInjectCompatibilityMode: false });
+        (getWalletMode as jest.Mock).mockReturnValue({ cachedWalletMode, latestWalletMode });
+
+        await initializeInjectedScript({ logger });
+
+        expect(injectGlobal).toHaveBeenCalledWith(
+          expect.anything(),
+          expect.objectContaining({ supportedExtensions: [{ cip: 95 }] }),
+          expect.anything()
+        );
+        expect(injectGlobal).toHaveBeenCalledWith(
+          expect.anything(),
+          expect.objectContaining({ supportedExtensions: [] }),
+          expect.anything(),
+          'nami'
+        );
+      });
+
+      it('awaits latest value and lazily injects in nami when dappInjectCompatibilityMode is initially disabled', async () => {
+        const cachedWalletMode: WalletMode = { mode: 'nami', dappInjectCompatibilityMode: false };
+        const latestWalletMode = Promise.resolve({ mode: 'nami', dappInjectCompatibilityMode: true });
+        (getWalletMode as jest.Mock).mockReturnValue({ cachedWalletMode, latestWalletMode });
+
+        await initializeInjectedScript({ logger });
+
+        expect(injectGlobal).toHaveBeenCalledWith(
+          expect.anything(),
+          expect.objectContaining({ supportedExtensions: [{ cip: 95 }] }),
+          expect.anything()
+        );
+        expect(injectGlobal).toHaveBeenCalledWith(
+          expect.anything(),
+          expect.objectContaining({ supportedExtensions: [] }),
+          expect.anything(),
+          'nami'
+        );
+      });
+    });
+  });
+});
diff --git a/apps/browser-extension-wallet/src/lib/scripts/background/content.ts b/apps/browser-extension-wallet/src/lib/scripts/background/content.ts
@@ -6,7 +6,7 @@ import {
   runContentScriptMessageProxy
 } from '@cardano-sdk/web-extension';
 import { consumeRemoteAuthenticatorApi, consumeRemoteWalletApi } from './api-consumers';
-import { modeApiProperties, WALLET_MODE_CHANNEL } from './injectUtil';
+import { laceFeaturesApiProperties, LACE_FEATURES_CHANNEL } from './injectUtil';
 
 // Disable logging in production for performance & security measures
 if (process.env.USE_DAPP_CONNECTOR === 'true') {
@@ -21,8 +21,8 @@ if (process.env.USE_DAPP_CONNECTOR === 'true') {
       consumeRemoteWalletApi({ walletName }, dependencies),
       consumeRemoteApi(
         {
-          baseChannel: WALLET_MODE_CHANNEL,
-          properties: modeApiProperties
+          baseChannel: LACE_FEATURES_CHANNEL,
+          properties: laceFeaturesApiProperties
         },
         dependencies
       )
diff --git a/apps/browser-extension-wallet/src/lib/scripts/background/inject.ts b/apps/browser-extension-wallet/src/lib/scripts/background/inject.ts
@@ -2,7 +2,8 @@
 import { Cip30Wallet, injectGlobal, WalletProperties } from '@cardano-sdk/dapp-connector';
 import { cip30, injectedRuntime, MessengerDependencies } from '@cardano-sdk/web-extension';
 import { consumeRemoteAuthenticatorApi, consumeRemoteWalletApi } from './api-consumers';
-import { getMode } from './injectUtil';
+import { getWalletMode, isCachedWalletModeResult } from './injectUtil';
+import { WalletMode } from '../types';
 
 const cip30WalletProperties: WalletProperties = {
   // eslint-disable-next-line max-len
@@ -19,7 +20,38 @@ const cip30WalletNamiProperties: WalletProperties = {
   supportedExtensions: []
 };
 
-const initializeInjectedScript = async ({ logger }: cip30.InitializeInjectedDependencies) => {
+/** Injects wallet in `lace` namespace with all extensions enabled */
+const injectInLaceNs = (
+  walletApi: ReturnType<typeof consumeRemoteWalletApi>,
+  authenticator: ReturnType<typeof consumeRemoteAuthenticatorApi>,
+  logger: cip30.InitializeInjectedDependencies['logger']
+): void => {
+  const wallet = new Cip30Wallet(cip30WalletProperties, { api: walletApi, authenticator, logger });
+
+  // Always inject in lace namespace with all extensions
+  injectGlobal(window, wallet, logger);
+};
+
+/**
+ * Inject in nami namespace for compatibility with dapps supporting only nami, when in nami mode and compatibility mode enabled.
+ *
+ * @returns true if injected in nami namespace, false otherwise
+ */
+const injectInNamiNs = (
+  { mode, dappInjectCompatibilityMode }: WalletMode,
+  walletApi: ReturnType<typeof consumeRemoteWalletApi>,
+  authenticator: ReturnType<typeof consumeRemoteAuthenticatorApi>,
+  logger: cip30.InitializeInjectedDependencies['logger']
+): boolean => {
+  if (mode === 'nami' && dappInjectCompatibilityMode) {
+    const namiWallet = new Cip30Wallet(cip30WalletNamiProperties, { api: walletApi, authenticator, logger });
+    injectGlobal(window, namiWallet, logger, 'nami');
+    return true;
+  }
+  return false;
+};
+
+export const initializeInjectedScript = async ({ logger }: cip30.InitializeInjectedDependencies): Promise<void> => {
   const dependencies: MessengerDependencies = {
     logger,
     runtime: injectedRuntime
@@ -28,14 +60,28 @@ const initializeInjectedScript = async ({ logger }: cip30.InitializeInjectedDepe
   const authenticator = consumeRemoteAuthenticatorApi(cip30WalletProperties, dependencies);
   const walletApi = consumeRemoteWalletApi(cip30WalletProperties, dependencies);
 
-  const mode = await getMode(injectedRuntime);
+  // Always eagerly inject in lace namespace with all extensions enabled to speed up injection
+  injectInLaceNs(walletApi, authenticator, logger);
+
+  const result = getWalletMode(injectedRuntime);
+
+  if (isCachedWalletModeResult(result)) {
+    // Cache was primed. Use it to speed up injection
+    const { cachedWalletMode, latestWalletMode } = result;
 
-  const wallet =
-    mode === 'lace'
-      ? new Cip30Wallet(cip30WalletProperties, { api: walletApi, authenticator, logger })
-      : new Cip30Wallet(cip30WalletNamiProperties, { api: walletApi, authenticator, logger });
+    const namiInjected = injectInNamiNs(cachedWalletMode, walletApi, authenticator, logger);
 
-  injectGlobal(window, wallet, logger, mode === 'nami' ? 'nami' : wallet.name);
+    if (!namiInjected) {
+      // Cached values indicated that we should NOT inject in nami namespace.
+      // No harm in waiting for the latest value and lazy inject it if was updated.
+      const latestMode = await latestWalletMode;
+      injectInNamiNs(latestMode, walletApi, authenticator, logger);
+    }
+  } else {
+    // Cache was not primed. Wait for the latest value and inject in nami namespace if needed
+    const { mode, dappInjectCompatibilityMode } = await result.latestWalletMode;
+    injectInNamiNs({ mode, dappInjectCompatibilityMode }, walletApi, authenticator, logger);
+  }
 };
 
 if (process.env.USE_DAPP_CONNECTOR === 'true') {
diff --git a/apps/browser-extension-wallet/src/lib/scripts/background/injectUtil.ts b/apps/browser-extension-wallet/src/lib/scripts/background/injectUtil.ts
@@ -1,4 +1,4 @@
-import type { ModeApi } from '../types';
+import type { LaceFeaturesApi, WalletMode } from '../types';
 
 import {
   consumeRemoteApi,
@@ -7,18 +7,22 @@ import {
   RemoteApiPropertyType
 } from '@cardano-sdk/web-extension';
 
+const WALLET_MODE_STORAGE_KEY = 'lace-wallet-mode';
 const logger = console;
 
-export const WALLET_MODE_CHANNEL = 'wallet-mode';
-export const modeApiProperties: RemoteApiProperties<ModeApi> = {
+export const LACE_FEATURES_CHANNEL = 'lace-features';
+export const laceFeaturesApiProperties: RemoteApiProperties<LaceFeaturesApi> = {
   getMode: RemoteApiPropertyType.MethodReturningPromise
 };
 
-const withModeApi = async <T>(invoke: (api: ModeApi) => Promise<T>, runtime: MinimalRuntime): Promise<T> => {
+const withLaceFeaturesApi = async <T>(
+  invoke: (api: LaceFeaturesApi) => Promise<T>,
+  runtime: MinimalRuntime
+): Promise<T> => {
   const modeApi = consumeRemoteApi(
     {
-      baseChannel: WALLET_MODE_CHANNEL,
-      properties: modeApiProperties
+      baseChannel: LACE_FEATURES_CHANNEL,
+      properties: laceFeaturesApiProperties
     },
     {
       runtime,
@@ -32,5 +36,25 @@ const withModeApi = async <T>(invoke: (api: ModeApi) => Promise<T>, runtime: Min
   }
 };
 
-export const getMode = async (runtime: MinimalRuntime): Promise<'lace' | 'nami'> =>
-  withModeApi(async (modeApi) => await modeApi.getMode(), runtime);
+type WalletModeResult =
+  | { cachedWalletMode: WalletMode; latestWalletMode: Promise<WalletMode> }
+  | { latestWalletMode: Promise<WalletMode> };
+
+export const isCachedWalletModeResult = (
+  result: WalletModeResult
+): result is { cachedWalletMode: WalletMode; latestWalletMode: Promise<WalletMode> } => 'cachedWalletMode' in result;
+
+const loadAndStoreWalletMode = async (runtime: MinimalRuntime) =>
+  withLaceFeaturesApi(async (laceFeaturesApi) => {
+    const laceMode = await laceFeaturesApi.getMode();
+    localStorage.setItem(WALLET_MODE_STORAGE_KEY, JSON.stringify(laceMode));
+    return laceMode;
+  }, runtime);
+
+export const getWalletMode = (runtime: MinimalRuntime): WalletModeResult => {
+  const cachedWalletMode = localStorage.getItem(WALLET_MODE_STORAGE_KEY);
+  return {
+    ...(cachedWalletMode && { cachedWalletMode: JSON.parse(cachedWalletMode) }),
+    latestWalletMode: loadAndStoreWalletMode(runtime)
+  };
+};
diff --git a/apps/browser-extension-wallet/src/lib/scripts/background/services/utilityServices.ts b/apps/browser-extension-wallet/src/lib/scripts/background/services/utilityServices.ts
@@ -12,7 +12,7 @@ import {
   TokenPrices,
   CoinPrices,
   ChangeModeData,
-  ModeApi
+  LaceFeaturesApi
 } from '../../types';
 import { Subject, of, BehaviorSubject } from 'rxjs';
 import { walletRoutePaths } from '@routes/wallet-paths';
@@ -23,7 +23,7 @@ import { config } from '@src/config';
 import { getADAPriceFromBackgroundStorage, closeAllLaceWindows } from '../util';
 import { currencies as currenciesMap, currencyCode } from '@providers/currency/constants';
 import { clearBackgroundStorage, getBackgroundStorage, setBackgroundStorage } from '../storage';
-import { modeApiProperties, WALLET_MODE_CHANNEL } from '../injectUtil';
+import { laceFeaturesApiProperties, LACE_FEATURES_CHANNEL } from '../injectUtil';
 
 export const requestMessage$ = new Subject<Message>();
 export const backendFailures$ = new BehaviorSubject(0);
@@ -190,16 +190,16 @@ if (process.env.USE_TOKEN_PRICING === 'true') {
   setInterval(fetchTokenPrices, TOKEN_PRICE_CHECK_INTERVAL);
 }
 
-exposeApi<ModeApi>(
+exposeApi<LaceFeaturesApi>(
   {
     api$: of({
       getMode: async () => {
-        const { namiMigration } = await getBackgroundStorage();
-        return namiMigration?.mode || 'lace';
+        const { namiMigration, dappInjectCompatibilityMode } = await getBackgroundStorage();
+        return { mode: namiMigration?.mode || 'lace', dappInjectCompatibilityMode: !!dappInjectCompatibilityMode };
       }
     }),
-    baseChannel: WALLET_MODE_CHANNEL,
-    properties: modeApiProperties
+    baseChannel: LACE_FEATURES_CHANNEL,
+    properties: laceFeaturesApiProperties
   },
   { logger: console, runtime }
 );
diff --git a/apps/browser-extension-wallet/src/lib/scripts/types/background-service.ts b/apps/browser-extension-wallet/src/lib/scripts/types/background-service.ts
@@ -105,8 +105,11 @@ export type BackgroundService = {
   backendFailures$: BehaviorSubject<number>;
 };
 
-export type WalletMode = BackgroundStorage['namiMigration']['mode'];
+export type WalletMode = {
+  mode: BackgroundStorage['namiMigration']['mode'];
+  dappInjectCompatibilityMode: BackgroundStorage['dappInjectCompatibilityMode'];
+};
 
-export type ModeApi = {
+export type LaceFeaturesApi = {
   getMode: () => Promise<WalletMode>;
 };
diff --git a/apps/browser-extension-wallet/src/lib/scripts/types/storage.ts b/apps/browser-extension-wallet/src/lib/scripts/types/storage.ts
@@ -35,6 +35,7 @@ export interface BackgroundStorage {
     completed: boolean;
     mode: 'lace' | 'nami';
   };
+  dappInjectCompatibilityMode?: boolean;
   optedInBeta?: boolean;
 }
 
diff --git a/apps/browser-extension-wallet/src/views/nami-mode/NamiView.tsx b/apps/browser-extension-wallet/src/views/nami-mode/NamiView.tsx
@@ -93,6 +93,17 @@ export const NamiView = withDappContext((): React.ReactElement => {
     txBuilder: collateralTxBuilder
   } = useCollateral();
 
+  const [isCompatibilityMode, setIsCompatibilityMode] = useState<boolean>();
+  useEffect(() => {
+    getBackgroundStorage()
+      .then(({ dappInjectCompatibilityMode }) => setIsCompatibilityMode(dappInjectCompatibilityMode))
+      .catch(console.error);
+  }, []);
+  const handleCompatibilityModeChoice = async (newCompatMode: boolean) => {
+    await setBackgroundStorage({ dappInjectCompatibilityMode: newCompatMode });
+    setIsCompatibilityMode(newCompatMode);
+  };
+
   const handleResolver = useHandleResolver();
 
   const cardanoPrice = priceResult.cardano.price;
@@ -195,7 +206,9 @@ export const NamiView = withDappContext((): React.ReactElement => {
         removeDapp,
         connectedDapps,
         isAnalyticsOptIn,
+        isCompatibilityMode,
         handleAnalyticsChoice,
+        handleCompatibilityModeChoice,
         createWallet: createWalletFromPrivateKey,
         getMnemonic,
         deleteWallet,
diff --git a/packages/nami/src/features/outside-handles-provider/types.ts b/packages/nami/src/features/outside-handles-provider/types.ts
diff --git a/packages/nami/src/ui/app/pages/settings.stories.tsx b/packages/nami/src/ui/app/pages/settings.stories.tsx
diff --git a/packages/nami/src/ui/app/pages/settings.tsx b/packages/nami/src/ui/app/pages/settings.tsx
diff --git a/packages/nami/src/ui/indexMain.tsx b/packages/nami/src/ui/indexMain.tsx

Original file line number	Diff line number	Diff line change
`@@ -35,6 +35,7 @@ export interface BackgroundStorage {`
`35`	`35`	`completed: boolean;`
`36`	`36`	`mode: 'lace' \| 'nami';`
`37`	`37`	`};`
	`38`	`+ dappInjectCompatibilityMode?: boolean;`
`38`	`39`	`optedInBeta?: boolean;`
`39`	`40`	`}`
`40`	`41`