Merge pull request #578 from Adamant-im/feat/transfer-crypto-flow

Crypto transfer scenario and pending transactions

src/components/SendFundsForm.vue

@@ -186,7 +186,10 @@
 </template>
 
 <script>
+import { adm } from '@/lib/nodes'
 import lskIndexer from '@/lib/nodes/lsk-indexer'
+import { AllNodesOfflineError } from '@/lib/nodes/utils/errors'
+import { PendingTransactionError } from '@/lib/pending-transactions'
 import axios from 'axios'
 import { nextTick } from 'vue'
 
@@ -207,7 +210,8 @@ import {
   CryptosInfo,
   CryptosOrder,
   isTextDataAllowed,
-  MessageType
+  MessageType,
+  Fees
 } from '@/lib/constants'
 
 import { parseURIasAIP } from '@/lib/uri'
@@ -405,6 +409,14 @@ export default {
         : this.$store.state[this.currency.toLowerCase()].balance
     },
 
+    /**
+     * Return ADM balance
+     * @returns {number}
+     */
+    admBalance() {
+      return this.$store.state.balance
+    },
+
     ethBalance() {
       return this.$store.state.eth.balance
     },
@@ -489,6 +501,19 @@ export default {
         ],
         amount: [
           (v) => v > 0 || this.$t('transfer.error_incorrect_amount'),
+          () => {
+            const isAdmTransfer = this.currency === Cryptos.ADM
+            const isDirectTransfer = !this.address
+
+            if (isAdmTransfer || isDirectTransfer) {
+              return true // skips validation
+            }
+
+            return (
+              this.admBalance >= Fees.NOT_ADM_TRANSFER ||
+              this.$t('transfer.error_not_enough_adm_fee')
+            )
+          },
           () => this.amount <= this.maxToTransfer || this.$t('transfer.error_not_enough'),
           (v) => this.validateMinAmount(v, this.currency) || this.$t('transfer.error_dust_amount'),
           (v) => this.validateNaturalUnits(v, this.currency) || this.$t('transfer.error_precision'),
@@ -720,6 +745,14 @@ export default {
             message = this.$t('transfer.recipient_minimum_balance')
           } else if (/Invalid JSON RPC Response/i.test(message)) {
             message = this.$t('transfer.error_unknown')
+          } else if (error instanceof AllNodesOfflineError) {
+            message = this.$t('transfer.error_all_nodes_offline', {
+              crypto: error.nodeLabel.toUpperCase()
+            })
+          } else if (error instanceof PendingTransactionError) {
+            message = this.$t('transfer.error_pending_transaction', {
+              crypto: error.crypto
+            })
           }
           this.$emit('error', message)
         })
@@ -729,7 +762,7 @@ export default {
           this.dialog = false
         })
     },
