Skip to content

Commit

Permalink
refactor: coinbase connector popup improvements (#2392)
Browse files Browse the repository at this point in the history
Co-authored-by: Sven <[email protected]>
Co-authored-by: Sven <[email protected]>
  • Loading branch information
3 people authored Jun 12, 2024
1 parent e3b063b commit 61f87fc
Show file tree
Hide file tree
Showing 11 changed files with 89 additions and 75 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -14,3 +14,4 @@ coverage
test-results
.vscode/*
apps/laboratory/playwright/.auth/user.json
tsconfig.tsbuildinfo
1 change: 1 addition & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

7 changes: 7 additions & 0 deletions packages/ethers/src/client.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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()
Expand Down
7 changes: 7 additions & 0 deletions packages/ethers5/src/client.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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)
}
}
},
Expand Down
1 change: 0 additions & 1 deletion packages/scaffold/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down
1 change: 1 addition & 0 deletions packages/scaffold/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Original file line number Diff line number Diff line change
@@ -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'
Expand Down Expand Up @@ -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)
}
}
}

Expand Down

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -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>
`
Expand Down
3 changes: 2 additions & 1 deletion packages/scaffold/src/views/w3m-connect-view/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
30 changes: 19 additions & 11 deletions packages/scaffold/src/views/w3m-connecting-external-view/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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({
Expand Down

0 comments on commit 61f87fc

Please sign in to comment.