V 3/network button

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

@@ -10,19 +10,18 @@ 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}
+      >Ethereum</wui-network-button
+    >`
 }

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

@@ -15,7 +15,7 @@ export class W3mNetworkButton extends LitElement {
   private unsubscribe: (() => void)[] = []
 
   // -- State & Properties -------------------------------- //
-  @property() public variant?: WuiNetworkButton['variant'] = 'fill'
+  @property({ type: Boolean }) public disabled?: WuiNetworkButton['disabled'] = false
 
   @state() private networkImages = AssetController.state.networkImages
 
@@ -44,7 +44,11 @@ export class W3mNetworkButton extends LitElement {
     const networkImage = this.networkImages[this.network?.imageId ?? '']
 
     return html`
-      <wui-network-button imageSrc=${ifDefined(networkImage)} @click=${this.onClick.bind(this)}>
+      <wui-network-button
+        .disabled=${Boolean(this.disabled)}
+        imageSrc=${ifDefined(networkImage)}
+        @click=${this.onClick.bind(this)}
+      >
         ${this.network?.name ?? (this.connected ? 'Unknown Network' : 'Select Network')}
       </wui-network-button>
     `

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

@@ -25,8 +25,8 @@ 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'>
+      'w3m-network-button': Pick<W3mNetworkButton, 'disabled'>
     }
   }
 }

packages/wagmi/exports/vue.ts

@@ -24,8 +24,8 @@ 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'>
+    W3mNetworkButton: Pick<W3mNetworkButton, 'disabled'>
   }
 }