PSS-74 Swap Interface Integration

package.json

@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@soramitsu/soramitsu-js-ui": "^0.6.7",
-    "@soramitsu/soraneo-wallet-web": "^0.2.7",
+    "@soramitsu/soraneo-wallet-web": "^0.2.9",
     "axios": "^0.19.2",
     "bignumber.js": "^9.0.1",
     "core-js": "^3.6.4",

src/App.vue

@@ -20,15 +20,18 @@
           {{ t(`mainMenu.${item}`) }}
         </s-menu-item>
       </s-menu>
-      <s-button class="polkaswap-logo" type="link" @click="goTo(PageNames.About)" />
+      <s-button class="polkaswap-logo" type="link" @click="goTo(PageNames.Exchange)" />
       <div class="buttons">
         <s-button class="wallet" type="action" icon="wallet" rounded :disabled="loading" @click="goTo(PageNames.Wallet)" />
         <s-button type="action" icon="settings" rounded @click="openSettingsDialog" />
         <!-- TODO: The button is hidden because we don't have a Search page right now -->
         <!-- <s-button type="action" icon="search" rounded /> -->
       </div>
     </header>
-    <div class="app-content"><router-view /></div>
+    <div class="app-content">
+      <!-- TODO 4 alexnatalia: We should have this loader only for appropriate pages. Play with it a bit more -->
+      <router-view v-loading="loading" />
+    </div>
     <settings :visible.sync="showSettings" />
   </div>
 </template>
@@ -235,7 +238,6 @@ $menu-height: 65px;
     font-size: var(--s-heading4-font-size);
     letter-spacing: $s-letter-spacing-small;
     font-feature-settings: $s-font-feature-settings-title;
-    &,
     &.is-active:hover {
       color: var(--s-color-theme-accent-hover) !important;
     }

src/components/ConfirmRemoveLiquidity.vue

