From 3bda3b2ef9b354104c43f5a983ebdec987aa4249 Mon Sep 17 00:00:00 2001
From: Alexandr Kostenko <sasha18121992ukr@gmail.com>
Date: Thu, 8 Dec 2022 17:13:06 +0200
Subject: [PATCH 1/6] remove filters number

---
 src/i18n/index.js                             | 12 ----
 src/i18n/resources/en.json                    | 18 ------
 src/main.js                                   |  2 -
 src/vue/composables/index.js                  |  1 +
 src/vue/composables/useNumber.js              | 25 ++++++++
 src/vue/filters/formatNumber.js               |  5 --
 src/vue/pages/Limits/Limits.TableRenderer.vue | 57 ++++++++++---------
 src/vue/pages/polls-all/PollAttributes.vue    | 51 +++++++++--------
 yarn.lock                                     |  2 +-
 9 files changed, 85 insertions(+), 88 deletions(-)
 create mode 100644 src/vue/composables/index.js
 create mode 100644 src/vue/composables/useNumber.js
 delete mode 100644 src/vue/filters/formatNumber.js

diff --git a/src/i18n/index.js b/src/i18n/index.js
index b41265547..6c913177b 100644
--- a/src/i18n/index.js
+++ b/src/i18n/index.js
@@ -193,18 +193,6 @@ class I18n {
               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
diff --git a/src/i18n/resources/en.json b/src/i18n/resources/en.json
index d45d2b260..921443c97 100644
--- a/src/i18n/resources/en.json
+++ b/src/i18n/resources/en.json
@@ -9,24 +9,6 @@
             "groupSize": 3,
             "decimalPlaces": 6
           }
-        },
-        "default": {
-          "decimalSeparator": ".",
-          "groupSeparator": ",",
-          "groupSize": 3,
-          "decimalPlaces": 6
-        },
-        "integer": {
-          "groupSeparator": ",",
-          "groupSize": 3,
-          "decimalPlaces": 0
-        },
-        "percent": {
-          "decimalSeparator": ".",
-          "groupSeparator": ",",
-          "groupSize": 3,
-          "decimalPlaces": 6,
-          "suffix": "%"
         }
       }
     },
diff --git a/src/main.js b/src/main.js
index c03325c6b..0e368e180 100644
--- a/src/main.js
+++ b/src/main.js
@@ -19,7 +19,6 @@ 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'
@@ -59,7 +58,6 @@ async function init () {
   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)
diff --git a/src/vue/composables/index.js b/src/vue/composables/index.js
new file mode 100644
index 000000000..ec8ca6f9f
--- /dev/null
+++ b/src/vue/composables/index.js
@@ -0,0 +1 @@
+export * from './useNumber'
diff --git a/src/vue/composables/useNumber.js b/src/vue/composables/useNumber.js
new file mode 100644
index 000000000..9526f15b6
--- /dev/null
+++ b/src/vue/composables/useNumber.js
@@ -0,0 +1,25 @@
+import { MathUtil } from '@/js/utils'
+
+export const useNumber = () => {
+  const formatNumber = (
+    number,
+    decimalPlaces = 0,
+  ) => {
+    const cfg =
+    ({
+      decimalSeparator: '.',
+      groupSeparator: '',
+      groupSize: 3,
+      decimalPlaces,
+    })
+
+    return MathUtil.format(
+      number,
+      cfg,
+    )
+  }
+
+  return {
+    formatNumber,
+  }
+}
diff --git a/src/vue/filters/formatNumber.js b/src/vue/filters/formatNumber.js
deleted file mode 100644
index b6302f42e..000000000
--- a/src/vue/filters/formatNumber.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { globalize } from './globalize'
-
-export function formatNumber (value) {
-  return globalize('formats.number', { value })
-}
diff --git a/src/vue/pages/Limits/Limits.TableRenderer.vue b/src/vue/pages/Limits/Limits.TableRenderer.vue
index f67ed9cde..7a2e58553 100644
--- a/src/vue/pages/Limits/Limits.TableRenderer.vue
+++ b/src/vue/pages/Limits/Limits.TableRenderer.vue
@@ -39,9 +39,9 @@
             </template>
             <template v-else>
               <span class="limits-table-renderer__value">
