Merge pull request #25 from liquality/feature-swap-inputs

feat: added switch for fiat to crypto and update input for send and r…

package.json

@@ -1,6 +1,6 @@
 {
   "name": "liquality-wallet",
-  "version": "0.10.5",
+  "version": "0.10.6",
   "private": true,
   "license": "MIT",
   "author": "Liquality <[email protected]>",

src/assets/scss/style.scss

@@ -511,4 +511,15 @@ svg.qr-icon {
 .selectors-asset {
   width: 40px;
   font-weight: bold;
-}
+}
+
+
+.infinity-rotate {
+  -webkit-animation:spin 1s ease infinite;
+  -moz-animation:spin 1s ease infinite;
+  animation:spin 1s ease infinite;
+  animation-fill-mode: forwards;
+}
+@-moz-keyframes spin { 0% { -moz-transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg); } }
+@-webkit-keyframes spin { 0% { -moz-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } }
+@keyframes spin { 0% { -moz-transform: rotate(0deg); } 100% { transform:rotate(360deg); } }

src/views/Wallet/WalletActivityFilter.vue → src/components/ActivityFilter.vue

@@ -89,8 +89,73 @@ import ListItem from '@/components/ListItem'
 import { ACTIVITY_FILTER_TYPES, ACTIVITY_STATUSES, getItemIcon } from '@/utils/history'
 import DatePick from 'vue-date-pick'
 import '@/assets/scss/vue-date-pick.scss'
