Merge branch 'polkaswap-update' into adar-dev-merge-batch

public/adar/template.csv

@@ -1,7 +1,2 @@
-//name, wallet address, usd amount, token symbol
-"Ted Cortez",000000000000000000000000000000000000000000000000,10,val
-"Ted Cortez",000000000000000000000000000000000000000000000000,10,xor
-"Honor Pearce",000000000000000000000000000000000000000000000000,1,pswap
-"Rhianna Carpenter",000000000000000000000000000000000000000000000000,10,xor
-"Ali Odonnell",000000000000000000000000000000000000000000000000,1,val
-"Julian Jenkins",000000000000000000000000000000000000000000000000,1,val
+Melanie Wilson;cnWX1RR9W3iZXtrL5W6WjJoDsWWZHLDCDCMkmWyirHAZJyVu8;2000;XOR
+Charles Scott;cnWX1RR9W3iZXtrL5W6WjJoDsWWZHLDCDCMkmWyirHAZJyVu8;3000;PSWAP

src/App.vue

@@ -390,7 +390,7 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
           status: RecipientStatus.FAILED,
         });
       });
-    } else if (value.status === TransactionStatus.InBlock || isNewTx) {
+    } else if (value.status === TransactionStatus.Finalized) {
       if (isNewTx) {
         recipients.forEach((reciever) => {
           this.setRecipientStatus({

src/components/App/Header/AppHeader.vue

@@ -241,9 +241,7 @@ $app-controls-shadow--dark: inset 1px 1px 2px #52523d;
     margin-left: auto;
   }
 
-  @include desktop {
-    margin-left: auto;
-  }
+  margin-left: auto;
 
   &--moonpay {
     margin-left: auto;

src/components/App/Menu/AppMenu.vue

@@ -1,7 +1,12 @@
 <template>
   <s-scrollbar
     class="app-menu app-sidebar-scrollbar"
-    :class="{ visible, 'app-menu__about': isAboutPageOpened, 'app-menu__loading': pageLoading }"
+    :class="{
+      visible,
+      'app-menu__about': isAboutPageOpened,
+      'app-menu__loading': pageLoading,
+      'app-menu__route-assets': isRouteAssetsPage,
+    }"
   >
     <aside class="app-sidebar">
       <slot name="head"></slot>
@@ -95,6 +100,7 @@ import {
 
 import { lazyComponent } from '@/router';
 import { getter, state } from '@/store/decorators';
+import { AdarPageNames } from '@/modules/ADAR/consts';
 import { DemeterPageNames } from '@/modules/demeterFarming/consts';
 
 @Component({
@@ -149,6 +155,10 @@ export default class AppMenu extends Mixins(TranslationMixin) {
     this.$emit('open-download-dialog');
   }
 
+  get isRouteAssetsPage(): boolean {
+    return this.$route.name === AdarPageNames.RouteAssets;
+  }
+
   /** To ignore left click */
   preventAnchorNavigation(e?: Event): void {
     e?.preventDefault();
@@ -317,6 +327,11 @@ export default class AppMenu extends Mixins(TranslationMixin) {
       }
     }
 
+    &__route-assets {
+      @include tablet {
+        position: relative;
+      }
+    }
     &__loading {
       z-index: $app-above-loader-layer;
     }

src/lang/en.json

@@ -1050,12 +1050,31 @@
                     "assets": "Assets",
                     "usd": "usd",
                     "wallets": "wallets",
-                    "amount": "amount",
+                    "amount": "ESTIMATED AMOUNTS",
+                    "calculated": "calculated",
+                    "issues": "issues found",
+                    "payeers": "payeers",
+                    "processing": "processing",
+                    "waiting": "waiting",
                     "title": "Process routing template",
-                    "description": "Our system is processing your uploaded Routing Template"
+                    "description": "Our system is processing your uploaded Routing Template",
+                    "fixButton": "fix issues"
+                }
+            },
+            "dialogs": {
+                "fixIssuesDialog": {
+                    "title": "Fix or remove issues",
+                    "recipient": "recipient",
+                    "wallets": "wallets",
+                    "fieldStatusCorrect": "{field} correct",
+                    "fieldStatusIncorrect": "{field} incorrect",
+                    "usd": "usd",
+                    "assets": "Assets",
+                    "amount": "estimated amount",
+                    "fixButton": "fix issue",
+                    "deleteButton": "delete recipient"
                 }
             },
-            "dialogs": {},
             "messages": {}
         }
     },    

src/modules/ADAR/components/RouteAssets/Stages/ReviewDetails.vue

@@ -45,21 +45,44 @@
           </div>
           <warning-message
             class="warning-message"
-            :text="noIssues ? 'ALL ISSUES ARE FIXED' : 'insufficient funds'"
+            :text="noIssues ? 'balance is ok' : 'insufficient funds'"
             :isError="!noIssues"
           />
         </div>
-        <s-divider />
-        <div class="field" v-if="!noIssues">
-          <div class="field__label">remaining AMOUNT required</div>
-          <div class="field__value">
-            <s-button type="primary" class="s-typography-button--mini add-button" @click.stop="onAddFundsClick">
-              {{ 'Add' }}
-            </s-button>
-            {{ formatNumber(remainingAmountRequired) }}
-            <token-logo class="token-logo" :token="inputToken" />
+        <template v-if="!noIssues">
+          <s-divider />
+          <div class="field">
+            <div class="field__label">remaining AMOUNT required</div>
+            <div class="field__value">
+              <s-button
+                type="primary"
+                class="s-typography-button--mini add-button"
+                @click.stop="onAddFundsClick('routing')"
+              >
+                {{ 'Add' }}
+              </s-button>
+              {{ formatNumber(remainingAmountRequired) }}
+              <token-logo class="token-logo" :token="inputToken" />
+            </div>
           </div>
-        </div>
+        </template>
+        <template v-if="showXorRequiredField">
+          <s-divider />
+          <div class="field">
+            <div class="field__label">XOR fee required</div>
+            <div class="field__value">
+              <s-button
+                type="primary"
+                class="s-typography-button--mini add-button"
+                @click.stop="onAddFundsClick('fee')"
+              >
+                {{ 'Add' }}
+              </s-button>
+              {{ formatNumber(xorFeeRequired) }}
+              <token-logo class="token-logo" :token="xor" />
+            </div>
+          </div>
+        </template>
         <s-divider v-if="!noIssues" />
         <div class="buttons-container">
           <s-button type="primary" class="s-typography-button--big" :disabled="!noIssues" @click.stop="onContinueClick">
@@ -92,7 +115,7 @@
         </div>
       </div>
     </div>
-    <swap-dialog :visible.sync="showSwapDialog"></swap-dialog>
+    <swap-dialog :visible.sync="showSwapDialog" :presetSwapData="swapData"></swap-dialog>
     <select-input-asset-dialog
       :visible.sync="showSelectInputAssetDialog"
       @onInputAssetSelected="onInputAssetSelected"
@@ -102,19 +125,17 @@
 
 <script lang="ts">
 import { Component, Mixins } from 'vue-property-decorator';
-import { Components } from '@/consts';
 import { AdarComponents } from '@/modules/ADAR/consts';
-import { lazyComponent } from '@/router';
 import { adarLazyComponent } from '@/modules/ADAR/router';
-import TranslationMixin from '@/components/mixins/TranslationMixin';
 import { action, getter, state } from '@/store/decorators';
-import { components, mixins, SUBQUERY_TYPES } from '@soramitsu/soraneo-wallet-web';
+import { components, mixins } from '@soramitsu/soraneo-wallet-web';
 import { groupBy, sumBy } from 'lodash';
-import { Recipient } from '@/store/routeAssets/types';
-import { CodecString, FPNumber } from '@sora-substrate/util/build';
+import type { PresetSwapData, Recipient } from '@/store/routeAssets/types';
+import { CodecString, FPNumber, NetworkFeesObject, Operation } from '@sora-substrate/util/build';
 import { AccountAsset, Asset } from '@sora-substrate/util/build/assets/types';
-import { formatAssetBalance, getAssetBalance } from '@/utils';
+import { getAssetBalance } from '@/utils';
 import WarningMessage from '../WarningMessage.vue';
+import { XOR, VAL } from '@sora-substrate/util/build/assets/consts';
 @Component({
   components: {
     TokenLogo: components.TokenLogo,
@@ -132,6 +153,7 @@ export default class ReviewDetails extends Mixins(mixins.TransactionMixin) {
   @action.routeAssets.setInputToken setInputToken!: (asset: Asset) => void;
   @action.routeAssets.cancelProcessing private cancelProcessing!: () => void;
   @action.routeAssets.runAssetsRouting private runAssetsRouting!: any;
+  @state.wallet.settings.networkFees private networkFees!: NetworkFeesObject;
 
   showSwapDialog = false;
   showSelectInputAssetDialog = false;
@@ -150,16 +172,45 @@ export default class ReviewDetails extends Mixins(mixins.TransactionMixin) {
   }
 
   get estimatedAmount() {
-    const sum = sumBy(this.summaryData, (item) => item.required);
-    return sum * 1.05;
+    const sum = sumBy(this.summaryData, (item) => item.required) * 1.05;
+    const isInputAssetXor = this.inputToken?.symbol === XOR.symbol;
+    return isInputAssetXor ? sum + this.xorFeeAmount : sum;
   }
 
   get totalTokensAvailable() {
     return this.formattedBalance;
   }
 
+  get xorNetworkFee() {
+    return FPNumber.fromCodecValue(this.networkFees[Operation.SwapAndSend]).toNumber();
+  }
+
   get remainingAmountRequired() {
-    return this.estimatedAmount - this.fpBalance.toNumber();
+    const isInputAssetXor = this.inputToken?.symbol === XOR.symbol;
+    return isInputAssetXor
+      ? this.estimatedAmount + this.xorFeeAmount - this.fpBalance.toNumber()
+      : this.estimatedAmount - this.fpBalance.toNumber();
+  }
+
+  get xorFeeAmount() {
+    return this.summaryData.reduce((sum, item) => {
+      const isTransfer = item.asset.address === this.inputToken.address;
+      const fee = isTransfer ? this.networkFees[Operation.Transfer] : this.networkFees[Operation.SwapAndSend];
+      return sum + FPNumber.fromCodecValue(fee).toNumber();
+    }, 0);
+  }
+
+  get xorFeeRequired() {
+    return this.xorFeeAmount * 1.05 - this.xorBalance;
+  }
+
+  get showXorRequiredField() {
+    return this.xorFeeAmount > this.xorBalance && this.inputToken.address !== XOR.address;
+  }
+
+  get xorBalance() {
+    const asset = this.accountAssets.find((item) => item.address === XOR.address);
+    return FPNumber.fromCodecValue(getAssetBalance(asset), asset?.decimals).toNumber();
   }
 
   get summaryData() {
@@ -181,6 +232,40 @@ export default class ReviewDetails extends Mixins(mixins.TransactionMixin) {
     });
   }
 
+  action: 'fee' | 'routing' = 'fee';
+
+  get routingSwapData(): PresetSwapData {
+    const isInputAssetXor = this.inputToken?.symbol === XOR?.symbol;
+    const assetFrom = isInputAssetXor ? VAL : XOR;
+    const assetTo = this.inputToken;
+    const valueTo = this.remainingAmountRequired;
+    return {
+      assetFrom,
+      assetTo,
+      valueTo,
+    };
+  }
+
+  get xorFeeSwapData(): PresetSwapData {
+    const assetFrom = VAL;
+    const assetTo = XOR;
+    const valueTo = this.xorFeeRequired;
+    return {
+      assetFrom,
+      assetTo,
+      valueTo,
+    };
+  }
+
+  get swapData(): PresetSwapData {
+    return this.action === 'fee' ? this.xorFeeSwapData : this.routingSwapData;
+  }
+
+  onAddFundsClick(action: 'fee' | 'routing') {
+    this.action = action;
+    this.showSwapDialog = true;
+  }
+
   get fpBalance(): FPNumber {
     if (!this.getTokenBalance) return FPNumber.ZERO;
 
@@ -206,6 +291,10 @@ export default class ReviewDetails extends Mixins(mixins.TransactionMixin) {
     return getAssetBalance(asset);
   }
 
+  get xor() {
+    return XOR;
+  }
+
   formatNumber(num) {
     return !num || !Number.isFinite(num)
       ? '-'
@@ -214,9 +303,9 @@ export default class ReviewDetails extends Mixins(mixins.TransactionMixin) {
         });
   }
 
-  onAddFundsClick() {
-    this.showSwapDialog = true;
-  }
+  // onAddFundsClick() {
+  //   this.showSwapDialog = true;
+  // }
 
   cancelButtonAction() {
     this.cancelProcessing();

src/modules/ADAR/components/RouteAssets/SwapDialog.vue

@@ -1,22 +1,67 @@
 <template>
   <div class="swap-dialog">
     <dialog-base :visible.sync="isVisible" :title="'Swap'" custom-class="dialog__swap">
-      <Swap />
+      <Swap ref="swap" />
     </dialog-base>
   </div>
 </template>
 
 <script lang="ts">
-import { Component, Mixins } from 'vue-property-decorator';
+import { Component, Mixins, Prop, Watch } from 'vue-property-decorator';
 import { mixins, components } from '@soramitsu/soraneo-wallet-web';
 import Swap from '@/views/Swap.vue';
+import type { PresetSwapData } from '@/store/routeAssets/types';
+import { FPNumber, NetworkFeesObject, Operation } from '@sora-substrate/util/build';
+import { state } from '@/store/decorators';
+import { XOR } from '@sora-substrate/util/build/assets/consts';
 @Component({
   components: {
     DialogBase: components.DialogBase,
     Swap,
   },
 })
-export default class SwapDialog extends Mixins(mixins.TransactionMixin, mixins.DialogMixin) {}
+export default class SwapDialog extends Mixins(mixins.TransactionMixin, mixins.DialogMixin) {
+  @state.wallet.settings.networkFees private networkFees!: NetworkFeesObject;
+
+  @Prop({ default: 0 }) presetSwapData!: PresetSwapData;
+
+  get presetDataValueTo() {
+    return this.presetSwapData?.valueTo;
+  }
+
+  roundNumber(num) {
+    return Math.ceil((num + Number.EPSILON) * 100) / 100;
+  }
+
+  get networkSwapFee(): number {
+    return FPNumber.fromCodecValue(this.networkFees[Operation.Swap]).toNumber() * 2;
+  }
+
+  @Watch('visible')
+  onVisibleChanged(newVal) {
+    if (newVal) {
+      this.$nextTick(async () => {
+        const swapComponent = this.$refs.swap as any;
+        if (swapComponent) {
+          const { assetFrom, assetTo, valueTo } = this.presetSwapData;
+          const isAssetToXor = assetTo.symbol === XOR.symbol;
+          const fieldToValue = isAssetToXor ? valueTo + this.networkSwapFee : valueTo;
+          swapComponent.handleInputFieldTo(`${this.roundNumber(fieldToValue)}`);
+          await swapComponent.setTokenFromAddress(assetFrom.address);
+          await swapComponent.setTokenToAddress(assetTo.address);
+          swapComponent.handleFocusField(true);
+        }
+      });
+    }
+  }
+
+  @Watch('presetDataValueTo', { deep: true })
+  onValueToChanged(newVal) {
+    if (newVal <= 0) {
+      this.$emit('update:visible', false);
+    }
+  }
+}
 </script>
 
 <style lang="scss">