Merge branch 'staging'

docker-compose.yml

@@ -3,7 +3,7 @@ version: "3.8"
 services:
   postgres:
     container_name: eosrate_postgres
-    image: postgres:13.3-alpine
+    image: postgres:13.6-alpine
     volumes:
       - ${POSTGRES_DATA}:/var/lib/postgresql/data
     ports:
@@ -85,7 +85,7 @@ services:
 
   hasura:
     container_name: eosrate_hasura
-    image: hasura/graphql-engine:v2.4.0.cli-migrations-v3
+    image: hasura/graphql-engine:v2.8.4.cli-migrations-v3
     ports:
       - "8080:8080"
     depends_on:

hasura/Dockerfile

@@ -1,4 +1,4 @@
-FROM hasura/graphql-engine:v2.4.0.cli-migrations-v3
+FROM hasura/graphql-engine:v2.8.4.cli-migrations-v3
 
 ENV HASURA_GRAPHQL_MIGRATIONS_DIR /hasura-migrations
 ENV HASURA_GRAPHQL_METADATA_DIR /hasura-metadata

kubernetes/postgres-statefulset.yaml

@@ -16,7 +16,7 @@ spec:
         app: postgres
     spec:
       containers:
-      - image: postgres:13.3-alpine
+      - image: postgres:13.6-alpine
         imagePullPolicy: "Always"
         name: eosrate-postgres
         envFrom:

webapp/package.json

@@ -32,6 +32,7 @@
     "@mui/lab": "^5.0.0-alpha.48",
     "@mui/material": "^5.0.1",
     "@mui/styles": "^5.0.1",
+    "@mui/x-date-pickers": "^5.0.0-beta.2",
     "apollo-cache-inmemory": "^1.6.5",
     "apollo-client": "^2.6.8",
     "apollo-link": "^1.2.13",
@@ -66,10 +67,10 @@
     "qs": "^6.10.1",
     "random-color-rgb": "^1.1.1",
     "rc-slider": "^9.7.2",
-    "react": "~17.0.2",
+    "react": "^18.2.0",
     "react-apollo": "^3.1.3",
     "react-autosuggest": "^10.1.0",
-    "react-dom": "~17.0.2",
+    "react-dom": "^18.2.0",
     "react-feather": "^2.0.9",
     "react-ga": "^3.3.0",
     "react-helmet": "^6.1.0",
@@ -122,10 +123,10 @@
     "standard": "^16.0.3"
   },
   "resolutions": {
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "**/react": "17.0.2",
-    "**/react-dom": "17.0.2"
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "**/react": "18.2.0",
+    "**/react-dom": "18.2.0"
   },
   "lint-staged": {
     "*.js": [

webapp/public/index.html

@@ -30,6 +30,10 @@
       rel="stylesheet"
       href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
     />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap"
+      rel="stylesheet"
+    />
     <link
       rel="stylesheet"
       href="https://fonts.googleapis.com/icon?family=Material+Icons"

webapp/src/app.js

@@ -1,7 +1,7 @@
 import React, { Suspense, useMemo } from 'react'
 import { BrowserRouter, Route, Switch } from 'react-router-dom'
-import AdapterDateFns from '@mui/lab/AdapterDateFns'
-import LocalizationProvider from '@mui/lab/LocalizationProvider'
+import { LocalizationProvider } from '@mui/x-date-pickers'
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'
 import { StylesProvider, createGenerateClassName } from '@mui/styles'
 import { ThemeProvider } from '@mui/material/styles'
 import CssBaseline from '@mui/material/CssBaseline'
@@ -19,6 +19,8 @@ const generateClassName = createGenerateClassName({
 
 const App = () => {
   const [state] = useSharedState()
+  const userRoutes = useMemo(() => routes())
+  const theme = useMemo(() => getTheme(state.useDarkMode), [state.useDarkMode])
 
   const renderRoute = ({ component: Component, ...route }, index) => (
     <Route
@@ -30,10 +32,6 @@ const App = () => {
     </Route>
   )
 
-  const userRoutes = useMemo(() => routes())
-
-  const theme = useMemo(() => getTheme(state.useDarkMode), [state.useDarkMode])
-
   return (
     <BrowserRouter>
       <StylesProvider generateClassName={generateClassName}>

webapp/src/components/Header/index.js

@@ -9,14 +9,14 @@ import IconButton from '@mui/material/IconButton'
 import Box from '@mui/material/Box'
 import CircularProgress from '@mui/material/CircularProgress'
 import Typography from '@mui/material/Typography'
-import SearchIcon from '@material-ui/icons/Search'
+import SearchIcon from '@mui/icons-material/Search'
 import Toolbar from '@mui/material/Toolbar'
-import Tooltip from '@material-ui/core/Tooltip'
+import Tooltip from '@mui/material/Tooltip'
 import MenuIcon from '@mui/icons-material/Menu'
 import AccountBalanceWalletOutlinedIcon from '@mui/icons-material/AccountBalanceWalletOutlined'
 import ExitIcon from '@mui/icons-material/ExitToApp'
 import LockOpenOutlinedIcon from '@material-ui/icons/LockOpenOutlined'
-import LockOutlinedIcon from '@material-ui/icons/LockOutlined'
+import LockOutlinedIcon from '@mui/icons-material/LockOutlined'
 import AccountIcon from '@mui/icons-material/AccountCircle'
 import Menu from '@mui/material/Menu'
 import MenuItem from '@mui/material/MenuItem'

webapp/src/index.js

@@ -1,7 +1,7 @@
 import './wdyr'
 
 import React from 'react'
-import { render } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import { UALProvider, withUAL } from '@eoscostarica/ual-reactjs-renderer'
 import { ApolloProvider } from '@apollo/client'
 
@@ -12,8 +12,10 @@ import { ualConfig } from './config'
 import { SharedStateProvider } from './context/state.context'
 
 const SharedStateProviderWithUAL = withUAL(SharedStateProvider)
+const container = document.getElementById('root')
+const root = createRoot(container)
 
-render(
+root.render(
   <UALProvider
     chains={[ualConfig.network]}
     authenticators={ualConfig.authenticators}
@@ -24,8 +26,7 @@ render(
         <App />
       </ApolloProvider>
     </SharedStateProviderWithUAL>
-  </UALProvider>,
-  document.getElementById('root')
+  </UALProvider>
 )
 
 // If you want your app to work offline and load faster, you can change

webapp/src/layouts/Dashboard/index.js

@@ -26,11 +26,11 @@ const Dashboard = ({ children, routes }) => {
 
   const handleScroll = useCallback(
     e => {
-      if (e.target.scrollTop > 927 && !scrollTop) {
+      if (e.target.scrollTop > 127 && !scrollTop) {
         setScrollTop(true)
       }
 
-      if (e.target.scrollTop < 927 && scrollTop) {
+      if (e.target.scrollTop < 127 && scrollTop) {
         setScrollTop(false)
       }
     },

webapp/src/routes/Home/styles.js

@@ -29,6 +29,7 @@ export default theme => ({
   },
   headerTitle: {
     maxWidth: 893,
+    fontFamily: 'Oswald !important',
     fontStyle: 'normal',
     fontWeight: '500 !important',
     fontSize: '42px !important',

webapp/src/routes/Route404/index.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button, Typography } from '@material-ui/core'
+import { Button, Typography } from '@mui/material'
 import { makeStyles } from '@mui/styles'
 import { Link } from 'react-router-dom'
 import Helmet from 'react-helmet'