Merge branch 'develop' into issue-424

.env.development.example

@@ -1,8 +1,12 @@
 REACT_APP_API_URL=http://your-api-url
 REACT_APP_CHAIN_TYPE=testnet
+REACT_APP_DID_INDEXER_URL=https://indexer-v1.did.id
+REACT_APP_DOBS_SERVICE_URL=https://dobs-api.magickbase.com
 
 # sentry
 REACT_APP_SENTRY_DSN=
 SENTRY_AUTH_TOKEN=
 SENTRY_ORG=
 SENTRY_PROJECT=
+
+REACT_APP_BACKUP_NODES=

.env.production.example

@@ -1,5 +1,7 @@
 REACT_APP_API_URL=http://your-api-url
 REACT_APP_CHAIN_TYPE=mainnet
+REACT_APP_DID_INDEXER_URL=https://indexer-v1.did.id
+REACT_APP_DOBS_SERVICE_URL=https://dobs-api.magickbase.com
 
 # sentry
 REACT_APP_SENTRY_DSN=
@@ -9,3 +11,5 @@ SENTRY_PROJECT=
 
 # google analytics id
 REACT_APP_GA_ID=
+
+REACT_APP_BACKUP_NODES=

.eslintrc.js

@@ -112,6 +112,9 @@ module.exports = {
     '@typescript-eslint/lines-between-class-members': 'off',
     'no-redeclare': 'off',
     '@typescript-eslint/no-redeclare': 'error',
+    'jsx-a11y/label-has-associated-control': 'off',
+    'jsx-a11y/no-static-element-interactions': 'off',
+    'jsx-a11y/no-noninteractive-element-interactions': 'off',
   },
   env: {
     jest: true,

config-overrides.js

@@ -2,6 +2,7 @@
 const SentryWebpackPlugin = require('@sentry/webpack-plugin')
 const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin')
 const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent')
+const webpack = require('webpack')
 
 module.exports = function override(config) {
   if (config.ignoreWarnings == null) {
@@ -59,6 +60,18 @@ module.exports = function override(config) {
     }
   }
 
+  // for lumos at https://lumos-website.vercel.app/recipes/cra-vite-webpack-or-other#create-react-app
+  config.resolve.fallback = {
+    ...config.resolve.fallback,
+    crypto: require.resolve('crypto-browserify'),
+    buffer: require.resolve('buffer'),
+    path: false,
+    fs: false,
+    stream: false,
+  }
+
+  config.plugins = [...config.plugins, new webpack.ProvidePlugin({ Buffer: ['buffer', 'Buffer'] })]
+
   return config
 }
 

package.json

@@ -4,29 +4,39 @@
   "private": true,
   "dependencies": {
     "@ant-design/icons": "4.8.1",
-    "@ckb-lumos/base": "0.21.0-next.1",
+    "@ckb-lumos/base": "0.22.2",
+    "@ckb-lumos/config-manager": "0.22.2",
+    "@ckb-lumos/helpers": "0.22.2",
     "@microlink/react-json-view": "1.23.0",
     "@nervosnetwork/ckb-sdk-utils": "0.109.1",
+    "@radix-ui/react-icons": "1.3.0",
+    "@radix-ui/react-radio-group": "1.1.3",
+    "@radix-ui/react-tabs": "^1.0.4",
+    "@rgbpp-sdk/ckb": "0.0.0-snap-20240408100333",
     "@sentry/react": "7.94.1",
     "@sentry/tracing": "7.94.1",
-    "@spore-sdk/core": "0.2.0-beta.3",
+    "@spore-sdk/core": "0.2.0-beta.8",
     "@tanstack/react-query": "4.0.5",
     "antd": "4.24.5",
-    "axios": "1.6.7",
+    "axios": "1.6.8",
+    "bech32": "2.0.0",
     "bignumber.js": "9.1.2",
+    "bs58check": "3.0.1",
     "camelcase": "7.0.1",
     "camelcase-keys": "7.0.2",
     "classnames": "2.5.1",
-    "dayjs": "1.11.10",
+    "dayjs": "1.11.11",
     "default-passive-events": "2.0.0",
     "echarts": "4.9.0",
+    "echarts-gl": "1.1.2",
     "history": "5.3.0",
     "i18next": "20.6.1",
     "jsbi": "3.2.5",
     "lint-staged": "^13.2.3",
     "lodash.debounce": "4.0.8",
     "moment": "2.30.1",
     "observable-hooks": "^4.2.3",
+    "qrcode": "1.5.3",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-i18next": "11.18.6",
@@ -39,23 +49,24 @@
     "styled-components": "5.3.11"
   },
   "devDependencies": {
-    "@sentry/webpack-plugin": "2.10.3",
-    "@storybook/addon-essentials": "7.6.10",
-    "@storybook/addon-interactions": "7.6.10",
-    "@storybook/addon-links": "7.6.10",
+    "@sentry/webpack-plugin": "2.16.1",
+    "@storybook/addon-essentials": "7.6.19",
+    "@storybook/addon-interactions": "7.6.19",
+    "@storybook/addon-links": "7.6.19",
     "@storybook/addon-onboarding": "1.0.11",
     "@storybook/addon-storysource": "^7.5.3",
-    "@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/blocks": "7.6.19",
+    "@storybook/preset-create-react-app": "7.6.19",
+    "@storybook/react": "7.6.19",
+    "@storybook/react-webpack5": "7.6.19",
     "@storybook/testing-library": "0.2.2",
     "@testing-library/react": "12.1.5",
     "@types/echarts": "4.9.22",
-    "@types/eslint": "8.56.2",
+    "@types/eslint": "8.56.10",
     "@types/jest": "29.5.12",
     "@types/lodash.debounce": "4.0.9",
-    "@types/node": "16.18.79",
+    "@types/node": "16.18.97",
+    "@types/qrcode": "1.5.5",
     "@types/react": "17.0.65",
     "@types/react-dom": "17.0.20",
     "@types/react-outside-click-handler": "^1.3.0",
@@ -66,7 +77,9 @@
     "@typescript-eslint/parser": "6.19.1",
     "antd-dayjs-webpack-plugin": "^1.0.6",
     "babel-plugin-named-exports-order": "0.0.2",
+    "buffer": "^6.0.3",
     "create-react-app": "^5.0.0",
+    "crypto-browserify": "^3.12.0",
     "eslint": "8.56.0",
     "eslint-config-airbnb": "18.2.1",
     "eslint-config-prettier": "9.1.0",
@@ -87,7 +100,7 @@
     "react-app-rewired": "2.2.1",
     "react-test-renderer": "^17.0.2",
     "rxjs": "7.8.1",
-    "storybook": "7.6.10",
+    "storybook": "7.6.19",
     "stylelint": "^16.0.0",
     "stylelint-config-css-modules": "^4.3.0",
     "stylelint-config-standard": "^35.0.0",

src/App.tsx

@@ -6,6 +6,7 @@ import Toast from './components/Toast'
 import { isMainnet } from './utils/chain'
 import { DASQueryContextProvider } from './hooks/useDASAccount'
 import { getPrimaryColor, getSecondaryColor } from './constants/common'
+import Decoder from './components/Decoder'
 
 const appStyle = {
   width: '100vw',
@@ -25,16 +26,19 @@ const App = () => {
   )
 
   return (
-    <ThemeProvider theme={theme}>
-      <div style={appStyle} data-net={isMainnet() ? 'mainnet' : 'testnet'}>
-        <QueryClientProvider client={queryClient}>
-          <DASQueryContextProvider>
-            <Routers />
-            <Toast />
-          </DASQueryContextProvider>
-        </QueryClientProvider>
-      </div>
-    </ThemeProvider>
+    <>
+      <ThemeProvider theme={theme}>
+        <div style={appStyle} data-net={isMainnet() ? 'mainnet' : 'testnet'}>
+          <QueryClientProvider client={queryClient}>
+            <DASQueryContextProvider>
+              <Routers />
+              <Toast />
+            </DASQueryContextProvider>
+          </QueryClientProvider>
+        </div>
+      </ThemeProvider>
+      <Decoder />
+    </>
   )
 }
 

src/__tests__/utils/date.test.ts

@@ -4,7 +4,6 @@ import {
   formatData,
   parseTime,
   parseTimeNoSecond,
-  parseDateNoTime,
   parseDiffDate,
   parseHourFromMinute,
   parseHourFromMillisecond,
@@ -35,16 +34,6 @@ describe('Date methods tests', () => {
     expect(parseTimeNoSecond(19895691)).toBe('5 h 31 m')
   })
 
-  it('parse date no time', async () => {
-    expect(parseDateNoTime(1588734510)).toBe('2020/05/06')
-    expect(parseDateNoTime(1588734510, true)).toBe('05/06')
-    expect(parseDateNoTime(1576157854)).toBe('2019/12/12')
-    expect(parseDateNoTime(1576157854, false)).toBe('2019/12/12')
-    expect(parseDateNoTime(1576157854, true)).toBe('12/12')
-    expect(parseDateNoTime(1576157854, false, '-')).toBe('2019-12-12')
-    expect(parseDateNoTime(1576157854, true, '-')).toBe('12-12')
-  })
-
   it('parse diff date', async () => {
     expect(parseDiffDate(1577110366093, 1579568429375)).toBe('28 days 10 hrs')
     expect(() => {

src/__tests__/utils/spore.test.ts

@@ -17,17 +17,27 @@ describe('Parse Spore cell data', () => {
     globalThis.TextDecoder = undefined as any
   })
 
-  it('parse spore cell data', async () => {
+  it('parse spore cell data of webp', async () => {
     const result = parseSporeCellData(sporeCellData)
 
     expect(result.contentType).toBe('image/webp')
-    expect(result.clusterId).toBe('0xd4d9d5b2ba21d63f0e6f9f4bb811397fceaf088722fd951b42b8a164269672')
+    expect(result.clusterId).toBe('0xd4d9d5b2ba21d63f0e6f9f4bb811397fceaf088722fd951b42b8a1642696724b')
+  })
+
+  it('parse spore cell data of text', () => {
+    // https://docs.spore.pro/recipes/Data/handle-spore-data
+    const DATA =
+      '0x58000000100000001e000000340000000a000000746578742f706c61696e1200000074657374696e6720706c61696e20746578742000000021a30f2b2f4927dbd6fd3917990af0dbb868438f44184e84d515f9af84ae4861'
+    const result = parseSporeCellData(DATA)
+    expect(result.contentType).toBe('text/plain')
+    expect(result.content).toBe('74657374696e6720706c61696e2074657874')
+    expect(result.clusterId).toBe('0x21a30f2b2f4927dbd6fd3917990af0dbb868438f44184e84d515f9af84ae4861')
   })
 
   it('parse spore cluster data', async () => {
     const result = parseSporeClusterData(sporeClusterData)
 
     expect(result.name).toBe('CKBExplorer')
-    expect(result.description).toBe('For Tes')
+    expect(result.description).toBe('For Test')
   })
 })

src/assets/fonts/fonts.css

@@ -6,6 +6,11 @@
 }
 
 @font-face {
-  font-family:digital-clock-font;
+  font-family: digital-clock-font;
   src: url('./digital-7.ttf');
 }
+
+@font-face {
+  font-family: Roboto;
+  src: url('./Roboto-Regular.ttf');
+}

src/components/AddressText/index.tsx

@@ -17,6 +17,8 @@ const AddressText: FC<{
   linkProps?: LinkProps
   monospace?: boolean
   useTextWidthForPlaceholderWidth?: boolean
+  style?: React.CSSProperties
+  onClick?: () => void
 }> = ({
   children: address,
   fontKey,
@@ -26,6 +28,8 @@ const AddressText: FC<{
   linkProps,
   monospace = true,
   useTextWidthForPlaceholderWidth = true,
+  style,
+  onClick,
 }) => {
   const [isTruncated, truncatedCtl] = useBoolean(false)
 
@@ -36,6 +40,8 @@ const AddressText: FC<{
       title={<CopyTooltipText content={address} />}
     >
       <EllipsisMiddle
+        onClick={onClick}
+        style={style}
         useTextWidthForPlaceholderWidth={useTextWidthForPlaceholderWidth}
         fontKey={fontKey}
         className={classNames(
@@ -52,7 +58,7 @@ const AddressText: FC<{
     </Tooltip>
   )
 
-  if (linkProps != null) {
+  if (linkProps != null && linkProps.to !== window.location.pathname) {
     const { className, ...props } = linkProps
     return (
       <Link className={classNames(styles.link, containerClass, className)} {...props}>

src/components/AddressText/styles.module.scss

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