Optimize token info form

.github/workflows/auto_merge_request.yml

@@ -8,7 +8,7 @@ jobs:
     name: Merge develop into testnet
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: repo-sync/pull-request@v2
         with:
           source_branch: 'develop'
@@ -23,7 +23,7 @@ jobs:
     name: Merge testnet into mainnet
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: repo-sync/pull-request@v2
         with:
           source_branch: 'testnet'
@@ -38,7 +38,7 @@ jobs:
     name: Merge mainnet back to develop
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: repo-sync/pull-request@v2
         with:
           source_branch: 'master'

.github/workflows/check-spelling.yml

@@ -9,5 +9,5 @@ jobs:
     name: Check spelling
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: crate-ci/typos@master

.github/workflows/sync-external-updates.yml

@@ -12,11 +12,11 @@ jobs:
       pull-requests: write # for opening PR
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Open PR from forked repo to origin one
         if: vars.EXTERNAL_REPO != ''
-        uses: actions/script@v6
+        uses: actions/script@v7
         with:
           script: |
             github.rest.pulls.create({

.github/workflows/test.yml

@@ -7,8 +7,8 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version: 18.13.0
       - name: Install dependence

package.json

@@ -6,16 +6,16 @@
     "@ant-design/icons": "4.8.1",
     "@ckb-lumos/base": "0.21.0-next.1",
     "@nervosnetwork/ckb-sdk-utils": "0.109.0",
-    "@sentry/react": "7.65.0",
-    "@sentry/tracing": "7.65.0",
+    "@sentry/react": "7.94.1",
+    "@sentry/tracing": "7.94.1",
     "@spore-sdk/core": "^0.1.0-beta.10",
     "@tanstack/react-query": "4.0.5",
     "antd": "4.24.5",
-    "axios": "1.6.5",
+    "axios": "1.6.7",
     "bignumber.js": "9.1.2",
     "camelcase": "7.0.1",
     "camelcase-keys": "7.0.2",
-    "classnames": "2.3.2",
+    "classnames": "2.5.1",
     "dayjs": "1.11.10",
     "default-passive-events": "2.0.0",
     "echarts": "4.9.0",
@@ -25,7 +25,7 @@
     "jsbi": "3.2.5",
     "lint-staged": "^13.2.3",
     "lodash.debounce": "4.0.8",
-    "moment": "2.29.4",
+    "moment": "2.30.1",
     "observable-hooks": "^4.2.3",
     "react": "17.0.2",
     "react-dom": "17.0.2",
@@ -35,35 +35,35 @@
     "react-router": "5.3.4",
     "react-router-dom": "5.3.4",
     "react-scripts": "5.0.1",
-    "sass": "1.66.1",
+    "sass": "1.70.0",
     "styled-components": "5.3.11"
   },
   "devDependencies": {
-    "@sentry/webpack-plugin": "2.10.2",
-    "@storybook/addon-essentials": "7.6.7",
-    "@storybook/addon-interactions": "7.6.7",
-    "@storybook/addon-links": "7.6.7",
-    "@storybook/addon-onboarding": "1.0.10",
+    "@sentry/webpack-plugin": "2.10.3",
+    "@storybook/addon-essentials": "7.6.10",
+    "@storybook/addon-interactions": "7.6.10",
+    "@storybook/addon-links": "7.6.10",
+    "@storybook/addon-onboarding": "1.0.11",
     "@storybook/addon-storysource": "^7.5.3",
-    "@storybook/blocks": "7.6.7",
-    "@storybook/preset-create-react-app": "7.6.7",
-    "@storybook/react": "7.6.7",
-    "@storybook/react-webpack5": "7.6.7",
+    "@storybook/blocks": "7.6.10",
+    "@storybook/preset-create-react-app": "7.6.10",
+    "@storybook/react": "7.6.10",
+    "@storybook/react-webpack5": "7.6.10",
     "@storybook/testing-library": "0.2.2",
     "@testing-library/react": "12.1.5",
     "@types/echarts": "4.9.22",
     "@types/eslint": "8.56.2",
-    "@types/jest": "29.5.11",
+    "@types/jest": "29.5.12",
     "@types/lodash.debounce": "4.0.9",
-    "@types/node": "16.18.70",
-    "@types/react": "18.2.47",
+    "@types/node": "16.18.76",
+    "@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.32",
     "@typescript-eslint/eslint-plugin": "^6.9.1",
-    "@typescript-eslint/parser": "6.18.1",
+    "@typescript-eslint/parser": "6.19.1",
     "antd-dayjs-webpack-plugin": "^1.0.6",
     "babel-plugin-named-exports-order": "0.0.2",
     "create-react-app": "^5.0.0",
@@ -77,28 +77,28 @@
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-storybook": "^0.6.15",
     "eslint-plugin-unused-imports": "^3.0.0",
-    "husky": "^7.0.1",
+    "husky": "^8.0.0",
     "jest-styled-components": "^7.0.5",
-    "mockdate": "^2.0.5",
+    "mockdate": "^3.0.0",
     "postcss-scss": "4.0.9",
     "postcss-styled-syntax": "^0.6.0",
     "prettier": "^2.8.8",
     "prop-types": "15.8.1",
     "react-app-rewired": "2.2.1",
     "react-test-renderer": "^17.0.2",
     "rxjs": "7.8.1",
-    "storybook": "7.6.7",
-    "stylelint": "^15.10.1",
+    "storybook": "7.6.10",
+    "stylelint": "^16.0.0",
     "stylelint-config-css-modules": "^4.3.0",
     "stylelint-config-standard": "^35.0.0",
     "stylelint-config-standard-scss": "^12.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": "29.1.1",
+    "ts-jest": "29.1.2",
     "typescript": "4.9.5",
-    "webpack": "5.89.0"
+    "webpack": "5.90.1"
   },
   "scripts": {
     "start": "react-app-rewired start",

src/components/Capacity/Capacity.module.scss

@@ -4,6 +4,7 @@
   display: inline-flex;
   align-items: flex-end;
   font-size: 1rem;
+  white-space: nowrap;
 
   span[data-role='dec'] {
     font-size: 0.875em;

src/components/Card/Card.module.scss

@@ -8,7 +8,10 @@
   justify-content: flex-start;
   padding: 0 40px;
   background: #fff;
-  box-shadow: 0 4px 4px 0 rgb(16 16 16 / 5%);
+
+  &.shadow {
+    box-shadow: 0 4px 4px 0 rgb(16 16 16 / 5%);
+  }
 
   &.rounded {
     border-radius: 4px;
@@ -24,6 +27,9 @@
 
   @media (width <= $mobileBreakPoint) {
     padding: 0 16px;
-    box-shadow: 1px 1px 3px 0 #dfdfdf;
+
+    &.shadow {
+      box-shadow: 1px 1px 3px 0 #dfdfdf;
+    }
   }
 }

src/components/Card/Card.tsx

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

src/components/CommonModal/index.module.scss

@@ -12,7 +12,7 @@
 
 .container {
   position: absolute;
-  z-index: 2;
+  z-index: 3;
   top: 150px;
   left: 50%;
   transform: translateX(-50%);

src/components/CommonSelect/index.module.scss

@@ -2,7 +2,7 @@
   position: relative;
   font-size: 14px;
   padding: 11px 8px;
-  margin: 0;
+  margin: 0 0 1rem;
   border-radius: 4px;
   border: 1px solid #e5e5e5;
   background: white;
@@ -17,11 +17,6 @@
   align-items: center;
   width: 100%;
   height: 100%;
-
-  img {
-    width: 16px;
-    height: 16px;
-  }
 }
 
 .options {
@@ -48,38 +43,15 @@
   }
 }
 
-.arrow,
-.arrowTestnet {
-  width: 16px;
-  height: 16px;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-
-.arrowTestnet {
-  background-image: url('../../assets/arrow_down_blue.png');
-}
-
 .arrow {
-  background-image: url('../../assets/arrow_down.png');
-}
+  width: 10px;
+  transition: 0.3s;
 
-.flip {
-  transform: rotate(180deg);
-  animation: rotate-flip 0.3s ease;
+  &[data-is-flipped='true'] {
+    transform: rotateX(180deg);
+  }
 }
 
 .selected {
   background: #f5f5f5;
 }
-
-@keyframes rotate-flip {
-  0% {
-    transform: rotate(0);
-  }
-
-  100% {
-    transform: rotate(-180deg);
-  }
-}

src/components/CommonSelect/index.tsx

@@ -3,31 +3,26 @@ import classNames from 'classnames'
 import { useEffect, useState } from 'react'
 import OutsideClickHandler from 'react-outside-click-handler'
 import styles from './index.module.scss'
-import { isMainnet } from '../../utils/chain'
+import Arrow from '../../assets/arrow_down_black.png'
 
-type OptionType<T> = {
-  value: T
-  label: string
-}
-
-type Props<T> = {
-  options: OptionType<T>[]
-  onChange: (value: T) => void
-  defaultValue?: T
+type Option = Record<'label' | 'value', string>
+type Props = {
+  options: Option[]
+  onChange: (value: string) => void
+  defaultValue?: string
   placeholder?: string
   className?: string
 }
 
-function CommonSelect<T>(props: Props<T>) {
-  const { options, onChange, defaultValue, placeholder, className } = props
+function CommonSelect({ options, onChange, defaultValue, placeholder, className }: Props) {
   const defaultLabel = options.find(option => option.value === defaultValue)?.label
   const [value, setValue] = useState(defaultLabel)
   const [isExpanded, setIsExpanded] = useState(false)
   const toggleExpand = () => {
     setIsExpanded(!isExpanded)
   }
 
-  const handleOptionClick = (option: OptionType<T>) => {
+  const handleOptionClick = (option: Option) => {
     onChange(option.value)
     setValue(option.label)
     toggleExpand()
@@ -82,7 +77,7 @@ function CommonSelect<T>(props: Props<T>) {
       <div className={classNames(styles.select, className)}>
         <div onClick={toggleExpand} className={styles.value}>
           {value ?? placeholder}
-          <div className={classNames(isMainnet() ? styles.arrow : styles.arrowTestnet, isExpanded && styles.flip)} />
+          <img src={Arrow} alt="arrow" className={styles.arrow} data-is-flipped={isExpanded} />
         </div>
         {isExpanded && (
           <div className={styles.options}>

src/components/CsvExport/index.tsx

@@ -4,12 +4,20 @@ import styles from './styles.module.scss'
 import { ReactComponent as ExportIcon } from './export_icon.svg'
 import { SupportedExportTransactionType } from '../../services/ExplorerService'
 
-export function CsvExport({ type, id }: { type: SupportedExportTransactionType; id?: string }) {
+export function CsvExport({
+  type,
+  id,
+  isViewOriginal,
+}: {
+  type: SupportedExportTransactionType
+  id?: string
+  isViewOriginal?: boolean
+}) {
   const [t] = useTranslation()
   return (
     <Link
       className={styles.exportLink}
-      to={`/export-transactions?type=${type}${id ? `&id=${id}` : ''}`}
+      to={`/export-transactions?type=${type}${id ? `&id=${id}` : ''}${isViewOriginal ? '&view=original' : ''}`}
       target="_blank"
     >
       <div>{t(`export_transactions.csv_export`)}</div>

src/components/FilterSortContainer/index.module.scss

@@ -0,0 +1,6 @@
+.filterSortContainerOnMobile {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 20px;
+}

src/components/FilterSortContainer/index.tsx

@@ -0,0 +1,11 @@
+import classNames from 'classnames'
+import { ComponentProps, FC } from 'react'
+import styles from './index.module.scss'
+
+export const FilterSortContainerOnMobile: FC<ComponentProps<'div'>> = ({ children, ...elProps }) => {
+  return (
+    <div {...elProps} className={classNames(styles.filterSortContainerOnMobile, elProps.className)}>
+      {children}
+    </div>
+  )
+}

src/components/Footer/index.module.scss

@@ -1,4 +1,4 @@
-.footerSubmitToken {
+.tokenFormBtn {
   font-size: 18px;
   color: #acacac;
   height: 23px;