local browser notification

package.json

@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@metamask/detect-provider": "^1.2.0",
-    "@soramitsu/soraneo-wallet-web": "^1.10.8",
+    "@soramitsu/soraneo-wallet-web": "^1.10.9",
     "@walletconnect/web3-provider": "^1.6.6",
     "core-js": "^3.6.4",
     "direct-vuex": "^0.12.1",

src/App.vue

@@ -38,6 +38,9 @@
     <referrals-confirm-invite-user :visible.sync="showConfirmInviteUser" />
     <bridge-transfer-notification />
     <mobile-popup :visible.sync="showMobilePopup" />
+    <browser-notifs-enable-dialog :visible.sync="showBrowserNotifPopup" @set-dark-page="setDarkPage" />
+    <browser-notifs-blocked-dialog :visible.sync="showBrowserNotifBlockedPopup" />
+    <notification-enabling-page v-if="showNotifsDarkPage" />
   </s-design-system-provider>
 </template>
 
@@ -61,6 +64,7 @@ import { getLocale } from '@/lang';
 import type { ConnectToNodeOptions } from '@/types/nodes';
 import type { SubNetwork } from '@/utils/ethers-util';
 import type { FeatureFlags } from '@/store/settings/types';
+import { WhitelistArrayItem } from '@sora-substrate/util/build/assets/types';
 
 @Component({
   components: {
@@ -70,16 +74,23 @@ import type { FeatureFlags } from '@/store/settings/types';
     AppLogoButton: lazyComponent(Components.AppLogoButton),
     ReferralsConfirmInviteUser: lazyComponent(Components.ReferralsConfirmInviteUser),
     BridgeTransferNotification: lazyComponent(Components.BridgeTransferNotification),
+    BrowserNotifsEnableDialog: lazyComponent(Components.BrowserNotifsEnableDialog),
+    BrowserNotifsBlockedDialog: lazyComponent(Components.BrowserNotifsBlockedDialog),
+    NotificationEnablingPage: lazyComponent(Components.NotificationEnablingPage),
     MobilePopup,
   },
 })
 export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin) {
   menuVisibility = false;
   showConfirmInviteUser = false;
   showMobilePopup = false;
+  showNotifsDarkPage = false;
 
   @state.wallet.settings.soraNetwork private soraNetwork!: Nullable<WALLET_CONSTS.SoraNetwork>;
+  @state.wallet.account.assetsToNotifyQueue assetsToNotifyQueue!: Array<WhitelistArrayItem>;
   @state.referrals.storageReferrer storageReferrer!: string;
+  @state.settings.browserNotifPopupVisibility browserNotifPopup!: boolean;
+  @state.settings.browserNotifPopupBlockedVisibility browserNotifPopupBlocked!: boolean;
   @state.settings.blockNumber blockNumber!: number;
 
   @getter.wallet.transactions.firstReadyTx firstReadyTransaction!: Nullable<HistoryItem>;
@@ -94,6 +105,8 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
   @mutation.settings.setNetworkChainGenesisHash private setNetworkChainGenesisHash!: (hash?: string) => void;
   @mutation.settings.setFaucetUrl private setFaucetUrl!: (url: string) => void;
   @mutation.settings.setFeatureFlags private setFeatureFlags!: (data: FeatureFlags) => void;
+  @mutation.settings.setBrowserNotifsPopupEnabled private setBrowserNotifsPopup!: (flag: boolean) => void;
+  @mutation.settings.setBrowserNotifsPopupBlocked private setBrowserNotifsPopupBlocked!: (flag: boolean) => void;
   @mutation.settings.resetBlockNumberSubscription private resetBlockNumberSubscription!: VoidFunction;
   @mutation.rewards.unsubscribeAccountMarketMakerInfo private unsubscribeMarketMakerInfo!: VoidFunction;
   @mutation.referrals.unsubscribeFromInvitedUsers private unsubscribeFromInvitedUsers!: VoidFunction;
@@ -109,6 +122,16 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
   @action.settings.setBlockNumber private setBlockNumber!: AsyncVoidFn;
   @action.web3.setSmartContracts private setSmartContracts!: (data: Array<SubNetwork>) => Promise<void>;
   @action.referrals.getReferrer private getReferrer!: AsyncVoidFn;
+  @action.wallet.account.notifyOnDeposit private notifyOnDeposit!: (info: {
+    asset: WhitelistArrayItem;
+    message: string;
+  }) => AsyncVoidFn;
+
+  @Watch('assetsToNotifyQueue')
+  private handleNotifyOnDeposit(whitelistAssetArray: WhitelistArrayItem[]): void {
+    if (!whitelistAssetArray.length) return;
+    this.notifyOnDeposit({ asset: whitelistAssetArray[0], message: this.t('assetDeposit') });
+  }
 
   @Watch('firstReadyTransaction', { deep: true })
   private handleNotifyAboutTransaction(value: History, oldValue: History): void {
@@ -213,6 +236,22 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
     return getExplorerLinks(this.soraNetwork)[0].value;
   }
 
+  get showBrowserNotifPopup(): boolean {
+    return this.browserNotifPopup;
+  }
+
+  set showBrowserNotifPopup(value) {
+    this.setBrowserNotifsPopup(value);
+  }
+
+  get showBrowserNotifBlockedPopup(): boolean {
+    return this.browserNotifPopupBlocked;
+  }
+
+  set showBrowserNotifBlockedPopup(value) {
+    this.setBrowserNotifsPopupBlocked(value);
+  }
+
   goTo(name: PageNames): void {
     goTo(name);
     this.closeMenu();
@@ -230,6 +269,10 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
     this.menuVisibility = false;
   }
 
+  setDarkPage(value: boolean) {
+    this.showNotifsDarkPage = value;
+  }
+
   handleAppMenuClick(e: Event): void {
     const target = e.target as any;
     const sidebar = !!target.closest('.app-sidebar');

src/components/App/BrowserNotification/BrowserNotifsBlockedDialog.vue

@@ -0,0 +1,43 @@
+<template>
+  <dialog-base class="browser-notification" :title="t('browserNotificationDialog.title')" :visible.sync="isVisible">
+    <div class="browser-notification-dialog">
+      <p class="browser-notification-dialog__info">
+        {{ t('browserNotificationDialog.notificationBlocked', { appName: app.name }) }}
+      </p>
+      <s-button
+        type="primary"
+        class="s-typography-button--large browser-notification-dialog__btn"
+        :loading="loading"
+        @click="agree"
+      >
+        {{ t('browserNotificationDialog.agree') }}
+      </s-button>
+    </div>
+  </dialog-base>
+</template>
+
+<script lang="ts">
+import { Component, Mixins } from 'vue-property-decorator';
+
+import { mixins, components } from '@soramitsu/soraneo-wallet-web';
+import { app } from '../../../consts';
+
+import TranslationMixin from '@/components/mixins/TranslationMixin';
+
+@Component({
+  components: {
+    DialogBase: components.DialogBase,
+  },
+})
+export default class BrowserNotifsBlockedDialog extends Mixins(
+  TranslationMixin,
+  mixins.DialogMixin,
+  mixins.LoadingMixin
+) {
+  app = app;
+
+  agree(): void {
+    this.closeDialog();
+  }
+}
+</script>

src/components/App/BrowserNotification/BrowserNotifsEnableDialog.vue

@@ -0,0 +1,74 @@
+<template>
+  <dialog-base class="browser-notification" :title="t('browserNotificationDialog.title')" :visible.sync="isVisible">
+    <div class="browser-notification-dialog">
+      <img src="@/assets/img/browser-notification/chrome.png?inline" class="browser-notification-dialog__example" />
+      <p class="browser-notification-dialog__info">
+        {{ t('browserNotificationDialog.info') }}
+      </p>
+      <s-button
+        type="primary"
+        class="s-typography-button--large browser-notification-dialog__btn"
+        :loading="loading"
+        @click="handleConfirm"
+      >
+        {{ t('browserNotificationDialog.button') }}
+      </s-button>
+    </div>
+  </dialog-base>
+</template>
+
+<script lang="ts">
+import { Component, Mixins } from 'vue-property-decorator';
+import { components, mixins } from '@soramitsu/soraneo-wallet-web';
+
+import TranslationMixin from '@/components/mixins/TranslationMixin';
+import { mutation } from '@/store/decorators';
+
+@Component({
+  components: {
+    DialogBase: components.DialogBase,
+  },
+})
+export default class BrowserNotifsEnableDialog extends Mixins(
+  TranslationMixin,
+  mixins.LoadingMixin,
+  mixins.DialogMixin
+) {
+  @mutation.settings.setBrowserNotifsAgreement setBrowserNotifsAgreement!: (value: NotificationPermission) => void;
+  async handleConfirm(): Promise<void> {
+    this.closeDialog();
+    this.$emit('set-dark-page', true);
+    const permission = await Notification.requestPermission();
+    this.setBrowserNotifsAgreement(permission);
+    this.$emit('set-dark-page', false);
+  }
+}
+</script>
+
+<style lang="scss">
+.browser-notification {
+  .el-dialog__title {
+    margin: auto;
+    padding-left: var(--s-size-mini);
+  }
+
+  .el-dialog {
+    margin-top: 22vh !important;
+  }
+}
+.browser-notification-dialog {
+  display: flex;
+  flex-direction: column;
+
+  &__info {
+    text-align: center;
+    margin: $basic-spacing $basic-spacing * 2;
+    font-size: 15px;
+    font-weight: 300;
+  }
+
+  &__btn {
+    margin-bottom: $basic-spacing;
+  }
+}
+</style>

src/components/App/BrowserNotification/NotificationEnablingPage.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="notification-enabling-pointer">
+    <div class="notification-enabling-pointer__instructions">
+      <div class="notification-enabling-pointer__text">{{ t('browserNotificationDialog.pointer') }}</div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Mixins } from 'vue-property-decorator';
+
+import TranslationMixin from '@/components/mixins/TranslationMixin';
+
+@Component
+export default class NotificationEnablingPage extends Mixins(TranslationMixin) {}
+</script>
+
+<style lang="scss">
+.notification-enabling-pointer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: row;
+  position: absolute;
+
+  top: 0;
+  left: 0;
+  z-index: 90;
+  width: 100%;
+  height: 100%;
+  background-color: #000;
+  opacity: 0.8;
+  z-index: 300;
+
+  &__instructions {
+    display: flex;
+    position: relative;
+  }
+
+  &__text {
+    position: relative;
+    color: #fff;
+    font-size: 19px;
+  }
+
+  &__text::before {
+    content: '';
+    background: url('~@/assets/img/browser-notification/arrow.png') no-repeat;
+    width: 100%;
+    height: 300px;
+    position: absolute;
+    top: -275px;
+    left: -275px;
+  }
+}
+</style>