Fix/error localstorage override (#1474)

* calculated_amount_of_storage_when_update

* updated_with_95%_local_storage_max

* deleting_history_and_asset_addresses

* refactored+w

* notification_added

* storage_small_refactor

* naming_function_clear_storage_updated

* updated_without_event_bus

* updated_with_event_in_storage

* updated wallet web to 1.39.6

* languages_updated

* updated_languages_from_localized

* changed_method_visibility

package.json

@@ -28,7 +28,7 @@
   "dependencies": {
     "@cedelabs/widgets-universal": "^1.3.1",
     "@metamask/detect-provider": "^2.0.0",
-    "@soramitsu/soraneo-wallet-web": "1.39.2",
+    "@soramitsu/soraneo-wallet-web": "1.39.6",
     "@tma.js/sdk": "^2.7.0",
     "@walletconnect/ethereum-provider": "^2.13.3",
     "@walletconnect/modal": "^2.6.2",

src/App.vue

@@ -36,6 +36,11 @@
       :set-visibility="setSignTxDialogVisibility"
     />
     <select-sora-account-dialog />
+    <app-browser-notifs-local-storage-override
+      :visible.sync="showErrorLocalStorageExceed"
+      @delete-data-local-storage="clearLocalStorage"
+    >
+    </app-browser-notifs-local-storage-override>
   </s-design-system-provider>
 </template>
 
@@ -62,12 +67,20 @@ import AppHeader from '@/components/App/Header/AppHeader.vue';
 import AppMenu from '@/components/App/Menu/AppMenu.vue';
 import NodeErrorMixin from '@/components/mixins/NodeErrorMixin';
 import SoraLogo from '@/components/shared/Logo/Sora.vue';
-import { PageNames, Components, Language, BreakpointClass, WalletPermissions } from '@/consts';
+import {
+  PageNames,
+  Components,
+  Language,
+  BreakpointClass,
+  WalletPermissions,
+  LOCAL_STORAGE_LIMIT_PERCENTAGE,
+} from '@/consts';
 import { getLocale } from '@/lang';
 import router, { goTo, lazyComponent } from '@/router';
 import { action, getter, mutation, state } from '@/store/decorators';
 import { getMobileCssClasses, preloadFontFace, updateDocumentTitle } from '@/utils';
 import type { NodesConnection } from '@/utils/connection';
+import { calculateStorageUsagePercentage, clearLocalStorage } from '@/utils/storage';
 import { TmaSdk } from '@/utils/telegram';
 
 import type { FeatureFlags } from './store/settings/types';
@@ -90,6 +103,7 @@ import type Theme from '@soramitsu-ui/ui-vue2/lib/types/Theme';
     AppDisclaimer: lazyComponent(Components.AppDisclaimer),
     AppBrowserNotifsEnableDialog: lazyComponent(Components.AppBrowserNotifsEnableDialog),
     AppBrowserNotifsBlockedDialog: lazyComponent(Components.AppBrowserNotifsBlockedDialog),
+    AppBrowserNotifsLocalStorageOverride: lazyComponent(Components.AppBrowserNotifsLocalStorageOverride),
     ReferralsConfirmInviteUser: lazyComponent(Components.ReferralsConfirmInviteUser),
     BridgeTransferNotification: lazyComponent(Components.BridgeTransferNotification),
     SelectSoraAccountDialog: lazyComponent(Components.SelectSoraAccountDialog),
@@ -103,6 +117,7 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
   menuVisibility = false;
   showConfirmInviteUser = false;
   showNotifsDarkPage = false;
+  showErrorLocalStorageExceed = false;
 
   @state.settings.screenBreakpointClass private responsiveClass!: BreakpointClass;
   @state.settings.appConnection private appConnection!: NodesConnection;
@@ -218,8 +233,19 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
 
   private setResponsiveClassDebounced = debounce(this.setResponsiveClass, 250);
 
+  public clearLocalStorage(): void {
+    clearLocalStorage();
+  }
+
+  private handleLocalStorageChange() {
+    const usagePercentage = calculateStorageUsagePercentage();
+    if (usagePercentage >= LOCAL_STORAGE_LIMIT_PERCENTAGE) {
+      this.showErrorLocalStorageExceed = true;
+    }
+  }
+
   async created() {
-    // element-icons is not common used, but should be visible after network connection lost
+    window.addEventListener('localStorageUpdated', this.handleLocalStorageChange);
     preloadFontFace('element-icons');
     this.setResponsiveClass();
     updateBaseUrl(router);
@@ -360,6 +386,7 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
   }
 
   async beforeDestroy(): Promise<void> {
+    window.removeEventListener('localStorageUpdated', this.handleLocalStorageChange);
     window.removeEventListener('resize', this.setResponsiveClassDebounced);
     await this.resetInternalSubscriptions();
     await this.resetNetworkSubscriptions();

src/components/App/BrowserNotification/BrowserNotificationLocalStorageOverride.vue

@@ -0,0 +1,50 @@
+<template>
+  <dialog-base
+    class="browser-notification"
+    :title="t('browserNotificationLocalStorageOverride.title')"
+    :visible.sync="isVisible"
+  >
+    <div class="browser-notification-dialog">
+      <p class="browser-notification-dialog__info">
+        {{ t('browserNotificationLocalStorageOverride.info') }}
+      </p>
+      <s-button
+        type="primary"
+        class="s-typography-button--large browser-notification-dialog__btn"
+        :loading="loading"
+        @click="agree"
+      >
+        {{ t('browserNotificationLocalStorageOverride.agree') }}
+      </s-button>
+    </div>
+  </dialog-base>
+</template>
+
+<script lang="ts">
+import { mixins, components } from '@soramitsu/soraneo-wallet-web';
+import { Component, Mixins } from 'vue-property-decorator';
+
+import TranslationMixin from '@/components/mixins/TranslationMixin';
+
+@Component({
+  components: {
+    DialogBase: components.DialogBase,
+  },
+})
+export default class AppBrowserNotifsBlockedDialog extends Mixins(
+  TranslationMixin,
+  mixins.DialogMixin,
+  mixins.LoadingMixin
+) {
+  agree(): void {
+    this.closeDialog();
+    this.$emit('delete-data-local-storage', true);
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.browser-notification-dialog {
+  @include browser-notification-dialog;
+}
+</style>

src/consts/index.ts

@@ -95,6 +95,18 @@ export const HundredNumber = 100;
 
 export const DefaultSlippageTolerance = '0.5';
 
+export const LOCAL_STORAGE_MAX_SIZE = 4 * 1024 * 1024;
+
+export const LOCAL_STORAGE_LIMIT_PERCENTAGE = 95;
+
+export const listOfRemoveForLocalStorage = [
+  '.assetsAddresses',
+  '.history',
+  '.ethBridgeHistory',
+  '.evmHistory',
+  '.subHistory',
+];
+
 export enum MarketAlgorithms {
   SMART = 'SMART',
   TBC = 'TBC',
@@ -160,6 +172,7 @@ export enum Components {
   AppMobilePopup = 'App/MobilePopup',
   AppBrowserNotifsEnableDialog = 'App/BrowserNotification/BrowserNotifsEnableDialog',
   AppBrowserNotifsBlockedDialog = 'App/BrowserNotification/BrowserNotifsBlockedDialog',
+  AppBrowserNotifsLocalStorageOverride = 'App/BrowserNotification/BrowserNotificationLocalStorageOverride',
   Alerts = 'App/Alerts/Alerts',
   AlertList = 'App/Alerts/AlertList',
   CreateAlert = 'App/Alerts/CreateAlert',

src/lang/cs.json

@@ -1647,5 +1647,10 @@
     "currencyDialog": {
         "currency": "Měna",
         "searchPlaceholder": "Hledejte podle názvu měny nebo symbolu"
+    },
+    "browserNotificationLocalStorageOverride": {
+        "title": "Vymazat místní úložiště {AppName}",
+        "info": "Vaše místní úložiště je přetížené, pro pokračování práce s {AppName} je potřeba ho vyčistit",
+        "agree": "Ano, rozumím"
     }
 }

src/lang/de.json

@@ -1647,5 +1647,10 @@
     "currencyDialog": {
         "currency": "Währung",
         "searchPlaceholder": "Suche nach Währungsnamen oder -symbol"
+    },
+    "browserNotificationLocalStorageOverride": {
+        "title": "Löschen Sie den lokalen {AppName} Speicher",
+        "info": "Ihr lokaler Speicher ist überlastet, um mit {AppName} weiterzuarbeiten, müssen Sie ihn bereinigen",
+        "agree": "Ja ich verstehe"
     }
 }

src/lang/en.json

@@ -1647,5 +1647,10 @@
     "currencyDialog": {
         "currency": "Currency",
         "searchPlaceholder": "Search by currency name or symbol"
+    },
+    "browserNotificationLocalStorageOverride": {
+        "title": "Clear local {AppName} storage",
+        "info": "Your local storage is overloaded, to continue work with {AppName} need to clean it",
+        "agree": "Yes, I understand"
     }
 }

src/lang/es.json

@@ -1647,5 +1647,10 @@
     "currencyDialog": {
         "currency": "Divisa",
         "searchPlaceholder": "Buscar por nombre o símbolo de moneda"
+    },
+    "browserNotificationLocalStorageOverride": {
+        "title": "Limpiar el almacenamiento local de {AppName}",
+        "info": "Su almacenamiento local está sobrecargado, para continuar trabajando con {AppName} necesita limpiarlo",
+        "agree": "Si, entiendo"
     }
 }

src/lang/fr.json

@@ -1647,5 +1647,10 @@
     "currencyDialog": {
         "currency": "Devise",
         "searchPlaceholder": "Rechercher par nom ou symbole de devise"
+    },
+    "browserNotificationLocalStorageOverride": {
+        "title": "Effacer le stockage local {AppName}",
+        "info": "Votre stockage local est surchargé, pour continuer à travailler avec {AppName} il faut le nettoyer",
+        "agree": "Oui je comprends"
     }
 }

src/lang/hr.json

@@ -1647,5 +1647,10 @@
     "currencyDialog": {
         "currency": "Valuta",
         "searchPlaceholder": "Pretražujte prema nazivu valute ili simbolu"
+    },
+    "browserNotificationLocalStorageOverride": {
+        "title": "Očisti lokalnu pohranu {AppName}",
+        "info": "Vaša lokalna pohrana je preopterećena, za nastavak rada s {AppName} trebate je očistiti",
+        "agree": "Da, razumijem"
     }
 }

src/lang/hu.json

@@ -1647,5 +1647,10 @@
     "currencyDialog": {
         "currency": "Valuta",
         "searchPlaceholder": "Keresés pénznem neve vagy szimbóluma alapján"
+    },
+    "browserNotificationLocalStorageOverride": {
+        "title": "Törölje a helyi {AppName} tárolót",
+        "info": "A helyi tároló túlterhelt, a {AppName} használatához törölnie kell",
+        "agree": "Igen, értem"
     }
 }

