feature: bringweb3 integrations

.gitignore

@@ -34,3 +34,6 @@ chrome.crx
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+
+# env
+.env

package.json

@@ -52,6 +52,7 @@
     "styled-components": "^5"
   },
   "dependencies": {
+    "@bringweb3/chrome-extension-kit": "^1.1.12",
     "@formatjs/intl": "2.10.4",
     "@hookform/resolvers": "2.9.10",
     "@lapo/asn1js": "1.2.4",
@@ -74,6 +75,7 @@
     "casper-js-sdk": "2.15.4",
     "casper-wallet-core": "git+ssh://[email protected]:make-software/casper-wallet-core.git#v0.9.7",
     "date-fns": "^2.30.0",
+    "dotenv-webpack": "^8.1.0",
     "i18next": "^23.11.0",
     "i18next-browser-languagedetector": "^7.2.1",
     "i18next-http-backend": "2.5.0",

src/apps/popup/app-router.tsx

@@ -9,6 +9,7 @@ import { AddContactPage } from '@popup/pages/add-contact';
 import { AddWatchAccount } from '@popup/pages/add-watch-account';
 import { AllAccountsPage } from '@popup/pages/all-accounts';
 import { BackupSecretPhrasePage } from '@popup/pages/backup-secret-phrase';
+import { BringWeb3Unlock } from '@popup/pages/bring-web3-unlock';
 import { BuyCSPRPage } from '@popup/pages/buy-cspr';
 import { ChangePasswordPage } from '@popup/pages/change-password';
 import { ConnectAnotherAccountPageContent } from '@popup/pages/connect-another-account';
@@ -251,6 +252,7 @@ function AppRoutes() {
       />
       <Route path={RouterPath.DeployDetails} element={<DeployDetailsPage />} />
       <Route path={RouterPath.AddWatchAccount} element={<AddWatchAccount />} />
+      <Route path={RouterPath.BringWeb3Unlock} element={<BringWeb3Unlock />} />
     </Routes>
   );
 }

src/apps/popup/pages/bring-web3-unlock/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+import { closeCurrentWindow } from '@background/close-current-window';
+
+// we use this for closing the window after the user unlocks the wallet for bringweb3 cashback
+export const BringWeb3Unlock: React.FC = () => {
+  closeCurrentWindow();
+
+  return null;
+};

src/apps/popup/router/paths.ts

@@ -33,5 +33,6 @@ export enum RouterPath {
   ImportAccountFromLedger = '/import-account-from-ledger',
   SignWithLedgerInNewWindow = '/sign-with-ledger-in-new-window',
   DeployDetails = '/deploys-details',
-  AddWatchAccount = '/add-watch-account'
+  AddWatchAccount = '/add-watch-account',
+  BringWeb3Unlock = '/bring-web3-unlock'
 }

src/background/bring-web3-events.ts

@@ -0,0 +1,15 @@
+import { ActionType, createAction } from 'typesafe-actions';
+
+export const bringWeb3Events = {
+  getActivePublicKey: createAction('GET_ACTIVE_PUBLIC_KEY')(),
+  getActivePublicKeyResponse: createAction('GET_ACTIVE_PUBLIC_KEY_RESPONSE')<{
+    publicKey: string;
+  }>(),
+  promptLoginRequest: createAction('PROMPT_LOGIN_REQUEST')(),
+  getTheme: createAction('GET_THEME')(),
+  getThemeResponse: createAction('GET_THEME_RESPONSE')<{
+    theme: 'light' | 'dark';
+  }>()
+};
+
+export type BringWeb3Events = ActionType<typeof bringWeb3Events>;

src/background/index.ts

