From a1779acd659918fc533259021bf4640f2bba214d Mon Sep 17 00:00:00 2001
From: Sven <38101365+svenvoskamp@users.noreply.github.com>
Date: Fri, 8 Sep 2023 15:48:36 +0200
Subject: [PATCH] V 3 / beta polish (#1320)

---
 .../composites/wui-account-button.stories.ts  |  7 +++++-
 .../stories/composites/wui-tabs.stories.ts    | 16 ++++++++++---
 apps/gallery/utils/PresetUtils.ts             |  2 +-
 .../src/controllers/ConnectionController.ts   |  8 ++++++-
 .../controllers/ConnectionController.test.ts  |  1 +
 .../src/modal/w3m-account-button/index.ts     |  1 +
 .../partials/w3m-all-wallets-list/index.ts    | 10 ++++++--
 .../partials/w3m-all-wallets-list/styles.ts   |  7 ++++++
 .../partials/w3m-connecting-header/index.ts   | 24 +++++++++++++++++--
 .../w3m-connecting-wc-mobile/index.ts         |  6 +++--
 .../scaffold/src/partials/w3m-header/index.ts | 14 ++++++++---
 .../src/utils/w3m-connecting-widget/index.ts  |  3 ++-
 .../src/views/w3m-account-view/index.ts       |  4 +++-
 .../src/views/w3m-all-wallets-view/index.ts   |  2 +-
 .../composites/wui-account-button/index.ts    | 15 ++++++++++--
 .../composites/wui-account-button/styles.ts   |  2 +-
 .../ui/src/composites/wui-icon-box/index.ts   |  4 +++-
 packages/ui/src/composites/wui-tabs/index.ts  |  8 ++++++-
 packages/ui/src/composites/wui-tabs/styles.ts | 23 ++++++++++++++----
 packages/ui/src/utils/TypesUtil.ts            |  4 +++-
 packages/ui/src/utils/UiHelperUtils.ts        | 18 +++++++++++---
 21 files changed, 148 insertions(+), 31 deletions(-)

diff --git a/apps/gallery/stories/composites/wui-account-button.stories.ts b/apps/gallery/stories/composites/wui-account-button.stories.ts
index 70e586eb6a..eb23ce53eb 100644
--- a/apps/gallery/stories/composites/wui-account-button.stories.ts
+++ b/apps/gallery/stories/composites/wui-account-button.stories.ts
@@ -13,11 +13,15 @@ export default {
     networkSrc: networkImageSrc,
     avatarSrc: avatarImageSrc,
     address,
-    balance: '0.527 ETH'
+    balance: '0.527 ETH',
+    isProfileName: false
   },
   argTypes: {
     disabled: {
       control: { type: 'boolean' }
+    },
+    isProfileName: {
+      control: { type: 'boolean' }
     }
   }
 } as Component
@@ -26,6 +30,7 @@ export const Default: Component = {
   render: args =>
     html`<wui-account-button
       ?disabled=${args.disabled}
+      ?isProfileName=${args.isProfileName}
       .networkSrc=${args.networkSrc}
       .avatarSrc=${args.avatarSrc}
       .balance=${args.balance}
diff --git a/apps/gallery/stories/composites/wui-tabs.stories.ts b/apps/gallery/stories/composites/wui-tabs.stories.ts
index dbb16cd926..ace85c1c2c 100644
--- a/apps/gallery/stories/composites/wui-tabs.stories.ts
+++ b/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>`
 }
diff --git a/apps/gallery/utils/PresetUtils.ts b/apps/gallery/utils/PresetUtils.ts
index 835d3715f6..d79c7142c4 100644
--- a/apps/gallery/utils/PresetUtils.ts
+++ b/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']
diff --git a/packages/core/src/controllers/ConnectionController.ts b/packages/core/src/controllers/ConnectionController.ts
index e63b8c70ce..baf58b3a7b 100644
--- a/packages/core/src/controllers/ConnectionController.ts
+++ b/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()
diff --git a/packages/core/tests/controllers/ConnectionController.test.ts b/packages/core/tests/controllers/ConnectionController.test.ts
index c3f810248b..6ed1e8d721 100644
--- a/packages/core/tests/controllers/ConnectionController.test.ts
+++ b/packages/core/tests/controllers/ConnectionController.test.ts
@@ -32,6 +32,7 @@ describe('ConnectionController', () => {
 
     expect(ConnectionController.state).toEqual({
       wcError: false,
+      buffering: false,
       _client: ConnectionController._getClient()
     })
   })
