Release 1.39.0 (#1487)

env.json

@@ -5,7 +5,8 @@
     "etherscan": "XBS98SSP8J5FNS7EKQHMHRU94Z2YG7HFFK",
     "nftStorage": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJkaWQ6ZXRocjoweDBmMzgwOTMyQTNDODM3ZDNiN2JEYzBBNTc0NmNkMDlBRGIyNUZGMzQiLCJpc3MiOiJuZnQtc3RvcmFnZSIsImlhdCI6MTY0NTU0MDQ4MTQ5OSwibmFtZSI6Im5mdC1zdG9yYWdlLXByb2QifQ.CnW1bq8eWEYQxA6cggGMeAqCTozCJZ6s2oL_bssqnmc",
     "googleApi": "AIzaSyCazdRheGfy7_bwVi0m5UgUYjz7l0c54nM",
-    "googleClientId": "728106973134-pfmcagr0t4lchepajcp7llp7f1t09lf0.apps.googleusercontent.com"
+    "googleClientId": "728106973134-pfmcagr0t4lchepajcp7llp7f1t09lf0.apps.googleusercontent.com",
+    "walletconnect": "feeab08b50e0d407f4eb875d69e162e8"
   },
   "FEATURE_FLAGS": {
     "moonpay": true,
@@ -16,7 +17,7 @@
     "assetOwner": false
   },
   "SUBQUERY_ENDPOINT": "https://api.subquery.network/sq/sora-xor/sora-prod",
-  "SUBSQUID_ENDPOINT": "https://squid.subsquid.io/sora/graphql",
+  "SUBSQUID_ENDPOINT": "",
   "TG_BOT_URL": "t.me/polkaswap_io_bot",
   "DEFAULT_NETWORKS": [
     {
@@ -42,12 +43,6 @@
       "name": "OnFinality",
       "address": "wss://sora.api.onfinality.io/public-ws",
       "location": "JP"
-    },
-    {
-      "chain": "SORA",
-      "name": "Soramitsu",
-      "address": "wss://ws.framenode-0.a1.sora2.soramitsu.co.jp",
-      "location": "IE"
     }
   ],
   "NETWORK_TYPE": "Prod",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "polkaswap-exchange-web",