@@ -73,15 +73,15 @@ export default class ConfirmSwap extends Mixins(TranslationMixin, DialogMixin) {
   formatNumber = formatNumber
 
   get formattedFromValue (): string {
-    return formatNumber(this.firstTokenAmount, 4)
+    return formatNumber(this.firstTokenAmount)
   }
 
   get formattedToValue (): string {
-    return formatNumber(this.secondTokenAmount, 4)
+    return formatNumber(this.secondTokenAmount)
   }
 
   get formattedLiquidityValue (): string {
-    return formatNumber(this.liquidityAmount, 4)
+    return formatNumber(this.liquidityAmount)
   }
 
   handleConfirmRemoveLiquidity (): void {

src/components/ConfirmSwap.vue

@@ -41,6 +41,7 @@ import DialogBase from '@/components/DialogBase.vue'
 import { formatNumber } from '@/utils'
 import { lazyComponent } from '@/router'
 import { Components } from '@/consts'
+import { dexApi } from '@soramitsu/soraneo-wallet-web'
 
 @Component({
   components: {
@@ -56,11 +57,11 @@ export default class ConfirmSwap extends Mixins(TranslationMixin, DialogMixin) {
   @Getter toValue!: number
 
   get formattedFromValue (): string {
-    return formatNumber(this.fromValue, 4)
+    return formatNumber(this.fromValue)
   }
 
   get formattedToValue (): string {
-    return formatNumber(this.toValue, 4)
+    return formatNumber(this.toValue)
   }
 
   handleConfirmSwap (): void {

src/components/Pool.vue

@@ -1,13 +1,14 @@
 <template>
   <div class="el-form--pool">
     <!-- TODO: Add appropriate tooltip -->
-    <generic-header class="header--pool" :has-button-back="false" :title="t('pool.yourLiquidity')" :tooltip="t('pool.loremIpsum')" />
+    <generic-header class="header--pool" :has-button-back="false" :title="t('pool.yourLiquidity')" :tooltip="t('pool.description')" />
     <p v-if="!connected" class="pool-info-container">
       {{ t('pool.connectToWallet') }}
     </p>
     <p v-else-if="!liquidities || !liquidities.length" class="pool-info-container">
       {{ t('pool.liquidityNotFound') }}
     </p>
+    <!-- TODO 4 alexnatalia: Whole pool area should be clickable -->
     <s-collapse v-else class="pool-list" :borders="true">
       <s-collapse-item v-for="liquidity of liquidities" :key="liquidity.id" :name="liquidity.id" class="pool-info-container">
         <template #title>
@@ -83,7 +84,7 @@ export default class Pool extends Mixins(TranslationMixin) {
 
   get pairValue (): string {
     // TODO: Play with Pair value
-    return formatNumber(10.00000171, 4)
+    return formatNumber(10.00000171)
   }
 
   handleAddLiquidity (): void {

src/components/SelectToken.vue

@@ -17,13 +17,8 @@
         <s-col>
           <s-row flex justify="start" align="middle">
             <token-logo :token="token" />
-            <div>
-              <div v-if="checkAsset(token.symbol)" class="token-item__name">
-                {{ t(`assetNames.${token.symbol}`) }} ({{ token.symbol }})
-              </div>
-              <div v-else class="token-item__name">
-                {{ token.symbol }}
-              </div>
+            <div class="token-item__name">
+              {{ getTokenName(token.symbol) }}
             </div>
           </s-row>
         </s-col>
@@ -40,17 +35,16 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Prop } from 'vue-property-decorator'
 import { Action, Getter } from 'vuex-class'
-import { KnownAssets, KnownSymbols } from '@sora-substrate/util'
 
 import TranslationMixin from '@/components/mixins/TranslationMixin'
 import DialogMixin from '@/components/mixins/DialogMixin'
+import LoadingMixin from '@/components/mixins/LoadingMixin'
 import DialogBase from '@/components/DialogBase.vue'
 import { Token } from '@/types'
 import { LogoSize, Components } from '@/consts'
 import { lazyComponent } from '@/router'
-import LoadingMixin from './mixins/LoadingMixin'
 
 const namespace = 'assets'
 
@@ -64,21 +58,26 @@ export default class SelectToken extends Mixins(TranslationMixin, DialogMixin, L
   query = ''
   selectedToken: Token | null = null
 
+  @Prop({ default: () => null, type: Object }) readonly asset!: Token
+
   @Getter('assets', { namespace }) assets!: Array<Token>
   @Action('getAssets', { namespace }) getAssets
 
+  get assetsList (): Array<Token> {
+    return this.asset ? this.assets.filter(asset => asset.symbol !== this.asset.symbol) : this.assets
+  }
+
   get filteredTokens (): Array<Token> {
     if (this.query) {
       const query = this.query.toLowerCase().trim()
-      return this.assets.filter(t =>
-        // add recieve token name from i18t
-        // t.name.toLowerCase().includes(query) ||
+      return this.assetsList.filter(t =>
+        this.t(`assetNames.${t.symbol}`).toLowerCase().includes(query) ||
         t.symbol.toLowerCase().includes(query) ||
         t.address.toLowerCase().includes(query)
       )
     }
 
-    return this.assets
+    return this.assetsList
   }
 
   created (): void {
@@ -93,8 +92,11 @@ export default class SelectToken extends Mixins(TranslationMixin, DialogMixin, L
     this.isVisible = false
   }
 
-  checkAsset (symbol: string): boolean {
-    return !!KnownSymbols[symbol]
+  getTokenName (tokenSymbol: string): string {
+    if (this.te(`assetNames.${tokenSymbol}`)) {
+      return `${this.t(`assetNames.${tokenSymbol}`)} (${tokenSymbol})`
+    }
+    return tokenSymbol
   }
 }
 </script>

src/components/Settings.vue

@@ -6,7 +6,7 @@
   >
     <div class="settings-content">
       <s-divider />
-      <div class="slippage-tolerance s-flex">
+      <div :class="slippageToleranceClasses">
         <div class="slippage-tolerance-default">
           <div class="header">
             {{ t('settings.slippageTolerance') }}
@@ -33,9 +33,11 @@
             size="small"
           />
         </div>
+        <div v-if="slippageToleranceValidation" class="slippage-tolerance_validation">{{ t(`settings.slippageToleranceValidation.${slippageToleranceValidation}`) }}</div>
       </div>
       <s-divider />
-      <div class="transaction-deadline">
+      <!-- TODO: We'll play with this field at the next iteration of development -->
+      <!-- <div class="transaction-deadline">
         <div class="header">
           {{ t('settings.transactionDeadline') }}
           <s-tooltip popper-class="info-tooltip" border-radius="mini" :content="t('settings.transactionDeadlineHint')" theme="light" placement="right-start" animation="none" :show-arrow="false">
@@ -47,14 +49,9 @@
           <s-slider class="value-slider" :value="transactionDeadline" :showTooltip="false" @change="handleSetTransactionDeadline" />
         </div>
       </div>
-      <s-divider />
+      <s-divider /> -->
       <div class="node-address">
-        <div class="header">
-          {{ t('settings.nodeAddress') }}
-          <s-tooltip popper-class="info-tooltip" border-radius="mini" :content="t('settings.nodeAddressHint')" theme="light" placement="right-start" animation="none" :show-arrow="false">
-            <s-icon class="header-hint" name="info" />
-          </s-tooltip>
-        </div>
+        <div class="header">{{ t('settings.nodeAddress') }}</div>
         <div class="value">
           <div class="value-container">
             <span class="value-container_label">{{ t('settings.ip') }}: </span>{{ nodeAddress.ip }}
@@ -88,6 +85,11 @@ export default class Settings extends Mixins(TranslationMixin, DialogMixin) {
     1
   ]
 
+  readonly slippageToleranceExtremeValues = {
+    min: 0.01,
+    max: 10
+  }
+
   @Getter slippageTolerance!: number
   @Getter transactionDeadline!: number
   @Getter nodeAddress!: { ip: string; port: number }
@@ -103,6 +105,30 @@ export default class Settings extends Mixins(TranslationMixin, DialogMixin) {
     this.setSlippageTolerance({ value })
   }
 
+  get slippageToleranceClasses (): string {
+    const defaultClass = 'slippage-tolerance'
+    const classes = [defaultClass, 's-flex']
+
+    if (this.slippageToleranceValidation) {
+      classes.push(`${defaultClass}--${this.slippageToleranceValidation === 'frontrun' ? 'warning' : this.slippageToleranceValidation}`)
+    }
+
+    return classes.join(' ')
+  }
+
+  get slippageToleranceValidation (): string {
+    if (+this.model >= this.slippageToleranceExtremeValues.min && +this.model < 0.1) {
+      return 'warning'
+    }
+    if (+this.model >= 5 && +this.model <= this.slippageToleranceExtremeValues.max) {
+      return 'frontrun'
+    }
+    if (+this.model < this.slippageToleranceExtremeValues.min || +this.model > this.slippageToleranceExtremeValues.max) {
+      return 'error'
+    }
+    return ''
+  }
+
   selectSlippageTolerance ({ name }): void {
     this.setSlippageTolerance({ value: name })
   }
@@ -127,6 +153,19 @@ export default class Settings extends Mixins(TranslationMixin, DialogMixin) {
   .el-dialog .el-dialog__body {
     padding-bottom: $inner-spacing-big;
   }
+  .el-tabs__header {
+    margin-bottom: 0;
+  }
+  .slippage-tolerance--error .el-input__inner {
+    &,
+    &:focus {
+      border-color: var(--s-color-status-error);
+    }
+  }
+  // TODO: remove after UI Lib fix
+  .s-placeholder {
+    display: none;
+  }
 }
 </style>
 
@@ -170,12 +209,34 @@ export default class Settings extends Mixins(TranslationMixin, DialogMixin) {
   }
 }
 .slippage-tolerance {
+  flex-wrap: wrap;
   &-default {
     flex: 2;
   }
   &-custom {
     flex: 1;
   }
+  &_validation {
+    margin-top: $inner-spacing-mini;
+    width: 100%;
+    font-size: var(--s-font-size-mini);
+    line-height: $s-line-height-big;
+  }
+  &--warning {
+    color: var(--s-color-status-warning)
+  }
+  &--error {
+    color: var(--s-color-status-error)
+  }
+  + .s-divider-secondary {
+    margin-top: $inner-spacing-big;
+  }
+  &--warning,
+  &--error {
+    + .s-divider-secondary {
+      margin-top: $inner-spacing-medium;
+    }
+  }
 }
 @include vertical-divider('el-divider');
 </style>