remove connectEagerly from construtor opts (#573)

packages/coinbase-wallet/src/index.spec.ts

@@ -22,7 +22,7 @@ describe('Coinbase Wallet', () => {
   let mockConnector: MockEIP1193Provider
 
   describe('connectEagerly = true', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       let actions: Actions
       ;[store, actions] = createWeb3ReactStoreAndActions()
       connector = new CoinbaseWallet({
@@ -31,8 +31,8 @@ describe('Coinbase Wallet', () => {
           appName: 'test',
           url: 'https://mock.url',
         },
-        connectEagerly: true,
       })
+      await connector.connectEagerly()
     })
 
     beforeEach(async () => {

packages/coinbase-wallet/src/index.ts

@@ -14,6 +14,16 @@ function parseChainId(chainId: string | number) {
 
 type CoinbaseWalletSDKOptions = ConstructorParameters<typeof CoinbaseWalletSDK>[0] & { url: string }
 
+/**
+ * @param options - Options to pass to `@coinbase/wallet-sdk`.
+ * @param onError - Handler to report errors thrown from eventListeners.
+ */
+export interface CoinbaseWalletConstructorArgs {
+  actions: Actions
+  options: CoinbaseWalletSDKOptions
+  onError?: (error: Error) => void
+}
+
 export class CoinbaseWallet extends Connector {
   /** {@inheritdoc Connector.provider} */
   public provider: CoinbaseWalletProvider | undefined
@@ -26,31 +36,9 @@ export class CoinbaseWallet extends Connector {
    */
   public coinbaseWallet: CoinbaseWalletSDK | undefined
 
-  /**
-   * @param options - Options to pass to `@coinbase/wallet-sdk`.
-   * @param connectEagerly - A flag indicating whether connection should be initiated when the class is constructed.
-   * @param onError - Handler to report errors thrown from eventListeners.
-   */
-  constructor({
-    actions,
-    options,
-    connectEagerly = false,
-    onError,
-  }: {
-    actions: Actions
-    options: CoinbaseWalletSDKOptions
-    connectEagerly?: boolean
-    onError?: (error: Error) => void
-  }) {
+  constructor({ actions, options, onError }: CoinbaseWalletConstructorArgs) {
     super(actions, onError)
-
-    if (connectEagerly && this.serverSide) {
-      throw new Error('connectEagerly = true is invalid for SSR, instead use the connectEagerly method in a useEffect')
-    }
-
     this.options = options
-
-    if (connectEagerly) void this.connectEagerly()
   }
 
   // the `connected` property, is bugged, but this works as a hack to check connection status
@@ -59,7 +47,7 @@ export class CoinbaseWallet extends Connector {
   }
 
   private async isomorphicInitialize(): Promise<void> {
-    if (this.eagerConnection) return this.eagerConnection
+    if (this.eagerConnection) return
 
     await (this.eagerConnection = import('@coinbase/wallet-sdk').then((m) => {
       const { url, ...options } = this.options
@@ -106,8 +94,8 @@ export class CoinbaseWallet extends Connector {
           }
         })
         .catch((error) => {
-          console.debug('Could not connect eagerly', error)
           cancelActivation()
+          throw error
         })
     } else {
       cancelActivation()

packages/eip1193/src/index.spec.ts

@@ -5,10 +5,6 @@ import type { Actions, ProviderRpcError, RequestArguments, Web3ReactStore } from
 import { EventEmitter } from 'node:events'
 import { EIP1193 } from '.'
 
-export async function yieldThread() {
-  await new Promise((resolve) => setTimeout(resolve, 0))
-}
-
 class MockProviderRpcError extends Error {
   public code: number
   constructor() {
@@ -88,7 +84,7 @@ describe('EIP1193', () => {
       const web3Provider = new Web3Provider(mockProvider)
       const wrapped = new Eip1193Bridge(web3Provider.getSigner(), web3Provider)
 
-      connector = new EIP1193({ actions, provider: wrapped, connectEagerly: false })
+      connector = new EIP1193({ actions, provider: wrapped })
 
       await connector.activate()
 
@@ -117,8 +113,8 @@ describe('EIP1193', () => {
       })
 
       test('fails silently', async () => {
-        connector = new EIP1193({ actions, provider: mockProvider, connectEagerly: true })
-        await yieldThread()
+        connector = new EIP1193({ actions, provider: mockProvider })
+        await connector.connectEagerly().catch(() => {})
 
         expect(store.getState()).toEqual({
           chainId: undefined,
@@ -135,8 +131,8 @@ describe('EIP1193', () => {
         mockProvider.chainId = chainId
         mockProvider.accounts = accounts
 
-        connector = new EIP1193({ actions, provider: mockProvider, connectEagerly: true })
-        await yieldThread()
+        connector = new EIP1193({ actions, provider: mockProvider })
+        await connector.connectEagerly().catch(() => {})
 
         expect(store.getState()).toEqual({
           chainId: 1,
@@ -152,7 +148,7 @@ describe('EIP1193', () => {
 
     describe('connectEagerly = false', () => {
       beforeEach(() => {
-        connector = new EIP1193({ actions, provider: mockProvider, connectEagerly: false })
+        connector = new EIP1193({ actions, provider: mockProvider })
       })
 
       beforeEach(() => {
@@ -242,7 +238,7 @@ describe('EIP1193', () => {
 
   describe('events', () => {
     beforeEach(() => {
-      connector = new EIP1193({ actions, provider: mockProvider, connectEagerly: false })
+      connector = new EIP1193({ actions, provider: mockProvider })
     })
 
     afterEach(() => {

packages/eip1193/src/index.ts

@@ -5,32 +5,23 @@ function parseChainId(chainId: string | number) {
   return typeof chainId === 'string' ? Number.parseInt(chainId, 16) : chainId
 }
 
+/**
+ * @param provider - An EIP-1193 ({@link https://github.com/ethereum/EIPs/blob/master/EIPS/eip-1193.md}) provider.
+ * @param onError - Handler to report errors thrown from eventListeners.
+ */
+export interface EIP1193ConstructorArgs {
+  actions: Actions
+  provider: Provider
+  onError?: (error: Error) => void
+}
+
 export class EIP1193 extends Connector {
   /** {@inheritdoc Connector.provider} */
   provider: Provider
 
-  /**
-   * @param provider - An EIP-1193 ({@link https://github.com/ethereum/EIPs/blob/master/EIPS/eip-1193.md}) provider.
-   * @param connectEagerly - A flag indicating whether connection should be initiated when the class is constructed.
-   * @param onError - Handler to report errors thrown from eventListeners.
-   */
-  constructor({
-    actions,
-    provider,
-    connectEagerly = false,
-    onError,
-  }: {
-    actions: Actions
-    provider: Provider
-    connectEagerly?: boolean
-    onError?: (error: Error) => void
-  }) {
+  constructor({ actions, provider, onError }: EIP1193ConstructorArgs) {
     super(actions, onError)
 
-    if (connectEagerly && this.serverSide) {
-      throw new Error('connectEagerly = true is invalid for SSR, instead use the connectEagerly method in a useEffect')
-    }
-
     this.provider = provider
 
     this.provider.on('connect', ({ chainId }: ProviderConnectInfo): void => {
@@ -49,8 +40,6 @@ export class EIP1193 extends Connector {
     this.provider.on('accountsChanged', (accounts: string[]): void => {
       this.actions.update({ accounts })
     })
-
-    if (connectEagerly) void this.connectEagerly()
   }
 
   /** {@inheritdoc Connector.connectEagerly} */
@@ -65,8 +54,8 @@ export class EIP1193 extends Connector {
         this.actions.update({ chainId: parseChainId(chainId), accounts })
       })
       .catch((error) => {
-        console.debug('Could not connect eagerly', error)
         cancelActivation()
+        throw error
       })
   }
 

packages/example-next/components/ConnectWithSelect.tsx

@@ -127,7 +127,17 @@ export function ConnectWithSelect({
           />
         )}
         <div style={{ marginBottom: '1rem' }} />
-        <button onClick={() => void connector.deactivate()}>Disconnect</button>
+        <button
+          onClick={() => {
+            if (connector?.deactivate) {
+              void connector.deactivate()
+            } else {
+              void connector.resetState()
+            }
+          }}
+        >
+          Disconnect
+        </button>
       </div>
     )
   } else {
@@ -148,10 +158,19 @@ export function ConnectWithSelect({
               ? undefined
               : () =>
                   connector instanceof GnosisSafe
-                    ? void connector.activate()
+                    ? void connector
+                        .activate()
+                        .then(() => setError(undefined))
+                        .catch(setError)
                     : connector instanceof WalletConnect || connector instanceof Network
-                    ? connector.activate(desiredChainId === -1 ? undefined : desiredChainId)
-                    : connector.activate(desiredChainId === -1 ? undefined : getAddChainParameters(desiredChainId))
+                    ? connector
+                        .activate(desiredChainId === -1 ? undefined : desiredChainId)
+                        .then(() => setError(undefined))
+                        .catch(setError)
+                    : connector
+                        .activate(desiredChainId === -1 ? undefined : getAddChainParameters(desiredChainId))
+                        .then(() => setError(undefined))
+                        .catch(setError)
           }
           disabled={isActivating}
         >

packages/example-next/components/connectorCards/CoinbaseWalletCard.tsx

@@ -18,7 +18,9 @@ export default function CoinbaseWalletCard() {
 
   // attempt to connect eagerly on mount
   useEffect(() => {
-    void coinbaseWallet.connectEagerly()
+    void coinbaseWallet.connectEagerly().catch(() => {
+      console.debug('Failed to connect eagerly to coinbase wallet')
+    })
   }, [])
 
   return (

packages/example-next/components/connectorCards/GnosisSafeCard.tsx

@@ -18,7 +18,9 @@ export default function GnosisSafeCard() {
 
   // attempt to connect eagerly on mount
   useEffect(() => {
-    void gnosisSafe.connectEagerly()
+    void gnosisSafe.connectEagerly().catch(() => {
+      console.debug('Failed to connect eagerly to gnosis safe')
+    })
   }, [])
 
   return (

packages/example-next/components/connectorCards/MetaMaskCard.tsx

@@ -18,7 +18,9 @@ export default function MetaMaskCard() {
 
   // attempt to connect eagerly on mount
   useEffect(() => {
-    void metaMask.connectEagerly()
+    void metaMask.connectEagerly().catch(() => {
+      console.debug('Failed to connect eagerly to metamask')
+    })
   }, [])
 
   return (

packages/example-next/components/connectorCards/NetworkCard.tsx

@@ -18,7 +18,9 @@ export default function NetworkCard() {
 
   // attempt to connect eagerly on mount
   useEffect(() => {
-    void network.activate()
+    void network.activate().catch(() => {
+      console.debug('Failed to connect to network')
+    })
   }, [])
 
   return (

packages/example-next/components/connectorCards/WalletConnectCard.tsx

@@ -1,3 +1,4 @@
+import { URI_AVAILABLE } from '@web3-react/walletconnect'
 import { useEffect, useState } from 'react'
 import { hooks, walletConnect } from '../../connectors/walletConnect'
 import { Card } from '../Card'
@@ -16,9 +17,18 @@ export default function WalletConnectCard() {
 
   const [error, setError] = useState(undefined)
 
+  // log URI when available
+  useEffect(() => {
+    walletConnect.events.on(URI_AVAILABLE, (uri: string) => {
+      console.log(`uri: ${uri}`)
+    })
+  }, [])
+
   // attempt to connect eagerly on mount
   useEffect(() => {
-    void walletConnect.connectEagerly()
+    walletConnect.connectEagerly().catch(() => {
+      console.debug('Failed to connect eagerly to walletconnect')
+    })
   }, [])
 
   return (