feat: push notifications with one signal

package.json

@@ -214,6 +214,7 @@
     "dompurify": "3.1.4",
     "dotenv": "16.4.5",
     "ecdsa-sig-formatter": "1.0.11",
+    "firebase": "11.2.0",
     "formik": "2.4.5",
     "framer-motion": "11.9.0",
     "jotai": "2.2.1",

scripts/generate-manifest.js

@@ -69,7 +69,7 @@ const manifest = {
   manifest_version: 3,
   author: 'Leather Wallet, LLC',
   description: 'Leather Bitcoin Wallet - Your Bitcoin Wallet for DeFi, NFTs, Ordinals, and dApps',
-  permissions: ['contextMenus', 'storage', 'unlimitedStorage'],
+  permissions: ['contextMenus', 'storage', 'unlimitedStorage', 'notifications', 'gcm'],
   commands: {
     _execute_browser_action: {
       suggested_key: {

src/app/features/container/container.tsx

@@ -20,6 +20,7 @@ import { useAppDispatch, useHasStateRehydrated } from '@app/store';
 import { stxChainSlice } from '@app/store/chains/stx-chain.slice';
 
 import { useRestoreFormState } from '../popup-send-form-restoration/use-restore-form-state';
+import { useInitPushNotifications } from '../push-notifications/push-notifications';
 
 export function Container() {
   const { pathname: locationPathname } = useLocation();
@@ -33,9 +34,9 @@ export function Container() {
   useOnSignOut(() => closeWindow());
   useRestoreFormState();
   useInitalizeAnalytics();
+  useInitPushNotifications();
   useHandleQueuedBackgroundAnalytics();
   useOnChangeAccount(index => dispatch(stxChainSlice.actions.switchAccount(index)));
-
   useEffect(() => void analytics.page('view', `${pathname}`), [pathname]);
 
   if (!hasStateRehydrated) return <LoadingSpinner />;

src/app/features/push-notifications/push-notifications.ts

@@ -0,0 +1,71 @@
+import { useMemo } from 'react';
+
+import type { HDKey } from '@scure/bip32';
+import type { P2Ret } from '@scure/btc-signer/payment';
+import axios from 'axios';
+
+import {
+  type SupportedPaymentType,
+  deriveAddressIndexZeroFromAccount,
+  getNativeSegwitPaymentFromAddressIndex,
+  getTaprootPaymentFromAddressIndex,
+  isSupportedMessageSigningPaymentType,
+} from '@leather.io/bitcoin';
+import type { BitcoinNetworkModes } from '@leather.io/models';
+import { createNullArrayOfLength, isDefined } from '@leather.io/utils';
+
+import { useOnMount } from '@app/common/hooks/use-on-mount';
+import { useGenerateNativeSegwitAccount } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
+import { useGenerateTaprootAccount } from '@app/store/accounts/blockchain/bitcoin/taproot-account.hooks';
+import { useStacksChain } from '@app/store/chains/stx-chain.selectors';
+
+const paymentFnMap: Record<
+  SupportedPaymentType,
+  (keychain: HDKey, network: BitcoinNetworkModes) => P2Ret
+> = {
+  p2tr: getTaprootPaymentFromAddressIndex,
+  p2wpkh: getNativeSegwitPaymentFromAddressIndex,
+};
+
+isSupportedMessageSigningPaymentType;
+
+export function useInitPushNotifications() {
+  const { highestAccountIndex } = useStacksChain().default;
+  const createNativeSegwitAccount = useGenerateNativeSegwitAccount();
+  const createTaprootAccount = useGenerateTaprootAccount();
+
+  const addresses = useMemo(
+    () =>
+      createNullArrayOfLength(highestAccountIndex).flatMap((_, index) =>
+        [createNativeSegwitAccount(index), createTaprootAccount(index)]
+          .filter(isDefined)
+          .map(account => {
+            // console.log(account);
+            const addressIndexKeychain = deriveAddressIndexZeroFromAccount(account.keychain);
+            if (account.type !== 'p2tr' && account.type !== 'p2wpkh') return undefined;
+            const payment = paymentFnMap[account.type](addressIndexKeychain, 'mainnet');
+            return payment.address;
+          })
+      ),
+    [createNativeSegwitAccount, createTaprootAccount, highestAccountIndex]
+  );
+
+  useOnMount(async () => {
+    // console.log('addresses', addresses);
+
+    const { fcmRegistrationToken } = await chrome.storage.local.get('fcmRegistrationToken');
+
+    // const resp = await axios.post(
+    //   'https://leather-api-gateway-staging.wallet-6d1.workers.dev/v1/notifications/register',
+    //   {
+    //     addresses,
+    //     network: 'mainnet',
+    //     chain: 'bitcoin',
+    //     notificationToken: fcmRegistrationToken,
+    //   }
+    // );
+
+    // eslint-disable-next-line no-console
+    // console.log({ resp });
+  });
+}

src/app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks.ts

@@ -45,7 +45,7 @@ const selectCurrentNetworkNativeSegwitAccountBuilder = createSelector(
     nativeSegwitKeychains[bitcoinNetworkToNetworkMode(network.chain.bitcoin.bitcoinNetwork)]
 );
 
-function useNativeSegwitAccountBuilder() {
+export function useGenerateNativeSegwitAccount() {
   return useSelector(selectCurrentNetworkNativeSegwitAccountBuilder);
 }
 
@@ -72,7 +72,7 @@ export function useNativeSegwitNetworkSigners() {
 }
 
 export function useNativeSegwitSigner(accountIndex: number) {
-  const account = useNativeSegwitAccountBuilder()(accountIndex);
+  const account = useGenerateNativeSegwitAccount()(accountIndex);
   const extendedPublicKeyVersions = useBitcoinExtendedPublicKeyVersions();
 
   return useMemo(() => {

src/app/store/accounts/blockchain/bitcoin/taproot-account.hooks.ts

@@ -39,6 +39,12 @@ const selectCurrentNetworkTaprootAccountBuilder = createSelector(
   selectCurrentNetwork,
   (taprootKeychains, network) => taprootKeychains[network.chain.bitcoin.mode]
 );
+
+export function useGenerateTaprootAccount() {
+  const generateTaprootAccount = useSelector(selectCurrentNetworkTaprootAccountBuilder);
+  return useMemo(() => generateTaprootAccount, [generateTaprootAccount]);
+}
+
 const selectCurrentTaprootAccount = createSelector(
   selectCurrentNetworkTaprootAccountBuilder,
   selectCurrentAccountIndex,

src/app/store/chains/stx-chain.selectors.ts

@@ -1,3 +1,9 @@
+import { useSelector } from 'react-redux';
+
 import { RootState } from '@app/store';
 
 export const selectStacksChain = (state: RootState) => state.chains.stx;
+
+export function useStacksChain() {
+  return useSelector(selectStacksChain);
+}

src/background/background.ts

@@ -1,6 +1,8 @@
 //
 // This file is the entrypoint to the extension's background script
 // https://developer.chrome.com/docs/extensions/mv3/architecture-overview/#background_script
+import { onBackgroundMessage } from 'firebase/messaging/sw';
+
 import { logger } from '@shared/logger';
 import { CONTENT_SCRIPT_PORT, type LegacyMessageFromContentScript } from '@shared/message-types';
 import { WalletRequests } from '@shared/rpc/rpc-methods';
@@ -13,10 +15,31 @@
   isLegacyMessage,
 } from './messaging/legacy/legacy-external-message-handler';
 import { rpcMessageHandler } from './messaging/rpc-message-handler';
+import { initializeFirebaseCloudMessaging } from './register-firebase';
 
 initContextMenuActions();
 warnUsersAboutDevToolsDangers();
 
+const { onPushNotification } = initializeFirebaseCloudMessaging();
+
+onPushNotification(payload => {
+  console.log('payload in');
+  const notification = payload.notification;
+  if (!notification) return;
+  console.log('firing notification');
+  chrome.notifications.create(
+    {
+      title: notification.title ?? 'default notification',
+      message: notification.body ?? 'default body',
+      iconUrl: notification.icon ?? 'https://placekittens.com/200/300',
+      type: 'basic',
+    },
+    notificationId => {
+      console.log('notificationId', notificationId);
+    }
+  );
+});
+
 chrome.runtime.onInstalled.addListener(async details => {
   if (details.reason === 'install' && process.env.WALLET_ENVIRONMENT !== 'testing') {
     await chrome.tabs.create({

src/background/register-firebase.ts

@@ -0,0 +1,47 @@
+import { initializeApp } from 'firebase/app';
+import { type MessagePayload, type Messaging, getToken } from 'firebase/messaging';
+import { getMessaging, onBackgroundMessage } from 'firebase/messaging/sw';
+
+import { isString } from '@leather.io/utils';
+
+import { logger } from '@shared/logger';
+
+const firebaseConfig = {
+  apiKey: 'AIzaSyCNWvmvdt_qqObnEUdeDPNhsRKXeLVrsZk',
+  authDomain: 'leather-b5081.firebaseapp.com',
+  projectId: 'leather-b5081',
+  storageBucket: 'leather-b5081.firebasestorage.app',
+  messagingSenderId: '915379517791',
+  appId: '1:915379517791:web:c84472be91fd5e8c789eea',
+};
+
+async function getOrCreateFirebaseToken(messaging: Messaging) {
+  const { fcmRegistrationToken } = await chrome.storage.local.get('fcmRegistrationToken');
+  if (!isString(fcmRegistrationToken)) throw new Error('Invalid fcmRegistrationToken');
+  if (!fcmRegistrationToken) {
+    const fcmRegistrationToken = await getToken(messaging, {
+      serviceWorkerRegistration: (self as any).registration,
+    });
+    chrome.storage.local.set({ fcmRegistrationToken });
+    return fcmRegistrationToken;
+  }
+  return fcmRegistrationToken;
+}
+
+export function initializeFirebaseCloudMessaging() {
+  const app = initializeApp(firebaseConfig);
+
+  chrome.runtime.onStartup.addListener(async () => {
+    const messaging = getMessaging(app);
+    await getOrCreateFirebaseToken(messaging);
+  });
+
+  function onPushNotification(callback: (payload: MessagePayload) => void) {
+    onBackgroundMessage(getMessaging(app), payload => {
+      logger.info('Push notification', payload);
+      callback(payload);
+    });
+  }
+
+  return { app, onPushNotification };
+}