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

Feature swap screens

package.json

@@ -1,6 +1,6 @@
 {
   "name": "liquality-wallet",
-  "version": "0.10.3",
+  "version": "0.10.4",
   "private": true,
   "license": "MIT",
   "author": "Liquality <[email protected]>",
@@ -28,7 +28,7 @@
     "@liquality/bitcoin-swap-provider": "^0.8.4",
     "@liquality/client": "^0.8.4",
     "@liquality/crypto": "^0.8.4",
-    "@liquality/cryptoassets": "^0.3.3",
+    "@liquality/cryptoassets": "^0.3.4",
     "@liquality/ethereum-erc20-provider": "^0.8.4",
     "@liquality/ethereum-erc20-scraper-swap-find-provider": "^0.8.4",
     "@liquality/ethereum-erc20-swap-provider": "^0.8.4",

src/App.vue

@@ -39,4 +39,16 @@ export default {
   background: #ffffff;
   overflow: hidden;
 }
+
+@keyframes redraw {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: .99;
+  }
+}
+html {
+  animation: redraw 1s linear infinite;
+}
 </style>

src/assets/scss/style.scss

@@ -404,6 +404,12 @@ textarea {
   border-radius: 26px;
 }
 
+.btn {
+  &:focus {
+      box-shadow: none;
+  }
+}
+
 .btn-option {
   height: 20px;
   font-weight: 300 !important;
@@ -473,7 +479,7 @@ textarea {
 
 // remove error icon for all inputs
 .was-validated .form-control:invalid, .form-control.is-invalid {
-    padding-right: 1rem !important;
+    padding-right: 0rem !important;
     background-image: none !important;
 }
 

src/components/AssetList.vue

@@ -1,18 +1,21 @@
 <template>
- <div class="dropdown asset-list-search">
-  <button class="btn btn-icon dropdown-toggle"
+ <div class="dropdown asset-list-search"
+      v-click-away="hide">
+  <button class="btn dropdown-toggle"
           @click="toogle">
      <div class="form">
         <div class="input-group">
                 <img
-                :src="getAssetIcon(selectedAsset)"
+                :src="getAssetIcon(selected)"
                 class="asset-icon"
               />
               <span class="input-group-text">
-                    {{ selectedAsset }}
+                    {{ selected }}
               </span>
         </div>
       </div>
+       <ChevronUpIcon v-if="dropdownOpen" />
+        <ChevronDownIcon v-else />
   </button>
   <ul class="dropdown-menu" :class="{ show: dropdownOpen }">
     <li>
@@ -29,7 +32,7 @@
         </div>
       </div>
     </li>
-    <li v-for="asset in filteredItems" :key="asset">
+    <li v-for="(asset, key) in filteredItems" :key="key">
       <a class="dropdown-item"
          href="#"
          @click="selectItem(asset)">
@@ -42,6 +45,14 @@
            </div>
       </a>
     </li>
+    <li v-if="filteredItems.length <= 0">
+      <span class="dropdown-item"
+         href="#">
+           <div class="dropdown-item-asset-item">
+             No items
+           </div>
+      </span>
+    </li>
   </ul>
 </div>
 </template>
@@ -52,47 +63,67 @@ import {
   getAssetIcon
 } from '@/utils/asset'
 import SearchIcon from '@/assets/icons/search.svg'
+import ChevronDownIcon from '@/assets/icons/chevron_down.svg'
+import ChevronUpIcon from '@/assets/icons/chevron_up.svg'
+import clickAway from '@/directives/clickAway'
 
 export default {
+  directives: {
+    clickAway
+  },
   components: {
-    SearchIcon
+    SearchIcon,
+    ChevronDownIcon,
+    ChevronUpIcon
   },
-  props: ['assets', 'initialSelected'],
+  props: ['assets', 'selected'],
   data () {
     return {
-      selectedAsset: this.initialSelected,
       dropdownOpen: false,
       search: '',
       filteredItems: []
     }
   },
   computed: {
     items () {
-      return this.assets.filter(a => a !== this.selectedAsset)
+      return this.assets.filter(a => a !== this.selected)
     }
   },
   watch: {
-    serach: function (newSearch, oldSearch) {
+    search (newSearch, oldSearch) {
       if (newSearch && newSearch !== oldSearch) {
         this.filteredItems = this.items.filter(
           a => a.toUpperCase().includes(newSearch.toUpperCase())
         )
       } else {
         this.filteredItems = [...this.items]
       }
+    },
+    assets (newAssets, oldAssets) {
+      if (newAssets && newAssets !== oldAssets) {
+        if (this.search) {
+          this.filteredItems = this.items.filter(
+            a => a.toUpperCase().includes(this.search.toUpperCase())
+          )
+        } else {
+          this.filteredItems = [...this.items]
+        }
+      }
     }
   },
   methods: {
     getAssetColorStyle,
     getAssetIcon,
     selectItem (asset) {
-      this.selectedAsset = asset
       this.$emit('asset-changed', asset)
       this.dropdownOpen = false
+      this.filteredItems = this.assets.filter(a => a !== asset)
     },
     toogle () {
-      console.log('on toogle', this.items)
       this.dropdownOpen = !this.dropdownOpen
+    },
+    hide () {
+      this.dropdownOpen = false
     }
   },
   created () {
@@ -103,18 +134,48 @@ export default {
 
 <style lang="scss">
 .asset-list-search {
+  .dropdown-toggle {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+    font-weight: 300;
+    display: flex;
+    align-items: center;
+
+    &::after {
+      display: none;
+    }
+
+    .input-group-text {
+      margin-left: 5px;
+    }
+
+    svg {
+        width: 16px;
+        margin-left: 4px;
+    }
+  }
+
   .dropdown-menu {
     width: 215px;
+    max-height: 185px;
+    overflow: auto;
     border-radius: 0;
-    padding: 10px 0;
+    padding-top: 10px;
+    padding-bottom: 0;
     margin: 0;
+    border: 1px solid #D9DFE5;
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
 
     .dropdown-header {
       padding-left: 15px;
       padding-right: 15px;
 
       .input-group {
         align-items: center;
+
+        input {
+          padding-left: 20px;
+        }
         svg {
           position: absolute;
           left: 0;
@@ -126,12 +187,20 @@ export default {
     }
 
     .dropdown-item {
-      padding: 0.25rem 0;
+      padding: 0.438rem 0;
+      height: 30px;
       border-bottom: 1px solid $hr-border-color;
 
+      &:hover, &.active {
+        background-color: #F0F7F9;
+        color: $color-text-primary;
+      }
+
       .dropdown-item-asset-item {
         padding: 0 15px;
         img {
+          height: 16px;
+          width: 16px;
           margin-right: 5px;
         }
       }

src/components/FeeSelector.vue

@@ -32,7 +32,7 @@ export default {
         content += `${total} ${this.asset}`
         content += `<br />${totalFiat} USD`
       } else {
-        content += `${this.fees[name].fee} gwei`
+        content += `${this.fees[name].fee} ETH`
       }
 
       return `${content}</div>`

src/manifest.json

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

src/router/index.js

@@ -119,7 +119,7 @@ const routes = [
     props: true
   },
   {
-    path: '/account/:asset/swap',
+    path: '/account/:routeAsset/swap',
     component: Swap,
     props: true
   },

src/utils/export.js

@@ -8,24 +8,22 @@ export const exportToCSV = ({ filename, content }) => {
   link.remove()
 }
 
-export const getCSVContent = (data) => {
+export const getCSVContent = (data, headers) => {
   if (!data == null || !data.length) {
     return null
   }
 
   const columnDelimiter = ','
   const lineDelimiter = '\n'
 
-  const keys = Object.keys(data[0])
-
-  let result = `${keys.join(columnDelimiter)}${lineDelimiter}`
+  let result = `${headers.map(h => (h.label)).join(columnDelimiter)}${lineDelimiter}`
 
   data.forEach((item) => {
     let ctr = 0
-    keys.forEach((key) => {
+    headers.forEach((header) => {
       if (ctr > 0) result += columnDelimiter
 
-      result += item[key]
+      result += item[header.key]
       ctr++
     })
     result += lineDelimiter