From 1c6a307bcd49ecada97fb778bf1677ef27dfca69 Mon Sep 17 00:00:00 2001 From: Matthew Russell Date: Mon, 25 Sep 2023 17:26:40 -0400 Subject: [PATCH] fix(wallet): reduce time to check for wallet running [main] (#4876) --- .../src/connect-dialog/connect-dialog.tsx | 3 +- .../src/use-is-wallet-service-running.spec.ts | 41 ++++++++++++++++ .../src/use-is-wallet-service-running.ts | 39 +++++++++++++++ .../src/use-is-wallet-service-running.tsx | 47 ------------------- 4 files changed, 81 insertions(+), 49 deletions(-) create mode 100644 libs/wallet/src/use-is-wallet-service-running.spec.ts create mode 100644 libs/wallet/src/use-is-wallet-service-running.ts delete mode 100644 libs/wallet/src/use-is-wallet-service-running.tsx diff --git a/libs/wallet/src/connect-dialog/connect-dialog.tsx b/libs/wallet/src/connect-dialog/connect-dialog.tsx index f96e5ecee..ab10380ae 100644 --- a/libs/wallet/src/connect-dialog/connect-dialog.tsx +++ b/libs/wallet/src/connect-dialog/connect-dialog.tsx @@ -155,8 +155,7 @@ const ConnectDialogContainer = ({ const isDesktopWalletRunning = useIsWalletServiceRunning( walletUrl, - connectors['jsonRpc'], - appChainId + connectors['jsonRpc'] ); const snapStatus = useSnapStatus( diff --git a/libs/wallet/src/use-is-wallet-service-running.spec.ts b/libs/wallet/src/use-is-wallet-service-running.spec.ts new file mode 100644 index 000000000..a5dc49297 --- /dev/null +++ b/libs/wallet/src/use-is-wallet-service-running.spec.ts @@ -0,0 +1,41 @@ +import { renderHook, waitFor } from '@testing-library/react'; +import { JsonRpcConnector } from './connectors'; +import { useIsWalletServiceRunning } from './use-is-wallet-service-running'; + +describe('useIsWalletServiceRunning', () => { + it('returns true if wallet is running', async () => { + const url = 'https://foo.bar.com'; + const connector = new JsonRpcConnector(); + const spyOnCheckCompat = jest + .spyOn(connector, 'checkCompat') + .mockResolvedValue(true); + const { result } = renderHook(() => + useIsWalletServiceRunning(url, connector) + ); + + expect(result.current).toBe(null); + + await waitFor(() => { + expect(spyOnCheckCompat).toHaveBeenCalled(); + expect(result.current).toBe(true); + }); + }); + + it('returns false if wallet is not running', async () => { + const url = 'https://foo.bar.com'; + const connector = new JsonRpcConnector(); + const spyOnCheckCompat = jest + .spyOn(connector, 'checkCompat') + .mockRejectedValue(false); + const { result } = renderHook(() => + useIsWalletServiceRunning(url, connector) + ); + + expect(result.current).toBe(null); + + await waitFor(() => { + expect(spyOnCheckCompat).toHaveBeenCalled(); + expect(result.current).toBe(false); + }); + }); +}); diff --git a/libs/wallet/src/use-is-wallet-service-running.ts b/libs/wallet/src/use-is-wallet-service-running.ts new file mode 100644 index 000000000..5c03f38be --- /dev/null +++ b/libs/wallet/src/use-is-wallet-service-running.ts @@ -0,0 +1,39 @@ +import { useEffect, useState } from 'react'; +import type { JsonRpcConnector } from './connectors'; + +export const useIsWalletServiceRunning = ( + url: string, + connector: JsonRpcConnector | undefined +) => { + const [isRunning, setIsRunning] = useState(null); + + useEffect(() => { + if (!connector) return; + + if (url && url !== connector.url) { + connector.url = url; + } + + const check = async () => { + try { + // we are not checking wallet compatibility here, only that the wallet is running + await connector.checkCompat(); + setIsRunning(true); + } catch { + setIsRunning(false); + } + }; + + // check immediately + check(); + + // check every second for quick feedback to the user + const interval = setInterval(check, 1000); + + return () => { + clearInterval(interval); + }; + }, [connector, url]); + + return isRunning; +}; diff --git a/libs/wallet/src/use-is-wallet-service-running.tsx b/libs/wallet/src/use-is-wallet-service-running.tsx deleted file mode 100644 index 799b50aa1..000000000 --- a/libs/wallet/src/use-is-wallet-service-running.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { useCallback, useEffect, useState } from 'react'; -import type { JsonRpcConnector } from './connectors'; -import { ClientErrors } from './connectors'; - -export const useIsWalletServiceRunning = ( - url: string, - connector: JsonRpcConnector | undefined, - appChainId: string -) => { - const [run, setRun] = useState(null); - - const checkState = useCallback(async () => { - if (!connector) return false; - - if (url && url !== connector.url) { - connector.url = url; - } - - try { - await connector.checkCompat(); - const chainIdResult = await connector.getChainId(); - if (chainIdResult.chainID !== appChainId) { - throw ClientErrors.WRONG_NETWORK; - } - } catch (e) { - return false; - } - return true; - }, [connector, url, appChainId]); - - useEffect(() => { - if (!connector) return; - - let interval: NodeJS.Timeout; - checkState().then((value) => { - setRun(value); - interval = setInterval(async () => { - setRun(await checkState()); - }, 1000 * 10); - }); - return () => { - clearInterval(interval); - }; - }, [checkState, connector]); - - return run; -};