From ccff5af7998c2d6fda9be6b7af87a7ff70c7eb88 Mon Sep 17 00:00:00 2001 From: Hugo Lopes Date: Wed, 15 Mar 2023 21:03:45 +0000 Subject: [PATCH] Code review fixes --- packages/connect-kit/src/@types/index.d.ts | 7 ++++++ .../ExtensionInstallModal.tsx | 7 +++--- .../UseLedgerLiveModal/UseLedgerLiveModal.tsx | 12 +++++----- packages/connect-kit/src/lib/errors.ts | 23 +++++++++++++------ .../connect-kit/src/providers/ExtensionEvm.ts | 6 ++++- .../src/providers/ExtensionSolana.ts | 6 ++++- .../src/providers/WalletConnectEvm.ts | 10 ++++---- .../src/providers/WalletConnectLegacy.ts | 16 ++++++------- 8 files changed, 56 insertions(+), 31 deletions(-) diff --git a/packages/connect-kit/src/@types/index.d.ts b/packages/connect-kit/src/@types/index.d.ts index 8f36c15..3fd12c5 100644 --- a/packages/connect-kit/src/@types/index.d.ts +++ b/packages/connect-kit/src/@types/index.d.ts @@ -1,3 +1,10 @@ +// The WalletConnect packages are currently not browser safe, there is an +// open issue since 2020 here: WalletConnect/walletconnect-monorepo#341 +// +// The solution is to consume the pre bundled packages and adding these +// declarations. See imports on src/providers/WalletConnectEvm.ts and +// src/providers/WalletConnectLegacy.ts. + declare module '@walletconnect/ethereum-provider/dist/index.umd.js' { import WalletConnectProvider from '@walletconnect/ethereum-provider/dist/index.umd.js'; export default WalletConnectProvider diff --git a/packages/connect-kit/src/components/ExtensionInstallModal/ExtensionInstallModal.tsx b/packages/connect-kit/src/components/ExtensionInstallModal/ExtensionInstallModal.tsx index bd75a86..45b4fd3 100644 --- a/packages/connect-kit/src/components/ExtensionInstallModal/ExtensionInstallModal.tsx +++ b/packages/connect-kit/src/components/ExtensionInstallModal/ExtensionInstallModal.tsx @@ -9,6 +9,7 @@ import { default as LightbulbSvg } from "../../assets/svg/Lightbulb.svg"; import { default as CheckmarkSvg } from "../../assets/svg/Checkmark.svg"; import NeedALedgerSection from "../NeedALedgerSection"; import { getDebugLogger } from "../../lib/logger"; +import { useCallback } from "react"; const log = getDebugLogger('ExtensionInstallModal') @@ -19,12 +20,12 @@ const ExtensionInstallModal = ({ }: ExtensionInstallModalProps) => { log('initializing'); - const onJoinBetaClick = () => { + const onJoinBetaClick = useCallback(() => { window.open("https://get-connect.ledger.com/onboarding", "_blank"); - }; + }, []); return ( - onClose()}> + <> Try Ledger Connect diff --git a/packages/connect-kit/src/components/UseLedgerLiveModal/UseLedgerLiveModal.tsx b/packages/connect-kit/src/components/UseLedgerLiveModal/UseLedgerLiveModal.tsx index c4ecb04..cd5b260 100644 --- a/packages/connect-kit/src/components/UseLedgerLiveModal/UseLedgerLiveModal.tsx +++ b/packages/connect-kit/src/components/UseLedgerLiveModal/UseLedgerLiveModal.tsx @@ -1,4 +1,4 @@ -import { useEffect, useRef, useState } from "react"; +import { useCallback, useEffect, useRef, useState } from "react"; import { getDebugLogger } from "../../lib/logger"; import Modal, { ModalProps, setIsModalOpen } from "../Modal/Modal"; import { @@ -48,7 +48,7 @@ const UseLedgerLiveModal = ({ previousUriRef.current = uri; }); - const onUseLedgerLiveClick = () => { + const onUseLedgerLiveClick = useCallback(() => { log('loading Ledger Live, ', wcUri); window.location.href = `ledgerlive://wc?uri=${encodeURIComponent(wcUri)}`; @@ -56,15 +56,15 @@ const UseLedgerLiveModal = ({ setIsModalOpen(false); return false; - }; + }, [wcUri]); - const onInstallLedgerLiveClick = () => { + const onInstallLedgerLiveClick = useCallback(() => { window.open('https://www.ledger.com/ledger-live'); return false; - }; + }, []); return ( - onClose()}> + Do you have Ledger Live? diff --git a/packages/connect-kit/src/lib/errors.ts b/packages/connect-kit/src/lib/errors.ts index ffc5cc2..56fadbf 100644 --- a/packages/connect-kit/src/lib/errors.ts +++ b/packages/connect-kit/src/lib/errors.ts @@ -2,7 +2,7 @@ export class ProviderNotFoundError extends Error { public constructor() { super(); this.name = this.constructor.name; - this.message = "The Ledger Connect extension was not found."; + this.message = 'The Ledger Extension was not found.'; } } @@ -10,15 +10,16 @@ export class ProviderTypeIsNotSupportedError extends Error { public constructor() { super(); this.name = this.constructor.name; - this.message = "The specified provider is not supported."; + this.message = 'The specified provider is not supported.'; } } export class ProviderRpcError extends Error { - code: any; + readonly code: number; - constructor(code: any, message: string) { + public constructor(code: number, message: string) { super(); + this.name = this.constructor.name; this.code = code; this.message = message; } @@ -29,11 +30,19 @@ export class ProviderRpcError extends Error { } export class UserRejectedRequestError extends Error { - name = 'UserRejectedRequestError'; readonly code: number; - constructor() { - super('User rejected request'); + public constructor() { + super(); + this.name = this.constructor.name; this.code = 4001; + this.message = 'User rejected request'; + } +} + +export class NoServerSideError extends Error { + public constructor() { + super(); + this.message = 'Connect Kit does not support server side.'; } } diff --git a/packages/connect-kit/src/providers/ExtensionEvm.ts b/packages/connect-kit/src/providers/ExtensionEvm.ts index 0e2af33..d5f1e5e 100644 --- a/packages/connect-kit/src/providers/ExtensionEvm.ts +++ b/packages/connect-kit/src/providers/ExtensionEvm.ts @@ -1,6 +1,6 @@ import { getDebugLogger } from "../lib/logger"; import { Device } from "../lib/browser"; -import { ProviderNotFoundError } from "../lib/errors"; +import { NoServerSideError, ProviderNotFoundError } from "../lib/errors"; const log = getDebugLogger('ExtensionEvm'); @@ -68,6 +68,10 @@ interface WindowWithEthereum { export function getExtensionProvider (): EvmProvider { log('getEthereumProvider'); + if (typeof window === 'undefined') { + throw new NoServerSideError(); + } + let provider = (window as WindowWithEthereum)[EXTENSION_EVM_GLOBAL]; if ( diff --git a/packages/connect-kit/src/providers/ExtensionSolana.ts b/packages/connect-kit/src/providers/ExtensionSolana.ts index dc2b479..f54bb23 100644 --- a/packages/connect-kit/src/providers/ExtensionSolana.ts +++ b/packages/connect-kit/src/providers/ExtensionSolana.ts @@ -1,4 +1,4 @@ -import { ProviderNotFoundError } from "../lib/errors"; +import { NoServerSideError, ProviderNotFoundError } from "../lib/errors"; import { ProviderResult } from "../lib/provider"; import { getDebugLogger } from "../lib/logger"; @@ -26,6 +26,10 @@ interface WindowWithSolana { export function getSolanaProvider (): ProviderResult { log('getSolanaProvider'); + if (typeof window === 'undefined') { + throw new NoServerSideError(); + } + const provider = (window as WindowWithSolana)[EXTENSION_SOLANA_PROVIDER]; if ( diff --git a/packages/connect-kit/src/providers/WalletConnectEvm.ts b/packages/connect-kit/src/providers/WalletConnectEvm.ts index 909e577..a8359ae 100644 --- a/packages/connect-kit/src/providers/WalletConnectEvm.ts +++ b/packages/connect-kit/src/providers/WalletConnectEvm.ts @@ -94,19 +94,19 @@ function patchWalletConnectProviderRequest (provider: WalletConnectProvider) { if (method === 'eth_requestAccounts') { log('calling patched', method, params); - return new Promise(async (resolve, reject) => { + return new Promise((resolve, reject) => { try { if (!provider?.session?.connected) { showExtensionOrLLModal('', reject), // connect initializes the session and waits for connection - await provider.connect(); + provider.connect().then(() => { + // call the original provider request + resolve(baseRequest({ method, params })); + }); } else { log('reusing existing session'); } - - // call the original provider request - return resolve(await baseRequest({ method, params })); } catch(err) { logError('error', err); return reject(err); diff --git a/packages/connect-kit/src/providers/WalletConnectLegacy.ts b/packages/connect-kit/src/providers/WalletConnectLegacy.ts index e442243..b4cf3fd 100644 --- a/packages/connect-kit/src/providers/WalletConnectLegacy.ts +++ b/packages/connect-kit/src/providers/WalletConnectLegacy.ts @@ -72,19 +72,19 @@ function patchWalletConnectLegacyProviderRequest (provider: WalletConnectProvide if (method === 'eth_requestAccounts') { log('calling patched', method, params); - return new Promise(async (resolve, reject) => { + return new Promise((resolve, reject) => { try { if (!provider.connected) { - await provider.connector.createSession({ + provider.connector.createSession({ chainId: supportOptions.chainId - }); + }).then(() => { + // show the extension install modal or the WC URI + showExtensionOrLLModal(provider.connector.uri, reject); - // show the extension install modal or the WC URI - showExtensionOrLLModal(provider.connector.uri, reject); + // call the original provider request + resolve(baseRequest({ method, params })); + }); } - - // call the original provider request - return resolve(await baseRequest({ method, params })); } catch(err) { logError('error', err); return reject(err);