[496] Features: Push notification, Incoming Transaction, Websockets

package.json

@@ -60,6 +60,7 @@
     "qr-code-styling": "github:aeternity/qr-code-styling",
     "swiper": "^6.8.4",
     "ts-jest": "^27.1.5",
+    "simple-web-notification": "^2.0.1",
     "uuid": "^8.3.2",
     "validator": "^13.7.0",
     "vee-validate": "^4.5.8",
@@ -103,6 +104,9 @@
     "cordova": "^11.0.0",
     "cordova-plugin-add-swift-support": "^2.0.2",
     "cordova-plugin-androidx-adapter": "^1.1.3",
+    "cordova-plugin-badge": "^0.8.8",
+    "cordova-plugin-device": "^2.1.0",
+    "cordova-plugin-local-notification": "^0.9.0-beta.2",
     "cordova-plugin-webviewcolor": "^2.2.0",
     "cordova-plugin-whitelist": "^1.3.5",
     "cordova-res": "^0.15.4",
@@ -143,7 +147,8 @@
       "cordova-plugin-webviewcolor": {},
       "cordova-plugin-x-socialsharing": {},
       "cordova-plugin-androidx-adapter": {},
-      "cordova-plugin-network-information": {}
+      "cordova-plugin-network-information": {},
+      "cordova-plugin-local-notification": {}
     },
     "platforms": [
       "android",

src/background/index.js

@@ -3,10 +3,13 @@ import '../lib/initPolyfills';
 import initDeeplinkHandler from './deeplink-handler';
 import * as wallet from './wallet';
 import Logger from '../lib/logger';
+import PushNotification from '../lib/PushNotification';
 import store from './store';
 import { useAccounts } from '../composables';
 
 Logger.init({ background: true });
+PushNotification.init();
+
 initDeeplinkHandler();
 
 browser.runtime.onMessage.addListener(async (msg) => {

src/composables/composablesHelpers.ts

@@ -17,6 +17,10 @@ import { INetwork } from '../types';
 import { useConnection } from './connection';
 import { useUi } from './ui';
 
+export interface INetworkWatcherOptions {
+  invokeCallbackImmediately?: boolean;
+}
+
 /**
  * Monitor the network state and compare it with stored custom state to know when
  * user changes the network.
@@ -25,15 +29,22 @@ export function createNetworkWatcher() {
   let currentNetwork: INetwork;
 
   return {
-    onNetworkChange: async (store: Store<any>, callback: () => void) => {
+    onNetworkChange: async (
+      store: Store<any>,
+      callback: (activeNetwork: INetwork) => void,
+      options?: INetworkWatcherOptions,
+    ) => {
       await watchUntilTruthy(() => store.state.isRestored);
       const activeNetwork = store.getters.activeNetwork as INetwork;
 
       if (!currentNetwork) {
         currentNetwork = activeNetwork;
+        if (options?.invokeCallbackImmediately) {
+          callback(activeNetwork);
+        }
       } else if (currentNetwork.name !== activeNetwork.name) {
         currentNetwork = activeNetwork;
-        callback();
+        callback(activeNetwork);
       }
     },
   };

src/composables/incomingTransactions.ts

@@ -0,0 +1,107 @@
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { Encoded } from '@aeternity/aepp-sdk-13';
+import { TX_FUNCTIONS, TX_TYPE_MDW, roundAmountToPrecision } from '../popup/utils';
+import { IDefaultComposableOptions, ITransaction } from '../types';
+import { useAccounts } from './accounts';
+import { useNotifications } from './notifications';
+import { useGetter } from './vuex';
+import { ROUTE_TX_DETAILS } from '../popup/router/routeNames';
+import WebSocketClient from '../lib/WebSocketClient';
+
+export function useIncomingTransactions({ store }: IDefaultComposableOptions) {
+  const router = useRouter();
+  const { t } = useI18n();
+
+  const { addWalletNotification } = useNotifications({ store });
+  const { isLocalAccountAddress, getAccountByAddress, accounts } = useAccounts({ store });
+  const getTxAmountTotal = useGetter<any>('getTxAmountTotal');
+  const getTxSymbol = useGetter<any>('getTxSymbol');
+  let unWatchAccountsUpdates: (() => void)[] = [];
+
+  /**
+   * @param {Encoded.AccountAddress} address - the address to format.
+   * @returns {string} - returns the account's name if it exists,
+   * otherwise it returns the translated string "Account" + the account's index +1.
+  */
+  function getAccountNameByAddress(address: Encoded.AccountAddress): string {
+    const { idx, name } = getAccountByAddress(address) || {};
+
+    if (name) {
+      return name;
+    }
+
+    if (idx) {
+      return `${t('pages.account.heading')} ${idx + 1}`;
+    }
+
+    return address;
+  }
+
+  /**
+   * This function starts listening for incoming transactions on the 'Transactions' channel.
+   */
+  function startListeningForIncomingTransactions() {
+    const receivedTransactions = new Set<string>();
+
+    unWatchAccountsUpdates = accounts.value.map(
+      (account) => WebSocketClient.subscribeForAccountUpdates(
+        account.address,
+        (transaction: ITransaction) => {
+          if (!transaction?.tx) return;
+          const { hash, tx } = transaction;
+          let { senderId, recipientId } = tx;
+
+          if (
+            TX_TYPE_MDW[tx.type] === TX_TYPE_MDW.ContractCallTx
+            && tx.function === TX_FUNCTIONS.transfer
+          ) {
+            senderId = tx.callerId;
+            recipientId = tx.arguments.find((arg) => arg.type === 'address')?.value;
+          } else if (TX_TYPE_MDW[tx.type] !== TX_TYPE_MDW.SpendTx) {
+            return;
+          }
+
+          if (
+            recipientId
+            && isLocalAccountAddress(recipientId as Encoded.AccountAddress)
+            && !receivedTransactions.has(hash)
+          ) {
+            receivedTransactions.add(hash);
+
+            const amount = roundAmountToPrecision(getTxAmountTotal.value(transaction));
+            const title = t('pages.notifications.incomingTransaction');
+            const text = `${getAccountNameByAddress(recipientId as Encoded.AccountAddress)} ${t('pages.transactions.received')} ${amount} ${getTxSymbol.value(transaction)}`;
+
+            addWalletNotification({
+              id: hash,
+              text,
+              title,
+              buttonLabel: t('pages.notifications.viewTransaction'),
+              path: router.resolve({
+                name: ROUTE_TX_DETAILS,
+                params: {
+                  hash,
+                  transactionOwner: recipientId,
+                },
+              }).href,
+              sender: senderId,
+              receiver: recipientId,
+              hasIncomingTransaction: true,
+              pushNotification: true,
+            });
+          }
+        },
+      ),
+    );
+  }
+
+  function stopListeningForIncomingTransactions() {
+    unWatchAccountsUpdates.forEach((unWatch) => unWatch());
+  }
+
+  return {
+    startListeningForIncomingTransactions,
+    stopListeningForIncomingTransactions,
+  };
+}