feat(neuron-ui): remove UILayer

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

@@ -2,7 +2,7 @@ import React, { useEffect, useMemo } from 'react'
 import { RouteComponentProps } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import {
-  DetailsList,
+  ShimmeredDetailsList,
   TextField,
   IColumn,
   DetailsListLayoutMode,
@@ -11,17 +11,21 @@ import {
   getTheme,
 } from 'office-ui-fabric-react'
 
-import { StateWithDispatch } from 'states/stateProvider/reducer'
 import { contextMenu } from 'services/remote'
+import { StateWithDispatch } from 'states/stateProvider/reducer'
 
 import { useLocalDescription } from 'utils/hooks'
 import { MIN_CELL_WIDTH, Routes } from 'utils/const'
 import { localNumberFormatter, shannonToCKBFormatter } from 'utils/formatters'
 
 const Addresses = ({
-  wallet: { addresses = [] },
+  app: {
+    loadings: { addressList: isLoading },
+  },
+  wallet: { addresses = [], id: walletID },
   settings: { showAddressBook = false },
   history,
+  dispatch,
 }: React.PropsWithoutRef<StateWithDispatch & RouteComponentProps>) => {
   const [t] = useTranslation()
   useEffect(() => {
@@ -31,14 +35,17 @@ const Addresses = ({
   }, [showAddressBook, history])
 
   const { localDescription, onDescriptionPress, onDescriptionFieldBlur, onDescriptionChange } = useLocalDescription(
+    'address',
+    walletID,
     useMemo(
       () =>
         addresses.map(({ address: key = '', description = '' }) => ({
           key,
           description,
         })),
       [addresses]
-    )
+    ),
+    dispatch
   )
 
   const theme = getTheme()
@@ -92,15 +99,17 @@ const Addresses = ({
         maxWidth: 350,
         isResizable: true,
         isCollapsible: false,
-        onRender: (item?: State.Address, idx?: number) => {
-          return item && undefined !== idx ? (
+        onRender: (item?: State.Address) => {
+          return item ? (
             <TextField
               borderless
               title={item.description}
-              value={localDescription[idx] || ''}
-              onKeyPress={onDescriptionPress(idx)}
-              onBlur={onDescriptionFieldBlur(idx)}
-              onChange={onDescriptionChange(idx)}
+              value={
+                (localDescription.find(local => local.key === item.address) || { description: '' }).description || ''
+              }
+              onKeyPress={onDescriptionPress(item.address)}
+              onBlur={onDescriptionFieldBlur(item.address)}
+              onChange={onDescriptionChange(item.address)}
               styles={(props: ITextFieldStyleProps) => {
                 return {
                   root: {
@@ -155,28 +164,15 @@ const Addresses = ({
   )
 
   return (
-    <DetailsList
+    <ShimmeredDetailsList
+      enableShimmer={isLoading}
       checkboxVisibility={CheckboxVisibility.hidden}
       layoutMode={DetailsListLayoutMode.justified}
       columns={addressColumns.map(col => ({ ...col, name: t(col.name) }))}
       items={addresses}
       onItemContextMenu={item => {
         contextMenu({ type: 'addressList', id: item.identifier })
       }}
-      styles={{
-        contentWrapper: {
-          selectors: {
-            '.ms-DetailsRow-cell': {
-              display: 'flex',
-              alignItems: 'center',
-            },
-            '.text-overflow': {
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-            },
-          },
-        },
-      }}
     />
   )
 }

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

@@ -4,9 +4,7 @@ import { handleViewError } from 'services/remote'
 
 const handleError = (error: Error) => {
   handleViewError(error.toString())
-  setTimeout(() => {
-    window.location.reload()
-  }, 0)
+  window.location.reload()
   return { hasError: true }
 }
 

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

@@ -34,6 +34,9 @@ registerIcons({
 })
 
 const History = ({
+  app: {
+    loadings: { transactionList: isLoading },
+  },
   wallet: { id },
   chain: {
     transactions: { pageNo = 1, pageSize = 15, totalCount = 0, items = [] },
@@ -64,7 +67,7 @@ const History = ({
           iconProps={{ iconName: 'Search', styles: { root: { height: '18px' } } }}
         />
       </Stack>
-      <TransactionList walletID={id} items={items} dispatch={dispatch} />
+      <TransactionList isLoading={isLoading} walletID={id} items={items} dispatch={dispatch} />
       <Pagination
         selectedPageIndex={pageNo - 1}
         pageCount={Math.ceil(totalCount / pageSize)}

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

@@ -1,8 +1,9 @@
 import { useState, useEffect, useMemo, useCallback } from 'react'
 
 import { AppActions, StateDispatch } from 'states/stateProvider/reducer'
-import { createNetwork, updateNetwork } from 'services/remote'
-import { Message, MAX_NETWORK_NAME_LENGTH, Routes } from 'utils/const'
+import { createNetwork, updateNetwork } from 'states/stateProvider/actionCreators'
+
+import { Message, MAX_NETWORK_NAME_LENGTH } from 'utils/const'
 
 import i18n from 'utils/i18n'
 
@@ -129,7 +130,6 @@ export const useHandleSubmit = (
       timestamp: Date.now(),
       content: '',
     }
-    let res
     if (!name) {
       return dispatch({
         type: AppActions.AddNotification,
@@ -179,32 +179,27 @@ export const useHandleSubmit = (
           },
         })
       }
-      res = await createNetwork({
+      return createNetwork({
         name,
         remote,
-      })
-    } else {
-      if (networks.some(network => network.name === name && network.id !== id)) {
-        return dispatch({
-          type: AppActions.AddNotification,
-          payload: {
-            ...warning,
-            content: i18n.t(Message.NetworkNameUsed),
-          },
-        })
-      }
-      res = await updateNetwork({
-        networkID: id!,
-        options: {
-          name,
-          remote,
+      })(dispatch, history)
+    }
+    if (networks.some(network => network.name === name && network.id !== id)) {
+      return dispatch({
+        type: AppActions.AddNotification,
+        payload: {
+          ...warning,
+          content: i18n.t(Message.NetworkNameUsed),
         },
       })
     }
-    if (res && res.status) {
-      history.push(Routes.SettingsNetworks)
-    }
-    return res
+    return updateNetwork({
+      networkID: id!,
+      options: {
+        name,
+        remote,
+      },
+    })(dispatch, history)
   }, [id, name, remote, networks, history, dispatch])
 
 export default {

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

@@ -1,18 +1,20 @@
 import React, { useCallback, useMemo } from 'react'
+import { RouteComponentProps } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import { Stack, Text, Label, Modal, TextField, PrimaryButton, DefaultButton } from 'office-ui-fabric-react'
 import { StateWithDispatch, AppActions } from 'states/stateProvider/reducer'
-import actionCreators from 'states/stateProvider/actionCreators'
-import { priceToFee } from 'utils/formatters'
+import { sendTransaction, deleteWallet, backupWallet } from 'states/stateProvider/actionCreators'
+import { priceToFee, CKBToShannonFormatter } from 'utils/formatters'
 
 const PasswordRequest = ({
   app: {
     send: { txID, outputs, description, price, cycles },
     passwordRequest: { walletID = '', actionType = null, password = '' },
   },
   settings: { wallets = [] },
+  history,
   dispatch,
-}: React.PropsWithoutRef<StateWithDispatch>) => {
+}: React.PropsWithoutRef<StateWithDispatch & RouteComponentProps>) => {
   const [t] = useTranslation()
   const wallet = useMemo(() => wallets.find(w => w.id === walletID), [walletID, wallets])
   const onDismiss = useCallback(() => {
@@ -25,14 +27,38 @@ const PasswordRequest = ({
   const onConfirm = useCallback(() => {
     switch (actionType) {
       case 'send': {
-        submitTransaction(txID, walletID, outputs, description, password, priceToFee(price, cycles))(dispatch)
+        sendTransaction({
+          id: txID,
+          walletID,
+          items: outputs.map(output => ({
+            address: output.address,
+            capacity: CKBToShannonFormatter(output.amount, output.unit),
+          })),
+          description,
+          password,
+          fee: priceToFee(price, cycles),
+        })(dispatch, history)
+        break
+      }
+      case 'delete': {
+        deleteWallet({
+          id: walletID,
+          password,
+        })(dispatch)
+        break
+      }
+      case 'backup': {
+        backupWallet({
+          id: walletID,
+          password,
+        })(dispatch)
         break
       }
       default: {
         break
       }
     }
-  }, [dispatch, walletID, password, actionType, txID, description, outputs, cycles, price])
+  }, [dispatch, walletID, password, actionType, txID, description, outputs, cycles, price, history])
 
   const onChange = useCallback(
     (_e, value?: string) => {

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

@@ -32,7 +32,7 @@ const Receive = ({
 
   return (
     <>
-      <Stack horizontal tokens={{ childrenGap: 40 }} padding="20px 0 0 0" horizontalAlign="space-between">
+      <Stack horizontal tokens={{ childrenGap: 40, padding: '20px 0 0 0' }} horizontalAlign="space-between">
         <Stack styles={{ root: { flex: 1 } }}>
           <TooltipHost content={t('receive.click-to-copy')} calloutProps={{ gapSpace: 0 }}>
             <Stack horizontal horizontalAlign="stretch" tokens={{ childrenGap: 15 }}>

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

@@ -33,8 +33,11 @@ export interface TransactionOutput {
 }
 
 const Send = ({
-  app: { send = appState.send },
-  wallet: { id: walletID = '', sending = false, balance = '' },
+  app: {
+    send = appState.send,
+    loadings: { sending = false },
+  },
+  wallet: { id: walletID = '', balance = '' },
   dispatch,
   history,
   match: {
@@ -61,7 +64,7 @@ const Send = ({
   )
 
   return (
-    <Stack verticalFill tokens={{ childrenGap: 15 }} padding="20px 0 0 0">
+    <Stack verticalFill tokens={{ childrenGap: 15, padding: '20px 0 0 0' }}>
       <Stack.Item>
         <List
           items={send.outputs || []}

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

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
 import {
   Stack,
   Text,
-  DetailsList,
+  ShimmeredDetailsList,
   TextField,
   IColumn,
   IGroup,
@@ -52,18 +52,31 @@ const onRenderHeader = ({ group }: any) => {
   )
 }
 
-const TransactionList = ({ items = [] }: { walletID: string; items: State.Transaction[]; dispatch: StateDispatch }) => {
+const TransactionList = ({
+  isLoading = false,
+  items = [],
+  walletID,
+  dispatch,
+}: {
+  isLoading: boolean
+  walletID: string
+  items: State.Transaction[]
+  dispatch: StateDispatch
+}) => {
   const [t] = useTranslation()
 
   const { localDescription, onDescriptionPress, onDescriptionFieldBlur, onDescriptionChange } = useLocalDescription(
+    'transaction',
+    walletID,
     useMemo(
       () =>
         items.map(({ hash: key, description = '' }) => ({
           key,
           description,
         })),
       [items]
-    )
+    ),
+    dispatch
   )
 
   const transactionColumns: IColumn[] = useMemo(
@@ -104,14 +117,16 @@ const TransactionList = ({ items = [] }: { walletID: string; items: State.Transa
           fieldName: 'description',
           minWidth: MIN_CELL_WIDTH,
           maxWidth: 200,
-          onRender: (item?: FormatTransaction, idx?: number) => {
-            return item && undefined !== idx ? (
+          onRender: (item?: FormatTransaction) => {
+            return item ? (
               <TextField
                 title={item.description}
-                value={localDescription[idx] || ''}
-                onKeyPress={onDescriptionPress(idx)}
-                onBlur={onDescriptionFieldBlur(idx)}
-                onChange={onDescriptionChange(idx)}
+                value={
+                  (localDescription.find(local => local.key === item.hash) || { description: '' }).description || ''
+                }
+                onKeyPress={onDescriptionPress(item.hash)}
+                onBlur={onDescriptionFieldBlur(item.hash)}
+                onChange={onDescriptionChange(item.hash)}
                 borderless
                 styles={(props: ITextFieldStyleProps) => {
                   return {
@@ -180,7 +195,8 @@ const TransactionList = ({ items = [] }: { walletID: string; items: State.Transa
   }, [items])
 
   return (
-    <DetailsList
+    <ShimmeredDetailsList
+      enableShimmer={isLoading}
       columns={transactionColumns}
       items={txs}
       groups={groups.filter(group => group.count !== 0)}
@@ -193,20 +209,6 @@ const TransactionList = ({ items = [] }: { walletID: string; items: State.Transa
           contextMenu({ type: 'transactionList', id: item.hash })
         }
       }}
-      styles={{
-        contentWrapper: {
-          selectors: {
-            '.ms-DetailsRow-cell': {
-              display: 'flex',
-              alignItems: 'center',
-            },
-            '.text-overflow': {
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-            },
-          },
-        },
-      }}
     />
   )
 }