Merge pull request #64 from soramitsu/adar-dev

Adar dev

public/adar/template.csv

@@ -1,2 +1,10 @@
-Melanie Wilson;cnWX1RR9W3iZXtrL5W6WjJoDsWWZHLDCDCMkmWyirHAZJyVu8;2000;XOR
-Charles Scott;cnWX1RR9W3iZXtrL5W6WjJoDsWWZHLDCDCMkmWyirHAZJyVu8;3000;PSWAP
+// RECIPIENT_NAME;WALLET_ADDRESS;AMOUNT;TARGET_TOKEN;IS_AMOUNT_IN_TOKENS					
+// RECIPIENT_NAME - Name					
+// WALLET_ADDRESS - SORA network wallet address					
+// AMOUNT - Amount to be received recipient should receive. Amounts can be expressed either in Dollars or in target tokens. If you want the recipient to receive tokens equivalent to the specified Dollar value, leave IS_AMOUNT_IN_TOKENS parameter empty. If you want to send a specific number of tokens to the recipient, set IS_AMOUNT_IN_TOKENS parameter to true.					
+// TARGET_TOKEN - The token that the recipient will receive (eg XOR, XSTUSD, etc)					
+// IS_AMOUNT_IN_TOKENS - optional parameter, if true - the AMOUNT parameter becomes the value of tokens sent					
+// Example - in the first row, the recipient will get 2000 XOR					
+// Example - in the second row, the recipient will get $3000 worth of PSWAP tokens					
+Melanie Wilson;cnWX1RR9W3iZXtrL5W6WjJoDsWWZHLDCDCMkmWyirHAZJyVu8;2000;XOR;true					
+Charles Scott;cnWX1RR9W3iZXtrL5W6WjJoDsWWZHLDCDCMkmWyirHAZJyVu8;3000;PSWAP					

src/App.vue

