diff --git a/packages/suite/src/components/suite/troubleshooting/tips.tsx b/packages/suite/src/components/suite/troubleshooting/tips.tsx index 2037eac7b60..d1a9295ae16 100644 --- a/packages/suite/src/components/suite/troubleshooting/tips.tsx +++ b/packages/suite/src/components/suite/troubleshooting/tips.tsx @@ -7,6 +7,7 @@ import { goto } from 'src/actions/suite/routerActions'; import { typography } from '@trezor/theme'; import styled from 'styled-components'; import { isWebUsb } from 'src/utils/suite/transport'; +import { useOpenSuiteDesktop } from 'src/hooks/suite/useOpenSuiteDesktop'; const Wrapper = styled.div` a { @@ -57,9 +58,7 @@ const BridgeStatus = () => ( ); const BridgeInstall = () => { - const dispatch = useDispatch(); - - const handleClick = () => dispatch(goto('suite-bridge')); + const handleClick = useOpenSuiteDesktop(); return ( diff --git a/packages/suite/src/hooks/suite/useOpenSuiteDesktop.ts b/packages/suite/src/hooks/suite/useOpenSuiteDesktop.ts new file mode 100644 index 00000000000..bd6c14a573a --- /dev/null +++ b/packages/suite/src/hooks/suite/useOpenSuiteDesktop.ts @@ -0,0 +1,26 @@ +import TrezorConnect from '@trezor/connect'; +import { useWindowFocus } from '@trezor/react-utils'; +import { SUITE_BRIDGE_DEEPLINK, SUITE_URL } from '@trezor/urls'; +import { isWebUsb } from 'src/utils/suite/transport'; +import { useSelector } from 'src/hooks/suite'; + +export const useOpenSuiteDesktop = () => { + const transport = useSelector(state => state.suite.transport); + const windowFocused = useWindowFocus(); + const handleOpenSuite = () => { + if (isWebUsb(transport)) { + TrezorConnect.disableWebUSB(); + } + + location.href = SUITE_BRIDGE_DEEPLINK; + + // fallback in case deeplink does not work + window.setTimeout(() => { + if (!windowFocused.current) return; + + window.open(SUITE_URL); + }, 500); + }; + + return handleOpenSuite; +}; diff --git a/packages/suite/src/views/suite/bridge/index.tsx b/packages/suite/src/views/suite/bridge/index.tsx index bae91573ec4..20cc192ccf3 100644 --- a/packages/suite/src/views/suite/bridge/index.tsx +++ b/packages/suite/src/views/suite/bridge/index.tsx @@ -1,12 +1,10 @@ import styled from 'styled-components'; -import { SUITE_BRIDGE_DEEPLINK, SUITE_URL } from '@trezor/urls'; import { Translation, Modal, Metadata } from 'src/components/suite'; import { Button } from '@trezor/components'; import { goto } from 'src/actions/suite/routerActions'; import { useDispatch, useSelector } from 'src/hooks/suite'; import { isWebUsb } from 'src/utils/suite/transport'; -import TrezorConnect from '@trezor/connect'; -import { useWindowFocus } from '@trezor/react-utils'; +import { useOpenSuiteDesktop } from 'src/hooks/suite/useOpenSuiteDesktop'; const StyledButton = styled(Button)` path { @@ -26,21 +24,7 @@ export const BridgeUnavailable = () => { const transport = useSelector(state => state.suite.transport); const dispatch = useDispatch(); - const windowFocused = useWindowFocus(); - const handleOpenSuite = () => { - if (isWebUsb(transport)) { - TrezorConnect.disableWebUSB(); - } - - location.href = SUITE_BRIDGE_DEEPLINK; - - // fallback in case deeplink does not work - window.setTimeout(() => { - if (!windowFocused.current) return; - - window.open(SUITE_URL); - }, 500); - }; + const handleOpenSuite = useOpenSuiteDesktop(); const goToWallet = () => dispatch(goto('wallet-index'));