refactor(neuron-ui): refactor wallet setting

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

@@ -2,6 +2,7 @@ import React, { useCallback } from 'react'
 import { Container } from 'react-bootstrap'
 import { RouteComponentProps } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
+import { History } from 'history'
 import Table from '../../widgets/Table'
 import { Routes, EXPLORER } from '../../utils/const'
 import { mockAddresses } from './mock'
@@ -41,7 +42,7 @@ const getTransactionsForAddress = (address: string) => {
   return address.length
 }
 
-const AddressPanel = ({ address, history }: { address: string; history: any }) => {
+const AddressPanel = ({ address, history }: { address: string; history: History }) => {
   const [t] = useTranslation()
   const actionItems = [
     {
@@ -79,7 +80,7 @@ const AddressPanel = ({ address, history }: { address: string; history: any }) =
   )
 }
 
-const fetchHDAddresses = (history: any) => {
+const fetchHDAddresses = (history: History) => {
   const addresses = generateHDAddresses().map(address => ({
     type: address.type,
     address: <AddressPanel address={address.address} history={history} />,

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

@@ -5,12 +5,13 @@ import { useTranslation } from 'react-i18next'
 
 import { ContentProps } from '../../containers/MainContent'
 import { Routes } from '../../utils/const'
+import { useNeuronWallet } from '../../utils/hooks'
 import { MainActions, actionCreators } from '../../containers/MainContent/reducer'
 
 import Dialog from '../../widgets/Dialog'
+import ListGroupWithMaxHeight from '../../widgets/ListGroupWithMaxHeight'
 import ContextMenuZone from '../../widgets/ContextMenuZone'
 import RemoveNetworkDialog from './RemoveNetworkDialog'
-import { useNeuronWallet } from '../../utils/hooks'
 
 interface MenuItemParams {
   id: string
@@ -66,20 +67,11 @@ const Networks = (props: React.PropsWithoutRef<ContentProps & RouteComponentProp
   return (
     <>
       <ContextMenuZone menuItems={menuItems}>
-        <ListGroup>
+        <ListGroupWithMaxHeight>
           {networks.map(network => {
-            const isChecked =
-              // chain.network.remote === network.remote && // it will make things too complex
-              chain.network.id === network.id
+            const isChecked = chain.network.id === network.id
             return (
-              <ListGroup.Item
-                key={network.id}
-                style={{
-                  display: 'flex',
-                  justifyContent: 'space-between',
-                }}
-                data-menuitem={JSON.stringify({ id: network.id })}
-              >
+              <ListGroup.Item key={network.id} data-menuitem={JSON.stringify({ id: network.id })}>
                 <Form.Check
                   inline
                   label={network.name || network.remote}
@@ -93,7 +85,7 @@ const Networks = (props: React.PropsWithoutRef<ContentProps & RouteComponentProp
               </ListGroup.Item>
             )
           })}
-        </ListGroup>
+        </ListGroupWithMaxHeight>
       </ContextMenuZone>
       <Link to={`${Routes.NetworkEditor}/new`} className="btn btn-primary">
         {t('settings.network.add-network')}

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

@@ -83,16 +83,20 @@ const ConnectStatusHeader = ({
         selected={networkItems.findIndex(network => network.label === chain.network.name)}
         style={{
           position: 'absolute',
-          top: 'calc(100% + 1px)',
+          top: '100%',
           left: tipNumber === null ? 'auto' : '0',
           right: tipNumber === null ? '0' : 'auto',
           zIndex: '999',
           display: 'none',
+          maxHeight: '50vh',
+          overflowY: 'scroll',
+          border: '1px solid #ddd',
         }}
         itemsStyle={{
           textTransform: 'capitalize',
           boxShadow: '0px 0px 1px rgba(120, 120, 120, 0.5)',
           maxWidth: '200px',
+          minHeight: '48px',
         }}
       />
     </Container>

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

@@ -18,7 +18,7 @@ import Transaction from '../Transaction'
 import Settings from '../Settings'
 import GeneralSetting from '../GeneralSetting'
 import Addresses from '../Addresses'
-import Wallets from '../Settings/Wallets'
+import Wallets from '../WalletSetting'
 import NetworkSetting from '../NetworkSetting'
 import NetworkEditor from '../NetworkEditor'
 import WalletEditor from '../WalletEditor'