-  "version": "1.38.3",
+  "version": "1.39.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/sora-xor/polkaswap-exchange-web.git"
@@ -28,15 +28,14 @@
   "dependencies": {
     "@cedelabs/widgets-universal": "^1.3.1",
     "@metamask/detect-provider": "^2.0.0",
-    "@soramitsu/soraneo-wallet-web": "1.38.9",
-    "@tma.js/sdk": "^2.7.0",
+    "@soramitsu/soraneo-wallet-web": "1.39.10",
     "@walletconnect/ethereum-provider": "^2.13.3",
     "@walletconnect/modal": "^2.6.2",
     "core-js": "^3.37.1",
     "country-code-emoji": "^2.3.0",
     "country-flag-emoji-polyfill": "^0.1.8",
     "direct-vuex": "^0.12.1",
-    "echarts": "^5.5.0",
+    "echarts": "^5.5.1",
     "email-validator": "^2.0.4",
     "ethers": "6.13.1",
     "jwt-decode": "^4.0.0",
@@ -46,18 +45,20 @@
     "vue": "2.7.14",
     "vue-class-component": "^7.2.6",
     "vue-echarts": "^6.7.3",
+    "vue-grid-layout": "^2.4.0",
     "vue-i18n": "^8.28.2",
     "vue-property-decorator": "^9.1.2",
     "vue-router": "^3.6.5",
     "vuex": "^3.6.2"
   },
   "devDependencies": {
-    "@babel/runtime": "^7.24.7",
+    "@babel/runtime": "^7.24.8",
     "@types/electron-devtools-installer": "^2.2.5",
     "@types/jest": "^29.5.12",
     "@types/jsdom": "^21.1.7",
-    "@types/lodash": "^4.17.5",
-    "@types/node": "^20.14.5",
+    "@types/lodash": "^4.17.6",
+    "@types/node": "^20.14.10",
+    "@types/telegram-web-app": "^7.3.1",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "@vue/cli-plugin-babel": "5.0.8",
@@ -89,10 +90,10 @@
     "lint-staged": "^9.5.0",
     "node-polyfill-webpack-plugin": "^4.0.0",
     "prettier": "^2.8.8",
-    "sass": "^1.77.6",
+    "sass": "^1.77.8",
     "sass-loader": "^14.2.1",
     "ts-jest": "^27.1.5",
-    "typescript": "~5.4.5",
+    "typescript": "~5.5.3",
     "vue-cli-plugin-electron-builder": "^3.0.0-alpha.4",
     "vue-cli-plugin-test-attrs": "^0.1.5",
     "vue-template-compiler": "2.7.14"

public/env.json

@@ -5,7 +5,8 @@
     "nftStorage": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJkaWQ6ZXRocjoweDBmMzgwOTMyQTNDODM3ZDNiN2JEYzBBNTc0NmNkMDlBRGIyNUZGMzQiLCJpc3MiOiJuZnQtc3RvcmFnZSIsImlhdCI6MTY0MjU4OTQ2ODA4MSwibmFtZSI6Im5mdC1zdG9yYWdlLWRldiJ9.hkvzea9ltcriXXHKoYd3F2Iu1Y8X5H-zunAQboC_3vw",
     "etherscan": "YBR7IWEBEXFICT8M7GRV77NBX4AXJ9T53H",
     "googleApi": "AIzaSyAzj7JxB-j8pJixtt6JSqLPhG0y02CGYOU",
-    "googleClientId": "498393666682-9eeiioee0a2sgb1671e9qir645f9n6cv.apps.googleusercontent.com"
+    "googleClientId": "498393666682-9eeiioee0a2sgb1671e9qir645f9n6cv.apps.googleusercontent.com",
+    "walletconnect": "feeab08b50e0d407f4eb875d69e162e8"
   },
   "FEATURE_FLAGS": {
     "moonpay": true,

public/index.html

@@ -39,6 +39,7 @@
     <meta property="og:image:secure_url" content="https://polkaswap.io/<%= BASE_URL %>polkaswap-share-image.jpg" />
     <meta property="og:image:width" content="1280" />
     <meta property="og:image:height" content="630" />
+    <script src="https://telegram.org/js/telegram-web-app.js"></script>
   </head>
   <body>
     <noscript>

public/marketing.json

@@ -1,4 +1,14 @@
 [
+  {
+    "title": "WHAT IS\nPOLKASWAP",
+    "img": "/marketing/polkaswap.png",
+    "link": "https://about.polkaswap.io"
+  },
+  {
+    "title": "NOW IN TELEGRAM",
+    "img": "/marketing/now_in_telegram.png",
+    "link": "https://t.me/polkaswap_io_bot/app"
+  },
   {
     "title": "SORA",
     "img": "/marketing/soraV3.png",

src/App.vue

@@ -5,13 +5,12 @@
       <app-menu
         :visible="menuVisibility"
         :on-select="goTo"
-        :is-about-page-opened="isAboutPage"
         @open-product-dialog="openProductDialog"
         @click.native="handleAppMenuClick"
       >
         <app-logo-button slot="head" class="app-logo--menu" :theme="libraryTheme" @click="goToSwap" />
       </app-menu>
-      <div class="app-body" :class="{ 'app-body__about': isAboutPage }">
+      <div class="app-body">
         <s-scrollbar class="app-body-scrollbar" v-loading="pageLoading">
           <div class="app-content">
             <router-view :parent-loading="loading || !nodeIsConnected" />
@@ -31,12 +30,17 @@
     </notification-enabling-page>
     <alerts />
     <confirm-dialog
-      :get-api="getApi"
+      :chain-api="chainApi"
       :account="account"
       :visibility="isSignTxDialogVisible"
       :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>
 
@@ -53,7 +57,6 @@ import {
   initWallet,
   waitForCore,
 } from '@soramitsu/soraneo-wallet-web';
-import { isTMA } from '@tma.js/sdk';
 import debounce from 'lodash/debounce';
 import { Component, Mixins, Watch } from 'vue-property-decorator';
 
@@ -63,13 +66,15 @@ 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, WalletPermissions, LOCAL_STORAGE_LIMIT_PERCENTAGE } from '@/consts';
+import { BreakpointClass } from '@/consts/layout';
 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 { TmaSdk } from '@/utils/telegram';
+import { calculateStorageUsagePercentage, clearLocalStorage } from '@/utils/storage';
+import { tmaSdkService } from '@/utils/telegram';
 
 import type { FeatureFlags } from './store/settings/types';
 import type { EthBridgeSettings, SubNetworkApps } from './store/web3/types';
@@ -91,6 +96,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),
@@ -104,14 +110,15 @@ 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;
   @state.settings.browserNotifPopupVisibility private browserNotifPopup!: boolean;
   @state.settings.browserNotifPopupBlockedVisibility private browserNotifPopupBlocked!: boolean;
+  @state.wallet.account.assetsToNotifyQueue private assetsToNotifyQueue!: Array<WhitelistArrayItem>;
+  @state.referrals.storageReferrer private storageReferrer!: string;
   @state.referrals.referrer private referrer!: string;
-  @state.referrals.storageReferrer storageReferrer!: string;
-  @state.wallet.account.assetsToNotifyQueue assetsToNotifyQueue!: Array<WhitelistArrayItem>;
   @state.settings.disclaimerVisibility disclaimerVisibility!: boolean;
   @state.router.loading pageLoading!: boolean;
 
@@ -156,10 +163,6 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
 
   @state.wallet.transactions.isSignTxDialogVisible public isSignTxDialogVisible!: boolean;
   @mutation.wallet.transactions.setSignTxDialogVisibility public setSignTxDialogVisibility!: (flag: boolean) => void;
-  // [DESKTOP] To Enable Desktop
-  @mutation.wallet.account.setIsDesktop private setIsDesktop!: (v: boolean) => void;
-  // [TMA] To Enable TMA
-  @mutation.settings.enableTMA private enableTMA!: FnWithoutArgs;
 
   @Watch('assetsToNotifyQueue')
   private handleNotifyOnDeposit(whitelistAssetArray: WhitelistArrayItem[]): void {
@@ -219,8 +222,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);
@@ -236,11 +250,7 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
       }
 
       // To start running as Telegram Web App (desktop capabilities)
