Merge pull request #9 from swaponline/transaction-wallet

Transaction wallet issue-#6

src/components/Wallets/HeaderWallet.vue

@@ -13,11 +13,11 @@
 
     <v-spacer />
 
-    <v-btn icon color="white" @click="$emit('openMenu', 'share')">
+    <v-btn icon color="white" @click.stop="$emit('openMenu', 'share')">
       <v-icon>mdi-share-variant</v-icon>
     </v-btn>
 
-    <v-btn icon color="white" @click="$emit('openMenu', 'menu')">
+    <v-btn icon color="white" @click.stop="$emit('openMenu', 'menu')">
       <v-icon>mdi-dots-vertical</v-icon>
     </v-btn>
   </v-toolbar>

src/components/Wallets/ItemTransaction.vue

@@ -1,28 +1,27 @@
 <template>
-  <v-list-item class="item-transaction">
-    <v-list-item-avatar size="40">
-      <v-icon
-        class="item-transaction__icon grey lighten-1"
-        dark
-        :class="{
-          'item-transaction__icon--received': type.toLowerCase() === 'received'
-        }"
-      >
-        mdi-arrow-bottom-left
-      </v-icon>
-    </v-list-item-avatar>
-    <template>
+  <v-expansion-panel class="item-transaction">
+    <v-expansion-panel-header class="item-transaction__header px-1">
+      <v-list-item-content class="flex-grow-0 mr-1">
+        <v-icon
+          class="item-transaction__icon lighten-1"
+          background="white"
+          :class="{
+            'item-transaction__icon--send': !isReceived
+          }"
+        >
+          mdi-arrow-bottom-left
+        </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">{{ type }}</span>
-          <span class="item-transaction__status">{{ status }}</span>
+          <span class="item-transaction__type">{{ isReceived ? 'Received' : 'Sent' }}</span>
+          <span v-if="status" class="item-transaction__status">{{ status }}</span>
         </v-list-item-title>
-        <v-list-item-subtitle>
-          <h3 class="item-transaction__time">{{ `${hours}:${minutes}` }}</h3>
-        </v-list-item-subtitle>
+        <v-list-item-subtitle> </v-list-item-subtitle>
       </v-list-item-content>
-      <v-list-item-action>
-        <v-list-item-title class="item-transaction__title">
+      <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>
@@ -33,66 +32,95 @@
           </h3>
         </v-list-item-subtitle>
       </v-list-item-action>
