fix: popup new user guide

src/background/controller/wallet.ts

@@ -131,6 +131,7 @@ import pRetry from 'p-retry';
 import Browser from 'webextension-polyfill';
 import SafeApiKit from '@safe-global/api-kit';
 import { hashSafeMessage } from '@safe-global/protocol-kit';
+import { userGuideService } from '../service/userGuide';
 
 const stashKeyrings: Record<string | number, any> = {};
 
@@ -143,6 +144,7 @@ export class WalletController extends BaseController {
   /* wallet */
   boot = async (password) => {
     await keyringService.boot(password);
+    userGuideService.destroy();
     const hasOtherProvider = preferenceService.getHasOtherProvider();
     const isDefaultWallet = preferenceService.getIsDefaultWallet();
     if (!hasOtherProvider) {
@@ -4906,6 +4908,13 @@ export class WalletController extends BaseController {
       throw e;
     }
   };
+  tryOpenOrActiveUserGuide = async () => {
+    if (this.isBooted()) {
+      return false;
+    }
+    await userGuideService.activeUserGuide();
+    return true;
+  };
 }
 
 const wallet = new WalletController();

src/background/index.ts

@@ -54,7 +54,7 @@ import { customTestnetService } from './service/customTestnet';
 import { findChain } from '@/utils/chain';
 import { syncChainService } from './service/syncChain';
 import { GasAccountServiceStore } from './service/gasAccount';
-import { openInTab } from './utils/extension';
+import { userGuideService } from './service/userGuide';
 
 Safe.adapter = fetchAdapter as any;
 
@@ -118,6 +118,10 @@ async function restoreAppState() {
   startEnableUser();
   walletController.syncMainnetChainList();
 
+  if (!keyringService.isBooted()) {
+    userGuideService.init();
+  }
+
   eventBus.addEventListener(EVENTS_IN_BG.ON_TX_COMPLETED, ({ address }) => {
     if (!address) return;
 
@@ -392,14 +396,10 @@ function startEnableUser() {
 
 // On first install, open a new tab with Rabby
 async function onInstall() {
-  const storeAlreadyExisted = Boolean(
-    Object.keys(await browser.storage.local.get(null)).filter((key) => {
-      return !['extensionId', 'openapi'].includes(key);
-    }).length
-  );
+  const storeAlreadyExisted = await userGuideService.isStorageExisted();
   // If the store doesn't exist, then this is the first time running this script,
   // and is therefore an install
   if (!storeAlreadyExisted) {
-    openInTab('./index.html#/new-user/guide');
+    await userGuideService.openUserGuide();
   }
 }

src/background/service/userGuide.ts

@@ -0,0 +1,63 @@
+import browser from 'webextension-polyfill';
+
+class UserGuideService {
+  currentTabId: number | undefined = undefined;
+
+  constructor() {}
+
+  init = () => {
+    browser.tabs.onRemoved.addListener(this.onTabRemoved);
+  };
+
+  isStorageExisted = async () => {
+    return Boolean(
+      Object.keys(await browser.storage.local.get(null)).filter((key) => {
+        return !['extensionId', 'openapi'].includes(key);
+      }).length
+    );
+  };
+
+  openUserGuide = async () => {
+    const tab = await browser.tabs.create({
+      active: true,
+      url: './index.html#/new-user/guide',
+    });
+    this.currentTabId = tab.id;
+  };
+
+  activeUserGuide = async () => {
+    if (this.currentTabId) {
+      try {
+        const tab = await browser.tabs.get(this.currentTabId);
+        if (
+          !tab.url ||
+          tab.url.indexOf(browser.runtime.getURL('index.html#/new-user/')) === 0
+        ) {
+          await browser.tabs.update(this.currentTabId, {
+            active: true,
+          });
+        } else {
+          this.openUserGuide();
+        }
+      } catch (e) {
+        console.log(e);
+        this.openUserGuide();
+      }
+    } else {
+      this.openUserGuide();
+    }
+  };
+
+  onTabRemoved = (tabId: number) => {
+    if (tabId === this.currentTabId) {
+      this.currentTabId = undefined;
+    }
+  };
+
+  destroy = () => {
+    browser.tabs.onRemoved.removeListener(this.onTabRemoved);
+    this.currentTabId = undefined;
+  };
+}
+
+export const userGuideService = new UserGuideService();

src/ui/app.tsx

@@ -132,10 +132,9 @@ const main = () => {
   store.dispatch.chains.init();
 
   if (getUiType().isPop) {
-    wallet.isBooted().then((isBooted) => {
-      // todo check tabs
-      if (!isBooted) {
-        openInTab('./index.html#/new-user/guide');
+    wallet.tryOpenOrActiveUserGuide().then((opened) => {
+      if (opened) {
+        window.close();
       }
     });
   }