Merge pull request #1558 from sora-xor/release/1.41.0

Release 1.41.0

.github/pull_request_template.md

@@ -1,10 +1,55 @@
-# Task
+### **Description**
+- **What does this PR do?**
+  - _A brief explanation of the change, its purpose, and how it impacts the codebase._
+
+- **Why is this change needed?**
+  - _Describe the problem the PR solves or the feature it adds._
 
-[PW-XXXX]: Title.
+### **Type of change**
+- [ ] Bug fix
+- [ ] New feature
+- [ ] Refactor (cleaning up code without changing functionality)
+- [ ] Documentation update
+- [ ] Tests
+- [ ] Other (describe below):
 
-## Changes
+---
 
-1. Description.
+### **Checklist**
+- [ ] Code adheres to coding guidelines and standards.
+- [ ] Linting and formatting checks have passed, no local issues.
+- [ ] Existing tests pass successfully, no local errors.
+- [ ] Pull request is linked to a relevant issue or task.
+- [ ] Tests are written for new features or fixes.
+- [ ] Documentation has been updated (if applicable).
+
+---
 
+### **Related Issue/Task**
+- Issue/Task link: _[Paste link to issue or Jira ticket]_ 
 
-[PW-XXXX]: https://soramitsu.atlassian.net/browse/PW-XXXX
+---
+
+### **Testing**
+- **How has this been tested?**
+  - _Describe manual testing steps or link to relevant automated tests._
+
+- **Edge cases covered:**
+  - _List any specific cases handled by this PR._
+
+---
+
+### **Screenshots/Video/Link to dedicated environment (if applicable)**
+- _Include any visual examples of the change + dedicated environment (if there is a sort of automation)._
+
+---
+
+### **Additional Notes**
+- _Add any information the reviewer should consider, especially cross-project impacts, UX changes, or potential risks._
+
+---
+
+### **Reviewer Tasks**
+- [ ] Review logic for correctness and clarity.
+- [ ] Verify that the code is following best practices.
+- [ ] Test or review related areas if this PR affects other projects.

env.json

@@ -14,7 +14,7 @@
     "orderBook": true,
     "kensetsu": true,
     "assetOwner": false,
-    "alt": false,
+    "alt": true,
     "debug": false
   },
   "SUBQUERY_ENDPOINT": "https://api.subquery.network/sq/sora-xor/sora-prod",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "polkaswap-exchange-web",
-  "version": "1.40.1",
+  "version": "1.41.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/sora-xor/polkaswap-exchange-web.git"
@@ -19,7 +19,7 @@
     "inspect": "vue-cli-service inspect > .webpack-config.js",
     "electron:build": "vue-cli-service electron:build",
     "electron:serve": "vue-cli-service electron:serve",
-    "generate-lang-json": "ts-node --skip-project ./scripts/generateLocaleJson.ts",
+    "generate-lang-json": "tsx ./scripts/generateLocaleJson.ts",
     "test:unit": "vue-cli-service test:unit --testPathIgnorePatterns Translation.spec.ts",
     "test:translation": "vue-cli-service test:unit -- Translation.spec.ts",
     "test:e2e": "vue-cli-service test:e2e",
