Repository: reown-com/appkit
Pull request #4052: feat(web-wallet): disable button while loading
Author: login: arein
Created: 2025-03-20T01:54:15Z | Merged: 2025-03-20T07:04:38Z

# Description

Web wallets can only be opened once a connection to WalletConnect has been established. Currently the UX is confusing as the button can be clicked whilst loading with no effect. This change disables the button until it is actually clickable.

## Type of change

- [ ] Chore (non-breaking change that addresses non-functional tasks, maintenance, or code quality improvements)
- [ ] Bug fix (non-breaking change which fixes an issue)
- [x] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)

# Associated Issues

For Linear issues: Closes APKT-xxx
For GH issues: closes #...

# Showcase (Optional)


https://github.com/user-attachments/assets/5eae7635-51b5-449b-a552-ea47dba9020a



# Checklist

- [x] Code in this PR is covered by automated tests (Unit tests, E2E tests)
- [x] My changes generate no new warnings
- [x] I have reviewed my own code
- [x] I have filled out all required sections
- [x] I have tested my changes on the preview link
- [ ] Approver of this PR confirms that the changes are tested on the preview link



Diff:
diff --git a/.changeset/every-actors-train.md b/.changeset/every-actors-train.md
new file mode 100644
index 0000000000..b604e30daf
--- /dev/null
+++ b/.changeset/every-actors-train.md
@@ -0,0 +1,5 @@
+---
+'@reown/appkit-scaffold-ui': patch
+---
+
+disable `open` button until connection established
diff --git a/packages/scaffold-ui/src/partials/w3m-connecting-wc-web/index.ts b/packages/scaffold-ui/src/partials/w3m-connecting-wc-web/index.ts
index 42d41709ea..735abb5974 100644
--- a/packages/scaffold-ui/src/partials/w3m-connecting-wc-web/index.ts
+++ b/packages/scaffold-ui/src/partials/w3m-connecting-wc-web/index.ts
@@ -1,3 +1,5 @@
+import { state } from 'lit/decorators.js'
+
 import { ConnectionController, CoreHelperUtil, EventsController } from '@reown/appkit-controllers'
 import { customElement } from '@reown/appkit-ui'
 
