Skip to content

Commit f2f3145

Browse files
Keith-CYKeith-CY
committed
feat(neuron-ui): remove UILayer
1 parent cdc93a0 commit f2f3145

File tree

53 files changed

+826
-725
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+826
-725
lines changed

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

+21-25
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { useEffect, useMemo } from 'react'
22
import { RouteComponentProps } from 'react-router-dom'
33
import { useTranslation } from 'react-i18next'
44
import {
5-
DetailsList,
5+
ShimmeredDetailsList,
66
TextField,
77
IColumn,
88
DetailsListLayoutMode,
@@ -11,17 +11,21 @@ import {
1111
getTheme,
1212
} from 'office-ui-fabric-react'
1313

14-
import { StateWithDispatch } from 'states/stateProvider/reducer'
1514
import { contextMenu } from 'services/remote'
15+
import { StateWithDispatch } from 'states/stateProvider/reducer'
1616

1717
import { useLocalDescription } from 'utils/hooks'
1818
import { MIN_CELL_WIDTH, Routes } from 'utils/const'
1919
import { localNumberFormatter, shannonToCKBFormatter } from 'utils/formatters'
2020

2121
const Addresses = ({
22-
wallet: { addresses = [] },
22+
app: {
23+
loadings: { addressList: isLoading },
24+
},
25+
wallet: { addresses = [], id: walletID },
2326
settings: { showAddressBook = false },
2427
history,
28+
dispatch,
2529
}: React.PropsWithoutRef<StateWithDispatch & RouteComponentProps>) => {
2630
const [t] = useTranslation()
2731
useEffect(() => {
@@ -31,14 +35,17 @@ const Addresses = ({
3135
}, [showAddressBook, history])
3236

3337
const { localDescription, onDescriptionPress, onDescriptionFieldBlur, onDescriptionChange } = useLocalDescription(
38+
'address',
39+
walletID,
3440
useMemo(
3541
() =>
3642
addresses.map(({ address: key = '', description = '' }) => ({
3743
key,
3844
description,
3945
})),
4046
[addresses]
41-
)
47+
),
48+
dispatch
4249
)
4350

4451
const theme = getTheme()
@@ -92,15 +99,17 @@ const Addresses = ({
9299
maxWidth: 350,
93100
isResizable: true,
94101
isCollapsible: false,
95-
onRender: (item?: State.Address, idx?: number) => {
96-
return item && undefined !== idx ? (
102+
onRender: (item?: State.Address) => {
103+
return item ? (
97104
<TextField
98105
borderless
99106
title={item.description}
100-
value={localDescription[idx] || ''}
101-
onKeyPress={onDescriptionPress(idx)}
102-
onBlur={onDescriptionFieldBlur(idx)}
103-
onChange={onDescriptionChange(idx)}
107+
value={
108+
(localDescription.find(local => local.key === item.address) || { description: '' }).description || ''
109+
}
110+
onKeyPress={onDescriptionPress(item.address)}
111+
onBlur={onDescriptionFieldBlur(item.address)}
112+
onChange={onDescriptionChange(item.address)}
104113
styles={(props: ITextFieldStyleProps) => {
105114
return {
106115
root: {
@@ -155,28 +164,15 @@ const Addresses = ({
155164
)
156165

157166
return (
158-
<DetailsList
167+
<ShimmeredDetailsList
168+
enableShimmer={isLoading}
159169
checkboxVisibility={CheckboxVisibility.hidden}
160170
layoutMode={DetailsListLayoutMode.justified}
161171
columns={addressColumns.map(col => ({ ...col, name: t(col.name) }))}
162172
items={addresses}
163173
onItemContextMenu={item => {
164174
contextMenu({ type: 'addressList', id: item.identifier })
165175
}}
166-
styles={{
167-
contentWrapper: {
168-
selectors: {
169-
'.ms-DetailsRow-cell': {
170-
display: 'flex',
171-
alignItems: 'center',
172-
},
173-
'.text-overflow': {
174-
overflow: 'hidden',
175-
textOverflow: 'ellipsis',
176-
},
177-
},
178-
},
179-
}}
180176
/>
181177
)
182178
}

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

+1-3
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,7 @@ import { handleViewError } from 'services/remote'
44

55
const handleError = (error: Error) => {
66
handleViewError(error.toString())
7-
setTimeout(() => {
8-
window.location.reload()
9-
}, 0)
7+
window.location.reload()
108
return { hasError: true }
119
}
1210

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

+4-1
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,9 @@ registerIcons({
3434
})
3535

3636
const History = ({
37+
app: {
38+
loadings: { transactionList: isLoading },
39+
},
3740
wallet: { id },
3841
chain: {
3942
transactions: { pageNo = 1, pageSize = 15, totalCount = 0, items = [] },
@@ -64,7 +67,7 @@ const History = ({
6467
iconProps={{ iconName: 'Search', styles: { root: { height: '18px' } } }}
6568
/>
6669
</Stack>
67-
<TransactionList walletID={id} items={items} dispatch={dispatch} />
70+
<TransactionList isLoading={isLoading} walletID={id} items={items} dispatch={dispatch} />
6871
<Pagination
6972
selectedPageIndex={pageNo - 1}
7073
pageCount={Math.ceil(totalCount / pageSize)}

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

+19-24
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import { useState, useEffect, useMemo, useCallback } from 'react'
22

33
import { AppActions, StateDispatch } from 'states/stateProvider/reducer'
4-
import { createNetwork, updateNetwork } from 'services/remote'
5-
import { Message, MAX_NETWORK_NAME_LENGTH, Routes } from 'utils/const'
4+
import { createNetwork, updateNetwork } from 'states/stateProvider/actionCreators'
5+
6+
import { Message, MAX_NETWORK_NAME_LENGTH } from 'utils/const'
67

78
import i18n from 'utils/i18n'
89

@@ -129,7 +130,6 @@ export const useHandleSubmit = (
129130
timestamp: Date.now(),
130131
content: '',
131132
}
132-
let res
133133
if (!name) {
134134
return dispatch({
135135
type: AppActions.AddNotification,
@@ -179,32 +179,27 @@ export const useHandleSubmit = (
179179
},
180180
})
181181
}
182-
res = await createNetwork({
182+
return createNetwork({
183183
name,
184184
remote,
185-
})
186-
} else {
187-
if (networks.some(network => network.name === name && network.id !== id)) {
188-
return dispatch({
189-
type: AppActions.AddNotification,
190-
payload: {
191-
...warning,
192-
content: i18n.t(Message.NetworkNameUsed),
193-
},
194-
})
195-
}
196-
res = await updateNetwork({
197-
networkID: id!,
198-
options: {
199-
name,
200-
remote,
185+
})(dispatch, history)
186+
}
187+
if (networks.some(network => network.name === name && network.id !== id)) {
188+
return dispatch({
189+
type: AppActions.AddNotification,
190+
payload: {
191+
...warning,
192+
content: i18n.t(Message.NetworkNameUsed),
201193
},
202194
})
203195
}
204-
if (res && res.status) {
205-
history.push(Routes.SettingsNetworks)
206-
}
207-
return res
196+
return updateNetwork({
197+
networkID: id!,
198+
options: {
199+
name,
200+
remote,
201+
},
202+
})(dispatch, history)
208203
}, [id, name, remote, networks, history, dispatch])
209204

210205
export default {

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

+31-5
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,20 @@
11
import React, { useCallback, useMemo } from 'react'
2+
import { RouteComponentProps } from 'react-router-dom'
23
import { useTranslation } from 'react-i18next'
34
import { Stack, Text, Label, Modal, TextField, PrimaryButton, DefaultButton } from 'office-ui-fabric-react'
45
import { StateWithDispatch, AppActions } from 'states/stateProvider/reducer'
5-
import actionCreators from 'states/stateProvider/actionCreators'
6-
import { priceToFee } from 'utils/formatters'
6+
import { sendTransaction, deleteWallet, backupWallet } from 'states/stateProvider/actionCreators'
7+
import { priceToFee, CKBToShannonFormatter } from 'utils/formatters'
78

89
const PasswordRequest = ({
910
app: {
1011
send: { txID, outputs, description, price, cycles },
1112
passwordRequest: { walletID = '', actionType = null, password = '' },
1213
},
1314
settings: { wallets = [] },
15+
history,
1416
dispatch,
15-
}: React.PropsWithoutRef<StateWithDispatch>) => {
17+
}: React.PropsWithoutRef<StateWithDispatch & RouteComponentProps>) => {
1618
const [t] = useTranslation()
1719
const wallet = useMemo(() => wallets.find(w => w.id === walletID), [walletID, wallets])
1820
const onDismiss = useCallback(() => {
@@ -25,14 +27,38 @@ const PasswordRequest = ({
2527
const onConfirm = useCallback(() => {
2628
switch (actionType) {
2729
case 'send': {
28-
submitTransaction(txID, walletID, outputs, description, password, priceToFee(price, cycles))(dispatch)
30+
sendTransaction({
31+
id: txID,
32+
walletID,
33+
items: outputs.map(output => ({
34+
address: output.address,
35+
capacity: CKBToShannonFormatter(output.amount, output.unit),
36+
})),
37+
description,
38+
password,
39+
fee: priceToFee(price, cycles),
40+
})(dispatch, history)
41+
break
42+
}
43+
case 'delete': {
44+
deleteWallet({
45+
id: walletID,
46+
password,
47+
})(dispatch)
48+
break
49+
}
50+
case 'backup': {
51+
backupWallet({
52+
id: walletID,
53+
password,
54+
})(dispatch)
2955
break
3056
}
3157
default: {
3258
break
3359
}
3460
}
35-
}, [dispatch, walletID, password, actionType, txID, description, outputs, cycles, price])
61+
}, [dispatch, walletID, password, actionType, txID, description, outputs, cycles, price, history])
3662

3763
const onChange = useCallback(
3864
(_e, value?: string) => {

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const Receive = ({
3232

3333
return (
3434
<>
35-
<Stack horizontal tokens={{ childrenGap: 40 }} padding="20px 0 0 0" horizontalAlign="space-between">
35+
<Stack horizontal tokens={{ childrenGap: 40, padding: '20px 0 0 0' }} horizontalAlign="space-between">
3636
<Stack styles={{ root: { flex: 1 } }}>
3737
<TooltipHost content={t('receive.click-to-copy')} calloutProps={{ gapSpace: 0 }}>
3838
<Stack horizontal horizontalAlign="stretch" tokens={{ childrenGap: 15 }}>

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

+6-3
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,11 @@ export interface TransactionOutput {
3333
}
3434

3535
const Send = ({
36-
app: { send = appState.send },
37-
wallet: { id: walletID = '', sending = false, balance = '' },
36+
app: {
37+
send = appState.send,
38+
loadings: { sending = false },
39+
},
40+
wallet: { id: walletID = '', balance = '' },
3841
dispatch,
3942
history,
4043
match: {
@@ -61,7 +64,7 @@ const Send = ({
6164
)
6265

6366
return (
64-
<Stack verticalFill tokens={{ childrenGap: 15 }} padding="20px 0 0 0">
67+
<Stack verticalFill tokens={{ childrenGap: 15, padding: '20px 0 0 0' }}>
6568
<Stack.Item>
6669
<List
6770
items={send.outputs || []}

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

+26-24
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
33
import {
44
Stack,
55
Text,
6-
DetailsList,
6+
ShimmeredDetailsList,
77
TextField,
88
IColumn,
99
IGroup,
@@ -52,18 +52,31 @@ const onRenderHeader = ({ group }: any) => {
5252
)
5353
}
5454

55-
const TransactionList = ({ items = [] }: { walletID: string; items: State.Transaction[]; dispatch: StateDispatch }) => {
55+
const TransactionList = ({
56+
isLoading = false,
57+
items = [],
58+
walletID,
59+
dispatch,
60+
}: {
61+
isLoading: boolean
62+
walletID: string
63+
items: State.Transaction[]
64+
dispatch: StateDispatch
65+
}) => {
5666
const [t] = useTranslation()
5767

5868
const { localDescription, onDescriptionPress, onDescriptionFieldBlur, onDescriptionChange } = useLocalDescription(
69+
'transaction',
70+
walletID,
5971
useMemo(
6072
() =>
6173
items.map(({ hash: key, description = '' }) => ({
6274
key,
6375
description,
6476
})),
6577
[items]
66-
)
78+
),
79+
dispatch
6780
)
6881

6982
const transactionColumns: IColumn[] = useMemo(
@@ -104,14 +117,16 @@ const TransactionList = ({ items = [] }: { walletID: string; items: State.Transa
104117
fieldName: 'description',
105118
minWidth: MIN_CELL_WIDTH,
106119
maxWidth: 200,
107-
onRender: (item?: FormatTransaction, idx?: number) => {
108-
return item && undefined !== idx ? (
120+
onRender: (item?: FormatTransaction) => {
121+
return item ? (
109122
<TextField
110123
title={item.description}
111-
value={localDescription[idx] || ''}
112-
onKeyPress={onDescriptionPress(idx)}
113-
onBlur={onDescriptionFieldBlur(idx)}
114-
onChange={onDescriptionChange(idx)}
124+
value={
125+
(localDescription.find(local => local.key === item.hash) || { description: '' }).description || ''
126+
}
127+
onKeyPress={onDescriptionPress(item.hash)}
128+
onBlur={onDescriptionFieldBlur(item.hash)}
129+
onChange={onDescriptionChange(item.hash)}
115130
borderless
116131
styles={(props: ITextFieldStyleProps) => {
117132
return {
@@ -180,7 +195,8 @@ const TransactionList = ({ items = [] }: { walletID: string; items: State.Transa
180195
}, [items])
181196

182197
return (
183-
<DetailsList
198+
<ShimmeredDetailsList
199+
enableShimmer={isLoading}
184200
columns={transactionColumns}
185201
items={txs}
186202
groups={groups.filter(group => group.count !== 0)}
@@ -193,20 +209,6 @@ const TransactionList = ({ items = [] }: { walletID: string; items: State.Transa
193209
contextMenu({ type: 'transactionList', id: item.hash })
194210
}
195211
}}
196-
styles={{
197-
contentWrapper: {
198-
selectors: {
199-
'.ms-DetailsRow-cell': {
200-
display: 'flex',
201-
alignItems: 'center',
202-
},
203-
'.text-overflow': {
204-
overflow: 'hidden',
205-
textOverflow: 'ellipsis',
206-
},
207-
},
208-
},
209-
}}
210212
/>
211213
)
212214
}

0 commit comments

Comments
 (0)