Feat/1494 replace moment (#1569)

* [DateLocalization] replace moment with dayjs

* [DateLocalization] remove IgnorePlugin moment locale hack

* [StakingDateSelector] fix typos and typings

* Remove antd package

* [Trading Chart] Fix border

Co-authored-by: Soul Bit <its.soulBit@gmail.com>

config/webpack.config.js

@@ -643,12 +643,6 @@ module.exports = function (webpackEnv) {
           };
         },
       }),
-      // Moment.js is an extremely popular library that bundles large locale files
-      // by default due to how webpack interprets its code. This is a practical
-      // solution that requires the user to opt into importing specific locales.
-      // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
-      // You can remove this if you don't use Moment.js:
-      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
       // Generate a service worker script that will precache, and keep up to date,
       // the HTML & assets that are part of the webpack build.
       isEnvProduction &&

package.json

@@ -37,7 +37,6 @@
     "@typescript-eslint/parser": "^4.28.3",
     "@visx/responsive": "1.1.0",
     "animate.css": "4.1.1",
-    "antd": "4.12.2",
     "autoprefixer": "10.2.4",
     "axios": "0.21.1",
     "babel-eslint": "10.1.0",
@@ -54,6 +53,7 @@
     "cross-env": "7.0.2",
     "css-loader": "3.4.2",
     "d3-array": "2.8.0",
+    "dayjs": "1.10.6",
     "debounce": "1.2.0",
     "deep-equal": "2.0.3",
     "dotenv": "8.2.0",
@@ -95,8 +95,6 @@
     "local-storage": "2.0.0",
     "mathjs": ">=7.5.1",
     "mini-css-extract-plugin": "0.9.0",
-    "moment": "2.29.1",
-    "moment-timezone": "0.5.33",
     "node-plop": "0.25.0",
     "optimize-css-assets-webpack-plugin": "5.0.3",
     "plop": "2.6.0",

src/app/components/StakingDateSelector/index.tsx

@@ -3,9 +3,9 @@
  * StakingDateSelector
  *
  */
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import Slider from 'react-slick';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import { Icon } from '@blueprintjs/core';
 import { Text } from '@blueprintjs/core/lib/esm/components/text/text';
 import { MenuItem } from '@blueprintjs/core/lib/esm/components/menu/menuItem';
