refactor(neuron-ui): complement hook deps in several components, remo…

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

@@ -1,11 +1,12 @@
-import React, { useCallback } from 'react'
+import React, { useCallback, useMemo } from 'react'
 import { Container } from 'react-bootstrap'
 import { RouteComponentProps } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import { History } from 'history'
-import { Routes, EXPLORER } from 'utils/const'
+
 import Table from 'widgets/Table'
 import ContextMenuZone from 'widgets/ContextMenuZone'
+import { Routes, EXPLORER } from 'utils/const'
 import { useNeuronWallet } from 'utils/hooks'
 
 const headers = [
@@ -29,66 +30,80 @@ const headers = [
 
 const AddressPanel = ({ address, history }: { address: string; history: History }) => {
   const [t] = useTranslation()
-  const actionItems = [
-    {
-      label: t('addresses.actions.copy-address'),
-      click: () => {
-        window.clipboard.writeText(address)
+  const actionItems = useMemo(
+    () => [
+      {
+        label: t('addresses.actions.copy-address'),
+        click: () => {
+          window.clipboard.writeText(address)
+        },
       },
-    },
-    {
-      label: t('addresses.actions.request-payment'),
-      click: () => {
-        window.clipboard.writeText(address)
-        history.push(`${Routes.Receive}/${address}`)
+      {
+        label: t('addresses.actions.request-payment'),
+        click: () => {
+          window.clipboard.writeText(address)
+          history.push(`${Routes.Receive}/${address}`)
+        },
       },
-    },
-    {
-      label: t('addresses.actions.spend-from'),
-      click: () => {
-        window.clipboard.writeText(address)
-        // TODO: navigate to send page with address
+      {
+        label: t('addresses.actions.spend-from'),
+        click: () => {
+          window.clipboard.writeText(address)
+          history.push(`${Routes.Send}/${address}`)
+        },
       },
-    },
-    {
-      label: t('addresses.actions.view-on-explorer'),
-      click: () => {
-        window.clipboard.writeText(address)
-        window.open(EXPLORER)
+      {
+        label: t('addresses.actions.view-on-explorer'),
+        click: () => {
+          window.clipboard.writeText(address)
+          window.open(EXPLORER)
+        },
       },
-    },
-  ]
+    ],
+    [history, address, t],
+  )
+
   return (
     <ContextMenuZone menuItems={actionItems}>
       <span data-menuitem={JSON.stringify({ hash: address })}>{address}</span>
     </ContextMenuZone>
   )
 }
 
-const Addresses = (props: React.PropsWithoutRef<RouteComponentProps>) => {
+const Addresses = ({ history }: React.PropsWithoutRef<RouteComponentProps>) => {
   const {
-    wallet: { addresses },
+    wallet: {
+      addresses: { receiving, change },
+    },
   } = useNeuronWallet()
   const [t] = useTranslation()
-  const [pageNo, pageSize, totalCount] = [0, 20, 20]
   const onPageChange = useCallback(() => {}, [])
-  const { history } = props
 
-  const receivingAddresses = addresses.receiving.map(address => ({
-    type: 'Receiving',
-    address: <AddressPanel address={address} history={history} />,
-    balance: '0',
-    transactions: '0',
-    key: address,
-  }))
+  const receivingAddresses = useMemo(
+    () =>
+      receiving.map(address => ({
+        type: 'Receiving',
+        address: <AddressPanel address={address} history={history} />,
+        balance: '0',
+        transactions: '0',
+        key: address,
+      })),
+    [receiving, history],
+  )
+
+  const changeAddresses = useMemo(
+    () =>
+      change.map(address => ({
+        type: 'Change',
+        address: <AddressPanel address={address} history={history} />,
+        balance: '0',
+        transactions: '0',
+        key: address,
+      })),
+    [change, history],
+  )
 
-  const changeAddresses = addresses.change.map(address => ({
-    type: 'Change',
-    address: <AddressPanel address={address} history={history} />,
-    balance: '0',
-    transactions: '0',
-    key: address,
-  }))
+  const count = useMemo(() => receiving.length + change.length, [receiving, change])
 
   return (
     <Container>
@@ -99,9 +114,9 @@ const Addresses = (props: React.PropsWithoutRef<RouteComponentProps>) => {
           label: t(header.label),
         }))}
         items={[...receivingAddresses, ...changeAddresses]}
-        pageNo={pageNo}
-        pageSize={pageSize}
-        totalCount={totalCount}
+        pageNo={0}
+        pageSize={count}
+        totalCount={count}
         onPageChange={onPageChange}
         tableAttrs={{
           bordered: false,

packages/neuron-ui/src/components/NetworkEditor/hooks.ts

@@ -21,12 +21,16 @@ export const useNetworkEditor = (
 ) => {
   const [name, setName] = useState(currentName)
   const [remote, setRemote] = useState(currentRemote)
-
-  return {
-    initiate: ({ name: initName, remote: initRemote }: { name: string; remote: string }) => {
+  const initialize = useCallback(
+    ({ name: initName, remote: initRemote }: { name: string; remote: string }) => {
       setName(initName)
       setRemote(initRemote)
     },
+    [setName, setRemote],
+  )
+
+  return {
+    initialize,
     name: {
       value: name,
       onChange: (e: React.FormEvent<Pick<any, string>>) => {
@@ -48,12 +52,12 @@ type DispatchType = React.Dispatch<{
   payload?: any
 }>
 
-export const useInitiate = (id: string, networks: Network[], editor: EditorType, dispatch: DispatchType) => {
+export const useInitialize = (id: string, networks: Network[], initialize: Function, dispatch: DispatchType) => {
   useEffect(() => {
     if (id !== 'new') {
       const network = networks.find(n => n.id === id)
       if (network) {
-        editor.initiate(network)
+        initialize(network)
       } else {
         dispatch({
           type: MainActions.ErrorMessage,
@@ -71,7 +75,7 @@ export const useInitiate = (id: string, networks: Network[], editor: EditorType,
         },
       })
     }
-  }, [dispatch, id])
+  }, [dispatch, id, initialize, networks])
 }
 
 export const useInputs = (editor: EditorType) => {
@@ -119,7 +123,7 @@ export const useHandleSubmit = (
   }, [id, name, remote, networks, dispatch])
 
 export default {
-  useInitiate,
+  useInitialize,
   useInputs,
   useNetworkEditor,
   useIsInputsValid,

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

@@ -7,7 +7,7 @@ import { ContentProps } from 'containers/MainContent'
 
 import InlineInput, { InputProps } from 'widgets/InlineInput'
 import { useNeuronWallet } from 'utils/hooks'
-import { useInitiate, useInputs, useNetworkEditor, useIsInputsValid, useHandleSubmit } from './hooks'
+import { useInitialize, useInputs, useNetworkEditor, useIsInputsValid, useHandleSubmit } from './hooks'
 
 export interface RawNetwork {
   name: string
@@ -29,7 +29,7 @@ const NetworkEditor = (props: React.PropsWithoutRef<ContentProps & RouteComponen
   } = useNeuronWallet()
   const [t] = useTranslation()
   const inputs: InputProps[] = useInputs(editor)
-  useInitiate(id, networks, editor, dispatch)
+  useInitialize(id, networks, editor.initialize, dispatch)
 
   const cachedNetworks = useRef(networks)
   const cachedNetwork = cachedNetworks.current.find(network => network.id === id)

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

@@ -73,6 +73,7 @@ export const mainContents: CustomRoute[] = [
   {
     name: `Send`,
     path: Routes.Send,
+    params: `/:address?`,
     exact: false,
     component: Send,
   },

packages/neuron-ui/src/components/Transfer/hooks.ts

@@ -0,0 +1,130 @@
+import React, { useCallback, useEffect } from 'react'
+import { History } from 'history'
+import UILayer, { TransferItem } from 'services/UILayer'
+import { MainActions, actionCreators } from 'containers/MainContent/reducer'
+import { Channel, Routes, CapacityUnit } from 'utils/const'
+import initState from 'containers/MainContent/state'
+
+export const useUpdateTransferItem = (dispatch: React.Dispatch<any>) =>
+  useCallback(
+    (field: string) => (idx: number) => (value: string) => {
+      dispatch({
+        type: MainActions.UpdateItemInTransfer,
+        payload: {
+          idx,
+          item: {
+            [field]: value,
+          },
+        },
+      })
+    },
+    [dispatch],
+  )
+
+export const useOnSubmit = (dispatch: React.Dispatch<any>) =>
+  useCallback(
+    (items: TransferItem[]) => () => {
+      dispatch(actionCreators.submitTransfer(items))
+    },
+    [dispatch],
+  )
+
+export const useOnPasswordChange = (dispatch: React.Dispatch<any>) =>
+  useCallback(
+    (e: React.SyntheticEvent<HTMLInputElement>) => {
+      dispatch({
+        type: MainActions.UpdatePassword,
+        payload: e.currentTarget.value,
+      })
+    },
+    [dispatch],
+  )
+
+export const useOnConfirm = (dispatch: React.Dispatch<any>) =>
+  useCallback(
+    (items: TransferItem[], pwd: string) => () => {
+      dispatch({
+        type: MainActions.SetDialog,
+        payload: {
+          open: false,
+        },
+      })
+      dispatch({
+        type: MainActions.UpdatePassword,
+        payload: '',
+      })
+      setTimeout(() => {
+        dispatch(
+          actionCreators.confirmTransfer({
+            items,
+            password: pwd,
+          }),
+        )
+      }, 10)
+    },
+    [dispatch],
+  )
+
+export const useOnItemChange = (updateTransferItem: Function) => (field: string, idx: number) => (
+  e: React.FormEvent<{ value: string }>,
+) => {
+  updateTransferItem(field)(idx)(e.currentTarget.value)
+}
+
+export const useDropdownItems = (updateTransferItem: Function) =>
+  useCallback(
+    (idx: number) =>
+      Object.values(CapacityUnit)
+        .filter(unit => typeof unit === 'string')
+        .map((unit: string) => ({
+          label: unit.toUpperCase(),
+          key: unit,
+          onClick: () => updateTransferItem('unit')(idx)(unit),
+        })),
+    [updateTransferItem],
+  )
+
+export const useInitialize = (
+  address: string,
+  dispatch: React.Dispatch<any>,
+  history: History,
+  updateTransferItem: Function,
+) =>
+  useEffect(() => {
+    if (address) {
+      updateTransferItem('address')(0)(address)
+    }
+    UILayer.on(Channel.SendCapacity, (_e: Event, args: ChannelResponse<string>) => {
+      if (args.status) {
+        history.push(`${Routes.Transaction}/${args.result}`)
+      } else {
+        dispatch({
+          type: MainActions.UpdateTransfer,
+          payload: {
+            submitting: false,
+          },
+        })
+        dispatch({
+          type: MainActions.ErrorMessage,
+          payload: { transfer: args.msg },
+        })
+      }
+    })
+    return () => {
+      UILayer.removeAllListeners(Channel.SendCapacity)
+      dispatch({
+        type: MainActions.UpdateTransfer,
+        payload: initState.transfer,
+      })
+    }
+  }, [address, dispatch, history, updateTransferItem])
+
+export default {
+  useUpdateTransferItem,
+  useOnSubmit,
+  useOnPasswordChange,
+  useOnConfirm,
+  useOnItemChange,
+  useDropdownItems,
+  useInitialize,
+}