@@ -28,7 +28,7 @@
   "dependencies": {
     "@cedelabs/widgets-universal": "^1.3.1",
     "@metamask/detect-provider": "^2.0.0",
-    "@soramitsu/soraneo-wallet-web": "1.40.0",
+    "@soramitsu/soraneo-wallet-web": "1.40.16",
     "@walletconnect/ethereum-provider": "^2.13.3",
     "@walletconnect/modal": "^2.6.2",
     "core-js": "^3.37.1",
@@ -93,6 +93,7 @@
     "sass": "^1.77.8",
     "sass-loader": "^14.2.1",
     "ts-jest": "^27.1.5",
+    "tsx": "^4.19.1",
     "typescript": "~5.5.3",
     "vue-cli-plugin-electron-builder": "^3.0.0-alpha.4",
     "vue-cli-plugin-test-attrs": "^0.1.5",

scripts/generateLocaleJson.ts

@@ -1,25 +1,56 @@
 import fs from 'fs';
+
 import { JSDOM } from 'jsdom';
 
 // Mock browser dependencies for imported libraries
 const dom = new JSDOM();
 global.document = dom.window.document as any;
 global.window = dom.window as any;
+global.navigator = dom.window.navigator as any;
+global.HTMLElement = dom.window.HTMLElement as any;
+global.HTMLAnchorElement = dom.window.HTMLAnchorElement as any;
 global.localStorage = { getItem: () => {} } as any;
+Object.defineProperty(global.window, 'matchMedia', {
+  writable: true,
+  value: (arg) => ({
+    matches: false,
+  }),
+});
+
+function format(obj: any) {
+  if (typeof obj !== 'object' || obj === null) return obj;
+
+  const keys = Object.keys(obj);
+
+  if (!keys.length) return null;
 
-function format(obj: any, formatted: any) {
-  for (const key of Object.keys(obj)) {
-    const value = obj[key];
-    if (typeof value === 'string') {
-      formatted[key] = value;
-    } else {
-      formatted[key] = {};
-      format(value, formatted[key]);
-      if (!Object.keys(formatted[key]).length) {
-        delete formatted[key];
-      }
+  const formatted = {};
+
+  keys.forEach((key) => {
+    const inner = format(obj[key]);
+    if (inner) {
+      formatted[key] = inner;
     }
-  }
+  });
+
+  return formatted;
+}
+
+function sortAlpha(obj: any) {
+  if (typeof obj !== 'object') return obj;
+
+  const sorted = {};
+
+  const keys = Object.keys(obj)
+    .map((k) => [k, k.toLowerCase()])
+    .sort((a, b) => a[1].localeCompare(b[1]))
+    .map(([k]) => k);
+
+  keys.forEach((key) => {
+    sorted[key] = sortAlpha(obj[key]);
+  });
+
+  return sorted;
 }
 
 (async function main() {
@@ -28,8 +59,8 @@ function format(obj: any, formatted: any) {
     fs.mkdirSync(buildDir);
   }
   const langObj = (await import('../src/lang/messages')).default;
-  const formatted = {} as any;
-  format(langObj, formatted);
-  fs.writeFileSync(`${buildDir}/en.json`, JSON.stringify(formatted, null, 4));
+  const formatted = format(langObj);
+  const sorted = sortAlpha(formatted);
+  fs.writeFileSync(`${buildDir}/en-compare.json`, JSON.stringify(sorted, null, 4));
   console.info(`${buildDir}/en.json created!`);
 })();

src/App.vue

@@ -25,6 +25,7 @@
     <app-mobile-popup :visible.sync="showSoraMobilePopup" />
     <app-browser-notifs-enable-dialog :visible.sync="showBrowserNotifPopup" @set-dark-page="setDarkPage" />
     <app-browser-notifs-blocked-dialog :visible.sync="showBrowserNotifBlockedPopup" />
+    <app-browser-notifs-blocked-rotate-phone :visible.sync="orientationWarningVisible" />
     <notification-enabling-page v-if="showNotifsDarkPage">
       {{ t('browserNotificationDialog.pointer') }}
     </notification-enabling-page>
@@ -67,7 +68,7 @@ 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, WalletPermissions, LOCAL_STORAGE_LIMIT_PERCENTAGE } from '@/consts';
-import { BreakpointClass } from '@/consts/layout';
+import { BreakpointClass, Breakpoint } from '@/consts/layout';
 import { getLocale } from '@/lang';
 import router, { goTo, lazyComponent } from '@/router';
 import { action, getter, mutation, state } from '@/store/decorators';
@@ -97,6 +98,7 @@ import type Theme from '@soramitsu-ui/ui-vue2/lib/types/Theme';
     AppBrowserNotifsEnableDialog: lazyComponent(Components.AppBrowserNotifsEnableDialog),
     AppBrowserNotifsBlockedDialog: lazyComponent(Components.AppBrowserNotifsBlockedDialog),
     AppBrowserNotifsLocalStorageOverride: lazyComponent(Components.AppBrowserNotifsLocalStorageOverride),
+    AppBrowserNotifsBlockedRotatePhone: lazyComponent(Components.AppBrowserNotifsBlockedRotatePhone),
     ReferralsConfirmInviteUser: lazyComponent(Components.ReferralsConfirmInviteUser),
     BridgeTransferNotification: lazyComponent(Components.BridgeTransferNotification),
     SelectSoraAccountDialog: lazyComponent(Components.SelectSoraAccountDialog),
@@ -116,6 +118,7 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
   @state.settings.appConnection private appConnection!: NodesConnection;
   @state.settings.browserNotifPopupVisibility private browserNotifPopup!: boolean;
   @state.settings.browserNotifPopupBlockedVisibility private browserNotifPopupBlocked!: boolean;
+  @state.settings.isOrientationWarningVisible private orientationWarningVisible!: boolean;
   @state.wallet.account.assetsToNotifyQueue private assetsToNotifyQueue!: Array<WhitelistArrayItem>;
   @state.referrals.storageReferrer private storageReferrer!: string;
   @state.referrals.referrer private referrer!: string;
@@ -141,6 +144,8 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
   @mutation.settings.toggleDisclaimerDialogVisibility private toggleDisclaimerDialogVisibility!: FnWithoutArgs;
   @mutation.settings.resetBlockNumberSubscription private resetBlockNumberSubscription!: FnWithoutArgs;
   @mutation.settings.setScreenBreakpointClass private setScreenBreakpointClass!: (windowWidth: number) => void;
+  @mutation.settings.showOrientationWarning private showOrientationWarning!: FnWithoutArgs;
+  @mutation.settings.hideOrientationWarning private hideOrientationWarning!: FnWithoutArgs;
   @mutation.referrals.unsubscribeFromInvitedUsers private unsubscribeFromInvitedUsers!: FnWithoutArgs;
   @mutation.web3.setEvmNetworksApp private setEvmNetworksApp!: (data: EvmNetwork[]) => void;
   @mutation.web3.setSubNetworkApps private setSubNetworkApps!: (data: SubNetworkApps) => void;
@@ -233,6 +238,17 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
     }
   }
 
