sora-xor · stefashkaa · Nov 1, 2022 · Mar 10, 2022 · Mar 11, 2022 · Mar 11, 2022
diff --git a/package.json b/package.json
@@ -15,36 +15,39 @@
     "lint": "vue-cli-service lint",
     "electron:build": "vue-cli-service electron:build",
     "electron:serve": "vue-cli-service electron:serve",
-    "generate-lang-json": "ts-node ./scripts/generateLocaleJson.ts",
+    "generate-lang-json": "ts-node --skip-project ./scripts/generateLocaleJson.ts",
     "postinstall": "electron-builder install-app-deps",
     "postuninstall": "electron-builder install-app-deps",
-    "test:unit": "vue-cli-service test:unit --silent",
+    "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",
     "test:all": "yarn test:unit"
   },
   "dependencies": {
-    "@metamask/detect-provider": "^1.2.0",
-    "@soramitsu/soraneo-wallet-web": "1.10.35",
-    "@walletconnect/web3-provider": "^1.6.6",
-    "core-js": "^3.6.4",
+    "@metamask/detect-provider": "^2.0.0",
+    "@soramitsu/soraneo-wallet-web": "1.10.40",
+    "@walletconnect/web3-provider": "^1.8.0",
+    "base-64": "^1.0.0",
+    "core-js": "^3.26.0",
     "direct-vuex": "^0.12.1",
-    "echarts": "^5.3.2",
-    "ethers": "^5.5.4",
+    "echarts": "^5.4.0",
+    "ethers": "^5.7.2",
     "lodash": "^4.17.21",
-    "vue": "^2.6.14",
+    "vue": "2.6.14",
     "vue-class-component": "^7.2.6",
-    "vue-echarts": "^6.0.3",
+    "vue-echarts": "^6.2.3",
     "vue-i18n": "^8.11.2",
     "vue-property-decorator": "^9.1.2",
     "vue-router": "^3.5.3",
     "vuex": "^3.1.3"
   },
   "devDependencies": {
-    "@babel/runtime": "^7.12.5",
-    "@types/electron-devtools-installer": "^2.2.0",
-    "@types/jest": "^26.0.19",
-    "@types/lodash": "^4.14.174",
-    "@types/node": "^16.11.6",
+    "@babel/runtime": "^7.20.0",
+    "@types/electron-devtools-installer": "^2.2.2",
+    "@types/jest": "^29.2.0",
+    "@types/jsdom": "^20.0.0",
+    "@types/lodash": "^4.14.186",
+    "@types/node": "^18.11.7",
     "@typescript-eslint/eslint-plugin": "^5.2.0",
     "@typescript-eslint/parser": "^5.2.0",
     "@vue/cli-plugin-babel": "^5.0.0-beta.4",
@@ -55,7 +58,7 @@
     "@vue/cli-plugin-unit-jest": "^5.0.0-beta.4",
     "@vue/cli-plugin-vuex": "^5.0.0-beta.4",
     "@vue/cli-service": "^5.0.0-beta.4",
-    "@vue/composition-api": "^1.7.0",
+    "@vue/composition-api": "^1.7.1",
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/eslint-config-standard": "^6.1.0",
     "@vue/eslint-config-typescript": "^8.0.0",
@@ -74,16 +77,16 @@
     "jest": "^27.2.2",
     "jsdom": "^16.6.0",
     "lint-staged": "^9.5.0",
-    "node-polyfill-webpack-plugin": "^1.1.4",
-    "node-sass": "^4.12.0",
+    "node-polyfill-webpack-plugin": "^2.0.1",
     "prettier": "^2.2.1",
-    "sass-loader": "^12.3.0",
+    "sass": "^1.55.0",
+    "sass-loader": "^13.1.0",
     "ts-jest": "^27.0.5",
     "typescript": "~4.4.4",
     "vue-cli-plugin-electron-builder": "^3.0.0-alpha.3",
     "vue-cli-plugin-test-attrs": "^0.1.5",
     "vue-svg-loader": "^0.16.0",
-    "vue-template-compiler": "^2.6.14"
+    "vue-template-compiler": "2.6.14"
   },
   "gitHooks": {
     "pre-commit": "lint-staged"

diff --git a/src/App.vue b/src/App.vue
@@ -23,7 +23,17 @@
           <div class="app-content">
             <router-view :parent-loading="loading || !nodeIsConnected" />
             <div class="app-disclaimer-container">
-              <p class="app-disclaimer" v-html="t('disclaimer')" />
+              <p
+                class="app-disclaimer"
+                v-html="
+                  t('disclaimer', {
+                    disclaimerPrefix,
+                    polkaswapFaqLink,
+                    memorandumLink,
+                    privacyLink,
+                  })
+                "
+              />
             </div>
           </div>
           <footer class="app-footer">
@@ -59,7 +69,7 @@ import NodeErrorMixin from '@/components/mixins/NodeErrorMixin';
 import SoraLogo from '@/components/logo/Sora.vue';
 import MobilePopup from '@/components/MobilePopup/MobilePopup.vue';
 
-import { PageNames, Components, Language } from '@/consts';
+import { PageNames, Components, Language, Links } from '@/consts';
 import axiosInstance, { updateBaseUrl } from '@/api';
 import router, { goTo, lazyComponent } from '@/router';
 import { action, getter, mutation, state } from '@/store/decorators';
@@ -169,6 +179,26 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
     }
   }
 