diff --git a/packages/scaffold/src/modal/w3m-account-button/index.ts b/packages/scaffold/src/modal/w3m-account-button/index.ts
index a3a3ab0fbe..1bc4536e53 100644
--- a/packages/scaffold/src/modal/w3m-account-button/index.ts
+++ b/packages/scaffold/src/modal/w3m-account-button/index.ts
@@ -72,6 +72,7 @@ export class W3mAccountButton extends LitElement {
       <wui-account-button
         .disabled=${Boolean(this.disabled)}
         address=${ifDefined(this.profileName ?? this.address)}
+        ?isProfileName=${Boolean(this.profileName)}
         networkSrc=${ifDefined(networkImage)}
         avatarSrc=${ifDefined(this.profileImage)}
         balance=${showBalance
diff --git a/packages/scaffold/src/partials/w3m-all-wallets-list/index.ts b/packages/scaffold/src/partials/w3m-all-wallets-list/index.ts
index 1aee8bd627..6253d510b7 100644
--- a/packages/scaffold/src/partials/w3m-all-wallets-list/index.ts
+++ b/packages/scaffold/src/partials/w3m-all-wallets-list/index.ts
@@ -59,7 +59,6 @@ export class W3mAllWalletsList extends LitElement {
       <wui-grid
         data-scroll=${!this.initial}
         .padding=${['0', 's', 's', 's'] as const}
-        gridTemplateColumns="repeat(auto-fill, 76px)"
         columnGap="xxs"
         rowGap="l"
         justifyContent="space-between"
@@ -106,9 +105,16 @@ export class W3mAllWalletsList extends LitElement {
   }
 
   private paginationLoaderTemplate() {
+    const walletAmountRow = window.innerWidth < 352 ? 3 : 4
+
     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
diff --git a/packages/scaffold/src/partials/w3m-all-wallets-list/styles.ts b/packages/scaffold/src/partials/w3m-all-wallets-list/styles.ts
index 00b6075ad4..37e7a39781 100644
--- a/packages/scaffold/src/partials/w3m-all-wallets-list/styles.ts
+++ b/packages/scaffold/src/partials/w3m-all-wallets-list/styles.ts
@@ -6,6 +6,13 @@ export default css`
     overflow: scroll;
     scrollbar-width: none;
     grid-auto-rows: min-content;
+    grid-template-columns: repeat(auto-fill, 76px);
+  }
+
+  @media (max-width: 435px) {
+    wui-grid {
+      grid-template-columns: repeat(auto-fill, 77px);
+    }
   }
 
   wui-grid[data-scroll='false'] {
diff --git a/packages/scaffold/src/partials/w3m-connecting-header/index.ts b/packages/scaffold/src/partials/w3m-connecting-header/index.ts
index 472c45d2bf..51a200fd6f 100644
--- a/packages/scaffold/src/partials/w3m-connecting-header/index.ts
+++ b/packages/scaffold/src/partials/w3m-connecting-header/index.ts
@@ -1,24 +1,44 @@
+import { ConnectionController } from '@web3modal/core'
 import 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.buffering = 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>
     `
   }
diff --git a/packages/scaffold/src/partials/w3m-connecting-wc-mobile/index.ts b/packages/scaffold/src/partials/w3m-connecting-wc-mobile/index.ts
index ec73c8d58b..a064ffeeed 100644
--- a/packages/scaffold/src/partials/w3m-connecting-wc-mobile/index.ts
+++ b/packages/scaffold/src/partials/w3m-connecting-wc-mobile/index.ts
@@ -44,8 +44,10 @@ 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(() => {
+        ConnectionController.setBuffering(false)
+      }, 5000)
     }
   }
 }
diff --git a/packages/scaffold/src/partials/w3m-header/index.ts b/packages/scaffold/src/partials/w3m-header/index.ts
index 7c2a2ae146..68f0854d69 100644
--- a/packages/scaffold/src/partials/w3m-header/index.ts
+++ b/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,7 +46,8 @@ export class W3mHeader extends LitElement {
       RouterController.subscribeKey('view', val => {
         this.onViewChange(val)
         this.onHistoryChange()
-      })
+      }),
+      ConnectionController.subscribeKey('buffering', val => (this.buffering = val))
     )
   }
 
@@ -57,7 +60,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 +83,7 @@ export class W3mHeader extends LitElement {
       return html`<wui-icon-link
         id="dynamic"
         icon="chevronLeft"
+        ?disabled=${this.buffering}
         @click=${RouterController.goBack}
       ></wui-icon-link>`
     }
diff --git a/packages/scaffold/src/utils/w3m-connecting-widget/index.ts b/packages/scaffold/src/utils/w3m-connecting-widget/index.ts
index 1069e67c84..4a7b46bdbc 100644
--- a/packages/scaffold/src/utils/w3m-connecting-widget/index.ts
+++ b/packages/scaffold/src/utils/w3m-connecting-widget/index.ts
@@ -71,7 +71,8 @@ export class W3mConnectingWidget extends LitElement {
             this.onConnect?.()
           }
         }),
-        ConnectionController.subscribeKey('wcError', val => (this.error = val))
+        ConnectionController.subscribeKey('wcError', val => (this.error = val)),
+        ConnectionController.subscribeKey('buffering', val => (this.buffering = val))
       ]
     )
   }
