V 3/beta tweaks v2

apps/gallery/stories/components/wui-loading-spinner.stories.ts

@@ -9,9 +9,14 @@ type Component = Meta<WuiLoadingSpinner>
 export default {
   title: 'Components/wui-loading-spinner',
   args: {
-    color: 'accent-100'
+    color: 'accent-100',
+    size: 'lg'
   },
   argTypes: {
+    size: {
+      options: ['sm', 'md', 'lg'],
+      control: { type: 'select' }
+    },
     color: {
       options: colorOptions,
       control: { type: 'select' }
@@ -20,5 +25,7 @@ export default {
 } as Component
 
 export const Default: Component = {
-  render: args => html` <wui-loading-spinner color=${args.color}></wui-loading-spinner> `
+  render: args => html`
+    <wui-loading-spinner size=${args.size} color=${args.color}></wui-loading-spinner>
+  `
 }

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

@@ -9,16 +9,23 @@ type Component = Meta<WuiAccountButton>
 export default {
   title: 'Composites/wui-account-button',
   args: {
+    disabled: false,
     networkSrc: networkImageSrc,
     avatarSrc: avatarImageSrc,
     address,
     balance: '0.527 ETH'
+  },
+  argTypes: {
+    disabled: {
+      control: { type: 'boolean' }
+    }
   }
 } as Component
 
 export const Default: Component = {
   render: args =>
     html`<wui-account-button
+      ?disabled=${args.disabled}
       .networkSrc=${args.networkSrc}
       .avatarSrc=${args.avatarSrc}
       .balance=${args.balance}

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

@@ -0,0 +1,38 @@
+import type { Meta } from '@storybook/web-components'
+import '@web3modal/ui/src/composites/wui-connect-button'
+import type { WuiConnectButton } from '@web3modal/ui/src/composites/wui-connect-button'
+import { html } from 'lit'
+
+type Component = Meta<WuiConnectButton>
+
+export default {
+  title: 'Composites/wui-connect-button',
+  args: {
+    size: 'md',
+    disabled: false,
+    loading: false,
+    text: 'Connect Wallet'
+  },
+  argTypes: {
+    size: {
+      options: ['sm', 'md'],
+      control: { type: 'select' }
+    },
+    disabled: {
+      control: { type: 'boolean' }
+    },
+    loading: {
+      control: { type: 'boolean' }
+    }
+  }
+} as Component
+
+export const Default: Component = {
+  render: args =>
+    html`<wui-connect-button
+      size=${args.size}
+      ?loading=${args.loading}
+      ?disabled=${args.disabled}
+      text=${args.text}
+    ></wui-connect-button>`
+}

packages/ui/index.ts

@@ -15,6 +15,7 @@ export * from './src/composites/wui-button/index.js'
 export * from './src/composites/wui-card-select/index.js'
 export * from './src/composites/wui-card-select-loader/index.js'
 export * from './src/composites/wui-chip/index.js'
+export * from './src/composites/wui-connect-button/index.js'
 export * from './src/composites/wui-email-input/index.js'
 export * from './src/composites/wui-icon-box/index.js'
 export * from './src/composites/wui-icon-link/index.js'

packages/ui/src/components/wui-loading-spinner/index.ts

@@ -2,18 +2,22 @@ import { html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 import { resetStyles } from '../../utils/ThemeUtil.js'
 import styles from './styles.js'
-import type { ColorType } from '../../utils/TypesUtil.js'
+import type { ColorType, SizeType } from '../../utils/TypesUtil.js'
 
 @customElement('wui-loading-spinner')
 export class WuiLoadingSpinner extends LitElement {
   public static override styles = [resetStyles, styles]
 
   @property() public color: ColorType = 'accent-100'
 
+  @property() public size: Exclude<SizeType, 'inherit' | 'xs' | 'xxs'> = 'lg'
+
   // -- Render -------------------------------------------- //
   public override render() {
     this.style.cssText = `--local-color: var(--wui-color-${this.color});`
 
+    this.dataset['size'] = this.size
+
     return html`<svg viewBox="25 25 50 50">
       <circle r="20" cy="50" cx="50"></circle>
     </svg>`

packages/ui/src/components/wui-loading-spinner/styles.ts

@@ -5,9 +5,22 @@ export default css`
     display: flex;
   }
 
-  svg {
+  :host([data-size='sm']) > svg {
+    width: 12px;
+    height: 12px;
+  }
+
+  :host([data-size='md']) > svg {
+    width: 14px;
+    height: 14px;
+  }
+
+  :host([data-size='lg']) > svg {
     width: 24px;
     height: 24px;
+  }
+
+  svg {
     animation: rotate 2s linear infinite;
     transition: all var(--wui-ease-in-power-3) var(--wui-duration-lg);
   }
@@ -22,6 +35,14 @@ export default css`
     animation: dash 1.5s ease-in-out infinite;
   }
 
+  :host([data-size='md']) > svg > circle {
+    stroke-width: 6px;
+  }
+
+  :host([data-size='sm']) > svg > circle {
+    stroke-width: 8px;
+  }
+
   @keyframes rotate {
     100% {
       transform: rotate(360deg);

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

@@ -20,20 +20,22 @@ export class WuiAccountButton extends LitElement {
 
   @property() public balance?: string = undefined
 
+  @property({ type: Boolean }) public disabled = false
+
   @property() public address = ''
 
   // -- Render -------------------------------------------- //
   public override render() {
     return html`
-      <button>
+      <button ?disabled=${this.disabled}>
         ${this.balanceTemplate()}
-        <wui-flex gap="xxs" alignItems="center">
+        <wui-flex gap="xxs" alignItems="center" class=${this.balance ? undefined : 'noBalance'}>
           <wui-avatar
             .imageSrc=${this.avatarSrc}
             alt=${this.address}
             address=${this.address}
           ></wui-avatar>
-          <wui-text variant="paragraph-600" color="inverse-100">
+          <wui-text variant="paragraph-600" color="inherit">
             ${UiHelperUtil.getTruncateAddress(this.address, 4)}
           </wui-text>
         </wui-flex>
@@ -57,7 +59,7 @@ export class WuiAccountButton extends LitElement {
 
       return html`
         ${networkElement}
-        <wui-text variant="paragraph-600" color="fg-100"> ${this.balance} </wui-text>
+        <wui-text variant="paragraph-600" color="inherit"> ${this.balance} </wui-text>
       `
     }
 

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

@@ -12,34 +12,75 @@ export default css`
     gap: var(--wui-spacing-xs);
     padding: var(--wui-spacing-3xs) var(--wui-spacing-xs) var(--wui-spacing-3xs)
       var(--wui-spacing-xs);
+    border: 1px solid var(--wui-overlay-005);
+  }
+
+  button:disabled {
+    background: var(--wui-overlay-015);
+  }
+
+  button:disabled > wui-text {
+    color: var(--wui-overlay-015);
+  }
+
+  button:disabled > wui-flex > wui-text {
+    color: var(--wui-overlay-015);
+  }
+
+  button:disabled > wui-image,
+  button:disabled > wui-icon-box,
+  button:disabled > wui-flex > wui-avatar {
+    filter: grayscale(1);
   }
 
   button:has(wui-image) {
     padding: var(--wui-spacing-3xs) var(--wui-spacing-3xs) var(--wui-spacing-3xs)
       var(--wui-spacing-xs);
   }
 
+  wui-text {
+    color: var(--wui-color-fg-100);
+  }
+
+  wui-flex > wui-text {
+    color: var(--wui-color-fg-200);
+    transition: all var(--wui-ease-out-power-1) var(--wui-duration-lg);
+  }
+
   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);
   }
 
   wui-flex {
     border-radius: var(--wui-border-radius-3xl);
-    border: 1px solid var(--wui-overlay-010);
-    background: var(--wui-color-accent-100);
+    border: 1px solid var(--wui-overlay-005);
+    background: var(--wui-overlay-005);
     padding: 4px var(--wui-spacing-m) 4px var(--wui-spacing-xxs);
   }
 
+  wui-flex.noBalance {
+    border-radius: 0px;
+    border: none;
+    background: transparent;
+  }
+
   wui-avatar {
     width: 20px;
     height: 20px;
-    border: 2px solid var(--wui-color-accent-080);
+    outline: 2px solid var(--wui-overlay-010);
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    button:hover:enabled > wui-flex > wui-text {
+      color: var(--wui-color-fg-175);
+    }
+
+    button:active:enabled > wui-flex > wui-text {
+      color: var(--wui-color-fg-175);
+    }
   }
 `

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

@@ -30,11 +30,7 @@ export default css`
   }
 
   button[data-size='md'] {
-    padding: 9px var(--wui-spacing-l) 9px var(--wui-spacing-s);
-  }
-
-  button[data-size='md'] + wui-text {
-    padding-left: var(--wui-spacing-3xs);
+    padding: 9px var(--wui-spacing-l) 9px var(--wui-spacing-l);
   }
 
   wui-loading-spinner {

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

@@ -0,0 +1,55 @@
+import { html, LitElement } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import '../../components/wui-icon/index.js'
+import '../../components/wui-loading-spinner/index.js'
+import '../../components/wui-text/index.js'
+import { elementStyles, resetStyles } from '../../utils/ThemeUtil.js'
+import type { SizeType } from '../../utils/TypesUtil.js'
+import styles from './styles.js'
+
+@customElement('wui-connect-button')
+export class WuiConnectButton extends LitElement {
+  public static override styles = [resetStyles, elementStyles, styles]
+
+  // -- State & Properties -------------------------------- //
+  @property() public size: Exclude<SizeType, 'inherit' | 'lg' | 'xs' | 'xxs'> = 'md'
+
+  @property({ type: Boolean }) public disabled = false
+
+  @property({ type: Boolean }) public loading = false
+
+  @property() public text = 'Connect Wallet'
+
+  // -- Render -------------------------------------------- //
+  public override render() {
+    const textVariant = this.size === 'md' ? 'paragraph-600' : 'small-600'
+
+    return html`
+      <button
+        data-size=${this.size}
+        ?disabled=${this.disabled}
+        class=${this.loading && 'loading'}
+        ontouchstart
+      >
+        ${this.loadingTemplate()}
+        <wui-text variant=${textVariant} color="inherit">
+          ${this.loading ? 'Connecting...' : this.text}
+        </wui-text>
+      </button>
+    `
+  }
+
+  public loadingTemplate() {
+    if (!this.loading) {
+      return null
+    }
+
+    return html`<wui-loading-spinner size=${this.size} color="accent-100"></wui-loading-spinner>`
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'wui-connect-button': WuiConnectButton
+  }
+}