V 3 / beta polish (#1320)

reown-com · Sep 8, 2023 · a1779ac · a1779ac · vercel · Sep 8, 2023
1 parent 570c61d
commit a1779ac
Show file tree

Hide file tree

Showing 21 changed files with 148 additions and 31 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,21 +23,31 @@ export class WuiAccountButton extends LitElement {
 
   @property({ type: Boolean }) public disabled = false
 
+  @property({ type: Boolean }) public isProfileName = false
+
   @property() public address = ''
 
   // -- Render -------------------------------------------- //
   public override render() {
     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
@@ -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
@@ -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
@@ -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>