[v3] Connection widget refactor, update browser wallet style, fixes (#…

…1310)

apps/laboratory/package.json

@@ -14,7 +14,7 @@
     "@sentry/browser": "7.66.0",
     "@sentry/react": "7.66.0",
     "@web3modal/wagmi": "3.0.0-alpha.5",
-    "framer-motion": "10.16.2",
+    "framer-motion": "10.16.4",
     "next": "13.4.19",
     "react-icons": "4.10.1",
     "valtio": "1.11.2"

package.json

@@ -32,8 +32,8 @@
     "examples/*"
   ],
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "6.5.0",
-    "@typescript-eslint/parser": "6.5.0",
+    "@typescript-eslint/eslint-plugin": "6.6.0",
+    "@typescript-eslint/parser": "6.6.0",
     "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",
     "eslint": "8.48.0",
@@ -49,7 +49,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "turbo": "1.10.13",
-    "viem": "1.9.2",
-    "wagmi": "1.3.10"
+    "viem": "1.10.3",
+    "wagmi": "1.4.1"
   }
 }

packages/scaffold/index.ts

@@ -21,7 +21,6 @@ export * from './src/partials/w3m-connecting-wc-mobile/index.js'
 export * from './src/partials/w3m-connecting-wc-qrcode/index.js'
 export * from './src/partials/w3m-connecting-wc-unsupported/index.js'
 export * from './src/partials/w3m-connecting-wc-web/index.js'
-export * from './src/partials/w3m-connecting-widget/index.js'
 export * from './src/partials/w3m-header/index.js'
 export * from './src/partials/w3m-help-widget/index.js'
 export * from './src/partials/w3m-snackbar/index.js'

packages/scaffold/src/partials/w3m-connecting-wc-desktop/index.ts

@@ -1,43 +1,29 @@
-import { AssetUtil, ConnectionController, CoreHelperUtil } from '@web3modal/core'
-import { html } from 'lit'
+import { ConnectionController, CoreHelperUtil } from '@web3modal/core'
 import { customElement } from 'lit/decorators.js'
-import { ifDefined } from 'lit/directives/if-defined.js'
-import { WcConnectingLitElement } from '../../utils/WcConnectingLitElement.js'
+import { W3mConnectingWidget } from '../../utils/w3m-connecting-widget/index.js'
 
 @customElement('w3m-connecting-wc-desktop')
