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

…frontend into develop

.eslintrc.js

@@ -84,6 +84,7 @@ module.exports = {
         prop: 'ignore',
       },
     ],
+    'react/jsx-pascal-case': 'off',
     'no-console': ['error', { allow: ['error'] }],
     'react-hooks/rules-of-hooks': 'error',
     'react-hooks/exhaustive-deps': 'warn',

.stylelintrc.js

@@ -6,7 +6,7 @@ module.exports = {
   rules: {
     'no-empty-source': null,
     // Based on the discussion in https://github.com/Magickbase/ckb-explorer-public-issues/issues/442, we have decided to use lower camel case.
-    'selector-class-pattern': "^[a-z][a-zA-Z0-9]+$",
+    'selector-class-pattern': '^[a-z][a-zA-Z0-9]+$',
     '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.
@@ -27,6 +27,14 @@ module.exports = {
       extends: ['stylelint-config-standard-scss'],
       rules: {
         'scss/dollar-variable-pattern': null,
+        'scss/at-rule-no-unknown': [
+          true,
+          {
+            // This syntax is specified by the CSS module specification and implemented by the css-loader.
+            // Refs: https://github.com/css-modules/css-modules/blob/master/docs/values-variables.md
+            ignoreAtRules: ['value'],
+          },
+        ],
       },
     },
     {

config-overrides.js

@@ -1,6 +1,7 @@
 /* config-overrides.js */
 const SentryWebpackPlugin = require('@sentry/webpack-plugin')
 const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin')
+const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent')
 
 module.exports = function override(config) {
   if (config.ignoreWarnings == null) {
@@ -31,5 +32,46 @@ module.exports = function override(config) {
     )
   }
 
+  // https://dhanrajsp.me/snippets/customize-css-loader-options-in-nextjs
+  const oneOf = config.module.rules.find(rule => typeof rule.oneOf === 'object')
+  if (oneOf) {
+    const moduleSassRule = oneOf.oneOf.find(rule => regexEqual(rule.test, /\.module\.(scss|sass)$/))
+    if (moduleSassRule) {
+      // Get the config object for css-loader plugin
+      const cssLoader = moduleSassRule.use.find(({ loader }) => loader?.includes('css-loader'))
+      if (cssLoader) {
+        cssLoader.options = {
+          ...cssLoader.options,
+          modules: {
+            ...cssLoader.options.modules,
+            // By default, `CRA` uses `node_modules\react-dev-utils\getCSSModuleLocalIdent` as `getLocalIdent` passed to `css-loader`,
+            // which generates class names with base64 suffixes.
+            // However, the `@value` syntax of CSS modules does not execute `escapeLocalIdent` when replacing corresponding class names in actual files.
+            // Therefore, if a class name's base64 hash contains `+` and is also imported into another file using `@value`,
+            // the selector after applying the `@value` syntax will be incorrect.
+            // For example, `.CompA_main__KW\+Cg` will become `.CompA_main__KW+Cg` when imported into another file.
+            // This may not be a bug but a feature, because `@value` is probably not designed specifically for importing selectors from other files.
+            // So here, we add a `+` handling based on the logic of escapeLocalIdent.
+            getLocalIdent: (...args) => getCSSModuleLocalIdent(...args).replaceAll('+', '-'),
+          },
+        }
+      }
+    }
+  }
+
   return config
 }
+
+/**
+ * Stolen from https://stackoverflow.com/questions/10776600/testing-for-equality-of-regular-expressions
+ */
+function regexEqual(x, y) {
+  return (
+    x instanceof RegExp &&
+    y instanceof RegExp &&
+    x.source === y.source &&
+    x.global === y.global &&
+    x.ignoreCase === y.ignoreCase &&
+    x.multiline === y.multiline
+  )
+}

package.json

@@ -41,7 +41,7 @@
     "@storybook/addon-essentials": "7.5.3",
     "@storybook/addon-interactions": "7.5.3",
     "@storybook/addon-links": "7.5.3",
-    "@storybook/addon-onboarding": "1.0.8",
+    "@storybook/addon-onboarding": "1.0.9",
     "@storybook/addon-storysource": "^7.5.3",
     "@storybook/blocks": "7.5.3",
     "@storybook/preset-create-react-app": "7.5.3",
@@ -52,7 +52,7 @@
     "@types/echarts": "4.9.22",
     "@types/eslint": "8.44.8",
     "@types/jest": "26.0.24",
-    "@types/node": "16.18.66",
+    "@types/node": "16.18.68",
     "@types/react": "17.0.65",
     "@types/react-dom": "17.0.20",
     "@types/react-outside-click-handler": "^1.3.0",
@@ -125,5 +125,8 @@
     "*.{ts,tsx}": "eslint --cache --fix",
     "*.{ts,tsx,json,html,scss}": "prettier --write",
     "*.{scss,css,tsx}": "stylelint --fix"
+  },
+  "peerDependencies": {
+    "react-dev-utils": "*"
   }
 }

src/App.tsx

@@ -4,7 +4,7 @@ import { DefaultTheme, ThemeProvider } from 'styled-components'
 import Routers from './routes'
 import Toast from './components/Toast'
 import { isMainnet } from './utils/chain'
-import { DASQueryContextProvider } from './contexts/providers/dasQuery'
+import { DASQueryContextProvider } from './hooks/useDASAccount'
 import { getPrimaryColor, getSecondaryColor } from './constants/common'
 
 const appStyle = {

src/components/AddressText/index.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react'
 
 import AddressText from '.'
 import styles from './index.stories.module.scss'
-import { useForkedState } from '../../utils/hook'
+import { useForkedState } from '../../hooks'
 
 const meta = {
   component: AddressText,

src/components/AddressText/index.tsx

@@ -2,7 +2,7 @@ import { Tooltip } from 'antd'
 import { ComponentProps, FC } from 'react'
 import classNames from 'classnames'
 import { Link, LinkProps } from 'react-router-dom'
-import { useBoolean } from '../../utils/hook'
+import { useBoolean } from '../../hooks'
 import EllipsisMiddle from '../EllipsisMiddle'
 import CopyTooltipText from '../Text/CopyTooltipText'
 import styles from './styles.module.scss'

src/components/AddressText/styles.module.scss

@@ -1,4 +1,9 @@
 .link {
   flex: 1;
   min-width: 0;
+  color: var(--primary-color);
+
+  &:hover {
+    color: var(--primary-color);
+  }
 }

src/components/Card/Card.module.scss

@@ -0,0 +1,27 @@
+.card {
+  width: 100%;
+  height: auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  padding: 0 40px;
+  background: #fff;
+  box-shadow: 0 4px 4px 0 rgb(16 16 16 / 5%);
+
+  &.rounded {
+    border-radius: 4px;
+  }
+
+  &.roundedTop {
+    border-radius: 4px 4px 0 0;
+  }
+
+  &.roundedBottom {
+    border-radius: 0 0 4px 4px;
+  }
+
+  @media (width <= 750px) {
+    padding: 0 16px;
+    box-shadow: 1px 1px 3px 0 #dfdfdf;
+  }
+}

src/components/Card/Card.tsx

@@ -0,0 +1,26 @@
+import { ComponentProps, FC } from 'react'
+import classNames from 'classnames'
+import styles from './Card.module.scss'
+
+export interface CardProps extends ComponentProps<'div'> {
+  rounded?: boolean | 'top' | 'bottom'
+}
+
+export const Card: FC<CardProps> = ({ children, rounded = true, ...elProps }) => {
+  return (
+    <div
+      {...elProps}
+      className={classNames(
+        styles.card,
+        {
+          [styles.rounded]: rounded === true,
+          [styles.roundedTop]: rounded === 'top',
+          [styles.roundedBottom]: rounded === 'bottom',
+        },
+        elProps.className,
+      )}
+    >
+      {children}
+    </div>
+  )
+}

src/components/Card/CardCell.module.scss

@@ -0,0 +1,51 @@
+.cardCell {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 20px;
+
+  .left {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+
+    .icon {
+      width: 48px;
+      height: 48px;
+    }
+
+    .icon + .title {
+      margin-left: 8px;
+    }
+
+    .title {
+      display: flex;
+      align-items: center;
+      font-size: 16px;
+      color: rgb(0 0 0 / 60%);
+    }
+  }
+
+  .right {
+    margin-left: 15px;
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    color: #000;
+    min-width: 0;
+  }
+
+  @media (width <= 750px) {
+    flex-direction: column;
+    justify-content: initial;
+    align-items: initial;
+    height: auto;
+    padding: 16px 0;
+
+    .right {
+      margin-left: 0;
+      word-wrap: break-word;
+      word-break: break-all;
+    }
+  }
+}

src/components/Card/CardCell.tsx

@@ -0,0 +1,39 @@
+import { ComponentProps, FC, ReactNode } from 'react'
+import { TooltipProps } from 'antd'
+import classNames from 'classnames'
+import styles from './CardCell.module.scss'
+import { HelpTip } from '../HelpTip'
+
+export interface CardCellProps extends Omit<ComponentProps<'div'>, 'title' | 'content'> {
+  icon?: ReactNode
+  title: ReactNode
+  tooltip?: TooltipProps['title']
+  content: ReactNode
+  contentWrapperClass?: string
+  contentTooltip?: TooltipProps['title']
+}
+
+export const CardCell: FC<CardCellProps> = ({
+  icon,
+  title,
+  tooltip,
+  content,
+  contentWrapperClass,
+  contentTooltip,
+  ...divProps
+}) => {
+  return (
+    <div {...divProps} className={classNames(styles.cardCell, divProps.className)}>
+      <div className={styles.left}>
+        {icon && <div className={styles.icon}>{icon}</div>}
+        <div className={styles.title}>{title}</div>
+        {tooltip && <HelpTip title={tooltip} />}
+      </div>
+
+      <div className={classNames(styles.right, contentWrapperClass)}>
+        {content}
+        {contentTooltip && <HelpTip title={contentTooltip} />}
+      </div>
+    </div>
+  )
+}