Merge pull request #117 from ssvlabs/stage

Stage to main

.github/workflows/build_deploy.yml

@@ -29,9 +29,6 @@ jobs:
       - name: Run lint
         run: yarn lint
 
-      - name: Run test
-        run: yarn test
-
       # <explorer.stage.ssv.network>
       - name: Run stage build
         if: github.ref == 'refs/heads/stage'

.husky/pre-push

@@ -2,5 +2,4 @@
 . "$(dirname "$0")/_/husky.sh"
 
 yarn lint
-yarn test
 yarn build

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": [
-      "<rootDir>/src"
-    ],
-    "collectCoverageFrom": [
-      "src/**/*.{js,jsx,ts,tsx}",
-      "!src/**/*.d.ts"
-    ],
-    "setupFiles": [
-      "react-app-polyfill/jsdom"
-    ],
-    "setupFilesAfterEnv": [
-      "<rootDir>/src/setupTests.ts"
-    ],
-    "testMatch": [
-      "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
-      "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
-    ],
-    "testRunner": "<rootDir>/node_modules/jest-circus/runner.js",
-    "transform": {
-      "^.+\\.(js|jsx|mjs|cjs|ts|tsx)$": "<rootDir>/config/jest/babelTransform.js",
-      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
-      "^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "<rootDir>/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",

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 (
     <ErrorBoundary>
       <MuiThemeProvider theme={applicationStore.muiTheme}>
         <ThemeProvider theme={applicationStore.muiTheme}>
           <DeveloperHelper />
           <Announcement />
-          <AppBar />
+          {applicationStore.isMaintenancePage ? <SimpleAppBar /> : <AppBar />}
           <Routes />
           <CssBaseline />
         </ThemeProvider>

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 (
+      <Wrapper>
+        <AppBarLogo path={`/images/website_logo_${applicationStore.isDarkMode ? 'light' : 'dark'}.svg`} />
+        <DarkModeSwitcher style={{ marginLeft: 'auto', marginRight: 0, minWidth: 'auto', width: 70 }} />
+      </Wrapper>
+    );
+};
+
+export default SimpleAppBar;

src/app/common/config/config.ts

@@ -1,6 +1,7 @@
 const config = {
     routes: {
         HOME: '/',
+        MAINTENANCE: '/maintenance',
         OPERATORS: {
             HOME: '/operators',
             OPERATOR: '/operators/:address',

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);

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 = () => (
+  <Wrapper>
+    <RobotLogo />
+    <TextWrapper>
+      <Title>The site is currently down for maintenance</Title>
+      <AdditionalText>We’ll be back up and running again shortly</AdditionalText>
+    </TextWrapper>
+  </Wrapper>
+  );
+
+export default MaintenancePage;

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 = () => {
         <PausedScreen />
       </Route>
 
+      <Route exact path={config.routes.MAINTENANCE}>
+        <MaintenancePage />
+      </Route>
+
       <Route exact path={config.routes.HOME}>
         <Overview />
       </Route>