V 3/network button

apps/gallery/stories/composites/wui-network-button.stories.ts

@@ -10,19 +10,19 @@ export default {
   title: 'Composites/wui-network-button',
   args: {
     imageSrc: networkImageSrc,
-    variant: 'fill'
+    disabled: false
   },
   argTypes: {
-    variant: {
-      options: ['fill', 'shade'],
-      control: { type: 'select' }
+    disabled: {
+      control: { type: 'boolean' }
     }
   }
 } as Component
 
 export const Default: Component = {
   render: args =>
-    html`<wui-network-button .imageSrc=${args.imageSrc} variant=${args.variant}>
-      Ethereum
-    </wui-network-button>`
+    html`<wui-network-button
+      ?disabled=${args.disabled}
+      .imageSrc=${args.imageSrc}
+    ></wui-network-button>`
 }

packages/scaffold/src/modal/w3m-network-button/index.ts

@@ -4,9 +4,8 @@ import {
   ModalController,
   NetworkController
 } from '@web3modal/core'
-import type { WuiNetworkButton } from '@web3modal/ui'
 import { LitElement, html } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
+import { customElement, state } from 'lit/decorators.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
 
 @customElement('w3m-network-button')
@@ -15,8 +14,6 @@ export class W3mNetworkButton extends LitElement {
   private unsubscribe: (() => void)[] = []
 
   // -- State & Properties -------------------------------- //
-  @property() public variant?: WuiNetworkButton['variant'] = 'fill'
-
   @state() private networkImages = AssetController.state.networkImages
 
   @state() private network = NetworkController.state.caipNetwork

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

@@ -3,7 +3,6 @@ import { customElement, property } from 'lit/decorators.js'
 import '../../components/wui-image/index.js'
 import '../../components/wui-text/index.js'
 import { elementStyles, resetStyles } from '../../utils/ThemeUtil.js'
-import type { ButtonType } from '../../utils/TypesUtil.js'
 import '../wui-icon-box/index.js'
 import styles from './styles.js'
 
@@ -14,12 +13,12 @@ export class WuiNetworkButton extends LitElement {
   // -- State & Properties -------------------------------- //
   @property() public imageSrc?: string = undefined
 
-  @property() public variant: Exclude<ButtonType, 'accent' | 'fullwidth'> = 'fill'
+  @property({ type: Boolean }) public disabled = false
 
   // -- Render -------------------------------------------- //
   public override render() {
     return html`
-      <button data-variant=${this.variant}>
+      <button ?disabled=${this.disabled}>
         ${this.visualTemplate()}
         <wui-text variant="paragraph-600" color="inherit">
           <slot></slot>
@@ -38,7 +37,7 @@ export class WuiNetworkButton extends LitElement {
       <wui-icon-box
         size="sm"
         iconColor="inverse-100"
-        backgroundColor="accent-100"
+        backgroundColor="fg-100"
         icon="networkPlaceholder"
       ></wui-icon-box>
     `

packages/ui/src/composites/wui-network-button/styles.ts

@@ -12,16 +12,31 @@ export default css`
     padding: var(--wui-spacing-2xs) var(--wui-spacing-s) var(--wui-spacing-2xs)
       var(--wui-spacing-xs);
     border: 1px solid var(--wui-overlay-010);
+    background-color: var(--wui-overlay-005);
+    color: var(--wui-color-fg-100);
+  }
+
+  button:disabled {
+    border: 1px solid var(--wui-overlay-005);
+    background-color: var(--wui-overlay-015);
+    color: var(--wui-overlay-015);
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    button:hover:enabled {
+      background-color: var(--wui-overlay-010);
+    }
+
+    button:active:enabled {
+      background-color: var(--wui-overlay-015);
+    }
   }
 
   wui-image,
   wui-icon-box {
     border-radius: var(--wui-border-radius-3xl);
     width: 24px;
     height: 24px;
-  }
-
-  wui-icon-box {
-    border: 1px solid var(--wui-overlay-010);
+    outline: 2px solid var(--wui-overlay-005);
   }
 `

packages/wagmi/exports/react.tsx

@@ -1,11 +1,6 @@
 'use client'
 
-import type {
-  W3mAccountButton,
-  W3mButton,
-  W3mConnectButton,
-  W3mNetworkButton
-} from '@web3modal/scaffold'
+import type { W3mAccountButton, W3mButton, W3mConnectButton } from '@web3modal/scaffold'
 import { useEffect, useState } from 'react'
 import type { Web3ModalOptions } from '../src/client.js'
 import { Web3Modal } from '../src/client.js'
@@ -25,7 +20,6 @@ declare global {
     interface IntrinsicElements {
       'w3m-connect-button': Pick<W3mConnectButton, 'size' | 'label' | 'loadingLabel'>
       'w3m-account-button': Pick<W3mAccountButton, 'disabled' | 'balance'>
-      'w3m-network-button': Pick<W3mNetworkButton, 'variant'>
       'w3m-button': Pick<W3mButton, 'size' | 'label' | 'loadingLabel' | 'disabled' | 'balance'>
     }
   }

packages/wagmi/exports/vue.ts

@@ -3,8 +3,7 @@ import type {
   ThemeVariables,
   W3mAccountButton,
   W3mButton,
-  W3mConnectButton,
-  W3mNetworkButton
+  W3mConnectButton
 } from '@web3modal/scaffold'
 import { onUnmounted, ref } from 'vue'
 import type { Web3ModalOptions } from '../src/client.js'
@@ -24,7 +23,6 @@ declare module '@vue/runtime-core' {
   export interface ComponentCustomProperties {
     W3mConnectButton: Pick<W3mConnectButton, 'size' | 'label' | 'loadingLabel'>
     W3mAccountButton: Pick<W3mAccountButton, 'disabled' | 'balance'>
-    W3mNetworkButton: Pick<W3mNetworkButton, 'variant'>
     W3mButton: Pick<W3mButton, 'size' | 'label' | 'loadingLabel' | 'disabled' | 'balance'>
   }
 }