Merge branch 'develop' into data-sorting-filtering

Signed-off-by: Chen Yu <[email protected]>

.husky/pre-commit

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

.stylelintrc.json

@@ -1,7 +1,9 @@
 {
-  "processors": ["stylelint-processor-styled-components"],
+  "customSyntax": "postcss-styled-syntax",
   "extends": ["stylelint-config-recommended", "stylelint-config-styled-components", "stylelint-config-standard"],
   "rules": {
-    "no-empty-source": null
+    "no-empty-source": null,
+    "selector-class-pattern": null,
+    "selector-id-pattern": null
   }
 }

package.json

@@ -57,24 +57,25 @@
     "eslint-config-prettier": "8.3.0",
     "eslint-plugin-import": "2.23.4",
     "eslint-plugin-jsx-a11y": "6.4.1",
-    "eslint-plugin-prettier": "3.4.0",
+    "eslint-plugin-prettier": "3.4.1",
     "eslint-plugin-react": "7.31.11",
     "eslint-plugin-react-hooks": "4.6.0",
     "husky": "^7.0.1",
     "jest-styled-components": "^7.0.5",
     "mockdate": "^2.0.5",
+    "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": "^5.0.0",
-    "stylelint-config-standard": "^22.0.0",
+    "stylelint-config-recommended": "^13.0.0",
+    "stylelint-config-standard": "^34.0.0",
     "stylelint-config-styled-components": "^0.1.1",
     "stylelint-processor-styled-components": "^1.10.0",
     "timezone-mock": "^1.1.4",
     "ts-jest": "27.0.4",
-    "typescript": "4.9.4"
+    "typescript": "4.9.5"
   },
   "scripts": {
     "start": "react-app-rewired start",

renovate.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": [
+    "config:base"
+  ]
+}

src/components/Alert/index.tsx

@@ -6,6 +6,7 @@ import { dayjs, parseSimpleDateNoSecond } from '../../utils/date'
 import SimpleButton from '../SimpleButton'
 import { ComponentActions } from '../../contexts/actions'
 import { AppCachedKeys } from '../../constants/cache'
+import { IS_MAINTAINING } from '../../constants/common'
 import styles from './styles.module.scss'
 
 const FIFTEEN_MINUTES = 15 * 60 * 1000
@@ -51,9 +52,9 @@ const Alert = () => {
     )
   }
 
