refactor: coinbase connector popup improvements (#2392)

Co-authored-by: Sven <[email protected]> Co-authored-by: Sven <[email protected]>
reown-com · Jun 12, 2024 · 61f87fc · 61f87fc
1 parent e3b063b
commit 61f87fc
Show file tree

Hide file tree

Showing 11 changed files with 89 additions and 75 deletions.
diff --git a/.gitignore b/.gitignore
@@ -14,3 +14,4 @@ coverage
 test-results
 .vscode/*
 apps/laboratory/playwright/.auth/user.json
+tsconfig.tsbuildinfo
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/ethers/src/client.ts b/packages/ethers/src/client.ts
@@ -66,6 +66,12 @@ export interface Web3ModalClientOptions extends Omit<LibraryOptions, 'defaultCha
   tokens?: Record<number, Token>
 }
 
+type CoinbaseProviderError = {
+  code: number
+  message: string
+  data: string | undefined
+}
+
 export type Web3ModalOptions = Omit<Web3ModalClientOptions, '_sdkVersion'>
 
 declare global {
@@ -281,6 +287,7 @@ export class Web3Modal extends Web3ModalScaffold {
             this.setCoinbaseProvider(ethersConfig)
           } catch (error) {
             EthersStoreUtil.setError(error)
+            throw new Error((error as CoinbaseProviderError).message)
           }
         } else if (id === ConstantsUtil.AUTH_CONNECTOR_ID) {
           this.setAuthProvider()

diff --git a/packages/ethers5/src/client.ts b/packages/ethers5/src/client.ts
@@ -43,6 +43,12 @@ export interface Web3ModalClientOptions extends Omit<LibraryOptions, 'defaultCha
   tokens?: Record<number, Token>
 }
 
+type CoinbaseProviderError = {
+  code: number
+  message: string
+  data: string | undefined
+}
+
 export type Web3ModalOptions = Omit<Web3ModalClientOptions, '_sdkVersion'>
 
 declare global {
@@ -256,6 +262,7 @@ export class Web3Modal extends Web3ModalScaffold {
             await CoinbaseProvider.request({ method: 'eth_requestAccounts' })
           } catch (error) {
             EthersStoreUtil.setError(error)
+            throw new Error((error as CoinbaseProviderError).message)
           }
         }
       },

diff --git a/packages/scaffold/index.ts b/packages/scaffold/index.ts
@@ -86,7 +86,6 @@ export * from './src/partials/w3m-wallet-login-list/index.js'
 export * from './src/partials/w3m-social-login-list/index.js'
 export * from './src/partials/w3m-connect-announced-widget/index.js'
 export * from './src/partials/w3m-connect-custom-widget/index.js'
-export * from './src/partials/w3m-connect-external-widget/index.js'
 export * from './src/partials/w3m-connect-featured-widget/index.js'
 export * from './src/partials/w3m-connect-injected-widget/index.js'
 export * from './src/partials/w3m-connect-coinbase-widget/index.js'

diff --git a/packages/scaffold/package.json b/packages/scaffold/package.json
@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "@web3modal/common": "4.2.3",
+    "@web3modal/scaffold-utils": "4.2.3",
     "@web3modal/core": "4.2.3",
     "@web3modal/ui": "4.2.3",
     "lit": "3.1.0",

diff --git a/packages/scaffold/src/partials/w3m-connect-coinbase-widget/index.ts b/packages/scaffold/src/partials/w3m-connect-coinbase-widget/index.ts
@@ -1,5 +1,15 @@
-import type { Connector } from '@web3modal/core'
-import { AssetUtil, ConnectorController, RouterController } from '@web3modal/core'
+import type { BaseError, Connector } from '@web3modal/core'
+import {
+  AssetUtil,
+  ConnectionController,
+  ConnectorController,
+  EventsController,
+  ModalController,
+  OptionsController,
+  RouterController,
+  StorageUtil
+} from '@web3modal/core'
+import { ConstantsUtil } from '@web3modal/scaffold-utils'
 import { customElement } from '@web3modal/ui'
 import { LitElement, html } from 'lit'
 import { state } from 'lit/decorators.js'
@@ -51,8 +61,46 @@ export class W3mConnectCoinbaseWidget extends LitElement {
   }
 
   // -- Private Methods ----------------------------------- //
+  /**
+   * Replicate of `onConnectProxy` method from `w3m-connecting-external-view` which is only used for Coinbase connector.
+   */
+  private async onCoinbaseConnector(connector: Connector) {
+    try {
+      ConnectionController.setWcError(false)
+
+      if (connector.imageUrl) {
+        StorageUtil.setConnectedWalletImageUrl(connector.imageUrl)
+      }
+
+      await ConnectionController.connectExternal(connector)
+
+      if (OptionsController.state.isSiweEnabled) {
+        RouterController.push('ConnectingSiwe')
+      } else {
+        ModalController.close()
+      }
+
+      EventsController.sendEvent({
+        type: 'track',
+        event: 'CONNECT_SUCCESS',
+        properties: { method: 'browser', name: connector.name || 'Unknown' }
+      })
+    } catch (error) {
+      EventsController.sendEvent({
+        type: 'track',
+        event: 'CONNECT_ERROR',
+        properties: { message: (error as BaseError)?.message ?? 'Unknown' }
+      })
+      ConnectionController.setWcError(true)
+    }
+  }
+
   private onConnector(connector: Connector) {
     RouterController.push('ConnectingExternal', { connector })
+
+    if (connector.id === ConstantsUtil.COINBASE_SDK_CONNECTOR_ID) {
+      this.onCoinbaseConnector(connector)
+    }
   }
 }
 

