Merge pull request #10 from swaponline/new-features

New features issue-#6
swaponline · Dec 28, 2020 · aa35a19 · aa35a19
2 parents dd6f479 + 4acec0a
commit aa35a19
Show file tree

Hide file tree

Showing 9 changed files with 373 additions and 55 deletions.
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "serve": "vue-cli-service serve --https",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
     "lint:style": "vue-cli-service lint:style",

diff --git a/src/assets/scss/_vars.scss b/src/assets/scss/_vars.scss
@@ -5,6 +5,7 @@ $--grey: #acacac;
 $--light-blue: #d8d4ff;
 $--blue: #1935cf;
 $--salad: #49c800;
+$--red: #ff1100;
 // typography
 $--small-border-radius: 3px;
 // fonts

diff --git a/src/components/Wallets/HeaderWallet.vue b/src/components/Wallets/HeaderWallet.vue
@@ -13,7 +13,7 @@
 
     <v-spacer />
 
-    <v-btn icon color="white" @click.stop="$emit('openMenu', 'share')">
+    <v-btn icon color="white" @click.stop="share">
       <v-icon>mdi-share-variant</v-icon>
     </v-btn>
 
@@ -25,7 +25,25 @@
 
 <script>
 export default {
-  name: 'HeaderWallet'
+  name: 'HeaderWallet',
+  props: {
+    address: {
+      type: String,
+      required: true
+    }
+  },
+  methods: {
+    share() {
+      if (navigator && navigator.canShare) {
+        navigator.share({
+          title: 'Номер кошелька', // Заголовок
+          text: `Номер кошелька для перевода: \n${this.address}` // текст
+        })
+      } else {
+        this.$emit('openMenu', 'share')
+      }
+    }
+  }
 }
 </script>
 

diff --git a/src/components/Wallets/ItemTransaction.vue b/src/components/Wallets/ItemTransaction.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-expansion-panel class="item-transaction">
+  <v-expansion-panel class="item-transaction my-0">
     <v-expansion-panel-header class="item-transaction__header px-1">
       <v-list-item-content class="flex-grow-0 mr-1">
         <v-icon
@@ -13,34 +13,65 @@
         </v-icon>
         <h3 class="item-transaction__time">{{ `${hours}:${minutes}` }}</h3>
       </v-list-item-content>
+
       <v-list-item-content class="text-left">
         <v-list-item-title class="item-transaction__title">
-          <span class="item-transaction__type">{{ isReceived ? 'Received' : 'Sent' }}</span>
-          <span v-if="status" class="item-transaction__status">{{ status }}</span>
+          <span class="item-transaction__status">CONFIRMED</span>
         </v-list-item-title>
-        <v-list-item-subtitle> </v-list-item-subtitle>
+        <v-list-item-subtitle>
+          <form class="item-transaction__descr" @submit.prevent="addComment">
+            <input v-model="comment" type="text" class="item-transaction__input-descr" @click.stop />
+          </form>
+        </v-list-item-subtitle>
       </v-list-item-content>
+
       <v-list-item-action class="flex-grow-0 mr-1">
-        <v-list-item-title class="item-transaction__title justify-end">
-          <span class="item-transaction__crypto-currency">{{ currency }}</span>
-          <span class="item-transaction__value">{{ computedValue }}</span>
-        </v-list-item-title>
+        <v-tooltip top>
+          <template v-slot:activator="{ on }">
+            <v-list-item-title class="item-transaction__title justify-end" v-on="on">
+              <span class="item-transaction__crypto-currency">{{ currency }}</span>
+              <h3 class="item-transaction__value">{{ computedValue }}</h3>
+            </v-list-item-title>
+          </template>
+          <span>Balance change</span>
+        </v-tooltip>
         <v-list-item-subtitle>
           <h3 class="item-transaction__subtitle">
-            <span class="item-transaction__currency">USD</span>
-            <span class="item-transaction__value-in-usd">~{{ valueInUsd }}</span>
+            <v-tooltip top>
+              <template v-slot:activator="{ on }">
+                <span class="item-transaction__value-in-usd" v-on="on">~${{ valueInUsd }}</span>
+              </template>
+              <span> USD Equivalent of transaction amount @ {{ rateValue.toFixed(2) }} USD/ETH)</span>
+            </v-tooltip>
           </h3>
         </v-list-item-subtitle>
       </v-list-item-action>
+
+      <v-list-item-action class="flex-grow-0 mr-1 ml-2 mt-0 item-transaction__balance">
+        <v-list-item-subtitle class="item-transaction__subtitle">
+          <v-tooltip top>
+            <template v-slot:activator="{ on }">
+              <span class="item-transaction__balance-value" v-on="on">{{ currentBalance }}</span>
+            </template>
+            <span>Balance after transaction</span>
+          </v-tooltip>
+        </v-list-item-subtitle>
+      </v-list-item-action>
     </v-expansion-panel-header>
-    <v-expansion-panel-content>
-      <p class="text-left">
-        {{ comment }}
-      </p>
-      <form class="d-flex" @submit.prevent="addComment">
-        <v-text-field v-model="newComment" type="text" />
-        <v-btn type="submit">Добавить</v-btn>
-      </form>
+
+    <v-expansion-panel-content class="item-transaction__expansion">
+      <div class="text-left">
+        <span class="d-block">Transaction fee: {{ transactionFee }}</span>
+        <span class="item-transaction__hash">Hash: {{ hash }}</span>
+        <h3 class="d-block">Entries:</h3>
+        <span v-for="(entry, i) in entries.filter(el => !el.label)" :key="i" class="d-flex justify-space-between">
+          <span>
+            <span>{{ entry.value > 0 ? 'to: ' : 'from: ' }}</span>
+            <span>{{ entry.wallet }}</span>
+          </span>
+          <span class="item-transaction__entry-value">{{ (entry.value / 10 ** decimal).toFixed(currentDecimal) }}</span>
+        </span>
+      </div>
     </v-expansion-panel-content>
   </v-expansion-panel>
 </template>
