feat: discriminate chain type by the result of rpc.getBlockchainInfo …

…method

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

@@ -32,7 +32,8 @@ const Addresses = ({
   history,
   dispatch,
 }: React.PropsWithoutRef<StateWithDispatch & RouteComponentProps>) => {
-  const isMainnet = (networks.find(n => n.id === networkID) || {}).type === 'mainnet'
+  const isMainnet =
+    (networks.find(n => n.id === networkID) || {}).chain === (process.env.REACT_APP_MAINNET_TAG || 'ckb')
   const [showMainnetAddress, setShowMainnetAddress] = useState(false)
   const [t] = useTranslation()
   useEffect(() => {

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

@@ -1,13 +1,16 @@
 import React, { useMemo, useRef } from 'react'
 import { RouteComponentProps } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
-import { Stack, PrimaryButton, DefaultButton, TextField } from 'office-ui-fabric-react'
+import { Stack, PrimaryButton, DefaultButton, TextField, Spinner } from 'office-ui-fabric-react'
 
 import { StateWithDispatch } from 'states/stateProvider/reducer'
 import { useGoBack } from 'utils/hooks'
 import { useInitialize, useInputs, useNetworkEditor, useIsInputsValid, useHandleSubmit } from './hooks'
 
 const NetworkEditor = ({
+  app: {
+    loadings: { network: isUpdating = false },
+  },
   settings: { networks = [] },
   match: {
     params: { id = '' },
@@ -42,7 +45,13 @@ const NetworkEditor = ({
       </Stack>
       <Stack horizontal horizontalAlign="end" tokens={{ childrenGap: 10 }}>
         <DefaultButton onClick={goBack} text={t('common.cancel')} />
-        <PrimaryButton disabled={hasError || notModified} onClick={handleSubmit} text={t('common.save')} />
+        {isUpdating ? (
+          <PrimaryButton disabled>
+            <Spinner />
+          </PrimaryButton>
+        ) : (
+          <PrimaryButton disabled={hasError || notModified} onClick={handleSubmit} text={t('common.save')} />
+        )}
       </Stack>
     </Stack>
   )

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

@@ -13,6 +13,20 @@ const onContextMenu = (id: string = '') => () => {
   contextMenu({ type: 'networkList', id })
 }
 
+const Label = ({ type, t }: { type: 'ckb' | 'ckb_testnet' | 'ckb_dev' | string; t: any }) => {
+  switch (type) {
+    case 'ckb': {
+      return <span className="label primary">{t('settings.network.mainnet')}</span>
+    }
+    case 'ckb_testnet': {
+      return <span className="label secondary">{t('settings.network.testnet')}</span>
+    }
+    default: {
+      return <span className="label third">{t('settings.network.devnet')}</span>
+    }
+  }
+}
+
 const NetworkSetting = ({
   chain = chainState,
   settings: { networks = [] },
@@ -53,6 +67,7 @@ const NetworkSetting = ({
                     <Text as="span" style={{ color: '#999' }}>
                       {`(${network.remote})`}
                     </Text>
+                    <Label type={network.chain} t={t} />
                   </Stack>
                 )
               },

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

@@ -189,7 +189,10 @@
           "title": "Add or Edit Network",
           "rpc-url": "RPC URL",
           "name": "Name"
-        }
+        },
+        "mainnet": "Mainnet",
+        "testnet": "Testnet",
+        "devnet": "Devnet"
       }
     },
     "password-request": {

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

@@ -189,7 +189,10 @@
           "title": "添加或编辑网络",
           "rpc-url": "RPC地址",
           "name": "名称"
-        }
+        },
+        "mainnet": "主网",
+        "testnet": "测试网",
+        "devnet": "开发网"
       }
     },
     "password-request": {

packages/neuron-ui/src/states/initStates/app.ts

@@ -36,6 +36,7 @@ const appState: State.App = {
     sending: false,
     addressList: false,
     transactionList: false,
+    network: false,
   },
   showTopAlert: false,
   showAllNotifications: false,

packages/neuron-ui/src/states/stateProvider/actionCreators/settings.ts

@@ -26,14 +26,29 @@ export const createNetwork = (params: Controller.CreateNetworkParams) => (dispat
 }
 
 export const updateNetwork = (params: Controller.UpdateNetworkParams) => (dispatch: StateDispatch, history: any) => {
-  updateRemoteNetwork(params).then(res => {
-    if (res.status === 1) {
-      addPopup('update-network-successfully')(dispatch)
-      history.push(Routes.SettingsNetworks)
-    } else {
-      addNotification(failureResToNotification(res))(dispatch)
-    }
+  dispatch({
+    type: AppActions.UpdateLoadings,
+    payload: {
+      network: true,
+    },
   })
+  updateRemoteNetwork(params)
+    .then(res => {
+      if (res.status === 1) {
+        addPopup('update-network-successfully')(dispatch)
+        history.push(Routes.SettingsNetworks)
+      } else {
+        addNotification(failureResToNotification(res))(dispatch)
+      }
+    })
+    .finally(() => {
+      dispatch({
+        type: AppActions.UpdateLoadings,
+        payload: {
+          network: false,
+        },
+      })
+    })
 }
 
 export default {

packages/neuron-ui/src/stories/NetworkSetting.stories.tsx

@@ -8,15 +8,23 @@ import initStates from 'states/initStates'
 const states: { [title: string]: State.Network[] } = {
   'Empty List': [],
   'Content List': [
+    {
+      id: 'Mainnet',
+      name: 'Mainnet',
+      remote: 'http://localhost:8114',
+      chain: 'ckb',
+    },
     {
       id: 'Testnet',
       name: 'Testnet',
       remote: 'http://localhost:8114',
+      chain: 'ckb_testnet',
     },
     {
       id: 'Local',
       name: 'Local',
       remote: 'http://localhost:8114',
+      chain: 'ckb_devnet',
     },
   ],
 }

packages/neuron-ui/src/stories/Overview.stories.tsx

@@ -39,6 +39,7 @@ const stateTemplate = {
         id: 'testnet',
         name: 'Testnet',
         remote: 'http://testnet.nervos.com',
+        chain: 'ckb_testnet',
       },
     ],
   },
@@ -111,6 +112,7 @@ stories.addDecorator(withKnobs).add('With knobs', () => {
           id: text('Network iD', 'testnet'),
           name: text('Network Name', 'Testnet'),
           remote: text('Network Address', 'http://testnet.nervos.com'),
+          chain: text('Chain', 'ckb_testnet'),
         },
       ],
     },

packages/neuron-ui/src/styles/index.scss

@@ -42,6 +42,29 @@ navbar {
   background-color: white;
 }
 
+.label {
+  padding: 3px 4px;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1;
+  color: #fff;
+  border-radius: 2px;
+  box-shadow: inset 0 -1px 0 rgba(27, 31, 35, .12);
+  text-transform: capitalize;
+
+  &.primary {
+    background-color: #6f42c1;
+  }
+
+  &.secondary {
+    background-color: #009688;
+  }
+
+  &.third {
+    background-color: #78909C;
+  }
+}
+
 .form-control,
 .btn {
   &:focus {

packages/neuron-ui/src/types/App/index.d.ts

@@ -87,6 +87,7 @@ declare namespace State {
       sending: boolean
       addressList: boolean
       transactionList: boolean
+      network: boolean
     }
     showTopAlert: boolean
     showAllNotifications: boolean
@@ -96,7 +97,7 @@ declare namespace State {
   interface NetworkProperty {
     name: string
     remote: string
-    type?: 'mainnet' | 'testnet'
+    chain: 'ckb' | 'ckb_testnet' | 'ckb_dev' | string
   }
 
   interface Network extends NetworkProperty {

packages/neuron-wallet/src/env.ts

@@ -43,12 +43,14 @@ const env: ENV = {
         name: 'Testnet',
         remote: 'http://localhost:8114',
         type: 0,
+        chain: 'ckb_testnet',
       },
       {
         id: 'local',
         name: 'Local',
         remote: 'http://localhost:8114',
         type: 1,
+        chain: 'ckb_devnet',
       },
     ],
   },

packages/neuron-wallet/src/services/networks.ts

@@ -1,3 +1,4 @@
+import Core from '@nervosnetwork/ckb-sdk-core'
 import { v4 as uuid } from 'uuid'
 import { BehaviorSubject } from 'rxjs'
 import { LackOfDefaultNetwork, DefaultNetworkUnremovable } from 'exceptions/network'
@@ -92,18 +93,28 @@ export default class NetworksService extends Store {
   public async create(
     @Required name: NetworkName,
     @Required remote: NetworkRemote,
-    type: NetworkType = NetworkType.Normal
+    type: NetworkType = NetworkType.Normal,
   ) {
     const list = await this.getAll()
     if (list.some(item => item.name === name)) {
       throw new UsedName('Network')
     }
+
+    const core = new Core(remote)
+
+    const chain = await core.rpc
+      .getBlockchainInfo()
+      .then(info => info.chain)
+      .catch(() => '')
+
     const newOne = {
       id: uuid(),
       name,
       remote,
       type,
+      chain,
     }
+
     await this.updateAll([...list, newOne])
     return newOne
   }
@@ -115,7 +126,17 @@ export default class NetworksService extends Store {
     if (!network) {
       throw new NetworkNotFound(id)
     }
+
     Object.assign(network, options)
+    if (!options.chain) {
+      const core = new Core(network.remote)
+      const chain = await core.rpc
+        .getBlockchainInfo()
+        .then(info => info.chain)
+        .catch(() => '')
+      network.chain = chain
+    }
+
     this.updateAll(list)
     const currentID = await this.getCurrentID()
     if (currentID === id) {
@@ -145,6 +166,17 @@ export default class NetworksService extends Store {
       throw new NetworkNotFound(id)
     }
     this.writeSync(NetworksKey.Current, id)
+
+    const core = new Core(network.remote)
+
+    const chain = await core.rpc
+      .getBlockchainInfo()
+      .then(info => info.chain)
+      .catch(() => '')
+
+    if (chain && chain !== network.chain) {
+      this.update(id, { chain })
+    }
   }
 
   public getCurrentID = async () => {

packages/neuron-wallet/src/types/network.ts

@@ -5,14 +5,17 @@ export enum NetworksKey {
   List = 'list',
   Current = 'current',
 }
+
 export enum NetworkType {
   Default,
   Normal,
 }
+
 export interface Network {
   name: NetworkName
   remote: NetworkRemote
   type: NetworkType
+  chain: 'ckb' | 'ckb_testnet' | 'ckb_dev' | string // returned by rpc.getBlockchainInfo
 }
 export interface NetworkWithID extends Network {
   id: NetworkID

packages/neuron-wallet/tests/services/networks.test.ts

@@ -20,6 +20,7 @@ describe(`Unit tests of networks service`, () => {
     remote: `http://new-network.localhost.com`,
     type: 0,
     id: '',
+    chain: '',
   }
 
   const newNetworkWithDefaultTypeOf1 = {
@@ -166,14 +167,14 @@ describe(`Unit tests of networks service`, () => {
 
       it(`service.create requires name, and remote`, async () => {
         expect(service.create(undefined as any, undefined as any)).rejects.toThrowError(
-          i18n.t(ERROR_MESSAGE.MISSING_ARG)
+          i18n.t(ERROR_MESSAGE.MISSING_ARG),
         )
         expect(service.create('network name', undefined as any)).rejects.toThrowError(i18n.t(ERROR_MESSAGE.MISSING_ARG))
       })
 
       it(`service.update requires id, options`, () => {
         expect(service.update(undefined as any, undefined as any)).rejects.toThrowError(
-          i18n.t(ERROR_MESSAGE.MISSING_ARG)
+          i18n.t(ERROR_MESSAGE.MISSING_ARG),
         )
         expect(service.update('', undefined as any)).rejects.toThrowError(i18n.t(ERROR_MESSAGE.MISSING_ARG))
       })