Merge branch 'develop' into feature/add-fearless-to-bridge

env.json

@@ -17,6 +17,7 @@
   },
   "SUBQUERY_ENDPOINT": "https://api.subquery.network/sq/sora-xor/sora-prod",
   "SUBSQUID_ENDPOINT": "https://squid.subsquid.io/sora/graphql",
+  "TG_BOT_URL": "t.me/polkaswap_io_bot",
   "DEFAULT_NETWORKS": [
     {
       "chain": "SORA",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "polkaswap-exchange-web",
-  "version": "1.38.0",
+  "version": "1.38.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/sora-xor/polkaswap-exchange-web.git"
@@ -28,35 +28,36 @@
   "dependencies": {
     "@cedelabs/widgets-universal": "^1.3.1",
     "@metamask/detect-provider": "^2.0.0",
-    "@soramitsu/soraneo-wallet-web": "1.38.2",
-    "@walletconnect/ethereum-provider": "^2.12.2",
+    "@soramitsu/soraneo-wallet-web": "1.38.9",
+    "@tma.js/sdk": "^2.7.0",
+    "@walletconnect/ethereum-provider": "^2.13.3",
     "@walletconnect/modal": "^2.6.2",
-    "core-js": "^3.37.0",
+    "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",
     "email-validator": "^2.0.4",
-    "ethers": "6.12.1",
+    "ethers": "6.13.1",
     "jwt-decode": "^4.0.0",
     "lodash": "^4.17.21",
     "polkadotApi": "npm:@polkadot/api@11.2.1",
     "uuidv4": "^6.2.13",
     "vue": "2.7.14",
     "vue-class-component": "^7.2.6",
-    "vue-echarts": "^6.7.1",
+    "vue-echarts": "^6.7.3",
     "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.5",
+    "@babel/runtime": "^7.24.7",
     "@types/electron-devtools-installer": "^2.2.5",
     "@types/jest": "^29.5.12",
-    "@types/jsdom": "^21.1.6",
-    "@types/lodash": "^4.17.3",
-    "@types/node": "^20.12.10",
+    "@types/jsdom": "^21.1.7",
+    "@types/lodash": "^4.17.5",
+    "@types/node": "^20.14.5",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "@vue/cli-plugin-babel": "5.0.8",
@@ -86,9 +87,9 @@
     "jest": "^27.5.1",
     "jsdom": "^16.7.0",
     "lint-staged": "^9.5.0",
-    "node-polyfill-webpack-plugin": "^3.0.0",
+    "node-polyfill-webpack-plugin": "^4.0.0",
     "prettier": "^2.8.8",
-    "sass": "^1.77.0",
+    "sass": "^1.77.6",
     "sass-loader": "^14.2.1",
     "ts-jest": "^27.1.5",
     "typescript": "~5.4.5",

public/env.json

@@ -16,6 +16,7 @@
     "assetOwner": false
   },
   "FAUCET_URL": "https://faucet.dev.sora2.tachi.soramitsu.co.jp/",
+  "TG_BOT_URL": "t.me/PolkaswapDevBot",
   "DEFAULT_NETWORKS": [
     {
       "chain": "SORA-dev Testnet #1",

src/App.vue

@@ -53,6 +53,7 @@ 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';
 
@@ -68,6 +69,7 @@ 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 type { FeatureFlags } from './store/settings/types';
 import type { EthBridgeSettings, SubNetworkApps } from './store/web3/types';
@@ -107,8 +109,9 @@ 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.wallet.account.assetsToNotifyQueue assetsToNotifyQueue!: Array<WhitelistArrayItem>;
+  @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;
 
@@ -153,9 +156,10 @@ 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;
+  @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 {
@@ -196,16 +200,17 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
   }
 
   private async confirmInvititation(): Promise<void> {
-    await this.getReferrer();
-    if (this.storageReferrer) {
+    await this.withApi(async () => {
+      await this.getReferrer();
+      if (!this.storageReferrer) {
+        return;
+      }
       if (this.storageReferrer === this.account.address) {
         this.resetStorageReferrer();
-      } else {
-        this.withApi(() => {
-          this.showConfirmInviteUser = true;
-        });
+      } else if (!this.referrer) {
+        this.showConfirmInviteUser = true;
       }
-    }
+    });
   }
 
   private setResponsiveClass(): void {
@@ -215,8 +220,6 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
   private setResponsiveClassDebounced = debounce(this.setResponsiveClass, 250);
 
   async created() {
-    // [DESKTOP] To Enable Desktop
-    // this.setIsDesktop(true);
     // element-icons is not common used, but should be visible after network connection lost
     preloadFontFace('element-icons');
     this.setResponsiveClass();
@@ -232,6 +235,13 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
         throw new Error('NETWORK_TYPE is not set');
       }
 
+      // 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);
+      }
+
       await this.setApiKeys(data?.API_KEYS);
       await this.setEthBridgeSettings(data.ETH_BRIDGE);
       this.setFeatureFlags(data?.FEATURE_FLAGS);
@@ -518,6 +528,9 @@ ul ul {
     width: 0;
     animation: none;
   }
+  @include mobile(true) {
+    width: 300px;
+  }
 }
 
 .el-form--actions {

src/components/App/Header/AppHeaderMenu.vue

@@ -43,6 +43,7 @@ import { Component, Mixins } from 'vue-property-decorator';
 
 import TranslationMixin from '@/components/mixins/TranslationMixin';
 import { getter, mutation, state } from '@/store/decorators';
+import { TmaSdk } from '@/utils/telegram';
 
 import type { Currency } from '@soramitsu/soraneo-wallet-web/lib/types/currency';
 
@@ -177,13 +178,15 @@ export default class AppHeaderMenu extends Mixins(TranslationMixin) {
     dropdown.visible ? dropdown.hide() : dropdown.show();
   }
 
-  handleSelectHeaderMenu(value: HeaderMenuType): void {
+  async handleSelectHeaderMenu(value: HeaderMenuType): Promise<void> {
     switch (value) {
       case HeaderMenuType.HideBalances:
         this.toggleHideBalance();
         break;
       case HeaderMenuType.Theme:
-        switchTheme();
+        await switchTheme();
+        await this.$nextTick();
+        TmaSdk.updateTheme();
         break;
       case HeaderMenuType.Language:
         this.setLanguageDialogVisibility(true);

src/components/App/Menu/AppMenu.vue

@@ -405,6 +405,7 @@ export default class AppMenu extends Mixins(TranslationMixin) {
     @include large-mobile(true) {
       position: fixed;
       right: 0;
+      z-index: $app-above-loader-layer;
 
       &.visible {
         visibility: visible;

src/components/pages/Burn/BurnDialog.vue

@@ -50,7 +50,7 @@
         <template v-if="isZeroAmount">
           {{ t('buttons.enterAmount') }}
         </template>
-        <template v-else-if="isAmountLessThanOne">NEED TO RESERVE MORE THAN 1</template>
+        <template v-else-if="isAmountLessThanMin">NEED TO RESERVE MORE THAN {{ min }}</template>
         <template v-else-if="isInsufficientBalance">
           {{ t('insufficientBalanceText', { tokenSymbol: burnedAsset.symbol }) }}
         </template>
@@ -94,6 +94,7 @@ export default class BurnDialog extends Mixins(
   @Prop({ type: Object, required: true }) readonly burnedAsset!: Asset;
   @Prop({ type: Number, default: 1_000_000 }) readonly rate!: number;
   @Prop({ type: Number, default: 10_000 }) readonly max!: number;
+  @Prop({ type: Number, default: 1 }) readonly min!: number;
 
   @state.wallet.settings.networkFees private networkFees!: NetworkFeesObject;
   @getter.assets.xor private accountXor!: Nullable<AccountAsset>;
@@ -142,8 +143,8 @@ export default class BurnDialog extends Mixins(
     return this.getKey(`${this.burnedAsset.symbol}-left`);
   }
 
-  get isAmountLessThanOne(): boolean {
-    return +(this.value || '0') < 1;
+  get isAmountLessThanMin(): boolean {
+    return +(this.value || '0') < this.min;
   }
 
   get formattedWillBeBurned(): string {
@@ -190,7 +191,7 @@ export default class BurnDialog extends Mixins(
   }
 
   get isBurnDisabled(): boolean {
-    return this.loading || this.isZeroAmount || this.isAmountLessThanOne || this.isInsufficientBalance;
+    return this.loading || this.isZeroAmount || this.isAmountLessThanMin || this.isInsufficientBalance;
   }
 
   handleInputField(value: string): void {

src/components/pages/Referrals/ConfirmInviteUser.vue

@@ -32,6 +32,7 @@ import { Component, Mixins, Watch } from 'vue-property-decorator';
 
 import { state, mutation } from '@/store/decorators';
 
+// TODO: [Rustem] remove hasReferrer logic (localise)
 @Component({
   components: { DialogBase: components.DialogBase },
 })

src/components/pages/Stats/BarChart.vue

@@ -10,15 +10,12 @@
       :is-error="isFetchingError"
       @retry="updateData"
     >
-      <formatted-amount v-if="fees" class="chart-price" :value="amount.amount">
-        {{ amount.suffix }}
-        <template>&nbsp;{{ XOR.symbol }}</template>
-      </formatted-amount>
-      <formatted-amount v-else class="chart-price" :value="amount.amount" is-fiat-value>
+      <formatted-amount class="chart-price" :value="amount.amount">
+        <template #prefix>{{ symbol }}</template>
         {{ amount.suffix }}
       </formatted-amount>
       <price-change :value="priceChange" />
-      <v-chart ref="chart" class="chart" :option="chartSpec" autoresize />
+      <v-chart ref="chart" class="chart" :key="chartKey" :option="chartSpec" autoresize />
     </chart-skeleton>
   </base-widget>
 </template>
@@ -36,6 +33,7 @@ import { Components } from '@/consts';
 import { SECONDS_IN_TYPE, NETWORK_STATS_FILTERS } from '@/consts/snapshots';
 import { fetchData } from '@/indexer/queries/networkVolume';
 import { lazyComponent } from '@/router';
+import { getter } from '@/store/decorators';
 import type { SnapshotFilter } from '@/types/filters';
 import type { AmountWithSuffix } from '@/types/formats';
 import { calcPriceChange, formatAmountWithSuffix, formatDecimalPlaces } from '@/utils';
@@ -80,6 +78,9 @@ const normalizeTo = (sample: ChartData[], difference: number, from: number, to:
   },
 })
 export default class StatsBarChart extends Mixins(mixins.LoadingMixin, ChartSpecMixin) {
+  @getter.wallet.settings.exchangeRate private exchangeRate!: number;
+  @getter.wallet.settings.currencySymbol private currencySymbol!: string;
+
   @Prop({ default: false, type: Boolean }) readonly fees!: boolean;
 
   readonly FontSizeRate = WALLET_CONSTS.FontSizeRate;
@@ -98,6 +99,15 @@ export default class StatsBarChart extends Mixins(mixins.LoadingMixin, ChartSpec
     this.updateData();
   }
 
+  get chartKey(): string | undefined {
+    if (this.fees) return undefined;
+    return `bar-chart-${this.currencySymbol}-rate-${this.exchangeRate}`;
+  }
+
+  get symbol(): string {
+    return this.fees ? XOR.symbol : this.currencySymbol;
+  }
+
   get title(): string {
     return this.fees ? 'Fees' : 'Volume';
   }
@@ -119,7 +129,9 @@ export default class StatsBarChart extends Mixins(mixins.LoadingMixin, ChartSpec
   }
 
   get amount(): AmountWithSuffix {
-    return formatAmountWithSuffix(this.total);
+    return this.fees
+      ? formatAmountWithSuffix(this.total) // fees are always in XOR
+      : formatAmountWithSuffix(this.total.mul(this.exchangeRate)); // amount is in currency
   }
 
   get priceChange(): FPNumber {
@@ -142,7 +154,7 @@ export default class StatsBarChart extends Mixins(mixins.LoadingMixin, ChartSpec
       yAxis: this.yAxisSpec({
         axisLabel: {
           formatter: (value) => {
-            const val = new FPNumber(value);
+            const val = new FPNumber(value).mul(this.exchangeRate);
             const { amount, suffix } = formatAmountWithSuffix(val);
             return `${amount} ${suffix}`;
           },
@@ -151,10 +163,13 @@ export default class StatsBarChart extends Mixins(mixins.LoadingMixin, ChartSpec
       tooltip: this.tooltipSpec({
         formatter: (params) => {
           const { data } = params[0];
-          const [timestamp, value] = data;
-          const amount = formatDecimalPlaces(value);
+          const [, value] = data; // [timestamp, value]
 
-          return this.fees ? `${amount} ${XOR.symbol}` : `$ ${amount}`;
+          if (this.fees) {
+            return `${formatDecimalPlaces(value)} ${XOR.symbol}`; // fees are always in XOR
+          }
+          const currencyAmount = new FPNumber(value).mul(this.exchangeRate);
+          return `${this.currencySymbol} ${formatDecimalPlaces(currencyAmount)}`; // amount is in currency
         },
       }),
       series: [

src/components/pages/Stats/SupplyChart.vue

@@ -98,6 +98,14 @@ export default class StatsSupplyChart extends Mixins(mixins.LoadingMixin, ChartS
     return this.parentLoading || this.loading;
   }
 
+  get selectTokenIcon(): Nullable<string> {
+    return !this.areActionsDisabled ? 'chevron-down-rounded-16' : undefined;
+  }
+
+  get tokenTabIndex(): number {
+    return !this.areActionsDisabled ? 0 : -1;
+  }
+
   get firstValue(): FPNumber {
     return new FPNumber(first(this.data)?.value ?? 0);
   }