PWA

.eslintrc.js

@@ -34,6 +34,7 @@ module.exports = {
     'vuejs-accessibility/mouse-events-have-key-events': 'off',
     'import/extensions': 'off',
     'global-require': 'off',
+    'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
   },
   overrides: [
     {

jest.config.js

@@ -1,4 +1,8 @@
 module.exports = {
+  transform: {
+    '^.+\\.vue$': '@vue/vue3-jest',
+    '^.+\\.(mts|mjs|jsx|ts|tsx)$': 'ts-jest',
+  },
   preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',
   collectCoverage: true,
   collectCoverageFrom: ['src/(common|pegin)/(providers|services|utils)/*.ts'],
@@ -13,4 +17,5 @@ module.exports = {
   coverageProvider: 'v8',
   transformIgnorePatterns: ['node_modules/(?!axios)/'],
   setupFilesAfterEnv: ['<rootDir>/setup-jest.js'],
+  silent: true,
 };

package.json

@@ -1,13 +1,14 @@
 {
   "name": "PowPeg",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
     "dev": "npm run serve -- --hot-only --host localhost",
     "build": "vue-cli-service build",
     "test": "vue-cli-service test:unit --env=./tests/jsdom-env.js --coverageReporters=lcov --collect-coverage",
     "test:unit": "vue-cli-service test:unit --env=./tests/jsdom-env.js --coverageReporters=lcov --collect-coverage",
+    "test:unit-logs": "vue-cli-service test:unit --env=./tests/jsdom-env.js --coverageReporters=lcov --silent=false --collect-coverage",
     "lint": "vue-cli-service lint",
     "scanner": "npx sonar-scanner"
   },
@@ -45,12 +46,15 @@
     "crypto-browserify": "^3.12.0",
     "ethers": "^5.7.2",
     "https-browserify": "^1.0.0",
+    "idb": "^8.0.0",
     "jest-environment-jsdom": "^27.5.1",
     "lodash": "^4.17.21",
     "markdown-it": "^14.1.0",
     "moment": "^2.29.4",
     "os-browserify": "^0.3.0",
     "process": "^0.11.10",
+    "register-service-worker": "^1.7.2",
+    "sats-connect": "2.3.x",
     "stream-browserify": "^3.0.0",
     "stream-http": "^3.2.0",
     "text-encoding": "^0.7.0",
@@ -62,7 +66,8 @@
     "vuetify": "^3.5.17",
     "vuex": "^4.1.0",
     "web3": "^4.8.0",
-    "web3-eth-contract": "^1.10.0"
+    "web3-eth-contract": "^1.10.0",
+    "workbox-precaching": "^7.1.0"
   },
   "devDependencies": {
     "@intlify/vue-i18n-loader": "^4.2.0",
@@ -79,6 +84,7 @@
     "@typescript-eslint/parser": "^5.62.0",
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-plugin-pwa": "^5.0.8",
     "@vue/cli-plugin-router": "~5.0.0",
     "@vue/cli-plugin-typescript": "~5.0.0",
     "@vue/cli-plugin-unit-jest": "~5.0.0",
@@ -96,6 +102,7 @@
     "eslint-plugin-import": "^2.28.0",
     "eslint-plugin-vue": "^8.7.1",
     "eslint-plugin-vuejs-accessibility": "^1.2.0",
+    "fake-indexeddb": "^6.0.0",
     "geckodriver": "^4.4.0",
     "jest": "^27.5.1",
     "sass": "^1.64.2",

public/index.html

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <title>PowPeg</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
   </head>

public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow:

setup-jest.js

@@ -1,3 +1,4 @@
 import { TextEncoder, TextDecoder } from 'util';
+import 'fake-indexeddb/auto';
 
 Object.assign(global, { TextDecoder, TextEncoder });

src/App.vue

@@ -13,7 +13,9 @@
 </template>
 
 <script lang="ts">
-import { computed, onBeforeMount, ref } from 'vue';
+import {
+  computed, onBeforeMount, onBeforeUnmount, provide, ref,
+} from 'vue';
 import Top from '@/common/components/layouts/Top.vue';
 import FooterRsk from '@/common/components/layouts/Footer.vue';
 import Mobile from '@/common/views/Mobile.vue';
@@ -23,6 +25,8 @@ import * as constants from '@/common/store/constants';
 import { useAction } from '@/common/store/helper';
 import { vuetifyNonce } from '@/common/plugins/vuetify';
 import { isMobileDevice } from '@/common/utils';
+import { unreadNotificationsKey } from '@/common/providers/UnreadNotifications';
+import { useRouter } from 'vue-router';
 
 export default {
   name: 'App',
@@ -49,7 +53,7 @@ export default {
       connect-src 'self' 'unsafe-inline' https://www.clarity.ms/s/0.7.16/clarity.js wss://* https://*.hotjar.com https://*.hotjar.io https://www.clarity.ms/s/* wss://*.hotjar.com ${envVariables.vueAppApiBaseUrl} ${envVariables.vueAppRskNodeHost} https://lps.testnet.flyover.rif.technology https://lps.flyover.rif.technology https://api.coingecko.com https://*.clarity.ms https://www.clarity.ms/* ;
       object-src 'none';
       frame-src https://connect.trezor.io https://www.google.com/;
-      worker-src 'none';
+      worker-src 'self';
       `;
       return response;
     });
@@ -92,6 +96,58 @@ export default {
       showTermsAndConditions.value = show;
     }
 
+    const unreadNotifications = ref(0);
+
+    function updateUnreadNotifications(value: number) {
+      unreadNotifications.value = value;
+      navigator.setAppBadge(unreadNotifications.value);
+    }
+
+    provide(
+      unreadNotificationsKey,
+      {
+        counter: unreadNotifications,
+        updateCounter: updateUnreadNotifications,
+      },
+    );
+
+    const router = useRouter();
+
+    function showNotification() {
+      Notification.requestPermission()
+        .then((permission) => {
+          if (permission === 'granted') {
+            const notification = new Notification('PowPeg', {
+              body: 'New transaction status available',
+            });
+            notification.onshow = () => {
+              updateUnreadNotifications(unreadNotifications.value + 1);
+            };
+            notification.onclose = () => {
+              updateUnreadNotifications(unreadNotifications.value - 1);
+            };
+            notification.onclick = () => {
+              notification.close();
+              router.push('/status');
+            };
+          }
+        });
+    }
+
+    function handleUpdateViewEvt(evt: MessageEvent) {
+      if (evt.data === 'update-view') {
+        showNotification();
+      }
+    }
+
+    onBeforeMount(() => {
+      navigator.serviceWorker.addEventListener('message', handleUpdateViewEvt);
+    });
+
+    onBeforeUnmount(() => {
+      navigator.serviceWorker.removeEventListener('message', handleUpdateViewEvt);
+    });
+
     onBeforeMount(() => {
       getFeatures();
       getBtcPrice();

src/common/components/exchange/SelectBitcoinWallet.vue

@@ -89,6 +89,9 @@ export default {
         case constants.WALLET_NAMES.LEATHER.long_name:
           wallet = constants.WALLET_NAMES.LEATHER.short_name;
           break;
+        case constants.WALLET_NAMES.XVERSE.long_name:
+          wallet = constants.WALLET_NAMES.XVERSE.short_name;
+          break;
         default:
           wallet = '';
           break;