diff --git a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/ConfirmUnverifiedAddressModal.tsx b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/ConfirmUnverifiedAddressModal.tsx new file mode 100644 index 000000000000..ae6a4a04483f --- /dev/null +++ b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/ConfirmUnverifiedAddressModal.tsx @@ -0,0 +1,28 @@ +import { useCallback } from 'react'; + +import { openAddressModal, showAddress } from 'src/actions/wallet/receiveActions'; +import { ConfirmUnverifiedModal } from './ConfirmUnverifiedModal'; + +interface ConfirmUnverifiedAddressModalProps { + addressPath: string; + value: string; +} + +export const ConfirmUnverifiedAddressModal = ({ + addressPath, + value, +}: ConfirmUnverifiedAddressModalProps) => { + const verifyProcess = useCallback(() => showAddress(addressPath, value), [addressPath, value]); + const showUnverifiedAddress = () => openAddressModal({ addressPath, value }); + + return ( + + ); +}; diff --git a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/ConfirmUnverifiedModal.tsx b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/ConfirmUnverifiedModal.tsx index 137488ae2459..68329556a600 100644 --- a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/ConfirmUnverifiedModal.tsx +++ b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/ConfirmUnverifiedModal.tsx @@ -1,34 +1,35 @@ import { Translation } from 'src/components/suite'; import { TranslationKey } from 'src/components/suite/Translation'; -import { useDevice, useDispatch } from 'src/hooks/suite'; -import { TrezorDevice } from 'src/types/suite'; +import { useDevice, useDispatch, useSelector } from 'src/hooks/suite'; +import { Dispatch, GetState } from 'src/types/suite'; import { Button, H3, NewModal, Paragraph } from '@trezor/components'; import { onCancel } from 'src/actions/suite/modalActions'; import { selectDeviceLabelOrName } from '@suite-common/wallet-core'; +import { applySettings } from 'src/actions/settings/deviceSettingsActions'; +import { useEffect } from 'react'; interface ConfirmUnverifiedModalProps { action: { - event: () => void; + event: () => (dispatch: Dispatch) => void; title: TranslationKey; closeAfterEventTriggered?: boolean; }; + verifyProcess?: () => (dispatch: Dispatch, getState: GetState) => Promise; warningText: TranslationKey; - device: TrezorDevice; - enablePassphraseAndContinue: () => Promise; } export const ConfirmUnverifiedModal = ({ action, warningText, - device, - enablePassphraseAndContinue, + verifyProcess, }: ConfirmUnverifiedModalProps) => { const deviceLabel = useSelector(selectDeviceLabelOrName); + const { device } = useDevice(); const dispatch = useDispatch(); const { isLocked } = useDevice(); const isDeviceLocked = isLocked(); - const isPassphraseRequired = device.connected && !device.available; + const isPassphraseRequired = device?.connected && !device.available; const deviceStatus = isPassphraseRequired ? 'TR_DEVICE_LABEL_IS_UNAVAILABLE' : 'TR_DEVICE_LABEL_IS_NOT_CONNECTED'; @@ -38,13 +39,27 @@ export const ConfirmUnverifiedModal = ({ const handleClose = () => dispatch(onCancel()); const handleEvent = () => { - action.event(); + dispatch(action.event()); if (action.closeAfterEventTriggered) { handleClose(); } }; + const enablePassphraseAndContinue = async () => { + if (!device?.available) { + const result = await dispatch(applySettings({ use_passphrase: true })); + if (!result || !result.success) return; + } + }; + + // Device connected while the modal is open -> switch to verification modal. + useEffect(() => { + if (device?.connected && verifyProcess) { + dispatch(verifyProcess()); + } + }, [device?.connected, dispatch, verifyProcess]); + return (

- +

> { - type: 'unverified-address' | 'unverified-xpub' | 'unverified-address-proceed'; - addressPath?: string; - value?: string; -} - -export const ConfirmUnverifiedModalContainer = ({ - type, - addressPath, - value, -}: ConfirmUnverifiedModalContainerProps) => { - const { device } = useDevice(); - const dispatch = useDispatch(); - - const showUnverifiedAddress = () => { - if (addressPath && value) { - dispatch(openAddressModal({ addressPath, value })); - } - }; - - const verifyProcess = useCallback(() => { - if (type === 'unverified-address' && addressPath && value) { - dispatch(showAddress(addressPath, value)); - } - - if (type === 'unverified-xpub') { - dispatch(showXpub()); - } - }, [addressPath, value, type, dispatch]); - - const enablePassphraseAndContinue = async () => { - if (!device?.available) { - const result = await dispatch(applySettings({ use_passphrase: true })); - if (!result || !result.success) return; - } - }; - - // Device connected while the modal is open -> switch to verification modal. - useEffect(() => { - if (device?.connected) { - verifyProcess(); - } - }, [device?.connected, dispatch, verifyProcess]); - - if (!device) return null; - - if (type === 'unverified-address-proceed') { - return ( - { - if (value) { - dispatch({ - type: COINMARKET_BUY.VERIFY_ADDRESS, - addressVerified: value, - }); - } - }, - title: 'TR_PROCEED_UNVERIFIED_ADDRESS', - closeAfterEventTriggered: true, - }} - warningText="TR_ADDRESS_PHISHING_WARNING" - device={device} - enablePassphraseAndContinue={enablePassphraseAndContinue} - /> - ); - } - - if (type === 'unverified-xpub') { - return ( - { - dispatch(openXpubModal()); - }, - title: 'TR_SHOW_UNVERIFIED_XPUB', - }} - warningText="TR_XPUB_PHISHING_WARNING" - device={device} - enablePassphraseAndContinue={enablePassphraseAndContinue} - /> - ); - } - - return ( - - ); -}; diff --git a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/ConfirmUnverifiedProceedModal.tsx b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/ConfirmUnverifiedProceedModal.tsx new file mode 100644 index 000000000000..07f6d76fb9cd --- /dev/null +++ b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/ConfirmUnverifiedProceedModal.tsx @@ -0,0 +1,27 @@ +import { ConfirmUnverifiedModal } from './ConfirmUnverifiedModal'; +import { COINMARKET_BUY } from 'src/actions/wallet/constants'; +import { Dispatch } from 'src/types/suite'; + +interface ConfirmUnverifiedProceedModalProps { + value: string; +} + +export const ConfirmUnverifiedProceedModal = ({ value }: ConfirmUnverifiedProceedModalProps) => { + const proceedWithUnverifiedAddress = () => (dispatch: Dispatch) => { + dispatch({ + type: COINMARKET_BUY.VERIFY_ADDRESS, + addressVerified: value, + }); + }; + + return ( + + ); +}; diff --git a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/ConfirmUnverifiedXpubModal.tsx b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/ConfirmUnverifiedXpubModal.tsx new file mode 100644 index 000000000000..2ac4149b6b5d --- /dev/null +++ b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/ConfirmUnverifiedXpubModal.tsx @@ -0,0 +1,20 @@ +import { useCallback } from 'react'; + +import { ConfirmUnverifiedModal } from './ConfirmUnverifiedModal'; +import { openXpubModal, showXpub } from 'src/actions/wallet/publicKeyActions'; + +export const ConfirmUnverifiedXpubModal = () => { + const event = useCallback(() => openXpubModal(), []); + const verifyProcess = useCallback(() => showXpub(), []); + + return ( + + ); +}; diff --git a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/UserContextModal.tsx b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/UserContextModal.tsx index 251b26ce97ba..4d757eb60bc9 100644 --- a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/UserContextModal.tsx +++ b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/UserContextModal.tsx @@ -37,7 +37,9 @@ import { ClaimModal, CopyAddressModal, UnhideTokenModal, - ConfirmUnverifiedModalContainer, + ConfirmUnverifiedAddressModal, + ConfirmUnverifiedXpubModal, + ConfirmUnverifiedProceedModal, } from 'src/components/suite/modals'; import type { AcquiredDevice } from 'src/types/suite'; import type { ReduxModalProps } from '../ReduxModal'; @@ -69,23 +71,15 @@ export const UserContextModal = ({ ); case 'unverified-address': return ( - ); case 'unverified-xpub': - return ; + return ; case 'unverified-address-proceed': - return ( - - ); + return ; case 'address': return ; case 'xpub': diff --git a/packages/suite/src/components/suite/modals/index.tsx b/packages/suite/src/components/suite/modals/index.tsx index 250076b5d187..48d18ddb9401 100644 --- a/packages/suite/src/components/suite/modals/index.tsx +++ b/packages/suite/src/components/suite/modals/index.tsx @@ -17,7 +17,9 @@ export { TransactionReviewModal } from './ReduxModal/TransactionReviewModal/Tran export { ImportTransactionModal } from './ReduxModal/UserContextModal/ImportTransactionModal/ImportTransactionModal'; export { ConfirmEvmExplanationModal } from './ConfirmEvmExplanationModal'; export { ConfirmUnverifiedModal } from './ReduxModal/UserContextModal/ConfirmUnverifiedModal'; -export { ConfirmUnverifiedModalContainer } from './ReduxModal/UserContextModal/ConfirmUnverifiedModalContainer'; +export { ConfirmUnverifiedAddressModal } from './ReduxModal/UserContextModal/ConfirmUnverifiedAddressModal'; +export { ConfirmUnverifiedXpubModal } from './ReduxModal/UserContextModal/ConfirmUnverifiedXpubModal'; +export { ConfirmUnverifiedProceedModal } from './ReduxModal/UserContextModal/ConfirmUnverifiedProceedModal'; export { AddAccountModal } from './ReduxModal/UserContextModal/AddAccountModal/AddAccountModal'; export { QrScannerModal } from './ReduxModal/UserContextModal/QrScannerModal'; export { BackgroundGalleryModal } from './ReduxModal/UserContextModal/BackgroundGalleryModal';