diff --git a/packages/scaffold/src/partials/w3m-connect-external-widget/index.ts b/packages/scaffold/src/partials/w3m-connect-external-widget/index.ts
diff --git a/packages/scaffold/src/partials/w3m-wallet-login-list/index.ts b/packages/scaffold/src/partials/w3m-wallet-login-list/index.ts
@@ -16,8 +16,8 @@ export class W3mWalletLoginList extends LitElement {
         <w3m-connect-injected-widget></w3m-connect-injected-widget>
         <w3m-connect-featured-widget></w3m-connect-featured-widget>
         <w3m-connect-custom-widget></w3m-connect-custom-widget>
+        <w3m-connect-coinbase-widget></w3m-connect-coinbase-widget>
         <w3m-connect-recommended-widget></w3m-connect-recommended-widget>
-        <w3m-connect-external-widget></w3m-connect-external-widget>
         <w3m-all-wallets-widget></w3m-all-wallets-widget>
       </wui-flex>
     `

diff --git a/packages/scaffold/src/views/w3m-connect-view/index.ts b/packages/scaffold/src/views/w3m-connect-view/index.ts
@@ -49,8 +49,9 @@ export class W3mConnectView extends LitElement {
             <w3m-connect-recent-widget></w3m-connect-recent-widget>
             <w3m-connect-announced-widget></w3m-connect-announced-widget>
             <w3m-connect-injected-widget></w3m-connect-injected-widget>
-            <w3m-connect-coinbase-widget></w3m-connect-coinbase-widget>
+            <w3m-connect-featured-widget></w3m-connect-featured-widget>
             <w3m-connect-custom-widget></w3m-connect-custom-widget>
+            <w3m-connect-coinbase-widget></w3m-connect-coinbase-widget>
             <w3m-connect-recommended-widget></w3m-connect-recommended-widget>
             <wui-flex class="all-wallets" .margin=${['xs', '0', '0', '0'] as const}>
               <w3m-all-wallets-widget></w3m-all-wallets-widget>

diff --git a/packages/scaffold/src/views/w3m-connecting-external-view/index.ts b/packages/scaffold/src/views/w3m-connecting-external-view/index.ts
@@ -9,6 +9,7 @@ import {
 } from '@web3modal/core'
 import { customElement } from '@web3modal/ui'
 import { W3mConnectingWidget } from '../../utils/w3m-connecting-widget/index.js'
+import { ConstantsUtil } from '@web3modal/scaffold-utils'
 
 @customElement('w3m-connecting-external-view')
 export class W3mConnectingExternalView extends W3mConnectingWidget {
@@ -39,19 +40,26 @@ export class W3mConnectingExternalView extends W3mConnectingWidget {
         if (this.connector.imageUrl) {
           StorageUtil.setConnectedWalletImageUrl(this.connector.imageUrl)
         }
-        await ConnectionController.connectExternal(this.connector)
+        /**
+         * Coinbase SDK works with popups and popups requires user interaction to be opened since modern browsers block popups which triggered programmatically.
+         * Instead of opening a popup in first render for `W3mConnectingWidget`, we need to trigger connection for Coinbase connector specifically when users select it.
+         * And if there is an error, this condition will be skipped and the connection will be triggered as usual because we have `Try again` button in this view which is a user interaction as well.
+         */
+        if (this.connector.id !== ConstantsUtil.COINBASE_SDK_CONNECTOR_ID || !this.error) {
+          await ConnectionController.connectExternal(this.connector)
 
-        if (OptionsController.state.isSiweEnabled) {
-          RouterController.push('ConnectingSiwe')
-        } else {
-          ModalController.close()
-        }
+          if (OptionsController.state.isSiweEnabled) {
+            RouterController.push('ConnectingSiwe')
+          } else {
+            ModalController.close()
+          }
 
-        EventsController.sendEvent({
-          type: 'track',
-          event: 'CONNECT_SUCCESS',
-          properties: { method: 'browser', name: this.connector.name || 'Unknown' }
-        })
+          EventsController.sendEvent({
+            type: 'track',
+            event: 'CONNECT_SUCCESS',
+            properties: { method: 'browser', name: this.connector.name || 'Unknown' }
+          })
+        }
       }
     } catch (error) {
       EventsController.sendEvent({