feature/moment to dayjs

CHANGELOG.md

@@ -11,6 +11,15 @@ for further information about branching and tagging conventions.
 #### Added
 - ability to add and remove rules in roles
 - Print error with meta in console
+- Added `dayjs` to project instead `momentjs`
+- Added `date.util.js` to utils
+
+### Changed
+- Wrapped all using methods for dates by `date.util.js`
+- Cutted wrap-template from `Limits.Reviewer.vue`
+
+### Removed
+- Removed `moment` and `moment-timezone` from project
 
 ## [1.14.0-rc.1] - 2022-08-03
 #### Fixed

package.json

@@ -26,13 +26,12 @@
     "bignumber.js": "8.0.1",
     "camelcase-keys-deep": "0.1.0",
     "d3": "5.9.2",
+    "dayjs": "^1.11.7",
     "i18next": "^19.0.2",
     "i18next-browser-languagedetector": "^4.0.1",
     "iso-country-codes": "0.0.5",
     "lodash": "4.17.19",
     "loglevel": "1.6.2",
-    "moment": "2.24.0",
-    "moment-timezone": "^0.5.27",
     "nprogress": "0.2.0",
     "numeral": "2.0.6",
     "qrcode.vue": "1.6.2",

src/components/App/components/IdleLogout.vue

@@ -25,7 +25,7 @@
 </template>
 
 <script>