-    sendFunds() {
+    async sendFunds() {
       if (this.currency === Cryptos.ADM) {
         let promise
         // 1. if come from Chat then sendMessage
@@ -745,6 +778,7 @@ export default {
               })
             : this.comment
 
+          adm.assertAnyNodeOnline()
           promise = sendMessage({
             amount: this.amount,
             message: asset,

src/components/TransactionListItem.vue

@@ -23,7 +23,7 @@
         <span :class="`${className}__amount ${directionClass}`">{{
           currency(amount, crypto)
         }}</span>
-        <span :class="`${className}__rates`"> {{ historyRate }}</span>
+        <span :class="`${className}__rates`">{{ historyRate }}</span>
         <span v-if="comment" class="a-text-regular-enlarged-bold" style="font-style: italic">
           "</span
         >
@@ -39,7 +39,10 @@
       </v-list-item-title>
 
       <v-list-item-subtitle :class="`${className}__date`" class="a-text-explanation-small">
-        {{ formatDate(createdAt) }}
+        <span v-if="!isPendingTransaction">{{ formatDate(createdAt) }}</span>
+        <span v-else-if="status" :class="`${className}__status`">{{
+          $t(`transaction.statuses.${status}`)
+        }}</span>
       </v-list-item-subtitle>
 
       <template #append>
@@ -61,7 +64,7 @@
 
 <script>
 import formatDate from '@/filters/date'
-import { EPOCH, Cryptos } from '@/lib/constants'
+import { EPOCH, Cryptos, TransactionStatus } from '@/lib/constants'
 import partnerName from '@/mixins/partnerName'
 import { isStringEqualCI } from '@/lib/textHelpers'
 import currencyAmount from '@/filters/currencyAmount'
@@ -80,6 +83,10 @@ export default {
       type: String,
       required: true
     },
+    status: {
+      type: String,
+      required: true
+    },
     recipientId: {
       type: String,
       required: true
@@ -103,6 +110,9 @@ export default {
     }
   },
   emits: ['click:transaction', 'click:icon'],
+  data: () => ({
+    virtualTimestamp: Date.now()
+  }),
   computed: {
     // Own crypto address, like 1F9bMGsui6GbcFaGSNao5YcjnEk38eXXg7 or U3716604363012166999
     userId() {
@@ -176,15 +186,27 @@ export default {
       return (
         '~' +
         this.$store.getters['rate/historyRate'](
-          timestampInSec(this.crypto, this.timestamp),
+          timestampInSec(this.crypto, this.timestamp || this.virtualTimestamp),
           amount,
           this.crypto
         )
       )
+    },
+    isPendingTransaction() {
+      return (
+        this.status === TransactionStatus.PENDING || this.status === TransactionStatus.REGISTERED
+      )
     }
   },
   mounted() {
     this.getHistoryRates()
+
+    if (this.isPendingTransaction) {
+      this.$store.dispatch(`${this.crypto.toLowerCase()}/getTransaction`, {
+        hash: this.id,
+        force: true
+      })
+    }
   },
   methods: {
     isStringEqualCI(string1, string2) {
@@ -232,7 +254,7 @@ export default {
     },
     getHistoryRates() {
       this.$store.dispatch('rate/getHistoryRates', {
-        timestamp: timestampInSec(this.crypto, this.timestamp)
+        timestamp: timestampInSec(this.crypto, this.timestamp || this.virtualTimestamp)
       })
     },
     currency,
@@ -250,6 +272,7 @@ export default {
     color: hsla(0, 0%, 100%, 0.7);
     font-style: italic;
     @include a-text-regular();
+    margin-left: 4px;
   }
   &__amount {
     @include a-text-regular-enlarged-bold();
@@ -268,6 +291,9 @@ export default {
   &__action {
     min-width: 36px;
   }
+  &__status {
+    color: map-get($adm-colors, 'attention');
+  }
   // Do not break computed length of v-divider
   /*&__tile*/
   /*:deep(.v-list__tile)*/

src/lib/nodes/abstract.client.ts

@@ -1,4 +1,5 @@
 import type { HealthcheckInterval, NodeType } from '@/lib/nodes/types'
+import { AllNodesOfflineError } from './utils/errors'
 import { filterSyncedNodes } from './utils/filterSyncedNodes'
 import { Node } from './abstract.node'
 import { nodesStorage } from './storage'
@@ -122,6 +123,29 @@ export abstract class Client<N extends Node> {
     })
   }
 
+  protected getNode() {
+    const node = this.useFastest ? this.getFastestNode() : this.getRandomNode()
+    if (!node) {
+      // All nodes seem to be offline: let's refresh the statuses
+      this.checkHealth()
+      // But there's nothing we can do right now
+      throw new Error('No online nodes at the moment')
+    }
+
+    return node
+  }
+
+  /**
+   * Throws an error if all the nodes are offline.
+   */
+  assertAnyNodeOnline() {
+    const onlineNodes = this.nodes.filter((x) => x.online && x.active && !x.outOfSync)
+
+    if (onlineNodes.length === 0) {
+      throw new AllNodesOfflineError(this.type)
+    }
+  }
+
   /**
    * Updates `outOfSync` status of the nodes.
    *