Merge branch 'nervosnetwork:develop' into develop

.github/workflows/check-code-style.yml

@@ -31,7 +31,7 @@ jobs:
 
       - name: Changed Files
         id: changed-files
-        uses: tj-actions/changed-files@v41
+        uses: tj-actions/changed-files@v44
         with:
           files: "packages/**/*.{js,cjs,mjs,jsx,ts,tsx,css,scss}"
 

.github/workflows/check_storybook.yml

@@ -9,7 +9,7 @@ jobs:
     strategy:
       matrix:
         node:
-          - 18.12.0
+          - 20.15.1
         os:
           - macos-latest
           - ubuntu-20.04

.github/workflows/merge_released_into_develop.yml

@@ -13,7 +13,7 @@ jobs:
     permissions:
       pull-requests: write
     steps:
-      - uses: actions/checkout@master
+      - uses: actions/checkout@v4
       - name: Request
         uses: repo-sync/pull-request@v2
         with:

.github/workflows/package.yml

@@ -12,7 +12,7 @@ jobs:
     strategy:
       matrix:
         node:
-          - 18.12.0
+          - 20.15.1
         os:
           - macos-latest
           - ubuntu-20.04

.github/workflows/package_for_test.yml

@@ -12,7 +12,7 @@ jobs:
     strategy:
       matrix:
         node:
-          - 18.12.0
+          - 20.15.1
         os:
           - macos-latest
           - ubuntu-20.04

.github/workflows/unit_tests.yml

@@ -9,7 +9,7 @@ jobs:
     strategy:
       matrix:
         node:
-          - 20.11.1
+          - 20.15.1
         os:
           - macos-latest
           - ubuntu-20.04

.github/workflows/update_ckb_client_versions.yml

@@ -20,7 +20,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 18.x
+          node-version: 20.15.1
 
       - name: Update versions
         id: update_versions
@@ -37,7 +37,7 @@ jobs:
           git_commit_gpgsign: true
 
       - name: Open PR to develop branch
-        uses: peter-evans/create-pull-request@v5
+        uses: peter-evans/create-pull-request@v6
         with:
           title: Update ckb client versions
           commit-message: 'feat: update ckb client versions'

.github/workflows/update_neuron_compatible.yml

@@ -23,7 +23,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 20.x
+          node-version: 20.15.1
 
       - name: Update versions
         id: update_versions
@@ -40,7 +40,7 @@ jobs:
           git_commit_gpgsign: true
 
       - name: Open PR to RC branch
-        uses: peter-evans/create-pull-request@v5
+        uses: peter-evans/create-pull-request@v6
         with:
           title: Update Neuron compatibility table
           commit-message: 'feat: Update Neuron compatibility table'

.github/workflows/update_wallet_env.yml

@@ -14,7 +14,7 @@ jobs:
     if: ${{ startsWith(github.ref_name, 'rc/') }}
     steps:
       - name: Create Branch
-        uses: peterjgrainger/action-create-branch@v2.4.0
+        uses: peterjgrainger/action-create-branch@v3.0.0
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
@@ -25,11 +25,11 @@ jobs:
         uses: actions/checkout@v4
         with:
           ref: 'chore-update-wallet-env/${{github.ref_name}}'
-      
+
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: 18.12.0
+          node-version: 20.15.1
 
       - name: Write env file
         run: |

packages/neuron-ui/src/components/NetworkEditorDialog/hooks.ts

