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

Author: Keith-CY

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 {