Merge pull request #204 from soramitsu/adar-dev

Adar dev

package.json

@@ -1,6 +1,6 @@
 {
   "name": "adar",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "repository": {
     "type": "git",
     "url": "https://github.com/soramitsu/adar.git"

public/adar/template.csv

@@ -1,10 +1,3 @@
-// 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					
+// RECIPIENT_NAME // Name of the recipient;// WALLET_ADDRESS // wallet address in SORA network;// 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
+Melanie Wilson (the recipient will get 2000 XOR);5FcNgN7kg1C7sZZpiQ2GB1PZvD5JchNVKK6EqtUqJtmjrKJJ;2000;XOR;TRUE
+Charles Scott (the recipient will get $3000 worth of PSWAP tokens);cnWX1RR9W3iZXtrL5W6WjJoDsWWZHLDCDCMkmWyirHAZJyVu8;3000;PSWAP;

src/App.vue

@@ -352,6 +352,7 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
   @mutation.routeAssets.setTxInfo private setTxInfo!: (txInfo: TransactionInfo) => void;
   @mutation.routeAssets.setTxStatus private setTxStatus!: (status: SwapTransferBatchStatus) => void;
   @action.routeAssets.getBlockNumber private getBlockNumber!: (blockId: string) => Promise<string>;
+  @mutation.routeAssets.setPricesAreUpdated private setPricesAreUpdated!: (value: boolean) => void;
 
   get googleDialogZIndex(): string {
     return this.$route.name === AdarPageNames.RouteAssets ? 'google-dialog-z-index' : '';
@@ -381,6 +382,7 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
 
     if (value.status === TransactionStatus.Error) {
       this.setTxStatus(SwapTransferBatchStatus.FAILED);
+      this.setPricesAreUpdated(true);
       recipients.forEach((reciever) => {
         this.setRecipientStatus({
           id: reciever.id,
@@ -426,6 +428,7 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
     if (!value || ![Operation.SwapAndSend, Operation.Transfer].includes(value.type)) return;
     const recipients = this.recipients.filter((item) => item.txId === value.id);
     this.setTxStatus(SwapTransferBatchStatus.FAILED);
+    this.setPricesAreUpdated(true);
     recipients.forEach((reciever) => {
       this.setRecipientStatus({
         id: reciever.id,
@@ -722,6 +725,8 @@ $sora-logo-width: 173.7px;
 
   &-content {
     flex: 1;
+    margin: $inner-spacing-big auto 0;
+    width: 100%;
 
     .app-disclaimer-container {
       margin-left: auto;

src/components/App/Header/AppHeader.vue

@@ -259,7 +259,6 @@ $app-controls-shadow--dark: inset 1px 1px 2px #52523d;
   }
 
   &--settings-panel {
-    box-shadow: $app-controls-shadow;
     filter: $app-controls-filter;
     border-radius: var(--s-border-radius-small);
 

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

@@ -5,6 +5,14 @@
       <div class="route-assets__page-header-description">
         {{ t('adar.routeAssets.dialogs.reportDialog.description') }}
       </div>
+      <div class="input-file-name-container">
+        <s-input v-model="reportFileName" maxlength="20" :placeholder="t('nameText')" />
+        <div class="options-container">
+          <span v-for="(option, idx) in options" :key="idx" @click="onOptionClick(option)">
+            {{ option }}
+          </span>
+        </div>
+      </div>
       <div class="buttons-container">
         <s-button type="primary" class="s-typography-button--big browse-button" @click.stop="onPDFSelect">
           {{ t('adar.routeAssets.dialogs.reportDialog.pdf') }}
@@ -20,21 +28,43 @@
 <script lang="ts">
 import { mixins, components } from '@soramitsu/soraneo-wallet-web';
 import { Component, Mixins } from 'vue-property-decorator';
+
+import { getter } from '@/store/decorators';
 @Component({
   components: {
     DialogBase: components.DialogBase,
   },
 })
 export default class SelectReportFormatDialog extends Mixins(mixins.TransactionMixin, mixins.DialogMixin) {
+  @getter.routeAssets.file inputFile!: File;
+
+  get inputFileName() {
+    return this.inputFile?.name.split('.csv')[0];
+  }
+
+  readonly initialFileName = `ADAR-${this.formatDate(new Date().getTime(), 'D_MMM_YY')}`;
+
+  reportFileName = this.initialFileName;
+
+  options: string[] = [];
+
+  mounted() {
+    this.options.push(this.initialFileName, `ADAR-${this.inputFileName}`);
+  }
+
   onPDFSelect() {
-    this.$emit('onPDFSelect');
+    this.$emit('onPDFSelect', this.reportFileName);
     this.$emit('update:visible', false);
   }
 
   onCSVSelect() {
-    this.$emit('onCSVSelect');
+    this.$emit('onCSVSelect', this.reportFileName);
     this.$emit('update:visible', false);
   }
+
+  onOptionClick(option: string) {
+    this.reportFileName = option;
+  }
 }
 </script>
 
@@ -50,8 +80,31 @@ export default class SelectReportFormatDialog extends Mixins(mixins.TransactionM
 
 .buttons-container {
   display: flex;
-  // flex-direction: column;
+  margin-top: $inner-spacing-medium;
   gap: 12px;
   margin-bottom: $inner-spacing-medium;
 }
+
+.input-file-name-container {
+  position: relative;
+
+  .options-container {
+    margin-top: $inner-spacing-mini;
+    display: flex;
+    gap: 8px;
+    font-size: var(--s-font-size-mini);
+    > span {
+      cursor: pointer;
+      opacity: 0.7;
+      &::before {
+        content: '•';
+      }
+
+      &:hover {
+        text-decoration: underline;
+        opacity: 1;
+      }
+    }
+  }
+}
 </style>

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

@@ -159,7 +159,7 @@ export default class RoutingCompleted extends Mixins(TranslationMixin) {
   }
 
   get totalAmount() {
-    return this.maxInputAmount.totalAmountWithFee;
+    return this.maxInputAmount.totalAmountWithFee.dp(4);
   }
 
   get totalUSD() {
@@ -237,7 +237,7 @@ export default class RoutingCompleted extends Mixins(TranslationMixin) {
     });
   }
 
-  downloadCSV() {
+  downloadCSV(fileName: string) {
     const { txId, blockId, from, blockNumber } = this.batchTxInfo;
     const datetime = this.batchTxDatetime;
     const csvContent =
@@ -253,13 +253,13 @@ export default class RoutingCompleted extends Mixins(TranslationMixin) {
     const encodedUri = encodeURI(csvContent);
     const link = document.createElement('a');
     link.setAttribute('href', encodedUri);
-    link.setAttribute('download', `ADAR-${new Date().toLocaleDateString('en-GB')}.csv`);
+    link.setAttribute('download', `${fileName}.csv`);
     document.body.appendChild(link); // Required for FF
 
     link.click();
   }
 
-  downloadPDF() {
+  downloadPDF(fileName: string) {
     const doc = new JsPDF({ putOnlyUsedFonts: true, orientation: 'landscape' });
     const { txId, blockId, from, blockNumber } = this.batchTxInfo;
     const datetime = this.batchTxDatetime;
@@ -331,7 +331,7 @@ export default class RoutingCompleted extends Mixins(TranslationMixin) {
       },
       // includeHiddenHtml: true
     });
-    doc.save(`ADAR-${new Date().toLocaleDateString('en-GB')}.pdf`);
+    doc.save(`${fileName}.pdf`);
   }
 }
 </script>

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

@@ -116,7 +116,6 @@
           :slippageTolerance="currentSlippage"
           @onSlippageChanged="updatePriceImpact"
         />
-        <s-divider v-if="!noIssues" />
         <div class="buttons-container">
           <s-button type="primary" class="s-typography-button--big" :disabled="!noIssues" @click.stop="onContinueClick">
             {{ t('adar.routeAssets.continue') }}

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

@@ -55,8 +55,7 @@ import { MaxInputAmountInfo, Recipient, SwapTransferBatchStatus } from '@/store/
   },
 })
 export default class RoutingAssets extends Mixins(TranslationMixin) {
-  @action.routeAssets.processingNextStage nextStage!: any;
-  @getter.routeAssets.recipients private recipients!: Array<Recipient>;
+  @action.routeAssets.processingNextStage nextStage!: () => void;
   @getter.routeAssets.recipientsTokens recipientsTokens!: Asset[];
   @getter.routeAssets.inputToken inputToken!: Asset;
   @getter.routeAssets.overallEstimatedTokens overallEstimatedTokens!: (asset?: AccountAsset) => FPNumber;
@@ -73,7 +72,7 @@ export default class RoutingAssets extends Mixins(TranslationMixin) {
   }
 
   get tokensEstimate() {
-    return this.maxInputAmount.totalAmountWithFee?.toLocaleString();
+    return this.maxInputAmount.totalAmountWithFee?.dp(4).toLocaleString();
   }
 
   get iconName() {

src/modules/ADAR/views/RouteAssets.vue

@@ -74,9 +74,10 @@ export default class RouteAssets extends Mixins(mixins.LoadingMixin, Translation
 <style lang="scss">
 .route-assets {
   max-width: 988px;
-  margin: 0 auto $inner-spacing-medium;
+  margin-left: auto;
+  margin-right: auto;
   .container {
-    margin: $inner-spacing-medium auto;
+    margin: 0 auto $inner-spacing-medium;
     max-width: 464px;
   }
 

src/store/routeAssets/actions.ts

@@ -183,7 +183,9 @@ const actions = defineActions({
   },
 
   updateTokenAmounts(context): void {
-    const { rootState, getters, commit, dispatch } = routeAssetsActionContext(context);
+    const { rootState, getters, commit, dispatch, state } = routeAssetsActionContext(context);
+    const pricesAreUpdated = state.processingState.pricesAreUpdated;
+    if (!pricesAreUpdated) return;
     const priceObject = rootState.wallet.account.fiatPriceObject;
     const recipients = getters.recipients;
     recipients.forEach((recipient) => {
@@ -335,6 +337,7 @@ function getRecipientTransferParams(context, inputAsset, recipient) {
 
 async function executeBatchSwapAndSend(context, data: Array<any>): Promise<any> {
   const { commit, getters, rootCommit, rootState, rootDispatch } = routeAssetsActionContext(context);
+  commit.setPricesAreUpdated(false);
   const inputAsset = getters.inputToken;
   const newData = data.map((item) => {
     const targetAmount = item.swapAndSendData.targetAmount.toCodecString();
@@ -402,6 +405,7 @@ async function executeBatchSwapAndSend(context, data: Array<any>): Promise<any>
         })
         .catch((err) => {
           console.dir(err);
+          commit.setPricesAreUpdated(true);
           commit.setTxStatus(SwapTransferBatchStatus.FAILED);
           swapTransferData.forEach((swapTransferItem) => {
             swapTransferItem.receivers.forEach((receiver) => {
@@ -414,6 +418,7 @@ async function executeBatchSwapAndSend(context, data: Array<any>): Promise<any>
         });
     } catch (err) {
       console.dir(err);
+      commit.setPricesAreUpdated(true);
       commit.setTxStatus(SwapTransferBatchStatus.FAILED);
       swapTransferData.forEach((swapTransferItem) => {
         swapTransferItem.receivers.forEach((receiver) => {

src/store/routeAssets/mutations.ts

@@ -20,6 +20,7 @@ const mutations = defineMutations<RouteAssetsState>()({
     state.processingState.txInfo = undefined;
     state.processingState.datetime = undefined;
     state.processingState.status = SwapTransferBatchStatus.INITIAL;
+    state.processingState.pricesAreUpdated = true;
   },
   setSubscriptions(state, subscriptions: Array<RouteAssetsSubscription> = []): void {
     state.subscriptions = subscriptions;
@@ -130,6 +131,9 @@ const mutations = defineMutations<RouteAssetsState>()({
       updateDate: new Date(),
     };
   },
+  setPricesAreUpdated(state, value: boolean): void {
+    state.processingState.pricesAreUpdated = value;
+  },
 });
 
 export default mutations;

src/store/routeAssets/state.ts

@@ -25,6 +25,7 @@ function initialState(): RouteAssetsState {
       txInfo: undefined,
       status: SwapTransferBatchStatus.INITIAL,
       slippageTolerance: slippageMultiplier,
+      pricesAreUpdated: true,
       maxInputAmount: {
         assetSymbol: XOR.symbol,
         amount: FPNumber.ZERO,

src/store/routeAssets/types.ts

@@ -86,6 +86,7 @@ export type ProcessingState = {
   status: SwapTransferBatchStatus;
   slippageTolerance: string;
   maxInputAmount: MaxInputAmount;
+  pricesAreUpdated: boolean;
 };
 
 export type Stage = {

src/styles/soramitsu-variables.scss

@@ -10,13 +10,13 @@ $s-color-theme-accent-hover--dark: #FF95A2; // NEU pale quartz pink
 $s-color-theme-accent-pressed--dark: #E81932;
 $s-color-theme-accent-focused--dark: #E81932;
 // Secondary theme colors
-$s-color-theme-secondary: #DDFF77;
-$s-color-theme-secondary-hover: #BBDD55;
+$s-color-theme-secondary: #E81932;
+$s-color-theme-secondary-hover: #FF95A2;
 $s-color-theme-secondary-pressed: #24DAA0;
 $s-color-theme-secondary-focused: #24DAA0;
 
-$s-color-theme-secondary--dark: #DDFF77;
-$s-color-theme-secondary-hover--dark: #BBDD55;
+$s-color-theme-secondary--dark: #E81932;
+$s-color-theme-secondary-hover--dark: #FF95A2;
 // Base content colors
 $s-color-base-content-primary: #221111;
 $s-color-base-content-secondary: #665555;