Merge pull request #45 from liquality/fix-rsk-label-map

fix rsk label map in settings screen

package.json

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

src/components/AssetDropdown.vue

@@ -6,11 +6,11 @@
      <div class="form">
         <div class="input-group">
                 <img
-                :src="getAssetIcon(selected)"
+                :src="getAssetIcon(selected.name)"
                 class="asset-icon"
               />
               <span class="input-group-text">
-                    {{ selected }}
+                    {{ selected.label }}
               </span>
         </div>
       </div>
@@ -32,16 +32,16 @@
         </div>
       </div>
     </li>
-    <li v-for="(asset, key) in filteredItems" :key="key">
+    <li v-for="asset in filteredItems" :key="asset.name">
       <a class="dropdown-item"
          href="#"
          @click="selectItem(asset)">
            <div class="dropdown-item-asset-item">
              <img
-                :src="getAssetIcon(asset)"
+                :src="getAssetIcon(asset.name)"
                 class="asset-icon"
               />
-              {{ asset }}
+              {{ asset.label }}
            </div>
       </a>
     </li>
@@ -86,14 +86,14 @@ export default {
   },
   computed: {
     items () {
-      return this.assets.filter(a => a !== this.selected)
+      return this.assets.filter(a => a.name !== this.selected.name)
     }
   },
   watch: {
     search (newSearch, oldSearch) {
       if (newSearch && newSearch !== oldSearch) {
         this.filteredItems = this.items.filter(
-          a => a.toUpperCase().includes(newSearch.toUpperCase())
+          a => a.name.toUpperCase().includes(newSearch.toUpperCase())
         )
       } else {
         this.filteredItems = [...this.items]
@@ -103,7 +103,7 @@ export default {
       if (newAssets && newAssets !== oldAssets) {
         if (this.search) {
           this.filteredItems = this.items.filter(
-            a => a.toUpperCase().includes(this.search.toUpperCase())
+            a => a.name.toUpperCase().includes(this.search.toUpperCase())
           )
         } else {
           this.filteredItems = [...this.items]
@@ -117,7 +117,7 @@ export default {
     selectItem (asset) {
       this.$emit('asset-changed', asset)
       this.dropdownOpen = false
-      this.filteredItems = this.assets.filter(a => a !== asset)
+      this.filteredItems = this.assets.filter(a => a.name !== asset.name)
     },
     toogle () {
       this.dropdownOpen = !this.dropdownOpen

src/manifest.json

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

src/views/Settings.vue

@@ -18,7 +18,7 @@
         </div>
         <div class="setting-item_control">
           <AssetDropdown :assets="ethereumAssets"
-                         :selected="injectEthereumAsset"
+                         :selected="selectedAsset"
                          @asset-changed="updateInjectEthereumAsset" />
         </div>
       </div>
@@ -46,13 +46,17 @@ export default {
     ...mapState(['activeNetwork', 'activeWalletId', 'injectEthereum', 'injectEthereumAsset']),
     ethereumAssets () {
       return Object.keys(cryptoassets)
-        .filter(isEthereumChain).map(a => {
-          if (a === 'RBTC') {
-            return 'RSK'
-          }
-          return a
+        .filter(isEthereumChain)
+        .map(asset => {
+          const label = this.getLabel(asset)
+          return { name: asset, label }
         })
     },
+    selectedAsset () {
+      const label = this.getLabel(this.injectEthereumAsset)
+      const name = this.injectEthereumAsset === 'RSK' ? 'RBTC' : this.injectEthereumAsset
+      return { name, label }
+    },
     appVersion () {
       return version
     }
@@ -64,11 +68,10 @@ export default {
       else this.disableEthereumInjection()
     },
     updateInjectEthereumAsset (asset) {
-      // Update back to RBTC as asset
-      if (asset === 'RSK') {
-        asset = 'RBTC'
-      }
-      this.setEthereumInjectionAsset({ asset })
+      this.setEthereumInjectionAsset({ asset: asset.name })
+    },
+    getLabel (asset) {
+      return asset === 'RBTC' ? 'RSK' : asset
     }
   }
 }

src/views/Swap.vue

@@ -26,8 +26,8 @@
             </div>
             <div class="input-group swap_asset">
               <div class="input-group-append">
-                <AssetDropdown :assets="assets"
-                           :selected="asset"
+                <AssetDropdown :assets="assetList"
+                           :selected="{name: asset, label: asset}"
                            @asset-changed="setAsset"
                            :show-search="true"
                 />
@@ -112,8 +112,8 @@
             </div>
             <div class="input-group swap_asset">
               <div class="input-group-append">
-                <AssetDropdown :assets="toAssets"
-                          :selected="toAsset"
+                <AssetDropdown :assets="toAssetList"
+                          :selected="{name: toAsset, label: toAsset}"
                           @asset-changed="setToAsset"
                           :show-search="true"
                 />
@@ -678,6 +678,12 @@ export default {
         prettyFiatBalance(this.totalFees[this.toAssetChain], this.fiatRates[this.toAssetChain])
       )
       return amount.toFormat(2)
+    },
+    assetList () {
+      return this.assets.map(a => ({ name: a, label: a }))
+    },
+    toAssetList () {
+      return this.toAssets.map(a => ({ name: a, label: a }))
     }
   },
   methods: {
@@ -712,7 +718,7 @@ export default {
       }
     },
     setToAsset (val) {
-      this.toAsset = val
+      this.toAsset = val.name
       if (this.amountOption === 'max') {
         this.sendAmount = this.max
       } else {
@@ -722,7 +728,7 @@ export default {
       this.resetFees()
     },
     setAsset (val) {
-      this.asset = val
+      this.asset = val.name
       this.toAsset = Object.keys(this.selectedMarket)[0]
       this.sendAmount = this.min
       this.resetFees()