diff --git a/packages/scaffold/src/views/w3m-account-view/index.ts b/packages/scaffold/src/views/w3m-account-view/index.ts
index 82c416fac8..0d48dd75f8 100644
--- a/packages/scaffold/src/views/w3m-account-view/index.ts
+++ b/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, 20, 'end')
+                : UiHelperUtil.getTruncateString(this.address, 8, 'middle')}
             </wui-text>
             <wui-icon-link
               size="md"
diff --git a/packages/scaffold/src/views/w3m-all-wallets-view/index.ts b/packages/scaffold/src/views/w3m-all-wallets-view/index.ts
index 3abff006c3..c2a0821814 100644
--- a/packages/scaffold/src/views/w3m-all-wallets-view/index.ts
+++ b/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>
       `
diff --git a/packages/ui/src/composites/wui-account-button/index.ts b/packages/ui/src/composites/wui-account-button/index.ts
index f03f6cf4fa..23cc47ef65 100644
--- a/packages/ui/src/composites/wui-account-button/index.ts
+++ b/packages/ui/src/composites/wui-account-button/index.ts
@@ -8,6 +8,7 @@ import { UiHelperUtil } from '../../utils/UiHelperUtils.js'
 import '../wui-avatar/index.js'
 import '../wui-icon-box/index.js'
 import styles from './styles.js'
+import { ifDefined } from 'lit/directives/if-defined.js'
 
 @customElement('wui-account-button')
 export class WuiAccountButton extends LitElement {
@@ -22,6 +23,8 @@ export class WuiAccountButton extends LitElement {
 
   @property({ type: Boolean }) public disabled = false
 
+  @property({ type: Boolean }) public isProfileName = false
+
   @property() public address = ''
 
   // -- Render -------------------------------------------- //
@@ -29,14 +32,22 @@ export class WuiAccountButton extends LitElement {
     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=${ifDefined(this.balance ? undefined : 'local-no-balance')}
+        >
           <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,
+              8,
+              this.isProfileName ? 'end' : 'middle'
+            )}
           </wui-text>
         </wui-flex>
       </button>
diff --git a/packages/ui/src/composites/wui-account-button/styles.ts b/packages/ui/src/composites/wui-account-button/styles.ts
index 30f9048c86..6c0d2349fc 100644
--- a/packages/ui/src/composites/wui-account-button/styles.ts
+++ b/packages/ui/src/composites/wui-account-button/styles.ts
@@ -62,7 +62,7 @@ export default css`
     padding: 4px var(--wui-spacing-m) 4px var(--wui-spacing-xxs);
   }
 
-  wui-flex.noBalance {
+  wui-flex.local-no-balance {
     border-radius: 0px;
     border: none;
     background: transparent;
diff --git a/packages/ui/src/composites/wui-icon-box/index.ts b/packages/ui/src/composites/wui-icon-box/index.ts
index 9c624bd989..922ceada00 100644
--- a/packages/ui/src/composites/wui-icon-box/index.ts
+++ b/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> `
diff --git a/packages/ui/src/composites/wui-tabs/index.ts b/packages/ui/src/composites/wui-tabs/index.ts
index dbf2b89266..513d139dbd 100644
--- a/packages/ui/src/composites/wui-tabs/index.ts
+++ b/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>
diff --git a/packages/ui/src/composites/wui-tabs/styles.ts b/packages/ui/src/composites/wui-tabs/styles.ts
index 428b5a5b0e..0f19eb19ae 100644
--- a/packages/ui/src/composites/wui-tabs/styles.ts
+++ b/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);
   }
 `
diff --git a/packages/ui/src/utils/TypesUtil.ts b/packages/ui/src/utils/TypesUtil.ts
index aded0af7fb..49d0da8325 100644
--- a/packages/ui/src/utils/TypesUtil.ts
+++ b/packages/ui/src/utils/TypesUtil.ts
@@ -219,4 +219,6 @@ 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'
+
+export type TruncateType = 'start' | 'middle' | 'end'
diff --git a/packages/ui/src/utils/UiHelperUtils.ts b/packages/ui/src/utils/UiHelperUtils.ts
index 2d641fba50..d01834675b 100644
--- a/packages/ui/src/utils/UiHelperUtils.ts
+++ b/packages/ui/src/utils/UiHelperUtils.ts
@@ -1,5 +1,5 @@
 /* eslint-disable no-bitwise */
-import type { SpacingType, ThemeType } from './TypesUtil.js'
+import type { SpacingType, ThemeType, TruncateType } from './TypesUtil.js'
 
 export const UiHelperUtil = {
   getSpacingStyles(spacing: SpacingType | SpacingType[], index: number) {
@@ -22,8 +22,20 @@ 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, truncate: TruncateType) {
+    if (string.length <= chars) {
+      return string
+    }
+
+    if (truncate === 'end') {
+      return `${string.substring(0, chars)}...`
+    } else if (truncate === 'start') {
+      return `...${string.substring(string.length - chars)}`
+    }
+
+    return `${string.substring(0, Math.floor(chars / 2))}...${string.substring(
+      string.length - Math.floor(chars / 2)
+    )}`
   },
 
   generateAvatarColors(address: string) {