feat(neuron-ui): add mainnet/testnet addresses toggle

Author: Keith-CY

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

@@ -1,16 +1,20 @@
-import React, { useEffect, useMemo } from 'react'
+import React, { useState, useEffect, useMemo } from 'react'
 import { RouteComponentProps } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import {
+  Stack,
   ShimmeredDetailsList,
   TextField,
   IColumn,
   CheckboxVisibility,
+  DefaultButton,
   IconButton,
+  Text,
   getTheme,
 } from 'office-ui-fabric-react'
 
 import { contextMenu } from 'services/remote'
+import { ckbCore } from 'services/chain'
 import { StateWithDispatch } from 'states/stateProvider/reducer'
 
 import { useLocalDescription } from 'utils/hooks'
@@ -27,6 +31,7 @@ const Addresses = ({
   history,
   dispatch,
 }: React.PropsWithoutRef<StateWithDispatch & RouteComponentProps>) => {
+  const [showMainnetAddress, setShowMainnetAddress] = useState(false)
   const [t] = useTranslation()
   useEffect(() => {
     if (!showAddressBook) {
@@ -181,18 +186,44 @@ const Addresses = ({
         enableShimmer={isLoading}
         checkboxVisibility={CheckboxVisibility.hidden}
         columns={addressColumns.map(col => ({ ...col, name: t(col.name) }))}
-        items={addresses}
+        items={addresses.map(addr => ({
+          ...addr,
+          address: showMainnetAddress
+            ? ckbCore.utils.bech32Address(addr.identifier, {
+                prefix: ckbCore.utils.AddressPrefix.Mainnet,
+                type: ckbCore.utils.AddressType.HashIdx,
+                codeHashIndex: '0x00',
+              }) || ''
+            : addr.address,
+        }))}
         onItemContextMenu={item => {
-          contextMenu({ type: 'addressList', id: item.identifier })
+          if (!showMainnetAddress) {
+            contextMenu({ type: 'addressList', id: item.identifier })
+          }
         }}
         className="listWithDesc"
         onRenderRow={onRenderRow}
       />
     ),
-    [isLoading, addressColumns, addresses, t]
+    [isLoading, addressColumns, addresses, showMainnetAddress, t]
   )
 
-  return List
+  return (
+    <>
+      <Stack verticalAlign="center" horizontalAlign="start" tokens={{ childrenGap: 15 }}>
+        <DefaultButton
+          text={t(`addresses.display-${showMainnetAddress ? 'testnet' : 'mainnet'}-addresses`)}
+          onClick={() => setShowMainnetAddress(!showMainnetAddress)}
+        />
+        {showMainnetAddress ? (
+          <Text variant="medium" style={{ color: semanticColors.errorText }}>
+            {t('addresses.mainnet-address-caution')}
+          </Text>
+        ) : null}
+      </Stack>
+      {List}
+    </>
+  )
 }
 
 Addresses.displayName = 'Addresses'

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

@@ -150,7 +150,10 @@
       "balance": "Balance",
       "transactions": "Transactions",
       "receiving-address": "Receiving Address",
-      "change-address": "Change Address"
+      "change-address": "Change Address",
+      "display-testnet-addresses": "Display Testnet Addresses",
+      "display-mainnet-addresses": "Display Mainnet Addresses",
+      "mainnet-address-caution": "CAUTION: these are the MAINNET addresses"
     },
     "settings": {
       "go-to-overview": "Go to Overview",

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

@@ -150,7 +150,10 @@
       "balance": "余额",
       "transactions": "交易总数",
       "receiving-address": "收款地址",
-      "change-address": "找零地址"
+      "change-address": "找零地址",
+      "display-testnet-addresses": "显示测试网地址",
+      "display-mainnet-addresses": "显示主网地址",
+      "mainnet-address-caution": "请注意, 当前显示的是主网地址"
     },
     "settings": {
       "go-to-overview": "返回总览画面",