@@ -375,6 +375,7 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
     if (recipients.length < 1) return;
 
     if (value.status === TransactionStatus.Error) {
+      this.setTxStatus(SwapTransferBatchStatus.FAILED);
       recipients.forEach((reciever) => {
         this.setRecipientStatus({
           id: reciever.id,

src/components/App/Header/AppHeader.vue

@@ -204,6 +204,9 @@ $app-controls-shadow--dark: inset 1px 1px 2px #52523d;
     @include tablet(true) {
       display: none;
     }
+    @media (max-width: 1550px) and (min-width: 1440px) {
+      left: 40%;
+    }
   }
 
   .balance-widget {

src/modules/ADAR/components/App/Header/BalanceWidget.vue

@@ -30,9 +30,7 @@ export default class BalanceWidget extends Vue {
   }
 
   get formattedBalance(): string {
-    return this.fpBalance.toNumber().toLocaleString(undefined, {
-      maximumFractionDigits: 6,
-    });
+    return this.fpBalance.dp(6).toLocaleString();
   }
 
   get fpBalance(): FPNumber {
@@ -51,7 +49,7 @@ export default class BalanceWidget extends Vue {
 <style lang="scss" scoped>
 .balance-widget {
   display: flex;
-  width: 180px;
+  max-width: 250px;
   height: 42px;
   padding: 0px 4px;
   justify-content: center;

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

@@ -141,6 +141,7 @@
 </template>
 
 <script lang="ts">
+import { FPNumber } from '@sora-substrate/util/build';
 import { XOR } from '@sora-substrate/util/build/assets/consts';
 import { mixins, components } from '@soramitsu/soraneo-wallet-web';
 import { Component, Mixins, Watch } from 'vue-property-decorator';
@@ -232,9 +233,7 @@ export default class FailedTransactionsDialog extends Mixins(
   }
 
   formatNumber(num) {
-    return num.toLocaleString('en-US', {
-      maximumFractionDigits: 4,
-    });
+    return new FPNumber(num).dp(4).toLocaleString();
   }
 
   handleResetSearch(): void {

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

@@ -189,14 +189,14 @@ export default class FixIssuesDialog extends Mixins(
   }
 
   get localTokenAmount() {
-    return this.model.amount.toLocaleString('en-US', {
-      maximumFractionDigits: 4,
-    });
+    return this.formatStringValue(this.model.amount, 4);
   }
 
   get assetUSDPrice() {
     if (!this.model.asset?.address) return 0;
-    return FPNumber.fromCodecValue(this.fiatPriceObject[this.model.asset.address] ?? 0, 18).toFixed(8);
+    return FPNumber.fromCodecValue(this.fiatPriceObject[this.model.asset.address] ?? 0, 18)
+      .dp(8)
+      .toString();
   }
 
   get submitIsDisabled() {

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

@@ -108,17 +108,17 @@ export default class SelectInputAssetDialog extends Mixins(
 
   get valEstimate() {
     const val = this.assetList.find((item) => item.symbol.toLowerCase() === 'val');
-    return this.overallEstimatedTokens(val)?.toFixed();
+    return this.overallEstimatedTokens(val)?.toLocaleString();
   }
 
   get xorEstimate() {
     const xor = this.assetList.find((item) => item.symbol.toLowerCase() === 'xor');
-    return this.overallEstimatedTokens(xor)?.toFixed();
+    return this.overallEstimatedTokens(xor)?.toLocaleString();
   }
 
   get pswapEstimate() {
     const pswap = this.assetList.find((item) => item.symbol.toLowerCase() === 'pswap');
-    return this.overallEstimatedTokens(pswap)?.toFixed();
+    return this.overallEstimatedTokens(pswap)?.toLocaleString();
   }
 
   get tokensEstimate() {

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

@@ -25,7 +25,7 @@
         <s-divider />
         <div class="field" v-if="incompletedRecipientsLength > 0">
           <div class="field__label">{{ t('adar.routeAssets.stages.done.failedTransactions') }}</div>
-          <warning-message class="warning-message" :text="'re-run failed transactions'" :isError="true" />
+          <warning-message class="warning-message" :text="t('adar.routeAssets.stages.done.rerun')" :isError="true" />
           <div class="field__value">
             {{ incompletedRecipientsLength }}
           </div>
@@ -34,7 +34,7 @@
       <div class="buttons-container">
         <s-button
           type="primary"
-          class="s-typography-button--big"
+          class="s-typography-button--medium"
           @click.stop="showFailedTransactionsDialog = true"
           v-if="withErrors"
         >
@@ -196,11 +196,7 @@ export default class RoutingCompleted extends Mixins(TranslationMixin) {
   }
 
   formatNumber(num) {
-    return !num || !Number.isFinite(num)
-      ? '-'
-      : num.toLocaleString('en-US', {
-          maximumFractionDigits: 4,
-        });
+    return new FPNumber(num).dp(4).toLocaleString();
   }
 
   openFinishRoutingDialog() {

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

@@ -58,13 +58,12 @@
 </template>
 
 <script lang="ts">
+import { FPNumber } from '@sora-substrate/util/build';
 import { Component, Mixins, Watch } from 'vue-property-decorator';
 
 import TranslationMixin from '@/components/mixins/TranslationMixin';
-import { Components } from '@/consts';
 import { AdarComponents } from '@/modules/ADAR/consts';
 import { adarLazyComponent } from '@/modules/ADAR/router';
-import { lazyComponent } from '@/router';
 import { action, getter } from '@/store/decorators';
 import { Recipient } from '@/store/routeAssets/types';
 import validate from '@/store/routeAssets/utils';
@@ -152,12 +151,11 @@ export default class ProcessTemplate extends Mixins(TranslationMixin) {
   }
 
   get lastModified() {
-    const options = { month: 'short', day: 'numeric' } as const;
-    return new Date(this.file?.lastModified || 0).toLocaleDateString('en-US', options);
+    return this.formatDate(this.file?.lastModified || 0, 'D MMM');
   }
 
   get fileSize() {
-    return ((this.file?.size || 1) / 1024).toFixed(2);
+    return new FPNumber(this.file?.size || 1).div(new FPNumber(1024)).dp(2).toLocaleString();
   }
 
   get recipientsCount() {

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

@@ -192,6 +192,7 @@ export default class ReviewDetails extends Mixins(mixins.TransactionMixin) {
   ) => SummaryAssetRecipientsInfo[];
 
   @getter.routeAssets.overallUSDNumber overallUSDNumber!: string;
+  @getter.routeAssets.overallEstimatedTokens overallEstimatedTokens!: (asset?: AccountAsset) => FPNumber;
 
   showSwapDialog = false;
   showSelectInputAssetDialog = false;
@@ -214,8 +215,9 @@ export default class ReviewDetails extends Mixins(mixins.TransactionMixin) {
   }
 
   get estimatedAmount() {
-    const sum = sumBy(this.recipientsData, (item: any) => item.required);
-    return new FPNumber(sum);
+    return this.recipientsData.reduce((acc, item) => {
+      return new FPNumber(item.required).add(acc);
+    }, FPNumber.ZERO);
   }
 
   get adarFeeMultiplier() {
@@ -241,17 +243,15 @@ export default class ReviewDetails extends Mixins(mixins.TransactionMixin) {
   }
 
   get adarFee() {
-    return this.estimatedAmount.add(this.estimatedPriceImpact).mul(this.adarFeeMultiplier);
+    return this.estimatedAmount.mul(this.adarFeeMultiplier);
   }
 
   get estimatedPriceImpact() {
     return this.estimatedAmount.mul(this.priceImpactMultiplier);
   }
 
   get estimatedAmountWithFees() {
-    return this.isInputAssetXor
-      ? this.estimatedAmount.add(this.adarFee).add(this.estimatedPriceImpact).add(this.networkFee)
-      : this.estimatedAmount.add(this.adarFee).add(this.estimatedPriceImpact);
+    return this.isInputAssetXor ? this.overallEstimatedTokens().add(this.networkFee) : this.overallEstimatedTokens();
   }
 
   get totalTokensAvailable() {
@@ -267,7 +267,7 @@ export default class ReviewDetails extends Mixins(mixins.TransactionMixin) {
   }
 
   get showXorRequiredField() {
-    return this.networkFee > this.xorBalance && !this.isInputAssetXor;
+    return FPNumber.isGreaterThan(this.networkFee, this.xorBalance) && !this.isInputAssetXor;
   }
 
   get xorBalance() {
@@ -324,9 +324,7 @@ export default class ReviewDetails extends Mixins(mixins.TransactionMixin) {
   }
 
   get formattedBalance(): string {
-    return this.fpBalance.toNumber().toLocaleString('en-US', {
-      maximumFractionDigits: 6,
-    });
+    return this.fpBalance.dp(6).toLocaleString();
   }
 
   getAssetUSDPrice(asset: Asset) {
@@ -339,19 +337,11 @@ export default class ReviewDetails extends Mixins(mixins.TransactionMixin) {
   }
 
   formatNumberJs(num) {
-    return !num || !Number.isFinite(num)
-      ? '-'
-      : num.toLocaleString('en-US', {
-          maximumFractionDigits: 4,
-        });
+    return new FPNumber(num).dp(4).toLocaleString();
   }
 
   formatNumber(num: FPNumber) {
-    return !num || !num.isFinity()
-      ? '-'
-      : num.toNumber().toLocaleString('en-US', {
-          maximumFractionDigits: 4,
-        });
+    return !num || !num.isFinity() ? '-' : num.dp(4).toLocaleString();
   }
 
   // onAddFundsClick() {

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

@@ -48,7 +48,7 @@ import { Component, Mixins } from 'vue-property-decorator';
 
 import TranslationMixin from '@/components/mixins/TranslationMixin';
 import { action, getter } from '@/store/decorators';
-import { Recipient, RecipientStatus, SwapTransferBatchStatus } from '@/store/routeAssets/types';
+import { Recipient, SwapTransferBatchStatus } from '@/store/routeAssets/types';
 @Component({
   components: {
     TokenLogo: components.TokenLogo,
@@ -64,17 +64,15 @@ export default class RoutingAssets extends Mixins(TranslationMixin) {
   @getter.routeAssets.batchTxStatus batchTxStatus!: SwapTransferBatchStatus;
 
   get continueButtonDisabled() {
-    return !!this.recipients.find(
-      (recipient) => recipient.status === RecipientStatus.PENDING || recipient.status === RecipientStatus.PASSED
-    );
+    return [SwapTransferBatchStatus.PENDING, SwapTransferBatchStatus.PASSED].includes(this.status);
   }
 
   onContinueClick() {
     this.nextStage();
   }
 
   get tokensEstimate() {
-    return this.overallEstimatedTokens()?.toFixed();
+    return this.overallEstimatedTokens()?.toLocaleString();
   }
 
   get iconName() {
@@ -105,14 +103,6 @@ export default class RoutingAssets extends Mixins(TranslationMixin) {
   get status() {
     return this.batchTxStatus;
   }
-
-  formatNumber(num) {
-    return !num || !Number.isFinite(num)
-      ? '-'
-      : num.toLocaleString('en-US', {
-          maximumFractionDigits: 4,
-        });
-  }
 }
 </script>
 

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

@@ -146,6 +146,7 @@
 </template>
 
 <script lang="ts">
+import { FPNumber } from '@sora-substrate/util/build';
 import { XOR } from '@sora-substrate/util/build/assets/consts';
 import { components, mixins } from '@soramitsu/soraneo-wallet-web';
 import { Component, Mixins } from 'vue-property-decorator';
@@ -240,9 +241,7 @@ export default class TransactionOverview extends Mixins(TranslationMixin, mixins
   }
 
   formatNumber(num) {
-    return num.toLocaleString('en-US', {
-      maximumFractionDigits: 4,
-    });
+    return new FPNumber(num).dp(4).toLocaleString();
   }
 
   handleResetSearch(): void {

src/store/routeAssets/getters.ts

@@ -4,7 +4,7 @@ import { defineGetters } from 'direct-vuex';
 import { groupBy, sumBy } from 'lodash';
 import { Subscription } from 'rxjs';
 
-import { Stages, slippageMultiplier } from '@/modules/ADAR/consts';
+import { Stages, slippageMultiplier, adarFee as adarFeeMultiplier } from '@/modules/ADAR/consts';
 import { routeAssetsGetterContext } from '@/store/routeAssets';
 
 import { getAssetUSDPrice } from './utils';
@@ -86,9 +86,10 @@ const getters = defineGetters<RouteAssetsState>()({
     const { state } = routeAssetsGetterContext(args);
     return state.recipients
       .reduce((acc, recipient) => {
-        return acc + recipient.usd;
-      }, 0)
-      .toFixed(2);
+        return acc.add(new FPNumber(recipient.usd));
+      }, FPNumber.ZERO)
+      .dp(2)
+      .toLocaleString();
   },
   recipientsGroupedByToken:
     (...args) =>
@@ -121,8 +122,12 @@ const getters = defineGetters<RouteAssetsState>()({
       const { getters } = routeAssetsGetterContext(args);
       const token = asset || getters.inputToken;
       const summaryData = getters.recipientsGroupedByToken(token);
-      const sum = new FPNumber(sumBy(summaryData, (item) => item.required));
-      return new FPNumber(slippageMultiplier).mul(sum).add(sum);
+      const totalAmount = summaryData.reduce((acc, item) => {
+        return new FPNumber(item.required).add(acc);
+      }, FPNumber.ZERO);
+      const adarFee = new FPNumber(adarFeeMultiplier).mul(totalAmount);
+      const priceImpact = new FPNumber(slippageMultiplier).mul(totalAmount);
+      return totalAmount.add(priceImpact).add(adarFee);
     },
 });