@@ -21,11 +21,14 @@ import { SettingsItem } from '../settingsItem/settingsItem';
21
21
import * as backendAPI from '../../../../api/backend' ;
22
22
import { useLoad } from '../../../../hooks/api' ;
23
23
import { getConfig } from '../../../../utils/config' ;
24
+ import { Dialog , DialogButtons } from '../../../../components/dialog/dialog' ;
25
+ import { Button } from '../../../../components/forms' ;
24
26
25
27
export const WatchonlySetting = ( ) => {
26
28
const { t } = useTranslation ( ) ;
27
29
const [ disabled , setDisabled ] = useState < boolean > ( false ) ;
28
30
const [ watchonly , setWatchonly ] = useState < boolean > ( ) ;
31
+ const [ warningDialogOpen , setWarningDialogOpen ] = useState ( false ) ;
29
32
const config = useLoad ( getConfig ) ;
30
33
31
34
useEffect ( ( ) => {
@@ -35,37 +38,63 @@ export const WatchonlySetting = () => {
35
38
} , [ config ] ) ;
36
39
37
40
const toggleWatchonly = async ( ) => {
38
- // TODO: ask user if they really want to proceed if they disable watch-only.
39
- // Disabling watch-only immediately removes all accounts from
40
- // the sidebar and manage accounts and cannot be brought back without connecting the keystore.
41
+ if ( ! watchonly ) {
42
+ setDisabled ( true ) ;
43
+ const { success } = await backendAPI . setWatchonly ( ! watchonly ) ;
41
44
42
- setDisabled ( true ) ;
43
- const { success } = await backendAPI . setWatchonly ( ! watchonly ) ;
44
- if ( success ) {
45
- setWatchonly ( ! watchonly ) ;
45
+ if ( success ) {
46
+ setWatchonly ( ! watchonly ) ;
47
+ }
48
+ setDisabled ( false ) ;
49
+ return ;
46
50
}
51
+
52
+ setWarningDialogOpen ( true ) ;
53
+ setDisabled ( false ) ;
54
+ } ;
55
+
56
+
57
+ const handleCloseDialog = ( ) => {
58
+ setWarningDialogOpen ( false ) ;
59
+ setDisabled ( false ) ;
60
+ } ;
61
+
62
+ const handleConfirmDisableWatchonly = async ( ) => {
63
+ setDisabled ( true ) ;
64
+ await backendAPI . setWatchonly ( false ) ;
65
+ setWatchonly ( false ) ;
47
66
setDisabled ( false ) ;
67
+ setWarningDialogOpen ( false ) ;
48
68
} ;
49
69
50
70
return (
51
- < SettingsItem
52
- settingName = { t ( 'newSettings.appearance.watchonly.title' ) }
53
- secondaryText = { t ( 'newSettings.appearance.watchonly.description' ) }
54
- extraComponent = {
55
- < >
56
- {
57
- watchonly !== undefined ?
58
- (
59
- < Toggle
60
- checked = { watchonly }
61
- disabled = { disabled }
62
- onChange = { toggleWatchonly }
63
- />
64
- ) :
65
- null
66
- }
67
- </ >
68
- }
69
- />
71
+ < >
72
+ < Dialog title = { t ( 'newSettings.appearance.watchonly.warningTitle' ) } medium onClose = { handleCloseDialog } open = { warningDialogOpen } >
73
+ < p > { t ( 'newSettings.appearance.watchonly.warning' ) } </ p >
74
+ < DialogButtons >
75
+ < Button primary onClick = { handleConfirmDisableWatchonly } > { t ( 'dialog.confirm' ) } </ Button >
76
+ < Button secondary onClick = { handleCloseDialog } > { t ( 'dialog.cancel' ) } </ Button >
77
+ </ DialogButtons >
78
+ </ Dialog >
79
+ < SettingsItem
80
+ settingName = { t ( 'newSettings.appearance.watchonly.title' ) }
81
+ secondaryText = { t ( 'newSettings.appearance.watchonly.description' ) }
82
+ extraComponent = {
83
+ < >
84
+ {
85
+ watchonly !== undefined ?
86
+ (
87
+ < Toggle
88
+ checked = { watchonly }
89
+ disabled = { disabled }
90
+ onChange = { toggleWatchonly }
91
+ />
92
+ ) :
93
+ null
94
+ }
95
+ </ >
96
+ }
97
+ />
98
+ </ >
70
99
) ;
71
100
} ;
0 commit comments