Code review fixes

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

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 (
-    <Modal onClose={() => onClose()}>
+    <Modal onClose={onClose}>
       <>
         <ModalSection>
           <ModalTitle>Try Ledger Connect</ModalTitle>

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,23 +48,23 @@ const UseLedgerLiveModal = ({
     previousUriRef.current = uri;
   });
 
-  const onUseLedgerLiveClick = () => {
+  const onUseLedgerLiveClick = useCallback(() => {
     log('loading Ledger Live, ', wcUri);
     window.location.href = `ledgerlive://wc?uri=${encodeURIComponent(wcUri)}`;
 
     // close the modal so that the current WalletConnect URI cannot be reused
     setIsModalOpen(false);
 
     return false;
-  };
+  }, [wcUri]);
 
-  const onInstallLedgerLiveClick = () => {
+  const onInstallLedgerLiveClick = useCallback(() => {
     window.open('https://www.ledger.com/ledger-live');
     return false;
-  };
+  }, []);
 
   return (
-    <Modal onClose={() => onClose()}>
+    <Modal onClose={onClose}>
       <ModalSection textAlign="center">
         <ModalTitle>Do you have Ledger Live?</ModalTitle>
 

packages/connect-kit/src/lib/errors.ts

@@ -2,23 +2,24 @@ 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.';
   }
 }
 
 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.';
   }
 }

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 (

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 (

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);

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);