Whitelist usage rationalization (#1234)

* refactoring whitelist usage; fix explore demeter colums

* add DataRowSkeleton component

* fix price alert price change

package.json

@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@metamask/detect-provider": "^2.0.0",
-    "@soramitsu/soraneo-wallet-web": "1.26.3",
+    "@soramitsu/soraneo-wallet-web": "1.26.4",
     "@walletconnect/ethereum-provider": "^2.10.4",
     "@walletconnect/modal": "^2.6.2",
     "core-js": "^3.33.2",

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/mixins/SelectedTokensRouteMixin.ts

@@ -1,10 +1,9 @@
-import { XSTUSD, XOR, XST } from '@sora-substrate/util/build/assets/consts';
+import { XSTUSD, XOR } from '@sora-substrate/util/build/assets/consts';
 import { WALLET_TYPES, api } from '@soramitsu/soraneo-wallet-web';
 import { Component, Vue } from 'vue-property-decorator';
 
 import { PageNames } from '@/consts';
 import { getter } from '@/store/decorators';
-import { syntheticAssetRegexp } from '@/utils/regexp';
 
 import type { AccountAsset, Asset, Whitelist } from '@sora-substrate/util/build/assets/types';
 import type { NavigationGuardNext, Route } from 'vue-router';
@@ -15,7 +14,7 @@ const MAX_SYMBOL_LENGTH = 7;
 export default class SelectedTokenRouteMixin extends Vue {
   @getter.wallet.account.whitelist private whitelist!: Whitelist;
   @getter.wallet.account.whitelistIdsBySymbol private whitelistIdsBySymbol!: WALLET_TYPES.WhitelistIdsBySymbol;
-  @getter.assets.assetsDataTable private assetsDataTable!: Record<string, Asset>;
+  @getter.wallet.account.assetsDataTable private assetsDataTable!: WALLET_TYPES.AssetsTable;
 
   private wasRedirected = false;
 

src/components/pages/Moonpay/BridgeInitMixin.ts

@@ -14,11 +14,11 @@ import type { MoonpayTransaction } from '@/utils/moonpay';
 import { MoonpayEVMTransferAssetData, MoonpayApi } from '@/utils/moonpay';
 
 import type { CodecString } from '@sora-substrate/util';
-import type { Asset, AccountBalance } from '@sora-substrate/util/build/assets/types';
+import type { AccountAsset, AccountBalance } from '@sora-substrate/util/build/assets/types';
 import type { EthHistory } from '@sora-substrate/util/build/bridgeProxy/eth/types';
 import type { EvmNetwork } from '@sora-substrate/util/build/bridgeProxy/evm/types';
 import type { BridgeNetworkId } from '@sora-substrate/util/build/bridgeProxy/types';
-import type { WALLET_CONSTS } from '@soramitsu/soraneo-wallet-web';
+import type { WALLET_CONSTS, WALLET_TYPES } from '@soramitsu/soraneo-wallet-web';
 
 const createError = (text: string, notification: MoonpayNotifications) => {
   const error = new Error(text);
@@ -35,7 +35,7 @@ export default class MoonpayBridgeInitMixin extends Mixins(BridgeHistoryMixin, W
   @state.assets.registeredAssets private registeredAssets!: Record<string, BridgeRegisteredAsset>;
 
   @getter.settings.moonpayApiKey moonpayApiKey!: string;
-  @getter.assets.assetsDataTable assetsDataTable!: Record<string, Asset>;
+  @getter.assets.assetDataByAddress getAsset!: (addr?: string) => AccountAsset;
 
   @mutation.moonpay.setConfirmationVisibility setConfirmationVisibility!: (flag: boolean) => void;
   @mutation.moonpay.setNotificationVisibility setNotificationVisibility!: (flag: boolean) => void;
@@ -161,7 +161,7 @@ export default class MoonpayBridgeInitMixin extends Mixins(BridgeHistoryMixin, W
       }
 
       const accountAsset = {
-        ...this.assetsDataTable[soraAddress],
+        ...this.getAsset(soraAddress),
         balance: {} as AccountBalance,
         externalBalance,
         externalAddress: registeredAsset.address,

src/components/pages/Moonpay/Confirmation.vue

@@ -45,7 +45,6 @@ export default class MoonpayConfirmation extends Mixins(MoonpayBridgeInitMixin)
   @state.moonpay.confirmationVisibility private confirmationVisibility!: boolean;
 
   @getter.libraryTheme libraryTheme!: Theme;
-  @getter.assets.assetDataByAddress public getAsset!: (addr?: string) => Nullable<RegisteredAccountAsset>;
 
   get visibility(): boolean {
     return this.confirmationVisibility;

src/components/pages/Stats/SupplyChart.vue

@@ -32,7 +32,7 @@
       <price-change :value="priceChange" />
       <v-chart ref="chart" class="chart" :option="chartSpec" autoresize />
     </chart-skeleton>
-    <select-token disabled-custom :visible.sync="showSelectTokenDialog" :asset="token" @select="changeToken" />
+    <select-token :visible.sync="showSelectTokenDialog" :asset="token" @select="changeToken" />
   </stats-card>
 </template>
 

src/components/shared/SelectAsset/SelectToken.vue

@@ -206,7 +206,7 @@ export default class SelectToken extends Mixins(TranslationMixin, SelectAssetMix
   private get mainLPSources(): Array<Asset> {
     const mainSourceAddresses = api.dex.poolBaseAssetsIds;
 
-    return this.whitelistAssets.filter((asset) => mainSourceAddresses.includes(asset.address));
+    return this.assets.filter((asset) => mainSourceAddresses.includes(asset.address));
   }
 
   async handleAddAsset(): Promise<void> {

src/components/shared/Skeleton/DataRow.vue

@@ -0,0 +1,52 @@
+<template>
+  <s-skeleton :loading="loading" animated>
+    <template #template>
+      <div class="data-row-skeleton">
+        <s-skeleton-item v-if="rect" element="rect" />
+        <s-skeleton-item v-if="circle" element="circle" />
+      </div>
+    </template>
+    <slot />
+  </s-skeleton>
+</template>
+
+<script lang="ts">
+import { SSkeleton, SSkeletonItem } from '@soramitsu/soramitsu-js-ui/lib/components/Skeleton';
+import { Component, Prop, Vue } from 'vue-property-decorator';
+
+@Component({
+  components: {
+    SSkeleton,
+    SSkeletonItem,
+  },
+})
+export default class DataRowSkeleton extends Vue {
+  @Prop({ default: true, type: Boolean }) readonly loading!: boolean;
+  @Prop({ default: false, type: Boolean }) readonly rect!: boolean;
+  @Prop({ default: false, type: Boolean }) readonly circle!: boolean;
+}
+</script>
+
+<style lang="scss">
+$size: 20px;
+
+.data-row-skeleton {
+  display: flex;
+  align-items: center;
+  gap: $inner-spacing-tiny;
+
+  & > .el-skeleton__item {
+    &:not(:last-child) {
+      margin: 0;
+    }
+    &.el-skeleton__rect {
+      height: $size;
+    }
+    &.el-skeleton__circle {
+      flex-shrink: 0;
+      height: $size;
+      width: $size;
+    }
+  }
+}
+</style>

src/consts/index.ts

@@ -249,6 +249,7 @@ export enum Components {
   StatsFilter = 'shared/Stats/StatsFilter',
   // Shared Chart
   ChartSkeleton = 'shared/Chart/ChartSkeleton',
+  DataRowSkeleton = 'shared/Skeleton/DataRow',
 }
 
 export enum RewardsTabsItems {