Add synthetic switcher to select asset

src/components/App/Alerts/CreateAlert.vue

@@ -79,7 +79,7 @@ import { FPNumber } from '@sora-substrate/math';
 import { components, mixins } from '@soramitsu/soraneo-wallet-web';
 import { Component, Mixins, Prop } from 'vue-property-decorator';
 
-import { Components, MAX_ALERTS_NUMBER } from '@/consts';
+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';
@@ -132,7 +132,8 @@ export default class CreateAlert extends Mixins(
 
   get deltaPercentage(): string {
     const desiredPrice = FPNumber.fromNatural(this.amount);
-    let currentPrice = FPNumber.fromNatural(this.fiatAmountValue);
+    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)) {

src/components/shared/SelectAsset/SelectToken.vue

@@ -10,7 +10,9 @@
         class="token-search"
       />
 
-      <s-tab :label="t('selectToken.assets.title')" name="assets" />
+      <s-tab :label="t('selectToken.assets.title')" name="assets">
+        <synthetic-switcher v-model="isSynthsOnly" class="token-synthetic-switcher" />
+      </s-tab>
 
       <s-tab :disabled="disabledCustom" :label="t('selectToken.custom.title')" name="custom" class="asset-select__info">
         <template v-if="customAsset">
@@ -54,7 +56,7 @@
 </template>
 
 <script lang="ts">
-import { XOR, XSTUSD, XST } from '@sora-substrate/util/build/assets/consts';
+import { XOR } from '@sora-substrate/util/build/assets/consts';
 import { api, mixins, components, WALLET_TYPES } from '@soramitsu/soraneo-wallet-web';
 import first from 'lodash/fp/first';
 import { Component, Mixins, Prop, Watch } from 'vue-property-decorator';
@@ -90,6 +92,7 @@ function getNonWhitelistDivisibleAssets<T extends Asset | AccountAsset>(
   components: {
     DialogBase: components.DialogBase,
     SelectAssetList: lazyComponent(Components.SelectAssetList),
+    SyntheticSwitcher: lazyComponent(Components.SyntheticSwitcher),
     TokenAddress: components.TokenAddress,
     SearchInput: components.SearchInput,
     AddAssetDetailsCard: components.AddAssetDetailsCard,
@@ -99,6 +102,7 @@ export default class SelectToken extends Mixins(TranslationMixin, SelectAssetMix
   readonly tokenTabs = [Tabs.Assets, Tabs.Custom];
 
   tabValue = first(this.tokenTabs);
+  isSynthsOnly = false;
 
   @Prop({ default: false, type: Boolean }) readonly connected!: boolean;
   @Prop({ default: ObjectInit, type: Object }) readonly asset!: Nullable<Asset>;
@@ -135,18 +139,20 @@ export default class SelectToken extends Mixins(TranslationMixin, SelectAssetMix
 
   get whitelistAssetsList(): Array<AccountAsset> {
     let whiteList: Array<Asset> = [];
+
     if (this.isAddLiquidity) {
       whiteList = this.isFirstTokenSelected
         ? this.mainLPSources
-        : this.whitelistAssets.filter((asset) => {
-            if (this.asset?.address === XSTUSD.address && asset.address === XOR.address) {
-              return false; // XSTUSD-XOR isn't allowed
-            }
-            return true;
-          });
+        : // XOR could be only as base asset
+          this.whitelistAssets.filter((asset) => asset.address !== XOR.address);
     } else {
       whiteList = this.whitelistAssets;
     }
+
+    if (this.isSynthsOnly) {
+      whiteList = whiteList.filter((asset) => syntheticAssetRegexp.test(asset.address));
+    }
+
     const assetsAddresses = whiteList.map((asset) => asset.address);
     const excludeAddress = this.asset?.address;
 
@@ -196,7 +202,7 @@ export default class SelectToken extends Mixins(TranslationMixin, SelectAssetMix
   }
 
   private get mainLPSources(): Array<Asset> {
-    const mainSourceAddresses = [XOR.address, XSTUSD.address];
+    const mainSourceAddresses = api.dex.poolBaseAssetsIds;
 
     return this.whitelistAssets.filter((asset) => mainSourceAddresses.includes(asset.address));
   }
@@ -245,6 +251,10 @@ export default class SelectToken extends Mixins(TranslationMixin, SelectAssetMix
   @include focus-outline($withOffset: true);
 }
 
+.token-synthetic-switcher {
+  margin: 0 $inner-spacing-big $inner-spacing-medium;
+}
+
 .token-list_text {
   font-weight: 800;
 }

src/components/shared/SyntheticSwitcher.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="switcher">
+    <s-switch v-model="model" />
+    <span>
+      {{ t('explore.showOnly') }}
+      <external-link default-class="p3" :title="t('explore.synthetics')" :href="SYNTHS_LINK" />
+    </span>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, ModelSync } from 'vue-property-decorator';
+
+import TranslationMixin from '@/components/mixins/TranslationMixin';
+import { Components } from '@/consts';
+import { lazyComponent } from '@/router';
+
+@Component({
+  components: {
+    ExternalLink: lazyComponent(Components.ExternalLink),
+  },
+})
+export default class SyntheticSwitcher extends Mixins(TranslationMixin) {
+  @ModelSync('value', 'input', { type: Boolean })
+  readonly model!: boolean;
+
+  readonly SYNTHS_LINK =
+    'https://medium.com/polkaswap/unveiling-synthetic-assets-a-game-changer-in-the-financial-landscape-1720e5858422';
+}
+</script>
+
+<style lang="scss" scoped>
+.switcher {
+  display: flex;
+  align-items: center;
+
+  & > span {
+    margin-left: $inner-spacing-small;
+  }
+}
+</style>

src/consts/index.ts

@@ -223,6 +223,7 @@ export enum Components {
   TransactionDetails = 'shared/TransactionDetails',
   PoolInfo = 'shared/PoolInfo',
   Widget = 'shared/Widget',
+  SyntheticSwitcher = 'shared/SyntheticSwitcher',
   // Shared Buttons
   SortButton = 'shared/Button/SortButton',
   SvgIconButton = 'shared/Button/SvgIconButton/SvgIconButton',

src/views/Explore/Tokens.vue

@@ -1,12 +1,6 @@
 <template>
   <div>
-    <div class="switcher">
-      <s-switch v-model="isSynthsOnly" />
-      <span>
-        {{ t('explore.showOnly') }}
-        <external-link default-class="p3" :title="t('explore.synthetics')" :href="SYNTHS_LINK" />
-      </span>
-    </div>
+    <synthetic-switcher v-model="isSynthsOnly" />
     <s-table
       ref="table"
       v-loading="loadingState"
@@ -287,7 +281,7 @@ const parse = (item: AssetData): Record<string, TokenData> => {
 
 @Component({
   components: {
-    ExternalLink: lazyComponent(Components.ExternalLink),
+    SyntheticSwitcher: lazyComponent(Components.SyntheticSwitcher),
     PriceChange: lazyComponent(Components.PriceChange),
     SortButton: lazyComponent(Components.SortButton),
     TokenAddress: components.TokenAddress,
@@ -298,8 +292,6 @@ const parse = (item: AssetData): Record<string, TokenData> => {
 })
 export default class Tokens extends Mixins(ExplorePageMixin, TranslationMixin) {
   private readonly DAY = 60 * 60 * 24;
-  readonly SYNTHS_LINK =
-    'https://medium.com/polkaswap/unveiling-synthetic-assets-a-game-changer-in-the-financial-landscape-1720e5858422';
 
   @getter.assets.whitelistAssets private whitelistAssets!: Array<Asset>;
 
@@ -401,14 +393,3 @@ export default class Tokens extends Mixins(ExplorePageMixin, TranslationMixin) {
 <style lang="scss">
 @include explore-table;
 </style>
-
-<style lang="scss" scoped>
-.switcher {
-  display: flex;
-  align-items: center;
-
-  & > span {
-    margin-left: $inner-spacing-small;
-  }
-}
-</style>