Merge branch 'develop' of https://github.com/magickbase/ckb-explorer-…

…frontend into develop

.husky/pre-commit

@@ -1,6 +1,5 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-yarn lint:css
+yarn lint-staged
 yarn test
-npx lint-staged

.stylelintrc.js

@@ -0,0 +1,64 @@
+const package = require('./package.json')
+
+module.exports = {
+  customSyntax: 'postcss-scss',
+  extends: ['stylelint-config-standard'],
+  rules: {
+    'no-empty-source': null,
+    // Due to the large number of non-standard names previously used, it is not possible to quickly correct all names,
+    // so these rules have been temporarily disabled.
+    'selector-class-pattern': null,
+    'selector-id-pattern': null,
+    'custom-property-pattern': null,
+    // This rule provides little benefit relative to the cost of implementing it, so it has been disabled.
+    'no-descending-specificity': null,
+
+    'selector-pseudo-class-no-unknown': [
+      true,
+      {
+        // to support `:global`
+        ignorePseudoClasses: ['global'],
+      },
+    ],
+  },
+
+  overrides: [
+    {
+      files: ['*.scss', '**/*.scss'],
+      extends: ['stylelint-config-standard-scss'],
+      rules: {
+        'scss/dollar-variable-pattern': null,
+      },
+    },
+    {
+      files: ['*.tsx', '**/*.tsx'],
+      customSyntax: 'postcss-styled-syntax',
+      // Currently, it is difficult to integrate postcss into styled-components to achieve CSS compatibility, unless a complex but not robust implementation is done manually.
+      // However, considering the implementation cost and the possibility that we may gradually abandon styled-components in the future, we do not adopt this solution.
+      // Therefore, without postcss to automatically handle compatibility, we need to handle it manually and avoid introducing syntax that is too high for stylelint.
+      // So here we introduce stylelint-no-unsupported-browser-features to help identify unsupported features and manually disable some stylelint rules that involve high-version features.
+      plugins: ['stylelint-no-unsupported-browser-features'],
+      rules: {
+        'media-feature-range-notation': null,
+        'plugin/no-unsupported-browser-features': [
+          true,
+          {
+            browsers: package.browserslist,
+            // TODO: Perhaps the browserslist should be adjusted to a more reasonable range, at least to a level that is compatible with CSS variables.
+            ignore: [
+              'css-nesting',
+              'css-sticky',
+              'css-variables',
+              'mdn-text-decoration-shorthand',
+              'css-unset-value',
+              'flexbox-gap',
+              'css-font-stretch',
+              'css-overscroll-behavior',
+            ],
+            ignorePartialSupport: true,
+          },
+        ],
+      },
+    },
+  ],
+}

package.json

@@ -23,6 +23,7 @@
     "jsbi": "3.2.5",
     "lint-staged": "^13.2.3",
     "moment": "2.29.4",
+    "observable-hooks": "^4.2.3",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-i18next": "11.18.6",
@@ -38,16 +39,16 @@
   "devDependencies": {
     "@sentry/webpack-plugin": "2.7.1",
     "@testing-library/react": "12.1.5",
-    "@types/echarts": "4.9.18",
+    "@types/echarts": "4.9.19",
     "@types/eslint": "7.29.0",
     "@types/jest": "26.0.24",
-    "@types/node": "16.18.50",
+    "@types/node": "16.18.58",
     "@types/react": "17.0.65",
     "@types/react-dom": "17.0.20",
     "@types/react-outside-click-handler": "^1.3.0",
     "@types/react-router-dom": "5.3.3",
     "@types/react-test-renderer": "^18.0.0",
-    "@types/styled-components": "5.1.26",
+    "@types/styled-components": "5.1.28",
     "@typescript-eslint/eslint-plugin": "^4.29.0",
     "@typescript-eslint/parser": "5.62.0",
     "antd-dayjs-webpack-plugin": "^1.0.6",
@@ -63,24 +64,24 @@
     "husky": "^7.0.1",
     "jest-styled-components": "^7.0.5",
     "mockdate": "^2.0.5",
+    "postcss-scss": "4.0.8",
     "postcss-styled-syntax": "^0.4.0",
     "prettier": "^2.8.8",
     "react-app-rewired": "2.2.1",
     "react-test-renderer": "^17.0.2",
     "rxjs": "7.8.1",
     "stylelint": "^15.10.1",
-    "stylelint-config-recommended": "^13.0.0",
     "stylelint-config-standard": "^34.0.0",
+    "stylelint-config-standard-scss": "^11.0.0",
     "stylelint-config-styled-components": "^0.1.1",
+    "stylelint-no-unsupported-browser-features": "7.0.0",
     "stylelint-processor-styled-components": "^1.10.0",
     "timezone-mock": "^1.1.4",
     "ts-jest": "27.1.5",
     "typescript": "4.9.5"
   },
   "scripts": {
     "start": "react-app-rewired start",
-    "lint": "eslint src/**/*.{ts,tsx} --fix",
-    "lint:css": "stylelint src/**/*.tsx",
     "build": "react-app-rewired build",
     "test": "react-app-rewired test --watchAll=false",
     "eject": "react-app-rewired eject",
@@ -104,6 +105,7 @@
   ],
   "lint-staged": {
     "*.{ts,tsx}": "eslint --cache --fix",
-    "*.{ts,tsx,json,html,scss}": "prettier --write"
+    "*.{ts,tsx,json,html,scss}": "prettier --write",
+    "*.{scss,css,tsx}": "stylelint --fix"
   }
 }

src/App.tsx

@@ -1,13 +1,12 @@
 import { useMemo } from 'react'
 import { QueryClient, QueryClientProvider } from 'react-query'
 import { ThemeProvider } from 'styled-components'
-import 'antd/dist/antd.css'
 import Routers from './routes'
 import Toast from './components/Toast'
-import withProviders, { useAppState } from './contexts/providers'
 import useInitApp from './contexts/providers/hook'
 import { isMainnet } from './utils/chain'
 import { DASQueryContextProvider } from './contexts/providers/dasQuery'
+import { getPrimaryColor, getSecondaryColor } from './constants/common'
 
 const appStyle = {
   width: '100vw',
@@ -17,15 +16,14 @@ const appStyle = {
 
 const queryClient = new QueryClient()
 
-const App = withProviders(() => {
+const App = () => {
   useInitApp()
-  const { app } = useAppState()
   const theme = useMemo(
     () => ({
-      primary: app.primaryColor,
-      secondary: app.secondaryColor,
+      primary: getPrimaryColor(),
+      secondary: getSecondaryColor(),
     }),
-    [app.primaryColor, app.secondaryColor],
+    [],
   )
 
   return (
@@ -40,6 +38,6 @@ const App = withProviders(() => {
       </div>
     </ThemeProvider>
   )
-})
+}
 
 export default App

src/assets/fonts/fonts.css

@@ -1,5 +1,5 @@
 @font-face {
-  font-family: 'Lato';
+  font-family: Lato;
   src: local('Lato'), url('./Lato-Regular.ttf') format('truetype');
   font-weight: 300;
   font-style: normal;

src/components/Banner/index.module.scss

@@ -9,7 +9,8 @@ $backgroudColor: #232323;
   background-repeat: no-repeat;
   background-position: center center;
   background-size: auto 100%;
-  @media (max-width: 750px) {
+
+  @media (width <= 750px) {
     background-image: url('../../assets/ckb_explorer_banner_phone.svg');
   }
 }