@@ -55,6 +86,10 @@ export default {
         return []
       }
     },
+    hash: {
+      type: String,
+      required: true
+    },
     value: {
       type: Number,
       required: true
@@ -67,22 +102,42 @@ export default {
       type: Number,
       required: true
     },
+    from: {
+      type: String,
+      required: true
+    },
     to: {
       type: String,
       required: true
     },
     address: {
       type: String,
       required: true
+    },
+    description: {
+      type: String,
+      default: ''
     }
   },
   data() {
     return {
-      newComment: '',
-      comment: `Lorem ipsum dolor`
+      comment: ''
     }
   },
   computed: {
+    entries() {
+      return this.journal[0].entries
+    },
+    transactionFee() {
+      const feeEntries = this.entries.filter(entry => entry.label && entry.value > 0)
+      return feeEntries.reduce((acc, el) => {
+        return acc + (el.value / 10 ** this.decimal).toFixed(this.currentDecimal)
+      }, 0)
+    },
+    currentBalance() {
+      const wallet = this.journal[0].balance.find(wall => wall.wallet === this.address)
+      return (wallet.balance / 10 ** this.decimal).toFixed(this.currentDecimal)
+    },
     isReceived() {
       return this.to === this.address
     },
@@ -117,17 +172,37 @@ export default {
       return ((this.value / 10 ** this.decimal) * this.rateValue).toFixed(2)
     }
   },
+  mounted() {
+    if (this.description) {
+      this.comment = this.description || undefined
+    } else {
+      this.comment = this.isReceived ? `From: ${this.from}` : `To: ${this.to}`
+    }
+  },
   methods: {
     addComment() {
-      this.comment = this.newComment
-      this.newComment = ''
+      this.description = this.comment || undefined
+      if (this.comment === '') {
+        this.comment = this.description
+      }
     }
   }
 }
 </script>
 
 <style lang="scss">
 .item-transaction {
+  border-bottom: 1px solid rgba($color: $--black, $alpha: 0.12);
+  border-top: 1px solid rgba($color: $--black, $alpha: 0.12);
+  &[aria-expended] {
+    margin: 0 0;
+  }
+  &:after {
+    border: none;
+  }
+  &:before {
+    box-shadow: none;
+  }
   &__header {
     padding: 0 0;
   }
@@ -137,6 +212,13 @@ export default {
     font-size: $--font-size-medium;
     font-weight: $--font-weight-bold;
     width: 100%;
+    overflow: visible;
+    @include tablet {
+      font-size: $--font-size-base;
+    }
+    @include phone {
+      font-size: $--font-size-small;
+    }
   }
   &__status {
     display: inline-block;
@@ -147,33 +229,114 @@ export default {
     color: $--blue;
     border-radius: $--small-border-radius;
     padding: 4px 8px;
-    margin-left: 16px;
   }
   &__time {
     font-weight: $--font-weight-bold;
     color: $--grey;
     text-align: center;
+    font-size: $--font-size-small;
   }
   &__crypto-currency {
     color: $--grey;
     text-transform: uppercase;
+    @include tablet {
+      font-size: $--font-size-base;
+    }
+    @include phone {
+      font-size: $--font-size-small;
+    }
   }
   &__value {
     color: $--salad;
     text-transform: uppercase;
     margin-left: 16px;
+    @include tablet {
+      font-size: 1.5em;
+    }
   }
   &__subtitle {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    width: 100%;
     color: $--grey;
-    font-size: $--font-size-medium;
+    font-size: $--font-size-base;
+    @include tablet {
+      font-size: $--font-size-base;
+    }
+    @include phone {
+      font-size: $--font-size-small;
+    }
   }
   &__value-in-usd {
-    margin-left: 20px;
+    margin-left: 5px;
   }
   &__icon {
     &--send {
       transform: rotate(180deg);
     }
   }
+  &__descr {
+    display: flex;
+    font-size: $--font-size-base;
+    line-height: 15px;
+  }
+  &__input-descr {
+    outline: none;
+    border: none;
+    color: $--black;
+    width: 100%;
+    @include tablet {
+      overflow: hidden;
+      font-size: $--font-size-base;
+    }
+    @include phone {
+      font-size: $--font-size-small;
+    }
+  }
+  &__button-descr {
+    font-size: $--font-size-small;
+    line-height: 15px;
+    background: rgba($color: $--blue, $alpha: 0.2);
+    padding: 2px 2px;
+  }
+  &__balance {
+    height: 100%;
+    margin-bottom: 20px;
+    @include tablet {
+      display: none;
+    }
+  }
+  &__balance-title {
+    font-size: $--font-size-small;
+    width: 100%;
+    text-align: center;
+    color: $--grey;
+  }
+  &__balance-value {
+    color: $--grey;
+    font-size: $--font-size-medium;
+    width: 100%;
+    text-align: center;
+  }
+  &__expansion {
+    .v-expansion-panel-content__wrap {
+      padding: 0 10px 10px;
+      font-size: $--font-size-base;
+      word-break: break-word;
+      @include tablet {
+        font-size: $--font-size-base;
+      }
+      @include phone {
+        font-size: $--font-size-small;
+      }
+    }
+  }
+  &__hash {
+    display: block;
+  }
+  &__entry-value {
+    white-space: nowrap;
+  }
 }
 </style>