Release 1.26.0 (sora-xor#1235)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "polkaswap-exchange-web",
-  "version": "1.25.1",
+  "version": "1.26.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/sora-xor/polkaswap-exchange-web.git"
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@metamask/detect-provider": "^2.0.0",
-    "@soramitsu/soraneo-wallet-web": "1.25.1",
+    "@soramitsu/soraneo-wallet-web": "1.26.4",
     "@walletconnect/ethereum-provider": "^2.10.4",
     "@walletconnect/modal": "^2.6.2",
     "core-js": "^3.33.2",

public/env.json

@@ -42,6 +42,8 @@
   "SUB_NETWORKS": {
     "Rococo": "wss://ws.relaychain-node-1.r1.dev.sora2.soramitsu.co.jp",
     "RococoSora": "wss://ws.parachain-collator-1.c1.dev.sora2.soramitsu.co.jp",
+    "Kusama": "wss://kusama-rpc.polkadot.io",
+    "KusamaSora": "wss://ws.parachain-collator-1.c1.sora2.soramitsu.co.jp",
     "Polkadot": "wss://rpc.polkadot.io"
   },
   "ETH_BRIDGE": {

src/components/App/Alerts/AlertList.vue

@@ -44,9 +44,9 @@ import { FPNumber } from '@sora-substrate/math';
 import { components, mixins } from '@soramitsu/soraneo-wallet-web';
 import { Component, Mixins } from 'vue-property-decorator';
 
-import { MAX_ALERTS_NUMBER } from '@/consts';
+import { MAX_ALERTS_NUMBER, ZeroStringValue } from '@/consts';
 import { getter, mutation, state } from '@/store/decorators';
-import { getDeltaPercent } from '@/utils';
+import { calcPriceChange, showMostFittingValue } from '@/utils';
 
 import type { AccountAsset } from '@sora-substrate/util/build/assets/types';
 import type { Alert, WhitelistIdsBySymbol } from '@soramitsu/soraneo-wallet-web/lib/types/common';
@@ -106,70 +106,20 @@ export default class AlertList extends Mixins(
   }
 
   getInfo(alert: Alert): string | undefined {
-    const desiredPrice = alert.price;
+    const desiredPrice = new FPNumber(alert.price);
     const asset = this.getAsset(this.whitelistIdsBySymbol[alert.token]);
-    const currentPrice = this.getFiatAmount('1', asset);
+    const currentPrice = FPNumber.fromCodecValue(this.getAssetFiatPrice(asset) ?? ZeroStringValue);
+    const priceChange = calcPriceChange(desiredPrice, currentPrice);
+    const priceChangeFormatted = priceChange.dp(2).toString();
+    const currentPriceFormatted = showMostFittingValue(currentPrice);
 
-    if (!currentPrice) return;
-
-    let deltaPercent = this.getDeltaPercentage(currentPrice, desiredPrice);
-    if (deltaPercent.includes('-')) {
-      deltaPercent = deltaPercent.replace('-', '- ');
-    } else {
-      deltaPercent = deltaPercent.replace('', '+ ');
-    }
-
-    return `${deltaPercent}% · ${this.t('alerts.currentPrice')}: $${this.showMostFittingValue(currentPrice)}`;
-  }
-
-  /**
-   * Returns formatted value in most suitable form
-   * @param value
-   *
-   * 0.152345 -> 0.15
-   * 0.000043 -> 0.000043
-   */
-  showMostFittingValue(value, precisionForLowCostAsset = 18) {
-    const [integer, decimal = '00'] = value.split(FPNumber.DELIMITERS_CONFIG.decimal);
-
-    if (parseInt(integer) > 0) {
-      return this.getFormattedValue(value, 2);
-    }
-
-    if (decimal && parseInt(decimal.substring(0, 2)) > 0) {
-      return this.getFormattedValue(value, 2);
-    }
-
-    return this.getFormattedValue(value, precisionForLowCostAsset);
-  }
-
-  getFormattedValue(value: string, precision = 18): string {
-    const [integer, decimal = '00'] = value.split(FPNumber.DELIMITERS_CONFIG.decimal);
-    return `${integer}.${decimal.substring(0, precision)}`;
+    return `${priceChangeFormatted}% · ${this.t('alerts.currentPrice')}: $${currentPriceFormatted}`;
   }
 
   getType(alert: Alert) {
     return alert.once ? this.t('alerts.once') : this.t('alerts.always');
   }
 
-  getDeltaPercentage(current: string, desired: string): string {
-    const desiredPrice = FPNumber.fromNatural(desired);
-    let currentPrice = FPNumber.fromNatural(current);
-
-    // if current price is zero, set minimal value for proper calculations
-    if (FPNumber.eq(currentPrice, FPNumber.ZERO)) {
-      currentPrice = FPNumber.fromNatural('0.0000001');
-    }
-
-    if (FPNumber.eq(desiredPrice, currentPrice)) {
-      return '0.00';
-    }
-
-    const percent = getDeltaPercent(desiredPrice, currentPrice);
-
-    return this.showMostFittingValue(percent.toLocaleString());
-  }
-
   handleCreateAlert(): void {
     if (!this.isNotificationsEnabledByUser()) return;
     this.$emit('create');

src/components/App/Alerts/CreateAlert.vue

@@ -70,16 +70,16 @@
 <script lang="ts">
 import { FPNumber } from '@sora-substrate/math';
 import { components, mixins } from '@soramitsu/soraneo-wallet-web';
-import { Component, Mixins, Prop } from 'vue-property-decorator';
+import { Component, Mixins, Prop, Watch } from 'vue-property-decorator';
 
 import { Components, MAX_ALERTS_NUMBER, ZeroStringValue } from '@/consts';
 import type { EditableAlertObject, NumberedAlert } from '@/consts';
 import { lazyComponent } from '@/router';
 import { getter, mutation, state } from '@/store/decorators';
 import { AlertFrequencyTabs, AlertTypeTabs } from '@/types/tabs';
-import { getDeltaPercent } from '@/utils';
+import { calcPriceChange, showMostFittingValue } from '@/utils';
 
-import type { AccountAsset, Asset, WhitelistIdsBySymbol } from '@sora-substrate/util/build/assets/types';
+import type { AccountAsset, WhitelistIdsBySymbol } from '@sora-substrate/util/build/assets/types';
 import type { Alert } from '@soramitsu/soraneo-wallet-web/lib/types/common';
 
 @Component({
@@ -101,7 +101,6 @@ export default class CreateAlert extends Mixins(
 ) {
   @state.wallet.settings.alerts alerts!: Array<Alert>;
 
-  @getter.assets.whitelistAssets assets!: Array<Asset>;
   @getter.assets.xor private xor!: AccountAsset;
   @getter.wallet.account.whitelistIdsBySymbol private whitelistIdsBySymbol!: WhitelistIdsBySymbol;
   @getter.assets.assetDataByAddress private getAsset!: (addr?: string) => AccountAsset;
@@ -111,11 +110,19 @@ export default class CreateAlert extends Mixins(
 
   @Prop({ default: null, type: Object }) readonly alertToEdit!: NumberedAlert;
 
+  @Watch('negativeDelta')
+  private updateChoise(value: boolean): void {
+    if (this.autoChoice) {
+      this.currentTypeTab = value ? AlertTypeTabs.Drop : AlertTypeTabs.Raise;
+    }
+
+    this.autoChoice = true;
+  }
+
   readonly delimiters = FPNumber.DELIMITERS_CONFIG;
 
   amount = '';
   asset = {} as AccountAsset;
-  negativeDelta = false;
   autoChoice = true;
 
   currentTypeTab: AlertTypeTabs = AlertTypeTabs.Drop;
@@ -124,71 +131,35 @@ export default class CreateAlert extends Mixins(
   readonly AlertFrequencyTabs = AlertFrequencyTabs;
   readonly AlertTypeTabs = AlertTypeTabs;
 
-  get deltaPercentage(): string {
-    const desiredPrice = FPNumber.fromNatural(this.amount);
-    const assetPrice = this.getAssetFiatPrice(this.asset) ?? ZeroStringValue;
-    let currentPrice = FPNumber.fromCodecValue(assetPrice);
-
-    // if current price is zero, set minimal value for proper calculations
-    if (FPNumber.eq(currentPrice, FPNumber.ZERO)) {
-      currentPrice = FPNumber.fromNatural('0.0000001');
-    }
-
-    if (FPNumber.eq(desiredPrice, currentPrice) || !this.amount) {
-      this.negativeDelta = false;
-      return '0.00';
-    }
+  get assetPrice(): FPNumber {
+    return FPNumber.fromCodecValue(this.getAssetFiatPrice(this.asset) ?? ZeroStringValue);
+  }
 
-    let percent = getDeltaPercent(desiredPrice, currentPrice);
-    this.negativeDelta = FPNumber.lt(percent, FPNumber.ZERO);
+  get priceChange(): FPNumber {
+    const price = FPNumber.fromNatural(this.amount);
+    const desired = price.isZero() ? this.assetPrice : price;
+    return calcPriceChange(desired, this.assetPrice);
+  }
 
-    if (this.negativeDelta) {
-      percent = percent.negative();
-      if (this.autoChoice) this.currentTypeTab = AlertTypeTabs.Drop;
-    } else {
-      if (this.autoChoice) this.currentTypeTab = AlertTypeTabs.Raise;
-    }
+  get negativeDelta(): boolean {
+    return FPNumber.lt(this.priceChange, FPNumber.ZERO);
+  }
 
-    this.autoChoice = true;
-    return this.showMostFittingValue(percent.toLocaleString());
+  get deltaPercentage(): string {
+    const value = this.negativeDelta ? this.priceChange.negative() : this.priceChange;
+    return showMostFittingValue(value);
   }
 
   get placeholder(): string {
-    return this.showMostFittingValue(this.fiatAmountValue);
+    return showMostFittingValue(this.assetPrice);
   }
 
   handleTabClick(): void {
     this.autoChoice = false;
   }
 
-  /**
-   * Returns formatted value in most suitable form
-   * @param value
-   *
-   * 0.152345 -> 0.15
-   * 0.000043 -> 0.000043
-   */
-  showMostFittingValue(value, precisionForLowCostAsset = 18) {
-    const [integer, decimal = '00'] = value.split(FPNumber.DELIMITERS_CONFIG.decimal);
-
-    if (parseInt(integer) > 0) {
-      return this.getFormattedValue(value, 2);
-    }
-
-    if (decimal && parseInt(decimal.substring(0, 2)) > 0) {
-      return this.getFormattedValue(value, 2);
-    }
-
-    return this.getFormattedValue(value, precisionForLowCostAsset);
-  }
-
-  getFormattedValue(value: string, precision = 18): string {
-    const [integer, decimal = '00'] = value.split(FPNumber.DELIMITERS_CONFIG.decimal);
-    return `${integer}.${decimal.substring(0, precision)}`;
-  }
-
-  get fiatAmountValue() {
-    return this.getFiatAmount('1', this.asset) || '';
+  get fiatAmountValue(): string {
+    return this.assetPrice.toLocaleString();
   }
 
   get btnDisabled(): boolean {
@@ -199,7 +170,7 @@ export default class CreateAlert extends Mixins(
     return this.alertToEdit !== null;
   }
 
-  activeSignClass(sign): string {
+  activeSignClass(sign: string): string {
     if (sign === '+' && this.negativeDelta) return 'delta-percent--not-active';
     if (sign === '-' && !this.negativeDelta) return 'delta-percent--not-active';
     return '';

src/components/App/Menu/AppInfoPopper.vue

@@ -96,12 +96,7 @@ export default class AppInfoPopper extends Mixins(TranslationMixin, mixins.Loadi
 $popper-mix-width: 170px;
 
 .app-info-popper.el-popover.el-popper {
-  background: var(--s-color-utility-body);
-  border-color: var(--s-color-base-border-secondary);
-  border-radius: var(--s-border-radius-mini);
-  box-shadow: var(--s-shadow-dialog);
-  color: var(--s-color-base-content-primary);
-  padding: $inner-spacing-medium;
+  @include popper-content;
   min-width: $popper-mix-width;
 }
 

src/components/mixins/BridgeHistoryMixin.ts

@@ -12,10 +12,10 @@ import type { IBridgeTransaction } from '@sora-substrate/util';
 @Component
 export default class BridgeHistoryMixin<T extends IBridgeTransaction> extends Mixins(mixins.LoadingMixin) {
   @getter.bridge.history history!: Record<string, T>;
+  @getter.bridge.networkHistoryLoading networkHistoryLoading!: boolean;
 
   @state.wallet.settings.networkFees networkFees!: NetworkFeesObject;
   @state.router.prev prevRoute!: Nullable<PageNames>;
-  @state.bridge.historyLoading historyLoading!: boolean;
 
   @mutation.bridge.setSoraToEvm setSoraToEvm!: (value: boolean) => void;
   @mutation.bridge.setHistoryPage setHistoryPage!: (historyPage?: number) => void;