diff --git a/.github/workflows/build_deploy.yml b/.github/workflows/build_deploy.yml index 3ed54e0..403f21d 100644 --- a/.github/workflows/build_deploy.yml +++ b/.github/workflows/build_deploy.yml @@ -29,9 +29,6 @@ jobs: - name: Run lint run: yarn lint - - name: Run test - run: yarn test - # - name: Run stage build if: github.ref == 'refs/heads/stage' diff --git a/.husky/pre-push b/.husky/pre-push index c254845..92e93b4 100755 --- a/.husky/pre-push +++ b/.husky/pre-push @@ -2,5 +2,4 @@ . "$(dirname "$0")/_/husky.sh" yarn lint -yarn test yarn build diff --git a/package.json b/package.json index 8e1da62..68fb8c5 100644 --- a/package.json +++ b/package.json @@ -94,11 +94,6 @@ "dev:server": "cd dev-api/ && ts-node server", "start": "cross-env NODE_OPTIONS=--openssl-legacy-provider NODE_ENV=development INLINE_RUNTIME_CHUNK=false node scripts/start.js", "build": "cross-env NODE_OPTIONS=--openssl-legacy-provider INLINE_RUNTIME_CHUNK=false node scripts/build.js", - "test": "cross-env NODE_OPTIONS=--openssl-legacy-provider NODE_ENV=test INLINE_RUNTIME_CHUNK=false node scripts/test.js --watchAll=false --verbose", - "test:dev": "cross-env NODE_OPTIONS=--openssl-legacy-provider NODE_ENV=test INLINE_RUNTIME_CHUNK=false node scripts/test.js --coverage --reporters=default", - "cy:open": "cross-env NODE_OPTIONS=--openssl-legacy-provider NODE_ENV=test cypress open --config-file cypress.json", - "cy:open:local": "cross-env NODE_OPTIONS=--openssl-legacy-provider NODE_ENV=test cypress open --config-file cypress.json --config baseUrl=http://localhost:3000", - "cy:headless": "cross-env NODE_OPTIONS=--openssl-legacy-provider NODE_ENV=test cypress run --config-file cypress-headless.json", "lint": "eslint 'src/**'", "postinstall": "link-module-alias && husky install", "preinstall": "command -v link-module-alias && link-module-alias clean || true", @@ -127,59 +122,6 @@ "~lib": "./src/lib", "~config": "./config" }, - "jest": { - "roots": [ - "/src" - ], - "collectCoverageFrom": [ - "src/**/*.{js,jsx,ts,tsx}", - "!src/**/*.d.ts" - ], - "setupFiles": [ - "react-app-polyfill/jsdom" - ], - "setupFilesAfterEnv": [ - "/src/setupTests.ts" - ], - "testMatch": [ - "/src/**/__tests__/**/*.{js,jsx,ts,tsx}", - "/src/**/*.{spec,test}.{js,jsx,ts,tsx}" - ], - "testRunner": "/node_modules/jest-circus/runner.js", - "transform": { - "^.+\\.(js|jsx|mjs|cjs|ts|tsx)$": "/config/jest/babelTransform.js", - "^.+\\.css$": "/config/jest/cssTransform.js", - "^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "/config/jest/fileTransform.js" - }, - "transformIgnorePatterns": [ - "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$", - "^.+\\.module\\.(css|sass|scss)$" - ], - "modulePaths": [], - "moduleNameMapper": { - "^react-native$": "react-native-web", - "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy" - }, - "moduleFileExtensions": [ - "web.js", - "js", - "web.ts", - "ts", - "web.tsx", - "tsx", - "json", - "web.jsx", - "jsx", - "node" - ], - "watchPlugins": [ - "jest-watch-typeahead/filename", - "jest-watch-typeahead/testname" - ], - "resetMocks": true, - "testEnvironment": "~config/jest/TestsEnvironments", - "testTimeout": 10000 - }, "devDependencies": { "@testing-library/dom": "^7.30.4", "@types/cors": "^2.8.10", diff --git a/public/images/maintenaceMascot/maintenaceMascot.svg b/public/images/maintenaceMascot/maintenaceMascot.svg new file mode 100644 index 0000000..07fc90a --- /dev/null +++ b/public/images/maintenaceMascot/maintenaceMascot.svg @@ -0,0 +1,5 @@ + + + diff --git a/src/app/App.tsx b/src/app/App.tsx index 48da102..8ee7408 100644 --- a/src/app/App.tsx +++ b/src/app/App.tsx @@ -10,18 +10,26 @@ import DeveloperHelper from '~lib/utils/DeveloperHelper'; import Announcement from '~app/common/components/Announcement'; import ApplicationStore from '~app/common/stores/Application.store'; import ErrorBoundary from '~app/components/ErrorBoundary'; +import SimpleAppBar from '~app/common/components/AppBar/SimpleAppBar'; +import { useHistory } from 'react-router-dom'; +import config from '~app/common/config'; const App = () => { const stores = useStores(); + const history = useHistory(); const applicationStore: ApplicationStore = stores.Application; + if (applicationStore.isMaintenancePage) { + history.push(config.routes.MAINTENANCE); + } + return ( - + {applicationStore.isMaintenancePage ? : } diff --git a/src/app/common/components/AppBar/SimpleAppBar.tsx b/src/app/common/components/AppBar/SimpleAppBar.tsx new file mode 100644 index 0000000..fb91aee --- /dev/null +++ b/src/app/common/components/AppBar/SimpleAppBar.tsx @@ -0,0 +1,37 @@ +import React from 'react'; +import styled from 'styled-components'; +import DarkModeSwitcher from '~app/common/components/DarkModeSwitcher/DarkModeSwitcher'; +import { useStores } from '~app/hooks/useStores'; +import ApplicationStore from '~app/common/stores/Application.store'; + +const Wrapper = styled.div` + width: 100%; + height: 80px; + padding: 0 24px; + display: flex; + align-items: center; + justify-content: space-between; +`; + +const AppBarLogo = styled.div<{ path: string }>` + height: 40px; + width: 133px; + cursor: default; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + background-image: ${({ path }) => `url(${path})`}; +`; + +const SimpleAppBar = () => { + const stores = useStores(); + const applicationStore: ApplicationStore = stores.Application; + return ( + + + + + ); +}; + +export default SimpleAppBar; diff --git a/src/app/common/config/config.ts b/src/app/common/config/config.ts index 914ccc5..2cb7767 100644 --- a/src/app/common/config/config.ts +++ b/src/app/common/config/config.ts @@ -1,6 +1,7 @@ const config = { routes: { HOME: '/', + MAINTENANCE: '/maintenance', OPERATORS: { HOME: '/operators', OPERATOR: '/operators/:address', diff --git a/src/app/common/stores/Application.store.ts b/src/app/common/stores/Application.store.ts index 0a9e0a3..628ce4b 100644 --- a/src/app/common/stores/Application.store.ts +++ b/src/app/common/stores/Application.store.ts @@ -13,10 +13,12 @@ class ApplicationStore extends BaseStore { // @ts-ignore @observable theme: Theme; @observable darkMode: boolean = false; + @observable isMaintenancePage: string | null = null; constructor() { super(); const darkModeSaved = this.localStorage.getItem('isDarkMode'); + this.isMaintenancePage = this.localStorage.getItem('isMaintenancePage'); if (darkModeSaved) { this.darkMode = darkModeSaved === '1'; this.switchDarkMode(this.darkMode); diff --git a/src/app/common/stores/__test__/NotificationsStore.test.ts b/src/app/common/stores/__test__/NotificationsStore.test.ts deleted file mode 100644 index f7cfe1f..0000000 --- a/src/app/common/stores/__test__/NotificationsStore.test.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { rootStore } from '~root/stores'; -import NotificationsStore from '~app/common/stores/Notifications.store'; - -describe('Check Notification Store', () => { - it('Check error message', () => { - const message = 'this is message'; - const severity = 'error'; - const notification: NotificationsStore = rootStore.Notifications; - notification.showMessage(message, severity); - expect(notification.message).toEqual(message); - expect(notification.messageSeverity).toEqual(severity); - expect(notification.showSnackBar).toEqual(true); - }); - it('Check success message', () => { - const message = 'this is message'; - const severity = 'success'; - const notification: NotificationsStore = rootStore.Notifications; - notification.showMessage(message, severity); - expect(notification.message).toEqual(message); - expect(notification.messageSeverity).toEqual(severity); - expect(notification.showSnackBar).toEqual(true); - }); -}); diff --git a/src/app/components/Maintenance/MaintenancePage.tsx b/src/app/components/Maintenance/MaintenancePage.tsx new file mode 100644 index 0000000..29c1694 --- /dev/null +++ b/src/app/components/Maintenance/MaintenancePage.tsx @@ -0,0 +1,51 @@ +import React from 'react'; +import styled from 'styled-components'; + +const Wrapper = styled.div` + height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +`; + +const RobotLogo = styled.div` + width: 154px; + height: 240px; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + background-image: url(/images/maintenaceMascot/maintenaceMascot.svg); + margin-bottom: 60px; +`; + +const Title = styled.h1` + font-size: 28px; + font-weight: 800; + color: ${({ theme }) => theme.colors.gray80}; +`; + +const AdditionalText = styled.p` + font-size: 18px; + color: ${({ theme }) => theme.colors.black}; +`; + +const TextWrapper = styled.div` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 28px; +`; + +const MaintenancePage = () => ( + + + + The site is currently down for maintenance + We’ll be back up and running again shortly + + + ); + +export default MaintenancePage; diff --git a/src/app/components/Routes/Routes.tsx b/src/app/components/Routes/Routes.tsx index 58f0e46..2ea7a1d 100644 --- a/src/app/components/Routes/Routes.tsx +++ b/src/app/components/Routes/Routes.tsx @@ -8,6 +8,7 @@ import Operator from '~app/components/Operator/Operator'; import OperatorsList from '~app/components/OperatorsList'; import Validator from '~app/components/Validator/Validator'; import ValidatorsList from '~app/components/ValidatorsList'; +import MaintenancePage from '~app/components/Maintenance/MaintenancePage'; const Routes = () => { return ( @@ -16,6 +17,10 @@ const Routes = () => { + + + +