-export class W3mConnectingWcDesktop extends WcConnectingLitElement {
-  // -- Render -------------------------------------------- //
-  public override render() {
+export class W3mConnectingWcDesktop extends W3mConnectingWidget {
+  public constructor() {
+    super()
     if (!this.wallet) {
       throw new Error('w3m-connecting-wc-desktop: No wallet provided')
     }
-
-    this.isReady()
-
-    return html`
-      <w3m-connecting-widget
-        imageSrc=${ifDefined(AssetUtil.getWalletImage(this.wallet.image_id))}
-        name=${this.wallet.name}
-        .error=${Boolean(this.error)}
-        .onConnect=${this.onConnect.bind(this)}
-        .onCopyUri=${this.onCopyUri.bind(this)}
-        .onRetry=${this.onRetry?.bind(this)}
-        .autoConnect=${false}
-      ></w3m-connecting-widget>
-    `
+    this.onConnect = this.onConnectProxy.bind(this)
+    this.onRender = this.onRenderProxy.bind(this)
   }
 
   // -- Private ------------------------------------------- //
-  private isReady() {
+  private onRenderProxy() {
     if (!this.ready && this.uri) {
+      this.ready = true
       this.timeout = setTimeout(() => {
-        this.ready = true
-        this.onConnect()
+        this.onConnect?.()
       }, 250)
     }
   }
 
-  private onConnect() {
+  private onConnectProxy() {
     if (this.wallet?.desktop_link && this.uri) {
       try {
         this.error = false

packages/scaffold/src/partials/w3m-connecting-wc-injected/index.ts

@@ -1,29 +1,20 @@
-import { AssetUtil, ConnectionController, ModalController } from '@web3modal/core'
-import { html } from 'lit'
+import { ConnectionController, ModalController } from '@web3modal/core'
 import { customElement } from 'lit/decorators.js'
-import { ifDefined } from 'lit/directives/if-defined.js'
-import { WcConnectingLitElement } from '../../utils/WcConnectingLitElement.js'
+import { W3mConnectingWidget } from '../../utils/w3m-connecting-widget/index.js'
 
 @customElement('w3m-connecting-wc-injected')
-export class W3mConnectingWcInjected extends WcConnectingLitElement {
-  // -- Render -------------------------------------------- //
-  public override render() {
+export class W3mConnectingWcInjected extends W3mConnectingWidget {
+  public constructor() {
+    super()
     if (!this.wallet) {
       throw new Error('w3m-connecting-wc-injected: No wallet provided')
     }
-
-    return html`
-      <w3m-connecting-widget
-        name=${this.wallet.name}
-        imageSrc=${ifDefined(AssetUtil.getWalletImage(this.wallet.image_id))}
-        .error=${Boolean(this.error)}
-        .onConnect=${this.onConnect.bind(this)}
-      ></w3m-connecting-widget>
-    `
+    this.onConnect = this.onConnectProxy.bind(this)
+    this.onAutoConnect = this.onConnectProxy.bind(this)
   }
 
   // -- Private ------------------------------------------- //
-  private async onConnect() {
+  private async onConnectProxy() {
     try {
       this.error = false
       await ConnectionController.connectExternal('injected')

packages/scaffold/src/partials/w3m-connecting-wc-mobile/index.ts

@@ -1,16 +1,16 @@
-import { AssetUtil, ConnectionController, CoreHelperUtil } from '@web3modal/core'
-import { html } from 'lit'
-import { customElement, state } from 'lit/decorators.js'
-import { ifDefined } from 'lit/directives/if-defined.js'
-import { WcConnectingLitElement } from '../../utils/WcConnectingLitElement.js'
+import { ConnectionController, CoreHelperUtil } from '@web3modal/core'
+import { customElement } from 'lit/decorators.js'
+import { W3mConnectingWidget } from '../../utils/w3m-connecting-widget/index.js'
 
 @customElement('w3m-connecting-wc-mobile')
-export class W3mConnectingWcMobile extends WcConnectingLitElement {
-  // -- State & Properties -------------------------------- //
-  @state() private buffering = false
-
+export class W3mConnectingWcMobile extends W3mConnectingWidget {
   public constructor() {
     super()
+    if (!this.wallet) {
+      throw new Error('w3m-connecting-wc-mobile: No wallet provided')
+    }
+    this.onConnect = this.onConnectProxy.bind(this)
+    this.onRender = this.onRenderProxy.bind(this)
     document.addEventListener('visibilitychange', this.onBuffering.bind(this))
   }
 
@@ -19,37 +19,15 @@ export class W3mConnectingWcMobile extends WcConnectingLitElement {
     document.removeEventListener('visibilitychange', this.onBuffering.bind(this))
   }
 
-  // -- Render -------------------------------------------- //
-  public override render() {
-    if (!this.wallet) {
-      throw new Error('w3m-connecting-wc-mobile: No wallet provided')
-    }
-
-    this.isReady()
-
-    return html`
-      <w3m-connecting-widget
-        name=${this.wallet.name}
-        imageSrc=${ifDefined(AssetUtil.getWalletImage(this.wallet.image_id))}
-        .buffering=${this.buffering}
-        .error=${Boolean(this.error)}
-        .onConnect=${this.onConnect.bind(this)}
-        .onRetry=${this.onRetry?.bind(this)}
-        .onCopyUri=${this.onCopyUri.bind(this)}
-        .autoConnect=${false}
-      ></w3m-connecting-widget>
-    `
-  }
-
   // -- Private ------------------------------------------- //
-  private isReady() {
+  private onRenderProxy() {
     if (!this.ready && this.uri) {
       this.ready = true
-      this.onConnect()
+      this.onConnect?.()
     }
   }
 
-  private onConnect() {
+  private onConnectProxy() {
     if (this.wallet?.mobile_link && this.uri) {
       try {
         this.error = false

packages/scaffold/src/partials/w3m-connecting-wc-qrcode/index.ts

@@ -2,20 +2,30 @@ import { AssetUtil, ConnectionController, ThemeController } from '@web3modal/cor
 import { html } from 'lit'
 import { customElement } from 'lit/decorators.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
-import { WcConnectingLitElement } from '../../utils/WcConnectingLitElement.js'
+import { W3mConnectingWidget } from '../../utils/w3m-connecting-widget/index.js'
 import styles from './styles.js'
 
 @customElement('w3m-connecting-wc-qrcode')
-export class W3mConnectingWcQrcode extends WcConnectingLitElement {
+export class W3mConnectingWcQrcode extends W3mConnectingWidget {
   public static override styles = styles
 
+  public constructor() {
+    super()
+    window.addEventListener('resize', this.forceUpdate)
+  }
+
+  public override disconnectedCallback() {
+    super.disconnectedCallback()
+    window.removeEventListener('resize', this.forceUpdate)
+  }
+
   // -- Render -------------------------------------------- //
   public override render() {
-    this.isReady()
+    this.onRenderProxy()
 
     return html`
       <wui-flex padding="xl" flexDirection="column" gap="xl" alignItems="center">
-        <wui-shimmer borderRadius="l" width="100%"> ${this.qrCodeTenmplate()} </wui-shimmer>
+        <wui-shimmer borderRadius="l" width="100%"> ${this.qrCodeTemplate()} </wui-shimmer>
 
         <wui-text variant="paragraph-500" color="fg-100">
           Scan this QR Code with your phone
@@ -30,13 +40,15 @@ export class W3mConnectingWcQrcode extends WcConnectingLitElement {
   }
 
   // -- Private ------------------------------------------- //
-  private isReady() {
+  private onRenderProxy() {
     if (!this.ready && this.uri) {
-      this.timeout = setTimeout(() => (this.ready = true), 250)
+      this.timeout = setTimeout(() => {
+        this.ready = true
+      }, 250)
     }
   }
 
-  private qrCodeTenmplate() {
+  private qrCodeTemplate() {
     if (!this.uri || !this.ready) {
       return null
     }
@@ -53,6 +65,10 @@ export class W3mConnectingWcQrcode extends WcConnectingLitElement {
       alt=${ifDefined(alt)}
     ></wui-qr-code>`
   }
+
+  private forceUpdate = () => {
+    this.requestUpdate()
+  }
 }
 
 declare global {

packages/scaffold/src/partials/w3m-connecting-wc-web/index.ts

@@ -1,43 +1,22 @@
-import { AssetUtil, ConnectionController, CoreHelperUtil } from '@web3modal/core'
-import { html } from 'lit'
+import { ConnectionController, CoreHelperUtil } from '@web3modal/core'
 import { customElement } from 'lit/decorators.js'
-import { ifDefined } from 'lit/directives/if-defined.js'
-import { WcConnectingLitElement } from '../../utils/WcConnectingLitElement.js'
+import { W3mConnectingWidget } from '../../utils/w3m-connecting-widget/index.js'
 
 @customElement('w3m-connecting-wc-web')
-export class W3mConnectingWcWeb extends WcConnectingLitElement {
-  // -- Render -------------------------------------------- //
-  public override render() {
+export class W3mConnectingWcWeb extends W3mConnectingWidget {
+  public constructor() {
+    super()
     if (!this.wallet) {
       throw new Error('w3m-connecting-wc-web: No wallet provided')
     }
-
-    this.isReady()
-
-    return html`
-      <w3m-connecting-widget
-        name=${this.wallet.name}
-        imageSrc=${ifDefined(AssetUtil.getWalletImage(this.wallet.image_id))}
-        .error=${Boolean(this.error)}
-        .onConnect=${this.onConnect.bind(this)}
-        .onCopyUri=${this.onCopyUri.bind(this)}
-        .onRetry=${this.onRetry?.bind(this)}
-        .autoConnect=${false}
-      ></w3m-connecting-widget>
-    `
+    this.onConnect = this.onConnectProxy.bind(this)
+    this.secondaryBtnLabel = 'Open'
+    this.secondaryLabel = 'Open and continue in a new browser tab'
+    this.secondaryBtnIcon = 'externalLink'
   }
 
   // -- Private ------------------------------------------- //
-  private isReady() {
-    if (!this.ready && this.uri) {
-      this.timeout = setTimeout(() => {
-        this.ready = true
-        this.onConnect()
-      }, 250)
-    }
-  }
-
-  private onConnect() {
+  private onConnectProxy() {
     if (this.wallet?.webapp_link && this.uri) {
       try {
         this.error = false