feat: Supports adding light client custom nodes

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,
@@ -172,6 +164,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.",

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

@@ -446,7 +446,10 @@
         "lightTestnet": "Light Testnet",
         "lightMainnet": "Light Mainnet",
         "devnet": "Devnet",
-        "switch-network-type": "Cambiar a {{type}}"
+        "switch-network-type": "Cambiar a {{type}}",
+        "type": "Tipo",
+        "full-node": "Nodo Completo",
+        "light-client-node": "Nodo Cliente Ligero"
       },
       "locale": {
         "en": "English",
@@ -1202,11 +1205,10 @@
     "main": {
       "external-node-detected-dialog": {
         "title": "Nodo externo detectado",
-        "body-tips-without-network": "\"Internal Node\" está reservado para el nodo CKB incorporado, agregue una nueva opción de red para el nodo externo.",
-        "body-tips-with-network": "\"Internal Node\" está reservado para el nodo CKB incorporado, seleccione una de las siguientes opciones de red o agregue una nueva para el nodo externo.",
+        "body-tips-without-network": "Has seleccionado el nodo interno pero has iniciado el nodo externo. Si deseas continuar usando un nodo externo, por favor añade una nueva red.",
+        "body-tips-with-network": "Actualmente has seleccionado un nodo interno pero has iniciado un nodo externo. Si necesitas continuar usando el nodo externo, por favor cambia a otra red externa o añade una nueva red.",
         "add-network": "Agregar red",
-        "ignore-external-node": "Ignorar nodo externo",
-        "external-node-is-light": "Debido a las diferentes suposiciones de seguridad del cliente ligero, Neuron no admite nodos de cliente ligero externos. ¿Desea conectarse a un \"Light Client\" ?"
+        "ignore-external-node": "Ignorar nodo externo"
       },
       "no-disk-space-dialog": {
         "tip": "La sincronización se ha detenido debido a falta de espacio en disco. <br /> Asigne más espacio en disco o migre los datos a otro disco.",

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

@@ -453,7 +453,10 @@
         "lightTestnet": "Testnet léger",
         "lightMainnet": "Mainnet léger",
         "devnet": "Devnet",
-        "switch-network-type": "Basculer vers {{type}}"
+        "switch-network-type": "Basculer vers {{type}}",
+        "type": "Type",
+        "full-node": "Nœud Complet",
+        "light-client-node": "Nœud Client Léger"
       },
       "locale": {
         "en": "English",
@@ -1212,11 +1215,10 @@
     "main": {
       "external-node-detected-dialog": {
         "title": "Détection d'un noeud externe",
-        "body-tips-without-network": "\"Noeud interne\" est réservé au noeud CKB intégré, veuillez ajouter une nouvelle option réseau pour le noeud externe.",
-        "body-tips-with-network": "\"Noeud interne\" est réservé au noeud CKB intégré, veuillez sélectionner parmi les options réseau suivantes ou en ajouter une nouvelle pour le noeud externe.",
+        "body-tips-without-network": "Vous avez sélectionné le nœud interne mais démarré le nœud externe. Si vous souhaitez continuer à utiliser un nœud externe, veuillez ajouter un nouveau réseau.",
+        "body-tips-with-network": "Vous avez actuellement sélectionné un nœud interne mais démarré un nœud externe. Si vous avez besoin de continuer à utiliser le nœud externe, veuillez passer à un autre réseau externe ou ajouter un nouveau réseau.",
         "add-network": "Ajouter un réseau",
-        "ignore-external-node": "Ignorer le noeud externe",
-        "external-node-is-light": "En raison de différentes hypothèses de sécurité du client léger, Neuron ne prend pas en charge les nœuds clients légers externes. Voulez-vous vous connecter à un \"Light Client\" ?"
+        "ignore-external-node": "Ignorer le noeud externe"
       },
       "no-disk-space-dialog": {
         "tip": "En raison d'un espace disque insuffisant, la synchronisation a été interrompue. <br /> Veuillez allouer plus d'espace disque ou migrer les données vers un autre disque.",

packages/neuron-ui/src/locales/zh-tw.json

@@ -457,7 +457,10 @@
         "testnet": "測試網",
         "lightMainnet": "輕節點主網",
         "devnet": "開發網",
-        "switch-network-type": "切換到 {{type}}"
+        "switch-network-type": "切換到 {{type}}",
+        "type": "類型",
+        "full-node": "全節點",
+        "light-client-node": "輕客戶端節點"
       },
       "locale": {
         "en": "English",
@@ -1215,11 +1218,10 @@
     "main": {
       "external-node-detected-dialog": {
         "title": "檢測到外部節點",
-        "body-tips-without-network": "\"Internal Node\" 僅用於連接內置節點，請添加新的網絡選項以連接外部節點。",
-        "body-tips-with-network": "\"Internal Node\" 僅用於連接內置節點，請選擇以下網絡選項或添加新的網絡選項以連接外部節點。",
+        "body-tips-without-network": "您選擇了內部節點，但啟動了外部節點。如果您想繼續使用外部節點，請添加一個新網絡",
+        "body-tips-with-network": "您當前選擇了內部節點，但啟動了外部節點。如果需要繼續使用外部節點，請切換到另一個外部網絡或添加一個新網絡",
         "add-network": "添加網絡",
-        "ignore-external-node": "忽略外部節點",
-        "external-node-is-light": "由於輕客戶端的安全假設不同，Neuron 不支持外部輕客戶端節點。您想連接到 \"Light Client\" 嗎？"
+        "ignore-external-node": "忽略外部節點"
       },
       "no-disk-space-dialog": {
         "tip": "由於磁盤空間不足，同步已停止。 <br /> 請分配更多磁盤空間或將數據遷移到其他磁盤。",

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

@@ -456,7 +456,10 @@
         "lightTestnet": "轻节点测试网",
         "lightMainnet": "轻节点主网",
         "devnet": "开发网",
-        "switch-network-type": "切换到 {{type}}"
+        "switch-network-type": "切换到 {{type}}",
+        "type": "类型",
+        "full-node": "全节点",
+        "light-client-node": "轻客户端节点"
       },
       "locale": {
         "en": "English",
@@ -1214,11 +1217,10 @@
     "main": {
       "external-node-detected-dialog": {
         "title": "检测到外部节点",
-        "body-tips-without-network": "\"Internal Node\" 仅用于连接内置节点，请添加新的网络选项以连接外部节点。",
-        "body-tips-with-network": "\"Internal Node\" 仅用于连接内置节点，请选择以下网络选项或添加新的网络选项以连接外部节点。",
+        "body-tips-without-network": "您选择了内部节点，但启动了外部节点。如果您想继续使用外部节点，请添加一个新网络",
+        "body-tips-with-network": "您当前选择了内部节点，但启动了外部节点。如果需要继续使用外部节点，请切换到另一个外部网络或添加一个新网络",
         "add-network": "添加网络",
-        "ignore-external-node": "忽略外部节点",
-        "external-node-is-light": "由于轻客户端的安全假设不同，Neuron 不支持外部轻客户端节点。您想连接到 \"Light Client\" 吗？"
+        "ignore-external-node": "忽略外部节点"
       },
       "no-disk-space-dialog": {
         "tip": "由于磁盘空间不足，同步已停止。 <br /> 请分配更多磁盘空间或将数据迁移到其他磁盘。",