V 3 / beta polish

apps/gallery/stories/composites/wui-tabs.stories.ts

@@ -13,12 +13,22 @@ export default {
       { icon: 'extension', label: 'Browser' },
       { icon: 'desktop', label: 'Desktop' }
     ],
-    onTabChange: _index => null
+    onTabChange: _index => null,
+    disabled: false
   },
 
-  argTypes: {}
+  argTypes: {
+    disabled: {
+      control: { type: 'boolean' }
+    }
+  }
 } as Component
 
 export const Default: Component = {
-  render: args => html`<wui-tabs .tabs=${args.tabs} .onTabChange=${args.onTabChange}></wui-tabs>`
+  render: args =>
+    html`<wui-tabs
+      .tabs=${args.tabs}
+      ?disabled=${args.disabled}
+      .onTabChange=${args.onTabChange}
+    ></wui-tabs>`
 }

apps/gallery/utils/PresetUtils.ts

@@ -262,7 +262,7 @@ export const themeOptions: ThemeType[] = ['dark', 'light']
 
 export const iconBoxBorderOptions: IconBoxBorderType[] = [
   'wui-color-bg-125',
-  'wui-overlay-accent-010'
+  'wui-accent-glass-010'
 ]
 
 export const tagLabelOptions = ['get wallet', 'installed', 'qr code', 'recent']

packages/core/src/controllers/ConnectionController.ts

@@ -23,13 +23,15 @@ export interface ConnectionControllerState {
   }
   wcError?: boolean
   recentWallet?: ApiWallet
+  buffering: boolean
 }
 
 type StateKey = keyof ConnectionControllerState
 
 // -- State --------------------------------------------- //
 const state = proxy<ConnectionControllerState>({
-  wcError: false
+  wcError: false,
+  buffering: false
 })
 
 // -- Controller ---------------------------------------- //
@@ -91,6 +93,10 @@ export const ConnectionController = {
     state.recentWallet = wallet
   },
 
