Merge pull request #17 from soramitsu/adar-dev

Adar dev

package.json

@@ -1,9 +1,9 @@
 {
-  "name": "polkaswap-exchange-web",
-  "version": "1.15.0",
+  "name": "adar",
+  "version": "0.1.4",
   "repository": {
     "type": "git",
-    "url": "https://github.com/sora-xor/polkaswap-exchange-web.git"
+    "url": "https://github.com/soramitsu/adar.git"
   },
   "license": "Apache-2.0",
   "private": true,

src/App.vue

@@ -69,7 +69,7 @@ import type { ConnectToNodeOptions } from '@/types/nodes';
 import type { SubNetwork } from '@/utils/ethers-util';
 import type { FeatureFlags } from '@/store/settings/types';
 import getters from './store/web3/getters';
-import { RecipientStatus } from './store/routeAssets/types';
+import { RecipientStatus, TransactionInfo } from './store/routeAssets/types';
 
 @Component({
   components: {
@@ -360,6 +360,7 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
   @mutation.routeAssets.setRecipientStatus private setRecipientStatus!: any;
   @mutation.routeAssets.setRecipientCompleted private setRecipientCompleted!: any;
   @getter.wallet.transactions.activeTxs activeTransactions!: Array<HistoryItem>;
+  @mutation.routeAssets.setTxInfo private setTxInfo!: (txInfo: TransactionInfo) => void;
 
   handleChangeTransactionADAR(value: Nullable<HistoryItem>, oldValue: Nullable<HistoryItem>): void {
     if (
@@ -390,16 +391,26 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
           status: RecipientStatus.FAILED,
         });
       });
-    } else if (value.status === TransactionStatus.InBlock || isNewTx) {
+    } else if (value.status === TransactionStatus.InBlock) {
       if (isNewTx) {
+        const { id, blockId, from } = value;
+        this.setTxInfo({ txId: id as string, blockId: blockId as string, from: from as string });
         recipients.forEach((reciever) => {
           this.setRecipientStatus({
             id: reciever.id,
-            status: RecipientStatus.SUCCESS,
+            status: RecipientStatus.PASSED,
           });
-          this.setRecipientCompleted(reciever.id);
+          // this.setRecipientCompleted(reciever.id);
         });
       }
+    } else if (value.status === TransactionStatus.Finalized) {
+      recipients.forEach((reciever) => {
+        this.setRecipientStatus({
+          id: reciever.id,
+          status: RecipientStatus.SUCCESS,
+        });
+        this.setRecipientCompleted(reciever.id);
+      });
     }
     // remove active tx on finalized or error status
     // this.removeActiveTxs([value.id as string]);

src/components/App/Menu/AppInfoPopper.vue

@@ -48,7 +48,8 @@ import { app, SocialNetworkLinks, Links } from '@/consts';
 
 @Component
 export default class AppInfoPopper extends Mixins(TranslationMixin, mixins.LoadingMixin) {
-  readonly SocialNetworkLinks = SocialNetworkLinks;
+  // readonly SocialNetworkLinks = SocialNetworkLinks;
+  readonly SocialNetworkLinks = [];
   readonly app = app;
 
   specVersion: Nullable<number> = null;
@@ -61,18 +62,18 @@ export default class AppInfoPopper extends Mixins(TranslationMixin, mixins.Loadi
 
   get textLinks(): Array<{ title: string; href: string }> {
     return [
-      {
-        title: this.t('helpDialog.privacyPolicy'),
-        href: Links.privacy,
-      },
+      // {
+      //   title: this.t('helpDialog.privacyPolicy'),
+      //   href: Links.privacy,
+      // },
       {
         title: this.t('releaseNotesText'),
         href: Links.releaseNotes,
       },
-      {
-        title: this.t('helpDialog.termsOfService'),
-        href: Links.terms,
-      },
+      // {
+      //   title: this.t('helpDialog.termsOfService'),
+      //   href: Links.terms,
+      // },
     ];
   }
 

src/components/App/Menu/AppMenu.vue

@@ -59,10 +59,10 @@
             class="el-menu-item menu-item--small"
             tabindex="0"
             @click.native="openSoraDownloadDialog"
-          />
+          /> -->
           <app-info-popper>
             <sidebar-item-content icon="info-16" :title="t('footerMenu.info')" class="el-menu-item menu-item--small" />
-          </app-info-popper> -->
+          </app-info-popper>
           <sidebar-item-content
             v-if="faucetUrl"
             :icon="FaucetLink.icon"

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

@@ -101,7 +101,7 @@
           </s-table-column>
 
           <!-- BUTTON -->
-          <s-table-column>
+          <!-- <s-table-column>
             <template v-slot="{ row }">
               <s-button
                 type="primary"
@@ -112,7 +112,7 @@
                 {{ 'RE-RUN' }}
               </s-button>
             </template>
-          </s-table-column>
+          </s-table-column> -->
         </s-table>
         <s-pagination
           class="failed-transactions-table-pagination"

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

@@ -0,0 +1,53 @@
+<template>
+  <div class="select-report-fromat-dialog">
+    <dialog-base :visible.sync="isVisible" custom-class="dialog__select-report-fromat">
+      <div class="route-assets__page-header-title">Select report file format</div>
+      <div class="route-assets__page-header-description">
+        {{ `You can either use the PDF or CSV format.` }}
+      </div>
+      <div class="buttons-container">
+        <s-button type="primary" class="s-typography-button--big browse-button" @click.stop="onPDFSelect">
+          {{ 'PDF' }}
+        </s-button>
+        <s-button type="primary" class="s-typography-button--big browse-button" @click.stop="onCSVSelect">
+          {{ 'CSV' }}
+        </s-button>
+      </div>
+    </dialog-base>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Mixins } from 'vue-property-decorator';
+import { mixins, components } from '@soramitsu/soraneo-wallet-web';
+@Component({
+  components: {
+    DialogBase: components.DialogBase,
+  },
+})
+export default class SelectReportFormatDialog extends Mixins(mixins.TransactionMixin, mixins.DialogMixin) {
+  onPDFSelect() {
+    this.$emit('onPDFSelect');
+    this.$emit('update:visible', false);
+  }
+
+  onCSVSelect() {
+    this.$emit('onCSVSelect');
+    this.$emit('update:visible', false);
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.browse-button {
+  width: 100%;
+  margin-right: 0;
+  margin-left: 0;
+}
+
+.buttons-container {
+  display: flex;
+  // flex-direction: column;
+  gap: 12px;
+}
+</style>

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

@@ -40,8 +40,13 @@
         >
           {{ 'RE-RUN FAILED TRANSACTIONS' }}
         </s-button>
-        <s-button type="secondary" class="s-typography-button--big" @click.stop="downloadPDF">
-          {{ 'DOWNLOAD PDF OVERVIEW' }}
+        <s-button
+          v-if="!withErrors"
+          type="secondary"
+          class="s-typography-button--big"
+          @click.stop="onReportDownloadClick()"
+        >
+          {{ 'DOWNLOAD Report' }}
         </s-button>
         <s-button
           type="link"
@@ -87,6 +92,12 @@
       :visible.sync="showFinishRoutingDialog"
       @onConfirmClick="onFinishRouting"
     ></confirm-finish-routing-dialog>
+    <select-report-format-dialog
+      :visible.sync="showSelectReportFormatDialog"
+      @onConfirmClick="onFinishRouting"
+      @onPDFSelect="downloadPDF"
+      @onCSVSelect="downloadCSV"
+    ></select-report-format-dialog>
   </div>
 </template>
 
@@ -99,7 +110,7 @@ import TranslationMixin from '@/components/mixins/TranslationMixin';
 import { action, getter, state } from '@/store/decorators';
 import { components, SUBQUERY_TYPES } from '@soramitsu/soraneo-wallet-web';
 import { groupBy, sumBy } from 'lodash';
-import { Recipient, RecipientStatus } from '@/store/routeAssets/types';
+import { Recipient, RecipientStatus, TransactionInfo } from '@/store/routeAssets/types';
 import { FPNumber } from '@sora-substrate/util/build';
 import { AccountAsset, Asset } from '@sora-substrate/util/build/assets/types';
 import WarningMessage from '../WarningMessage.vue';
@@ -111,19 +122,23 @@ import autoTable from 'jspdf-autotable';
     WarningMessage,
     FailedTransactionsDialog: adarLazyComponent(AdarComponents.RouteAssetsFailedTransactionsDialog),
     ConfirmFinishRoutingDialog: adarLazyComponent(AdarComponents.RouteAssetsConfirmFinishRoutingDialog),
+    SelectReportFormatDialog: adarLazyComponent(AdarComponents.RouteAssetsSelectReportFormatDialog),
   },
 })
 export default class RoutingCompleted extends Mixins(TranslationMixin) {
   @getter.routeAssets.inputToken inputToken!: Asset;
   @getter.routeAssets.completedRecipients private completedRecipients!: Array<Recipient>;
   @getter.routeAssets.incompletedRecipients private incompletedRecipients!: Array<Recipient>;
   @getter.routeAssets.recipients private recipients!: Array<Recipient>;
+  @getter.routeAssets.batchTxInfo private batchTxInfo!: TransactionInfo;
+  @getter.routeAssets.batchTxDatetime private batchTxDatetime!: Nullable<Date>;
   @state.wallet.account.fiatPriceObject private fiatPriceObject!: any;
   @state.wallet.account.accountAssets private accountAssets!: Array<AccountAsset>;
   @action.routeAssets.cancelProcessing private cancelProcessing!: () => void;
 
   showFailedTransactionsDialog = false;
   showFinishRoutingDialog = false;
+  showSelectReportFormatDialog = false;
 
   get incompletedRecipientsLength() {
     return this.incompletedRecipients.length;
@@ -187,10 +202,14 @@ export default class RoutingCompleted extends Mixins(TranslationMixin) {
     this.showFinishRoutingDialog = false;
   }
 
-  downloadPDF() {
-    const doc = new JsPDF({ putOnlyUsedFonts: true, orientation: 'landscape' });
-    const headers = ['№', 'Name', 'Wallet', 'USD', 'Input Token', 'Token', 'Amount', 'Status'];
-    const data = this.recipients.map((recipient, idx) => {
+  onReportDownloadClick() {
+    this.showSelectReportFormatDialog = true;
+  }
+
+  headers = ['№', 'NAME', 'WALLET', 'USD', 'INPUT TOKEN', 'TOKEN', 'AMOUNT', 'RATE', 'STATUS'];
+
+  get reportData() {
+    return this.recipients.map((recipient, idx) => {
       return [
         `${idx + 1}`,
         recipient.name.toString(),
@@ -199,12 +218,80 @@ export default class RoutingCompleted extends Mixins(TranslationMixin) {
         this.inputToken.symbol,
         recipient.asset.symbol,
         (recipient.amount?.toFixed(5) || '').toString(),
+        recipient.exchangeRate || '',
         recipient.status.toString(),
       ];
     });
+  }
+
+  downloadCSV() {
+    const { txId, blockId, from } = this.batchTxInfo;
+    const datetime = this.batchTxDatetime;
+    const csvContent =
+      'data:text/csv;charset=utf-8,' +
+      `Transaction Id - ${txId}\n` +
+      `Block Id - ${blockId}\n` +
+      `Sender wallet - ${from}\n` +
+      `Datetime - ${datetime?.toLocaleString()}\n` +
+      this.headers.join(',') +
+      '\n' +
+      this.reportData.map((e) => e.join(',')).join('\n');
+    const encodedUri = encodeURI(csvContent);
+    const link = document.createElement('a');
+    link.setAttribute('href', encodedUri);
+    link.setAttribute('download', `ADAR-${new Date().toLocaleDateString('en-GB')}.csv`);
+    document.body.appendChild(link); // Required for FF
+
+    link.click();
+  }
+
+  downloadPDF() {
+    const doc = new JsPDF({ putOnlyUsedFonts: true, orientation: 'landscape' });
+    const { txId, blockId, from } = this.batchTxInfo;
+    const datetime = this.batchTxDatetime;
+    doc.setFontSize(12);
+    doc.text(`Transaction Id - ${txId}`, 5, 5);
+    doc.text(`Block Id - ${blockId}`, 5, 10);
+    doc.text(`Sender wallet - ${from}`, 5, 15);
+    doc.text(`Datetime - ${datetime?.toLocaleString()}`, 5, 20);
     autoTable(doc, {
-      head: [headers],
-      body: data,
+      head: [this.headers],
+      body: this.reportData,
+      startY: 25,
+      margin: { top: 5, left: 5, right: 5, bottom: 5 },
+      styles: {
+        lineColor: [237, 228, 231],
+        lineWidth: 0.3,
+        fontSize: 10,
+      },
+      headStyles: {
+        textColor: [161, 154, 157],
+        fillColor: [253, 247, 251],
+      },
+      bodyStyles: {
+        fillColor: [253, 247, 251],
+        textColor: [38, 38, 45],
+        cellPadding: { top: 10, right: 5, bottom: 10, left: 5 },
+      },
+      alternateRowStyles: {
+        fillColor: [255, 250, 251],
+      },
+      columnStyles: {
+        8: {
+          fontStyle: 'bold',
+        },
+      },
+      didParseCell: function (data) {
+        if (data.row.section === 'body') {
+          if (data.cell.text.includes(RecipientStatus.FAILED)) {
+            data.cell.styles.textColor = [231, 76, 60];
+          }
+          if (data.cell.text.includes(RecipientStatus.SUCCESS)) {
+            data.cell.styles.textColor = [52, 173, 135];
+          }
+        }
+      },
+      // includeHiddenHtml: true
     });
     doc.save(`ADAR-${new Date().toLocaleDateString('en-GB')}.pdf`);
   }

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

@@ -38,6 +38,13 @@
           </div>
         </div>
         <s-divider />
+        <div class="field">
+          <div class="field__label">ESTImated ADAR fee (0.75%)</div>
+          <div class="field__value">
+            {{ formatNumber(adarFee) }} <token-logo class="token-logo" :token="inputToken" />
+          </div>
+        </div>
+        <s-divider />
         <div class="field">
           <div class="field__label">Total Tokens available</div>
           <div class="field__value">
@@ -125,7 +132,7 @@
 
 <script lang="ts">
 import { Component, Mixins } from 'vue-property-decorator';
-import { AdarComponents } from '@/modules/ADAR/consts';
+import { AdarComponents, adarFee } from '@/modules/ADAR/consts';
 import { adarLazyComponent } from '@/modules/ADAR/router';
 import { action, getter, state } from '@/store/decorators';
 import { components, mixins } from '@soramitsu/soraneo-wallet-web';
@@ -179,6 +186,18 @@ export default class ReviewDetails extends Mixins(mixins.TransactionMixin) {
     return isInputAssetXor ? new FPNumber(sum).add(this.xorFeeAmount) : new FPNumber(sum);
   }
 
+  get adarFeeMultiplier() {
+    return new FPNumber(adarFee);
+  }
+
+  get adarFee() {
+    return this.estimatedAmount.mul(this.adarFeeMultiplier);
+  }
+
+  get estimatedAmountWithFees() {
+    return this.estimatedAmount.add(this.adarFee);
+  }
+
   get totalTokensAvailable() {
     return this.formattedBalance;
   }
@@ -190,8 +209,8 @@ export default class ReviewDetails extends Mixins(mixins.TransactionMixin) {
   get remainingAmountRequired() {
     const isInputAssetXor = this.inputToken?.symbol === XOR.symbol;
     return isInputAssetXor
-      ? this.estimatedAmount.add(this.xorFeeAmount).sub(this.fpBalance)
-      : this.estimatedAmount.sub(this.fpBalance);
+      ? this.estimatedAmountWithFees.add(this.xorFeeAmount).sub(this.fpBalance)
+      : this.estimatedAmountWithFees.sub(this.fpBalance);
   }
 
   get xorFeeAmount() {