feat: remove all instances of moment usage

lib/admin/server.js

@@ -1,11 +1,11 @@
 const _ = require('lodash/fp')
-const moment = require('moment')
 
 const ticker = require('../ticker')
 const settingsLoader = require('./settings-loader')
 
 const db = require('../db')
 const machineLoader = require('../machine-loader')
+const { intervalToDuration, secondsToMilliseconds, formatDuration } = require('date-fns')
 
 const CONSIDERED_UP_SECS = 30
 
@@ -37,8 +37,8 @@ function machinesLastPing () {
 
       if (downRows.length === 1) {
         const row = downRows[0]
-        const age = moment.duration(row.age, 'seconds')
+        const age = intervalToDuration({ start: 0, end: secondsToMilliseconds(row.age) })
-        return `${row.name} down for ${age.humanize()}`
+        return `${row.name} down for ${formatDuration(age)}`
       }
 
       return 'Multiple machines down'
@@ -54,9 +54,9 @@ function status () {
 
   return Promise.all([checkWasConfigured(), db.oneOrNone(sql, ['ping']), machinesLastPing()])
     .then(([wasConfigured, statusRow, machineStatus]) => {
-      const age = statusRow && moment.duration(statusRow.age, 'seconds')
+      const age = statusRow && intervalToDuration({ start: 0, end: secondsToMilliseconds(statusRow.age) })
       const up = statusRow ? statusRow.age < CONSIDERED_UP_SECS : false
-      const lastPing = statusRow && age.humanize()
+      const lastPing = statusRow && formatDuration(age)
 
       return settingsLoader.loadLatest()
         .catch(() => null)

lib/customers.js

@@ -6,7 +6,6 @@ const makeDir = require('make-dir')
 const path = require('path')
 const fs = require('fs')
 const util = require('util')
-const moment = require('moment')
 
 const db = require('./db')
 const BN = require('./bn')
@@ -24,6 +23,7 @@ const operatorDataDir = _.get('operatorDataDir', options)
 const sms = require('./sms')
 const settingsLoader = require('./new-settings-loader')
 const logger = require('./logger')
+const { sub, differenceInHours } = require('date-fns')
 
 const TX_PASSTHROUGH_ERROR_CODES = ['operatorCancel']
 
@@ -215,14 +215,14 @@ function getDailyVolumeMinusCurrentTxQueries (id, txId) {
 }
 
 function getHoursTillLimitClear (cashInDate, cashOutDate) {
-  let startDate = moment()
+  let startDate = new Date()
-  startDate = startDate.subtract(1, 'days')
+  startDate = sub(startDate, { days: 1 })
 
-  const cashInMoment = moment(cashInDate || startDate)
+  const cashInMoment = new Date(cashInDate || startDate)
-  const cashOutMoment = moment(cashOutDate || startDate)
+  const cashOutMoment = new Date(cashOutDate || startDate)
 
-  const cashInDuration = moment.duration(cashInMoment.diff(startDate)).asHours()
+  const cashInDuration = differenceInHours(startDate, cashInMoment)
-  const cashOutDuration = moment.duration(cashOutMoment.diff(startDate)).asHours()
+  const cashOutDuration = differenceInHours(startDate, cashOutMoment)
 
   return _.ceil(_.max([cashInDuration, cashOutDuration, 0]))
 }

lib/logs.js

@@ -113,15 +113,17 @@ function simpleGetMachineLogs (deviceId, from = new Date(0).toISOString(), until
 }
 
 function logDateFormat (timezone, logs, fields) {
-
   return _.map(log => {
     const values = _.map(
       field =>
-        format(utcToZonedTime(zonedTimeToUtc(log[field], process.env.TZ), timezone), 'yyyy-MM-ddTHH:mm:ss.SSS'),
+        {
+          if (_.isNil(log[field])) return null
+          const date = utcToZonedTime(log[field], timezone)
+          return `${format(date, 'yyyy-MM-dd')}T${format(date, 'HH:mm:ss.SSS')}`
+        },
         fields
       )
     const fieldsToOverride = _.zipObject(fields, values)
-
     return {
       ...log,
       ...fieldsToOverride

new-lamassu-admin/package-lock.json

@@ -18326,11 +18326,6 @@
         "minimist": "^1.2.5"
       }
     },
-    "moment": {
-      "version": "2.24.0",
-      "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
-      "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
-    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",

new-lamassu-admin/package.json

@@ -31,7 +31,6 @@
     "lamassu-coins": "git+https://github.com/lamassu/lamassu-coins.git",
     "libphonenumber-js": "^1.7.50",
     "match-sorter": "^4.2.0",
-    "moment": "2.24.0",
     "pretty-ms": "^2.1.0",
     "qrcode.react": "0.9.3",
     "ramda": "^0.26.1",

new-lamassu-admin/src/components/LogsDownloaderPopper.js

@@ -1,8 +1,8 @@
 import { useLazyQuery } from '@apollo/react-hooks'
 import { makeStyles, ClickAwayListener } from '@material-ui/core'
 import classnames from 'classnames'
+import { format, isSameDay } from 'date-fns'
 import FileSaver from 'file-saver'
-import moment from 'moment'
 import * as R from 'ramda'
 import React, { useState, useCallback } from 'react'
 
@@ -65,12 +65,13 @@ const DateContainer = ({ date, children, ...props }) => {
       {date && (
         <>
           <div className={classes.container}>
-            <div className={classes.bigNumber}>{date.format('D')}</div>
+            <div className={classes.bigNumber}>{format(date, 'd')}</div>
             <div className={classes.monthWeekDayContainer}>
-              <span className={classes.monthYear}>{`${date.format(
+              <span className={classes.monthYear}>{`${format(
+                date,
                 'MMM'
-              )} ${date.format('YYYY')}`}</span>
+              )} ${format(date, 'yyyy')}`}</span>
-              <span className={classes.weekDay}>{date.format('dddd')}</span>
+              <span className={classes.weekDay}>{format(date, 'EEEE')}</span>
             </div>
           </div>
         </>
@@ -186,8 +187,8 @@ const LogsDownloaderPopover = ({
     }
 
     if (!range || !range.from) return
-    if (range.from && !range.until) range.until = moment()
+    if (range.from && !range.until) range.until = new Date()
-    if (moment(range.from).isSame(range.until, 'day')) range.until = moment()
+    if (isSameDay(range.from, range.until)) range.until = new Date()
 
     if (selectedRadio === RANGE) {
       fetchLogs({
@@ -203,7 +204,7 @@ const LogsDownloaderPopover = ({
 
   const createLogsFile = (logs, range) => {
     const formatDateFile = date => {
-      return formatDate(date, timezone, 'YYYY-MM-DD_HH-mm')
+      return formatDate(date, timezone, 'yyyy-MM-dd_HH-mm')
     }
 
     const blob = new window.Blob([logs], {
@@ -277,7 +278,7 @@ const LogsDownloaderPopover = ({
                   )}
                 </div>
                 <DateRangePicker
-                  maxDate={moment()}
+                  maxDate={new Date()}
                   onRangeChange={handleRangeChange}
                 />
               </div>

new-lamassu-admin/src/components/date-range-picker/Calendar.js

@@ -1,5 +1,18 @@
 import { makeStyles } from '@material-ui/core/styles'
-import moment from 'moment'
+import {
+  add,
+  differenceInMonths,
+  format,
+  getDay,
+  getDaysInMonth,
+  isAfter,
+  isSameDay,
+  isSameMonth,
+  lastDayOfMonth,
+  startOfMonth,
+  startOfWeek,
+  sub
+} from 'date-fns'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 
@@ -72,49 +85,36 @@ const styles = {
 const useStyles = makeStyles(styles)
 
 const Calendar = ({ minDate, maxDate, handleSelect, ...props }) => {
-  const [currentDisplayedMonth, setCurrentDisplayedMonth] = useState(moment())
+  const [currentDisplayedMonth, setCurrentDisplayedMonth] = useState(new Date())
 
   const classes = useStyles()
 
-  const weekdays = moment.weekdaysMin().map(day => day.slice(0, 1))
+  const weekdays = Array.from(Array(7)).map((_, i) =>
-  const monthLength = month =>
+    format(add(startOfWeek(new Date()), { days: i }), 'EEEEE')
-    Number.parseInt(
-      moment(month)
-        .endOf('month')
-        .format('D')
   )
 
+  const monthLength = month => getDaysInMonth(month)
+
   const monthdays = month => {
-    const lastMonth = moment(month).subtract(1, 'month')
+    const lastMonth = sub(month, { months: 1 })
-    const lastMonthRange = R.range(
+    const lastMonthRange = R.range(0, getDay(startOfMonth(month))).reverse()
-      0,
-      moment(month)
-        .startOf('month')
-        .weekday()
-    ).reverse()
     const lastMonthDays = R.map(i =>
-      moment(lastMonth)
+      sub(lastDayOfMonth(lastMonth), { days: i })
-        .endOf('month')
-        .subtract(i, 'days')
     )(lastMonthRange)
 
     const thisMonthRange = R.range(0, monthLength(month))
-    const thisMonthDays = R.map(i =>
+    const thisMonthDays = R.map(i => add(startOfMonth(month), { days: i }))(
-      moment(month)
+      thisMonthRange
-        .startOf('month')
+    )
-        .add(i, 'days')
-    )(thisMonthRange)
 
-    const nextMonth = moment(month).add(1, 'month')
+    const nextMonth = add(month, { months: 1 })
     const nextMonthRange = R.range(
       0,
       42 - lastMonthDays.length - thisMonthDays.length
     )
-    const nextMonthDays = R.map(i =>
+    const nextMonthDays = R.map(i => add(startOfMonth(nextMonth), { days: i }))(
-      moment(nextMonth)
+      nextMonthRange
-        .startOf('month')
+    )
-        .add(i, 'days')
-    )(nextMonthRange)
 
     return R.concat(R.concat(lastMonthDays, thisMonthDays), nextMonthDays)
   }
@@ -122,22 +122,24 @@ const Calendar = ({ minDate, maxDate, handleSelect, ...props }) => {
   const getRow = (month, row) => monthdays(month).slice(row * 7 - 7, row * 7)
 
   const handleNavPrev = currentMonth => {
-    const prevMonth = moment(currentMonth).subtract(1, 'month')
+    const prevMonth = sub(currentMonth, { months: 1 })
     if (!minDate) setCurrentDisplayedMonth(prevMonth)
     else {
       setCurrentDisplayedMonth(
-        prevMonth.isSameOrAfter(minDate, 'month')
+        isSameMonth(prevMonth, minDate) ||
+          differenceInMonths(prevMonth, minDate) > 0
           ? prevMonth
           : currentDisplayedMonth
       )
     }
   }
   const handleNavNext = currentMonth => {
-    const nextMonth = moment(currentMonth).add(1, 'month')
+    const nextMonth = add(currentMonth, { months: 1 })
     if (!maxDate) setCurrentDisplayedMonth(nextMonth)
     else {
       setCurrentDisplayedMonth(
-        nextMonth.isSameOrBefore(maxDate, 'month')
+        isSameMonth(nextMonth, maxDate) ||
+          differenceInMonths(maxDate, nextMonth) > 0
           ? nextMonth
           : currentDisplayedMonth
       )
@@ -153,9 +155,10 @@ const Calendar = ({ minDate, maxDate, handleSelect, ...props }) => {
           <Arrow />
         </button>
         <span>
-          {`${currentDisplayedMonth.format(
+          {`${format(currentDisplayedMonth, 'MMMM')} ${format(
-            'MMMM'
+            currentDisplayedMonth,
-          )} ${currentDisplayedMonth.format('YYYY')}`}
+            'yyyy'
+          )}`}
         </span>
         <button
           className={classes.button}
@@ -180,13 +183,15 @@ const Calendar = ({ minDate, maxDate, handleSelect, ...props }) => {
                   onClick={() => handleSelect(day, minDate, maxDate)}>
                   <Tile
                     isDisabled={
-                      (maxDate && day.isAfter(maxDate, 'day')) ||
+                      (maxDate && isAfter(day, maxDate)) ||
-                      (minDate && day.isBefore(minDate, 'day'))
+                      (minDate && isAfter(minDate, day))
                     }
-                    isLowerBound={day.isSame(props.from, 'day')}
+                    isLowerBound={isSameDay(day, props.from)}
-                    isUpperBound={day.isSame(props.to, 'day')}
+                    isUpperBound={isSameDay(day, props.to)}
-                    isBetween={day.isBetween(props.from, props.to, 'day', [])}>
+                    isBetween={
-                    {day.format('D')}
+                      isAfter(day, props.from) && isAfter(props.to, day)
+                    }>
+                    {format(day, 'd')}
                   </Tile>
                 </td>
               ))}

new-lamassu-admin/src/components/date-range-picker/DateRangePicker.js

@@ -1,6 +1,11 @@
 import { makeStyles } from '@material-ui/core/styles'
 import classnames from 'classnames'
-import moment from 'moment'
+import {
+  differenceInDays,
+  differenceInMonths,
+  isSameMonth,
+  set
+} from 'date-fns'
 import React, { useState, useEffect } from 'react'
 
 import Calendar from './Calendar'
@@ -26,19 +31,25 @@ const DateRangePicker = ({ minDate, maxDate, className, onRangeChange }) => {
 
   const handleSelect = (day, minDate, maxDate) => {
     if (
-      (maxDate && day.isAfter(maxDate, 'day')) ||
+      (maxDate && differenceInDays(day, maxDate) > 0) ||
-      (minDate && day.isBefore(minDate, 'day'))
+      (minDate && differenceInDays(minDate, day) > 0)
     )
       return
 
-    if (from && !to && day.isBefore(from, 'day')) {
+    if (from && !to && differenceInDays(from, day) > 0) {
       setTo(from)
       setFrom(day)
       return
     }
 
-    if (from && !to && day.isSameOrAfter(from, 'day')) {
+    if (
-      setTo(moment(day.toDate().setHours(23, 59, 59, 999)))
+      from &&
+      !to &&
+      (isSameMonth(day, from) || differenceInMonths(day, from) > 0)
+    ) {
+      setTo(
+        set(day, { hours: 23, minutes: 59, seconds: 59, milliseconds: 999 })
+      )
       return
     }
 

new-lamassu-admin/src/pages/Accounting/Accounting.js

@@ -1,7 +1,6 @@
 import { useQuery } from '@apollo/react-hooks'
 import { makeStyles } from '@material-ui/core/styles'
 import gql from 'graphql-tag'
-import moment from 'moment'
 import * as R from 'ramda'
 import React, { useContext } from 'react'
 
@@ -10,6 +9,7 @@ import { Tooltip } from 'src/components/Tooltip'
 import TitleSection from 'src/components/layout/TitleSection'
 import DataTable from 'src/components/tables/DataTable'
 import { H4, Info2, P } from 'src/components/typography'
+import { formatDate } from 'src/utils/timezones'
 
 import styles from './Accounting.styles'
 
@@ -49,6 +49,12 @@ const GET_OPERATOR_BY_USERNAME = gql`
   }
 `
 
+const GET_DATA = gql`
+  query getData {
+    config
+  }
+`
+
 const Assets = ({ balance, hedgingReserve, currency }) => {
   const classes = useStyles()
 
@@ -97,12 +103,20 @@ const Accounting = () => {
   const classes = useStyles()
   const { userData } = useContext(AppContext)
 
-  const { data, loading } = useQuery(GET_OPERATOR_BY_USERNAME, {
+  const { data: opData, loading: operatorLoading } = useQuery(
+    GET_OPERATOR_BY_USERNAME,
+    {
       context: { clientName: 'pazuz' },
       variables: { username: userData?.username }
-  })
+    }
+  )
 
-  const operatorData = R.path(['operatorByUsername'], data)
+  const { data: configResponse, loading: configLoading } = useQuery(GET_DATA)
+  const timezone = R.path(['config', 'locale_timezone'], configResponse)
+
+  const loading = operatorLoading && configLoading
+
+  const operatorData = R.path(['operatorByUsername'], opData)
 
   const elements = [
     {
@@ -144,14 +158,14 @@ const Accounting = () => {
       width: 150,
       size: 'sm',
       textAlign: 'right',
-      view: it => moment.utc(it.created).format('YYYY-MM-DD')
+      view: it => formatDate(it.created, timezone, 'YYYY-MM-DD')
     },
     {
       header: 'Time',
       width: 150,
       size: 'sm',
       textAlign: 'right',
-      view: it => moment.utc(it.created).format('HH:mm:ss')
+      view: it => formatDate(it.created, timezone, 'YYYY-MM-DD')
     }
   ]
 

new-lamassu-admin/src/pages/Analytics/components/wrappers/HourOfDayWrapper.js

@@ -1,7 +1,7 @@
 import { Box } from '@material-ui/core'
 import { makeStyles } from '@material-ui/core/styles'
+import { format, add, startOfWeek } from 'date-fns'
 import { getTimezoneOffset } from 'date-fns-tz'
-import moment from 'moment'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 
@@ -25,7 +25,9 @@ const dayOptions = R.map(
     code: R.toLower(it),
     display: it
   }),
-  moment.weekdays()
+  Array.from(Array(7)).map((_, i) =>
+    format(add(startOfWeek(new Date()), { days: i }), 'EEEE')
+  )
 )
 
 const HourOfDayBarGraphHeader = ({

new-lamassu-admin/src/pages/Analytics/graphs/HourOfDayBarGraph.js

@@ -1,7 +1,7 @@
 import BigNumber from 'bignumber.js'
 import * as d3 from 'd3'
+import { add, startOfDay } from 'date-fns'
 import { getTimezoneOffset } from 'date-fns-tz'
-import moment from 'moment'
 import * as R from 'ramda'
 import React, { memo, useCallback, useEffect, useMemo, useRef } from 'react'
 
@@ -14,6 +14,7 @@ import {
   subheaderColor
 } from 'src/styling/variables'
 import { MINUTE } from 'src/utils/time'
+import { toUtc } from 'src/utils/timezones'
 
 const Graph = ({
   data,
@@ -98,13 +99,8 @@ const Graph = ({
   const x = d3
     .scaleUtc()
     .domain([
-      moment()
+      toUtc(startOfDay(new Date())),
-        .startOf('day')
+      toUtc(add(startOfDay(new Date()), { days: 1 }))
-        .utc(),
-      moment()
-        .startOf('day')
-        .add(1, 'day')
-        .utc()
     ])
     .rangeRound([GRAPH_MARGIN.left, GRAPH_WIDTH - GRAPH_MARGIN.right])
 

new-lamassu-admin/src/pages/Analytics/graphs/OverTimeDotGraph.js

@@ -1,7 +1,7 @@
 import BigNumber from 'bignumber.js'
 import * as d3 from 'd3'
+import { add, format, startOfWeek, startOfYear } from 'date-fns'
 import { getTimezoneOffset } from 'date-fns-tz'
-import moment from 'moment'
 import * as R from 'ramda'
 import React, { memo, useCallback, useEffect, useMemo, useRef } from 'react'
 
@@ -87,8 +87,13 @@ const Graph = ({
     const previousDateWeekday = previousDate.getUTCDay()
     const previousDateMonth = previousDate.getUTCMonth()
 
-    const daysOfWeek = moment.weekdaysShort()
+    const daysOfWeek = Array.from(Array(7)).map((_, i) =>
-    const months = moment.monthsShort()
+      format(add(startOfWeek(new Date()), { days: i }), 'EEE')
+    )
+
+    const months = Array.from(Array(12)).map((_, i) =>
+      format(add(startOfYear(new Date()), { months: i }), 'LLL')
+    )
 
     return {
       previous:

new-lamassu-admin/src/pages/Customers/CustomerData.js

@@ -1,7 +1,7 @@
 import Grid from '@material-ui/core/Grid'
 import { makeStyles } from '@material-ui/core/styles'
+import { differenceInYears, format } from 'date-fns'
 import _ from 'lodash/fp'
-import moment from 'moment'
 import * as R from 'ramda'
 import { useState, React } from 'react'
 import * as Yup from 'yup'
@@ -23,7 +23,6 @@ import { ReactComponent as CustomerListViewIcon } from 'src/styling/icons/circle
 import { ReactComponent as OverviewReversedIcon } from 'src/styling/icons/circle buttons/overview/white.svg'
 import { ReactComponent as OverviewIcon } from 'src/styling/icons/circle buttons/overview/zodiac.svg'
 import { URI } from 'src/utils/apollo'
-import { ifNotNull } from 'src/utils/nullCheck'
 
 import styles from './CustomerData.styles.js'
 import { EditableCard } from './components'
@@ -66,6 +65,7 @@ const CustomerData = ({ customer, updateCustomer }) => {
   const rawExpirationDate = R.path(['expirationDate'])(idData)
   const country = R.path(['country'])(idData)
   const rawDob = R.path(['dateOfBirth'])(idData)
+  console.log(rawDob)
 
   const sanctions = R.path(['sanctions'])(customer)
   const sanctionsAt = R.path(['sanctionsAt'])(customer)
@@ -116,16 +116,13 @@ const CustomerData = ({ customer, updateCustomer }) => {
     {
       name: 'birthDate',
       label: 'Birth Date',
-      value: ifNotNull(rawDob, moment.utc(rawDob).format('YYYY-MM-DD')),
+      value: (rawDob && format(rawDob, 'yyyy-MM-dd')) ?? '',
       component: TextInput
     },
     {
       name: 'age',
       label: 'Age',
-      value: ifNotNull(
+      value: (rawDob && differenceInYears(new Date(), rawDob)) ?? '',
-        rawDob,
-        moment.utc().diff(moment.utc(rawDob).format('YYYY-MM-DD'), 'years')
-      ),
       component: TextInput
     },
     {
@@ -143,10 +140,8 @@ const CustomerData = ({ customer, updateCustomer }) => {
     {
       name: 'expirationDate',
       label: 'Expiration Date',
-      value: ifNotNull(
+      value:
-        rawExpirationDate,
+        (rawExpirationDate && format(rawExpirationDate, 'yyyy-MM-dd')) ?? '',
-        moment.utc(rawExpirationDate).format('YYYY-MM-DD')
-      ),
       component: TextInput
     }
   ]

new-lamassu-admin/src/pages/Customers/CustomersList.js

@@ -1,5 +1,5 @@
 import { makeStyles } from '@material-ui/core/styles'
-import moment from 'moment'
+import { format } from 'date-fns'
 import * as R from 'ramda'
 import React from 'react'
 
@@ -7,7 +7,6 @@ import { MainStatus } from 'src/components/Status'
 import DataTable from 'src/components/tables/DataTable'
 import { ReactComponent as TxInIcon } from 'src/styling/icons/direction/cash-in.svg'
 import { ReactComponent as TxOutIcon } from 'src/styling/icons/direction/cash-out.svg'
-import { ifNotNull } from 'src/utils/nullCheck'
 
 import styles from './CustomersList.styles'
 import { getAuthorizedStatus, getFormattedPhone, getName } from './helper'
@@ -45,7 +44,7 @@ const CustomersList = ({ data, locale, onClick, loading }) => {
       header: 'Last active',
       width: 137,
       view: it =>
-        ifNotNull(it.lastActive, moment.utc(it.lastActive).format('YYYY-MM-D'))
+        (it.lastActive && format(new Date(it.lastActive), 'yyyy-MM-d')) ?? ''
     },
     {
       header: 'Last transaction',

new-lamassu-admin/src/pages/Customers/components/IdDataCard.js

@@ -1,5 +1,5 @@
 import { Box } from '@material-ui/core'
-import moment from 'moment'
+import { differenceInYears, format } from 'date-fns'
 import * as R from 'ramda'
 import React, { memo } from 'react'
 
@@ -9,6 +9,7 @@ import {
   OVERRIDE_REJECTED
 } from 'src/pages/Customers/components/propertyCard'
 import { ifNotNull } from 'src/utils/nullCheck'
+import { toUtc } from 'src/utils/timezones'
 
 import { getName } from '../helper'
 
@@ -33,14 +34,14 @@ const IdDataCard = memo(({ customerData, updateCustomer }) => {
     },
     {
       header: 'Birth Date',
-      display: ifNotNull(rawDob, moment.utc(rawDob).format('YYYY-MM-DD')),
+      display: ifNotNull(rawDob, format(rawDob, 'YYYY-MM-DD')),
       size: 110
     },
     {
       header: 'Age',
       display: ifNotNull(
         rawDob,
-        moment.utc().diff(moment.utc(rawDob).format('YYYY-MM-DD'), 'years')
+        differenceInYears(toUtc(new Date()), toUtc(rawDob))
       ),
       size: 50
     },
@@ -58,7 +59,7 @@ const IdDataCard = memo(({ customerData, updateCustomer }) => {
       header: 'Expiration Date',
       display: ifNotNull(
         rawExpirationDate,
-        moment.utc(rawExpirationDate).format('YYYY-MM-DD')
+        format(rawExpirationDate, 'YYYY-MM-DD')
       )
     }
   ]

new-lamassu-admin/src/pages/Customers/components/TransactionsList.js

@@ -52,7 +52,7 @@ const TransactionsList = ({ customer, data, loading, locale }) => {
         !R.isNil(timezone) &&
         ifNotNull(
           customer.lastActive,
-          formatDate(customer.lastActive, timezone, 'YYYY-MM-D')
+          formatDate(customer.lastActive, timezone, 'yyyy-MM-d')
         )
     },
     {
@@ -122,7 +122,7 @@ const TransactionsList = ({ customer, data, loading, locale }) => {
     {
       header: 'Date',
       width: 100,
-      view: it => formatDate(it.created, timezone, 'YYYY-MM-D')
+      view: it => formatDate(it.created, timezone, 'yyyy-MM-d')
     },
     {
       header: 'Time (h:m:s)',

new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Graphs/RefScatterplot.js

@@ -1,9 +1,9 @@
 import * as d3 from 'd3'
-import { getTimezoneOffset } from 'date-fns-tz'
+import { add } from 'date-fns'
-import moment from 'moment'
 import React, { useEffect, useRef, useCallback } from 'react'
 
 import { backgroundColor, java, neon } from 'src/styling/variables'
+import { formatDate, toUtc } from 'src/utils/timezones'
 
 const RefScatterplot = ({ data: realData, timeFrame, timezone }) => {
   const svgRef = useRef()
@@ -12,7 +12,6 @@ const RefScatterplot = ({ data: realData, timeFrame, timezone }) => {
     const margin = { top: 25, right: 0, bottom: 25, left: 15 }
     const width = 555 - margin.left - margin.right
     const height = 150 - margin.top - margin.bottom
-    const offset = getTimezoneOffset(timezone)
     // finds maximum value for the Y axis. Minimum value is 100. If value is multiple of 1000, add 100
     // (this is because the Y axis looks best with multiples of 100)
     const findMaxY = () => {
@@ -31,10 +30,7 @@ const RefScatterplot = ({ data: realData, timeFrame, timezone }) => {
         case 'Month':
           return d3.timeFormat('%b %d')(v)
         default:
-          return moment
+          return formatDate(v, timezone, 'HH:mm')
-            .utc(v)
-            .add(offset, 'minutes')
-            .format('HH:mm')
       }
     }
 
@@ -96,16 +92,14 @@ const RefScatterplot = ({ data: realData, timeFrame, timezone }) => {
     const x = d3
       .scaleTime()
       .domain([
-        moment()
+        add(new Date(), { days: -xAxisSettings.subtractDays }).valueOf(),
-          .add(-xAxisSettings.subtractDays, 'day')
+        new Date().valueOf()
-          .valueOf(),
-        moment().valueOf()
       ])
       .range(xAxisSettings.timeRange)
       .nice(xAxisSettings.nice)
 
     const timeValue = s => {
-      const date = moment.utc(s)
+      const date = toUtc(s)
       return x(date.valueOf())
     }
 

new-lamassu-admin/src/pages/Dashboard/SystemPerformance/SystemPerformance.js

@@ -3,8 +3,8 @@ import Grid from '@material-ui/core/Grid'
 import { makeStyles } from '@material-ui/core/styles'
 import BigNumber from 'bignumber.js'
 import classnames from 'classnames'
+import { isAfter, sub } from 'date-fns'
 import gql from 'graphql-tag'
-import moment from 'moment'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 
@@ -13,6 +13,7 @@ import { ReactComponent as PercentDownIcon } from 'src/styling/icons/dashboard/d
 import { ReactComponent as PercentNeutralIcon } from 'src/styling/icons/dashboard/equal.svg'
 import { ReactComponent as PercentUpIcon } from 'src/styling/icons/dashboard/up.svg'
 import { fromNamespace } from 'src/utils/config'
+import { toTimezone } from 'src/utils/timezones'
 
 import PercentageChart from './Graphs/PercentageChart'
 import LineChart from './Graphs/RefLineChart'
@@ -28,22 +29,22 @@ const useStyles = makeStyles(styles)
 const mapToFee = R.map(R.prop('cashInFee'))
 
 const getDateSecondsAgo = (seconds = 0, startDate = null) => {
-  const date = startDate ? moment(startDate) : moment()
+  const date = startDate ? new Date(startDate) : new Date()
-  return date.subtract(seconds, 'second')
+  return sub(date, { seconds: seconds })
 }
 
 const ranges = {
   Day: {
-    left: getDateSecondsAgo(2 * 24 * 3600, moment()),
+    left: getDateSecondsAgo(2 * 24 * 3600, new Date()),
-    right: getDateSecondsAgo(24 * 3600, moment())
+    right: getDateSecondsAgo(24 * 3600, new Date())
   },
   Week: {
-    left: getDateSecondsAgo(14 * 24 * 3600, moment()),
+    left: getDateSecondsAgo(14 * 24 * 3600, new Date()),
-    right: getDateSecondsAgo(7 * 24 * 3600, moment())
+    right: getDateSecondsAgo(7 * 24 * 3600, new Date())
   },
   Month: {
-    left: getDateSecondsAgo(60 * 24 * 3600, moment()),
+    left: getDateSecondsAgo(60 * 24 * 3600, new Date()),
-    right: getDateSecondsAgo(30 * 24 * 3600, moment())
+    right: getDateSecondsAgo(30 * 24 * 3600, new Date())
   }
 }
 
@@ -83,18 +84,14 @@ const SystemPerformance = () => {
     if (!getLastTimePeriod) {
       return (
         t.error === null &&
-        moment
+        isAfter(toTimezone(t.created, timezone), ranges[selectedRange].right) &&
-          .utc(t.created)
+        isAfter(new Date(), toTimezone(t.created, timezone))
-          .utcOffset(timezone)
-          .isBetween(ranges[selectedRange].right, moment())
       )
     }
     return (
       t.error === null &&
-      moment
+      isAfter(toTimezone(t.created, timezone), ranges[selectedRange].left) &&
-        .utc(t.created)
+      isAfter(ranges[selectedRange].right, toTimezone(t.created, timezone))
-        .utcOffset(timezone)
-        .isBetween(ranges[selectedRange].left, ranges[selectedRange].right)
     )
   }
 

new-lamassu-admin/src/pages/Funding.js

@@ -2,9 +2,9 @@ import { useQuery } from '@apollo/react-hooks'
 import { makeStyles } from '@material-ui/core/styles'
 import BigNumber from 'bignumber.js'
 import classnames from 'classnames'
+import { format } from 'date-fns'
 import gql from 'graphql-tag'
 import { utils as coinUtils } from 'lamassu-coins'
-import moment from 'moment'
 import QRCode from 'qrcode.react'
 import * as R from 'ramda'
 import React, { useState } from 'react'
@@ -275,12 +275,8 @@ const Funding = () => {
                     <Td width={sizes.big}>
                       {it.fiatValue} {selected.fiatCode}
                     </Td>
-                    <Td width={sizes.date}>
+                    <Td width={sizes.date}>{format(it.date, 'YYYY-MM-DD')}</Td>
-                      {moment(it.date).format('YYYY-MM-DD')}
+                    <Td width={sizes.time}>{format(it.date, 'hh:mm:ss')}</Td>
-                    </Td>
-                    <Td width={sizes.time}>
-                      {moment(it.date).format('hh:mm:ss')}
-                    </Td>
                     <Td width={sizes.big}>add</Td>
                   </Tr>
                 ))}

new-lamassu-admin/src/pages/Machines/MachineComponents/Details.js

@@ -15,7 +15,7 @@ const Details = ({ data, timezone }) => {
         <Label3 className={classes.label3}>Paired at</Label3>
         <P>
           {data.pairedAt
-            ? formatDate(data.pairedAt, timezone, 'YYYY-MM-DD HH:mm:ss')
+            ? formatDate(data.pairedAt, timezone, 'yyyy-MM-dd HH:mm:ss')
             : ''}
         </P>
       </div>

new-lamassu-admin/src/pages/Machines/MachineComponents/Overview.js

@@ -1,6 +1,6 @@
 import { makeStyles } from '@material-ui/core/styles'
 import BigNumber from 'bignumber.js'
-import moment from 'moment'
+import { differenceInSeconds } from 'date-fns'
 import React from 'react'
 
 import { Status } from 'src/components/Status'
@@ -13,8 +13,7 @@ const useStyles = makeStyles(styles)
 
 const makeLastPing = lastPing => {
   if (!lastPing) return null
-  const now = moment()
+  const secondsAgo = differenceInSeconds(new Date(), lastPing)
-  const secondsAgo = now.diff(lastPing, 'seconds')
   if (secondsAgo < 60) {
     return `${secondsAgo} ${secondsAgo === 1 ? 'second' : 'seconds'} ago`
   }

new-lamassu-admin/src/pages/Machines/MachineComponents/Transactions/Transactions.js

@@ -1,9 +1,8 @@
-import { useLazyQuery } from '@apollo/react-hooks'
+import { useQuery, useLazyQuery } from '@apollo/react-hooks'
 import { makeStyles } from '@material-ui/core'
 import BigNumber from 'bignumber.js'
 import gql from 'graphql-tag'
 import { utils as coinUtils } from 'lamassu-coins'
-import moment from 'moment'
 import * as R from 'ramda'
 import React, { useEffect, useState } from 'react'
 
@@ -12,6 +11,7 @@ import { mainStyles } from 'src/pages/Transactions/Transactions.styles'
 import { getStatus } from 'src/pages/Transactions/helper'
 import { ReactComponent as TxInIcon } from 'src/styling/icons/direction/cash-in.svg'
 import { ReactComponent as TxOutIcon } from 'src/styling/icons/direction/cash-out.svg'
+import { formatDate } from 'src/utils/timezones'
 
 import DataTable from './DataTable'
 const useStyles = makeStyles(mainStyles)
@@ -57,13 +57,19 @@ const GET_TRANSACTIONS = gql`
   }
 `
 
+const GET_DATA = gql`
+  query getData {
+    config
+  }
+`
+
 const Transactions = ({ id }) => {
   const classes = useStyles()
 
   const [extraHeight, setExtraHeight] = useState(0)
   const [clickedId, setClickedId] = useState('')
 
-  const [getTx, { data: txResponse, loading }] = useLazyQuery(
+  const [getTx, { data: txResponse, loading: txLoading }] = useLazyQuery(
     GET_TRANSACTIONS,
     {
       variables: {
@@ -73,6 +79,11 @@ const Transactions = ({ id }) => {
     }
   )
 
+  const { data: configData, loading: configLoading } = useQuery(GET_DATA)
+  const timezone = R.path(['config', 'locale_timezone'], configData)
+
+  const loading = txLoading && configLoading
+
   if (!loading && txResponse) {
     txResponse.transactions = txResponse.transactions.splice(0, 5)
   }
@@ -135,7 +146,7 @@ const Transactions = ({ id }) => {
     },
     {
       header: 'Date (UTC)',
-      view: it => moment.utc(it.created).format('YYYY-MM-DD'),
+      view: it => formatDate(it.created, timezone, 'yyyy-MM-dd'),
       textAlign: 'left',
       size: 'sm',
       width: 140

new-lamassu-admin/src/pages/Maintenance/CashboxHistory.js

@@ -1,7 +1,6 @@
 import { useQuery, useMutation } from '@apollo/react-hooks'
 import { makeStyles } from '@material-ui/core'
 import gql from 'graphql-tag'
-import moment from 'moment'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import * as Yup from 'yup'
@@ -13,6 +12,7 @@ import DataTable from 'src/components/tables/DataTable'
 import { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/enabled.svg'
 import { ReactComponent as TxInIcon } from 'src/styling/icons/direction/cash-in.svg'
 import { ReactComponent as TxOutIcon } from 'src/styling/icons/direction/cash-out.svg'
+import { formatDate } from 'src/utils/timezones'
 
 const GET_BATCHES = gql`
   query cashboxBatches {
@@ -41,6 +41,12 @@ const EDIT_BATCH = gql`
   }
 `
 
+const GET_DATA = gql`
+  query getData {
+    config
+  }
+`
+
 const styles = {
   operationType: {
     marginLeft: 8
@@ -68,13 +74,18 @@ const CashboxHistory = ({ machines, currency }) => {
   const [error, setError] = useState(false)
   const [fields, setFields] = useState([])
 
-  const { data, loading } = useQuery(GET_BATCHES)
+  const { data: batchesData, loading: batchesLoading } = useQuery(GET_BATCHES)
 
   const [editBatch] = useMutation(EDIT_BATCH, {
     refetchQueries: () => ['cashboxBatches']
   })
 
-  const batches = R.path(['cashboxBatches'])(data)
+  const { data: configData, loading: configLoading } = useQuery(GET_DATA)
+  const timezone = R.path(['config', 'locale_timezone'], configData)
+
+  const loading = batchesLoading && configLoading
+
+  const batches = R.path(['cashboxBatches'])(batchesData)
 
   const getOperationRender = R.reduce(
     (ret, i) =>
@@ -176,14 +187,14 @@ const CashboxHistory = ({ machines, currency }) => {
       header: 'Date',
       width: 135,
       textAlign: 'right',
-      view: it => moment.utc(it.created).format('YYYY-MM-DD')
+      view: it => formatDate(it.created, timezone, 'YYYY-MM-DD')
     },
     {
       name: 'time',
       header: 'Time (h:m)',
       width: 125,
       textAlign: 'right',
-      view: it => moment.utc(it.created).format('HH:mm')
+      view: it => formatDate(it.created, timezone, 'HH:mm')
     },
     {
       name: 'performedBy',

new-lamassu-admin/src/pages/Maintenance/MachineStatus.js

@@ -1,7 +1,7 @@
 import { useQuery } from '@apollo/react-hooks'
 import { makeStyles } from '@material-ui/core'
+import { formatDistanceToNow } from 'date-fns'
 import gql from 'graphql-tag'
-import moment from 'moment'
 import * as R from 'ramda'
 import React from 'react'
 import { useHistory, useLocation } from 'react-router-dom'
@@ -89,7 +89,10 @@ const MachineStatus = () => {
       width: 200,
       size: 'sm',
       textAlign: 'left',
-      view: m => (m.lastPing ? moment(m.lastPing).fromNow() : 'unknown')
+      view: m =>
+        m.lastPing
+          ? formatDistanceToNow(new Date(m.lastPing), { addSuffix: true })
+          : 'unknown'
     },
     {
       header: 'Software Version',

new-lamassu-admin/src/pages/ServerLogs.js

@@ -197,7 +197,7 @@ const Logs = () => {
                           formatDate(
                             log.timestamp,
                             timezone,
-                            'YYYY-MM-DD HH:mm'
+                            'yyyy-MM-dd HH:mm'
                           )}
                       </TableCell>
                       <TableCell>{log.logLevel}</TableCell>

new-lamassu-admin/src/pages/SessionManagement/SessionManagement.js

@@ -1,6 +1,5 @@
 import { useQuery, useMutation } from '@apollo/react-hooks'
 import gql from 'graphql-tag'
-import moment from 'moment'
 import * as R from 'ramda'
 import React from 'react'
 import parser from 'ua-parser-js'
@@ -9,6 +8,7 @@ import { IconButton } from 'src/components/buttons'
 import TitleSection from 'src/components/layout/TitleSection'
 import DataTable from 'src/components/tables/DataTable'
 import { ReactComponent as DeleteIcon } from 'src/styling/icons/action/delete/enabled.svg'
+import { formatDate } from 'src/utils/timezones'
 
 const GET_SESSIONS = gql`
   query sessions {
@@ -28,17 +28,28 @@ const DELETE_SESSION = gql`
   }
 `
 
+const GET_DATA = gql`
+  query getData {
+    config
+  }
+`
+
 const isLocalhost = ip => {
   return ip === 'localhost' || ip === '::1' || ip === '127.0.0.1'
 }
 
 const SessionManagement = () => {
-  const { data: tknResponse } = useQuery(GET_SESSIONS)
+  const { data: tknResponse, loading: sessionsLoading } = useQuery(GET_SESSIONS)
 
   const [deleteSession] = useMutation(DELETE_SESSION, {
     refetchQueries: () => ['sessions']
   })
 
+  const { data: configResponse, loading: configLoading } = useQuery(GET_DATA)
+  const timezone = R.path(['config', 'locale_timezone'], configResponse)
+
+  const loading = sessionsLoading && configLoading
+
   const elements = [
     {
       header: 'Login',
@@ -73,9 +84,11 @@ const SessionManagement = () => {
       textAlign: 'right',
       size: 'sm',
       view: s =>
-        `${moment.utc(s.expire).format('YYYY-MM-DD')} ${moment
+        `${formatDate(s.expire, timezone, 'yyyy-MM-dd')} ${formatDate(
-          .utc(s.expire)
+          s.expire,
-          .format('HH:mm:ss')}`
+          timezone,
+          'HH:mm:ss'
+        )}`
     },
     {
       header: '',
@@ -94,11 +107,16 @@ const SessionManagement = () => {
   ]
 
   return (
+    !loading && (
       <>
         <TitleSection title="Session Management" />
-      <DataTable elements={elements} data={R.path(['sessions'])(tknResponse)} />
+        <DataTable
+          elements={elements}
+          data={R.path(['sessions'])(tknResponse)}
+        />
       </>
     )
+  )
 }
 
 export default SessionManagement

new-lamassu-admin/src/pages/Transactions/DetailsCard.js

@@ -1,11 +1,11 @@
 import { useLazyQuery, useMutation } from '@apollo/react-hooks'
 import { makeStyles, Box } from '@material-ui/core'
 import BigNumber from 'bignumber.js'
+import { add, differenceInYears, format, sub } from 'date-fns'
 import FileSaver from 'file-saver'
 import gql from 'graphql-tag'
 import JSZip from 'jszip'
 import { utils as coinUtils } from 'lamassu-coins'
-import moment from 'moment'
 import * as R from 'ramda'
 import React, { memo, useState } from 'react'
 
@@ -120,20 +120,17 @@ const DetailsRow = ({ it: tx, timezone }) => {
     name: `${onlyFirstToUpper(
       tx.customerIdCardData.firstName
     )} ${onlyFirstToUpper(tx.customerIdCardData.lastName)}`,
-    age: moment().diff(moment(tx.customerIdCardData.dateOfBirth), 'years'),
+    age: differenceInYears(new Date(), tx.customerIdCardData.dateOfBirth),
     country: tx.customerIdCardData.country,
     idCardNumber: tx.customerIdCardData.documentNumber,
-    idCardExpirationDate: moment(tx.customerIdCardData.expirationDate).format(
+    idCardExpirationDate: format(
+      tx.customerIdCardData.expirationDate,
       'DD-MM-YYYY'
     )
   }
 
-  const from = moment(tx.created)
+  const from = sub(tx.created, { minutes: MINUTES_OFFSET })
-    .subtract(MINUTES_OFFSET, 'm')
+  const until = add(tx.created, { minutes: MINUTES_OFFSET })
-    .format()
-  const until = moment(tx.created)
-    .add(MINUTES_OFFSET, 'm')
-    .format()
 
   const downloadRawLogs = ({ id: txId, deviceId, txClass }, timezone) => {
     fetchSummary({

new-lamassu-admin/src/utils/timezones.js

@@ -1,12 +1,21 @@
 import { format } from 'date-fns'
 import { zonedTimeToUtc, utcToZonedTime } from 'date-fns-tz'
-// import moment from 'moment'
 // import * as R from 'ramda'
 
 // const buildLabel = tz => {
 //   return `(UTC${tz.utcOffsetStr}) ${R.map(it => it.city, tz.cities).join(', ')}`
 // }
 
+const toUtc = date => {
+  const browserTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone
+  return zonedTimeToUtc(date, browserTimezone)
+}
+
+const toTimezone = (date, timezone) => {
+  const browserTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone
+  return utcToZonedTime(zonedTimeToUtc(date, browserTimezone), timezone)
+}
+
 const formatDate = (date, timezone, pattern) => {
   const browserTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone
   const newDate = utcToZonedTime(
@@ -20,4 +29,4 @@ const formatDateNonUtc = (date, pattern) => {
   return format(date, pattern)
 }
 
-export { formatDate, formatDateNonUtc }
+export { toUtc, toTimezone, formatDate, formatDateNonUtc }

package.json

@@ -54,7 +54,6 @@
     "mem": "^1.1.0",
     "migrate": "^1.6.2",
     "minimist": "^1.2.0",
-    "moment": "^2.17.0",
     "morgan": "^1.8.2",
     "nan": "^2.14.0",
     "nano-markdown": "^1.2.0",