+  private handleOrientationChange(): void {
+    const isLandscape = screen.orientation
+      ? screen.orientation.type.startsWith('landscape')
+      : window.innerHeight < window.innerWidth;
+    if (isLandscape) {
+      this.showOrientationWarning();
+    } else {
+      this.hideOrientationWarning();
+    }
+  }
+
   async created() {
     window.addEventListener('localStorageUpdated', this.handleLocalStorageChange);
     preloadFontFace('element-icons');
@@ -285,6 +301,13 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
 
   mounted(): void {
     window.addEventListener('resize', this.setResponsiveClassDebounced);
+    if (window.innerWidth <= Breakpoint.LargeMobile) {
+      if (screen.orientation) {
+        screen.orientation.addEventListener('change', this.handleOrientationChange);
+      } else {
+        window.addEventListener('resize', this.handleOrientationChange);
+      }
+    }
   }
 
   private get mobileCssClasses(): string[] | undefined {
@@ -378,6 +401,11 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
   async beforeDestroy(): Promise<void> {
     window.removeEventListener('localStorageUpdated', this.handleLocalStorageChange);
     window.removeEventListener('resize', this.setResponsiveClassDebounced);
+    if (screen.orientation) {
+      screen.orientation.removeEventListener('change', this.handleOrientationChange);
+    } else {
+      window.removeEventListener('resize', this.handleOrientationChange);
+    }
     tmaSdkService.destroy();
     await this.resetInternalSubscriptions();
     await this.resetNetworkSubscriptions();

src/components/App/BrowserNotification/BrowserNotifsBlockedRotatePhone.vue

@@ -0,0 +1,70 @@
+<template>
+  <dialog-base class="browser-notification" :visible.sync="isVisible">
+    <div class="browser-notification-dialog">
+      <img src="@/assets/img/mobile/rotate_phone.svg" alt="mobile-rotate-phone" />
+      <p class="notification-title">{{ t('browserNotificationDialog.rotatetitle') }}</p>
+      <p class="notification-message">{{ t('browserNotificationDialog.rotateMessage') }}</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 { 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 AppBrowserNotifsBlockedRotatePhone extends Mixins(
+  TranslationMixin,
+  mixins.DialogMixin,
+  mixins.LoadingMixin
+) {
+  agree(): void {
+    this.closeDialog();
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.browser-notification-dialog {
+  @include browser-notification-dialog;
+  justify-content: center;
+  align-items: center;
+  max-height: 230px;
+}
+
+img {
+  height: 113px;
+  width: 113px;
+}
+
+.notification-title {
+  margin-top: 33px;
+  margin-bottom: 14px;
+  font-size: 24px;
+  font-weight: 600;
+  color: var(--s-color-base-content-primary);
+}
+
+.notification-message {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--s-color-base-content-secondary);
+  max-width: 200px;
+  text-align: center;
+  margin-bottom: 14px;
+}
+</style>

src/components/App/Header/AppHeader.vue

@@ -13,6 +13,8 @@
       <app-account-button :disabled="loading" @click="navigateToWallet" />
       <app-header-menu />
     </div>
+    <rotate-phone-dialog />
+    <acceleration-access-dialog />
     <select-language-dialog />
     <select-currency-dialog />
   </header>
@@ -46,6 +48,8 @@ import type Theme from '@soramitsu-ui/ui-vue2/lib/types/Theme';
     AppLogoButton,
     SelectLanguageDialog: lazyComponent(Components.SelectLanguageDialog),
     SelectCurrencyDialog: lazyComponent(Components.SelectCurrencyDialog),
+    RotatePhoneDialog: lazyComponent(Components.RotatePhoneDialog),
+    AccelerationAccessDialog: lazyComponent(Components.AccelerationAccessDialog),
     PairTokenLogo: lazyComponent(Components.PairTokenLogo),
     WalletAvatar: components.WalletAvatar,
   },