Merge branch 'master' of github.com:paytaca/paytaca-app

src/App.vue

@@ -8,6 +8,12 @@
 export default {
   name: 'App',
 
+  data() {
+    return {
+      assetPricesUpdateIntervalId: null
+    }
+  },
+
   mounted () {
     const vm = this
     if (vm.$q.platform.is.bex) {
@@ -38,6 +44,20 @@ export default {
       })
     }
   },
+  unmounted() {
+    if (this.assetPricesUpdateIntervalId) clearInterval(this.assetPricesUpdateIntervalId)
+  },
+  mounted () {
+    this.$store.dispatch('market/updateCoinsList', { force: false })
+      .finally(() => {
+        this.$store.dispatch('market/updateAssetPrices', {})
+        this.assetPricesUpdateIntervalId = setInterval(() => {
+          this.$store.dispatch('market/updateAssetPrices', {})
+        }, 60 * 1000)
+      })
+
+    this.$store.dispatch('market/updateSupportedCurrencies', {})
+  },
   created () {
     const vm = this
     setTimeout(function () {

src/components/asset-cards.vue

@@ -16,18 +16,21 @@
         style="float: right; width: 20px; margin-top: -10px;">
         <q-btn icon="close" flat round dense v-close-popup />
       </div>
-      <div class="row items-start no-wrap justify-between">
+      <div class="row items-start no-wrap justify-between" style="margin-top: -6px;">
         <img :src="asset.logo || getFallbackAssetLogo(asset)" height="30" class="q-mr-xs">
         <p class="col q-pl-sm" style="overflow: hidden; text-overflow: ellipsis; color: #EAEEFF; font-size: 22px; text-align: right;">
           {{ asset.symbol }}
         </p>
       </div>
-      <div class="row">
+      <div class="row" style="margin-top: -7px;">
         <q-space />
         <p class="float-right text-num-lg text-no-wrap" style="overflow: hidden; text-overflow: ellipsis; color: #EAEEFF; margin-top: -5px;">
           {{ String(asset.balance).substring(0, 10) }}
         </p>
       </div>
+      <div v-if="getAssetMarketBalance(asset)" class="text-caption text-right" style="overflow: hidden; text-overflow: ellipsis; color: #EAEEFF; margin-top: -18px;">
+        {{ getAssetMarketBalance(asset) }} {{ String(selectedMarketCurrency).toUpperCase() }}
+      </div>
     </div>
     <button class="q-ml-sm" style="border: none; background-color: transparent"></button>
   </div>
@@ -55,9 +58,24 @@ export default {
   computed: {
     isSep20 () {
       return this.network === 'sBCH'
+    },
+    selectedMarketCurrency() {
+      return this.$store.getters['market/selectedCurrency']
+    },
+    marketAssetPrices() {
+      return this.$store.getters['market/assetPrices']
     }
   },
   methods: {
+    getAssetMarketBalance(asset) {
+      if (!asset || !asset.id) return ''
+
+      const assetPrice = this.marketAssetPrices.find(assetPrice => assetPrice.assetId === asset.id)
+      if (!assetPrice || !assetPrice.prices || !assetPrice.prices[this.selectedMarketCurrency]) return ''
+      const computedBalance = Number(asset.balance || 0) * Number(assetPrice.prices[this.selectedMarketCurrency])
+
+      return computedBalance.toFixed(2)
+    },
     getFallbackAssetLogo(asset) {
       const logoGenerator = this.$store.getters['global/getDefaultAssetLogo']
       return logoGenerator(String(asset && asset.id))
@@ -111,6 +129,7 @@ export default {
         }
         if (details.symbol.length > 0 && details.token_type === 1) {
           vm.$store.commit('assets/addNewAsset', asset)
+          vm.$store.dispatch('market/updateAssetPrices', { clearExisting: true })
         }
       })
     },
@@ -126,6 +145,7 @@ export default {
             logo: '',
             balance: 0,
           })
+          vm.$store.dispatch('market/updateAssetPrices', { clearExisting: true })
         }
       })
     },

src/pages/apps/settings.vue

@@ -33,6 +33,42 @@
                 </q-item>
               </q-list>
           </div>
