Merge pull request #22 from liquality/feature-swap-screens

Feature ui fixes and swap screens

package.json

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

src/assets/scss/style.scss

@@ -500,4 +500,9 @@ svg.qr-icon {
 
 .btn-footer {
  width: 9.5rem;
+}
+
+.selectors-asset {
+  width: 40px;
+  font-weight: bold;
 }

src/build.config.js

@@ -1,7 +1,7 @@
 export default {
   defaultAssets: {
-    mainnet: ['BTC', 'ETH', 'DAI', 'USDC', 'USDT', 'WBTC', 'UNI'],
-    testnet: ['BTC', 'ETH', 'DAI']
+    mainnet: ['BTC', 'ETH', 'DAI', 'USDC', 'USDT', 'WBTC', 'UNI', 'RBTC'],
+    testnet: ['BTC', 'ETH', 'DAI', 'RBTC']
   },
   agentEndpoints: {
     testnet: ['https://liquality.io/swap-testnet-dev/agent'],

src/components/AssetList.vue

@@ -0,0 +1,141 @@
+<template>
+ <div class="dropdown asset-list-search">
+  <button class="btn btn-icon dropdown-toggle"
+          @click="toogle">
+     <div class="form">
+        <div class="input-group">
+                <img
+                :src="getAssetIcon(selectedAsset)"
+                class="asset-icon"
+              />
+              <span class="input-group-text">
+                    {{ selectedAsset }}
+              </span>
+        </div>
+      </div>
+  </button>
+  <ul class="dropdown-menu" :class="{ show: dropdownOpen }">
+    <li>
+      <div class="form dropdown-header">
+        <div class="input-group">
+              <SearchIcon/>
+              <input
+                type="text"
+                class="form-control form-control-sm"
+                v-model="search"
+                placeholder="Search"
+                autocomplete="off"
+              />
+        </div>
+      </div>
+    </li>
+    <li v-for="asset in filteredItems" :key="asset">
+      <a class="dropdown-item"
+         href="#"
+         @click="selectItem(asset)">
+           <div class="dropdown-item-asset-item">
+             <img
+                :src="getAssetIcon(asset)"
+                class="asset-icon"
+              />
+              {{ asset }}
+           </div>
+      </a>
+    </li>
+  </ul>
+</div>
+</template>
+
+<script>
+import {
+  getAssetColorStyle,
+  getAssetIcon
+} from '@/utils/asset'
+import SearchIcon from '@/assets/icons/search.svg'
+
+export default {
+  components: {
+    SearchIcon
+  },
+  props: ['assets', 'initialSelected'],
+  data () {
+    return {
+      selectedAsset: this.initialSelected,
+      dropdownOpen: false,
+      search: '',
+      filteredItems: []
+    }
+  },
+  computed: {
+    items () {
+      return this.assets.filter(a => a !== this.selectedAsset)
+    }
+  },
+  watch: {
+    serach: function (newSearch, oldSearch) {
+      if (newSearch && newSearch !== oldSearch) {
+        this.filteredItems = this.items.filter(
+          a => a.toUpperCase().includes(newSearch.toUpperCase())
+        )
+      } else {
+        this.filteredItems = [...this.items]
+      }
+    }
+  },
+  methods: {
+    getAssetColorStyle,
+    getAssetIcon,
+    selectItem (asset) {
+      this.selectedAsset = asset
+      this.$emit('asset-changed', asset)
+      this.dropdownOpen = false
+    },
+    toogle () {
+      console.log('on toogle', this.items)
+      this.dropdownOpen = !this.dropdownOpen
+    }
+  },
+  created () {
+    this.filteredItems = [...this.items]
+  }
+}
+</script>
+
+<style lang="scss">
+.asset-list-search {
+  .dropdown-menu {
+    width: 215px;
+    border-radius: 0;
+    padding: 10px 0;
+    margin: 0;
+
+    .dropdown-header {
+      padding-left: 15px;
+      padding-right: 15px;
+
+      .input-group {
+        align-items: center;
+        svg {
+          position: absolute;
+          left: 0;
+          top: 5px;
+          width: 16px;
+          margin-right: 8px;
+        }
+      }
+    }
+
+    .dropdown-item {
+      padding: 0.25rem 0;
+      border-bottom: 1px solid $hr-border-color;
+
+      .dropdown-item-asset-item {
+        padding: 0 15px;
+        img {
+          margin-right: 5px;
+        }
+      }
+    }
+}
+}
+</style>

src/components/FeeSelector.vue

@@ -3,7 +3,7 @@
     <label class="btn btn-option btn-option-lg"
         v-for="name in ['slow', 'average', 'fast']" :key="name"
         :class="{ active: (name === value)}"
-        v-tooltip="{ content: getTooltip(name)} "
+        v-tooltip="{ content: getTooltip(name) }"
         v-on:click="$emit('input', name)">
         <input type="radio" name="fee" autocomplete="off" :checked="name === value"> {{name}}
     </label>
@@ -31,6 +31,8 @@ export default {
         const totalFiat = prettyFiatBalance(total, this.fiatRates[this.asset])
         content += `${total} ${this.asset}`
         content += `<br />${totalFiat} USD`
+      } else {
+        content += `${this.fees[name].fee} gwei`
       }
 
       return `${content}</div>`

src/components/ListItem.vue

@@ -92,11 +92,15 @@ export default {
     width: 28px;
     height: 28px;
     margin-right: 8px;
+    display: flex;
+    align-items: center;
   }
 
    .list-item-detail-icon {
     width: 28px;
     height: 28px;
+    display: flex;
+    align-items: center;
     margin-right: 12px;
     margin-left: 12px;
   }

src/components/TransactionList.vue

@@ -4,6 +4,7 @@
       v-for="item in transactions"
       :key="item.id"
       :to="getDetailsUrl(item)"
+      :itemClass="{ 'text-danger': item.error }"
     >
       <template #icon>
         <img :src="getTypeIcon(item.type)" />
@@ -16,7 +17,9 @@
         {{ getDetail(item) }}
       </template>
       <template #detail-sub>
-       <span v-if="getUIStatus(item) === 'COMPLETED'"> ${{ item.fromUsdValue }} </span>
+       <span v-if="getUIStatus(item) === 'COMPLETED'">
+         ${{ getCompletedAmount(item) }}
+       </span>
        <span v-else> {{ getDetailSub(item) }} </span>
       </template>
       <template #detail-icon>
@@ -36,23 +39,29 @@ import TransactionStatus from '@/components/TransactionStatus'
 import {
   getItemIcon,
   getStep,
-  ACTIVITY_FILTER_STATUSES,
+  ACTIVITY_STATUSES,
   ACTIVITY_FILTER_TYPES,
   SEND_STATUS_FILTER_MAP,
   SWAP_STATUS_FILTER_MAP
 } from '@/utils/history'
-import { prettyBalance } from '@/utils/coinFormatter'
+import { prettyBalance, prettyFiatBalance } from '@/utils/coinFormatter'
 import moment from '@/utils/moment'
+import { mapState } from 'vuex'
+import { getChainFromAsset } from '@/utils/asset'
 
 export default {
   components: {
     ListItem,
     TransactionStatus
   },
   props: ['transactions'],
+  computed: {
+    ...mapState(['fiatRates'])
+  },
   methods: {
     getItemIcon,
     prettyBalance,
+    prettyFiatBalance,
     getTitle (item) {
       switch (item.type) {
         case 'SWAP':
@@ -76,7 +85,7 @@ export default {
       const status = this.getUIStatus(item)
 
       if (status) {
-        const filterStatus = ACTIVITY_FILTER_STATUSES[status]
+        const filterStatus = ACTIVITY_STATUSES[status]
         if (filterStatus) {
           return filterStatus.label
         }
@@ -92,8 +101,8 @@ export default {
     },
     getDetailsUrl (item) {
       return {
-        SEND: `/details/${item.id}/transaction`,
-        SWAP: `/details/${item.id}/swap`
+        SEND: `/details/transaction/${item.id}`,
+        SWAP: `/details/swap/${item.id}`
       }[item.type]
     },
     getTypeIcon (type) {
@@ -112,6 +121,11 @@ export default {
         default:
           return 0
       }
+    },
+    getCompletedAmount (item) {
+      const amount = item.type === 'SWAP' ? item.fromAmount : item.amount
+      const assetChain = getChainFromAsset(item.from)
+      return prettyFiatBalance(prettyBalance(amount, item.from), this.fiatRates[assetChain])
     }
   }
 }

src/components/TransactionStatus.vue

@@ -1,10 +1,11 @@
 <template>
     <div class="transaction-status">
         <div class="transaction-confirming" v-if="error || status === 'NEEDS_ATTENTION'">
-            <NeedsAttentionIcon />
+            <SpinnerIcon />
             <span class="transaction-steps" v-if="totalSteps > 2">
                 {{ step }} / {{ totalSteps }}
             </span>
+            <span class="error-indicator"></span>
         </div>
         <CompletedIcon v-else-if="status === 'COMPLETED'" />
         <RefundedIcon v-else-if="status === 'REFUNDED'" />
@@ -21,15 +22,13 @@
 
 import CompletedIcon from '@/assets/icons/completed.svg'
 import SpinnerIcon from '@/assets/icons/spinner.svg'
-import NeedsAttentionIcon from '@/assets/icons/needs_attention.svg'
 import RefundedIcon from '@/assets/icons/refunded.svg'
 import CanceledIcon from '@/assets/icons/canceled.svg'
 
 export default {
   components: {
     CompletedIcon,
     SpinnerIcon,
-    NeedsAttentionIcon,
     RefundedIcon,
     CanceledIcon
   },
@@ -39,18 +38,31 @@ export default {
 
 <style lang="scss">
 .transaction-status {
-  grid-area: status;
-  justify-self: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
   svg {
     width: 30px;
     height: 30px;
+    vertical-align: middle;
   }
 
   .transaction-confirming {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     position: relative;
   }
 
+  .error-indicator {
+    position: absolute;
+    top: 13px;
+    left: 27px;
+    border: solid 3px #F41973;
+    border-radius: 100%;
+  }
+
   .transaction-steps {
     position: absolute;
     display: flex;

src/manifest.json

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