[DDW-619] Replace momentjs with dayjs

package.json

@@ -193,6 +193,7 @@
     "classnames": "2.2.6",
     "csv-stringify": "5.5.1",
     "cucumber-html-reporter": "5.2.0",
+    "dayjs": "1.10.4",
     "electron": "8.2.2",
     "electron-log-daedalus": "2.2.21",
     "electron-store": "5.1.1",
@@ -216,7 +217,6 @@
     "mobx-react": "6.3.0",
     "mobx-react-form": "2.0.8",
     "mobx-react-router": "4.1.0",
-    "moment": "2.29.0",
     "node-downloader-helper": "1.0.14",
     "omit-deep-lodash": "1.1.5",
     "pbkdf2": "3.0.17",

source/common/types/locales.types.js

@@ -14,9 +14,9 @@ export const humanizedDurationLanguages = {
   'ja-JP': 'ja',
 };
 
-export const momentLocales: {
+export const dayjsLocales: {
   [key: Locale]: string,
 } = {
-  'en-US': 'en-us',
+  'en-US': 'en',
   'ja-JP': 'ja',
 };

source/common/utils/files.js

@@ -1,7 +1,10 @@
 // @flow
-import moment from 'moment';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
 import sanitizeFilename from 'sanitize-filename';
 
+dayjs.extend(utc);
+
 export const defaultProps = {
   prefix: 'logs',
   extension: 'zip',
@@ -12,7 +15,7 @@ export const defaultProps = {
 type Props = {
   prefix?: string,
   extension?: string,
-  date?: moment,
+  date?: dayjs.Dayjs,
   isUTC?: boolean,
   sanitize?: boolean,
 };
@@ -22,7 +25,7 @@ export const generateFileNameWithTimestamp = (props?: Props = {}) => {
     ...defaultProps,
     ...props,
   };
-  let date = props.date || moment();
+  let date = props.date || dayjs();
   let z = '';
   if (isUTC === true) {
     if (!props || !Object.prototype.hasOwnProperty.call(props, 'date'))

source/main/cardano/CardanoNode.js

@@ -5,7 +5,8 @@ import type { ChildProcess } from 'child_process';
 import type { WriteStream } from 'fs';
 import type { Launcher } from 'cardano-launcher';
 import { get, toInteger } from 'lodash';
-import moment from 'moment';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
 import rfs from 'rotating-file-stream';
 import { environment } from '../environment';
 import {
@@ -34,6 +35,8 @@ import { launcherConfig } from '../config';
 import type { NodeConfig } from '../config';
 import type { Logger } from '../../common/types/logging.types';
 
+dayjs.extend(utc);
+
 /* eslint-disable consistent-return */
 
 type Actions = {
@@ -317,7 +320,7 @@ export class CardanoNode {
         (time) => {
           // The module works by writing to the one file name before it is rotated out.
           if (!time) return 'node.log';
-          const timestamp = moment.utc().format('YYYYMMDDHHmmss');
+          const timestamp = dayjs.utc().format('YYYYMMDDHHmmss');
           return `node.log-${timestamp}`;
         },
         {
@@ -332,7 +335,7 @@ export class CardanoNode {
         (time) => {
           // The module works by writing to the one file name before it is rotated out.
           if (!time) return 'cardano-wallet.log';
-          const timestamp = moment.utc().format('YYYYMMDDHHmmss');
+          const timestamp = dayjs.utc().format('YYYYMMDDHHmmss');
           return `cardano-wallet.log-${timestamp}`;
         },
         {

source/renderer/app/api/api.js

@@ -2,7 +2,9 @@
 import { split, get, map, last, size, concat, flatten } from 'lodash';
 import { action } from 'mobx';
 import BigNumber from 'bignumber.js';
-import moment from 'moment';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import duration from 'dayjs/plugin/duration';
 // domains
 import Wallet, {
   WalletDelegationStatuses,
@@ -239,6 +241,9 @@ import Asset from '../domains/Asset';
 import { getAssets } from './assets/requests/getAssets';
 import { getAccountPublicKey } from './wallets/requests/getAccountPublicKey';
 
+dayjs.extend(utc);
+dayjs.extend(duration);
+
 const { isIncentivizedTestnet } = global;
 
 export default class AdaApi {
@@ -448,9 +453,9 @@ export default class AdaApi {
       }
     );
     if (fromDate)
-      params.start = `${moment.utc(fromDate).format('YYYY-MM-DDTHH:mm:ss')}Z`;
+      params.start = `${dayjs.utc(fromDate).format('YYYY-MM-DDTHH:mm:ss')}Z`;
     if (toDate)
-      params.end = `${moment.utc(toDate).format('YYYY-MM-DDTHH:mm:ss')}Z`;
+      params.end = `${dayjs.utc(toDate).format('YYYY-MM-DDTHH:mm:ss')}Z`;
 
     try {
       let response;
@@ -482,13 +487,13 @@ export default class AdaApi {
     //   cachedTransactions: request.cachedTransactions.length,
     // });
     //  logger.debug('AdaApi::searchHistory called', { parameters: requestStats });
-    // const requestTimestamp = moment();
+    // const requestTimestamp = dayjs();
     // const params = {
     //   wallet_id: walletId,
     //   page: skip === 0 ? 1 : skip + 1,
     //   per_page: perPage,
     //   sort_by: 'DES[created_at]',
-    //   created_at: `LTE[${moment.utc().format('YYYY-MM-DDTHH:mm:ss')}]`,
+    //   created_at: `LTE[${dayjs.utc().format('YYYY-MM-DDTHH:mm:ss')}]`,
     //   // ^^ By setting created_at filter to current time we make sure
     //   // all subsequent multi-pages requests load the same set of transactions
     // };
@@ -516,15 +521,15 @@ export default class AdaApi {
     //   page: skip === 0 ? 1 : skip + 1,
     //   per_page: perPage,
     //   sort_by: 'DES[created_at]',
-    //   created_at: `LTE[${moment.utc().format('YYYY-MM-DDTHH:mm:ss')}]`,
+    //   created_at: `LTE[${dayjs.utc().format('YYYY-MM-DDTHH:mm:ss')}]`,
     //   // ^^ By setting created_at filter to current time we make sure
     //   // all subsequent multi-pages requests load the same set of transactions
     // };
     //
     // const shouldLoadOnlyFresh =
     //   !isFirstLoad && !isRestoreActive && !isRestoreCompleted;
     // if (shouldLoadOnlyFresh) {
-    //   const tenMinutesAgo = moment
+    //   const tenMinutesAgo = dayjs
     //     .utc(Date.now() - TX_AGE_POLLING_THRESHOLD)
     //     .format('YYYY-MM-DDTHH:mm:ss');
     //   // Since we load all transactions in a first load, later on we only care about fresh ones
@@ -570,7 +575,7 @@ export default class AdaApi {
     //
     //     if (isRestoreActive || isRestoreCompleted) {
     //       const latestLoadedTransactionDate = transactions[0].date;
-    //       const latestLoadedTransactionDateString = moment
+    //       const latestLoadedTransactionDateString = dayjs
     //         .utc(latestLoadedTransactionDate)
     //         .format('YYYY-MM-DDTHH:mm:ss');
     //       // During restoration we need to fetch only transactions older than the latest loaded one
@@ -612,9 +617,7 @@ export default class AdaApi {
     //     daedalusCached: cachedTransactions.length,
     //     daedalusLoaded: total - cachedTransactions.length,
     //     daedalusTotal: total,
-    //     requestDurationInMs: moment
-    //       .duration(moment().diff(requestTimestamp))
-    //       .as('milliseconds'),
+    //     requestDurationInMs: dayjs.duration(dayjs().diff(requestTimestamp)).as('milliseconds'),
     //   };
     //   logger.debug(
     //     `AdaApi::searchHistory success: ${total} transactions loaded`,
@@ -2327,7 +2330,7 @@ export default class AdaApi {
         minimum_utxo_value: minimumUtxoValue,
         eras,
       } = networkParameters;
-      const blockchainStartTime = moment(blockchain_start_time).valueOf();
+      const blockchainStartTime = dayjs(blockchain_start_time).valueOf();
 
       return {
         genesisBlockHash,

source/renderer/app/api/utils/index.js

@@ -1,12 +1,15 @@
 // @flow
-import moment from 'moment';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
 import blakejs from 'blakejs';
 
+dayjs.extend(utc);
+
 // time utils
 export const unixTimestampToDate = (timestamp: number) =>
   new Date(timestamp * 1000);
 export const utcStringToDate = (createDate: string) =>
-  moment.utc(createDate).toDate();
+  dayjs.utc(createDate).toDate();
 
 // passphrase utils
 const bytesToB16 = (bytes) => Buffer.from(bytes).toString('hex');

source/renderer/app/components/news/AlertsOverlay.js

@@ -1,6 +1,7 @@
 // @flow
 import React, { Component } from 'react';
-import moment from 'moment';
+import dayjs from 'dayjs';
+import localeData from 'dayjs/plugin/localeData';
 import { observer } from 'mobx-react';
 import { get } from 'lodash';
 import ReactMarkdown from 'react-markdown';
@@ -11,6 +12,8 @@ import closeCrossThin from '../../assets/images/close-cross-thin.inline.svg';
 import ButtonLink from '../widgets/ButtonLink';
 import styles from './AlertsOverlay.scss';
 
+dayjs.extend(localeData);
+
 type State = {
   showOverlay: boolean,
 };
@@ -38,7 +41,7 @@ export default class AlertsOverlay extends Component<Props, State> {
   localizedDateFormat: 'MM/DD/YYYY';
 
   componentDidMount() {
-    this.localizedDateFormat = moment.localeData().longDateFormat('L');
+    this.localizedDateFormat = dayjs.localeData().longDateFormat('L');
   }
 
   contentClickHandler(event: SyntheticMouseEvent<HTMLElement>) {
@@ -112,7 +115,7 @@ export default class AlertsOverlay extends Component<Props, State> {
           {this.renderCounter(alerts)}
           <h1 className={styles.title}>{title}</h1>
           <span className={styles.date}>
-            {moment(date).format(currentDateFormat)}
+            {dayjs(date).format(currentDateFormat)}
           </span>
           <div
             className={styles.content}

source/renderer/app/components/news/IncidentOverlay.js

@@ -1,6 +1,7 @@
 // @flow
 import React, { Component } from 'react';
-import moment from 'moment';
+import dayjs from 'dayjs';
+import localeData from 'dayjs/plugin/localeData';
 import { observer } from 'mobx-react';
 import { get, camelCase } from 'lodash';
 import ReactMarkdown from 'react-markdown';
@@ -10,6 +11,8 @@ import News from '../../domains/News';
 import ButtonLink from '../widgets/ButtonLink';
 import styles from './IncidentOverlay.scss';
 
+dayjs.extend(localeData);
+
 type Props = {
   incident: News.News,
   onOpenExternalLink: Function,
@@ -22,7 +25,7 @@ export default class IncidentOverlay extends Component<Props> {
   localizedDateFormat: 'MM/DD/YYYY';
 
   componentDidMount() {
-    this.localizedDateFormat = moment.localeData().longDateFormat('L');
+    this.localizedDateFormat = dayjs.localeData().longDateFormat('L');
   }
 
   contentClickHandler(event: SyntheticMouseEvent<HTMLElement>) {
@@ -68,7 +71,7 @@ export default class IncidentOverlay extends Component<Props> {
       <div className={componentClasses}>
         <h1 className={styles.title}>{title}</h1>
         <span className={styles.date}>
-          {moment(date).format(currentDateFormat)}
+          {dayjs(date).format(currentDateFormat)}
         </span>
         <div
           className={styles.content}

source/renderer/app/components/news/NewsItem.js

@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 import { observer } from 'mobx-react';
 import classNames from 'classnames';
 import ReactMarkdown from 'react-markdown';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import { get } from 'lodash';
 import AnimateHeight from 'react-animate-height';
 import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
@@ -126,7 +126,7 @@ export default class NewsItem extends Component<Props, State> {
       >
         {title}
         <div className={styles.newsItemDate}>
-          {moment(newsItem.date).format(currentDateFormat)}
+          {dayjs(newsItem.date).format(currentDateFormat)}
         </div>
         <div className={styles.newsItemContentWrapper}>
           <AnimateHeight

source/renderer/app/components/news/UpdateItem.js

@@ -2,7 +2,7 @@
 import React, { Component } from 'react';
 import { observer } from 'mobx-react';
 import classNames from 'classnames';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import News /* , { NewsTypes } */ from '../../domains/News';
 import styles from './UpdateItem.scss';
 
@@ -64,7 +64,7 @@ export default class UpdateItem extends Component<Props> {
       >
         {title}
         <div className={styles.date}>
-          {moment(updateItem.date).format(currentDateFormat)}
+          {dayjs(updateItem.date).format(currentDateFormat)}
         </div>
         {!isUpdatePostponed && (
           <div className={styles.downloadProgress}>

source/renderer/app/components/staking/legacy/StakingChartTooltip.js

@@ -2,7 +2,7 @@
 import React, { Component } from 'react';
 import { observer } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import StakingChartTooltipItem from './StakingChartTooltipItem';
 import styles from './StakingChartTooltip.scss';
 
@@ -75,7 +75,7 @@ export default class StakingChartTooltip extends Component<Props> {
         <div className={styles.slot}>
           {`#${slot}`} {intl.formatMessage(messages.slot)}
         </div>
-        <div className={styles.date}>{moment(time).format(dateFormat)}</div>
+        <div className={styles.date}>{dayjs(time).format(dateFormat)}</div>
         <div className={styles.hash}>{hash}</div>
         <StakingChartTooltipItem
           key="transactions"

source/renderer/app/components/staking/stake-pools/StakePoolsTableBody.js

@@ -4,7 +4,9 @@ import { observer } from 'mobx-react';
 import { intlShape } from 'react-intl';
 import { get, map } from 'lodash';
 import BigNumber from 'bignumber.js';
-import moment from 'moment';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import 'dayjs/locale/ja';
 import classNames from 'classnames';
 import {
   formattedWalletAmount,
@@ -15,6 +17,8 @@ import styles from './StakePoolsTable.scss';
 import { getColorFromRange, getSaturationColor } from '../../../utils/colors';
 import StakePool from '../../../domains/StakePool';
 
+dayjs.extend(relativeTime);
+
 type TableBodyProps = {
   sortedStakePoolList: StakePool,
   numberOfRankedStakePools: number,
@@ -58,7 +62,7 @@ export class StakePoolsTableBody extends Component<TableBodyProps> {
       );
       const potentialRewards = formattedWalletAmount(memberRewards);
       const retirement =
-        retiring && moment(retiring).locale(intl.locale).fromNow(true);
+        retiring && dayjs(retiring).locale(intl.locale).fromNow(true);
       const pledgeValue = formattedWalletAmount(pledge, false, false);
       const costValue = formattedWalletAmount(cost, false, false);
       const progressBarContentClassnames = classNames([

source/renderer/app/components/staking/widgets/TooltipPool.js

@@ -12,7 +12,9 @@ import { Button } from 'react-polymorph/lib/components/Button';
 import { PopOver } from 'react-polymorph/lib/components/PopOver';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import classnames from 'classnames';
-import moment from 'moment';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import 'dayjs/locale/ja';
 import SVGInline from 'react-svg-inline';
 import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
 import { Link } from 'react-polymorph/lib/components/Link';
@@ -37,6 +39,8 @@ import {
   IS_SATURATION_DATA_AVAILABLE,
 } from '../../../config/stakingConfig';
 
+dayjs.extend(relativeTime);
+
 const messages = defineMessages({
   ranking: {
     id: 'staking.stakePools.tooltip.ranking',
@@ -450,7 +454,7 @@ export default class TooltipPool extends Component<Props, State> {
     const { id, name, description, ticker, homepage, retiring } = stakePool;
 
     const retirementFromNow = retiring
-      ? moment(retiring).locale(intl.locale).fromNow(true)
+      ? dayjs(retiring).locale(intl.locale).fromNow(true)
       : '';
 
     const idCopyIcon = idCopyFeedback ? copyCheckmarkIcon : copyIcon;