src/lang/hy.json

@@ -1647,5 +1647,10 @@
     "currencyDialog": {
         "currency": "Արժույթ",
         "searchPlaceholder": "Որոնել ըստ արժույթի անվանման կամ խորհրդանիշի"
+    },
+    "browserNotificationLocalStorageOverride": {
+        "title": "Մաքրել տեղական {AppName} պահոցը",
+        "info": "Ձեր տեղական պահոցը գերբեռնված է, շարունակելու համար {AppName}-ով պետք է մաքրել այն",
+        "agree": "Այո ես հասկանում եմ"
     }
 }

src/lang/id.json

@@ -1647,5 +1647,10 @@
     "currencyDialog": {
         "currency": "Mata uang",
         "searchPlaceholder": "Cari berdasarkan nama atau simbol mata uang"
+    },
+    "browserNotificationLocalStorageOverride": {
+        "title": "Bersihkan penyimpanan lokal {AppName}",
+        "info": "Penyimpanan lokal Anda kelebihan beban, untuk melanjutkan pekerjaan dengan {AppName} perlu membersihkannya",
+        "agree": "Ya saya mengerti"
     }
 }

src/lang/it.json

@@ -1647,5 +1647,10 @@
     "currencyDialog": {
         "currency": "Valuta",
         "searchPlaceholder": "Cerca per nome o simbolo della valuta"
+    },
+    "browserNotificationLocalStorageOverride": {
+        "title": "Cancella l'archiviazione locale {AppName}",
+        "info": "Il tuo spazio di archiviazione locale è sovraccarico, per continuare a lavorare con {AppName} è necessario pulirlo",
+        "agree": "Si, capisco"
     }
 }