-    </template>
-  </v-list-item>
+    </v-expansion-panel-header>
+    <v-expansion-panel-content>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+      consequat.
+    </v-expansion-panel-content>
+  </v-expansion-panel>
 </template>
 
 <script>
 export default {
   name: 'ItemTransaction',
   props: {
-    currency: {
-      type: String,
-      default: ''
-    },
-    type: {
-      type: String,
-      default: ''
+    journal: {
+      type: Array,
+      default() {
+        return []
+      }
     },
     value: {
       type: Number,
       required: true
     },
-    valueInUsd: {
+    status: {
+      type: String,
+      default: ''
+    },
+    timestamp: {
       type: Number,
       required: true
     },
-    date: {
-      type: Date,
+    to: {
+      type: String,
       required: true
     },
-    status: {
+    address: {
       type: String,
-      default: ''
+      required: true
     }
   },
   computed: {
+    isReceived() {
+      return this.to === this.address
+    },
     computedValue() {
-      return (this.type.toLowerCase() === 'received' ? '+' : '-') + this.value.toString()
+      return (this.isReceived ? '+' : '-') + (this.value / 10 ** this.decimal).toFixed(this.currentDecimal)
     },
     hours() {
-      return this.date
+      return new Date(this.timestamp)
         .getHours()
         .toString()
         .padStart(2, '0')
     },
     minutes() {
-      return this.date
+      return new Date(this.timestamp)
         .getMinutes()
         .toString()
         .padStart(2, '0')
+    },
+    currency() {
+      return this.journal[0].asset.symbol
+    },
+    decimal() {
+      return this.journal[0].asset.decimals || 1
+    },
+    rateValue() {
+      return this.journal[0].asset.rate?.value || 500
+    },
+    currentDecimal() {
+      return Math.ceil(this.rateValue).toString().length + 1
+    },
+    valueInUsd() {
+      return ((this.value / 10 ** this.decimal) * this.rateValue).toFixed(2)
     }
   }
 }
 </script>
 
 <style lang="scss">
 .item-transaction {
+  &__header {
+    padding: 0 0;
+  }
   &__title {
     display: flex;
     align-items: center;
     font-size: $--font-size-medium;
     font-weight: $--font-weight-bold;
+    width: 100%;
   }
   &__status {
     display: inline-block;
@@ -108,6 +136,7 @@ export default {
   &__time {
     font-weight: $--font-weight-bold;
     color: $--grey;
+    text-align: center;
   }
   &__crypto-currency {
     color: $--grey;
@@ -125,5 +154,10 @@ export default {
   &__value-in-usd {
     margin-left: 20px;
   }
+  &__icon {
+    &--send {
+      transform: rotate(180deg);
+    }
+  }
 }
 </style>

src/components/Wallets/ListTransactions.vue

@@ -1,12 +1,15 @@
 <template>
-  <v-list>
-    <v-subheader>{{ filterType }}</v-subheader>
-
-    <item-transaction v-for="transaction in list" :key="transaction.id" v-bind="transaction" />
-  </v-list>
+  <v-expansion-panels>
+    <div v-for="transaction in transactions" :key="transaction.date" class="list-transaction__item">
+      <v-subheader class="list-transaction__title">{{ transaction.date }}</v-subheader>
+      <item-transaction v-for="item in transaction.list" :key="item.hash" v-bind="item" :address="address" />
+    </div>
+  </v-expansion-panels>
 </template>
 
 <script>
+import { GET_TRANSACTIONS } from '@/store/modules/Transactions'
+import { mapActions, mapGetters } from 'vuex'
 import ItemTransaction from './ItemTransaction.vue'
 
 export default {
@@ -16,9 +19,17 @@ export default {
     filterType: {
       type: String,
       default: 'all'
+    },
+    address: {
+      type: String,
+      required: true
     }
   },
   computed: {
+    ...mapGetters(['listTransactionsSortByDate']),
+    transactions() {
+      return this.listTransactionsSortByDate(this.$route.query.wallet)
+    },
     list() {
       return [
         {
@@ -41,8 +52,27 @@ export default {
         }
       ]
     }
+  },
+  created() {
+    this.actionGetTransaction()
+  },
+  methods: {
+    ...mapActions({
+      actionGetTransaction: GET_TRANSACTIONS
+    })
   }
 }
 </script>
 
-<style lang="scss"></style>
+<style lang="scss">
+.list-transaction {
+  &__item {
+    flex-grow: 1;
+    width: 100%;
+  }
+  &__title {
+    width: 100%;
+    text-align: left;
+  }
+}
+</style>

src/components/Wallets/WalletsMenu.vue

@@ -5,8 +5,9 @@
       'wallets-menu--open-menu': visible,
       'wallets-menu--await': awaitStatus
     }"
+    @click.stop="closed"
   >
-    <v-list-item v-for="i in 5" :key="i">
+    <v-list-item v-for="i in 5" :key="i" tabindex="-1" @click.stop="closed">
       <slot :info="i"> item {{ i }} </slot>
     </v-list-item>
   </v-list>
@@ -28,6 +29,27 @@ export default {
       type: Boolean,
       default: false
     }
+  },
+  watch: {
+    visible: {
+      handler(val) {
+        if (val) {
+          document.body.addEventListener('click', this.closed)
+        } else {
+          document.body.removeEventListener('click', this.closed)
+        }
+      }
+    }
+  },
+  beforeDestroy() {
+    document.body.removeEventListener('click', () => {
+      this.closed()
+    })
+  },
+  methods: {
+    closed() {
+      this.$emit('closed')
+    }
   }
 }
 </script>

src/store/index.js

@@ -1,11 +1,13 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import Wallets from './modules/Wallets'
+import Transactions from './modules/Transactions'
 
 Vue.use(Vuex)
 
 export default new Vuex.Store({
   modules: {
-    Wallets
+    Wallets,
+    Transactions
   }
 })

src/store/modules/Transactions/index.js

@@ -0,0 +1,50 @@
+import Transaction from '@/api/swap.json'
+import { SET_LIST } from '@/store/common/mutations.types'
+import { pickCommonMutations } from '@/store/common/mutations'
+import { getDate } from '@/utils/date'
+
+export const MODULE_NAME = 'Transaction'
+
+export const GET_TRANSACTIONS = 'GET_TRANSACTIONS'
+
+export default {
+  state: {
+    list: []
+  },
+  getters: {
+    /**
+     * [{
+     *  date: "Today || Yesterday || 'dd.mm.yyyy'",
+     *  list: []
+     * }]
+     */
+    listTransactionsSortByDate({ list }) {
+      return wallet => {
+        return list
+          .filter(el => el.to === wallet || el.from === wallet)
+          .reduce((newList, el) => {
+            const nameDay = getDate(el.timestamp)
+            const day = newList.find(item => item.date === nameDay)
+            if (day) {
+              day.list.push(el)
+            } else {
+              newList.push({
+                date: nameDay,
+                list: [el]
+              })
+            }
+            return newList
+          }, [])
+      }
+    }
+  },
+  actions: {
+    [GET_TRANSACTIONS]({ commit }) {
+      const list = Transaction.sort((a, b) => b.timestamp - a.timestamp)
+      commit(SET_LIST, { list })
+    }
+  },
+  mutations: {
+    ...pickCommonMutations([SET_LIST])
+  }
+}

src/store/modules/Wallets/index.js

@@ -22,7 +22,7 @@ export default {
           {
             name: 'Default',
             value: 40.0561,
-            address: '0x2dF6C87022A039c60E1A27ED6ea7A8cDa3101Cd0'
+            address: '0xd19615f2Eab2ABfBF7ca16618b5eD43386374DD0'
           },
           {
             name: 'Swaps',