-                {{ item.dailyLeft | formatNumber }}
+                {{ formatNumber(item.dailyLeft) }}
                 /
-                {{ item.dailyOut | formatNumber }}
+                {{ formatNumber(item.dailyOut) }}
               </span>
             </template>
           </td>
@@ -53,9 +53,9 @@
             </template>
             <template v-else>
               <span class="limits-table-renderer__value">
-                {{ item.weeklyLeft | formatNumber }}
+                {{ formatNumber(item.weeklyLeft) }}
                 /
-                {{ item.weeklyOut | formatNumber }}
+                {{ formatNumber(item.weeklyOut) }}
               </span>
             </template>
           </td>
@@ -67,9 +67,9 @@
             </template>
             <template v-else>
               <span class="limits-table-renderer__value">
-                {{ item.monthlyLeft | formatNumber }}
+                {{ formatNumber(item.monthlyLeft) }}
                 /
-                {{ item.monthlyOut | formatNumber }}
+                {{ formatNumber(item.monthlyOut) }}
               </span>
             </template>
           </td>
@@ -81,9 +81,9 @@
             </template>
             <template v-else>
               <span>
-                {{ item.annualLeft | formatNumber }}
+                {{ formatNumber(item.annualLeft) }}
                 /
-                {{ item.annualOut | formatNumber }}
+                {{ formatNumber(item.annualOut) }}
               </span>
             </template>
           </td>
@@ -115,25 +115,19 @@
 
 <script>
 import { STATS_OPERATION_TYPES } from '@tokend/js-sdk'
+import { useNumber } from '@/vue/composables'
 import Loader from '@/vue/common/Loader'
 import NoDataMessage from '@/vue/common/NoDataMessage'
 import SkeletonLoaderTableBody from '@/vue/common/skeleton-loader/SkeletonLoaderTableBody'
+import { defineComponent } from 'vue'
 
 import config from '../../../config'
 
-const OPERATION_TYPES_TRANSLATION_ID = {
-  [STATS_OPERATION_TYPES.deposit]: 'limits-table-renderer.op-type-deposit',
-  [STATS_OPERATION_TYPES.withdraw]: 'limits-table-renderer.op-type-withdraw',
-  // eslint-disable-next-line
-  [STATS_OPERATION_TYPES.paymentOut]: 'limits-table-renderer.op-type-payment-out',
-}
-
 const EVENTS = Object.freeze({
   limitsReloadAsk: 'limits-reload-ask',
 })
 
