Refactoring/format money

CHANGELOG.md

@@ -8,6 +8,13 @@ Please check our [developers guide](https://gitlab.com/tokend/developers-guide)
 for further information about branching and tagging conventions.
 
 ## [Unreleased]
+#### Changed
+- Move formatNumber filter to helper
+- Move formatPercent to formatNumber helper
+- Move formatInteger to formatNumber helper
+- Move cropAddress to text helper and rename to abbrCenter
+- Move formatMoney to helper
+
 ### Fixed
 - New version of vue: 2.7.14
 - New version of vue-template-compiler": 2.7.14

src/i18n/index.js

@@ -188,23 +188,10 @@ class I18n {
               const value = (_isObject(param) ? param.value : param) || '0'
               const defaultFormat =
                 _get(lngConfig, 'number.formats.amounts.default')
-
               const result = MathUtil.format(value, defaultFormat)
               return param.currency
                 ? result.concat(' ', param.currency)
                 : result
-            case 'number':
-              return MathUtil
-                .format(param, _get(lngConfig, 'number.formats.default'))
-            case 'integer':
-              return MathUtil
-                .format(param, _get(lngConfig, 'number.formats.integer'))
-            case 'percent':
-              const convertedPercent = MathUtil.multiply(param, 100)
-              return MathUtil.format(
-                convertedPercent,
-                _get(lngConfig, 'number.formats.percent')
-              )
             default:
               console.warn(`Unknown format: ${format}, skipping…`)
               return param

src/i18n/resources/en.json

@@ -1113,7 +1113,7 @@
     "assets-list": {
       "update-asset-title": "Update asset",
       "details-title": "Asset details",
-      "list-item-balance-line": "Balance: {{value, money}}",
+      "list-item-balance-line": "Balance:",
       "no-balance-msg": "No balance"
     },
     "requests-page": {

src/js/helpers/money-helper.js

@@ -0,0 +1,21 @@
+import { MathUtil } from '@/js/utils'
+
+export function formatMoney ({
+  value,
+  currency,
+}) {
+  const cfg =
+  ({
+    decimalSeparator: '.',
+    groupSeparator: ',',
+    groupSize: 3,
+    decimalPlaces: 6,
+  })
+
+  const result = value
+    ? MathUtil.format(value, cfg)
+    : '0'
+  return currency
+    ? result.concat(' ', currency)
+    : result
+}

src/js/helpers/number-helper.js

@@ -0,0 +1,20 @@
+import { MathUtil } from '@/js/utils'
+
+export function formatNumber (
+  number,
+  decimalPlaces = 6,
+  suffix = 0,
+) {
+  const cfg =
+  ({
+    decimalSeparator: '.',
+    groupSeparator: ',',
+    groupSize: 3,
+    suffix,
+    decimalPlaces,
+  })
+  return MathUtil.format(
+    number,
+    cfg,
+  )
+}

src/vue/filters/cropAddress.js → src/js/helpers/text-helper.js

@@ -1,3 +1,3 @@
-export function cropAddress (value) {
+export function abbrCenter (value) {
   return `${value.slice(0, 4)}…${value.slice(-4)}`
 }

src/main.js

@@ -18,16 +18,11 @@ import { i18n, i18nComponent } from '@/i18n'
 import { globalize } from '@/vue/filters/globalize'
 import { globalizeCountry } from './vue/filters/globalizeCountry'
 import { formatDate } from '@/vue/filters/formatDate'
-import { formatMoney } from '@/vue/filters/formatMoney'
-import { formatNumber } from '@/vue/filters/formatNumber'
-import { formatInteger } from '@/vue/filters/formatInteger'
-import { formatPercent } from '@/vue/filters/formatPercent'
 import { formatCalendar } from '@/vue/filters/formatCalendar'
 import { formatCalendarInline } from '@/vue/filters/formatCalendarInline'
 import { formatDateDMY } from '@/vue/filters/formatDateDMY'
 import { formatDateDMYT } from '@/vue/filters/formatDateDMYT'
 import { abbreviate } from '@/vue/filters/abbreviate'
-import { cropAddress } from '@/vue/filters/cropAddress'
 import { ErrorTracker } from '@/js/helpers/error-tracker'
 import { vueRoutes } from './vue-router/routes'
 import { useBrowserUpdateBanner } from './browser-update'
@@ -58,14 +53,9 @@ async function init () {
   Vue.filter('formatDate', formatDate)
   Vue.filter('formatDateDMY', formatDateDMY)
   Vue.filter('formatDateDMYT', formatDateDMYT)
-  Vue.filter('formatMoney', formatMoney)
-  Vue.filter('formatNumber', formatNumber)
-  Vue.filter('formatPercent', formatPercent)
-  Vue.filter('formatInteger', formatInteger)
   Vue.filter('formatCalendar', formatCalendar)
   Vue.filter('formatCalendarInline', formatCalendarInline)
   Vue.filter('abbreviate', abbreviate)
-  Vue.filter('cropAddress', cropAddress)
   Vue.component('i18n', i18nComponent)
   Vue.prototype.$config = config
   Vue.prototype.$routes = vueRoutes

src/vue/common/EmailGetter.vue

@@ -20,7 +20,7 @@
       </template>
 
       <template v-else-if="accountId || balanceId">
-        {{ accountId || balanceId | cropAddress }}
+        {{ accountId || abbrCenter(balanceId) }}
       </template>
 
       <template v-else>
@@ -55,12 +55,14 @@ import IdentityGetterMixin from '@/vue/mixins/identity-getter'
 
 import { api } from '@/api'
 import { ErrorHandler } from '@/js/helpers/error-handler'
+import { defineComponent } from 'vue'
+import { abbrCenter } from '@/js/helpers/text-helper'
 import Clipboard from 'clipboard'
 import Tooltip from '@/vue/common/Tooltip'
 
 import safeGet from 'lodash/get'
 
-export default {
+export default defineComponent({
   components: {
     Tooltip,
   },
@@ -170,7 +172,12 @@ export default {
       }, hideTooltipTimeout)
     },
   },
-}
+  setup () {
+    return {
+      abbrCenter,
+    }
+  },
+})
 </script>
 
 <style lang="scss" scoped>

src/vue/common/TradeTopBar.vue

@@ -82,15 +82,13 @@
           v-if="formattedPairs.length && isLoaded"
           class="trade-asset-selector__balances-value"
         >
-          {{
-            // eslint-disable-next-line
-            { value: assetPairBalances.base, currency: assetPair.base } | formatMoney
-          }}
+          {{ formatMoney({
+            value: assetPairBalances.base, currency: assetPair.base
+          }) }}
           /
-          {{
-            // eslint-disable-next-line
-            { value: assetPairBalances.quote, currency: assetPair.quote } | formatMoney
-          }}
+          {{ formatMoney({
+            value:assetPairBalances.quote, currency: assetPair.quote
+          }) }}
         </p>
         <skeleton-loader
           v-else-if="!isLoaded"
@@ -154,6 +152,8 @@ import { vueRoutes } from '@/vue-router/routes'
 import { ErrorHandler } from '@/js/helpers/error-handler'
 import { Bus } from '@/js/helpers/event-bus'
 
+import { formatMoney } from '@/js/helpers/money-helper'
+
 const EVENTS = {
   reloadTradeData: 'reload-trade-data',
 }
@@ -287,6 +287,11 @@ export default {
       this.loadBalances()
     },
   },
+  setup () {
+    return {
+      formatMoney,
+    }
+  },
 }
 </script>
 