@@ -37,28 +37,36 @@ export function StakingDateSelector(props: Props) {
   const { t } = useTranslation();
   const onItemSelect = (item: { key: number }) => props.onClick(item.key / 1e3);
   const [dates, setDates] = useState<Date[]>([]);
-  const [currentYearDates, setCurrenYearDates] = useState<any>([]);
+  const [currentYearDates, setCurrenYearDates] = useState<DateItem[]>([]);
   const [filteredDates, setFilteredDates] = useState<DateItem[]>([]);
-  const [itemDisabled, setItemDisabled] = useState<any>([]);
+  const [itemDisabled, setItemDisabled] = useState<DateItem[]>([]);
   const [selectedYear, setSelectedYear] = useState('');
   const [selectedMonth, setSelectedMonth] = useState('');
   const [selectedDay, setSelectedDay] = useState('');
 
-  const dateWithoutStake = filteredDates.reduce((unique: any, o: any) => {
-    let isFound = itemDisabled.some((b: { key: any }) => {
-      return b.key === o.key;
-    });
-    if (!isFound) unique.push(o);
-    return unique;
-  }, []);
+  const [dateWithoutStake, availableYears, availableMonth] = useMemo(() => {
+    const dateWithoutStake = filteredDates.reduce(
+      (uniqueItems: DateItem[], item: DateItem) => {
+        const isDisabled = itemDisabled.some((b: DateItem) => {
+          return b.key === item.key;
+        });
+        if (!isDisabled) {
+          uniqueItems.push(item);
+        }
+        return uniqueItems;
+      },
+      [],
+    );
 
-  const avaliableYears = dateWithoutStake
-    .map(yearDate => moment(yearDate.date).format('YYYY'))
-    .filter((year, index, arr) => arr.indexOf(year) === index);
+    const availableYears = dateWithoutStake
+      .map(yearDate => dayjs(yearDate.date).format('YYYY'))
+      .filter((year, index, arr) => arr.indexOf(year) === index);
 
-  const avaliableMonth = currentYearDates
-    .map(yearDate => moment(yearDate.date).format('MMM'))
-    .filter((month, index, arr) => arr.indexOf(month) === index);
+    const availableMonth = currentYearDates
+      .map(yearDate => dayjs(yearDate.date).format('MMM'))
+      .filter((month, index, arr) => arr.indexOf(month) === index);
+    return [dateWithoutStake, availableYears, availableMonth];
+  }, [currentYearDates, filteredDates, itemDisabled]);
 
   const getDatesByYear = useCallback(
     year => {
@@ -80,9 +88,9 @@ export function StakingDateSelector(props: Props) {
         item => item.getTime() > ((props.startTs as unknown) as number),
       );
     } else {
-      const now = Date.now() + 1.21e9; // added 14 days in ms
+      const closestAllowed = dayjs().add(14, 'days').valueOf();
       filtered = dates.filter(item => {
-        return item.getTime() > now;
+        return item.getTime() > closestAllowed;
       });
     }
 
@@ -98,7 +106,7 @@ export function StakingDateSelector(props: Props) {
       setItemDisabled(
         (props.stakes as any).map((item: number) => ({
           key: item * 1e3,
-          label: moment(new Date(item * 1e3)).format('DD.MM.YYYY'),
+          label: dayjs(new Date(item * 1e3)).format('L'),
           date: new Date(item * 1e3),
         })),
       );
@@ -108,7 +116,7 @@ export function StakingDateSelector(props: Props) {
       setFilteredDates(
         (props.stakes as any).map((item: number) => ({
           key: item * 1e3,
-          label: moment(new Date(item * 1e3)).format('DD.MM.YYYY'),
+          label: dayjs(new Date(item * 1e3)).format('L'),
           date: new Date(item * 1e3),
         })),
       );
@@ -119,10 +127,11 @@ export function StakingDateSelector(props: Props) {
     if (props.kickoffTs) {
       const dates: Date[] = [];
       const datesFutured: Date[] = [];
-      let lastDate = moment(props.kickoffTs * 1e3).clone();
+      let lastDate = dayjs(props.kickoffTs * 1e3);
       for (let i = 1; i <= maxPeriods; i++) {
         const date = lastDate.add(2, 'weeks');
-        dates.push(date.clone().toDate());
+        lastDate = date;
+        dates.push(date.toDate());
         if ((props.prevExtend as any) <= date.unix()) {
           datesFutured.push(date.clone().toDate());
         }
@@ -166,15 +175,15 @@ export function StakingDateSelector(props: Props) {
 
   return (
     <>
-      {avaliableYears.length > 0 && (
+      {availableYears.length > 0 && (
         <label className="tw-block tw-mt-8 tw-text-theme-white tw-text-md tw-font-medium tw-mb-2">
           {props.delegate
             ? t(translations.stake.dateSelector.selectDelegate)
             : t(translations.stake.dateSelector.selectYear)}
         </label>
       )}
       <div className="tw-flex tw-flex-row">
-        {avaliableYears.map((year, i) => {
+        {availableYears.map((year, i) => {
           return (
             <div className="tw-mr-5" key={i}>
               <button
@@ -195,28 +204,28 @@ export function StakingDateSelector(props: Props) {
       </div>
       <div className="sliderMonth tw-mt-5 tw-pr-0">
         <Slider {...settingsSliderMonth}>
-          {avaliableMonth.map((monthName: React.ReactNode, i) => {
+          {availableMonth.map((monthName: React.ReactNode, i) => {
             return (
               <div key={i}>
                 <div className="tw-mb-1 tw-font-light tw-text-sm tw-text-center tw-text-gray-300">
                   {monthName}
                   {currentYearDates.map((item, i) => {
-                    if (moment(item.date).format('MMM') === monthName) {
+                    if (dayjs(item.date).format('MMM') === monthName) {
                       return (
                         <div
                           key={i}
                           onClick={() => {
                             onItemSelect(item);
-                            setSelectedDay(moment(item.date).format('D'));
-                            setSelectedMonth(moment(item.date).format('MMM'));
+                            setSelectedDay(dayjs(item.date).format('D'));
+                            setSelectedMonth(dayjs(item.date).format('MMM'));
                           }}
                           className={`tw-flex tw-items-center tw-justify-center tw-mr-1 tw-mb-1 tw-h-10 tw-leading-10 tw-rounded-lg tw-border tw-border-theme-blue tw-cursor-pointer tw-transition tw-duration-300 tw-ease-in-out hover:tw-bg-theme-blue hover:tw-bg-opacity-30 tw-px-5 tw-py-0 tw-text-center tw-border-r tw-text-md tw-text-theme-blue tw-tracking-tighter ${
-                            selectedDay === moment(item.date).format('D') &&
-                            selectedMonth === moment(item.date).format('MMM') &&
+                            selectedDay === dayjs(item.date).format('D') &&
+                            selectedMonth === dayjs(item.date).format('MMM') &&
                             'tw-bg-opacity-30 tw-bg-theme-blue'
                           }`}
                         >
-                          {moment(item.date).format('D')}
+                          {dayjs(item.date).format('D')}
                         </div>
                       );
                     } else {
@@ -229,7 +238,7 @@ export function StakingDateSelector(props: Props) {
           })}
         </Slider>
       </div>
-      {avaliableYears.length <= 0 && (
+      {availableYears.length <= 0 && (
         <p className="tw-block tw-mt-4 tw-text-red tw-text-sm tw-font-medium tw-mb-2">
           {t(translations.stake.dateSelector.noneAvailable)}
         </p>

src/app/components/TradingChart/index.tsx

@@ -99,7 +99,7 @@ export function TradingChart(props: ChartContainerProps) {
     <div
       className={cn(
         'tw-w-full tw-h-full tw-flex tw-rounded tw-overflow-hidden',
-        hasCharts && 'border',
+        hasCharts && 'tw-border',
       )}
       style={{ minWidth: 270, minHeight: 500 }}
     >

src/app/containers/StakePage/components/CurrentStakes.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { bignumber } from 'mathjs';
 import { Asset } from '../../../../types/asset';
-import moment from 'moment-timezone';
+import dayjs from 'dayjs';
 import logoSvg from 'assets/images/tokens/sov.svg';
 import { useAccount } from '../../../hooks/useAccount';
 import { numberToUSD } from 'utils/display-text/format';
@@ -159,7 +159,7 @@ function AssetRow(props: AssetProps) {
   const [weight, setWeight] = useState('');
   const locked = Number(props.item[1]) > Math.round(now.getTime() / 1e3); //check if date is locked
   const stakingPeriod = Math.abs(
-    moment().diff(moment(new Date(parseInt(props.item[1]) * 1e3)), 'days'),
+    dayjs().diff(parseInt(props.item[1]) * 1e3, 'days'),
   );
   const [votingPower, setVotingPower] = useState<number>(0 as any);
   const WEIGHT_FACTOR = useStaking_WEIGHT_FACTOR();
@@ -223,9 +223,10 @@ function AssetRow(props: AssetProps) {
       </td>
       <td className="tw-text-left tw-hidden lg:tw-table-cell tw-font-normal">
         <p className="tw-m-0">
-          {moment
-            .tz(new Date(parseInt(props.item[1]) * 1e3), 'GMT')
-            .format('DD/MM/YYYY - h:mm:ss a z')}
+          {dayjs
+            .tz(parseInt(props.item[1]) * 1e3, 'UTC')
+            .tz(dayjs.tz.guess())
+            .format('L - LTS Z')}
         </p>
       </td>
       <td className="md:tw-text-left lg:tw-text-right tw-hidden md:tw-table-cell">

src/app/containers/StakePage/components/ExtendStakeForm.tsx

@@ -1,5 +1,5 @@
 import React, { FormEvent } from 'react';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import { useTranslation, Trans } from 'react-i18next';
 import { translations } from 'locales/i18n';
 import { numberFromWei } from 'utils/blockchain/math-helpers';
@@ -38,7 +38,7 @@ export function ExtendStakeForm(props: Props) {
         {t(translations.stake.extending.previousUntil)}:
         <br />
         <span className="tw-font-bold">
-          {moment(new Date(props.prevExtend * 1e3)).format('DD.MM.YYYY')}
+          {dayjs(props.prevExtend * 1e3).format('L')}
         </span>
       </div>
       <form onSubmit={props.handleSubmit}>

src/app/containers/StakePage/components/HistoryEventsTable.tsx

@@ -2,7 +2,7 @@ import React, { useMemo, useState, useCallback } from 'react';
 import { useTranslation, Trans } from 'react-i18next';
 import { translations } from 'locales/i18n';
 import axios from 'axios';
-import moment from 'moment-timezone';
+import dayjs from 'dayjs';
 import styled from 'styled-components/macro';
 import iconSuccess from 'assets/images/icon-success.svg';
 import iconRejected from 'assets/images/icon-rejected.svg';
@@ -178,9 +178,10 @@ const HistoryTableAsset: React.FC<HistoryAsset> = ({ item }) => {
   return (
     <tr>
       <td>
-        {moment
-          .tz(new Date(item.timestamp * 1e3), 'GMT')
-          .format('DD/MM/YYYY - h:mm:ss a z')}
+        {dayjs
+          .tz(item.timestamp * 1e3, 'UTC')
+          .tz(dayjs.tz.guess())
+          .format('L - LTS Z')}
       </td>
       <td>{getActionName(item.action)}</td>
       <td className="tw-text-left tw-font-normal">

src/app/containers/StakePage/components/VestingContract.tsx

@@ -1,6 +1,6 @@
 import { Tooltip } from '@blueprintjs/core';
 import { bignumber } from 'mathjs';
-import moment from 'moment-timezone';
+import dayjs from 'dayjs';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -199,21 +199,17 @@ export function VestingContract(props: Props) {
             <td className="tw-text-left tw-hidden lg:tw-table-cell tw-font-normal">
               {locked && (
                 <p className={`tw-m-0 ${!unlockDate && 'skeleton'}`}>
-                  {Math.abs(
-                    moment().diff(
-                      moment(new Date(parseInt(unlockDate) * 1e3)),
-                      'days',
-                    ),
-                  )}{' '}
+                  {Math.abs(dayjs().diff(parseInt(unlockDate) * 1e3, 'days'))}{' '}
                   days
                 </p>
               )}
             </td>
             <td className="tw-text-left tw-hidden lg:tw-table-cell tw-font-normal">
               <p className={`tw-m-0 ${!stakingPeriodStart && 'skeleton'}`}>
-                {moment
-                  .tz(new Date(parseInt(unlockDate) * 1e3), 'GMT')
-                  .format('DD/MM/YYYY - h:mm:ss a z')}
+                {dayjs
+                  .tz(parseInt(unlockDate) * 1e3, 'UTC')
+                  .tz(dayjs.tz.guess())
+                  .format('L - LTS Z')}
               </p>
             </td>
             <td>

src/app/containers/StakePage/components/WithdrawConfimationForm.tsx

@@ -3,7 +3,7 @@ import { useTranslation, Trans } from 'react-i18next';
 import { translations } from 'locales/i18n';
 import { numberFromWei } from 'utils/blockchain/math-helpers';
 import styled from 'styled-components/macro';
-import moment from 'moment-timezone';
+import dayjs from 'dayjs';
 import iconReject from 'assets/images/failed-tx.svg';
 import { discordInvite } from 'utils/classifiers';
 import { useMaintenance } from 'app/hooks/useMaintenance';
@@ -43,9 +43,10 @@ export function WithdrawConfirmationForm(props: Props) {
           {t(translations.stake.withdraw.stakeUnlockUntil)}:
         </p>
         <div className="tw-text-center tw-text-xl tw-font-normal tw-mb-8 tw-mt-4">
-          {moment
-            .tz(new Date(parseInt(props.until.toString()) * 1e3), 'GMT')
-            .format('DD/MM/YYYY - h:mm:ss a z')}
+          {dayjs
+            .tz(props.until * 1e3, 'UTC')
+            .tz(dayjs.tz.guess())
+            .format('L - LTS Z')}
         </div>
 
         {props.forfeit === 0 ? (

src/app/containers/VestedHistory/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { translations } from 'locales/i18n';
-import moment from 'moment-timezone';
+import dayjs from 'dayjs';
 import iconSuccess from 'assets/images/icon-success.svg';
 import iconRejected from 'assets/images/icon-rejected.svg';
 import iconPending from 'assets/images/icon-pending.svg';
@@ -233,9 +233,10 @@ const HisoryTableAsset: React.FC<HisoryAsset> = ({ item }) => {
   return (
     <tr>
       <td>
-        {moment
-          .tz(new Date(item.eventDate), 'GMT')
-          .format('DD/MM/YYYY - h:mm:ss a z')}
+        {dayjs
+          .tz(parseInt(item.eventDate) * 1e3, 'UTC')
+          .tz(dayjs.tz.guess())
+          .format('L - LTS Z')}
       </td>
       <td className="tw-text-left tw-font-normal tw-tracking-normal">
         <div className="assetname tw-flex tw-items-center">

src/app/pages/Escrow/components/InfoBar/index.tsx

@@ -8,7 +8,7 @@ import { Trans, useTranslation } from 'react-i18next';
 import { translations } from '../../../../../locales/i18n';
 import { useCacheCallWithValue } from '../../../../hooks/useCacheCallWithValue';
 import { bignumber } from 'mathjs';
-import moment from 'moment';
+import dayjs from 'dayjs';
 
 // const countdownDate = new Date('2021-05-06T00:00:00'); // todo
 
@@ -70,7 +70,7 @@ export function InfoBar() {
                     <Tooltip
                       content={
                         <>
-                          {moment(Number(releaseTime.value) * 1e3).format(
+                          {dayjs(Number(releaseTime.value) * 1e3).format(
                             'YYYY-MM-DD HH:mm:ss',
                           )}
                         </>