fix: keep firefox background script alive (#1885)

Author: greatertomi

apps/browser-extension-wallet/package.json

@@ -37,7 +37,7 @@
     "cleanup:firefox-artifacts": "rm -rf artifacts-firefox",
     "cleanup:node_modules": "rm -rf node_modules",
     "dev": "run-s cleanup:dist dev:project",
-    "dev:firefox": "BROWSER=firefox run-s cleanup:dist watch:sw serve:app ",
+    "dev:firefox": "BROWSER=firefox run-s cleanup:dist dev:project ",
     "dev:project": "run-p watch:sw serve:app",
     "format-check": "echo \"@lace/browser-extension-wallet: no format-check command specified\"",
     "lint": "cd ../.. && yarn extension:lint",

apps/browser-extension-wallet/src/hooks/__tests__/useMaxAda.test.ts

@@ -4,14 +4,17 @@
 import { useMaxAda, UTXO_DEPLETED_ADA_BUFFER } from '../useMaxAda';
 import { renderHook } from '@testing-library/react-hooks';
 import { mockWalletInfoTestnet } from '@src/utils/mocks/test-helpers';
-import { Subject, of } from 'rxjs';
+import { Subject, of, BehaviorSubject } from 'rxjs';
 import { Wallet } from '@lace/cardano';
 import { waitFor } from '@testing-library/react';
 import { act } from 'react-dom/test-utils';
+import { Status } from '@components/WalletStatus';
 
 const MIN_COINS_FOR_TOKENS = 1_155_080;
 const TX_FEE = 155_381;
 
+const statusSubject = new BehaviorSubject({ text: 'test', status: Status.SYNCED });
+
 const inspect = jest.fn();
 const mockCreateTxBuilder = jest.fn().mockReturnValue({
   inspect,
@@ -38,7 +41,8 @@ jest.mock('../../stores', () => ({
   useWalletStore: () => ({
     walletInfo: mockWalletInfoTestnet,
     inMemoryWallet
-  })
+  }),
+  useSyncStatus: () => statusSubject
 }));
 
 const outputMap = new Map();

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

@@ -1,13 +1,14 @@
 /* eslint-disable no-magic-numbers */
 import { useEffect, useState } from 'react';
 import { Wallet } from '@lace/cardano';
-import { useWalletStore } from '@src/stores';
+import { useSyncStatus, useWalletStore } from '@src/stores';
 import { useObservable } from '@lace/common';
 import { OutputsMap, useMaxAdaStatus, useTransactionProps } from '@src/views/browser-view/features/send-transaction';
 import { TxBuilder } from '@cardano-sdk/tx-construction';
 import { Assets, WalletUtil } from '@cardano-sdk/wallet';
 import pDebounce from 'p-debounce';
 import { subtractValueQuantities } from '@cardano-sdk/core';
+import { Status } from '@components/WalletStatus';
 
 const { getTotalMinimumCoins, setMissingCoins } = Wallet;
 
@@ -236,13 +237,15 @@ export const dCalculateMaxAda = pDebounce.promise(calculateMaxAda);
 
 export const useMaxAda = (): bigint => {
   const [maxADA, setMaxADA] = useState<bigint>(BigInt(0));
+  const status$ = useSyncStatus();
   const { walletInfo, inMemoryWallet } = useWalletStore();
   const balance = useObservable(inMemoryWallet?.balance?.utxo.available$);
   const availableRewards = useObservable(inMemoryWallet?.balance?.rewardAccounts?.rewards$);
   const assetInfo = useObservable(inMemoryWallet?.assetInfo$);
   const { outputsMap } = useTransactionProps();
   const { setMaxAdaLoading } = useMaxAdaStatus();
   const address = walletInfo?.addresses[0].address;
+  const walletStatus = useObservable(status$);
 
   useEffect(() => {
     const abortController = new AbortController();
@@ -289,13 +292,13 @@ export const useMaxAda = (): bigint => {
       }
     };
 
-    if (balance && address) {
+    if (balance && address && walletStatus.status === Status.SYNCED) {
       calculate();
     }
     return () => {
       abortController.abort();
     };
-  }, [availableRewards, assetInfo, balance, inMemoryWallet, address, outputsMap, setMaxAdaLoading]);
+  }, [availableRewards, assetInfo, balance, inMemoryWallet, address, outputsMap, setMaxAdaLoading, walletStatus]);
 
   return maxADA;
 };

apps/browser-extension-wallet/src/lib/scripts/background/keep-alive-sw.ts

@@ -20,3 +20,7 @@ runtime.onConnect.addListener((port: TimedPort) => {
   port.onDisconnect.addListener(deleteTimer);
   port._timer = setTimeout(forceReconnect, 250e3, port);
 });
+
+if (process.env.BROWSER === 'firefox') {
+  runtime.onMessage.addListener(() => Promise.resolve('Pong'));
+}

apps/browser-extension-wallet/src/lib/scripts/keep-alive-ui.ts

@@ -1,6 +1,27 @@
 import { runtime } from 'webextension-polyfill';
+import { logger } from '@lace/common';
 
-(function connect() {
+const TIMEOUT_DURATION = 5000;
+
+const setupKeepAliveConnection = () => {
   const port = runtime.connect({ name: 'keepAlive' });
-  port.onDisconnect.addListener(connect);
-})();
+  port.onDisconnect.addListener(setupKeepAliveConnection);
+};
+
+const setupFirefoxWakeInterval = () => {
+  if (process.env.BROWSER === 'firefox') {
+    setInterval(() => {
+      runtime
+        .sendMessage('ping')
+        .then((response) => {
+          logger.debug('Response received:', response);
+        })
+        .catch((error) => {
+          logger.error('Connection error:', error);
+        });
+    }, TIMEOUT_DURATION);
+  }
+};
+
+setupKeepAliveConnection();
+setupFirefoxWakeInterval();