Merge develop into testnet

package.json

@@ -14,7 +14,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",
@@ -39,30 +39,30 @@
   },
   "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-essentials": "7.6.8",
+    "@storybook/addon-interactions": "7.6.8",
+    "@storybook/addon-links": "7.6.8",
     "@storybook/addon-onboarding": "1.0.10",
     "@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.8",
+    "@storybook/preset-create-react-app": "7.6.8",
+    "@storybook/react": "7.6.8",
+    "@storybook/react-webpack5": "7.6.8",
     "@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/lodash.debounce": "4.0.9",
-    "@types/node": "16.18.70",
-    "@types/react": "18.2.47",
+    "@types/node": "16.18.71",
+    "@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.0",
     "antd-dayjs-webpack-plugin": "^1.0.6",
     "babel-plugin-named-exports-order": "0.0.2",
     "create-react-app": "^5.0.0",
@@ -86,7 +86,7 @@
     "react-app-rewired": "2.2.1",
     "react-test-renderer": "^17.0.2",
     "rxjs": "7.8.1",
-    "storybook": "7.6.7",
+    "storybook": "7.6.8",
     "stylelint": "^15.10.1",
     "stylelint-config-css-modules": "^4.3.0",
     "stylelint-config-standard": "^35.0.0",

src/components/Search/index.module.scss

@@ -1,3 +1,5 @@
+@import '../../styles/variables.module';
+
 .byNameOrId {
   // remove original button styles
   border: none;
@@ -15,3 +17,43 @@
   background: #f0f0f0;
   white-space: nowrap;
 }
+
+.searchInputPanel {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  font-size: 14px;
+  padding-left: 10px;
+  padding-right: 20px;
+  background: white;
+  color: #333;
+  border: 0 solid white;
+  border-radius: 4px;
+
+  &:focus {
+    color: #333;
+    outline: none;
+  }
+
+  &::placeholder {
+    color: #888;
+  }
+
+  @media (max-width: $mobileBreakPoint) {
+    font-size: 12px;
+    width: 100%;
+    padding-left: 6px;
+    padding-right: 16px;
+  }
+}
+
+.spinner {
+  margin-left: 8px;
+  animation: rotate 2s linear infinite;
+}
+
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}

src/components/Search/index.tsx

@@ -13,7 +13,7 @@ import { useHistory } from 'react-router'
 import { useTranslation } from 'react-i18next'
 import debounce from 'lodash.debounce'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
-import { ImageButton, SearchInputPanel, SearchPanel, SearchButton, SearchContainer } from './styled'
+import { ImageButton, SearchPanel, SearchButton, SearchContainer } from './styled'
 import { explorerService, Response } from '../../services/ExplorerService'
 import SearchLogo from '../../assets/search_black.png'
 import ClearLogo from '../../assets/clear.png'
@@ -27,6 +27,7 @@ import { SearchResultType } from '../../services/ExplorerService/fetcher'
 import styles from './index.module.scss'
 import { SearchByNameResults } from './SearchByNameResults'
 import { useSearchType } from '../../services/AppSettings/hooks'