@@ -1,3 +1,4 @@
+import { bringInitBackground } from '@bringweb3/chrome-extension-kit';
 import { RootAction, getType } from 'typesafe-actions';
 import {
   Tabs,
@@ -21,6 +22,10 @@ import {
   backgroundEvent,
   popupStateUpdated
 } from '@background/background-events';
+import {
+  BringWeb3Events,
+  bringWeb3Events
+} from '@background/bring-web3-events';
 import { WindowApp } from '@background/create-open-window';
 import {
   disableOnboardingFlow,
@@ -60,6 +65,7 @@ import {
   ratedInStoreChanged,
   resetRateApp
 } from '@background/redux/rate-app/actions';
+import { ThemeMode } from '@background/redux/settings/types';
 import {
   accountAdded,
   accountDisconnected,
@@ -142,12 +148,16 @@ import {
   themeModeSettingChanged,
   vaultSettingsReseted
 } from './redux/settings/actions';
+import { selectThemeModeSetting } from './redux/settings/selectors';
 import {
   vaultCipherCreated,
   vaultCipherReseted
 } from './redux/vault-cipher/actions';
 import { selectVaultCipherDoesExist } from './redux/vault-cipher/selectors';
-import { emitSdkEventToActiveTabsWithOrigin } from './utils';
+import {
+  emitSdkEventToActiveTabs,
+  emitSdkEventToActiveTabsWithOrigin
+} from './utils';
 // to resolve all repositories
 import './wallet-repositories';
 
@@ -266,7 +276,10 @@ tabs.onUpdated.addListener(async (tabId, changeInfo, tab) => {
 
 // NOTE: if two events are send at the same time (same function) it must reuse the same store instance
 runtime.onMessage.addListener(
-  async (action: RootAction | SdkMethod | popupStateUpdated, sender) => {
+  async (
+    action: RootAction | SdkMethod | popupStateUpdated | BringWeb3Events,
+    sender
+  ) => {
     const store = await getExistingMainStoreSingletonOrInit();
 
     return new Promise(async (sendResponse, sendError) => {
@@ -602,6 +615,74 @@ runtime.onMessage.addListener(
             // do nothing
             return;
 
+          case getType(bringWeb3Events.getActivePublicKey): {
+            const activeAccount = selectVaultActiveAccount(store.getState());
+
+            return sendResponse(
+              bringWeb3Events.getActivePublicKeyResponse({
+                publicKey: activeAccount?.publicKey!
+              })
+            );
+          }
+
+          case getType(bringWeb3Events.promptLoginRequest): {
+            const isLocked = selectVaultIsLocked(store.getState());
+
+            if (isLocked) {
+              windows.getCurrent().then(currentWindow => {
+                const windowWidth = currentWindow.width ?? 0;
+                const xOffset = currentWindow.left ?? 0;
+                const yOffset = currentWindow.top ?? 0;
+                const popupWidth = 360;
+                const popupHeight = 700;
+
+                windows.create({
+                  url: 'popup.html#/bring-web3-unlock',
+                  type: 'popup',
+                  height: popupHeight,
+                  width: popupWidth,
+                  left: windowWidth + xOffset - popupWidth,
+                  top: yOffset,
+                  focused: true
+                });
+              });
+            } else {
+              emitSdkEventToActiveTabs(tab => {
+                if (!tab.url) {
+                  return;
+                }
+
+                const activeAccount = selectVaultActiveAccount(
+                  store.getState()
+                );
+
+                return sdkEvent.changedConnectedAccountEvent({
+                  isLocked: isLocked,
+                  isConnected: undefined,
+                  activeKey: activeAccount?.publicKey
+                });
+              });
+            }
+
+            return sendResponse(undefined);
+          }
+
+          case getType(bringWeb3Events.getTheme): {
+            const themeMode = selectThemeModeSetting(store.getState());
+
+            const isDarkMode =
+              // we can't get theme from system, so will use dark
+              themeMode === ThemeMode.SYSTEM
+                ? true
+                : themeMode === ThemeMode.DARK;
+
+            return sendResponse(
+              bringWeb3Events.getThemeResponse({
+                theme: isDarkMode ? 'dark' : 'light'
+              })
+            );
+          }
+
           // TODO: All below should be removed when Import Account is integrated with window
           case 'check-secret-key-exist' as any: {
             const { secretKeyBase64 } = (
@@ -642,6 +723,13 @@ runtime.onMessage.addListener(
         if (action === 'ping') {
           return;
         }
+        // this is added for not spamming with errors from bringweb3
+        if ('from' in action) {
+          // @ts-ignore
+          if (action.from === 'bringweb3') {
+            return;
+          }
+        }
         throw Error('Background: Unknown message: ' + JSON.stringify(action));
       }
     });
@@ -655,3 +743,8 @@ function ping() {
   });
 }
 setInterval(ping, 15000);
+
+bringInitBackground({
+  identifier: process.env.PLATFORM_IDENTIFIER || '', // The identifier key you obtained from Bringweb3
+  apiEndpoint: process.env.NODE_ENV === 'production' ? 'prod' : 'sandbox'
+});