Merge pull request #51 from liquality/fix-prod-bugs

Fix prod bugs

package.json

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

src/manifest.json

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

src/utils/asset.js

@@ -52,7 +52,11 @@ export const getChainFromAsset = asset => {
 
 export const getAssetColorStyle = asset => {
   const assetData = cryptoassets[asset]
-  if (assetData.color) return { color: assetData.color }
+  if (assetData && assetData.color) {
+    return { color: assetData.color }
+  }
+  // return black as default
+  return { color: '#000000' }
 }
 
 export const getTransactionExplorerLink = (hash, asset, network) => {

src/utils/coinFormatter.js

@@ -16,26 +16,26 @@ export const dpUI = (amount, dp = VALUE_DECIMALS) => {
 }
 
 export const prettyBalance = (amount, coin, dp = VALUE_DECIMALS) => {
-  if (!amount) return amount
+  if (!amount || !coin) return amount
 
   amount = cryptoassets[coin].unitToCurrency(amount)
 
   return dpUI(amount, dp)
 }
 
 export const prettyFiatBalance = (amount, rate) => {
-  if (!amount) return amount
+  if (!amount || !rate) return amount
   const fiatAmount = BN(amount).times(rate)
   return fiatAmount.toFormat(2, BN.ROUND_CEIL)
 }
 
 export const cryptoToFiat = (amount, rate) => {
-  if (!amount) return amount
+  if (!amount || !rate) return amount
   return BN(amount).times(rate)
 }
 
 export const fiatToCrypto = (amount, rate) => {
-  if (!amount) return amount
+  if (!amount || !rate) return amount
   return BN(amount).dividedBy(rate).dp(VALUE_DECIMALS, BN.ROUND_FLOOR)
 }
 

src/views/Account.vue

@@ -10,9 +10,17 @@
                      :class="{ 'infinity-rotate': updatingBalances }"
         />
         <div class="account_balance">
-          <div v-if="fiatRates[asset]" class="account_balance_fiat">${{prettyFiatBalance(balance, fiatRates[asset])}}</div>
+          <div class="account_balance_fiat">
+            <span v-if="fiatRates[asset]" >
+              ${{prettyFiatBalance(balance, fiatRates[asset])}}
+            </span>
+            <span v-else>&nbsp;</span>
+          </div>
           <div>
-            <span class="account_balance_value">{{balance}}</span>
+            <span class="account_balance_value"
+                  :style="{ fontSize: balanceFontSize }">
+              {{balance}}
+            </span>
             <span class="account_balance_code">{{asset}}</span>
           </div>
         </div>
@@ -104,6 +112,16 @@ export default {
     },
     assetHistory () {
       return this.activity.filter((item) => item.from === this.asset)
+    },
+    balanceFontSize () {
+      let fontSize = 50
+      if (this.balance.length > 6) {
+        fontSize = 30
+      } else if (this.balance.length > 13) {
+        fontSize = 15
+      }
+
+      return `${fontSize}px`
     }
   },
   methods: {
@@ -178,12 +196,12 @@ export default {
 
   &_balance {
     &_fiat {
+      min-height: 15px;
       margin-bottom: 6px;
     }
 
     &_value {
       line-height: 36px;
-      font-size: 50px;
       margin-right: 8px;
     }
 

src/views/Receive.vue

@@ -9,7 +9,7 @@
       <div class="wrapper_top form">
         <div class="form-group">
           <div class="receive_asset"><img :src="getAssetIcon(asset)" class="asset-icon" /></div>
-          <label>Your Current {{addressType}} Address</label>
+          <label>Your Current {{asset}} Address</label>
           <p class="receive_address">{{address}}
             <CopyIcon
                   class="copy-icon"
@@ -22,10 +22,13 @@
           </p>
           <p class="receive_message">Scan this QR code with a mobile wallet to send funds to this address.</p>
           <div v-if="qrcode" v-html="qrcode" class="receive_qr"></div>
-          <div v-if="activeNetwork === 'testnet'" class="testnet_message">
-            <div>Ether testnet faucet</div>
+          <div v-if="faucet" class="testnet_message">
+            <div>{{ faucet.name }} testnet faucet</div>
             <div>
-              <a href="https://faucet.rinkeby.io/" target="_blank">https://faucet.rinkeby.io/</a>
+              <a :href="faucet.url"
+                 target="_blank">
+                 {{ faucet.url }}
+              </a>
             </div>
           </div>
         </div>
@@ -51,7 +54,10 @@
 <script>
 import { mapActions, mapState } from 'vuex'
 import QRCode from 'qrcode'
-import { getAssetIcon } from '@/utils/asset'
+import {
+  getAssetIcon,
+  getChainFromAsset
+} from '@/utils/asset'
 import NavBar from '@/components/NavBar'
 import CopyIcon from '@/assets/icons/copy.svg'
 import CopyWhiteIcon from '@/assets/icons/copy_white.svg'
@@ -84,20 +90,23 @@ export default {
       return address && cryptoassets[this.asset].formatAddress(address)
     },
     chainName () {
+      const assetChain = getChainFromAsset(this.asset)
       return ({
         BTC: 'bitcoin',
         ETH: 'ethereum',
         RBTC: 'ethereum'
-      })[this.asset]
+      })[assetChain]
     },
-    addressType () {
-      return ({
-        BTC: 'bitcoin',
-        ETH: 'ethereum',
-        RBTC: 'RSK'
-      })[this.asset]
+    faucet () {
+      if (this.activeNetwork === 'testnet') {
+        return ({
+          BTC: { name: 'Bitcoin', url: 'https://testnet-faucet.mempool.co/' },
+          ETH: { name: 'Ether', url: 'https://faucet.rinkeby.io/' },
+          RBTC: { name: 'RBTC/RSK', url: 'https://faucet.rsk.co/' }
+        })[this.asset]
+      }
+      return null
     }
-
   },
   async created () {
     await this.getUnusedAddresses({ network: this.activeNetwork, walletId: this.activeWalletId, assets: [this.asset] })

src/views/Send.vue

@@ -289,12 +289,14 @@ export default {
     txType () {
       return TX_TYPES.SEND
     },
-    totalFee () {
+    sendFee () {
       const feePrice = this.feesAvailable
         ? this.assetFees[this.selectedFee].fee
         : 0
-      const sendFee = getTxFee(this.assetChain, TX_TYPES.SEND, feePrice)
-      return sendFee.toString().substring(0, 8)
+      return getTxFee(this.assetChain, TX_TYPES.SEND, feePrice)
+    },
+    totalFee () {
+      return this.sendFee.toString().substring(0, 8)
     },
     available () {
       const balance = this.balances[this.activeNetwork][this.activeWalletId][
@@ -323,7 +325,8 @@ export default {
       return getFeeLabel(this.selectedFee)
     },
     totalToSendInFiat () {
-      return prettyFiatBalance(this.amountWithFee, this.fiatRates[this.assetChain])
+      const total = BN(this.amount).plus(BN(this.sendFee))
+      return prettyFiatBalance(total, this.fiatRates[this.asset])
     },
     amountWithFee () {
       return BN(this.amount).plus(BN(this.totalFee))