-import moment from 'moment'
+import { DateUtil } from '@/utils/date.util'
 export default {
   name: 'idle-logout',
 
@@ -64,18 +64,20 @@ export default {
   methods: {
     initTimer () {
       const warnInterval = this.$store.getters.forceLogoutDelay
-      this.warnEndTimestamp = moment()
-        .add(warnInterval, 'seconds')
-        .unix()
+      this.warnEndTimestamp = DateUtil.toTimestamp(
+        DateUtil.add(undefined, warnInterval, 'seconds')
+      )
       this.countdownInterval = setInterval(() => {
-        const msLeft = moment
-          .duration(this.warnEndTimestamp - moment().unix(),
-            'seconds').asMilliseconds()
+        const msLeft = DateUtil.millisecondOf(
+          DateUtil.duration({
+            seconds: this.warnEndTimestamp - DateUtil.toTimestamp(),
+          })
+        )
 
         if (msLeft <= 0) {
           this.endSession()
         } else {
-          this.timeLeft = moment(msLeft).format('mm:ss')
+          this.timeLeft = DateUtil.format(msLeft, 'mm:ss')
         }
       }, 1000)
     },

src/components/App/filters/filters.js

@@ -1,5 +1,5 @@
 import { i18n } from '@/i18n'
-import moment from 'moment'
+import { DateUtil } from '@/utils/date.util'
 import store from '../../../store'
 import { base, SALE_TYPES } from '@tokend/js-sdk'
 import {
@@ -11,7 +11,7 @@ import {
 
 export function filterDateWithTime (date, format = 'DD MMM YYYY [at] hh:mm:ss') {
   try {
-    return moment(date).format(format)
+    return DateUtil.format(date, format)
   } catch (error) {
     return date
   }

src/components/User/Limits/Limits.Reviewer.vue

@@ -133,37 +133,36 @@
     </template>
     <template v-if="isRequiringDocs">
       <div class="limits-reviewer__doc-list-form">
-        <template v-for="(item,i) in uploadDocs">
-          <div
-            class="limits-reviewer__doc-list-item"
-            :key="i"
-          >
-            <div class="limits-reviewer__doc-label">
-              <datalist-field
-                :doc-item="item"
-                :key="i"
-              />
-              <transition name="limits-reviewer__doc-label-err-transition">
-                <p
-                  class="limits-reviewer__doc-label-err-mes"
-                  v-if="!item.isDocValid">
-                  {{ 'limits-reviewer.choose-from-list' | globalize }}
-                </p>
-              </transition>
-            </div>
-            <text-field
-              :label="'limits-reviewer.lbl-document-description' | globalize"
-              class="limits-reviewer__doc-textfield"
-              :autofocus="true"
-              v-model="item.description"
+        <div
+          v-for="(item,i) in uploadDocs"
+          :key="i"
+          class="limits-reviewer__doc-list-item"
+        >
+          <div class="limits-reviewer__doc-label">
+            <datalist-field
+              :doc-item="item"
+              :key="i"
             />
-            <div class="limits-reviewer__doc-close-btn-wrapper">
-              <button @click="removeDoc(i)">
-                <i class="mdi mdi-close limits-reviewer__doc-close-btn" />
-              </button>
-            </div>
+            <transition name="limits-reviewer__doc-label-err-transition">
+              <p
+                class="limits-reviewer__doc-label-err-mes"
+                v-if="!item.isDocValid">
+                {{ 'limits-reviewer.choose-from-list' | globalize }}
+              </p>
+            </transition>
           </div>
-        </template>
+          <text-field
+            :label="'limits-reviewer.lbl-document-description' | globalize"
+            class="limits-reviewer__doc-textfield"
+            :autofocus="true"
+            v-model="item.description"
+          />
+          <div class="limits-reviewer__doc-close-btn-wrapper">
+            <button @click="removeDoc(i)">
+              <i class="mdi mdi-close limits-reviewer__doc-close-btn" />
+            </button>
+          </div>
+        </div>
         <div class="app__form-actions limits-reviewer__doc-list-form-actions">
           <button
             class="app__btn"

src/components/User/Operations/OperationDetails.vue

@@ -13,9 +13,9 @@
 import DetailsReader from '@comcom/details/DetailsReader'
 import { globalize } from '@/components/App/filters/filters'
 // ToDo: get operation by operationId from server
-import moment from 'moment'
 import get from 'lodash/get'
 import { ErrorHandler } from '@/utils/ErrorHandler'
+import { DateUtil } from '@/utils/date.util'
 import { api } from '@/api'
 
 export default {
@@ -52,8 +52,10 @@ export default {
       this.operation = Object.assign({}, operation, {
         operationType: operationType
           .charAt(0).toUpperCase() + operationType.slice(1),
-        ledgerCloseTime: moment(operation.operation.appliedAt)
-          .format('DD MMM YYYY [at] hh:mm:ss'),
+        ledgerCloseTime: DateUtil.format(
+          operation.operation.appliedAt,
+          'DD MMM YYYY [at] hh:mm:ss'
+        ),
         sourceAccount: operation.operation.source.id === this.masterPubKey
           ? globalize('operation-details.master') : operation.operation.source.id,
         receiverAccount: get(operation, 'operation.details.receiverAccount.id'),

src/components/User/Trades/components/PriceChart/PriceChart.Renderer.vue

@@ -14,7 +14,7 @@ import * as d3Transition from 'd3-transition'
 import * as d3Ease from 'd3-ease'
 import * as d3Format from 'd3-format'
 
-import moment from 'moment'
+import { DateUtil } from '@/utils/date.util'
 const d3 = Object.assign(
   {},
   d3Array,
@@ -129,7 +129,7 @@ export default {
     normalizeData (data) {
       return data
         .map(item => ({
-          time: moment(item.timestamp).toDate(),
+          time: DateUtil.toDate(item.timestamp),
           value: +item.value,
         }))
         .sort(function (a, b) { return a.time - b.time })
@@ -208,18 +208,22 @@ export default {
       let formatter
       if (diff < 2 * day) {
         formatter = (d) => {
-          const date = moment(d)
+          const date = DateUtil.date(d)
           const format = 'DD/MM HH:mm'
-          return date.minutes() < 30 // round the date
-            ? date.startOf('hour').format(format)
-            : date.add(1, 'hours').startOf('hour').format(format)
+          if (date.minute() < 30) {
+            return DateUtil.format(DateUtil.startOf('hour', date), format)
+          } else {
+            return DateUtil.format(
+              DateUtil.startOf('hour', DateUtil.add(date, 1, 'hours')), format
+            )
+          }
         }
       } else if (diff < week) {
-        formatter = (d) => moment(d).format('ddd DD/MM')
+        formatter = (d) => DateUtil.format(d, 'ddd DD/MM')
       } else if (diff < week * 2) {
-        formatter = (d) => moment(d).format('DD/MM')
+        formatter = (d) => DateUtil.format(d, 'DD/MM')
       } else {
-        formatter = (d) => moment(d).format('DD/MM/YYYY')
+        formatter = (d) => DateUtil.format(d, 'DD/MM/YYYY')
       }
       return formatter
     },
@@ -407,7 +411,7 @@ export default {
         const nearestPoint = x0 - d0.time > d1.time - x0 ? d1 : d0
         // Change text of the tooltip
         tipPriceText.text(this.formatMoney(nearestPoint.value))
-        tipTimeText.text(moment(nearestPoint.time).format('MM/DD/YYYY hh:mm a'))
+        tipTimeText.text(DateUtil.format(nearestPoint.time, 'MM/DD/YYYY hh:mm a'))
 
         // Change X position of the tip
         tip.attr('transform', `translate(${this.x(nearestPoint.time)})`)

src/components/common/fields/InputDateField.vue

@@ -26,7 +26,7 @@
 
 <script>
 import FlatPickr from 'vue-flatpickr-component'
-import moment from 'moment'
+import { DateUtil } from '@/utils/date.util'
 
 export default {
   components: { FlatPickr },
@@ -61,13 +61,13 @@ export default {
         disable: [
           (date) => {
             if (!this.disableBefore) return false
-            const stamp = moment(this.disableBefore)
-            return moment(date).isBefore(stamp)
+            const stamp = DateUtil.date(this.disableBefore)
+            return DateUtil.isBefore(date, stamp)
           },
           (date) => {
             if (!this.disableAfter) return false
-            const stamp = moment(this.disableAfter)
-            return moment(date).isAfter(stamp)
+            const stamp = DateUtil.date(this.disableAfter)
+            return DateUtil.isAfter(date, stamp)
           },
         ],
         enableTime: this.enableTime,

src/i18n/index.js

@@ -8,13 +8,13 @@ import i18nextBrowserLanguageDetector from 'i18next-browser-languagedetector'
 // https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes
 
 // 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 '@/utils/math.util'
+import { DateUtil } from '@/utils/date.util'
 
 class I18n {
   constructor () {
@@ -158,20 +158,19 @@ class I18n {
 
           switch (format.toLowerCase()) {
             case 'date':
-              return moment(param)
-                .format(_get(lngConfig, 'date.presets.datetime'))
+              return DateUtil.format(param, _get(lngConfig, 'date.presets.datetime'))
             case 'dmy':
-              return moment(param)
-                .format(_get(lngConfig, 'date.presets.dmy'))
+              return DateUtil.format(param, _get(lngConfig, 'date.presets.dmy'))
             case 'dmyt':
-              return moment(param)
-                .format(_get(lngConfig, 'date.presets.dmyt'))
+              return DateUtil.format(param, _get(lngConfig, 'date.presets.dmyt'))
             case 'calendar':
-              return moment(param)
-                .calendar(null, _get(lngConfig, 'date.calendar'))
+              return DateUtil.toHuman(
+                param, undefined, _get(lngConfig, 'date.calendar')
+              )
             case 'calendar-inline':
-              return moment(param)
-                .calendar(null, _get(lngConfig, 'date.calendarInline'))
+              return DateUtil.toHuman(
+                param, undefined, _get(lngConfig, 'date.calendarInline')
+              )
             case 'money':
               const value = (_isObject(param) ? param.value : param) || '0'
               const defaultFormat =

src/main.js

@@ -14,14 +14,16 @@ import App from './components/App/App.vue'
 import Auth from './auth'
 import params from './config'
 import Vuelidate from 'vuelidate'
-import moment from 'moment'
 
 import { i18n } from '@/i18n'
 
 /* Error tracker util */
 import { ErrorTracker } from '@/utils/ErrorTracker'
 import log from 'loglevel'
 
+/* Date util */
+import { DateUtil } from '@/utils/date.util'
+
 /* Vue filters */
 import {
   filterDateWithTime,
@@ -55,7 +57,7 @@ import { formatNumber } from './components/App/filters/formatNumber'
 
 async function init () {
   i18n.onLanguageChanged(lang => {
-    moment.locale(lang)
+    DateUtil.locale(lang)
   })
 
   await i18n.init()