+
+          <div class="col-12 q-px-lg q-mt-md">
+              <p class="q-px-sm q-my-sm dim-text text-h6" :class="{'pt-dark-label': $q.dark.mode}">WALLET</p>
+              <q-list bordered separator padding style="border-radius: 14px; background: #fff" :class="{'pt-dark-card': $q.dark.mode}">
+                <q-item>
+                    <q-item-section>
+                        <q-item-label class="pt-setting-menu" :class="{'pt-dark-label': $q.dark.mode}">Currency</q-item-label>
+                    </q-item-section>
+                    <q-item-section side>
+                      <q-select
+                        use-input
+                        fill-input
+                        hide-selected
+                        borderless
+                        :option-label="opt => String(opt).toUpperCase()"
+                        v-model="selectedCurrency"
+                        :options="filteredCurrencyOptions"
+                        @filter="filterCurrencyOptionSelection"
+                      >
+                        <template v-slot:option="scope">
+                          <q-item
+                            v-bind="scope.itemProps"
+                            v-on="scope.itemEvents"
+                          >
+                            <q-item-section>
+                              <q-item-label :class="{ 'text-black': !$q.dark.mode && !scope.selected }">
+                                {{ String(scope.opt).toUpperCase() }}
+                              </q-item-label>
+                            </q-item-section>
+                          </q-item>
+                        </template>
+                      </q-select>
+                    </q-item-section>
+                </q-item>
+              </q-list>
+          </div>
       </div>
 
       <securityOptionDialog :security-option-dialog-status="securityOptionDialogStatus" v-on:preferredSecurity="setPreferredSecurity" />
@@ -57,16 +93,44 @@ export default {
       securityOptionDialogStatus: 'dismiss',
       securityAuth: false,
       pinStatus: true,
-      darkMode: this.$q.dark.mode
+      darkMode: this.$q.dark.mode,
+      filteredCurrencyOptions: [],
     }
   },
   components: { HeaderNav, pinDialog, securityOptionDialog },
   watch: {
     darkMode (newVal, oldVal) {
       this.$q.dark.set(newVal)
+    },
+    selectedCurrency() {
+      this.$store.dispatch('market/updateAssetPrices', {})
     }
   },
+  computed: {
+    currencyOptions () {
+      return this.$store.getters['market/currencyOptions']
+    },
+    selectedCurrency: {
+      get() {
+        return this.$store.getters['market/selectedCurrency']
+      },
+      set(value) {
+        this.$store.commit('market/updateSelectedCurrency', value)
+      }
+    },
+  },
   methods: {
+    filterCurrencyOptionSelection (val, update) {
+      if (!val) {
+        this.filteredCurrencyOptions =  this.currencyOptions
+      } else {
+        const needle = String(val).toLowerCase()
+        this.filteredCurrencyOptions =  this.currencyOptions
+          .filter(currency => String(currency).toLowerCase().indexOf(needle) >= 0)
+      }
+
+      update()
+    },
     popUpPinDialog () {
       this.pinDialogAction = 'SET NEW'
     },

src/pages/transaction/index.vue

@@ -6,7 +6,7 @@
     <div v-else>
 
       <div class="fixed-container" :class="{'pt-dark': $q.dark.mode}" :style="{width: $q.platform.is.bex ? '375px' : '100%', margin: '0 auto'}">
-        <div class="row q-pt-lg">
+        <div class="row q-pt-lg q-pb-xs">
 
           <!-- <p class="col-12 q-px-lg q-ma-none text-subtitle1" role="button" @click="promptChangeNetwork()">
             <span
@@ -36,13 +36,16 @@
               </span>
               <span v-else>{{ String(selectedAsset.balance).substring(0, 10) }}</span>
             </p>
+            <div v-if="selectedAssetMarketBalance" class="text-caption pp-text" style="margin-top:-30px;">
+              {{ selectedAssetMarketBalance }} {{ String(selectedMarketCurrency).toUpperCase() }}
+            </div>
           </div>
           <div class="q-space q-pr-lg">
             <p class="text-right text-light p-label" style="color: #ABA9BB;">{{ today }}</p>
             <img class="float-right q-mt-sm" :src="selectedAsset.logo || getFallbackAssetLogo(selectedAsset)" height="50">
           </div>
         </div>
-        <div class="row">
+        <div class="row q-mt-sm">
           <div class="col">
             <p class="q-ml-lg q-mb-sm payment-methods" :class="{'pt-dark-label': $q.dark.mode}">
               Assets
@@ -212,7 +215,24 @@ export default {
         }
       })
     },