+  get disclaimerPrefix(): string {
+    return `<span class="app-disclaimer__title">${this.t('disclaimerTitle')}</span>`;
+  }
+
+  get memorandumLink(): string {
+    return this.generateDisclaimerLink(Links.terms, this.t('memorandum'));
+  }
+
+  get privacyLink(): string {
+    return this.generateDisclaimerLink(Links.privacy, this.t('helpDialog.privacyPolicy'));
+  }
+
+  get polkaswapFaqLink(): string {
+    return this.generateDisclaimerLink(Links.faq, this.t('FAQ'));
+  }
+
+  generateDisclaimerLink(href: string, content: string): string {
+    return `<a href="${href}" target="_blank" rel="nofollow noopener" class="link" title="${content}">${content}</a>`;
+  }
+
   async confirmInvititation(): Promise<void> {
     await this.getReferrer();
     if (this.storageReferrer) {

diff --git a/src/components/AboutNetworkDialog.vue b/src/components/AboutNetworkDialog.vue
@@ -72,7 +72,7 @@ export default class AboutNetworkDialog extends Mixins(TranslationMixin, mixins.
     }
 
     &-icon {
-      margin-left: $inner-spacing-mini / 2;
+      margin-left: $inner-spacing-tiny;
       font-size: 0.75em !important;
     }
   }

diff --git a/src/components/App/BrowserNotification/BrowserNotifsBlockedDialog.vue b/src/components/App/BrowserNotification/BrowserNotifsBlockedDialog.vue
@@ -2,7 +2,7 @@
   <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 }) }}
+        {{ t('browserNotificationDialog.notificationBlocked') }}
       </p>
       <s-button
         type="primary"

