/
index.tsx
101 lines (90 loc) · 2.92 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
import React, { useCallback } from 'react'
import { Route, RouteComponentProps } from 'react-router-dom'
import { useTranslation } from 'react-i18next'
import { Stack, Pivot, PivotItem, IconButton, Text } from 'office-ui-fabric-react'
import { StateWithDispatch } from 'states/stateProvider/reducer'
import GeneralSetting from 'components/GeneralSetting'
import Wallets from 'components/WalletSetting'
import NetworkSetting from 'components/NetworkSetting'
import { WalletWizardPath } from 'components/WalletWizard'
import { Routes } from 'utils/const'
const pivotItems = [
// { label: 'settings.setting-tabs.general', url: Routes.SettingsGeneral },
{ label: 'settings.setting-tabs.wallets', url: Routes.SettingsWallets },
{ label: 'settings.setting-tabs.network', url: Routes.SettingsNetworks },
]
const settingPanels: CustomRouter.Route[] = [
{
name: `GeneralSetting`,
path: Routes.SettingsGeneral,
exact: false,
comp: GeneralSetting,
},
{
name: `WalletsSetting`,
path: Routes.SettingsWallets,
exact: false,
comp: Wallets,
},
{
name: `NetworkSetting`,
path: Routes.SettingsNetworks,
exact: true,
comp: NetworkSetting,
},
]
const Settings = ({
location,
history,
dispatch,
...neuronWalletState
}: React.PropsWithoutRef<StateWithDispatch & RouteComponentProps>) => {
const [t] = useTranslation()
const { id } = neuronWalletState.wallet
const onLeave = useCallback(() => {
return id ? history.push(Routes.Overview) : history.push(`${Routes.WalletWizard}${WalletWizardPath.Welcome}`)
}, [id, history])
return (
<Stack tokens={{ childrenGap: 15 }}>
<Stack horizontal>
<Stack.Item align="center">
<IconButton
iconProps={{ iconName: 'Leave' }}
onClick={onLeave}
styles={{ root: { marginRight: 20 }, flexContainer: { display: 'block', width: '32px' } }}
/>
</Stack.Item>
<Stack.Item align="center">
<Text variant="xLarge" as="h1">
{t('navbar.settings')}
</Text>
</Stack.Item>
</Stack>
<Pivot
selectedKey={location.pathname}
onLinkClick={(pivotItem?: PivotItem) => {
if (pivotItem && pivotItem.props && pivotItem.props.itemKey) {
history.replace(pivotItem.props.itemKey)
}
}}
headersOnly
>
{pivotItems.map(pivotItem => (
<PivotItem key={pivotItem.url} headerText={t(pivotItem.label)} itemKey={pivotItem.url} />
))}
</Pivot>
{settingPanels.map(container => (
<Route
exact={container.exact}
path={`${container.path}${container.params || ''}`}
key={container.name}
render={routerProps => {
return <container.comp {...neuronWalletState} {...routerProps} dispatch={dispatch} />
}}
/>
))}
</Stack>
)
}
Settings.displayName = 'Settings'
export default Settings