src/vue/common/chart/Chart.Renderer.vue

@@ -21,7 +21,7 @@
 </template>
 
 <script>
-import { formatMoney } from '@/vue/filters/formatMoney'
+import { formatMoney } from '@/js/helpers/money-helper'
 import { mapGetters } from 'vuex'
 import { vuexTypes } from '@/vuex'
 import * as d3Array from 'd3-array'
@@ -167,7 +167,7 @@ export default {
             .domain([0, 12])
           this.yAxisLine = d3.axisRight(y)
             .tickValues([0, 5, 10])
-            .tickFormat((d) => `${formatMoney(d)} ${this.defaultAsset}`)
+            .tickFormat((d) => `${formatMoney({ value: d })} ${this.defaultAsset}`)
             .tickSizeInner(this.width)
             .tickSizeOuter(0)
             .tickPadding(25)
@@ -293,7 +293,7 @@ export default {
       if (this.isTicksShown) {
         const yAxisLine = d3.axisRight(this.y)
           .ticks(4)
-          .tickFormat((d) => `${formatMoney(d.toFixed(2))} ${this.defaultAsset}`)
+          .tickFormat((d) => `${formatMoney({ value: d.toFixed(2) })} ${this.defaultAsset}`)
           .tickSizeInner(this.width)
           .tickSizeOuter(0)
           .tickPadding(25)

src/vue/common/fees/FeeViewer.vue

@@ -9,7 +9,7 @@
         class="fee-viewer__total"
         @click="toggleDetails"
       >
-        {{ formatFee(fee.total) | formatMoney }}
+        {{ formatMoney(formatFee(fee.total)) }}
       </a>
     </p>
 
@@ -24,7 +24,7 @@
           </span>
 
           <span class="fee-viewer__details-row-text">
-            {{ formatFee(fee.fixed) | formatMoney }}
+            {{ formatMoney(formatFee(fee.fixed)) }}
           </span>
         </p>
 
@@ -34,7 +34,7 @@
           </span>
 
           <span class="fee-viewer__details-row-text">
-            {{ formatFee(fee.calculatedPercent) | formatMoney }}
+            {{ formatMoney(formatFee(fee.calculatedPercent)) }}
           </span>
         </p>
 
@@ -47,7 +47,7 @@
           </span>
 
           <span class="fee-viewer__details-row-text">
-            {{ formatFee(fee.additional) | formatMoney }}
+            {{ formatMoney(formatFee(fee.additional)) }}
           </span>
         </p>
       </div>
@@ -57,6 +57,7 @@
 
 <script>
 import { Fee } from './fee'
+import { formatMoney } from '@/js/helpers/money-helper'
 
 export default {
   name: 'fee-viewer',
@@ -108,6 +109,12 @@ export default {
       this.isDetailsShown = !this.isDetailsShown
     },
   },
+
+  setup () {
+    return {
+      formatMoney,
+    }
+  },
 }
 </script>
 

src/vue/forms/IssuanceForm.vue

@@ -116,7 +116,7 @@
 
                 <readonly-field
                   :label="'issuance-form.amount-to-receive-msg' | globalize"
-                  :value="receivingAmount | formatMoney"
+                  :value="formatMoney(receivingAmount)"
                   :error-message="getFieldErrorMessage('receivingAmount.value')"
                 />
               </template>
@@ -188,6 +188,7 @@ import {
   maxDecimalDigitsCount,
 } from '@validators'
 import { IssuanceFormer } from '@/js/formers/IssuanceFormer'
+import { formatMoney } from '@/js/helpers/money-helper'
 
 const REFERENCE_MAX_LENGTH = 64
 const EVENTS = {
@@ -332,6 +333,11 @@ export default {
       this.hideConfirmation()
     },
   },
+  setup () {
+    return {
+      formatMoney,
+    }
+  },
 }
 </script>
 

src/vue/forms/TradeForms/CreateTradeOfferForm.vue

@@ -81,10 +81,10 @@
         <template v-if="isFeesLoaded">
           <readonly-field
             :label="'create-trade-offer-form.total-amount-lbl' | globalize"
-            :value="{
+            :value="formatMoney({
               value: quoteAmount,
               currency: assetPair.quote,
-            } | formatMoney"
+            })"
             :error-message="getFieldErrorMessage(
               'quoteAmount',
               {
@@ -168,6 +168,7 @@ import {
   maxValueBig,
   decimal,
 } from '@validators'
+import { formatMoney } from '@/js/helpers/money-helper'
 
 const EVENTS = {
   offerCreated: 'offer-created',
@@ -362,6 +363,11 @@ export default {
       this.form.assetCode = _get(accountBalances, 'asset.code', this.accountAssets[0])
     },
   },
+  setup () {
+    return {
+      formatMoney,
+    }
+  },
 }
 </script>