-      if (await isTMA()) {
-        this.enableTMA();
-        this.setIsDesktop(true);
-        await TmaSdk.init(data?.TG_BOT_URL, data.NETWORK_TYPE === WALLET_CONSTS.SoraNetwork.Dev);
-      }
+      tmaSdkService.init(data?.TG_BOT_URL);
 
       await this.setApiKeys(data?.API_KEYS);
       await this.setEthBridgeSettings(data.ETH_BRIDGE);
@@ -281,10 +291,6 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
     return getMobileCssClasses();
   }
 
-  get isAboutPage(): boolean {
-    return this.$route.name === PageNames.About;
-  }
-
   get dsProviderClasses(): string[] | BreakpointClass {
     return this.mobileCssClasses?.length ? [...this.mobileCssClasses, this.responsiveClass] : this.responsiveClass;
   }
@@ -314,12 +320,17 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
     this.setBrowserNotifsPopupBlocked(value);
   }
 
-  getApi() {
+  get chainApi() {
     return api;
   }
 
   goTo(name: PageNames): void {
-    goTo(name);
+    if (name === PageNames.Rewards) {
+      // Rewards is a menu route but we need to show PointSystem by default
+      goTo(PageNames.PointSystem);
+    } else {
+      goTo(name);
+    }
     this.closeMenu();
   }
 
@@ -365,7 +376,9 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
   }
 
   async beforeDestroy(): Promise<void> {
+    window.removeEventListener('localStorageUpdated', this.handleLocalStorageChange);
     window.removeEventListener('resize', this.setResponsiveClassDebounced);
+    tmaSdkService.destroy();
     await this.resetInternalSubscriptions();
     await this.resetNetworkSubscriptions();
     this.resetBlockNumberSubscription();
@@ -421,7 +434,7 @@ ul ul {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-family: 'Sora', sans-serif;
-  height: 100vh;
+  height: 100dvh;
   color: var(--s-color-base-content-primary);
   background-color: var(--s-color-utility-body);
   transition: background-color 500ms linear;
@@ -614,7 +627,7 @@ i.icon-divider {
   &-main {
     display: flex;
     align-items: stretch;
-    height: calc(100vh - #{$header-height} - #{$footer-height});
+    height: calc(100dvh - #{$header-height} - #{$footer-height});
     position: relative;
   }
 
@@ -624,9 +637,6 @@ i.icon-divider {
     flex: 1;
     flex-flow: column nowrap;
     max-width: 100%;
-    &__about {
-      overflow: hidden;
-    }
   }
 
   &-content {