Merge pull request #1830 from RafaelTaranto/chore/update-react-deps

LAM-1395 Chore/update react deps

lib/new-admin/graphql/resolvers/customer.resolver.js

@@ -34,7 +34,8 @@ const resolvers = {
     },
     replacePhoto: async (root, { customerId, photoType, newPhoto }, context) => {
       const token = authentication.getToken(context)
-      const photo = await newPhoto
+      const { file } = newPhoto
+      const photo = await file
       if (!photo) return customers.getCustomerById(customerId)
       return customers.updateEditedPhoto(customerId, photo, photoType)
         .then(newPatch => customers.edit(customerId, newPatch, token))

new-lamassu-admin/package.json

@@ -4,20 +4,13 @@
   "license": "../LICENSE",
   "type": "module",
   "dependencies": {
-    "@apollo/react-hooks": "^3.1.3",
+    "@apollo/client": "^3.13.7",
     "@lamassu/coins": "v1.6.1",
     "@material-ui/core": "4.12.4",
     "@material-ui/icons": "4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.61",
     "@simplewebauthn/browser": "^3.0.0",
-    "@use-hooks/axios": "1.3.0",
+    "apollo-upload-client": "^18.0.0",
-    "apollo-cache-inmemory": "^1.6.6",
-    "apollo-client": "^2.6.10",
-    "apollo-link": "^1.2.14",
-    "apollo-link-error": "^1.1.13",
-    "apollo-link-http": "^1.5.17",
-    "apollo-upload-client": "^13.0.0",
-    "axios": "0.21.1",
     "bignumber.js": "9.0.0",
     "classnames": "2.2.6",
     "countries-and-timezones": "^2.4.0",
@@ -27,28 +20,25 @@
     "downshift": "3.3.4",
     "file-saver": "2.0.2",
     "formik": "2.2.0",
-    "graphql": "^14.5.8",
-    "graphql-tag": "^2.12.6",
     "jss-plugin-extend": "^10.0.0",
     "jszip": "^3.6.0",
     "libphonenumber-js": "^1.11.15",
     "match-sorter": "^4.2.0",
     "pretty-ms": "^2.1.0",
-    "qrcode.react": "0.9.3",
+    "qrcode.react": "4.2.0",
     "ramda": "^0.26.1",
-    "react": "^16.12.0",
+    "react": "17.0.2",
     "react-copy-to-clipboard": "^5.0.2",
-    "react-dom": "^16.10.2",
+    "react-dom": "17.0.2",
     "react-dropzone": "^11.4.2",
     "react-material-ui-carousel": "^2.3.11",
     "react-number-format": "^4.4.1",
-    "react-otp-input": "^2.3.0",
+    "react-otp-input": "3.1.1",
     "react-router-dom": "5.1.2",
-    "react-use": "15.3.2",
     "react-virtualized": "^9.21.2",
-    "ua-parser-js": "^1.0.2",
+    "ua-parser-js": "1.0.40",
-    "uuid": "^8.3.2",
+    "uuid": "11.1.0",
-    "yup": "1.4.0"
+    "yup": "1.6.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.16.0",

new-lamassu-admin/src/App.jsx

@@ -1,4 +1,4 @@
-import { useQuery } from '@apollo/react-hooks'
+import { useQuery, gql } from "@apollo/client";
 import CssBaseline from '@material-ui/core/CssBaseline'
 import Grid from '@material-ui/core/Grid'
 import Slide from '@material-ui/core/Slide'
@@ -8,7 +8,6 @@ import {
   MuiThemeProvider,
   makeStyles
 } from '@material-ui/core/styles'
-import gql from 'graphql-tag'
 import { create } from 'jss'
 import extendJss from 'jss-plugin-extend'
 import React, { useContext, useState } from 'react'

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

@@ -1,4 +1,4 @@
-import { useLazyQuery } from '@apollo/react-hooks'
+import { useLazyQuery } from "@apollo/client";
 import { makeStyles, ClickAwayListener } from '@material-ui/core'
 import classnames from 'classnames'
 import { format, set } from 'date-fns/fp'

new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.jsx

@@ -1,6 +1,5 @@
-import { useQuery, useMutation } from '@apollo/react-hooks'
+import { useQuery, useMutation, gql } from "@apollo/client";
 import { makeStyles } from '@material-ui/core/styles'
-import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React, { useState, useEffect } from 'react'
 import ActionButton from 'src/components/buttons/ActionButton'

new-lamassu-admin/src/components/editableTable/Table.jsx

@@ -6,7 +6,7 @@ import PromptWhenDirty from 'src/components/PromptWhenDirty'
 import Link from 'src/components/buttons/Link'
 import { TBody, Table } from 'src/components/fake-table/Table'
 import { Info2, TL1 } from 'src/components/typography'
-import { v4 } from 'uuid'
+import { v4 as uuidv4 } from 'uuid'
 
 import { AddButton } from 'src/components/buttons/index'
 
@@ -191,7 +191,7 @@ const ETable = ({
                     <Formik
                       validateOnBlur={false}
                       validateOnChange={false}
-                      initialValues={{ id: v4(), ...initialValues }}
+                      initialValues={{ id: uuidv4(), ...initialValues }}
                       onReset={onReset}
                       validationSchema={validationSchema}
                       onSubmit={innerSave}>

new-lamassu-admin/src/components/inputs/base/CodeInput.jsx

@@ -17,8 +17,7 @@ const CodeInput = ({
   numInputs,
   error,
   inputStyle,
-  containerStyle,
+  containerStyle
-  ...props
 }) => {
   const classes = useStyles()
   const typographyClasses = useTypographyStyles()
@@ -29,18 +28,21 @@ const CodeInput = ({
       value={value}
       onChange={onChange}
       numInputs={numInputs}
-      separator={<span> </span>}
+      renderSeparator={<span> </span>}
+      shouldAutoFocus
       containerStyle={classnames(containerStyle, classes.container)}
       inputStyle={classnames(
         inputStyle,
         classes.input,
-        typographyClasses.confirmationCode
+        typographyClasses.confirmationCode,
+        error && classes.error
+      )}
+      inputType={'tel'}
+      renderInput={(props) => (
+        <input
+          {...props}
+        />
       )}
-      focusStyle={classes.focus}
-      errorStyle={classes.error}
-      hasErrored={error}
-      isInputNum={true}
-      {...props}
     />
   )
 }

new-lamassu-admin/src/components/inputs/base/CodeInput.styles.js

@@ -6,15 +6,15 @@ const styles = {
     height: '5rem',
     border: '2px solid',
     borderColor: zircon,
-    borderRadius: '4px'
-  },
-  focus: {
-    border: '2px solid',
-    borderColor: primaryColor,
     borderRadius: '4px',
     '&:focus': {
-      outline: 'none'
+      border: '2px solid',
-    }
+      borderColor: primaryColor,
+      borderRadius: '4px',
+      '&:focus': {
+        outline: 'none'
+      }
+    },
   },
   error: {
     borderColor: errorColor

new-lamassu-admin/src/components/layout/Header.jsx

@@ -1,9 +1,8 @@
-import { useQuery } from '@apollo/react-hooks'
+import { useQuery, gql } from "@apollo/client";
 import ClickAwayListener from '@material-ui/core/ClickAwayListener'
 import Popper from '@material-ui/core/Popper'
 import { makeStyles } from '@material-ui/core/styles'
 import classnames from 'classnames'
-import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React, { memo, useState, useEffect, useRef } from 'react'
 import { NavLink, useHistory } from 'react-router-dom'

new-lamassu-admin/src/components/machineActions/DiagnosticsModal.jsx

@@ -1,8 +1,7 @@
-import { useLazyQuery, useQuery } from '@apollo/react-hooks'
+import { useLazyQuery, useQuery, gql } from "@apollo/client";
 import { makeStyles } from '@material-ui/core/styles'
 import { subMinutes } from 'date-fns'
 import FileSaver from 'file-saver'
-import gql from 'graphql-tag'
 import React, { useState, useEffect } from 'react'
 import Modal from 'src/components/Modal'
 import { H3, P } from 'src/components/typography'

new-lamassu-admin/src/components/machineActions/MachineActions.jsx

@@ -1,6 +1,5 @@
-import { useMutation, useLazyQuery } from '@apollo/react-hooks'
+import { useMutation, useLazyQuery, gql } from "@apollo/client";
 import { makeStyles } from '@material-ui/core/styles'
-import gql from 'graphql-tag'
 import React, { memo, useState } from 'react'
 import { ConfirmDialog } from 'src/components/ConfirmDialog'
 import ActionButton from 'src/components/buttons/ActionButton'

new-lamassu-admin/src/pages/AddMachine/AddMachine.jsx

@@ -1,10 +1,9 @@
-import { useMutation, useQuery } from '@apollo/react-hooks'
+import { useMutation, useQuery, gql } from "@apollo/client";
 import { Dialog, DialogContent, SvgIcon, IconButton } from '@material-ui/core'
 import { makeStyles } from '@material-ui/core/styles'
 import classnames from 'classnames'
 import { Form, Formik, FastField } from 'formik'
-import gql from 'graphql-tag'
+import {QRCodeSVG as QRCode} from 'qrcode.react'
-import QRCode from 'qrcode.react'
 import * as R from 'ramda'
 import React, { memo, useState, useEffect, useRef } from 'react'
 import Title from 'src/components/Title'
@@ -75,7 +74,7 @@ const QrCodeComponent = ({ classes, qrCode, name, count, onPaired }) => {
           <QRCode
             size={280}
             fgColor={primaryColor}
-            includeMargin
+            marginSize={4}
             value={qrCode}
             className={classes.qrCodeBorder}
           />

new-lamassu-admin/src/pages/Analytics/Analytics.jsx

@@ -1,10 +1,9 @@
-import { useQuery } from '@apollo/react-hooks'
+import { useQuery, gql } from "@apollo/client";
 import { Box } from '@material-ui/core'
 import { makeStyles } from '@material-ui/core/styles'
 import classnames from 'classnames'
 import { endOfToday } from 'date-fns'
 import { subDays, format, add, startOfWeek } from 'date-fns/fp'
-import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import TitleSection from 'src/components/layout/TitleSection'

new-lamassu-admin/src/pages/AuthRegister.jsx

@@ -1,29 +0,0 @@
-import useAxios from '@use-hooks/axios'
-import React from 'react'
-import { useLocation, useHistory } from 'react-router-dom'
-
-const useQuery = () => new URLSearchParams(useLocation().search)
-
-const AuthRegister = () => {
-  const history = useHistory()
-  const query = useQuery()
-
-  useAxios({
-    url: `/api/register?otp=${query.get('otp')}`,
-    method: 'GET',
-    options: {
-      withCredentials: true
-    },
-    trigger: [],
-    customHandler: (err, res) => {
-      if (err) return
-      if (res) {
-        history.push('/wizard', { fromAuthRegister: true })
-      }
-    }
-  })
-
-  return <span>registering...</span>
-}
-
-export default AuthRegister

new-lamassu-admin/src/pages/Authentication/Input2FAState.jsx

@@ -1,7 +1,6 @@
-import { useMutation, useLazyQuery } from '@apollo/react-hooks'
+import { useMutation, useLazyQuery, gql } from "@apollo/client";
 import { makeStyles } from '@material-ui/core/styles'
 import { Form, Formik } from 'formik'
-import gql from 'graphql-tag'
 import React, { useContext, useState } from 'react'
 import { useHistory } from 'react-router-dom'
 import { TL1, P } from 'src/components/typography'
@@ -117,7 +116,6 @@ const Input2FAState = ({ state, dispatch }) => {
             onChange={handle2FAChange}
             numInputs={6}
             error={invalidToken}
-            shouldAutoFocus
           />
           <button onClick={handleSubmit} className={classes.enterButton} />
         </Form>

new-lamassu-admin/src/pages/Authentication/InputFIDOState.jsx

@@ -1,8 +1,7 @@
-import { useMutation, useLazyQuery } from '@apollo/react-hooks'
+import { useMutation, useLazyQuery, gql } from "@apollo/client";
 import { makeStyles } from '@material-ui/core'
 import { startAssertion } from '@simplewebauthn/browser'
 import { Field, Form, Formik } from 'formik'
-import gql from 'graphql-tag'
 import React, { useState, useContext } from 'react'
 import { useHistory } from 'react-router-dom'
 import { H2, Label2, P } from 'src/components/typography'

new-lamassu-admin/src/pages/Authentication/LoginState.jsx

@@ -1,8 +1,7 @@
-import { useMutation, useLazyQuery } from '@apollo/react-hooks'
+import { useMutation, useLazyQuery, gql } from "@apollo/client";
 import { makeStyles } from '@material-ui/core/styles'
 import { startAssertion } from '@simplewebauthn/browser'
 import { Field, Form, Formik } from 'formik'
-import gql from 'graphql-tag'
 import React, { useContext } from 'react'
 import { useHistory } from 'react-router-dom'
 import { Label3, P } from 'src/components/typography'

new-lamassu-admin/src/pages/Authentication/Register.jsx

@@ -1,8 +1,7 @@
-import { useQuery, useMutation } from '@apollo/react-hooks'
+import { useQuery, useMutation, gql } from "@apollo/client";
 import { makeStyles, Grid } from '@material-ui/core'
 import Paper from '@material-ui/core/Paper'
 import { Field, Form, Formik } from 'formik'
-import gql from 'graphql-tag'
 import React, { useReducer } from 'react'
 import { useLocation, useHistory } from 'react-router-dom'
 import { H2, Label3, P } from 'src/components/typography'

new-lamassu-admin/src/pages/Authentication/Reset2FA.jsx

@@ -1,9 +1,8 @@
-import { useQuery, useMutation } from '@apollo/react-hooks'
+import { useQuery, useMutation, gql } from "@apollo/client";
 import { makeStyles, Grid } from '@material-ui/core'
 import Paper from '@material-ui/core/Paper'
 import { Form, Formik } from 'formik'
-import gql from 'graphql-tag'
+import { QRCodeSVG as QRCode } from 'qrcode.react'
-import QRCode from 'qrcode.react'
 import React, { useReducer, useState } from 'react'
 import { useLocation, useHistory } from 'react-router-dom'
 import { H2, Label2, Label3, P } from 'src/components/typography'
@@ -176,7 +175,6 @@ const Reset2FA = () => {
                           onChange={handle2FAChange}
                           numInputs={6}
                           error={invalidToken}
-                          shouldAutoFocus
                         />
                         <button
                           onClick={handleSubmit}

new-lamassu-admin/src/pages/Authentication/ResetPassword.jsx

@@ -1,8 +1,7 @@
-import { useQuery, useMutation } from '@apollo/react-hooks'
+import { useQuery, useMutation, gql } from "@apollo/client";
 import { makeStyles, Grid } from '@material-ui/core'
 import Paper from '@material-ui/core/Paper'
 import { Field, Form, Formik } from 'formik'
-import gql from 'graphql-tag'
 import React, { useState } from 'react'
 import { useLocation, useHistory } from 'react-router-dom'
 import { H2, Label3, P } from 'src/components/typography'

new-lamassu-admin/src/pages/Authentication/Setup2FAState.jsx

@@ -1,8 +1,7 @@
-import { useMutation, useQuery, useLazyQuery } from '@apollo/react-hooks'
+import { useMutation, useQuery, useLazyQuery, gql } from "@apollo/client";
 import { makeStyles } from '@material-ui/core/styles'
 import { Form, Formik } from 'formik'
-import gql from 'graphql-tag'
+import { QRCodeSVG as QRCode } from 'qrcode.react'
-import QRCode from 'qrcode.react'
 import React, { useContext, useState } from 'react'
 import { useHistory } from 'react-router-dom'
 import { Label3, P } from 'src/components/typography'

new-lamassu-admin/src/pages/Blacklist/Blacklist.jsx

@@ -1,7 +1,6 @@
-import { useQuery, useMutation } from '@apollo/react-hooks'
+import { useQuery, useMutation, gql } from "@apollo/client";
 import { Box, Dialog, DialogContent, DialogActions } from '@material-ui/core'
 import { makeStyles } from '@material-ui/core/styles'
-import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import { HelpTooltip } from 'src/components/Tooltip'

new-lamassu-admin/src/pages/Cashout/Cashout.jsx

@@ -1,6 +1,5 @@
-import { useQuery, useMutation } from '@apollo/react-hooks'
+import { useQuery, useMutation, gql } from "@apollo/client";
 import { makeStyles } from '@material-ui/core/styles'
-import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import { HelpTooltip } from 'src/components/Tooltip'

new-lamassu-admin/src/pages/Commissions/Commissions.jsx

@@ -1,6 +1,5 @@
-import { useQuery, useMutation } from '@apollo/react-hooks'
+import { useQuery, useMutation, gql } from "@apollo/client";
 import { makeStyles } from '@material-ui/core'
-import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import { HelpTooltip } from 'src/components/Tooltip'

new-lamassu-admin/src/pages/Commissions/helper.jsx

@@ -2,7 +2,7 @@ import * as R from 'ramda'
 import React from 'react'
 import TxInIcon from 'src/styling/icons/direction/cash-in.svg?react'
 import TxOutIcon from 'src/styling/icons/direction/cash-out.svg?react'
-import { v4 } from 'uuid'
+import { v4 as uuidv4 } from 'uuid'
 import * as Yup from 'yup'
 
 import { Autocomplete, NumberInput } from 'src/components/inputs/formik'
@@ -426,7 +426,7 @@ const createCommissions = (cryptoCode, deviceId, isDefault, config) => {
     machine: deviceId,
     cryptoCurrencies: [cryptoCode],
     default: isDefault,
-    id: v4()
+    id: uuidv4()
   }
 }
 

new-lamassu-admin/src/pages/Customers/CustomerProfile.jsx

@@ -1,4 +1,4 @@
-import { useQuery, useMutation, useLazyQuery } from '@apollo/react-hooks'
+import { useQuery, useMutation, useLazyQuery, gql } from "@apollo/client";
 import {
   makeStyles,
   Breadcrumbs,
@@ -8,7 +8,6 @@ import {
   Dialog
 } from '@material-ui/core'
 import NavigateNextIcon from '@material-ui/icons/NavigateNext'
-import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React, { memo, useState } from 'react'
 import { useHistory, useParams } from 'react-router-dom'

new-lamassu-admin/src/pages/Customers/Customers.jsx

@@ -1,6 +1,5 @@
-import { useQuery, useMutation } from '@apollo/react-hooks'
+import { useQuery, useMutation, gql } from "@apollo/client";
 import { Box, makeStyles } from '@material-ui/core'
-import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import { useHistory } from 'react-router-dom'

new-lamassu-admin/src/pages/Customers/components/CustomInfoRequestsData.jsx

@@ -1,7 +1,6 @@
-import { useMutation } from '@apollo/react-hooks'
+import { useMutation, gql } from "@apollo/client";
 import { makeStyles } from '@material-ui/core'
 import classnames from 'classnames'
-import gql from 'graphql-tag'
 import React, { useState } from 'react'
 import Modal from 'src/components/Modal'
 import { MainStatus } from 'src/components/Status'

new-lamassu-admin/src/pages/Customers/helper.jsx

@@ -6,7 +6,7 @@ import { Field, useFormikContext } from 'formik'
 import { parsePhoneNumberFromString } from 'libphonenumber-js'
 import * as R from 'ramda'
 import { H4 } from 'src/components/typography'
-import * as uuid from 'uuid'
+import { validate as uuidValidate } from 'uuid';
 import * as Yup from 'yup'
 
 import {
@@ -84,7 +84,7 @@ const getAuthorizedStatus = (it, triggers, customRequests) => {
 
   const pendingFieldStatus = R.map(ite => {
     if (isManualField(ite)) {
-      if (uuid.validate(ite)) {
+      if (uuidValidate(ite)) {
         const request = R.find(
           iter => iter.infoRequestId === ite,
           it.customInfoRequests
@@ -103,7 +103,7 @@ const getAuthorizedStatus = (it, triggers, customRequests) => {
 
   const rejectedFieldStatus = R.map(ite => {
     if (isManualField(ite)) {
-      if (uuid.validate(ite)) {
+      if (uuidValidate(ite)) {
         const request = R.find(
           iter => iter.infoRequestId === ite,
           it.customInfoRequests

new-lamassu-admin/src/pages/Dashboard/Alerts/Alerts.jsx

@@ -1,9 +1,8 @@
-import { useQuery } from '@apollo/react-hooks'
+import { useQuery, gql } from "@apollo/client";
 import Button from '@material-ui/core/Button'
 import Grid from '@material-ui/core/Grid'
 import { makeStyles } from '@material-ui/core/styles'
 import classnames from 'classnames'
-import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React from 'react'
 import { cardState } from 'src/components/CollapsibleCard'

new-lamassu-admin/src/pages/Dashboard/Dashboard.jsx

@@ -1,7 +1,6 @@
-import { useQuery } from '@apollo/react-hooks'
+import { useQuery, gql } from "@apollo/client";
 import Grid from '@material-ui/core/Grid'
 import { makeStyles } from '@material-ui/core/styles'
-import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import { useHistory } from 'react-router-dom'

new-lamassu-admin/src/pages/Dashboard/Footer/Footer.jsx

@@ -1,9 +1,8 @@
-import { useQuery } from '@apollo/react-hooks'
+import { useQuery, gql } from "@apollo/client";
 import { makeStyles } from '@material-ui/core'
 import Grid from '@material-ui/core/Grid'
 import BigNumber from 'bignumber.js'
 import classnames from 'classnames'
-import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React from 'react'
 import { Label2 } from 'src/components/typography'

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

@@ -1,10 +1,9 @@
-import { useQuery } from '@apollo/react-hooks'
+import { useQuery, gql } from "@apollo/client";
 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 } from 'date-fns/fp'
-import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import { Label1, Label2, P } from 'src/components/typography/index'

new-lamassu-admin/src/pages/Dashboard/SystemStatus/MachinesTable.jsx

@@ -1,4 +1,4 @@
-import { useQuery } from '@apollo/react-hooks'
+import { useQuery, gql } from "@apollo/client";
 import { makeStyles, withStyles } from '@material-ui/core'
 import Table from '@material-ui/core/Table'
 import TableBody from '@material-ui/core/TableBody'
@@ -7,7 +7,6 @@ import TableContainer from '@material-ui/core/TableContainer'
 import TableHead from '@material-ui/core/TableHead'
 import TableRow from '@material-ui/core/TableRow'
 import classnames from 'classnames'
-import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React from 'react'
 import { useHistory } from 'react-router-dom'

new-lamassu-admin/src/pages/Dashboard/SystemStatus/SystemStatus.jsx

@@ -1,9 +1,8 @@
-import { useQuery } from '@apollo/react-hooks'
+import { useQuery, gql } from "@apollo/client";
 import Button from '@material-ui/core/Button'
 import Grid from '@material-ui/core/Grid'
 import { makeStyles } from '@material-ui/core/styles'
 import classnames from 'classnames'
-import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React from 'react'
 import { cardState as cardState_ } from 'src/components/CollapsibleCard'

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

@@ -1,11 +1,10 @@
-import { useQuery } from '@apollo/react-hooks'
+import { useQuery, gql } from "@apollo/client";
 import { formatCryptoAddress } from '@lamassu/coins/lightUtils'
 import { makeStyles } from '@material-ui/core/styles'
 import BigNumber from 'bignumber.js'
 import classnames from 'classnames'
 import { format } from 'date-fns/fp'
-import gql from 'graphql-tag'
+import { QRCodeSVG as QRCode } from 'qrcode.react'
-import QRCode from 'qrcode.react'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import TableLabel from 'src/components/TableLabel'

new-lamassu-admin/src/pages/Locales/Locales.jsx

@@ -1,6 +1,5 @@
-import { useQuery, useMutation } from '@apollo/react-hooks'
+import { useQuery, useMutation, gql } from "@apollo/client";
 import { makeStyles } from '@material-ui/core/styles'
-import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import Modal from 'src/components/Modal'

new-lamassu-admin/src/pages/LoyaltyPanel/IndividualDiscounts.jsx

@@ -1,6 +1,5 @@
-import { useQuery, useMutation } from '@apollo/react-hooks'
+import { useQuery, useMutation, gql } from "@apollo/client";
 import { makeStyles, Box } from '@material-ui/core'
-import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import { DeleteDialog } from 'src/components/DeleteDialog'

new-lamassu-admin/src/pages/LoyaltyPanel/PromoCodes.jsx

@@ -1,6 +1,5 @@
-import { useQuery, useMutation } from '@apollo/react-hooks'
+import { useQuery, useMutation, gql } from "@apollo/client";
 import { makeStyles, Box } from '@material-ui/core'
-import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import { DeleteDialog } from 'src/components/DeleteDialog'

new-lamassu-admin/src/pages/MachineLogs.jsx

@@ -1,6 +1,5 @@
-import { useQuery } from '@apollo/react-hooks'
+import { useQuery, gql } from "@apollo/client";
 import { makeStyles } from '@material-ui/core/styles'
-import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import LogsDowloaderPopover from 'src/components/LogsDownloaderPopper'

new-lamassu-admin/src/pages/Machines/MachineComponents/Cassettes/Cassettes.jsx

@@ -1,6 +1,5 @@
-import { useMutation } from '@apollo/react-hooks'
+import { useMutation, gql } from "@apollo/client";
 import { makeStyles } from '@material-ui/core'
-import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import DataTable from 'src/components/tables/DataTable'

new-lamassu-admin/src/pages/Machines/MachineComponents/Commissions/Commissions.jsx

@@ -1,5 +1,4 @@
-import { useQuery, useMutation } from '@apollo/react-hooks'
+import { useQuery, useMutation, gql } from "@apollo/client";
-import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React from 'react'
 

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

@@ -1,8 +1,7 @@
-import { useQuery, useLazyQuery } from '@apollo/react-hooks'
+import { useQuery, useLazyQuery, gql } from "@apollo/client";
 import { toUnit, formatCryptoAddress } from '@lamassu/coins/lightUtils'
 import { makeStyles } from '@material-ui/core'
 import BigNumber from 'bignumber.js'
-import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React, { useEffect, useState } from 'react'
 import DetailsRow from 'src/pages/Transactions/DetailsCard'

new-lamassu-admin/src/pages/Machines/Machines.jsx

@@ -1,10 +1,9 @@
-import { useQuery } from '@apollo/react-hooks'
+import { useQuery, gql } from "@apollo/client";
 import Breadcrumbs from '@material-ui/core/Breadcrumbs'
 import Grid from '@material-ui/core/Grid'
 import { makeStyles } from '@material-ui/core/styles'
 import NavigateNextIcon from '@material-ui/icons/NavigateNext'
 import classnames from 'classnames'
-import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import { Link, useLocation, useHistory } from 'react-router-dom'

new-lamassu-admin/src/pages/Maintenance/CashUnits.jsx

@@ -1,6 +1,5 @@
-import { useQuery, useMutation } from '@apollo/react-hooks'
+import { useQuery, useMutation, gql } from "@apollo/client";
 import { DialogActions, makeStyles, Box } from '@material-ui/core'
-import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import LogsDowloaderPopover from 'src/components/LogsDownloaderPopper'

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

@@ -1,6 +1,5 @@
-import { useQuery } from '@apollo/react-hooks'
+import { useQuery, gql } from "@apollo/client";
 import { makeStyles } from '@material-ui/core'
-import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React from 'react'
 // import * as Yup from 'yup'

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

@@ -1,7 +1,6 @@
-import { useQuery } from '@apollo/react-hooks'
+import { useQuery, gql } from "@apollo/client";
 import { makeStyles } from '@material-ui/core'
 import { formatDistance } from 'date-fns'
-import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React from 'react'
 import { useHistory, useLocation } from 'react-router-dom'

new-lamassu-admin/src/pages/Notifications/Notifications.jsx

@@ -1,5 +1,4 @@
-import { useQuery, useMutation } from '@apollo/react-hooks'
+import { useQuery, useMutation, gql } from "@apollo/client";
-import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import Modal from 'src/components/Modal'

new-lamassu-admin/src/pages/OperatorInfo/CoinATMRadar.jsx

@@ -1,6 +1,5 @@
-import { useQuery, useMutation } from '@apollo/react-hooks'
+import { useQuery, useMutation, gql } from "@apollo/client";
 import { makeStyles } from '@material-ui/core/styles'
-import gql from 'graphql-tag'
 import React, { memo } from 'react'
 import { HelpTooltip } from 'src/components/Tooltip'
 import { H4, P, Label2 } from 'src/components/typography'

new-lamassu-admin/src/pages/OperatorInfo/ContactInfo.jsx

@@ -1,8 +1,7 @@
-import { useQuery, useMutation } from '@apollo/react-hooks'
+import { useQuery, useMutation, gql } from "@apollo/client";
 import { makeStyles } from '@material-ui/core'
 import classnames from 'classnames'
 import { Form, Formik, Field as FormikField } from 'formik'
-import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import ErrorMessage from 'src/components/ErrorMessage'

new-lamassu-admin/src/pages/OperatorInfo/MachineScreens.jsx

@@ -1,6 +1,5 @@
-import { useQuery, useMutation } from '@apollo/react-hooks'
+import { useQuery, useMutation, gql } from "@apollo/client";
 import { makeStyles } from '@material-ui/core/styles'
-import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React, { memo } from 'react'
 import { H4, P, Label2 } from 'src/components/typography'

new-lamassu-admin/src/pages/OperatorInfo/ReceiptPrinting.jsx

@@ -1,6 +1,5 @@
-import { useQuery, useMutation } from '@apollo/react-hooks'
+import { useQuery, useMutation, gql } from "@apollo/client";
 import { makeStyles } from '@material-ui/core/styles'
-import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React, { memo } from 'react'
 import { HelpTooltip } from 'src/components/Tooltip'

new-lamassu-admin/src/pages/OperatorInfo/SMSNotices/SMSNotices.jsx

@@ -1,6 +1,5 @@
-import { useQuery, useMutation } from '@apollo/react-hooks'
+import { useQuery, useMutation, gql } from "@apollo/client";
 import { makeStyles, Paper } from '@material-ui/core'
-import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import { HelpTooltip } from 'src/components/Tooltip'

new-lamassu-admin/src/pages/OperatorInfo/TermsConditions.jsx

@@ -1,8 +1,7 @@
-import { useQuery, useMutation } from '@apollo/react-hooks'
+import { useQuery, useMutation, gql } from "@apollo/client";
 import { makeStyles } from '@material-ui/core'
 import classnames from 'classnames'
 import { Form, Formik, Field as FormikField } from 'formik'
-import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import ErrorMessage from 'src/components/ErrorMessage'

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

@@ -1,6 +1,5 @@
-import { useQuery } from '@apollo/react-hooks'
+import { useQuery, gql } from "@apollo/client";
 import { makeStyles } from '@material-ui/core'
-import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React, { useState, useRef } from 'react'
 import LogsDowloaderPopover from 'src/components/LogsDownloaderPopper'

new-lamassu-admin/src/pages/Services/Services.jsx

@@ -1,6 +1,5 @@
-import { useQuery, useMutation } from '@apollo/react-hooks'
+import { useQuery, useMutation, gql } from "@apollo/client";
 import { makeStyles, Grid } from '@material-ui/core'
-import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import Modal from 'src/components/Modal'

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

@@ -1,5 +1,4 @@
-import { useQuery, useMutation } from '@apollo/react-hooks'
+import { useQuery, useMutation, gql } from "@apollo/client";
-import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React from 'react'
 import TitleSection from 'src/components/layout/TitleSection'

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

@@ -1,11 +1,10 @@
-import { useLazyQuery, useMutation } from '@apollo/react-hooks'
+import { useLazyQuery, useMutation, gql } from "@apollo/client";
 import { toUnit, formatCryptoAddress } from '@lamassu/coins/lightUtils'
 import { makeStyles, Box } from '@material-ui/core'
 import BigNumber from 'bignumber.js'
 import classNames from 'classnames'
 import { add, differenceInYears, format, sub, parse } from 'date-fns/fp'
 import FileSaver from 'file-saver'
-import gql from 'graphql-tag'
 import JSZip from 'jszip'
 import * as R from 'ramda'
 import React, { memo, useState } from 'react'

new-lamassu-admin/src/pages/Transactions/Transactions.jsx

@@ -1,8 +1,7 @@
-import { useQuery } from '@apollo/react-hooks'
+import { useQuery, gql } from "@apollo/client";
 import { toUnit, formatCryptoAddress } from '@lamassu/coins/lightUtils'
 import { makeStyles } from '@material-ui/core'
 import BigNumber from 'bignumber.js'
-import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React, { useEffect, useState } from 'react'
 import { useHistory } from 'react-router-dom'

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

@@ -73,6 +73,10 @@ const mainStyles = {
   titleWrapper,
   titleAndButtonsContainer,
   buttonsWrapper,
+  pendingBox: {
+    display: 'flex',
+    alignItems: 'center',
+  },
   headerLabels: {
     display: 'flex',
     flexDirection: 'row',

new-lamassu-admin/src/pages/Triggers/CustomInfoRequests/CustomInfoRequests.jsx

@@ -1,7 +1,6 @@
-import { useMutation, useQuery } from '@apollo/react-hooks'
+import { useMutation, useQuery, gql } from "@apollo/client";
 import { makeStyles } from '@material-ui/core'
 import classnames from 'classnames'
-import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import { DeleteDialog } from 'src/components/DeleteDialog'

new-lamassu-admin/src/pages/Triggers/TriggerView.jsx

@@ -1,10 +1,9 @@
-import { useMutation } from '@apollo/react-hooks'
+import { useMutation, gql } from "@apollo/client";
 import { makeStyles, Box } from '@material-ui/core'
-import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import { H2 } from 'src/components/typography'
-import { v4 } from 'uuid'
+import { v4 as uuidv4 } from 'uuid'
 
 import { Button } from 'src/components/buttons'
 import { Table as EditableTable } from 'src/components/editableTable'
@@ -52,7 +51,7 @@ const TriggerView = ({
   }
 
   const add = rawConfig => {
-    const toSave = R.concat([{ id: v4(), direction: 'both', ...rawConfig }])(
+    const toSave = R.concat([{ id: uuidv4(), direction: 'both', ...rawConfig }])(
       triggers
     )
     return saveConfig({ variables: { config: { triggers: toServer(toSave) } } })

new-lamassu-admin/src/pages/Triggers/Triggers.jsx

@@ -1,7 +1,6 @@
-import { useQuery, useMutation } from '@apollo/react-hooks'
+import { useQuery, useMutation, gql } from "@apollo/client";
 import { makeStyles, Box } from '@material-ui/core'
 import classnames from 'classnames'
-import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import Modal from 'src/components/Modal'

new-lamassu-admin/src/pages/Triggers/components/AdvancedTriggers.jsx

@@ -1,5 +1,4 @@
-import { useMutation, useQuery } from '@apollo/react-hooks'
+import { useMutation, useQuery, gql } from "@apollo/client";
-import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React, { memo, useState } from 'react'
 import Section from 'src/components/layout/Section'

new-lamassu-admin/src/pages/UserManagement/UserManagement.jsx

@@ -1,7 +1,6 @@
-import { useQuery, useMutation, useLazyQuery } from '@apollo/react-hooks'
+import { useQuery, useMutation, useLazyQuery, gql } from "@apollo/client";
 import { makeStyles, Box, Chip } from '@material-ui/core'
 import { startAttestation } from '@simplewebauthn/browser'
-import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React, { useReducer, useState, useContext } from 'react'
 import TitleSection from 'src/components/layout/TitleSection'

new-lamassu-admin/src/pages/UserManagement/modals/ChangeRoleModal.jsx

@@ -1,6 +1,5 @@
-import { useMutation } from '@apollo/react-hooks'
+import { useMutation, gql } from "@apollo/client";
 import { makeStyles } from '@material-ui/core/styles'
-import gql from 'graphql-tag'
 import React, { useState } from 'react'
 import ErrorMessage from 'src/components/ErrorMessage'
 import Modal from 'src/components/Modal'

new-lamassu-admin/src/pages/UserManagement/modals/CreateUserModal.jsx

@@ -1,8 +1,7 @@
-import { useMutation } from '@apollo/react-hooks'
+import { useMutation, gql } from "@apollo/client";
 import { makeStyles } from '@material-ui/core/styles'
 import classnames from 'classnames'
 import { Field, Form, Formik } from 'formik'
-import gql from 'graphql-tag'
 import React, { useState } from 'react'
 import ErrorMessage from 'src/components/ErrorMessage'
 import Modal from 'src/components/Modal'

new-lamassu-admin/src/pages/UserManagement/modals/EnableUserModal.jsx

@@ -1,6 +1,5 @@
-import { useMutation } from '@apollo/react-hooks'
+import { useMutation, gql } from "@apollo/client";
 import { makeStyles } from '@material-ui/core/styles'
-import gql from 'graphql-tag'
 import React, { useState } from 'react'
 import ErrorMessage from 'src/components/ErrorMessage'
 import Modal from 'src/components/Modal'

new-lamassu-admin/src/pages/UserManagement/modals/Input2FAModal.jsx

@@ -1,7 +1,6 @@
-import { useLazyQuery } from '@apollo/react-hooks'
+import { useLazyQuery, gql } from "@apollo/client";
 import { makeStyles } from '@material-ui/core/styles'
 import { Form, Formik } from 'formik'
-import gql from 'graphql-tag'
 import React, { useState } from 'react'
 import Modal from 'src/components/Modal'
 import { Info2, P } from 'src/components/typography'
@@ -80,7 +79,6 @@ const Input2FAModal = ({ showModal, handleClose, setConfirmation }) => {
               numInputs={6}
               error={invalidCode}
               containerStyle={classes.codeContainer}
-              shouldAutoFocus
             />
             <button onClick={handleSubmit} className={classes.enterButton} />
           </Form>

new-lamassu-admin/src/pages/UserManagement/modals/Reset2FAModal.jsx

@@ -1,6 +1,5 @@
-import { useMutation } from '@apollo/react-hooks'
+import { useMutation, gql } from "@apollo/client";
 import { makeStyles } from '@material-ui/core/styles'
-import gql from 'graphql-tag'
 import React, { useEffect, useState } from 'react'
 import ErrorMessage from 'src/components/ErrorMessage'
 import Modal from 'src/components/Modal'

new-lamassu-admin/src/pages/UserManagement/modals/ResetPasswordModal.jsx

@@ -1,6 +1,5 @@
-import { useMutation } from '@apollo/react-hooks'
+import { useMutation, gql } from "@apollo/client";
 import { makeStyles } from '@material-ui/core/styles'
-import gql from 'graphql-tag'
 import React, { useEffect, useState } from 'react'
 import ErrorMessage from 'src/components/ErrorMessage'
 import Modal from 'src/components/Modal'

new-lamassu-admin/src/pages/Wallet/AdvancedWallet.jsx

@@ -1,5 +1,4 @@
-import { useQuery, useMutation } from '@apollo/react-hooks'
+import { useQuery, useMutation, gql } from "@apollo/client";
-import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import Section from 'src/components/layout/Section'

new-lamassu-admin/src/pages/Wallet/Wallet.jsx

@@ -1,6 +1,5 @@
-import { useQuery, useMutation } from '@apollo/react-hooks'
+import { useQuery, useMutation, gql } from "@apollo/client";
 import { makeStyles } from '@material-ui/core'
-import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import Modal from 'src/components/Modal'

new-lamassu-admin/src/pages/Wizard/Wizard.jsx

@@ -1,7 +1,6 @@
-import { useQuery } from '@apollo/react-hooks'
+import { useQuery, gql } from "@apollo/client";
 import { makeStyles, Dialog, DialogContent } from '@material-ui/core'
 import classnames from 'classnames'
-import gql from 'graphql-tag'
 import React, { useState, useContext } from 'react'
 import { useHistory } from 'react-router-dom'
 import { getWizardStep, STEPS } from 'src/pages/Wizard/helper'

new-lamassu-admin/src/pages/Wizard/components/Commissions.jsx

@@ -1,6 +1,5 @@
-import { useQuery, useMutation } from '@apollo/react-hooks'
+import { useQuery, useMutation, gql } from "@apollo/client";
 import { makeStyles } from '@material-ui/core'
-import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React from 'react'
 import Section from 'src/components/layout/Section'

new-lamassu-admin/src/pages/Wizard/components/Locales.jsx

@@ -1,6 +1,5 @@
-import { useQuery, useMutation } from '@apollo/react-hooks'
+import { useQuery, useMutation, gql } from "@apollo/client";
 import { makeStyles } from '@material-ui/core'
-import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React from 'react'
 import Section from 'src/components/layout/Section'

new-lamassu-admin/src/pages/Wizard/components/Mailgun.jsx

@@ -1,6 +1,5 @@
-import { useMutation, useQuery } from '@apollo/react-hooks'
+import { useMutation, useQuery, gql } from "@apollo/client";
 import { makeStyles } from '@material-ui/core'
-import gql from 'graphql-tag'
 import React, { useState, useEffect } from 'react'
 import { H4, Info3 } from 'src/components/typography'
 import FormRenderer from 'src/pages/Services/FormRenderer'

new-lamassu-admin/src/pages/Wizard/components/Twilio.jsx

@@ -1,7 +1,6 @@
-import { useMutation, useQuery } from '@apollo/react-hooks'
+import { useMutation, useQuery, gql } from "@apollo/client";
 import { makeStyles, Box } from '@material-ui/core'
 import classnames from 'classnames'
-import gql from 'graphql-tag'
 import React, { useState } from 'react'
 import InfoMessage from 'src/components/InfoMessage'
 import { HelpTooltip } from 'src/components/Tooltip'

new-lamassu-admin/src/pages/Wizard/components/Wallet/AllSet.jsx

@@ -1,6 +1,5 @@
-import { useQuery, useMutation } from '@apollo/react-hooks'
+import { useQuery, useMutation, gql } from "@apollo/client";
 import { makeStyles } from '@material-ui/core'
-import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import { P, H4 } from 'src/components/typography'

new-lamassu-admin/src/pages/Wizard/components/Wallet/Blockcypher.jsx

@@ -1,6 +1,5 @@
-import { useMutation, useQuery } from '@apollo/react-hooks'
+import { useMutation, useQuery, gql } from "@apollo/client";
 import { makeStyles } from '@material-ui/core'
-import gql from 'graphql-tag'
 import React, { useState } from 'react'
 import { P, H4 } from 'src/components/typography'
 import FormRenderer from 'src/pages/Services/FormRenderer'

new-lamassu-admin/src/pages/Wizard/components/Wallet/ChooseCoin.jsx

@@ -1,7 +1,6 @@
-import { useQuery } from '@apollo/react-hooks'
+import { useQuery, gql } from "@apollo/client";
 import { makeStyles } from '@material-ui/core'
 import { Formik, Form, Field } from 'formik'
-import gql from 'graphql-tag'
 import React, { useState } from 'react'
 import PromptWhenDirty from 'src/components/PromptWhenDirty'
 import { H4 } from 'src/components/typography'

new-lamassu-admin/src/pages/Wizard/components/Wallet/ChooseExchange.jsx

@@ -1,7 +1,6 @@
-import { useQuery, useMutation } from '@apollo/react-hooks'
+import { useQuery, useMutation, gql } from "@apollo/client";
 import { getEquivalentCode } from '@lamassu/coins/lightUtils'
 import { makeStyles } from '@material-ui/core'
-import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import { H4, Info3 } from 'src/components/typography'

new-lamassu-admin/src/pages/Wizard/components/Wallet/ChooseTicker.jsx

@@ -1,7 +1,6 @@
-import { useQuery } from '@apollo/react-hooks'
+import { useQuery, gql } from "@apollo/client";
 import { getEquivalentCode } from '@lamassu/coins/lightUtils'
 import { makeStyles } from '@material-ui/core'
-import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import { H4 } from 'src/components/typography'

new-lamassu-admin/src/pages/Wizard/components/Wallet/ChooseWallet.jsx

@@ -1,6 +1,5 @@
-import { useQuery, useMutation } from '@apollo/react-hooks'
+import { useQuery, useMutation, gql } from "@apollo/client";
 import { makeStyles } from '@material-ui/core'
-import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import { H4, Info3 } from 'src/components/typography'

new-lamassu-admin/src/utils/apollo.jsx

@@ -1,9 +1,6 @@
-import { ApolloProvider } from '@apollo/react-hooks'
+import { ApolloClient, ApolloProvider, InMemoryCache, ApolloLink } from "@apollo/client";
-import { InMemoryCache } from 'apollo-cache-inmemory'
+import { onError } from "@apollo/client/link/error"
-import { ApolloClient } from 'apollo-client'
+import createUploadLink from "apollo-upload-client/createUploadLink.mjs";
-import { ApolloLink } from 'apollo-link'
-import { onError } from 'apollo-link-error'
-import { createUploadLink } from 'apollo-upload-client'
 import React, { useContext } from 'react'
 import { useHistory, useLocation } from 'react-router-dom'