src/lang/nl.json

@@ -1647,5 +1647,10 @@
     "currencyDialog": {
         "currency": "Munteenheid",
         "searchPlaceholder": "Zoek op valutanaam of symbool"
+    },
+    "browserNotificationLocalStorageOverride": {
+        "title": "Lokaal {AppName} opslag wissen",
+        "info": "Uw lokale opslag is overbelast, om door te gaan met {AppName} moet u het opschonen",
+        "agree": "Ja ik begrijp het"
     }
 }

src/lang/no.json

@@ -1647,5 +1647,10 @@
     "currencyDialog": {
         "currency": "Valuta",
         "searchPlaceholder": "Søk etter valutanavn eller symbol"
+    },
+    "browserNotificationLocalStorageOverride": {
+        "title": "Tøm lokal {AppName} lagring",
+        "info": "Din lokale lagring er overbelastet, for å fortsette å bruke {AppName} må du rense den",
+        "agree": "Ja jeg forstår"
     }
 }

src/lang/pl.json

@@ -1647,5 +1647,10 @@
     "currencyDialog": {
         "currency": "Waluta",
         "searchPlaceholder": "Szukaj według nazwy waluty lub symbolu"
+    },
+    "browserNotificationLocalStorageOverride": {
+        "title": "Wyczyść lokalne {AppName} dane",
+        "info": "Twoje lokalne dane są przeciążone, aby kontynuować pracę z {AppName}, musisz je wyczyścić",
+        "agree": "Tak, rozumiem"
     }
 }

