chore: remove ontouchstart event from buttons (#3746)

.changeset/old-news-film.md

@@ -0,0 +1,23 @@
+---
+'@reown/appkit-scaffold-ui': patch
+'@reown/appkit-ui': patch
+'@reown/appkit-adapter-bitcoin': patch
+'@reown/appkit-adapter-ethers': patch
+'@reown/appkit-adapter-ethers5': patch
+'@reown/appkit-adapter-solana': patch
+'@reown/appkit-adapter-wagmi': patch
+'@reown/appkit': patch
+'@reown/appkit-utils': patch
+'@reown/appkit-cdn': patch
+'@reown/appkit-cli': patch
+'@reown/appkit-common': patch
+'@reown/appkit-core': patch
+'@reown/appkit-experimental': patch
+'@reown/appkit-polyfills': patch
+'@reown/appkit-siwe': patch
+'@reown/appkit-siwx': patch
+'@reown/appkit-wallet': patch
+'@reown/appkit-wallet-button': patch
+---
+
+Remove ontouchstart events from buttons

packages/scaffold-ui/src/partials/w3m-all-wallets-list-item/index.ts

@@ -54,7 +54,7 @@ export class W3mAllWalletsListItem extends LitElement {
     const certified = this.wallet?.badge_type === 'certified'
 
     return html`
-      <button ontouchstart>
+      <button>
         ${this.imageTemplate()}
         <wui-flex flexDirection="row" alignItems="center" justifyContent="center" gap="3xs">
           <wui-text

packages/scaffold-ui/src/partials/w3m-onramp-provider-item/index.ts

@@ -29,7 +29,7 @@ export class W3mOnRampProviderItem extends LitElement {
   // -- Render -------------------------------------------- //
   public override render() {
     return html`
-      <button ?disabled=${this.disabled} ontouchstart>
+      <button ?disabled=${this.disabled}>
         <wui-visual name=${ifDefined(this.name)} class="provider-image"></wui-visual>
         <wui-flex flexDirection="column" gap="4xs">
           <wui-text variant="paragraph-500" color="fg-100">${this.label}</wui-text>

packages/ui-new/src/composites/wui-button/index.ts

@@ -51,12 +51,7 @@ export class WuiButton extends LitElement {
     const textVariant = this.textVariant ?? TEXT_VARIANT_BY_SIZE[this.size]
 
     return html`
-      <button
-        data-variant=${this.variant}
-        data-size=${this.size}
-        ?disabled=${this.disabled}
-        ontouchstart
-      >
+      <button data-variant=${this.variant} data-size=${this.size} ?disabled=${this.disabled}>
         ${this.loadingTemplate()}
         <slot name="iconLeft"></slot>
         <wui-text variant=${textVariant} color="inherit">

packages/ui-new/src/composites/wui-card-select/index.ts

@@ -31,7 +31,7 @@ export class WuiCardSelect extends LitElement {
   // -- Render -------------------------------------------- //
   public override render() {
     return html`
-      <button data-selected=${ifDefined(this.selected)} ?disabled=${this.disabled} ontouchstart>
+      <button data-selected=${ifDefined(this.selected)} ?disabled=${this.disabled}>
         ${this.imageTemplate()}
         <wui-text variant="tiny-500" color=${this.selected ? 'accent-100' : 'inherit'}>
           ${this.name}

packages/ui-new/src/composites/wui-compatible-network/index.ts

@@ -21,7 +21,7 @@ export class WuiCompatibleNetwork extends LitElement {
   // -- Render -------------------------------------------- //
   public override render() {
     return html`
-      <button ontouchstart>
+      <button>
         <wui-text variant="small-400" color="fg-200">${this.text}</wui-text>
         <wui-flex gap="3xs" alignItems="center">
           ${this.networksTemplate()}

packages/ui-new/src/composites/wui-connect-button/index.ts

@@ -23,7 +23,7 @@ export class WuiConnectButton extends LitElement {
     const textVariant = this.size === 'md' ? 'paragraph-600' : 'small-600'
 
     return html`
-      <button data-size=${this.size} ?disabled=${this.loading} ontouchstart>
+      <button data-size=${this.size} ?disabled=${this.loading}>
         ${this.loadingTemplate()}
         <wui-text variant=${textVariant} color=${this.loading ? 'accent-100' : 'inherit'}>
           <slot></slot>

packages/ui-new/src/composites/wui-icon-link/index.ts

@@ -31,7 +31,7 @@ export class WuiIconLink extends LitElement {
 `
 
     return html`
-      <button ?disabled=${this.disabled} ontouchstart>
+      <button ?disabled=${this.disabled}>
         <wui-icon color=${this.iconColor} size=${this.size} name=${this.icon}></wui-icon>
       </button>
     `

packages/ui-new/src/composites/wui-link/index.ts

@@ -39,7 +39,7 @@ export class WuiLink extends LitElement {
   // -- Render -------------------------------------------- //
   public override render() {
     return html`
-      <button ?disabled=${this.disabled} data-variant=${this.variant} ontouchstart>
+      <button ?disabled=${this.disabled} data-variant=${this.variant}>
         <wui-text
           color=${TEXT_COLOR_BY_VARIANT[this.variant]}
           variant=${TEXT_VARIANT_BY_SIZE[this.size]}

packages/ui-new/src/composites/wui-list-accordion/index.ts

@@ -53,7 +53,7 @@ export class WuiListAccordion extends LitElement {
   // -- Render -------------------------------------------- //
   public override render() {
     return html`
-      <button ontouchstart @click=${() => this.onClick()}>
+      <button @click=${() => this.onClick()}>
         <wui-flex justifyContent="space-between" alignItems="center">
           <wui-text variant="paragraph-500" color="fg-100">${this.textTitle}</wui-text>
           ${this.chevronTemplate()}

packages/ui-new/src/composites/wui-list-button/index.ts

@@ -21,7 +21,7 @@ export class WuiListButton extends LitElement {
   // -- Render -------------------------------------------- //
   public override render() {
     return html`
-      <button ?disabled=${this.disabled} tabindex=${ifDefined(this.tabIdx)} ontouchstart>
+      <button ?disabled=${this.disabled} tabindex=${ifDefined(this.tabIdx)}>
         <wui-text align="center" variant="paragraph-500" color="inherit">${this.text}</wui-text>
       </button>
     `

packages/ui-new/src/composites/wui-list-description/index.ts

@@ -31,7 +31,7 @@ export class WuiListDescription extends LitElement {
   // -- Render -------------------------------------------- //
   public override render() {
     return html`
-      <button ontouchstart ?disabled=${this.disabled}>
+      <button ?disabled=${this.disabled}>
         <wui-icon-box
           iconColor=${this.iconColor}
           backgroundColor=${this.iconBackgroundColor}

packages/ui-new/src/composites/wui-list-item/index.ts

@@ -46,7 +46,6 @@ export class WuiListItem extends LitElement {
         data-loading=${this.loading}
         data-iconvariant=${ifDefined(this.iconVariant)}
         tabindex=${ifDefined(this.tabIdx)}
-        ontouchstart
       >
         ${this.loadingTemplate()} ${this.visualTemplate()}
         <wui-flex gap="3xs">

packages/ui-new/src/composites/wui-list-network/index.ts

@@ -25,7 +25,7 @@ export class WuiListNetwork extends LitElement {
   // -- Render -------------------------------------------- //
   public override render() {
     return html`
-      <button data-transparent=${this.transparent} ?disabled=${this.disabled} ontouchstart>
+      <button data-transparent=${this.transparent} ?disabled=${this.disabled}>
         <wui-flex gap="s" alignItems="center">
           ${this.templateNetworkImage()}
           <wui-text variant="paragraph-500" color="inherit">${this.name}</wui-text></wui-flex

packages/ui-new/src/composites/wui-list-select-account/index.ts

@@ -30,7 +30,7 @@ export class WuiListSelectAccount extends LitElement {
   // -- Render -------------------------------------------- //
   public override render() {
     return html`
-      <button ?disabled=${this.disabled} ontouchstart>
+      <button ?disabled=${this.disabled}>
         <wui-avatar size="sm" address=${this.address}></wui-avatar>
         <wui-icon class="avatarIcon" size="xs" name=${this.icon}></wui-icon>
 

packages/ui-new/src/composites/wui-list-select-wallet/index.ts

@@ -29,7 +29,7 @@ export class WuiListSelectWallet extends LitElement {
   // -- Render -------------------------------------------- //
   public override render() {
     return html`
-      <button ?disabled=${this.disabled} ontouchstart>
+      <button ?disabled=${this.disabled}>
         ${this.leftImageTemplate()}
         <wui-text color="primary" variant="lg-regular" lineClamp="1">${this.name}</wui-text>
         <wui-tag variant=${this.allWallets ? 'info' : 'accent'} size="sm">${this.tagLabel}</wui-tag>

packages/ui-new/src/composites/wui-list-social/index.ts

@@ -27,7 +27,7 @@ export class WuiListSocial extends LitElement {
   // -- Render -------------------------------------------- //
   public override render() {
     return html`
-      <button ?disabled=${this.disabled} tabindex=${ifDefined(this.tabIdx)} ontouchstart>
+      <button ?disabled=${this.disabled} tabindex=${ifDefined(this.tabIdx)}>
         <wui-logo logo=${this.logo}></wui-logo>
         <wui-text
           data-align=${this.align}

packages/ui-new/src/composites/wui-list-token/index.ts

@@ -29,7 +29,7 @@ export class WuiListToken extends LitElement {
   // -- Render -------------------------------------------- //
   public override render() {
     return html`
-      <button data-clickable=${String(this.clickable)} ontouchstart>
+      <button data-clickable=${String(this.clickable)}>
         <wui-flex gap="s" alignItems="center">
           ${this.visualTemplate()}
           <wui-flex flexDirection="column" justifyContent="spaceBetween">

packages/ui-new/src/composites/wui-logo-select/index.ts

@@ -22,7 +22,7 @@ export class WuiLogoSelect extends LitElement {
   // -- Render -------------------------------------------- //
   public override render() {
     return html`
-      <button ?disabled=${this.disabled} tabindex=${ifDefined(this.tabIdx)} ontouchstart>
+      <button ?disabled=${this.disabled} tabindex=${ifDefined(this.tabIdx)}>
         <wui-logo logo=${this.logo}></wui-logo>
       </button>
     `

packages/ui-new/src/composites/wui-network-switch/index.ts

@@ -45,7 +45,7 @@ export class WuiNetworkSwitch extends LitElement {
   // -- Render -------------------------------------------- //
   public override render() {
     return html`
-      <button ?disabled=${this.disabled} ontouchstart>
+      <button ?disabled=${this.disabled}>
         ${this.leftIconTemplate()}
         <wui-text color="primary" variant=${TEXT_VARIANT_BY_SIZE[this.size]}>
           <slot></slot>

packages/ui-new/src/composites/wui-profile-button-v2/index.ts

@@ -39,7 +39,7 @@ export class WuiProfileButtonV2 extends LitElement {
     const connectorId = StorageUtil.getConnectedConnectorId(namespace)
     const shouldShowIcon = connectorId === ConstantsUtil.CONNECTOR_ID.AUTH
 
-    return html`<button ontouchstart data-testid="wui-profile-button" @click=${this.handleClick}>
+    return html`<button data-testid="wui-profile-button" @click=${this.handleClick}>
       <wui-flex gap="xs" alignItems="center">
         <wui-avatar
           .imageSrc=${this.avatarSrc}

packages/ui-new/src/composites/wui-profile-button/index.ts

@@ -30,7 +30,7 @@ export class WuiProfileButton extends LitElement {
 
   // -- Render -------------------------------------------- //
   public override render() {
-    return html`<button ontouchstart data-testid="wui-profile-button">
+    return html`<button data-testid="wui-profile-button">
       <wui-flex gap="xs" alignItems="center">
         <wui-avatar
           .imageSrc=${this.avatarSrc}

packages/ui-new/src/composites/wui-promo/index.ts

@@ -16,7 +16,7 @@ export class WuiPromo extends LitElement {
 
   // -- Render -------------------------------------------- //
   public override render() {
-    return html`<button ontouchstart>
+    return html`<button>
       <wui-text variant="small-600" color="bg-100">${this.text}</wui-text>
       <wui-icon color="bg-100" size="xs" name="arrowRight"></wui-icon>
     </button>`

packages/ui-new/src/composites/wui-shortcut/index.ts

@@ -36,12 +36,7 @@ export class WuiShortcut extends LitElement {
   // -- Render -------------------------------------------- //
   public override render() {
     return html`
-      <button
-        data-variant=${this.variant}
-        data-size=${this.size}
-        ?disabled=${this.disabled}
-        ontouchstart
-      >
+      <button data-variant=${this.variant} data-size=${this.size} ?disabled=${this.disabled}>
         <wui-icon
           color=${ifDefined(this.iconColor)}
           size=${this.iconSize}

packages/ui-new/src/composites/wui-token-button/index.ts

@@ -20,7 +20,7 @@ export class WuiTokenButton extends LitElement {
   // -- Render -------------------------------------------- //
   public override render() {
     return html`
-      <button ontouchstart>
+      <button>
         ${this.tokenTemplate()}
         <wui-text variant="paragraph-600" color="fg-100">${this.text}</wui-text>
       </button>

packages/ui/src/composites/wui-button/index.ts

@@ -73,7 +73,6 @@ export class WuiButton extends LitElement {
         data-icon-right=${this.hasIconRight}
         data-size=${this.size}
         ?disabled=${this.disabled}
-        ontouchstart
       >
         ${this.loadingTemplate()}
         <slot name="iconLeft" @slotchange=${() => this.handleSlotLeftChange()}></slot>

packages/ui/src/composites/wui-card-select/index.ts

@@ -31,7 +31,7 @@ export class WuiCardSelect extends LitElement {
   // -- Render -------------------------------------------- //
   public override render() {
     return html`
-      <button data-selected=${ifDefined(this.selected)} ?disabled=${this.disabled} ontouchstart>
+      <button data-selected=${ifDefined(this.selected)} ?disabled=${this.disabled}>
         ${this.imageTemplate()}
         <wui-text variant="tiny-500" color=${this.selected ? 'accent-100' : 'inherit'}>
           ${this.name}

packages/ui/src/composites/wui-compatible-network/index.ts

@@ -21,7 +21,7 @@ export class WuiCompatibleNetwork extends LitElement {
   // -- Render -------------------------------------------- //
   public override render() {
     return html`
-      <button ontouchstart>
+      <button>
         <wui-text variant="small-400" color="fg-200">${this.text}</wui-text>
         <wui-flex gap="3xs" alignItems="center">
           ${this.networksTemplate()}

packages/ui/src/composites/wui-connect-button/index.ts

@@ -23,7 +23,7 @@ export class WuiConnectButton extends LitElement {
     const textVariant = this.size === 'md' ? 'paragraph-600' : 'small-600'
 
     return html`
-      <button data-size=${this.size} ?disabled=${this.loading} ontouchstart>
+      <button data-size=${this.size} ?disabled=${this.loading}>
         ${this.loadingTemplate()}
         <wui-text variant=${textVariant} color=${this.loading ? 'accent-100' : 'inherit'}>
           <slot></slot>

packages/ui/src/composites/wui-icon-link/index.ts

@@ -31,7 +31,7 @@ export class WuiIconLink extends LitElement {
 `
 
     return html`
-      <button ?disabled=${this.disabled} ontouchstart>
+      <button ?disabled=${this.disabled}>
         <wui-icon color=${this.iconColor} size=${this.size} name=${this.icon}></wui-icon>
       </button>
     `

packages/ui/src/composites/wui-link/index.ts

@@ -23,7 +23,7 @@ export class WuiLink extends LitElement {
   // -- Render -------------------------------------------- //
   public override render() {
     return html`
-      <button ?disabled=${this.disabled} tabindex=${ifDefined(this.tabIdx)} ontouchstart>
+      <button ?disabled=${this.disabled} tabindex=${ifDefined(this.tabIdx)}>
         <slot name="iconLeft"></slot>
         <wui-text variant="small-600" color=${this.color}>
           <slot></slot>

packages/ui/src/composites/wui-list-accordion/index.ts

@@ -53,7 +53,7 @@ export class WuiListAccordion extends LitElement {
   // -- Render -------------------------------------------- //
   public override render() {
     return html`
-      <button ontouchstart @click=${() => this.onClick()}>
+      <button @click=${() => this.onClick()}>
         <wui-flex justifyContent="space-between" alignItems="center">
           <wui-text variant="paragraph-500" color="fg-100">${this.textTitle}</wui-text>
           ${this.chevronTemplate()}

packages/ui/src/composites/wui-list-button/index.ts

@@ -21,7 +21,7 @@ export class WuiListButton extends LitElement {
   // -- Render -------------------------------------------- //
   public override render() {
     return html`
-      <button ?disabled=${this.disabled} tabindex=${ifDefined(this.tabIdx)} ontouchstart>
+      <button ?disabled=${this.disabled} tabindex=${ifDefined(this.tabIdx)}>
         <wui-text align="center" variant="paragraph-500" color="inherit">${this.text}</wui-text>
       </button>
     `

packages/ui/src/composites/wui-list-description/index.ts

@@ -31,7 +31,7 @@ export class WuiListDescription extends LitElement {
   // -- Render -------------------------------------------- //
   public override render() {
     return html`
-      <button ontouchstart ?disabled=${this.disabled}>
+      <button ?disabled=${this.disabled}>
         <wui-icon-box
           iconColor=${this.iconColor}
           backgroundColor=${this.iconBackgroundColor}

packages/ui/src/composites/wui-list-item/index.ts

@@ -46,7 +46,6 @@ export class WuiListItem extends LitElement {
         data-loading=${this.loading}
         data-iconvariant=${ifDefined(this.iconVariant)}
         tabindex=${ifDefined(this.tabIdx)}
-        ontouchstart
       >
         ${this.loadingTemplate()} ${this.visualTemplate()}
         <wui-flex gap="3xs">

packages/ui/src/composites/wui-list-network/index.ts

@@ -25,7 +25,7 @@ export class WuiListNetwork extends LitElement {
   // -- Render -------------------------------------------- //
   public override render() {
     return html`
-      <button data-transparent=${this.transparent} ?disabled=${this.disabled} ontouchstart>
+      <button data-transparent=${this.transparent} ?disabled=${this.disabled}>
         <wui-flex gap="s" alignItems="center">
           ${this.templateNetworkImage()}
           <wui-text variant="paragraph-500" color="inherit">${this.name}</wui-text></wui-flex

packages/ui/src/composites/wui-list-social/index.ts

@@ -27,7 +27,7 @@ export class WuiListSocial extends LitElement {
   // -- Render -------------------------------------------- //
   public override render() {
     return html`
-      <button ?disabled=${this.disabled} tabindex=${ifDefined(this.tabIdx)} ontouchstart>
+      <button ?disabled=${this.disabled} tabindex=${ifDefined(this.tabIdx)}>
         <wui-logo logo=${this.logo}></wui-logo>
         <wui-text
           data-align=${this.align}

packages/ui/src/composites/wui-list-token/index.ts

@@ -29,7 +29,7 @@ export class WuiListToken extends LitElement {
   // -- Render -------------------------------------------- //
   public override render() {
     return html`
-      <button data-clickable=${String(this.clickable)} ontouchstart>
+      <button data-clickable=${String(this.clickable)}>
         <wui-flex gap="s" alignItems="center">
           ${this.visualTemplate()}
           <wui-flex flexDirection="column" justifyContent="spaceBetween">

packages/ui/src/composites/wui-list-wallet/index.ts

@@ -43,7 +43,7 @@ export class WuiListWallet extends LitElement {
   // -- Render -------------------------------------------- //
   public override render() {
     return html`
-      <button ?disabled=${this.disabled} tabindex=${ifDefined(this.tabIdx)} ontouchstart>
+      <button ?disabled=${this.disabled} tabindex=${ifDefined(this.tabIdx)}>
         ${this.templateAllWallets()} ${this.templateWalletImage()}
         <wui-text variant="paragraph-500" color="inherit">${this.name}</wui-text>
         ${this.templateStatus()}

packages/ui/src/composites/wui-logo-select/index.ts

@@ -22,7 +22,7 @@ export class WuiLogoSelect extends LitElement {
   // -- Render -------------------------------------------- //
   public override render() {
     return html`
-      <button ?disabled=${this.disabled} tabindex=${ifDefined(this.tabIdx)} ontouchstart>
+      <button ?disabled=${this.disabled} tabindex=${ifDefined(this.tabIdx)}>
         <wui-logo logo=${this.logo}></wui-logo>
       </button>
     `

packages/ui/src/composites/wui-profile-button-v2/index.ts

@@ -39,7 +39,7 @@ export class WuiProfileButtonV2 extends LitElement {
     const connectorId = StorageUtil.getConnectedConnectorId(namespace)
     const shouldShowIcon = connectorId === ConstantsUtil.CONNECTOR_ID.AUTH
 
-    return html`<button ontouchstart data-testid="wui-profile-button" @click=${this.handleClick}>
+    return html`<button data-testid="wui-profile-button" @click=${this.handleClick}>
       <wui-flex gap="xs" alignItems="center">
         <wui-avatar
           .imageSrc=${this.avatarSrc}

packages/ui/src/composites/wui-profile-button/index.ts

@@ -30,7 +30,7 @@ export class WuiProfileButton extends LitElement {
 
   // -- Render -------------------------------------------- //
   public override render() {
-    return html`<button ontouchstart data-testid="wui-profile-button">
+    return html`<button data-testid="wui-profile-button">
       <wui-flex gap="xs" alignItems="center">
         <wui-avatar
           .imageSrc=${this.avatarSrc}