+    selectedAssetMarketPrice() {
+      if (!this.selectedAsset || !this.selectedAsset.id) return
 
+      return this.$store.getters['market/assetPrices'].find(assetPrice => assetPrice.assetId === this.selectedAsset.id)
+    },
+    selectedMarketCurrency() {
+      return this.$store.getters['market/selectedCurrency']
+    },
+    selectedAssetMarketBalance () {
+      console.log(this.selectedAssetMarketPrice)
+      if (!this.selectedAsset) return ''
+      if (!this.selectedAssetMarketPrice) return ''
+      if (!this.selectedAssetMarketPrice.prices) return ''
+      if (!this.selectedAssetMarketPrice.prices[this.selectedMarketCurrency]) return ''
+      const computedBalance = Number(this.selectedAsset.balance || 0) * Number(this.selectedAssetMarketPrice.prices[this.selectedMarketCurrency])
+
+      return computedBalance.toFixed(2)
+    },
     earliestBlock () {
       if (!Array.isArray(this.transactions) || !this.transactions.length) return 0
       return Math.min(

src/pages/transaction/send.vue

@@ -68,6 +68,9 @@
           <div class="row" v-if="!isNFT">
             <div class="col q-mt-md">
               <q-input type="text" inputmode="tel" ref="amount" @focus="readonlyState(true)" @blur="readonlyState(false)" outlined v-model="sendData.amount" label="Amount" :disabled="disableAmountInput" :readonly="disableAmountInput"></q-input>
+              <div v-if="sendAmountMarketValue" class="text-body2 text-grey q-mt-sm q-px-sm">
+                ~ {{ sendAmountMarketValue }} {{ String(selectedMarketCurrency).toUpperCase() }}
+              </div>
             </div>
           </div>
           <div class="row" v-if="!isNFT">
@@ -262,6 +265,25 @@ export default {
 
       return this.tokenType === 65
     },
+    selectedAssetMarketPrice() {
+      if (!this.assetId) return
+
+      return this.$store.getters['market/assetPrices'].find(assetPrice => assetPrice.assetId === this.assetId)
+    },
+    selectedMarketCurrency() {
+      return this.$store.getters['market/selectedCurrency']
+    },
+    sendAmountMarketValue() {
+      const parsedAmount = Number(this.sendData.amount)
+      if (!parsedAmount) return ''
+      if (!this.selectedAssetMarketPrice) return ''
+      if (!this.selectedAssetMarketPrice.prices) return ''
+      if (!this.selectedAssetMarketPrice.prices[this.selectedMarketCurrency]) return ''
+      const computedBalance = Number(parsedAmount || 0) * Number(this.selectedAssetMarketPrice.prices[this.selectedMarketCurrency])
+      if (!computedBalance) return ''
+
+      return computedBalance.toFixed(2)
+    },
     disableRecipientInput () {
       return this.sendData.sent || this.sendData.fixedRecipientAddress || this.scannedRecipientAddress
     },

src/store/assets/state.js

@@ -8,26 +8,19 @@ export default function () {
         logo: 'bch-logo.png',
         balance: 0
       },
-      {
-        id: 'slp/4de69e374a8ed21cbddd47f2338cc0f479dc58daa2bbe11cd604ca488eca0ddf',
-        symbol: 'SPICE',
-        name: 'SPICE',
-        logo: 'spice-logo.png',
-        balance: 0
-      },
-      {
-        id: 'slp/a013d636dcadc71f7e11d7880e9e8b62295e772cf1a24180f74d0eca62604136',
-        symbol: 'ORB',
-        name: 'ORB',
-        logo: 'orb-logo.png',
-        balance: 0
-      },
       {
         id: 'slp/dd21be4532d93661e8ffe16db6535af0fb8ee1344d1fef81a193e2b4cfa9fbc9',
         symbol: 'flexUSD',
         name: 'flexUSD',
         logo: 'flexusd-logo.png',
         balance: 0
+      },
+      {
+        id: 'slp/4de69e374a8ed21cbddd47f2338cc0f479dc58daa2bbe11cd604ca488eca0ddf',
+        symbol: 'SPICE',
+        name: 'SPICE',
+        logo: 'spice-logo.png',
+        balance: 0
       }
     ]
   }

src/store/index.js

@@ -3,6 +3,7 @@ import Vuex from 'vuex'
 import createPersistedState from 'vuex-persistedstate'
 
 import global from './global'
+import market from './market'
 import assets from './assets'
 import sep20 from './sep20'
 
@@ -23,6 +24,7 @@ export default function (/* { ssrContext } */) {
     modules: {
       global,
       assets,
+      market,
       sep20
     },