-export default {
-  name: 'limits-table-renderer',
+export default defineComponent({
   components: {
     Loader,
     NoDataMessage,
@@ -144,16 +138,27 @@ export default {
     isLoading: { type: Boolean, required: true, default: false },
     isLoadingFailed: { type: Boolean, required: true, default: false },
   },
-  data: () => ({
-    OPERATION_TYPES_TRANSLATION_ID,
-    MAX_AMOUNT: config.MAX_AMOUNT,
-  }),
-  methods: {
-    askLimitsReload () {
-      this.$emit(EVENTS.limitsReloadAsk)
-    },
+  emits: 'limitsReloadAsk',
+  setup (_, { emit }) {
+    const OPERATION_TYPES_TRANSLATION_ID = {
+      [STATS_OPERATION_TYPES.deposit]: 'limits-table-renderer.op-type-deposit',
+      [STATS_OPERATION_TYPES.withdraw]: 'limits-table-renderer.op-type-withdraw',
+      // eslint-disable-next-line
+      [STATS_OPERATION_TYPES.paymentOut]: 'limits-table-renderer.op-type-payment-out',
+    }
+    const MAX_AMOUNT = config.MAX_AMOUNT
+    const { formatNumber } = useNumber()
+    const askLimitsReload = () => {
+      emit(EVENTS.limitsReloadAsk)
+    }
+    return {
+      askLimitsReload,
+      OPERATION_TYPES_TRANSLATION_ID,
+      MAX_AMOUNT,
+      formatNumber,
+    }
   },
-}
+})
 </script>
 
 <style lang="scss">
diff --git a/src/vue/pages/polls-all/PollAttributes.vue b/src/vue/pages/polls-all/PollAttributes.vue
index 3fd06b601..32f8d651d 100644
--- a/src/vue/pages/polls-all/PollAttributes.vue
+++ b/src/vue/pages/polls-all/PollAttributes.vue
@@ -47,7 +47,7 @@
               {{ 'poll-attributes.state-key' | globalize }}
             </td>
             <td>
-              {{ pollStateTranslated }}
+              {{ pollStateTranslated | globalize }}
             </td>
           </tr>
 
@@ -71,7 +71,7 @@
               {{ 'poll-attributes.permission-type-key' | globalize }}
             </td>
             <td>
-              {{ pollPermissionTypeTranslated }}
+              {{ pollPermissionTypeTranslated | globalize }}
             </td>
           </tr>
 
@@ -80,7 +80,7 @@
               {{ 'poll-attributes.number-of-choices-key' | globalize }}
             </td>
             <td>
-              {{ poll.numberOfChoices | formatNumber }}
+              {{ formatNumber(poll.numberOfChoices) }}
             </td>
           </tr>
         </tbody>
@@ -93,10 +93,10 @@
 import { PollRecord } from '@/js/records/entities/poll.record'
 import EmailGetter from '@/vue/common/EmailGetter'
 import { keyValues } from '@/key-values'
+import { defineComponent, computed } from 'vue'
+import { useNumber } from '@/vue/composables'
 
-export default {
-  name: 'poll-attributes',
-
+export default defineComponent({
   components: {
     EmailGetter,
   },
@@ -108,46 +108,49 @@ export default {
     },
   },
 
-  computed: {
-    pollStateTranslated () {
+  setup (props) {
+    const { formatNumber } = useNumber()
+
+    const pollStateTranslated = computed(() => {
       let translationId
 
-      if (this.poll.isOpen) {
+      if (props.poll.isOpen) {
         translationId = 'poll-attributes.state-open-val'
-      } else if (this.poll.isPassed) {
+      } else if (props.poll.isPassed) {
         translationId = 'poll-attributes.state-passed-val'
-      } else if (this.poll.isFailed) {
+      } else if (props.poll.isFailed) {
         translationId = 'poll-attributes.state-failed-val'
-      } else if (this.poll.isCanceled) {
+      } else if (props.poll.isCanceled) {
         translationId = 'poll-attributes.state-canceled-val'
       } else {
         translationId = '[UNKNOWN_STATE]'
       }
+      return translationId
+    })
 
-      return this.$options.filters.globalize(translationId)
-    },
-
-    pollPermissionTypeTranslated () {
+    const pollPermissionTypeTranslated = computed(() => {
       let translationId
-
-      switch (this.poll.permissionType) {
+      switch (props.poll.permissionType) {
         case keyValues.restrictedPollType:
           translationId = 'poll-attributes.permission-type-restricted-val'
           break
-
         case keyValues.unrestrictedPollType:
           translationId = 'poll-attributes.permission-type-unrestricted-val'
           break
-
         default:
           translationId = '[UNKNOWN_PERMISSION_TYPE]'
           break
       }
-
-      return this.$options.filters.globalize(translationId)
-    },
+      return translationId
+    })
+
+    return {
+      pollStateTranslated,
+      pollPermissionTypeTranslated,
+      formatNumber,
+    }
   },
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/yarn.lock b/yarn.lock
index d399fd1bd..6c5361001 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3521,7 +3521,7 @@ data-urls@^2.0.0:
 de-indent@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
-  integrity sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=
+  integrity sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==
 
 debug-log@^1.0.0:
   version "1.0.1"

From 78bfd867b6f84c3269cd1bb22ab439625822107c Mon Sep 17 00:00:00 2001
From: Alexandr Kostenko <sasha18121992ukr@gmail.com>
Date: Thu, 8 Dec 2022 17:38:56 +0200
Subject: [PATCH 2/6] update changelog

---
 CHANGELOG.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a70ec9a6f..ee653a5f1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,9 @@ 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 composable
+
 ### Fixed
 - New version of vue: 2.7.14
 - New version of vue-template-compiler": 2.7.14

From 62e5b36db2d06e967170e2b69ea156fdbf5a68c5 Mon Sep 17 00:00:00 2001
From: Alexandr Kostenko <sasha18121992ukr@gmail.com>
Date: Mon, 12 Dec 2022 12:47:34 +0200
Subject: [PATCH 3/6] move formatNumber to helper and move format percent to
 formatNumber

---
 CHANGELOG.md                                  |  3 ++-
 src/js/helpers/number-helper.js               | 20 +++++++++++++++
 src/main.js                                   |  2 --
 src/vue/composables/index.js                  |  1 -
 src/vue/composables/useNumber.js              | 25 -------------------
 src/vue/filters/formatPercent.js              |  5 ----
 .../modules/fees/components/fees-table.vue    | 22 ++++++++++++----
 src/vue/pages/Limits/Limits.TableRenderer.vue |  5 ++--
 src/vue/pages/polls-all/PollAttributes.vue    |  4 +--
 9 files changed, 43 insertions(+), 44 deletions(-)
 create mode 100644 src/js/helpers/number-helper.js
 delete mode 100644 src/vue/composables/index.js
 delete mode 100644 src/vue/composables/useNumber.js
 delete mode 100644 src/vue/filters/formatPercent.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ee653a5f1..c8762126b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,7 +9,8 @@ for further information about branching and tagging conventions.
 
 ## [Unreleased]
 #### Changed
-- Move formatNumber filter to composable
+- Move formatNumber filter to helper
+- Move formatPercent to formatNumber helper
 
 ### Fixed
 - New version of vue: 2.7.14
diff --git a/src/js/helpers/number-helper.js b/src/js/helpers/number-helper.js
new file mode 100644
index 000000000..930c95784
--- /dev/null
+++ b/src/js/helpers/number-helper.js
@@ -0,0 +1,20 @@
+import { MathUtil } from '@/js/utils'
+
+export function formatNumber (
+  number,
+  decimalPlaces = 0,
+  suffix = 0,
+) {
+  const cfg =
+  ({
+    decimalSeparator: '.',
+    groupSeparator: '',
+    groupSize: 3,
+    suffix,
+    decimalPlaces,
+  })
+  return MathUtil.format(
+    number,
+    cfg,
+  )
+}
diff --git a/src/main.js b/src/main.js
index 0e368e180..fc7614ba4 100644
--- a/src/main.js
+++ b/src/main.js
@@ -20,7 +20,6 @@ import { globalizeCountry } from './vue/filters/globalizeCountry'
 import { formatDate } from '@/vue/filters/formatDate'
 import { formatMoney } from '@/vue/filters/formatMoney'
 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'
@@ -58,7 +57,6 @@ async function init () {
   Vue.filter('formatDateDMY', formatDateDMY)
   Vue.filter('formatDateDMYT', formatDateDMYT)
   Vue.filter('formatMoney', formatMoney)
-  Vue.filter('formatPercent', formatPercent)
   Vue.filter('formatInteger', formatInteger)
   Vue.filter('formatCalendar', formatCalendar)
   Vue.filter('formatCalendarInline', formatCalendarInline)
diff --git a/src/vue/composables/index.js b/src/vue/composables/index.js
deleted file mode 100644
index ec8ca6f9f..000000000
--- a/src/vue/composables/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export * from './useNumber'
diff --git a/src/vue/composables/useNumber.js b/src/vue/composables/useNumber.js
deleted file mode 100644
index 9526f15b6..000000000
--- a/src/vue/composables/useNumber.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import { MathUtil } from '@/js/utils'
-
-export const useNumber = () => {
-  const formatNumber = (
-    number,
-    decimalPlaces = 0,
-  ) => {
-    const cfg =
-    ({
-      decimalSeparator: '.',
-      groupSeparator: '',
-      groupSize: 3,
-      decimalPlaces,
-    })
-
-    return MathUtil.format(
-      number,
-      cfg,
-    )
-  }
-
-  return {
-    formatNumber,
-  }
-}
diff --git a/src/vue/filters/formatPercent.js b/src/vue/filters/formatPercent.js
deleted file mode 100644
index c745a5a63..000000000
--- a/src/vue/filters/formatPercent.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { globalize } from './globalize'
-
-export function formatPercent (value) {
-  return globalize('formats.percent', { value: value / 100 })
-}
diff --git a/src/vue/modules/fees/components/fees-table.vue b/src/vue/modules/fees/components/fees-table.vue
index b619bc36b..6f7ffb142 100644
--- a/src/vue/modules/fees/components/fees-table.vue
+++ b/src/vue/modules/fees/components/fees-table.vue
@@ -44,8 +44,8 @@
               {{ { value: fee.fixed, currency: fee.asset } | formatMoney }}
             </td>
 
-            <td :title="fee.percent | formatPercent">
-              {{ fee.percent | formatPercent }}
+            <td :title="formatNumber(fee.percent, ...formatNumberParams)">
+              {{ formatNumber(fee.percent, ...formatNumberParams) }}
             </td>
 
             <!-- eslint-disable-next-line -->
@@ -84,9 +84,10 @@
 import FeeTypeViewer from './viewers/fee-type-viewer'
 import FeeSubtypeViewer from './viewers/fee-subtype-viewer'
 import SkeletonLoaderTableBody from '@/vue/common/skeleton-loader/SkeletonLoaderTableBody'
+import { defineComponent } from 'vue'
+import { formatNumber } from '@/js/helpers/number-helper'
 
-export default {
-  name: 'fees-table',
+export default defineComponent({
   components: {
     FeeTypeViewer,
     FeeSubtypeViewer,
@@ -107,7 +108,18 @@ export default {
       require: true,
     },
   },
-}
+
+  setup () {
+    const formatNumberParams = [
+      0,
+      '%',
+    ]
+    return {
+      formatNumberParams,
+      formatNumber,
+    }
+  },
+})
 </script>
 
 <style scoped lang="scss">
diff --git a/src/vue/pages/Limits/Limits.TableRenderer.vue b/src/vue/pages/Limits/Limits.TableRenderer.vue
index 7a2e58553..559668983 100644
--- a/src/vue/pages/Limits/Limits.TableRenderer.vue
+++ b/src/vue/pages/Limits/Limits.TableRenderer.vue
@@ -115,11 +115,11 @@
 
 <script>
 import { STATS_OPERATION_TYPES } from '@tokend/js-sdk'
-import { useNumber } from '@/vue/composables'
 import Loader from '@/vue/common/Loader'
 import NoDataMessage from '@/vue/common/NoDataMessage'
 import SkeletonLoaderTableBody from '@/vue/common/skeleton-loader/SkeletonLoaderTableBody'
 import { defineComponent } from 'vue'
+import { formatNumber } from '@/js/helpers/number-helper'
 
 import config from '../../../config'
 
@@ -147,10 +147,11 @@ export default defineComponent({
       [STATS_OPERATION_TYPES.paymentOut]: 'limits-table-renderer.op-type-payment-out',
     }
     const MAX_AMOUNT = config.MAX_AMOUNT
-    const { formatNumber } = useNumber()
+
     const askLimitsReload = () => {
       emit(EVENTS.limitsReloadAsk)
     }
+
     return {
       askLimitsReload,
       OPERATION_TYPES_TRANSLATION_ID,
diff --git a/src/vue/pages/polls-all/PollAttributes.vue b/src/vue/pages/polls-all/PollAttributes.vue
index 32f8d651d..453201726 100644
--- a/src/vue/pages/polls-all/PollAttributes.vue
+++ b/src/vue/pages/polls-all/PollAttributes.vue
@@ -94,7 +94,7 @@ import { PollRecord } from '@/js/records/entities/poll.record'
 import EmailGetter from '@/vue/common/EmailGetter'
 import { keyValues } from '@/key-values'
 import { defineComponent, computed } from 'vue'
-import { useNumber } from '@/vue/composables'
+import { formatNumber } from '@/js/helpers/number-helper'
 
 export default defineComponent({
   components: {
@@ -109,8 +109,6 @@ export default defineComponent({
   },
 
   setup (props) {
-    const { formatNumber } = useNumber()
-
     const pollStateTranslated = computed(() => {
       let translationId
 

From 853d710c430c2a997e7cf3aad9a7de50ab7805b3 Mon Sep 17 00:00:00 2001
From: Alexandr Kostenko <sasha18121992ukr@gmail.com>
Date: Wed, 14 Dec 2022 12:56:39 +0200
Subject: [PATCH 4/6] fix after review

---
 src/i18n/resources/en.json                 | 18 ++++++++++
 src/vue/pages/polls-all/PollAttributes.vue | 39 ++++++++++++----------
 2 files changed, 40 insertions(+), 17 deletions(-)

diff --git a/src/i18n/resources/en.json b/src/i18n/resources/en.json
index 921443c97..d45d2b260 100644
--- a/src/i18n/resources/en.json
+++ b/src/i18n/resources/en.json
@@ -9,6 +9,24 @@
             "groupSize": 3,
             "decimalPlaces": 6
           }
+        },
+        "default": {
+          "decimalSeparator": ".",
+          "groupSeparator": ",",
+          "groupSize": 3,
+          "decimalPlaces": 6
+        },
+        "integer": {
+          "groupSeparator": ",",
+          "groupSize": 3,
+          "decimalPlaces": 0
+        },
+        "percent": {
+          "decimalSeparator": ".",
+          "groupSeparator": ",",
+          "groupSize": 3,
+          "decimalPlaces": 6,
+          "suffix": "%"
         }
       }
     },
diff --git a/src/vue/pages/polls-all/PollAttributes.vue b/src/vue/pages/polls-all/PollAttributes.vue
index 453201726..d8cae6cc3 100644
--- a/src/vue/pages/polls-all/PollAttributes.vue
+++ b/src/vue/pages/polls-all/PollAttributes.vue
@@ -47,7 +47,7 @@
               {{ 'poll-attributes.state-key' | globalize }}
             </td>
             <td>
-              {{ pollStateTranslated | globalize }}
+              {{ pollStateTranslated }}
             </td>
           </tr>
 
@@ -71,7 +71,7 @@
               {{ 'poll-attributes.permission-type-key' | globalize }}
             </td>
             <td>
-              {{ pollPermissionTypeTranslated | globalize }}
+              {{ pollPermissionTypeTranslated }}
             </td>
           </tr>
 
@@ -93,7 +93,7 @@
 import { PollRecord } from '@/js/records/entities/poll.record'
 import EmailGetter from '@/vue/common/EmailGetter'
 import { keyValues } from '@/key-values'
-import { defineComponent, computed } from 'vue'
+import { defineComponent } from 'vue'
 import { formatNumber } from '@/js/helpers/number-helper'
 
 export default defineComponent({
@@ -108,43 +108,48 @@ export default defineComponent({
     },
   },
 
-  setup (props) {
-    const pollStateTranslated = computed(() => {
+  computed: {
+    pollStateTranslated () {
       let translationId
 
-      if (props.poll.isOpen) {
+      if (this.poll.isOpen) {
         translationId = 'poll-attributes.state-open-val'
-      } else if (props.poll.isPassed) {
+      } else if (this.poll.isPassed) {
         translationId = 'poll-attributes.state-passed-val'
-      } else if (props.poll.isFailed) {
+      } else if (this.poll.isFailed) {
         translationId = 'poll-attributes.state-failed-val'
-      } else if (props.poll.isCanceled) {
+      } else if (this.poll.isCanceled) {
         translationId = 'poll-attributes.state-canceled-val'
       } else {
         translationId = '[UNKNOWN_STATE]'
       }
-      return translationId
-    })
 
-    const pollPermissionTypeTranslated = computed(() => {
+      return this.$options.filters.globalize(translationId)
+    },
+
+    pollPermissionTypeTranslated () {
       let translationId
-      switch (props.poll.permissionType) {
+
+      switch (this.poll.permissionType) {
         case keyValues.restrictedPollType:
           translationId = 'poll-attributes.permission-type-restricted-val'
           break
+
         case keyValues.unrestrictedPollType:
           translationId = 'poll-attributes.permission-type-unrestricted-val'
           break
+
         default:
           translationId = '[UNKNOWN_PERMISSION_TYPE]'
           break
       }
-      return translationId
-    })
 
+      return this.$options.filters.globalize(translationId)
+    },
+  },
+
+  setup () {
     return {
-      pollStateTranslated,
-      pollPermissionTypeTranslated,
       formatNumber,
     }
   },

From 8615f6cf9d5da44c96b951ec931136228d52ec41 Mon Sep 17 00:00:00 2001
From: Alexandr Kostenko <sasha18121992ukr@gmail.com>
Date: Wed, 14 Dec 2022 13:00:51 +0200
Subject: [PATCH 5/6] move formatInteger to formatNumber helper

---
 CHANGELOG.md                     | 1 +
 src/main.js                      | 2 --
 src/vue/filters/formatInteger.js | 5 -----
 3 files changed, 1 insertion(+), 7 deletions(-)
 delete mode 100644 src/vue/filters/formatInteger.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c8762126b..3fcb7263a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@ for further information about branching and tagging conventions.
 #### Changed
 - Move formatNumber filter to helper
 - Move formatPercent to formatNumber helper
+- Move formatInteger to formatNumber helper
 
 ### Fixed
 - New version of vue: 2.7.14
diff --git a/src/main.js b/src/main.js
index fc7614ba4..acd8abe77 100644
--- a/src/main.js
+++ b/src/main.js
@@ -19,7 +19,6 @@ 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 { formatInteger } from '@/vue/filters/formatInteger'
 import { formatCalendar } from '@/vue/filters/formatCalendar'
 import { formatCalendarInline } from '@/vue/filters/formatCalendarInline'
 import { formatDateDMY } from '@/vue/filters/formatDateDMY'
@@ -57,7 +56,6 @@ async function init () {
   Vue.filter('formatDateDMY', formatDateDMY)
   Vue.filter('formatDateDMYT', formatDateDMYT)
   Vue.filter('formatMoney', formatMoney)
-  Vue.filter('formatInteger', formatInteger)
   Vue.filter('formatCalendar', formatCalendar)
   Vue.filter('formatCalendarInline', formatCalendarInline)
   Vue.filter('abbreviate', abbreviate)
diff --git a/src/vue/filters/formatInteger.js b/src/vue/filters/formatInteger.js
deleted file mode 100644
index 921411f82..000000000
--- a/src/vue/filters/formatInteger.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { globalize } from './globalize'
-
-export function formatInteger (value) {
-  return globalize('formats.integer', { value })
-}

From da8673a8ff20c2f4cc0ed27209bb6d248a074321 Mon Sep 17 00:00:00 2001
From: Alexandr Kostenko <sasha18121992ukr@gmail.com>
Date: Wed, 14 Dec 2022 14:57:28 +0200
Subject: [PATCH 6/6] move cropAddress filter to helper

---
 CHANGELOG.md                                        |  1 +
 .../cropAddress.js => js/helpers/text-helper.js}    |  2 +-
 src/main.js                                         |  2 --
 src/vue/common/EmailGetter.vue                      | 13 ++++++++++---
 4 files changed, 12 insertions(+), 6 deletions(-)
 rename src/{vue/filters/cropAddress.js => js/helpers/text-helper.js} (59%)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3fcb7263a..8e422025e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@ for further information about branching and tagging conventions.
 - Move formatNumber filter to helper
 - Move formatPercent to formatNumber helper
 - Move formatInteger to formatNumber helper
+- Move cropAddress to text helper and rename to abbrCenter
 
 ### Fixed
 - New version of vue: 2.7.14
diff --git a/src/vue/filters/cropAddress.js b/src/js/helpers/text-helper.js
similarity index 59%
rename from src/vue/filters/cropAddress.js
rename to src/js/helpers/text-helper.js
index 6e4c158bb..823d02cb4 100644
--- a/src/vue/filters/cropAddress.js
+++ b/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)}`
 }
diff --git a/src/main.js b/src/main.js
index acd8abe77..1ac48fcd9 100644
--- a/src/main.js
+++ b/src/main.js
@@ -24,7 +24,6 @@ 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'
@@ -59,7 +58,6 @@ async function init () {
   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
diff --git a/src/vue/common/EmailGetter.vue b/src/vue/common/EmailGetter.vue
index 1792011ce..5edc73f12 100644
--- a/src/vue/common/EmailGetter.vue
+++ b/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>