Merge pull request #1600 from sora-xor/release/1.44.0

Release 1.44.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "polkaswap-exchange-web",
-  "version": "1.43.1",
+  "version": "1.44.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/sora-xor/polkaswap-exchange-web.git"
@@ -30,7 +30,7 @@
   "dependencies": {
     "@cedelabs/widgets-universal": "^1.3.1",
     "@metamask/detect-provider": "^2.0.0",
-    "@soramitsu/soraneo-wallet-web": "1.43.5",
+    "@soramitsu/soraneo-wallet-web": "1.44.1",
     "@walletconnect/ethereum-provider": "^2.13.3",
     "@walletconnect/modal": "^2.6.2",
     "country-code-emoji": "^2.3.0",

src/App.vue

@@ -121,7 +121,6 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
   @state.settings.browserNotifPopupBlockedVisibility private browserNotifPopupBlocked!: boolean;
   @state.settings.isOrientationWarningVisible private orientationWarningVisible!: boolean;
   @state.settings.isThemePreference isThemePreference!: boolean;
-  @state.settings.featureFlags private featureFlags!: FeatureFlags;
   @state.settings.isTMA isTMA!: boolean;
   @state.wallet.account.assetsToNotifyQueue private assetsToNotifyQueue!: Array<WhitelistArrayItem>;
   @state.referrals.storageReferrer private storageReferrer!: string;

src/components/mixins/IndexerDataFetchMixin.ts

@@ -1,21 +1,27 @@
 import { mixins, WALLET_CONSTS } from '@soramitsu/soraneo-wallet-web';
 import isEqual from 'lodash/fp/isEqual';
-import { Component, Mixins } from 'vue-property-decorator';
+import { Component, Mixins, Watch } from 'vue-property-decorator';
 
 import { type FetchVariables } from '@/types/indexers';
 import { debouncedInputHandler } from '@/utils';
 
 @Component
 export default class IndexerDataFetchMixin extends Mixins(mixins.LoadingMixin, mixins.PaginationSearchMixin) {
   totalCount = 0;
-  items: any[] = [];
+  items: readonly any[] = [];
+
+  pageAmount = 5;
+  fetchAmount = 5;
 
-  intervalTimestamp = 0;
   private interval: Nullable<ReturnType<typeof setInterval>> = null;
   private updateItems = debouncedInputHandler(this.updateData, 250, { leading: false });
 
   updateInterval = 24_000; // 4 blocks
 
+  get intervalTimestamp(): number {
+    return Math.floor(this.getItemTimestamp(this.items[0]) / 1000);
+  }
+
   get loadingState(): boolean {
     return this.parentLoading || this.loading;
   }
@@ -37,6 +43,23 @@ export default class IndexerDataFetchMixin extends Mixins(mixins.LoadingMixin, m
     return {};
   }
 
+  get fetchPage(): number {
+    return Math.ceil((this.pageAmount * this.currentPage) / this.fetchAmount);
+  }
+
+  get visibleItems(): any[] {
+    const offset = this.fetchAmount * (this.fetchPage - 1);
+    const start = this.pageAmount * (this.currentPage - 1) - offset;
+    const end = start + this.pageAmount;
+
+    return this.items.slice(start, end);
+  }
+
+  @Watch('fetchPage')
+  private checkPageToLoad(): void {
+    this.updateItems();
+  }
+
   checkTriggerUpdate(current: any, prev: any) {
     if (!isEqual(current)(prev)) {
       this.resetPage();
@@ -55,11 +78,6 @@ export default class IndexerDataFetchMixin extends Mixins(mixins.LoadingMixin, m
     return 0;
   }
 
-  async onPaginationClick(button: WALLET_CONSTS.PaginationButton): Promise<void> {
-    this.handlePaginationClick(button);
-    this.updateItems();
-  }
-
   public handlePaginationClick(button: WALLET_CONSTS.PaginationButton): void {
     let current = 1;
 
@@ -83,8 +101,7 @@ export default class IndexerDataFetchMixin extends Mixins(mixins.LoadingMixin, m
 
     await this.fetchData();
 
-    if (this.currentPage === 1) {
-      this.updateIntervalTimestamp();
+    if (this.fetchPage === 1) {
       this.subscribeOnData();
     }
   }
@@ -98,21 +115,16 @@ export default class IndexerDataFetchMixin extends Mixins(mixins.LoadingMixin, m
     await this.withLoading(async () => {
       await this.withParentLoading(async () => {
         const { totalCount, items } = await this.requestData(this.dataVariables);
+        this.items = Object.freeze([...items]);
         this.totalCount = totalCount;
-        this.items = items;
       });
     });
   }
 
   private async fetchDataUpdates(): Promise<void> {
     const { items, totalCount } = await this.requestData(this.updateVariables);
-    this.items = [...items, ...this.items].slice(0, this.pageAmount);
+    this.items = Object.freeze([...items, ...this.items].slice(0, this.fetchAmount));
     this.totalCount = this.totalCount + totalCount;
-    this.updateIntervalTimestamp();
-  }
-
-  private updateIntervalTimestamp(): void {
-    this.intervalTimestamp = Math.floor(this.getItemTimestamp(this.items[0]) / 1000);
   }
 
   private subscribeOnData(): void {

src/components/mixins/NetworkFormatterMixin.ts

@@ -10,8 +10,7 @@ import { state, getter } from '@/store/decorators';
 import type { AvailableNetwork } from '@/store/web3/types';
 import type { NetworkData } from '@/types/bridge';
 import { getSubstrateExplorerLinks } from '@/utils';
-import { isOutgoingTransaction } from '@/utils/bridge/common/utils';
-import { isUnsignedToPart } from '@/utils/bridge/eth/utils';
+import { isOutgoingTransaction, isWaitingForAction } from '@/utils/bridge/common/utils';
 
 import TranslationMixin from './TranslationMixin';
 
@@ -228,7 +227,7 @@ export default class NetworkFormatterMixin extends Mixins(TranslationMixin) {
   isWaitingForAction(item: Nullable<IBridgeTransaction>): boolean {
     if (!item) return false;
     // ETH
-    return item.transactionState === ETH_BRIDGE_STATES.EVM_REJECTED && isUnsignedToPart(item);
+    return isWaitingForAction(item);
   }
 
   formatDatetime(item: Nullable<IBridgeTransaction>): string {

src/components/pages/Bridge/NetworkSelector.vue

@@ -0,0 +1,39 @@
+<template>
+  <swap-status-action-badge>
+    <template #value>
+      {{ selectedNetworkShortName }}
+    </template>
+    <template #action>
+      <s-button
+        class="el-button--settings"
+        type="action"
+        icon="basic-settings-24"
+        :tooltip="t('bridge.selectNetwork')"
+        tooltip-placement="bottom-end"
+        @click="handleChangeNetwork"
+      />
+    </template>
+  </swap-status-action-badge>
+</template>
+
+<script lang="ts">
+import { Component, Mixins } from 'vue-property-decorator';
+
+import NetworkFormatterMixin from '@/components/mixins/NetworkFormatterMixin';
+import { Components } from '@/consts';
+import { lazyComponent } from '@/router';
+import { mutation } from '@/store/decorators';
+
+@Component({
+  components: {
+    SwapStatusActionBadge: lazyComponent(Components.SwapStatusActionBadge),
+  },
+})
+export default class BridgeNetworkSelector extends Mixins(NetworkFormatterMixin) {
+  @mutation.web3.setSelectNetworkDialogVisibility private setSelectNetworkDialogVisibility!: (flag: boolean) => void;
+
+  handleChangeNetwork(): void {
+    this.setSelectNetworkDialogVisibility(true);
+  }
+}
+</script>

src/components/pages/OrderBook/Popovers/PairListPopover.vue

@@ -18,7 +18,7 @@
       :highlight-current-row="false"
       @row-click="chooseBook"
     >
-      <s-table-column width="178">
+      <s-table-column width="184">
         <template #header>
           <span>{{ t('orderBook.tokenPair') }}</span>
         </template>
@@ -29,7 +29,7 @@
           </div>
         </template>
       </s-table-column>
-      <s-table-column width="90">
+      <s-table-column width="130">
         <template #header>
           <span>{{ t('priceText') }}</span>
         </template>
@@ -45,15 +45,15 @@
           <formatted-amount :value="row.volume" is-fiat-value />
         </template>
       </s-table-column>
-      <s-table-column width="140">
+      <s-table-column width="100">
         <template #header>
-          <span>{{ t('orderBook.tradingPair.dailyChange') }}</span>
+          <span>1D %</span>
         </template>
         <template v-slot="{ row }">
           <price-change :value="row.priceChange" />
         </template>
       </s-table-column>
-      <s-table-column>
+      <s-table-column width="176">
         <template #header>
           <span>{{ t('orderBook.tradingPair.status') }}</span>
         </template>
@@ -92,12 +92,14 @@ import type { OrderBook, OrderBookId } from '@sora-substrate/liquidity-proxy';
 import type { AccountAsset } from '@sora-substrate/sdk/build/assets/types';
 
 interface BookFields {
+  id: OrderBookId;
   pair: string;
   baseAsset?: Nullable<AccountAsset>;
   targetAsset?: Nullable<AccountAsset>;
-  price?: string;
-  priceChange?: FPNumber;
-  volume?: string;
+  price: string;
+  priceChange: FPNumber;
+  volumeNumber: number;
+  volume: string;
   status: string;
 }
 
@@ -114,12 +116,11 @@ export default class PairListPopover extends Mixins(
   mixins.LoadingMixin,
   mixins.FormattedAmountMixin
 ) {
-  @state.orderBook.orderBooks orderBooks!: Record<string, OrderBook>;
-  @state.orderBook.orderBooksStats orderBooksStats!: Record<string, OrderBookStats>;
+  @state.orderBook.orderBooks private orderBooks!: Record<string, OrderBook>;
+  @state.orderBook.orderBooksStats private orderBooksStats!: Record<string, OrderBookStats>;
 
-  @getter.assets.assetDataByAddress getAsset!: (addr?: string) => Nullable<AccountAsset>;
-
-  @mutation.orderBook.setCurrentOrderBook setCurrentOrderBook!: (orderBookId: OrderBookId) => void;
+  @getter.assets.assetDataByAddress private getAsset!: (addr?: string) => Nullable<AccountAsset>;
+  @mutation.orderBook.setCurrentOrderBook private setCurrentOrderBook!: (id: OrderBookId) => void;
 
   getTooltipText(status: OrderBookStatus): string {
     switch (status) {
@@ -136,8 +137,8 @@ export default class PairListPopover extends Mixins(
     }
   }
 
-  chooseBook(row): void {
-    this.setCurrentOrderBook(row.orderBookId);
+  chooseBook(row: BookFields): void {
+    this.setCurrentOrderBook(row.id);
     this.$emit('close');
   }
 
@@ -148,20 +149,33 @@ export default class PairListPopover extends Mixins(
       if (!orderBookId) return buffer;
       const { base, quote } = value.orderBookId;
       const decimals = getBookDecimals(value);
-      const price = this.orderBooksStats[orderBookId]?.price ?? FPNumber.ZERO;
+      const price = (this.orderBooksStats[orderBookId]?.price ?? FPNumber.ZERO).dp(decimals);
       const priceChange = this.orderBooksStats[orderBookId]?.priceChange ?? FPNumber.ZERO;
       const volume = this.orderBooksStats[orderBookId]?.volume ?? FPNumber.ZERO;
-      const row = {
-        orderBookId: value.orderBookId,
-        baseAsset: this.getAsset(base),
-        targetAsset: this.getAsset(quote),
-        pair: `${this.getAsset(base)?.symbol}-${this.getAsset(quote)?.symbol}`,
+      const baseAsset = this.getAsset(base);
+      const targetAsset = this.getAsset(quote);
+      const row: BookFields = {
+        id: value.orderBookId,
+        baseAsset,
+        targetAsset,
+        pair: `${baseAsset?.symbol}-${targetAsset?.symbol}`,
         status: value.status,
-        price: price.dp(decimals).toLocaleString(),
+        price: price.toLocaleString(),
         priceChange,
+        volumeNumber: volume.toNumber(),
         volume: volume.toLocaleString(),
       };
-      buffer.push(row);
+      const index = buffer.findIndex(
+        (item) =>
+          row.status > item.status ||
+          (row.status === item.status && row.id.dexId > item.id.dexId) ||
+          (row.status === item.status && row.id.dexId === item.id.dexId && row.volumeNumber > item.volumeNumber)
+      );
+      if (index !== -1) {
+        buffer.splice(index, 0, row);
+      } else {
+        buffer.push(row);
+      }
       return buffer;
     }, []);
   }