@@ -5,6 +7,9 @@ import { W3mConnectingWidget } from '../../utils/w3m-connecting-widget/index.js'
 
 @customElement('w3m-connecting-wc-web')
 export class W3mConnectingWcWeb extends W3mConnectingWidget {
+  // Add a property to control button disabled state
+  @state() protected override isLoading = true
+
   public constructor() {
     super()
     if (!this.wallet) {
@@ -14,6 +19,15 @@ export class W3mConnectingWcWeb extends W3mConnectingWidget {
     this.secondaryBtnLabel = 'Open'
     this.secondaryLabel = 'Open and continue in a new browser tab'
     this.secondaryBtnIcon = 'externalLink'
+
+    // Update isLoading state initially and whenever URI changes
+    this.updateLoadingState()
+    this.unsubscribe.push(
+      ConnectionController.subscribeKey('wcUri', () => {
+        this.updateLoadingState()
+      })
+    )
+
     EventsController.sendEvent({
       type: 'track',
       event: 'SELECT_WALLET',
@@ -21,6 +35,11 @@ export class W3mConnectingWcWeb extends W3mConnectingWidget {
     })
   }
 
+  // Update the isLoading state based on required conditions
+  private updateLoadingState() {
+    this.isLoading = !this.uri
+  }
+
   // -- Private ------------------------------------------- //
   private onConnectProxy() {
     if (this.wallet?.webapp_link && this.uri) {
diff --git a/packages/scaffold-ui/src/utils/w3m-connecting-widget/index.ts b/packages/scaffold-ui/src/utils/w3m-connecting-widget/index.ts
index 5e8221f94e..2450d8600b 100644
--- a/packages/scaffold-ui/src/utils/w3m-connecting-widget/index.ts
+++ b/packages/scaffold-ui/src/utils/w3m-connecting-widget/index.ts
@@ -67,6 +67,8 @@ export class W3mConnectingWidget extends LitElement {
 
   @state() public buffering = false
 
+  @state() protected isLoading = false
+
   @property({ type: Boolean }) public isMobile = false
 
   @property() public onRetry?: (() => void) | (() => Promise<void>) = undefined
@@ -162,7 +164,7 @@ export class W3mConnectingWidget extends LitElement {
               <wui-button
                 variant="accent"
                 size="md"
-                ?disabled=${this.isRetrying || (!this.error && this.buffering)}
+                ?disabled=${this.isRetrying || (!this.error && this.buffering) || this.isLoading}
                 @click=${this.onTryAgain.bind(this)}
                 data-testid="w3m-connecting-widget-secondary-button"
               >
diff --git a/packages/scaffold-ui/test/partials/w3m-connecting-wc-web.test.ts b/packages/scaffold-ui/test/partials/w3m-connecting-wc-web.test.ts
new file mode 100644
index 0000000000..0252c34706
--- /dev/null
+++ b/packages/scaffold-ui/test/partials/w3m-connecting-wc-web.test.ts
@@ -0,0 +1,95 @@
+import { fixture } from '@open-wc/testing'
+import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest'
+
+import { html } from 'lit'
+
+import {
+  ConnectionController,
+  CoreHelperUtil,
+  EventsController,
+  RouterController,
+  type WcWallet
+} from '@reown/appkit-controllers'
+
+// -- Constants ------------------------------------------- //
+const WC_URI = 'xyz'
+const WALLET = {
+  name: 'React Wallet',
+  webapp_link: 'https://react-wallet.walletconnect.com/'
+} as WcWallet
+const REDIRECT_URL = `${WALLET.webapp_link}wc?uri=${encodeURIComponent(WC_URI)}`
+
+describe('W3mConnectingWcWeb', () => {
+  beforeAll(() => {
+    Element.prototype.animate = vi.fn()
+    vi.spyOn(ConnectionController, 'setWcLinking')
+    vi.spyOn(ConnectionController, 'setRecentWallet')
+    vi.spyOn(CoreHelperUtil, 'openHref')
+    vi.spyOn(EventsController, 'sendEvent')
+    vi.spyOn(CoreHelperUtil, 'isMobile').mockReturnValue(false)
+  })
+
+  afterEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('it should handle redirection if the wallet webapp link exists and URI is available', async () => {
+    vi.spyOn(ConnectionController, 'state', 'get').mockReturnValue({
+      ...ConnectionController.state,
+      wcUri: WC_URI
+    })
+    vi.spyOn(RouterController, 'state', 'get').mockReturnValue({
+      ...RouterController.state,
+      data: {
+        wallet: WALLET
+      }
+    })
+
+    const element = await fixture(html`<w3m-connecting-wc-web></w3m-connecting-wc-web>`)
+
+    expect(EventsController.sendEvent).toHaveBeenCalledWith({
+      type: 'track',
+      event: 'SELECT_WALLET',
+      properties: { name: WALLET.name, platform: 'web' }
+    })
+
+    // Test the "Open" button is not disabled
+    const button = element.shadowRoot?.querySelector('wui-button')
+    expect(button?.hasAttribute('disabled')).toBe(false)
+
+    // Simulate clicking the button
+    button?.click()
+
+    expect(ConnectionController.setWcLinking).toHaveBeenCalledWith({
+      name: WALLET.name,
+      href: WALLET.webapp_link
+    })
+    expect(ConnectionController.setRecentWallet).toHaveBeenCalledWith(WALLET)
+    expect(CoreHelperUtil.openHref).toHaveBeenCalledWith(REDIRECT_URL, '_blank')
+  })
+
+  it('it should disable the button if no URI is available', async () => {
+    vi.spyOn(ConnectionController, 'state', 'get').mockReturnValue({
+      ...ConnectionController.state,
+      wcUri: undefined
+    })
+    vi.spyOn(RouterController, 'state', 'get').mockReturnValue({
+      ...RouterController.state,
+      data: {
+        wallet: WALLET
+      }
+    })
+
+    const element = await fixture(html`<w3m-connecting-wc-web></w3m-connecting-wc-web>`)
+
+    // Verify the button is disabled
+    const button = element.shadowRoot?.querySelector('wui-button')
+    expect(button?.hasAttribute('disabled')).toBe(true)
+
+    // Simulate clicking the button
+    button?.click()
+
+    // Verify no actions are performed
+    expect(CoreHelperUtil.openHref).not.toHaveBeenCalled()
+  })
+})


Reviews:
user: login: copilot-pull-request-reviewer[bot]
body: ## Pull Request Overview

This PR improves the web wallet UX by disabling the "Open" button while the wallet connection is being established. Key changes include adding tests to verify button states, introducing an isLoading state in the wallet component, and integrating this state into the widget’s button disabled logic.

### Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.

| File                                                                                  | Description                                                                                         |
| ------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- |
| packages/scaffold-ui/test/partials/w3m-connecting-wc-web.test.ts                      | Added tests to verify that the "Open" button is enabled when a URI is available and disabled otherwise. |
| packages/scaffold-ui/src/partials/w3m-connecting-wc-web/index.ts                        | Introduced the isLoading state and update mechanism for controlling the button's clickable state.  |
| packages/scaffold-ui/src/utils/w3m-connecting-widget/index.ts                           | Updated the button's disabled attribute logic to consider the new isLoading state.                  |




state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-20T01:55:38Z
user: login: enesozturk
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-20T07:00:29Z
user: login: enesozturk
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-20T07:02:26Z
user: login: enesozturk
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-20T07:04:37Z

Review comments:
diff_hunk: @@ -0,0 +1,5 @@
+---
path: .changeset/every-actors-train.md
user: login: enesozturk
body: We need to select all packages while creating changeset 🙏🏽 
created_at: 2025-03-20T07:00:29Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,5 @@
+---
+'@reown/appkit-scaffold-ui': patch
+---
+
+disable `open` button until connection established
path: .changeset/every-actors-train.md
user: login: enesozturk
body: We generally follow a practice where explanations start with capital letters unlike the commits for changeset summary
created_at: 2025-03-20T07:02:25Z
author_association: CONTRIBUTOR

PR comments:
user: login: changeset-bot[bot]
created_at: 2025-03-20T01:54:18Z
body: ###  🦋  Changeset detected

Latest commit: 67da85cd221e448ea1f0dbf4084680043d814e72

**The changes in this PR will be included in the next version bump.**

<details><summary>This PR includes changesets to release 9 packages</summary>

  | Name                          | Type  |
| ----------------------------- | ----- |
| @reown/appkit-scaffold-ui     | Patch |
| @reown/appkit-adapter-ethers  | Patch |
| @reown/appkit-adapter-ethers5 | Patch |
| @reown/appkit-adapter-wagmi   | Patch |
| @reown/appkit                 | Patch |
| @reown/appkit-cdn             | Patch |
| @reown/appkit-adapter-bitcoin | Patch |
| @reown/appkit-adapter-solana  | Patch |
| @reown/appkit-experimental    | Patch |

</details>

Not sure what this means? [Click here  to learn what changesets are](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add another changeset to this PR](https://github.com/reown-com/appkit/new/feat/loading?filename=.changeset/tame-cougars-hope.md&value=---%0A%22%40reown%2Fappkit-scaffold-ui%22%3A%20patch%0A---%0A%0Afeat(web-wallet)%3A%20disable%20button%20while%20loading%0A)


author_association: NONE
user: login: vercel[bot]
created_at: 2025-03-20T01:54:20Z
body: [vc]: #tyJ6kuHGduMayupgoLYjpTsOfRrCMvtudG1WY7E6hps=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJhcHBraXQtbGFib3JhdG9yeSIsInJvb3REaXJlY3RvcnkiOm51bGwsImluc3BlY3RvclVybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS9yZW93bi1jb20vYXBwa2l0LWxhYm9yYXRvcnkvQ0ROSGlNNXhjVkhUWHFrdlFDRDZpYTVBOGRpaiIsInByZXZpZXdVcmwiOiJhcHBraXQtbGFib3JhdG9yeS1naXQtZmVhdC1sb2FkaW5nLXJlb3duLWNvbS52ZXJjZWwuYXBwIiwibmV4dENvbW1pdFN0YXR1cyI6IkRFUExPWUVEIiwibGl2ZUZlZWRiYWNrIjp7InJlc29sdmVkIjowLCJ1bnJlc29sdmVkIjowLCJ0b3RhbCI6MCwibGluayI6ImFwcGtpdC1sYWJvcmF0b3J5LWdpdC1mZWF0LWxvYWRpbmctcmVvd24tY29tLnZlcmNlbC5hcHAifX0seyJuYW1lIjoiYXBwa2l0LXdhZ21pLWNkbi1leGFtcGxlIiwicm9vdERpcmVjdG9yeSI6bnVsbCwibGl2ZUZlZWRiYWNrIjp7InJlc29sdmVkIjowLCJ1bnJlc29sdmVkIjowLCJ0b3RhbCI6MCwibGluayI6IiJ9LCJpbnNwZWN0b3JVcmwiOiJodHRwczovL3ZlcmNlbC5jb20vcmVvd24tY29tL2FwcGtpdC13YWdtaS1jZG4tZXhhbXBsZS84Vzk0bVpYanR0c2RGaVg4OG1yYnh0YXdtSEZVIiwibmV4dENvbW1pdFN0YXR1cyI6IklHTk9SRUQifSx7Im5hbWUiOiJ2dWUtd2FnbWktZXhhbXBsZSIsInJvb3REaXJlY3RvcnkiOm51bGwsImxpdmVGZWVkYmFjayI6eyJyZXNvbHZlZCI6MCwidW5yZXNvbHZlZCI6MCwidG90YWwiOjAsImxpbmsiOiIifSwiaW5zcGVjdG9yVXJsIjoiaHR0cHM6Ly92ZXJjZWwuY29tL3Jlb3duLWNvbS92dWUtd2FnbWktZXhhbXBsZS84c1Y0YnRpRzFoTVJRQm5jeVlCUFdOOUdYcEw3IiwibmV4dENvbW1pdFN0YXR1cyI6IklHTk9SRUQifSx7Im5hbWUiOiJhcHBraXQtdnVlLXNvbGFuYSIsInJvb3REaXJlY3RvcnkiOm51bGwsImxpdmVGZWVkYmFjayI6eyJyZXNvbHZlZCI6MCwidW5yZXNvbHZlZCI6MCwidG90YWwiOjAsImxpbmsiOiIifSwiaW5zcGVjdG9yVXJsIjoiaHR0cHM6Ly92ZXJjZWwuY29tL3Jlb3duLWNvbS9hcHBraXQtdnVlLXNvbGFuYS82OVR4QlA0bXFSdjhqVkVRdkZKSzdVeENldktjIiwibmV4dENvbW1pdFN0YXR1cyI6IklHTk9SRUQifSx7Im5hbWUiOiJhcHBraXQtZGVtbyIsInJvb3REaXJlY3RvcnkiOm51bGwsImluc3BlY3RvclVybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS9yZW93bi1jb20vYXBwa2l0LWRlbW8vSjd2WnU5NHR2OHl0MmFhcDRNdFFrV282TGlSYiIsInByZXZpZXdVcmwiOiJhcHBraXQtZGVtby1naXQtZmVhdC1sb2FkaW5nLXJlb3duLWNvbS52ZXJjZWwuYXBwIiwibmV4dENvbW1pdFN0YXR1cyI6IkRFUExPWUVEIiwibGl2ZUZlZWRiYWNrIjp7InJlc29sdmVkIjowLCJ1bnJlc29sdmVkIjowLCJ0b3RhbCI6MCwibGluayI6ImFwcGtpdC1kZW1vLWdpdC1mZWF0LWxvYWRpbmctcmVvd24tY29tLnZlcmNlbC5hcHAifX0seyJuYW1lIjoiZXRoZXJldW0tcHJvdmlkZXItd2FnbWktZXhhbXBsZSIsInJvb3REaXJlY3RvcnkiOm51bGwsImxpdmVGZWVkYmFjayI6eyJyZXNvbHZlZCI6MCwidW5yZXNvbHZlZCI6MCwidG90YWwiOjAsImxpbmsiOiIifSwiaW5zcGVjdG9yVXJsIjoiaHR0cHM6Ly92ZXJjZWwuY29tL3Jlb3duLWNvbS9ldGhlcmV1bS1wcm92aWRlci13YWdtaS1leGFtcGxlL0d1WnB6bzVqTTF2alNYbmRrb2ZqWWgxVFIxZkwiLCJuZXh0Q29tbWl0U3RhdHVzIjoiSUdOT1JFRCIsInByZXZpZXdVcmwiOiJldGhlcmV1bS1wcm92aWRlci13YWdtaS1leGFtcGxlLWdpdC1mZWF0LWxvYWRpbmctcmVvd24tY29tLnZlcmNlbC5hcHAifSx7Im5hbWUiOiJhcHBraXQtYmFzaWMtZXhhbXBsZSIsInJvb3REaXJlY3RvcnkiOiJleGFtcGxlcy9odG1sLWFrLWJhc2ljIiwibGl2ZUZlZWRiYWNrIjp7InJlc29sdmVkIjowLCJ1bnJlc29sdmVkIjowLCJ0b3RhbCI6MCwibGluayI6IiJ9LCJpbnNwZWN0b3JVcmwiOiJodHRwczovL3ZlcmNlbC5jb20vcmVvd24tY29tL2FwcGtpdC1iYXNpYy1leGFtcGxlLzdpNXJEU3Y2YlJGd3c1ckRZMXk1OUIxVzl3ZVkiLCJuZXh0Q29tbWl0U3RhdHVzIjoiSUdOT1JFRCJ9LHsibmFtZSI6ImFwcGtpdC1iYXNpYy11cC1leGFtcGxlIiwicm9vdERpcmVjdG9yeSI6ImV4YW1wbGVzL2h0bWwtYWstYmFzaWMtdXAiLCJsaXZlRmVlZGJhY2siOnsicmVzb2x2ZWQiOjAsInVucmVzb2x2ZWQiOjAsInRvdGFsIjowLCJsaW5rIjoiIn0sImluc3BlY3RvclVybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS9yZW93bi1jb20vYXBwa2l0LWJhc2ljLXVwLWV4YW1wbGUvRFR4Z2dpMUx1NERlWWl3VmQyWlY2OWVxWTliSiIsIm5leHRDb21taXRTdGF0dXMiOiJJR05PUkVEIn0seyJuYW1lIjoiYXBwa2l0LWJhc2ljLXNpZ24tY2xpZW50LWV4YW1wbGUiLCJyb290RGlyZWN0b3J5IjoiZXhhbXBsZXMvaHRtbC1hay1iYXNpYy1zaWduLWNsaWVudCIsImxpdmVGZWVkYmFjayI6eyJyZXNvbHZlZCI6MCwidW5yZXNvbHZlZCI6MCwidG90YWwiOjAsImxpbmsiOiIifSwiaW5zcGVjdG9yVXJsIjoiaHR0cHM6Ly92ZXJjZWwuY29tL3Jlb3duLWNvbS9hcHBraXQtYmFzaWMtc2lnbi1jbGllbnQtZXhhbXBsZS9HZHkxN25SdktROFBOSEhjakd6aWdKbVRmdHVRIiwibmV4dENvbW1pdFN0YXR1cyI6IklHTk9SRUQifSx7Im5hbWUiOiJhcHBraXQtYmFzaWMtZXAtZXhhbXBsZSIsInJvb3REaXJlY3RvcnkiOiJleGFtcGxlcy9odG1sLWVwIiwibGl2ZUZlZWRiYWNrIjp7InJlc29sdmVkIjowLCJ1bnJlc29sdmVkIjowLCJ0b3RhbCI6MCwibGluayI6IiJ9LCJpbnNwZWN0b3JVcmwiOiJodHRwczovL3ZlcmNlbC5jb20vcmVvd24tY29tL2FwcGtpdC1iYXNpYy1lcC1leGFtcGxlLzVnaEp4WTd4UmZUZ1RSRUN4dFpHRXpkcFpUakoiLCJuZXh0Q29tbWl0U3RhdHVzIjoiSUdOT1JFRCJ9LHsibmFtZSI6ImFwcGtpdC1iYXNpYy1lcCIsInJvb3REaXJlY3RvcnkiOiJleGFtcGxlcy9odG1sLWVwIiwibGl2ZUZlZWRiYWNrIjp7InJlc29sdmVkIjowLCJ1bnJlc29sdmVkIjowLCJ0b3RhbCI6MCwibGluayI6IiJ9LCJpbnNwZWN0b3JVcmwiOiJodHRwczovL3ZlcmNlbC5jb20vcmVvd24tY29tL2FwcGtpdC1iYXNpYy1lcC8yeExGNzFmUEpwQkpHUldpZm1rTjlGd3ZLQWZMIiwibmV4dENvbW1pdFN0YXR1cyI6IklHTk9SRUQifSx7Im5hbWUiOiJhcHBraXQtZXRoZXJzNS1iZXJhIiwicm9vdERpcmVjdG9yeSI6bnVsbCwibGl2ZUZlZWRiYWNrIjp7InJlc29sdmVkIjowLCJ1bnJlc29sdmVkIjowLCJ0b3RhbCI6MCwibGluayI6IiJ9LCJpbnNwZWN0b3JVcmwiOiJodHRwczovL3ZlcmNlbC5jb20vcmVvd24tY29tL2FwcGtpdC1ldGhlcnM1LWJlcmEvOVpzd3gxUnJzRnZlREFYN3RTbXNzOEgxTHJHaSIsIm5leHRDb21taXRTdGF0dXMiOiJJR05PUkVEIn0seyJuYW1lIjoibmV4dC13YWdtaS1zb2xhbmEtYml0Y29pbi1leGFtcGxlIiwicm9vdERpcmVjdG9yeSI6bnVsbCwibGl2ZUZlZWRiYWNrIjp7InJlc29sdmVkIjowLCJ1bnJlc29sdmVkIjowLCJ0b3RhbCI6MCwibGluayI6IiJ9LCJpbnNwZWN0b3JVcmwiOiJodHRwczovL3ZlcmNlbC5jb20vcmVvd24tY29tL25leHQtd2FnbWktc29sYW5hLWJpdGNvaW4tZXhhbXBsZS82Qzc4VlJoTHB3QldHN1E0UDg1WjZoZ3JkQTZLIiwibmV4dENvbW1pdFN0YXR1cyI6IklHTk9SRUQifSx7Im5hbWUiOiJhcHBraXQtbmFuc2VuLWRlbW8iLCJyb290RGlyZWN0b3J5IjoiZXhhbXBsZXMvYXBwa2l0LWNvcmUvZGVtb3MvbmFuc2VuIiwibGl2ZUZlZWRiYWNrIjp7InJlc29sdmVkIjowLCJ1bnJlc29sdmVkIjowLCJ0b3RhbCI6MCwibGluayI6IiJ9LCJpbnNwZWN0b3JVcmwiOiJodHRwczovL3ZlcmNlbC5jb20vcmVvd24tY29tL2FwcGtpdC1uYW5zZW4tZGVtby83UjFheG9jNTNpaVd5V2UyRm9YVnNHM2VGUnpIIiwibmV4dENvbW1pdFN0YXR1cyI6IklHTk9SRUQifV19
**The latest updates on your projects**. Learn more about [Vercel for Git ↗︎](https://vercel.link/github-learn-more)

| Name | Status | Preview | Comments | Updated (UTC) |
| :--- | :----- | :------ | :------- | :------ |
| **appkit-demo** | ✅ Ready ([Inspect](https://vercel.com/reown-com/appkit-demo/J7vZu94tv8yt2aap4MtQkWo6LiRb)) | [Visit Preview](https://appkit-demo-git-feat-loading-reown-com.vercel.app) | 💬 [**Add feedback**](https://vercel.live/open-feedback/appkit-demo-git-feat-loading-reown-com.vercel.app?via=pr-comment-feedback-link) | Mar 20, 2025 2:22am |
| **appkit-laboratory** | ✅ Ready ([Inspect](https://vercel.com/reown-com/appkit-laboratory/CDNHiM5xcVHTXqkvQCD6ia5A8dij)) | [Visit Preview](https://appkit-laboratory-git-feat-loading-reown-com.vercel.app) | 💬 [**Add feedback**](https://vercel.live/open-feedback/appkit-laboratory-git-feat-loading-reown-com.vercel.app?via=pr-comment-feedback-link) | Mar 20, 2025 2:22am |

<details><summary>12 Skipped Deployments</summary>

| Name | Status | Preview | Comments | Updated (UTC) |
| :--- | :----- | :------ | :------- | :------ |
| **appkit-basic-ep** | ⬜️ Ignored ([Inspect](https://vercel.com/reown-com/appkit-basic-ep/2xLF71fPJpBJGRWifmkN9FwvKAfL)) |  |  | Mar 20, 2025 2:22am |
| **appkit-basic-ep-example** | ⬜️ Ignored ([Inspect](https://vercel.com/reown-com/appkit-basic-ep-example/5ghJxY7xRfTgTRECxtZGEzdpZTjJ)) |  |  | Mar 20, 2025 2:22am |
| **appkit-basic-example** | ⬜️ Ignored ([Inspect](https://vercel.com/reown-com/appkit-basic-example/7i5rDSv6bRFww5rDY1y59B1W9weY)) |  |  | Mar 20, 2025 2:22am |
| **appkit-basic-sign-client-example** | ⬜️ Ignored ([Inspect](https://vercel.com/reown-com/appkit-basic-sign-client-example/Gdy17nRvKQ8PNHHcjGzigJmTftuQ)) |  |  | Mar 20, 2025 2:22am |
| **appkit-basic-up-example** | ⬜️ Ignored ([Inspect](https://vercel.com/reown-com/appkit-basic-up-example/DTxggi1Lu4DeYiwVd2ZV69eqY9bJ)) |  |  | Mar 20, 2025 2:22am |
| **appkit-ethers5-bera** | ⬜️ Ignored ([Inspect](https://vercel.com/reown-com/appkit-ethers5-bera/9Zswx1RrsFveDAX7tSmss8H1LrGi)) |  |  | Mar 20, 2025 2:22am |
| **appkit-nansen-demo** | ⬜️ Ignored ([Inspect](https://vercel.com/reown-com/appkit-nansen-demo/7R1axoc53iiWyWe2FoXVsG3eFRzH)) |  |  | Mar 20, 2025 2:22am |
| **appkit-vue-solana** | ⬜️ Ignored ([Inspect](https://vercel.com/reown-com/appkit-vue-solana/69TxBP4mqRv8jVEQvFJK7UxCevKc)) |  |  | Mar 20, 2025 2:22am |
| **appkit-wagmi-cdn-example** | ⬜️ Ignored ([Inspect](https://vercel.com/reown-com/appkit-wagmi-cdn-example/8W94mZXjttsdFiX88mrbxtawmHFU)) |  |  | Mar 20, 2025 2:22am |
| **ethereum-provider-wagmi-example** | ⬜️ Ignored ([Inspect](https://vercel.com/reown-com/ethereum-provider-wagmi-example/GuZpzo5jM1vjSXndkofjYh1TR1fL)) | [Visit Preview](https://ethereum-provider-wagmi-example-git-feat-loading-reown-com.vercel.app) |  | Mar 20, 2025 2:22am |
| **next-wagmi-solana-bitcoin-example** | ⬜️ Ignored ([Inspect](https://vercel.com/reown-com/next-wagmi-solana-bitcoin-example/6C78VRhLpwBWG7Q4P85Z6hgrdA6K)) |  |  | Mar 20, 2025 2:22am |
| **vue-wagmi-example** | ⬜️ Ignored ([Inspect](https://vercel.com/reown-com/vue-wagmi-example/8sV4btiG1hMRQBncyYBPWN9GXpL7)) |  |  | Mar 20, 2025 2:22am |
</details>















author_association: NONE
user: login: github-actions[bot]
created_at: 2025-03-20T02:01:09Z
body: 
<!--
  0 failure: 
  2 warning:  File packages/sca..., File packages/sca...
  
  
  DangerID: danger-id-Danger;
-->


<table>
  <thead>
    <tr>
      <th width="50"></th>
      <th width="100%" data-danger-table="true">Warnings</th>
    </tr>
  </thead>
  <tbody><tr>
      <td>:warning:</td>
      <td>File packages/scaffold-ui/src/partials/w3m-connecting-wc-web/index.ts contains a KEY or SECRET</td>
    </tr>
  
<tr>
      <td>:warning:</td>
      <td>File packages/scaffold-ui/src/utils/w3m-connecting-widget/index.ts contains a KEY or SECRET</td>
    </tr>
  </tbody>
</table>



<p align="right">
  Generated by :no_entry_sign: <a href="https://danger.systems/js">dangerJS</a> against 67da85cd221e448ea1f0dbf4084680043d814e72
</p>

author_association: CONTRIBUTOR
user: login: github-actions[bot]
created_at: 2025-03-20T02:03:08Z
body: <h2>Coverage Report</h2>
<table> <thead> <tr> <th align="center">Status</th> <th align="left">Category</th> <th align="right">Percentage</th> <th align="right">Covered / Total</th> </tr> </thead> <tbody> <tr> <td align="center">🔵</td> <td align="left">Lines</td> <td align="right">74.82%</td> <td align="right">24449 / 32675</td> </tr> <tr> <td align="center">🔵</td> <td align="left">Statements</td> <td align="right">74.82%</td> <td align="right">24449 / 32675</td> </tr> <tr> <td align="center">🔵</td> <td align="left">Functions</td> <td align="right">66%</td> <td align="right">2058 / 3118</td> </tr> <tr> <td align="center">🔵</td> <td align="left">Branches</td> <td align="right">82.18%</td> <td align="right">4581 / 5574</td> </tr> </tbody> </table><details><summary>File Coverage</summary><table> <thead> <tr> <th align="left">File</th> <th align="right">Stmts</th> <th align="right">Branches</th> <th align="right">Functions</th> <th align="right">Lines</th> <th align="left">Uncovered Lines</th> </tr> </thead> <tbody> <tr> <td align="left" colspan="6"><b>Changed Files</b></td> </tr> <tr> <td align="left"><a href="https://github.com/reown-com/appkit/blob/67da85cd221e448ea1f0dbf4084680043d814e72/packages/scaffold-ui/src/partials/w3m-connecting-wc-web/index.ts">packages/scaffold-ui/src/partials/w3m-connecting-wc-web/index.ts</a></td> <td align="right">88.37%</td> <td align="right">66.66%</td> <td align="right">75%</td> <td align="right">88.37%</td> <td align="left"><a href="https://github.com/reown-com/appkit/blob/67da85cd221e448ea1f0dbf4084680043d814e72/packages/scaffold-ui/src/partials/w3m-connecting-wc-web/index.ts#L16-L17" class="text-red">16-17</a>, <a href="https://github.com/reown-com/appkit/blob/67da85cd221e448ea1f0dbf4084680043d814e72/packages/scaffold-ui/src/partials/w3m-connecting-wc-web/index.ts#L27" class="text-red">27</a>, <a href="https://github.com/reown-com/appkit/blob/67da85cd221e448ea1f0dbf4084680043d814e72/packages/scaffold-ui/src/partials/w3m-connecting-wc-web/index.ts#L54-L55" class="text-red">54-55</a></td> </tr> <tr> <td align="left"><a href="https://github.com/reown-com/appkit/blob/67da85cd221e448ea1f0dbf4084680043d814e72/packages/scaffold-ui/src/utils/w3m-connecting-widget/index.ts">packages/scaffold-ui/src/utils/w3m-connecting-widget/index.ts</a></td> <td align="right">80.15%</td> <td align="right">75.75%</td> <td align="right">66.66%</td> <td align="right">80.15%</td> <td align="left"><a href="https://github.com/reown-com/appkit/blob/67da85cd221e448ea1f0dbf4084680043d814e72/packages/scaffold-ui/src/utils/w3m-connecting-widget/index.ts#L81-L85" class="text-red">81-85</a>, <a href="https://github.com/reown-com/appkit/blob/67da85cd221e448ea1f0dbf4084680043d814e72/packages/scaffold-ui/src/utils/w3m-connecting-widget/index.ts#L94-L95" class="text-red">94-95</a>, <a href="https://github.com/reown-com/appkit/blob/67da85cd221e448ea1f0dbf4084680043d814e72/packages/scaffold-ui/src/utils/w3m-connecting-widget/index.ts#L97-L98" class="text-red">97-98</a>, <a href="https://github.com/reown-com/appkit/blob/67da85cd221e448ea1f0dbf4084680043d814e72/packages/scaffold-ui/src/utils/w3m-connecting-widget/index.ts#L107-L109" class="text-red">107-109</a>, <a href="https://github.com/reown-com/appkit/blob/67da85cd221e448ea1f0dbf4084680043d814e72/packages/scaffold-ui/src/utils/w3m-connecting-widget/index.ts#L123-L124" class="text-red">123-124</a>, <a href="https://github.com/reown-com/appkit/blob/67da85cd221e448ea1f0dbf4084680043d814e72/packages/scaffold-ui/src/utils/w3m-connecting-widget/index.ts#L190" class="text-red">190</a>, <a href="https://github.com/reown-com/appkit/blob/67da85cd221e448ea1f0dbf4084680043d814e72/packages/scaffold-ui/src/utils/w3m-connecting-widget/index.ts#L209-L210" class="text-red">209-210</a>, <a href="https://github.com/reown-com/appkit/blob/67da85cd221e448ea1f0dbf4084680043d814e72/packages/scaffold-ui/src/utils/w3m-connecting-widget/index.ts#L226-L234" class="text-red">226-234</a></td> </tr> </tbody> </table></details>
<em>Generated in workflow <a href=https://github.com/reown-com/appkit/actions/runs/13960573499>#10359</a> for commit <a href="https://github.com/reown-com/appkit/commit/67da85cd221e448ea1f0dbf4084680043d814e72">67da85c</a> by the <a href="https://github.com/davelosert/vitest-coverage-report-action">Vitest Coverage Report Action</a></em>

<!-- vitest-coverage-report-marker-root -->
author_association: CONTRIBUTOR