diff --git a/frontends/web/src/locales/en/app.json b/frontends/web/src/locales/en/app.json index 4c5d7f6647..33eea32164 100644 --- a/frontends/web/src/locales/en/app.json +++ b/frontends/web/src/locales/en/app.json @@ -1348,6 +1348,10 @@ "title": "Language" }, "remebmerWallet": { + "enable": { + "description": "You can now view the accounts associated with this wallet without inserting your BitBox device. However, the BitBox is still required for making transactions and displaying receive addresses.", + "title": "Wallet remembered" + }, "name": "Remember wallet", "warning": "This will remove your remembered wallet. To see it again, you will need to plug in the BitBox02 for this wallet. Any coins on this wallet are not affected. Do you want to continue?", "warningTitle": "Disable remember wallet" diff --git a/frontends/web/src/routes/settings/components/manage-accounts/dialogs/disableRememberWalletDialog.tsx b/frontends/web/src/routes/settings/components/manage-accounts/dialogs/disableRememberWalletDialog.tsx new file mode 100644 index 0000000000..263c3e8985 --- /dev/null +++ b/frontends/web/src/routes/settings/components/manage-accounts/dialogs/disableRememberWalletDialog.tsx @@ -0,0 +1,22 @@ +import { useTranslation } from 'react-i18next'; +import { Dialog, DialogButtons } from '@/components/dialog/dialog'; +import { Button } from '@/components/forms'; + +type Props = { + open: boolean; + onClose: () => void; + onConfirm: () => void; +} +export const DisableRememberWalletDialog = ({ open, onClose, onConfirm }: Props) => { + const { t } = useTranslation(); + + return ( + +

{t('newSettings.appearance.remebmerWallet.warning')}

+ + + + +
+ ); +}; diff --git a/frontends/web/src/routes/settings/components/manage-accounts/dialogs/enableRememberWalletDialog.tsx b/frontends/web/src/routes/settings/components/manage-accounts/dialogs/enableRememberWalletDialog.tsx new file mode 100644 index 0000000000..a43d1c51b8 --- /dev/null +++ b/frontends/web/src/routes/settings/components/manage-accounts/dialogs/enableRememberWalletDialog.tsx @@ -0,0 +1,48 @@ +import { useEffect, useState } from 'react'; +import { useTranslation } from 'react-i18next'; +import { Dialog, DialogButtons } from '@/components/dialog/dialog'; +import { Button, Checkbox } from '@/components/forms'; +import { useLoad } from '@/hooks/api'; +import { getConfig, setConfig } from '@/utils/config'; + +type Props = { + open: boolean; + onClose: () => void; +} +export const EnableRememberWalletDialog = ({ open, onClose }: Props) => { + const { t } = useTranslation(); + const config = useLoad(getConfig); + const [checked, setChecked] = useState(false); + const [shouldNotShowDialog, setShouldNotShowDialog] = useState(false); + + useEffect(() => { + if (config && config.frontend) { + setShouldNotShowDialog(config.frontend.hideEnableRememberWalletDialog); + } + }, [config]); + + if (shouldNotShowDialog) { + return null; + } + + return ( + +

{t('newSettings.appearance.remebmerWallet.enable.description')}

+ setChecked(e.target.checked)} + /> + + + +
+ ); +}; diff --git a/frontends/web/src/routes/settings/components/manage-accounts/watchonlySetting.tsx b/frontends/web/src/routes/settings/components/manage-accounts/watchonlySetting.tsx index 7a9d796413..9984794d07 100644 --- a/frontends/web/src/routes/settings/components/manage-accounts/watchonlySetting.tsx +++ b/frontends/web/src/routes/settings/components/manage-accounts/watchonlySetting.tsx @@ -21,8 +21,9 @@ import * as backendAPI from '@/api/backend'; import * as accountAPI from '@/api/account'; import { useLoad } from '@/hooks/api'; import { getConfig } from '@/utils/config'; -import { Dialog, DialogButtons } from '@/components/dialog/dialog'; -import { Button, Label } from '@/components/forms'; +import { Label } from '@/components/forms'; +import { EnableRememberWalletDialog } from '@/routes/settings/components/manage-accounts/dialogs/enableRememberWalletDialog'; +import { DisableRememberWalletDialog } from '@/routes/settings/components/manage-accounts/dialogs/disableRememberWalletDialog'; import style from './watchonlySettings.module.css'; type Props = { @@ -34,6 +35,7 @@ export const WatchonlySetting = ({ keystore }: Props) => { const [disabled, setDisabled] = useState(false); const [watchonly, setWatchonly] = useState(); const [warningDialogOpen, setWarningDialogOpen] = useState(false); + const [walletRememberedDialogOpen, setWalletRememberedDialogOpen] = useState(false); const config = useLoad(getConfig); useEffect(() => { @@ -49,6 +51,7 @@ export const WatchonlySetting = ({ keystore }: Props) => { if (success) { setWatchonly(!watchonly); + setWalletRememberedDialogOpen(true); } setDisabled(false); return; @@ -74,13 +77,15 @@ export const WatchonlySetting = ({ keystore }: Props) => { return ( <> - -

{t('newSettings.appearance.remebmerWallet.warning')}

- - - - -
+ + setWalletRememberedDialogOpen(false)} + /> { watchonly !== undefined ? (