Refactoring/abbreviate

CHANGELOG.md

@@ -8,6 +8,19 @@ 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
+- Move formatDate to helper
+- Move formatDateDMY to helper
+- Move formatDateDMYT to helper
+- Move formatCalendar to helper
+- Move formatCalendarInline to helper
+- Move abbreviate to helper
+
 ### Fixed
 - New version of vue: 2.7.14
 - New version of vue-template-compiler": 2.7.14

src/i18n/index.js

@@ -9,14 +9,9 @@ import i18nextBrowserLanguageDetector from 'i18next-browser-languagedetector'
 
 // TODO: make i18n.language and i18n.languages responsive
 
-import moment from 'moment-timezone'
-
 import _isObject from 'lodash/isObject'
-import _get from 'lodash/get'
 import _merge from 'lodash/merge'
 
-import { MathUtil } from '@/js/utils'
-
 class I18n {
   constructor () {
     this._i18nextInstance = i18next.createInstance()
@@ -165,46 +160,7 @@ class I18n {
       nonExplicitWhitelist: false,
       interpolation: {
         format: (param, format) => {
-          const lngConfig = this._i18nextInstance
-            .getResourceBundle(this.language, 'config')
-
           switch (format.toLowerCase()) {
-            case 'date':
-              return moment(param)
-                .format(_get(lngConfig, 'date.presets.datetime'))
-            case 'dmy':
-              return moment(param)
-                .format(_get(lngConfig, 'date.presets.dmy'))
-            case 'dmyt':
-              return moment(param)
-                .format(_get(lngConfig, 'date.presets.dmyt'))
-            case 'calendar':
-              return moment(param)
-                .calendar(null, _get(lngConfig, 'date.calendar'))
-            case 'calendar-inline':
-              return moment(param)
-                .calendar(null, _get(lngConfig, 'date.calendarInline'))
-            case 'money':
-              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/vue/filters/abbreviate.spec.js → src/js/helpers/abbreviate.spec.js

@@ -1,6 +1,6 @@
 import { abbreviate } from './abbreviate'
 
-describe('abbreviate filter', () => {
+describe('abbreviate helper', () => {
   describe('transforms the given', () => {
     const testCases = [
       { input: 'account', expectedOutput: 'A' },

src/js/helpers/date-helpers.js

@@ -1,5 +1,39 @@
 import moment from 'moment'
 
+export function formatDate (date) {
+  return moment(date).format('DD.MM.YYYY [at] H:mm')
+}
+
+export function formatDateDMY (date) {
+  return moment(date).format('DD.MM.YYYY')
+}
+
+export function formatDateDMYT (date) {
+  return moment(date).format('DD.MM.YYYY [at] H:mm')
+}
+
+export function formatCalendar (date) {
+  return moment(date).calendar(null, {
+    sameDay: '[Today at] H:mm',
+    lastDay: '[Yesterday at] H:mm',
+    nextDay: '[Tomorrow at] H:mm',
+    lastWeek: '[Last] dddd [at] H:mm',
+    nextWeek: '[Next] dddd [at] H:mm',
+    sameElse: 'MMMM D, YYYY [at] H:mm',
+  })
+}
+
+export function formatCalendarInline (date) {
+  return moment(date).calendar(null, {
+    sameDay: '[today at] H:mm',
+    lastDay: '[yesterday at] H:mm',
+    nextDay: '[tomorrow at] H:mm',
+    lastWeek: '[last] dddd [at] H:mm',
+    nextWeek: '[next] dddd [at] H:mm',
+    sameElse: '[at] MMMM D, YYYY [at] H:mm',
+  })
+}
+
 export function toRFC3339 (date) {
   if (!date) {
     return ''

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

@@ -17,17 +17,6 @@ import { ripple } from '@/vue/directives/ripple'
 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'
@@ -55,17 +44,6 @@ async function init () {
   Vue.directive('ripple', ripple)
   Vue.filter('globalize', globalize)
   Vue.filter('globalizeCountry', globalizeCountry)
-  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/CardLogo.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script>
-import { abbreviate } from '@/vue/filters/abbreviate'
+import { abbreviate } from '@/js/helpers/abbreviate'
 
 export default {
   name: 'card-logo',

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/assets/AssetLogo.vue

@@ -8,17 +8,24 @@
     v-else
     class="asset-logo asset-logo__code-abbr"
   >
-    {{ assetCode | abbreviate }}
+    {{ abbreviate(assetCode) }}
   </p>
 </template>
 
 <script>
+import { abbreviate } from '@/js/helpers/abbreviate'
+
 export default {
   name: 'asset-logo',
   props: {
     logoUrl: { type: String, required: true },
     assetCode: { type: String, required: true },
   },
+  setup () {
+    return {
+      abbreviate,
+    }
+  },
 }
 </script>
 

src/vue/common/assets/AssetLogoDark.vue

@@ -8,17 +8,24 @@
     v-else
     class="asset-logo-dark asset-logo-dark__code-abbr"
   >
-    {{ assetCode | abbreviate }}
+    {{ abbreviate(assetCode) }}
   </p>
 </template>
 
 <script>
+import { abbreviate } from '@/js/helpers/abbreviate'
+
 export default {
   name: 'asset-logo-dark',
   props: {
     logoUrl: { type: String, required: true },
     assetCode: { type: String, required: true },
   },
+  setup () {
+    return {
+      abbreviate,
+    }
+  },
 }
 </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)