@@ -9,6 +9,7 @@ export const useOnSubmit = ({
   id = '',
   name = '',
   remote = '',
+  networkType,
   networks = [],
   callback,
   dispatch,
@@ -18,14 +19,15 @@ export const useOnSubmit = ({
   id: string
   name: string
   remote: string
+  networkType: Controller.NetworkType
   networks: Readonly<State.Network[]>
   callback: () => void
   dispatch: StateDispatch
   disabled: boolean
   setIsUpdating: React.Dispatch<boolean>
 }) =>
   useCallback((): void => {
-    if (disabled) {
+    if (disabled || !networkType) {
       return
     }
     let errorMessage: State.Message<ErrorCode, { fieldName: string; fieldValue?: string; length?: string }> | undefined
@@ -98,6 +100,7 @@ export const useOnSubmit = ({
       createNetwork({
         name,
         remote,
+        type: networkType,
       })(dispatch, callback)
       return
     }

packages/neuron-ui/src/components/NetworkEditorDialog/index.tsx

@@ -5,6 +5,7 @@ import Dialog from 'widgets/Dialog'
 import { validateNetworkName, validateURL } from 'utils'
 import { useState as useGlobalState, useDispatch } from 'states'
 import { isErrorWithI18n } from 'exceptions'
+import { NetworkType } from 'utils/const'
 import { useOnSubmit } from './hooks'
 import styles from './networkEditorDialog.module.scss'
 
@@ -31,6 +32,7 @@ const NetworkEditorDialog = ({
   )
   const [t] = useTranslation()
   const [editor, setEditor] = useState({
+    type: 0,
     name: '',
     nameError: '',
     url: url ?? '',
@@ -39,6 +41,7 @@ const NetworkEditorDialog = ({
   const [isUpdating, setIsUpdating] = useState(false)
 
   const disabled = !!(
+    !editor.type ||
     !editor.name ||
     !editor.url ||
     editor.nameError ||
@@ -50,6 +53,7 @@ const NetworkEditorDialog = ({
   useEffect(() => {
     if (cachedNetwork) {
       setEditor({
+        type: cachedNetwork.type,
         name: cachedNetwork.name,
         nameError: '',
         url: cachedNetwork.remote,
@@ -65,11 +69,14 @@ const NetworkEditorDialog = ({
         dataset: { field = '' },
       } = e.target as HTMLInputElement
       let error = ''
+      let fieldValue: string | number = value
       try {
         if (field === 'name') {
           validateNetworkName(value, usedNetworkNames)
         } else if (field === 'url') {
           validateURL(value)
+        } else if (field === 'type') {
+          fieldValue = Number(value)
         }
       } catch (err) {
         if (isErrorWithI18n(err)) {
@@ -79,7 +86,7 @@ const NetworkEditorDialog = ({
 
       setEditor(state => ({
         ...state,
-        [field]: value,
+        [field]: fieldValue,
         [`${field}Error`]: error,
       }))
     },
@@ -90,6 +97,7 @@ const NetworkEditorDialog = ({
     id: id!,
     name: editor.name,
     remote: editor.url,
+    networkType: editor.type,
     networks,
     callback: onSuccess,
     dispatch,
@@ -109,6 +117,27 @@ const NetworkEditorDialog = ({
       isLoading={isUpdating}
     >
       <div className={styles.container}>
+        <div className={styles.radioGroup}>
+          <p className={styles.label}>{t('settings.network.type')}</p>
+          {[
+            { value: `${NetworkType.Normal}`, label: t('settings.network.full-node') },
+            { value: `${NetworkType.Light}`, label: t('settings.network.light-client-node') },
+          ].map(item => (
+            <div className={styles.radioItem} key={item.value}>
+              <label htmlFor={item.value}>
+                <input
+                  id={item.value}
+                  type="radio"
+                  value={item.value}
+                  data-field="type"
+                  checked={Number(item.value) === editor.type}
+                  onChange={onChange}
+                />
+                <span>{item.label}</span>
+              </label>
+            </div>
+          ))}
+        </div>
         <TextField
           value={editor.url}
           field="url"
@@ -118,6 +147,7 @@ const NetworkEditorDialog = ({
           placeholder={t('settings.network.edit-network.input-rpc')}
           autoFocus
           disabled={!!url}
+          className={styles.rpcItem}
         />
         <TextField
           value={editor.name}

packages/neuron-ui/src/components/NetworkEditorDialog/networkEditorDialog.module.scss

@@ -2,6 +2,48 @@
 
 .container {
   width: 648px;
+
+  .rpcItem {
+    margin-bottom: 10px;
+  }
+
+  .radioGroup {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+    gap: 70px;
+
+    .label {
+      color: var(--secondary-text-color);
+    }
+
+    .radioItem {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 14px 16px;
+      label {
+        padding: 0;
+        cursor: pointer;
+        color: var(--main-text-color);
+      }
+      input[type='radio'] {
+        display: none;
+        margin-right: 8px;
+      }
+      input[type='radio'] + span {
+        display: inline-block;
+        padding-left: 26px;
+        font-size: 14px;
+        line-height: 20px;
+        background: url('../../widgets/Icons/Radio.svg') no-repeat left top;
+        user-select: none;
+      }
+      input[type='radio']:checked + span {
+        background: url('../../widgets/Icons/RadioSelected.svg') no-repeat left top;
+      }
+    }
+  }
 }
 
 .actions {

packages/neuron-ui/src/components/NetworkSetting/index.tsx

@@ -86,9 +86,17 @@ const NetworkSetting = ({ chain = chainState, settings: { networks = [] } }: Sta
     }
   }, [currentId, networks])
 
+  const isInternalLightClient = (network?: State.Network) =>
+    network && network.readonly && network.type === NetworkType.Light
+
   const showNetworks = useMemo(() => {
     const internalLightNodeId = lastShowInternalNodeIds.get(NetworkType.Light)
-    return networks.filter(v => v.type !== NetworkType.Light || v.id === internalLightNodeId)
+    const lastShowNetwork = networks.find(v => v.id === internalLightNodeId)
+    if (isInternalLightClient(lastShowNetwork)) {
+      return networks.filter(network => !isInternalLightClient(network) || network.id === internalLightNodeId)
+    }
+    const index = networks.findIndex(network => isInternalLightClient(network))
+    return networks.filter((network, i) => !isInternalLightClient(network) || index === i)
   }, [currentId, networks])
 
   return (
@@ -111,7 +119,7 @@ const NetworkSetting = ({ chain = chainState, settings: { networks = [] } }: Sta
           ),
           suffix: (
             <div className={styles.suffix}>
-              {currentId === network.id && network.type === NetworkType.Light ? (
+              {currentId === network.id && isInternalLightClient(network) ? (
                 <Tooltip
                   tip={
                     <div>

packages/neuron-ui/src/containers/Main/index.tsx

@@ -37,8 +37,6 @@ const MainContent = () => {
     [network, networks]
   )
 
-  const isLightClientNetwork = network?.type === 2
-
   useSyncChainData({
     chainURL: network?.remote ?? '',
     dispatch,
@@ -100,12 +98,6 @@ const MainContent = () => {
   }, [])
 
   const dialogProps = (function getDialogProps() {
-    if (isLightClientNetwork) {
-      return {
-        onConfirm: onCloseSwitchNetwork,
-        children: t('main.external-node-detected-dialog.external-node-is-light'),
-      }
-    }
     if (sameUrlNetworks.length) {
       return {
         onConfirm: onSwitchNetwork,
@@ -137,7 +129,11 @@ const MainContent = () => {
     return {
       onConfirm: onOpenEditorDialog,
       confirmText: t('main.external-node-detected-dialog.add-network'),
-      children: t('main.external-node-detected-dialog.body-tips-without-network'),
+      children: (
+        <span className={styles.chooseNetworkTip}>
+          {t('main.external-node-detected-dialog.body-tips-without-network')}
+        </span>
+      ),
     }
   })()
 
@@ -172,6 +168,8 @@ const MainContent = () => {
         cancelText={t('main.external-node-detected-dialog.ignore-external-node')}
         title={t('main.external-node-detected-dialog.title')}
         className={styles.networkDialog}
+        confirmProps={{ type: 'dashed' }}
+        cancelProps={{ type: 'dashed' }}
       >
         {dialogProps.children}
       </Dialog>

packages/neuron-ui/src/locales/en.json

@@ -463,7 +463,10 @@
         "lightTestnet": "Light Testnet",
         "lightMainnet": "Light Mainnet",
         "devnet": "Devnet",
-        "switch-network-type": "Switch to {{type}}"
+        "switch-network-type": "Switch to {{type}}",
+        "type": "Type",
+        "full-node": "Full Node",
+        "light-client-node": "Light Client Node"
       },
       "locale": {
         "en": "English",
@@ -1221,12 +1224,11 @@
     },
     "main": {
       "external-node-detected-dialog": {
-        "title": "External node detected",
-        "body-tips-without-network": "\"Internal Node\" is reserved for the built-in CKB node, please add a new network option for the external node.",
-        "body-tips-with-network": "\"Internal Node\" is reserved for the built-in CKB node, please select from the following network options or add a new one for the external node.",
+        "title": "Detected external node",
+        "body-tips-without-network": "You have selected the internal node but started the external node, if you want to continue to use an external node, please add a new network.",
+        "body-tips-with-network": "You have currently selected an internal node but started an external node, if you need to continu using the external node please switch to another external network or add a new network.",
         "add-network": "Add Network",
-        "ignore-external-node": "Ignore external node",
-        "external-node-is-light": "Neuron does not support external light client nodes due to different security assumptions for light clients. Would you like to connect to the \"Light Client\" ?"
+        "ignore-external-node": "Ignore external node"
       },
       "no-disk-space-dialog": {
         "tip": "Due to insufficient disk space, synchronization has been stopped. <br /> Please allocate more disk space or migrate the data to another disk.",