src/lang/ru.json

@@ -1647,5 +1647,10 @@
     "currencyDialog": {
         "currency": "Валюта",
         "searchPlaceholder": "Поиск по названию или символу валюты"
+    },
+    "browserNotificationLocalStorageOverride": {
+        "title": "Очистить локальное хранилище {AppName}",
+        "info": "Ваше локальное хранилище перегружено, чтобы продолжить работу с {AppName}, необходимо его очистить",
+        "agree": "Да, я понимаю"
     }
 }

src/lang/sk.json

@@ -1647,5 +1647,10 @@
     "currencyDialog": {
         "currency": "mena",
         "searchPlaceholder": "Hľadajte podľa názvu meny alebo symbolu"
+    },
+    "browserNotificationLocalStorageOverride": {
+        "title": "Vymazať lokálne úložisko {AppName}",
+        "info": "Vaše lokálne úložisko je preťažené, na pokračovanie práce s {AppName} je potrebné ho vyčistiť",
+        "agree": "Áno rozumiem"
     }
 }

src/lang/sr.json

@@ -1647,5 +1647,10 @@
     "currencyDialog": {
         "currency": "Валута",
         "searchPlaceholder": "Претражујте по називу валуте или симболу"
+    },
+    "browserNotificationLocalStorageOverride": {
+        "title": "Očistite lokalnu {AppName} memoriju",
+        "info": "Vaša lokalna memorija je preopterećena, za nastavak rada sa {AppName} potrebno je očistiti je",
+        "agree": "Да, разумем"
     }
 }

src/lang/sv.json

@@ -1647,5 +1647,10 @@
     "currencyDialog": {
         "currency": "Valuta",
         "searchPlaceholder": "Sök efter valutanamn eller symbol"
+    },
+    "browserNotificationLocalStorageOverride": {
+        "title": "Rensa lokal {AppName} lagring",
+        "info": "Din lokala lagring är överbelastad, för att fortsätta arbeta med {AppName} måste du rensa den",
+        "agree": "Ja, jag förstår"
     }
 }

src/lang/vi.json

@@ -1647,5 +1647,10 @@
     "currencyDialog": {
         "currency": "Tiền tệ",
         "searchPlaceholder": "Tìm kiếm theo tên hoặc ký hiệu tiền tệ"
+    },
+    "browserNotificationLocalStorageOverride": {
+        "title": "Xóa bộ nhớ cục bộ {AppName}",
+        "info": "Bộ nhớ cục bộ của bạn đã quá tải, để tiếp tục làm việc với {AppName}, cần xóa nó",
+        "agree": "Vâng, tôi hiểu"
     }
 }

src/lang/yo.json

@@ -1647,5 +1647,10 @@
     "currencyDialog": {
         "currency": "Owo owo",
         "searchPlaceholder": "Ṣewadii nipasẹ orukọ owo tabi aami"
+    },
+    "browserNotificationLocalStorageOverride": {
+        "title": "Nu ibi ipamọ agbegbe {AppName} mọ",
+        "info": "Ibi ipamọ agbegbe rẹ ti kun ju, lati tẹsiwaju iṣẹ pẹlu {AppName} o nilo lati nu rẹ",
+        "agree": "Bẹẹni, Mo loye"
     }
 }