Skip to content

Commit 3115751

Browse files
committed
Merge branch 'frontend-warning-turning-off-watchonly' into staging-watchonly
2 parents e2ea023 + 33dc354 commit 3115751

File tree

3 files changed

+58
-31
lines changed

3 files changed

+58
-31
lines changed

frontends/web/src/locales/en/app.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1103,7 +1103,9 @@
11031103
},
11041104
"watchonly": {
11051105
"description": "Let's you see your accounts and portfolio without the BitBox02. The BitBox02 is still needed for signing.",
1106-
"title": "Watch-only"
1106+
"title": "Watch-only",
1107+
"warning": "This will remove all your watch-only accounts. To see them again, you will need to plug in your BitBox02. Do you want to continue?",
1108+
"warningTitle": "Disable watch-only"
11071109
}
11081110
}
11091111
},

frontends/web/src/routes/settings/components/appearance/watchonlySetting.tsx

Lines changed: 55 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,14 @@ import { SettingsItem } from '../settingsItem/settingsItem';
2121
import * as backendAPI from '../../../../api/backend';
2222
import { useLoad } from '../../../../hooks/api';
2323
import { getConfig } from '../../../../utils/config';
24+
import { Dialog, DialogButtons } from '../../../../components/dialog/dialog';
25+
import { Button } from '../../../../components/forms';
2426

2527
export const WatchonlySetting = () => {
2628
const { t } = useTranslation();
2729
const [disabled, setDisabled] = useState<boolean>(false);
2830
const [watchonly, setWatchonly] = useState<boolean>();
31+
const [warningDialogOpen, setWarningDialogOpen] = useState(false);
2932
const config = useLoad(getConfig);
3033

3134
useEffect(() => {
@@ -35,37 +38,63 @@ export const WatchonlySetting = () => {
3538
}, [config]);
3639

3740
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);
4144

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;
4650
}
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);
4766
setDisabled(false);
67+
setWarningDialogOpen(false);
4868
};
4969

5070
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+
</>
7099
);
71100
};

frontends/web/src/routes/settings/manage-accounts.tsx

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -171,10 +171,6 @@ class ManageAccounts extends Component<Props, State> {
171171
};
172172

173173
private setWatch = async (accountCode: string, watch: boolean) => {
174-
// TODO: ask user if they really want to proceed if they disable watch-only, if its keystore is
175-
// not currently loaded. Disabling watch-only in this case immediately removes the account from
176-
// the sidebar and manage accounts and cannot be brought back without connecting the keystore.
177-
178174
const result = await backendAPI.accountSetWatch(accountCode, watch);
179175
if (result.success) {
180176
await this.fetchAccounts();

0 commit comments

Comments
 (0)