+  setBuffering(buffering: ConnectionControllerState['buffering']) {
+    state.buffering = buffering
+  },
+
   async disconnect() {
     await this._getClient().disconnect()
     this.resetWcConnection()

packages/core/tests/controllers/ConnectionController.test.ts

@@ -32,6 +32,7 @@ describe('ConnectionController', () => {
 
     expect(ConnectionController.state).toEqual({
       wcError: false,
+      buffering: false,
       _client: ConnectionController._getClient()
     })
   })

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

@@ -106,9 +106,22 @@ export class W3mAllWalletsList extends LitElement {
   }
 
   private paginationLoaderTemplate() {
+    let walletAmountRow = 4
+
+    if (window.innerWidth === 430) {
+      walletAmountRow = 5
+    } else if (window.innerWidth < 348) {
+      walletAmountRow = 3
+    }
+
     const { wallets, recommended, featured, count } = ApiController.state
+
+    const currentWallets = wallets.length + recommended.length
+    const minimumRows = Math.ceil(currentWallets / walletAmountRow)
+    const loadingCount = minimumRows * walletAmountRow - currentWallets + walletAmountRow
+
     if (count === 0 || [...featured, ...wallets, ...recommended].length < count) {
-      return this.shimmerTemplate(4, PAGINATOR_ID)
+      return this.shimmerTemplate(loadingCount, PAGINATOR_ID)
     }
 
     return null

packages/scaffold/src/partials/w3m-connecting-header/index.ts

@@ -1,24 +1,45 @@
-import type { Platform } from '@web3modal/core'
+import { ConnectionController, type Platform } from '@web3modal/core'
 import { LitElement, html } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
+import { customElement, property, state } from 'lit/decorators.js'
 
 @customElement('w3m-connecting-header')
 export class W3mConnectingHeader extends LitElement {
   // -- Members ------------------------------------------- //
   private platformTabs: Platform[] = []
 
+  private unsubscribe: (() => void)[] = []
+
   // -- State & Properties -------------------------------- //
   @property({ type: Array }) public platforms: Platform[] = []
 
   @property() public onSelectPlatfrom?: (platform: Platform) => void = undefined
 
+  @state() private buffering = false
+
+  public constructor() {
+    super()
+    this.unsubscribe.push(
+      ConnectionController.subscribeKey('buffering', val => {
+        this.onBufferChange(val)
+      })
+    )
+  }
+
+  disconnectCallback() {
+    this.unsubscribe.forEach(unsubscribe => unsubscribe())
+  }
+
   // -- Render -------------------------------------------- //
   public override render() {
     const tabs = this.generateTabs()
 
     return html`
       <wui-flex justifyContent="center" .padding=${['l', '0', '0', '0'] as const}>
-        <wui-tabs .tabs=${tabs} .onTabChange=${this.onTabChange.bind(this)}></wui-tabs>
+        <wui-tabs
+          ?disabled=${this.buffering}
+          .tabs=${tabs}
+          .onTabChange=${this.onTabChange.bind(this)}
+        ></wui-tabs>
       </wui-flex>
     `
   }
@@ -52,6 +73,10 @@ export class W3mConnectingHeader extends LitElement {
       this.onSelectPlatfrom?.(tab)
     }
   }
+
+  private onBufferChange(val: boolean) {
+    this.buffering = val
+  }
 }
 
 declare global {

packages/scaffold/src/partials/w3m-connecting-wc-mobile/index.ts

@@ -45,7 +45,11 @@ export class W3mConnectingWcMobile extends W3mConnectingWidget {
   private onBuffering() {
     if (document.visibilityState === 'visible' && !this.error) {
       this.buffering = true
-      setTimeout(() => (this.buffering = false), 5000)
+      ConnectionController.setBuffering(true)
+      setTimeout(() => {
+        this.buffering = false
+        ConnectionController.setBuffering(false)
+      }, 5000)
     }
   }
 }

packages/scaffold/src/partials/w3m-header/index.ts

@@ -1,5 +1,5 @@
 import type { RouterControllerState } from '@web3modal/core'
-import { ModalController, RouterController } from '@web3modal/core'
+import { ConnectionController, ModalController, RouterController } from '@web3modal/core'
 import { LitElement, html } from 'lit'
 import { customElement, state } from 'lit/decorators.js'
 import { animate } from 'motion'
@@ -36,6 +36,8 @@ export class W3mHeader extends LitElement {
   // -- State & Properties --------------------------------- //
   @state() private heading = headings()[RouterController.state.view]
 
+  @state() private buffering = false
+
   @state() private showBack = false
 
   public constructor() {
@@ -44,6 +46,9 @@ export class W3mHeader extends LitElement {
       RouterController.subscribeKey('view', val => {
         this.onViewChange(val)
         this.onHistoryChange()
+      }),
+      ConnectionController.subscribeKey('buffering', val => {
+        this.onBufferChange(val)
       })
     )
   }
@@ -57,7 +62,11 @@ export class W3mHeader extends LitElement {
     return html`
       <wui-flex .padding=${this.getPadding()} justifyContent="space-between" alignItems="center">
         ${this.dynamicButtonTemplate()} ${this.titleTemplate()}
-        <wui-icon-link icon="close" @click=${ModalController.close}></wui-icon-link>
+        <wui-icon-link
+          ?disabled=${this.buffering}
+          icon="close"
+          @click=${ModalController.close}
+        ></wui-icon-link>
       </wui-flex>
       ${this.separatorTemplate()}
     `
@@ -76,6 +85,7 @@ export class W3mHeader extends LitElement {
       return html`<wui-icon-link
         id="dynamic"
         icon="chevronLeft"
+        ?disabled=${ConnectionController.state.buffering}
         @click=${RouterController.goBack}
       ></wui-icon-link>`
     }
@@ -128,6 +138,10 @@ export class W3mHeader extends LitElement {
       animate(buttonEl, { opacity: [0, 1] }, { duration: 0.2 })
     }
   }
+
+  private onBufferChange(val: boolean) {
+    this.buffering = val
+  }
 }
 
 declare global {

packages/scaffold/src/views/w3m-account-view/index.ts

@@ -90,7 +90,9 @@ export class W3mAccountView extends LitElement {
         <wui-flex flexDirection="column" alignItems="center">
           <wui-flex gap="3xs" alignItems="center" justifyContent="center">
             <wui-text variant="large-600" color="fg-100">
-              ${this.profileName ?? UiHelperUtil.getTruncateAddress(this.address, 4)}
+              ${this.profileName
+                ? UiHelperUtil.getTruncateString(this.profileName, 8, true)
+                : UiHelperUtil.getTruncateString(this.address, 4)}
             </wui-text>
             <wui-icon-link
               size="md"

packages/scaffold/src/views/w3m-all-wallets-view/index.ts

@@ -44,7 +44,7 @@ export class W3mAllWalletsView extends LitElement {
           icon="qrCode"
           background="transparent"
           border
-          borderColor="wui-overlay-accent-010"
+          borderColor="wui-accent-glass-010"
           @click=${this.onWalletConnectQr.bind(this)}
         ></wui-icon-box>
       `

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

@@ -26,17 +26,19 @@ export class WuiAccountButton extends LitElement {
 
   // -- Render -------------------------------------------- //
   public override render() {
+    const isEns = this.address.endsWith('.eth')
+
     return html`
       <button ?disabled=${this.disabled}>
         ${this.balanceTemplate()}
-        <wui-flex gap="xxs" alignItems="center" class=${this.balance ? undefined : 'noBalance'}>
+        <wui-flex gap="xxs" alignItems="center" class=${!this.balance && 'noBalance'}>
           <wui-avatar
             .imageSrc=${this.avatarSrc}
             alt=${this.address}
             address=${this.address}
           ></wui-avatar>
           <wui-text variant="paragraph-600" color="inherit">
-            ${UiHelperUtil.getTruncateAddress(this.address, 4)}
+            ${UiHelperUtil.getTruncateString(this.address, isEns ? 8 : 4, isEns)}
           </wui-text>
         </wui-flex>
       </button>

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

@@ -65,7 +65,9 @@ export class WuiIconBox extends LitElement {
        --local-bg-mix: ${isColorChange ? `100%` : bgMix};
        --local-border-radius: var(--wui-border-radius-${borderRadius});
        --local-size: var(--wui-icon-box-size-${this.size});
-       --local-border: 2px solid ${this.border ? `var(--${this.borderColor})` : `transparent`}
+       --local-border: ${this.borderColor === 'wui-color-bg-125' ? `2px` : `1px`} solid ${
+         this.border ? `var(--${this.borderColor})` : `transparent`
+       }
    `
 
     return html` <wui-icon color=${this.iconColor} size=${iconSize} name=${this.icon}></wui-icon> `

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

@@ -16,6 +16,8 @@ export class WuiTabs extends LitElement {
 
   @property({ type: Array }) public buttons: HTMLButtonElement[] = []
 
+  @property({ type: Boolean }) public disabled = false
+
   @state() public activeTab = 0
 
   @state() public localTabWidth = '100px'
@@ -37,7 +39,11 @@ export class WuiTabs extends LitElement {
       const isActive = index === this.activeTab
 
       return html`
-        <button @click=${() => this.onTabClick(index)} data-active=${isActive}>
+        <button
+          ?disabled=${this.disabled}
+          @click=${() => this.onTabClick(index)}
+          data-active=${isActive}
+        >
           <wui-icon size="sm" color="inherit" name=${tab.icon}></wui-icon>
           <wui-text variant="small-600" color="inherit">${tab.label}</wui-text>
         </button>

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

@@ -54,6 +54,21 @@ export default css`
     color: var(--wui-color-fg-200);
   }
 
+  button[data-active='true']:disabled,
+  button[data-active='false']:disabled {
+    background-color: transparent;
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  button[data-active='true']:disabled > wui-text {
+    color: var(--wui-color-fg-200);
+  }
+
+  button[data-active='false']:disabled > wui-text {
+    color: var(--wui-color-fg-300);
+  }
+
   button > wui-icon,
   button > wui-text {
     pointer-events: none;
@@ -76,13 +91,13 @@ export default css`
     background-color: transparent !important;
   }
 
-  button:hover > wui-icon,
-  button:active > wui-icon {
+  button:hover:enabled > wui-icon,
+  button:active:enabled > wui-icon {
     color: var(--wui-color-fg-125);
   }
 
-  button:hover > wui-text,
-  button:active > wui-text {
+  button:hover:enabled > wui-text,
+  button:active:enabled > wui-text {
     color: var(--wui-color-fg-125);
   }
 `

packages/ui/src/utils/TypesUtil.ts

@@ -219,4 +219,4 @@ export interface ThemeVariables {
   '--w3m-z-index'?: string
 }
 
-export type IconBoxBorderType = 'wui-color-bg-125' | 'wui-overlay-accent-010'
+export type IconBoxBorderType = 'wui-color-bg-125' | 'wui-accent-glass-010'

packages/ui/src/utils/UiHelperUtils.ts

@@ -22,8 +22,12 @@ export const UiHelperUtil = {
     return newUrl.hostname
   },
 
-  getTruncateAddress(address: string, chars: number) {
-    return `${address.substring(0, chars)}...${address.substring(address.length - chars)}`
+  getTruncateString(string: string, chars: number, truncateStart = false) {
+    if (truncateStart) {
+      return `${string.substring(0, chars)}...`
+    }
+
+    return `${string.substring(0, chars)}...${string.substring(string.length - chars)}`
   },
 
   generateAvatarColors(address: string) {