refactor: replace moment with dayjs (#1753)

* refactor: replace moment with dayjs

* fix: require dayjs locale and advanced formatting rules

* fix: default to local time

* Revert "fix: default to local time"

This reverts commit d0e94d4.

* refactor: replace moment call with day.js

* wip

* wip

Co-authored-by: Alex Barnsley <[email protected]>

package.json

@@ -88,7 +88,6 @@
     "localforage": "^1.7.3",
     "lodash": "^4.17.13",
     "mersenne-twister": "^1.1.0",
-    "moment": "^2.24.0",
     "package-json": "^6.5.0",
     "parse-author": "^2.0.0",
     "portal-vue": "^2.1.5",

src/renderer/components/MarketChart/MarketChart.vue

@@ -28,10 +28,10 @@
 </template>
 
 <script>
-import dayjs from 'dayjs'
 import LineChart from '@/components/utils/LineChart'
 import Loader from '@/components/utils/Loader'
 import priceApi from '@/services/price-api'
+import { dayjs } from '@/services/datetime'
 
 export default {
   name: 'MarketChart',

src/renderer/mixins/formatter.js

@@ -1,4 +1,4 @@
-import moment from 'moment'
+import { dayjs } from '@/services/datetime'
 import prettyBytes from 'pretty-bytes'
 
 export default {
@@ -34,7 +34,20 @@ export default {
      * @return {String}
      */
     formatter_date (value, format = null) {
-      moment.locale(window.navigator.userLanguage || window.navigator.language)
+      let userLanguage =
+        (window.navigator.userLanguage || window.navigator.language).toLowerCase()
+
+      if (userLanguage === 'en-us') {
+        userLanguage = 'en'
+      }
+
+      try {
+        require(`dayjs/locale/${userLanguage}`)
+      } catch {
+        userLanguage = 'en'
+      }
+
+      dayjs.locale(userLanguage)
 
       if (!format) {
         const sessionFormat = this.session_profile.timeFormat
@@ -46,7 +59,8 @@ export default {
           format = 'L LTS'
         }
       }
-      return moment(value).format(format)
+
+      return dayjs(value).format(format)
     }
   }
 }

src/renderer/services/crypto/transaction-signer.js

@@ -1,5 +1,5 @@
 import { Identities, Transactions } from '@arkecosystem/crypto'
-import moment from 'moment'
+import { dayjs } from '@/services/datetime'
 import { TRANSACTION_TYPES } from '@config'
 import store from '@/store'
 import TransactionService from '@/services/transaction'
@@ -31,10 +31,10 @@ export class TransactionSigner {
     transaction = transaction.network(network.version)
 
     // TODO replace with dayjs
-    const epochTime = moment(network.constants.epoch)
+    const epochTime = dayjs(network.constants.epoch)
       .utc()
       .valueOf()
-    const now = moment().valueOf()
+    const now = dayjs().valueOf()
     transaction.data.timestamp = Math.floor((now - epochTime) / 1000)
 
     if (passphrase) {

src/renderer/services/datetime.js

@@ -0,0 +1,11 @@
+import dayjs from 'dayjs'
+import advancedFormat from 'dayjs/plugin/advancedFormat'
+import localizedFormat from 'dayjs/plugin/localizedFormat'
+import utc from 'dayjs/plugin/utc'
+
+dayjs.extend(advancedFormat)
+dayjs.extend(localizedFormat)
+// todo: do we default to UTC or local time?
+dayjs.extend(utc)
+
+export { dayjs }

src/renderer/services/plugin-manager.js

@@ -1,7 +1,7 @@
 import * as adapters from '@/services/plugin-manager/adapters'
 import releaseService from '@/services/release'
 import { PLUGINS } from '@config'
-import dayjs from 'dayjs'
+import { dayjs } from '@/services/datetime'
 import * as fs from 'fs'
 import * as fsExtra from 'fs-extra'
 import got from 'got'

src/renderer/services/price-api/coin-cap.js

@@ -1,8 +1,7 @@
 import got from 'got'
-import dayjs from 'dayjs'
-import moment from 'moment'
-import { min, max } from '@/utils'
+import { min, max } from 'lodash'
 import { MARKET } from '@config'
+import { dayjs } from '@/services/datetime'
 
 // All prices on the CoinCap API are standardized in USD (United States Dollar)
 const BASE_CURRENCY = 'USD'
@@ -140,8 +139,8 @@ export default class CoinCapAdapter {
     const { rates } = await this.getCurrencyData(token)
     const daysSubtract = days === 24 ? 1 : days
     const timeInterval = days === 24 ? 'h1' : 'h12'
-    const startDate = moment().subtract(daysSubtract, 'd').valueOf()
-    const endDate = moment().valueOf()
+    const startDate = dayjs().subtract(daysSubtract, 'd').valueOf()
+    const endDate = dayjs().valueOf()
     const { body } = await got(`${MARKET.source.coinCap}/assets/${tokenId}/history?interval=${timeInterval}&start=${startDate}&end=${endDate}`, {
       json: true
     })

src/renderer/services/price-api/coin-gecko.js

@@ -1,6 +1,6 @@
 import got from 'got'
-import dayjs from 'dayjs'
-import { min, max } from '@/utils'
+import { dayjs } from '@/services/datetime'
+import { min, max } from 'lodash'
 import { MARKET } from '@config'
 
 export default class CoinGeckoAdapter {

src/renderer/services/price-api/crypto-compare.js

@@ -1,6 +1,6 @@
 import got from 'got'
-import dayjs from 'dayjs'
-import { min, max } from '@/utils'
+import { dayjs } from '@/services/datetime'
+import { min, max } from 'lodash'
 import { MARKET } from '@config'
 
 export default class CryptoCompareAdapter {

src/renderer/store/modules/transaction.js

@@ -1,4 +1,4 @@
-import dayjs from 'dayjs'
+import { dayjs } from '@/services/datetime'
 import { unionBy } from 'lodash'
 import { APP, TRANSACTION_GROUPS, TRANSACTION_TYPES } from '@config'
 import eventBus from '@/plugins/event-bus'

yarn.lock

@@ -8962,7 +8962,7 @@ modify-filename@^1.1.0:
   resolved "https://registry.yarnpkg.com/modify-filename/-/modify-filename-1.1.0.tgz#9a2dec83806fbb2d975f22beec859ca26b393aa1"
   integrity sha1-mi3sg4Bvuy2XXyK+7IWcoms5OqE=
 
-moment@^2.10.2, moment@^2.24.0:
+moment@^2.10.2:
   version "2.24.0"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
   integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==