+import { getCSVContent, exportToCSV } from '@/utils/export'
+
+const CSV_HEADERS = [
+  {
+    label: 'ID',
+    key: 'id'
+  },
+  {
+    label: 'Order ID',
+    key: 'orderId'
+  },
+  {
+    label: 'Network',
+    key: 'network'
+  },
+  {
+    label: 'Created',
+    key: 'createdAt'
+  },
+  {
+    label: 'From Asset',
+    key: 'from'
+  },
+  {
+    label: 'To Asset',
+    key: 'to'
+  },
+  {
+    label: 'From',
+    key: 'fromAddress'
+  },
+  {
+    label: 'To',
+    key: 'toAddress'
+  },
+  {
+    label: 'Send To',
+    key: 'sendTo'
+  },
+  {
+    label: 'Send Amount',
+    key: 'fromAmount'
+  },
+  {
+    label: 'Receive Amount',
+    key: 'toAmount'
+  },
+  {
+    label: 'Send Amount USD',
+    key: 'fromAmountUsd'
+  },
+  {
+    label: 'Receive Amount USD',
+    key: 'toAmountUsd'
+  },
+  {
+    label: 'Status',
+    key: 'fromAmountUsd'
+  },
+  {
+    label: 'Wallet ID',
+    key: 'walletId'
+  }
+]
 
 export default {
+  props: ['activityData'],
   components: {
     CalendarIcon,
     ChevronDownIcon,
@@ -101,6 +166,7 @@ export default {
   },
   data () {
     return {
+      headers: [...CSV_HEADERS],
       open: false,
       dateFilters: {
         start: null,
@@ -134,6 +200,8 @@ export default {
     }
   },
   methods: {
+    getCSVContent,
+    exportToCSV,
     getItemIcon,
     toogleTypeFilter (key) {
       if (key in this.typeFilters) {
@@ -150,7 +218,8 @@ export default {
       }
     },
     exportActivity () {
-      this.$emit('export-requested')
+      const content = this.getCSVContent(this.activityData, this.headers)
+      this.exportToCSV({ filename: 'activity.csv', content })
     },
     resetFilters () {
       this.dateFilters = { start: null, end: null }

src/components/ListItem.vue

@@ -72,6 +72,11 @@ export default {
     text-decoration: none;
   }
 
+  .list-item-title,
+  .list-item-detail {
+    color: $color-text-primary;
+    font-weight: 400;
+  }
   .list-item-detail,
   .list-item-detail-sub {
     text-align: right;

src/manifest.json

@@ -1,6 +1,6 @@
 {
   "manifest_version": 2,
-  "version": "0.10.5",
+  "version": "0.10.6",
   "name": "Liquality Wallet",
   "description": "Secure multi-crypto wallet with built-in Atomic Swaps!",
   "homepage_url": "https://liquality.io",

src/store/actions/updateBalances.js

@@ -2,7 +2,7 @@ import Bluebird from 'bluebird'
 
 export const updateBalances = async ({ state, commit, getters }, { network, walletId }) => {
   const assets = state.enabledAssets[network][walletId]
-
+  commit('UPDATE_BALANCE_LOADING', { loading: true })
   await Bluebird.map(assets, async asset => {
     const addresses = await getters.client(network, walletId, asset).wallet.getUsedAddresses()
     const balance = addresses.length === 0
@@ -11,4 +11,6 @@ export const updateBalances = async ({ state, commit, getters }, { network, wall
 
     commit('UPDATE_BALANCE', { network, walletId, asset, balance })
   }, { concurrency: 1 })
+
+  commit('UPDATE_BALANCE_LOADING', { loading: false })
 }

src/store/migrations.js

@@ -35,6 +35,13 @@ const migrations = [
       }
       return { ...state, customTokens }
     }
+  },
+  { // Add updading balance flag
+    version: 4,
+    migrate: async (state) => {
+      state.updateBalanceLoading = false
+      return { ...state }
+    }
   }
 ]
 

src/store/mutations.js

@@ -68,6 +68,9 @@ export default {
 
     Vue.set(state.balances[network][walletId], asset, balance)
   },
+  UPDATE_BALANCE_LOADING (state, { loading }) {
+    state.updateBalanceLoading = loading
+  },
   UPDATE_FEES (state, { network, walletId, asset, fees }) {
     ensureNetworkWalletTree(state.fees, network, walletId, {})
 

src/store/state.js

@@ -22,6 +22,7 @@ export default {
 
   addresses: {},
   balances: {},
+  updateBalanceLoading: false,
   fiatRates: {},
   fees: {},
   history: {},

src/utils/coinFormatter.js

@@ -25,8 +25,16 @@ export const prettyBalance = (amount, coin) => {
 
 export const prettyFiatBalance = (amount, rate) => {
   if (!amount) return amount
-
   const fiatAmount = BN(amount).times(rate)
-
   return fiatAmount.toFormat(2, BN.ROUND_CEIL)
 }
+
+export const cryptoToFiat = (amount, rate) => {
+  if (!amount) return amount
+  return BN(amount).times(rate).toFormat(2, BN.ROUND_CEIL)
+}
+
+export const fiatToCrypto = (amount, rate) => {
+  if (!amount) return amount
+  return BN(amount).dividedBy(rate).dp(VALUE_DECIMALS, BN.ROUND_FLOOR)
+}

src/utils/history.js

@@ -1,3 +1,5 @@
+import moment from '@/utils/moment'
+
 export const SWAP_STATUS_STEP_MAP = {
   QUOTE: 0,
   SECRET_READY: 0,
@@ -123,3 +125,43 @@ export const getItemIcon = (name) => {
     return require('../assets/icons/blank_asset.svg?inline')
   }
 }
+
+export const applyActivityFilters = (activity, filters) => {
+  const { types, statuses, dates } = filters
+  let data = [...activity]
+  if (types.length > 0) {
+    data = data.filter(i => types.includes(i.type))
+  }
+
+  if (statuses.length > 0) {
+    data = data.filter(i => {
+      if (i.type === 'SWAP') {
+        return statuses.includes(SWAP_STATUS_FILTER_MAP[i.status])
+      }
+
+      if (i.type === 'SEND') {
+        return statuses.includes(SEND_STATUS_FILTER_MAP[i.status])
+      }
+
+      return true
+    })
+  }
+
+  if (dates.start) {
+    const filter = moment(dates.start)
+    data = data.filter(i => {
+      const start = moment(i.startTime)
+      return filter >= start
+    })
+  }
+
+  if (dates.end) {
+    const filter = moment(dates.end)
+    data = data.filter(i => {
+      const end = moment(i.startTime)
+      return filter <= end
+    })
+  }
+
+  return data
+}

src/views/Account.vue

@@ -5,7 +5,10 @@
     </NavBar>
     <div class="account_main">
       <div class="account_top">
-        <RefreshIcon @click="refresh" class="account_refresh-icon" />
+        <RefreshIcon @click.stop="refresh"
+                     class="account_refresh-icon"
+                     :class="{ 'infinity-rotate': updateBalanceLoading }"
+        />
         <div class="account_balance">
           <div v-if="fiatRates[asset]" class="account_balance_fiat">${{prettyFiatBalance(balance, fiatRates[asset])}}</div>
           <div>
@@ -33,7 +36,8 @@
         </div>
       </div>
       <div class="account_transactions">
-        <TransactionList :transactions="assetHistory" />
+        <ActivityFilter @filters-changed="applyFilters" :activity-data="activityData"/>
+        <TransactionList :transactions="activityData" />
       </div>
     </div>
   </div>
@@ -51,6 +55,8 @@ import { prettyBalance, prettyFiatBalance } from '@/utils/coinFormatter'
 import { shortenAddress } from '@/utils/address'
 import { getAssetIcon } from '@/utils/asset'
 import TransactionList from '@/components/TransactionList'
+import ActivityFilter from '@/components/ActivityFilter'
+import { applyActivityFilters } from '@/utils/history'
 
 export default {
   components: {
@@ -59,16 +65,27 @@ export default {
     SendIcon,
     ReceiveIcon,
     SwapIcon,
+    ActivityFilter,
     TransactionList
   },
   data () {
     return {
-      addressCopied: false
+      addressCopied: false,
+      activityData: []
     }
   },
   props: ['asset'],
   computed: {
-    ...mapState(['activeWalletId', 'activeNetwork', 'balances', 'addresses', 'history', 'fiatRates', 'marketData']),
+    ...mapState([
+      'activeWalletId',
+      'activeNetwork',
+      'balances',
+      'addresses',
+      'history',
+      'fiatRates',
+      'marketData',
+      'updateBalanceLoading'
+    ]),
     balance () {
       return prettyBalance(this.balances[this.activeNetwork][this.activeWalletId][this.asset], this.asset)
     },
@@ -106,12 +123,16 @@ export default {
     },
     refresh () {
       this.updateBalances({ network: this.activeNetwork, walletId: this.activeWalletId })
+    },
+    applyFilters (filters) {
+      this.activityData = applyActivityFilters([...this.assetHistory], filters)
     }
   },
   async created () {
     if (!this.address) {
       await this.getUnusedAddresses({ network: this.activeNetwork, walletId: this.activeWalletId, assets: [this.asset] })
     }
+    this.activityData = [...this.assetHistory]
   }
 }
 </script>