-  // if (isMainnet()) {
-  //   return <div className={styles.container}>{i18n.t('error.maintain')}</div>
-  // }
+  if (IS_MAINTAINING) {
+    return <div className={styles.container}>{i18n.t('error.maintain')}</div>
+  }
 
   return maintenanceAlertVisible ? (
     <AlertPanel isEn={currentLanguage() === 'en'}>

src/components/Alert/styled.tsx

@@ -2,7 +2,6 @@ import styled from 'styled-components'
 
 export const AlertPanel = styled.div`
   position: sticky;
-  position: -webkit-sticky;
   top: 0;
   z-index: 9000;
 
@@ -19,16 +18,16 @@ export const AlertPanel = styled.div`
     font-size: 14px;
     font-weight: 450;
 
-    @media (max-width: 1440px) {
+    @media (width <= 1440px) {
       padding: 0 100px;
     }
 
-    @media (max-width: 1200px) {
+    @media (width <= 1200px) {
       padding: 0 45px;
       height: 64px;
     }
 
-    @media (max-width: 750px) {
+    @media (width <= 750px) {
       padding: 8px 18px;
       height: ${(props: { isEn: boolean }) => (props.isEn ? '120px' : '100px')};
       flex-direction: column;
@@ -37,7 +36,7 @@ export const AlertPanel = styled.div`
   }
 
   .alert__dismiss__panel {
-    @media (max-width: 750px) {
+    @media (width <= 750px) {
       width: 100%;
       display: flex;
       justify-content: flex-end;
@@ -49,10 +48,10 @@ export const AlertPanel = styled.div`
     height: 30px;
     line-height: 30px;
     border-radius: 2px;
-    border: solid 1px #ffffff;
+    border: solid 1px #fff;
     text-align: center;
 
-    @media (max-width: 1200px) {
+    @media (width <= 1200px) {
       margin-left: 30px;
     }
   }

src/components/Card/HashCard/styled.tsx

@@ -8,11 +8,11 @@ export const HashCardPanel = styled.div`
   justify-content: flex-start;
   box-shadow: 2px 2px 6px 0 #dfdfdf;
   border-radius: 6px;
-  background-color: #ffffff;
-  padding: 0px 40px;
+  background-color: #fff;
+  padding: 0 40px;
   margin-bottom: 18px;
 
-  @media (max-width: 750px) {
+  @media (width <= 750px) {
     padding: 0 16px;
     box-shadow: 1px 1px 3px 0 #dfdfdf;
   }
@@ -26,62 +26,70 @@ export const HashCardPanel = styled.div`
     overflow: hidden;
     position: relative;
 
-    @media (max-width: 750px) {
+    @media (width <= 750px) {
       height: auto;
       flex-direction: ${(props: { isColumn: boolean }) => (props.isColumn ? 'column' : 'row')};
       align-items: ${(props: { isColumn: boolean }) => (props.isColumn ? 'flex-start' : 'center')};
-      padding: 12px 0px;
+      padding: 12px 0;
     }
   }
+
   .hash__icon {
     width: 40px;
     height: 40px;
     margin-right: 8px;
   }
+
   .hash__title {
     font-size: 24px;
     font-weight: 600;
-    color: #000000;
+    color: #000;
     white-space: nowrap;
 
-    @media (max-width: 750px) {
+    @media (width <= 750px) {
       font-size: 20px;
     }
   }
+
   .hash__card__hash__content {
     display: flex;
     flex-direction: row;
     align-items: center;
     flex: 1;
     min-width: 0;
   }
+
   #hash__text {
     min-width: 0;
     margin-left: 20px;
     font-size: 18px;
-    color: #000000;
+    color: #000;
     transform: translateY(3px);
-    @media (max-width: 750px) {
+
+    @media (width <= 750px) {
       font-size: 13px;
       margin-left: ${(props: { isColumn: boolean }) => (props.isColumn ? '0px' : '10px')};
       font-weight: 500;
       transform: translateY(1px);
     }
   }
+
   .hash__copy_icon {
     cursor: pointer;
     margin-left: 20px;
     display: flex;
     align-items: center;
-    @media (max-width: 750px) {
+
+    @media (width <= 750px) {
       margin-left: 10px;
       transform: translateY(3px);
     }
+
     > img {
       width: 21px;
       height: 24px;
 
-      @media (max-width: 750px) {
+      @media (width <= 750px) {
         width: 16px;
         height: 18px;
         margin-bottom: 3px;
@@ -90,7 +98,7 @@ export const HashCardPanel = styled.div`
   }
 
   #hash__value {
-    color: #ffffff;
+    color: #fff;
     position: absolute;
     bottom: -30px;
   }
@@ -104,7 +112,7 @@ export const HashCardPanel = styled.div`
       color: ${props => props.theme.primary};
     }
 
-    @media (max-width: 750px) {
+    @media (width <= 750px) {
       margin-top: 3px;
       margin-left: 6px;
     }

src/components/Card/ItemCard/styled.tsx

@@ -2,7 +2,7 @@ import styled from 'styled-components'
 
 export const ItemCardPanel = styled.div`
   width: 100%;
-  background-color: #ffffff;
+  background-color: #fff;
   color: #333;
   font-size: 16px;
   margin-top: 4px;
@@ -12,12 +12,11 @@ export const ItemCardPanel = styled.div`
 `
 
 export const ItemContentPanel = styled.div`
-  margin-right: 45px;
   display: flex;
   flex: 1;
   flex-direction: column;
   width: 100%;
-  margin-right: 0px;
+  margin-right: 0;
 `
 
 export const ItemDetailPanel = styled.div`
@@ -33,14 +32,14 @@ export const ItemDetailPanel = styled.div`
   .item__detail__title {
     color: #666;
     width: 100%;
-    margin-left: 0px;
+    margin-left: 0;
     line-height: 1;
   }
 
   .item__detail__value {
     display: flex;
     width: 100%;
-    margin-left: 0px;
+    margin-left: 0;
     margin-top: 8px;
     line-height: 1;
     word-wrap: break-word;