+import { ReactComponent as SpinnerIcon } from './spinner.svg'
 
 const handleSearchById = async (
   searchValue: string,
@@ -48,6 +49,7 @@ const handleSearchById = async (
 
   try {
     const { data } = await explorerService.api.fetchSearchByIdResult(addPrefixForHash(query))
+    setInputLoading(false)
     onClear()
 
     const { type, attributes } = data
@@ -174,12 +176,18 @@ const Search: FC<{
   return (
     <SearchContainer>
       <SearchPanel moreHeight={hasButton} hasButton={hasButton}>
-        <ImageButton>
-          <img src={SearchLogo} alt="search logo" />
-        </ImageButton>
+        {inputLoading ? (
+          <SpinnerIcon width="22px" height="22px" className={styles.spinner} />
+        ) : (
+          <ImageButton>
+            <img src={SearchLogo} alt="search logo" />
+          </ImageButton>
+        )}
+
         <SearchInput
           autoFocus={!isMobile}
-          value={inputLoading ? t('search.loading') : keyword}
+          loading={inputLoading}
+          value={keyword}
           onChange={event => setKeyword(event.target.value)}
           onEditEndedChange={setEditEnded}
           placeholder={isSearchByName ? t('navbar.search_by_name_placeholder') : t('navbar.search_placeholder')}
@@ -205,17 +213,21 @@ const Search: FC<{
 const SearchInput: FC<
   ComponentPropsWithoutRef<'input'> & {
     onEditEndedChange?: (editEnded: boolean) => void
+    loading?: boolean
   }
-> = ({ onEditEndedChange, value: propsValue, onChange: propsOnChange, onKeyUp: propsOnKeyUp, ...elprops }) => {
+> = ({ loading, onEditEndedChange, value: propsValue, onChange: propsOnChange, onKeyUp: propsOnKeyUp, ...elprops }) => {
   const [value, setValue] = useForkedState(propsValue)
 
   const onChange: ChangeEventHandler<HTMLInputElement> = useCallback(
     event => {
+      if (loading) {
+        return
+      }
       setValue(event.target.value)
       propsOnChange?.(event)
       onEditEndedChange?.(event.target.value === '')
     },
-    [onEditEndedChange, propsOnChange, setValue],
+    [onEditEndedChange, propsOnChange, setValue, loading],
   )
 
   const onKeyUp: KeyboardEventHandler<HTMLInputElement> = useCallback(
@@ -229,7 +241,7 @@ const SearchInput: FC<
     [onEditEndedChange, propsOnKeyUp],
   )
 
-  return <SearchInputPanel value={value} onChange={onChange} onKeyUp={onKeyUp} {...elprops} />
+  return <input className={styles.searchInputPanel} value={value} onChange={onChange} onKeyUp={onKeyUp} {...elprops} />
 }
 
 export default Search

src/hooks/useDASAccount.tsx

@@ -26,7 +26,7 @@ interface PendingQuery {
 // and logic for aggregating multiple queries can actually be implemented in ExplorerService instead of relying on the Context.
 // However, the current implementation still uses Context because it provides
 // the possibility of implementing page-level and component-level accountMap caching in the future.
-export const DASQueryContextProvider: FC<React.PropsWithChildren> = ({ children }) => {
+export const DASQueryContextProvider: FC<React.PropsWithChildren<{}>> = ({ children }) => {
   const accountMap = useRef<DASAccountMap>({})
   const pendingQueries = useRef<PendingQuery[]>([])
 

src/locales/en.json

@@ -367,7 +367,7 @@
       "args": "Args",
       "hash_type": "Hash Type",
       "overview": "Overview",
-      "user_defined_token": "User Defined Token",
+      "user_defined_token": "Simple User Defined Token",
       "inscription": "Inscription",
       "confirmation": "Confirmation",
       "confirmations": "Confirmations",
@@ -542,7 +542,7 @@
       "deposit_address_tooltip": "Number of addresses with non-zero balance of Nervos DAO"
     },
     "error": {
-      "maintain": "The site is temporarily down for maintenance. Please check back soon.",
+      "maintain": "The current browser data is delayed. Please refer to the ckb node data for accuracy.",
       "page_crashed_tip": "Oops! Some errors were encountered.",
       "back_home": "BACK HOME"
     },

src/locales/zh.json

@@ -367,7 +367,7 @@
       "args": "Args",
       "hash_type": "Hash Type",
       "overview": "概览",
-      "user_defined_token": "User Defined Token",
+      "user_defined_token": "Simple User Defined Token",
       "inscription": "铭文",
       "confirmation": "确认区块",
       "confirmations": "确认区块",
@@ -543,7 +543,7 @@
       "deposit_address_tooltip": "Nervos DAO 锁定余额不为零的地址"
     },
     "error": {
-      "maintain": "网络维护中，请稍后再试",
+      "maintain": "当前浏览器数据滞后，请以 ckb node 的数据为准。",
       "page_crashed_tip": "遇到了一些错误",
       "back_home": "前往首页"
     },

src/pages/Address/AddressComp.tsx

@@ -121,8 +121,9 @@ const AddressLockScript: FC<{ address: Address }> = ({ address }) => {
 }
 
 export const AddressOverviewCard: FC<{ address: Address }> = ({ address }) => {
-  const { t } = useTranslation()
+  const { t, i18n } = useTranslation()
   const { udtAccounts = [] } = address
+  const [activeTab, setActiveTab] = useState<AssetInfo>(AssetInfo.UDT)
 
   const [udts, inscriptions] = udtAccounts.reduce(
     (acc, cur) => {
@@ -195,10 +196,14 @@ export const AddressOverviewCard: FC<{ address: Address }> = ({ address }) => {
 
       {udts.length > 0 || (cotaList?.length && cotaList.length > 0) || inscriptions.length > 0 ? (
         <AddressUDTAssetsPanel className={styles.addressUDTAssetsPanel}>
-          <AddressAssetsTab>
+          <AddressAssetsTab animated={false} key={i18n.language} activeKey={activeTab.toString()}>
             {(udts.length > 0 || cotaList?.length) && (
               <AddressAssetsTabPane
-                tab={<AddressAssetsTabPaneTitle>{t('address.user_defined_token')}</AddressAssetsTabPaneTitle>}
+                tab={
+                  <AddressAssetsTabPaneTitle onClick={() => setActiveTab(AssetInfo.UDT)}>
+                    {t('address.user_defined_token')}
+                  </AddressAssetsTabPaneTitle>
+                }
                 key={AssetInfo.UDT}
               >
                 <div className="addressUdtAssetsGrid">
@@ -235,7 +240,11 @@ export const AddressOverviewCard: FC<{ address: Address }> = ({ address }) => {
             )}
             {inscriptions.length > 0 && (
               <AddressAssetsTabPane
-                tab={<AddressAssetsTabPaneTitle>{t('address.inscription')}</AddressAssetsTabPaneTitle>}
+                tab={
+                  <AddressAssetsTabPaneTitle onClick={() => setActiveTab(AssetInfo.INSCRIPTION)}>
+                    {t('address.inscription')}
+                  </AddressAssetsTabPaneTitle>
+                }
                 key={AssetInfo.INSCRIPTION}
               >
                 <div className="addressUdtAssetsGrid">

src/pages/Address/styled.tsx

@@ -106,6 +106,22 @@ export const AddressAssetsTab = styled(Tabs)`
     }
   }
 
+  /* stylelint-disable-next-line selector-class-pattern */
+  .ant-tabs-tab-remove {
+    &:hover,
+    &:active {
+      color: var(--primary-color);
+    }
+  }
+
+  /* stylelint-disable-next-line selector-class-pattern */
+  .ant-tabs-tab-btn {
+    &:active,
+    &:focus {
+      color: var(--primary-color);
+    }
+  }
+
   /* stylelint-disable-next-line selector-class-pattern */
   .ant-tabs-nav .ant-tabs-ink-bar {
     height: 4px;
@@ -186,6 +202,8 @@ export const AddressUDTItemPanel = styled.a`
   pointer-events: ${(props: { isLink: boolean }) => (props.isLink ? 'auto' : 'none')};
 
   .addressUdtLabel {
+    text-overflow: ellipsis;
+    overflow: hidden;
     text-align: left;
     font-size: 12px;
     padding: 2px 8px;

src/pages/Script/ScriptsComp.tsx

@@ -69,12 +69,7 @@ export const ScriptTransactions = ({ page, size }: { page: number; size: number
             />
           ))
         ) : (
-          <div
-            style={{
-              textAlign: 'center',
-              padding: '20px',
-            }}
-          >
+          <div className={styles.loadingOrEmpty}>
             {transactionsQuery.isLoading && !previousTransactionEmpty ? t('nft.loading') : t(`nft.no_record`)}
           </div>
         )}

src/pages/Script/styles.module.scss

@@ -72,6 +72,13 @@
   }
 }
 
+.loadingOrEmpty {
+  margin-top: 4px;
+  padding: 20px;
+  text-align: center;
+  background: #fff;
+}
+
 .scriptCellsPanel {
   padding: 0 40px;
   margin-top: 4px;