diff --git a/src/components/App/Header/AccountButton.vue b/src/components/App/Header/AccountButton.vue
@@ -34,7 +34,10 @@ export default class AccountButton extends Mixins(TranslationMixin) {
   @getter.wallet.account.isLoggedIn isLoggedIn!: boolean;
 
   get accountTooltip(): string {
-    return this.t(`${this.isLoggedIn ? 'connectedAccount' : 'connectWalletTextTooltip'}`);
+    if (this.isLoggedIn) {
+      return this.t('connectedAccount');
+    }
+    return this.t('connectWalletTextTooltip');
   }
 
   get accountInfo(): string {

diff --git a/src/components/App/Header/MarketMakerCountdown/MarketMakerCountdown.vue b/src/components/App/Header/MarketMakerCountdown/MarketMakerCountdown.vue
@@ -205,7 +205,7 @@ export default class MarketMakerCountdown extends Mixins(mixins.NumberFormatterM
   }
 
   &__unit {
-    margin-left: $inner-spacing-mini / 2;
+    margin-left: $inner-spacing-tiny;
   }
 }
 
@@ -218,7 +218,7 @@ export default class MarketMakerCountdown extends Mixins(mixins.NumberFormatterM
   &__value {
     display: flex;
     color: var(--s-color-base-content-primary);
-    margin-left: $inner-spacing-mini / 2;
+    margin-left: $inner-spacing-tiny;
   }
 }
 </style>
diff --git a/src/components/App/Menu/AppInfoPopper.vue b/src/components/App/Menu/AppInfoPopper.vue
@@ -29,7 +29,7 @@
       </div>
       <div class="app-info__versions">
         <div>{{ app.name }} v{{ app.version }}</div>
-        <div v-if="specVersion">{{ t('soraText') }} v{{ specVersion }}</div>
+        <div v-if="specVersion">{{ TranslationConsts.Sora }} v{{ specVersion }}</div>
       </div>
     </div>
     <template #reference>

diff --git a/src/components/App/Menu/AppMenu.vue b/src/components/App/Menu/AppMenu.vue
@@ -39,6 +39,7 @@
           active-hover-color="transparent"
         >
           <sidebar-item-content
+            v-if="false"
             v-button
             icon="star-16"
             title="Vote on Survey!"
@@ -250,7 +251,7 @@ export default class AppMenu extends Mixins(TranslationMixin) {
 
       .app-sidebar {
         width: 50%;
-        min-width: $breakpoint_mobile / 2;
+        min-width: calc(#{$breakpoint_mobile} / 2);
         background-color: var(--s-color-utility-body);
         padding: $inner-spacing-mini $inner-spacing-medium;
         filter: drop-shadow(32px 0px 64px rgba(0, 0, 0, 0.1));

diff --git a/src/components/Bridge/TransferNotification.vue b/src/components/Bridge/TransferNotification.vue
@@ -117,7 +117,7 @@ export default class TransferNotification extends Mixins(TranslationMixin) {
     margin-left: $inner-spacing-mini;
 
     .metamask-icon {
-      margin-left: -$inner-spacing-mini / 2;
+      margin-left: -$inner-spacing-tiny;
     }
   }
 }

diff --git a/src/components/ExternalLink.vue b/src/components/ExternalLink.vue
@@ -21,7 +21,7 @@ export default class ExternalLink extends Vue {
   color: var(--s-color-theme-accent);
 
   &__icon {
-    margin-left: $inner-spacing-mini / 2;
+    margin-left: $inner-spacing-tiny;
     font-size: 0.75em !important;
 
     &,

diff --git a/src/components/HelpDialog.vue b/src/components/HelpDialog.vue
@@ -9,10 +9,10 @@
       </div>
     </div>
     <div class="help-information">
-      <div class="help-block">{{ t('helpDialog.appVersion') }} {{ appVersion }}</div>
+      <div class="help-block">{{ t('helpDialog.appVersion') }} {{ app.version }}</div>
       <div class="help-block">
         {{ t('helpDialog.contactUs') }}<br />
-        {{ appEmail }}
+        {{ app.email }}
       </div>
     </div>
   </dialog-base>
@@ -32,8 +32,7 @@ import { app, Links } from '@/consts';
   },
 })
 export default class HelpDialog extends Mixins(TranslationMixin, mixins.DialogMixin) {
-  readonly appVersion = app.version;
-  readonly appEmail = app.email;
+  readonly app = app;
 
   get links(): Array<{ title: string; href: string }> {
     return [

diff --git a/src/components/Input/TokenSelectButton.vue b/src/components/Input/TokenSelectButton.vue
@@ -85,16 +85,16 @@ $baseClass: '.token-select-button';
 
 #{$baseClass} {
   &__logo {
-    margin-right: $inner-spacing-mini / 2;
+    margin-right: $inner-spacing-tiny;
   }
 
   &__text {
-    margin: 0 $inner-spacing-mini / 2;
+    margin: 0 $inner-spacing-tiny;
     font-weight: 800 !important;
   }
 
   &__icon {
-    margin-left: $inner-spacing-mini / 2;
+    margin-left: $inner-spacing-tiny;
     background-color: var(--s-color-base-on-accent);
     color: var(--s-color-base-content-tertiary) !important;
     border-radius: var(--s-border-radius-medium);

diff --git a/src/components/MobilePopup/MobilePopup.vue b/src/components/MobilePopup/MobilePopup.vue
@@ -2,7 +2,7 @@
   <dialog-base class="popup" :visible.sync="isVisible">
     <div class="popup-mobile">
       <div class="popup-info">
-        <h3 class="popup-info__headline" v-html="t('mobilePopup.header')" />
+        <h3 class="popup-info__headline" v-html="t('mobilePopup.header', { polkaswapHighlight })" />
         <p class="popup-info__text">
           {{ t('mobilePopup.info') }}
         </p>
@@ -28,7 +28,7 @@
 import { Component, Mixins, Prop } from 'vue-property-decorator';
 import { components, mixins } from '@soramitsu/soraneo-wallet-web';
 import TranslationMixin from '../mixins/TranslationMixin';
-import { StoreLinks } from '../../consts';
+import { StoreLinks, app } from '../../consts';
 
 import QrCode from '../../assets/img/mobile/qr-code.svg?inline';
 
@@ -43,6 +43,10 @@ export default class MobilePopup extends Mixins(mixins.DialogMixin, TranslationM
 
   StoreLinks = StoreLinks;
 
+  get polkaswapHighlight(): string {
+    return `<span class="popup-info__headline--highlight">${app.name}</span>`;
+  }
+
   handleConfirm(): void {
     this.closeDialog();
     this.$emit('confirm');

diff --git a/src/components/Referrals/ConfirmBonding.vue b/src/components/Referrals/ConfirmBonding.vue
@@ -16,7 +16,7 @@
     <s-divider />
     <info-line
       :label="t('referralProgram.networkFee')"
-      :label-tooltip="t('referralProgram.networkFeeTooltip')"
+      :label-tooltip="t('networkFeeTooltipText')"
       :value="formattedNetworkFee"
       :asset-symbol="xorSymbol"
       :fiat-value="getFiatAmountByCodecString(networkFee)"

diff --git a/src/components/Rewards/AmountTable.vue b/src/components/Rewards/AmountTable.vue
@@ -301,7 +301,7 @@ export default class AmountTable extends Mixins(mixins.FormattedAmountMixin, Tra
       line-height: var(--s-line-height-reset);
       font-weight: 300;
       text-transform: uppercase;
-      margin-bottom: $inner-spacing-mini / 2;
+      margin-bottom: $inner-spacing-tiny;
     }
 
     &__amount {

diff --git a/src/components/Rewards/RewardItemTooltip.vue b/src/components/Rewards/RewardItemTooltip.vue
@@ -68,7 +68,7 @@ $tooltip-placements: 'left', 'right';
     margin-right: auto;
 
     &-icon {
-      margin-left: $inner-spacing-mini / 2;
+      margin-left: $inner-spacing-tiny;
       color: var(--s-color-base-content-tertiary);
     }
   }

diff --git a/src/components/Settings/MarketAlgorithm.vue b/src/components/Settings/MarketAlgorithm.vue
@@ -37,14 +37,22 @@ export default class MarketAlgorithm extends Mixins(TranslationMixin) {
     return this.marketAlgorithms.map((name) => ({
       name,
       label: name,
-      content: this.t(`dexSettings.marketAlgorithms.${name}`),
+      content: this.t(`dexSettings.marketAlgorithms.${name}`, {
+        smartAlgorithm: this.generateAlgorithmItem(MarketAlgorithms.SMART),
+        tbcAlgorithm: this.generateAlgorithmItem(MarketAlgorithms.TBC),
+        xycAlgorithm: this.generateAlgorithmItem(MarketAlgorithms.XYK),
+      }),
     }));
   }
 
   get currentMarketAlgorithm(): MarketAlgorithms {
     return this.marketAlgorithmsAvailable ? this.marketAlgorithm : MarketAlgorithms.SMART;
   }
 
+  private generateAlgorithmItem(type: string): string {
+    return `<span class="algorithm">${type}</span>`;
+  }
+
   selectTab({ name }): void {
     this.setMarketAlgorithm(name);
   }

diff --git a/src/components/Swap/Chart.vue b/src/components/Swap/Chart.vue
@@ -931,7 +931,7 @@ $skeleton-label-width: 34px;
 .charts {
   &-price {
     display: flex;
-    margin-bottom: $inner-spacing-mini / 2;
+    margin-bottom: $inner-spacing-tiny;
     font-weight: 800;
     font-size: var(--s-heading3-font-size);
     line-height: var(--s-line-height-extra-small);
@@ -998,7 +998,7 @@ $skeleton-label-width: 34px;
 }
 
 .charts-skeleton {
-  $margin-right: #{$inner-spacing-mini / 2};
+  $margin-right: #{$inner-spacing-tiny};
   $skeleton-label-width-mobile: calc((100% - #{$margin-right} * 10) / 11);
   $skeleton-spacing: 18px;
   position: relative;

diff --git a/src/components/Swap/StatusActionBadge.vue b/src/components/Swap/StatusActionBadge.vue
@@ -15,7 +15,7 @@ export default class StatusActionBadge extends Vue {}
 
 <style lang="scss">
 .status-action-badge.s-card.neumorphic.s-size-small {
-  padding: $inner-spacing-mini / 2 $inner-spacing-big * 2 $inner-spacing-mini / 2 $inner-spacing-small;
+  padding: $inner-spacing-tiny $inner-spacing-big * 2 $inner-spacing-tiny $inner-spacing-small;
 }
 </style>
 
@@ -36,7 +36,7 @@ $base-class: '.status-action-badge';
   box-shadow: var(--s-shadow-element);
 
   #{$base-class}__label {
-    margin-right: $inner-spacing-mini / 2;
+    margin-right: $inner-spacing-tiny;
   }
 
   #{$base-class}__value {

diff --git a/src/components/TransactionDetails/SwapTransactionDetails.vue b/src/components/TransactionDetails/SwapTransactionDetails.vue
@@ -32,7 +32,7 @@
       <info-line
         v-if="isLoggedIn"
         :label="t('swap.networkFee')"
-        :label-tooltip="t('swap.networkFeeTooltip')"
+        :label-tooltip="t('networkFeeTooltipText')"
         :value="formattedNetworkFee"
         :asset-symbol="xorSymbol"
         :fiat-value="getFiatAmountByCodecString(networkFee)"