From feebb696956b62b5563f692f0703fddad2634a6b Mon Sep 17 00:00:00 2001 From: Enes Date: Mon, 6 May 2024 13:28:08 +0300 Subject: [PATCH] refactor: render tooltip in root (#2210) --- .github/workflows/pr_checks.yml | 3 + ....stories.ts => wui-icon-button.stories.ts} | 12 +-- dangerfile.ts | 27 ++++-- packages/core/index.ts | 3 + .../core/src/controllers/TooltipController.ts | 71 +++++++++++++++ .../controllers/TooltipController.test.ts | 44 ++++++++++ packages/scaffold/index.ts | 2 + .../scaffold/src/modal/w3m-modal/index.ts | 1 + .../scaffold/src/modal/w3m-modal/styles.ts | 2 +- .../scaffold/src/modal/w3m-router/index.ts | 4 +- .../index.ts | 34 +++----- .../styles.ts | 4 - .../src/partials/w3m-tooltip-trigger/index.ts | 86 +++++++++++++++++++ .../partials/w3m-tooltip-trigger/styles.ts | 8 ++ .../src/partials/w3m-tooltip/index.ts | 68 +++++++++++++++ .../src/partials/w3m-tooltip/styles.ts | 67 +++++++++++++++ packages/ui/index.ts | 2 +- .../src/composites/wui-icon-button/index.ts | 31 +++++++ .../styles.ts | 0 .../composites/wui-tooltip-select/index.ts | 61 ------------- packages/ui/src/utils/JSXTypeUtil.ts | 4 +- packages/ui/src/utils/ThemeUtil.ts | 1 + 22 files changed, 433 insertions(+), 102 deletions(-) rename apps/gallery/stories/composites/{wui-tooltip-select.stories.ts => wui-icon-button.stories.ts} (56%) create mode 100644 packages/core/src/controllers/TooltipController.ts create mode 100644 packages/core/tests/controllers/TooltipController.test.ts create mode 100644 packages/scaffold/src/partials/w3m-tooltip-trigger/index.ts create mode 100644 packages/scaffold/src/partials/w3m-tooltip-trigger/styles.ts create mode 100644 packages/scaffold/src/partials/w3m-tooltip/index.ts create mode 100644 packages/scaffold/src/partials/w3m-tooltip/styles.ts create mode 100644 packages/ui/src/composites/wui-icon-button/index.ts rename packages/ui/src/composites/{wui-tooltip-select => wui-icon-button}/styles.ts (100%) delete mode 100644 packages/ui/src/composites/wui-tooltip-select/index.ts diff --git a/.github/workflows/pr_checks.yml b/.github/workflows/pr_checks.yml index 84f9a919bd..e4b37c38d7 100644 --- a/.github/workflows/pr_checks.yml +++ b/.github/workflows/pr_checks.yml @@ -37,6 +37,9 @@ jobs: code_style: runs-on: ubuntu-latest + permissions: + contents: write + pull-requests: write strategy: matrix: style-command: diff --git a/apps/gallery/stories/composites/wui-tooltip-select.stories.ts b/apps/gallery/stories/composites/wui-icon-button.stories.ts similarity index 56% rename from apps/gallery/stories/composites/wui-tooltip-select.stories.ts rename to apps/gallery/stories/composites/wui-icon-button.stories.ts index ddcd25bbf3..abc2236641 100644 --- a/apps/gallery/stories/composites/wui-tooltip-select.stories.ts +++ b/apps/gallery/stories/composites/wui-icon-button.stories.ts @@ -1,14 +1,14 @@ import type { Meta } from '@storybook/web-components' -import '@web3modal/ui/src/composites/wui-tooltip-select' -import type { WuiTooltipSelect } from '@web3modal/ui/src/composites/wui-tooltip-select' +import '@web3modal/ui/src/composites/wui-icon-button' +import type { WuiIconButton } from '@web3modal/ui/src/composites/wui-icon-button' import { html } from 'lit' import '../../components/gallery-container' import { iconOptions } from '../../utils/PresetUtils' -type Component = Meta +type Component = Meta export default { - title: 'Composites/wui-tooltip-select', + title: 'Composites/wui-icon-button', args: { icon: 'card', text: 'Buy' @@ -23,8 +23,8 @@ export default { export const Default: Component = { render: args => html` - + + ` } diff --git a/dangerfile.ts b/dangerfile.ts index 9eaace2789..6d5507ca93 100644 --- a/dangerfile.ts +++ b/dangerfile.ts @@ -14,6 +14,7 @@ const PACKAGE_VERSION = ConstantsUtil.VERSION const RELATIVE_IMPORT_SAME_DIR = `'./` const RELATIVE_IMPORT_PARENT_DIR = `'../` const RELATIVE_IMPORT_EXTENSION = `.js'` +const PRIVATE_FUNCTION_REGEX = /private\s+(\w+)\s*\(\s*\)/g // -- Data -------------------------------------------------------------------- const { modified_files, created_files, deleted_files, diffForFile } = danger.git @@ -50,7 +51,9 @@ checkPackageJsons() async function checkUiPackage() { const created_ui_components = created_files.filter(f => f.includes('ui/src/components')) const created_ui_composites = created_files.filter(f => f.includes('ui/src/composites')) + const deleted_ui_composites = deleted_files.filter(f => f.includes('ui/src/composites')) const created_ui_layout = created_files.filter(f => f.includes('ui/src/layout')) + const deleted_ui_layout = deleted_files.filter(f => f.includes('ui/src/layout')) const created_ui_files = [ ...created_ui_components, ...created_ui_composites, @@ -82,7 +85,9 @@ async function checkUiPackage() { fail(`${f} is missing \`${STATE_PROPERTIES_COMMENT}\` comment`) } - if (diff?.added.includes('private ') && !diff.added.includes(PRIVATE_COMMENT)) { + const privateFunctionsAdded = diff?.added.match(PRIVATE_FUNCTION_REGEX)?.length + + if (privateFunctionsAdded && !diff?.added.includes(PRIVATE_COMMENT)) { message( `${f} is missing \`${PRIVATE_COMMENT}\` comment, but seems to have private members. Check if this is correct` ) @@ -119,13 +124,21 @@ async function checkUiPackage() { const jsx_index_diff = jsx_index ? await diffForFile(jsx_index) : undefined const created_ui_components_index_ts = created_ui_components.filter(f => f.endsWith('index.ts')) const created_ui_composites_index_ts = created_ui_composites.filter(f => f.endsWith('index.ts')) + const deleted_ui_composites_index_ts = deleted_ui_composites.filter(f => f.endsWith('index.ts')) + const is_new_composites_added = + created_ui_composites_index_ts.length > deleted_ui_composites_index_ts.length const created_ui_layout_index_ts = created_ui_layout.filter(f => f.endsWith('index.ts')) + const deleted_ui_layout_index_ts = deleted_ui_layout.filter(f => f.endsWith('index.ts')) + const is_new_layout_added = created_ui_layout_index_ts.length > deleted_ui_layout_index_ts.length if (created_ui_components_index_ts.length && !ui_index_diff?.added.includes('src/components')) { fail('New components were added, but not exported in ui/index.ts') } - if (created_ui_composites_index_ts.length && !ui_index_diff?.added.includes('src/composites')) { + if (created_ui_composites_index_ts.length !== deleted_ui_composites_index_ts.length) { + fail('Number of created composites does not match number of deleted composites') + } + if (is_new_composites_added && !ui_index_diff?.added.includes('src/composites')) { fail('New composites were added, but not exported in ui/index.ts') } @@ -141,11 +154,11 @@ async function checkUiPackage() { ) } - if (created_ui_composites_index_ts.length && !jsx_index_diff?.added.includes('../composites')) { + if (is_new_composites_added && !jsx_index_diff?.added.includes('../composites')) { fail('New composites were added, but not exported in ui/utils/JSXTypeUtil.ts') } - if (created_ui_layout_index_ts.length && !jsx_index_diff?.added.includes('../layout')) { + if (is_new_layout_added && !jsx_index_diff?.added.includes('../layout')) { fail('New layout components were added, but not exported in ui/utils/JSXTypeUtil.ts') } @@ -153,7 +166,7 @@ async function checkUiPackage() { fail('New components were added, but no stories were created') } - if (created_ui_composites.length && !created_ui_composites_stories.length) { + if (is_new_composites_added && !created_ui_composites_stories.length) { fail('New composites were added, but no stories were created') } @@ -242,7 +255,9 @@ async function checkScaffoldHtmlPackage() { fail(`${f} is missing \`${STATE_PROPERTIES_COMMENT}\` comment`) } - if (diff?.added.includes('private ') && !diff.added.includes(PRIVATE_COMMENT)) { + const privateFunctionsAdded = diff?.added.match(PRIVATE_FUNCTION_REGEX)?.length + + if (privateFunctionsAdded && !diff?.added.includes(PRIVATE_COMMENT)) { message( `${f} is missing \`${PRIVATE_COMMENT}\` comment, but seems to have private members. Check if this is correct` ) diff --git a/packages/core/index.ts b/packages/core/index.ts index e7e4af8760..6e454b7e67 100644 --- a/packages/core/index.ts +++ b/packages/core/index.ts @@ -61,6 +61,9 @@ export type { SwapControllerState, SwapInputTarget } from './src/controllers/Swa export { SendController } from './src/controllers/SendController.js' export type { SendControllerState } from './src/controllers/SendController.js' +export { TooltipController } from './src/controllers/TooltipController.js' +export type { TooltipControllerState } from './src/controllers/TooltipController.js' + // -- Utils ------------------------------------------------------------------- export { AssetUtil } from './src/utils/AssetUtil.js' export { ConstantsUtil } from './src/utils/ConstantsUtil.js' diff --git a/packages/core/src/controllers/TooltipController.ts b/packages/core/src/controllers/TooltipController.ts new file mode 100644 index 0000000000..19e0860253 --- /dev/null +++ b/packages/core/src/controllers/TooltipController.ts @@ -0,0 +1,71 @@ +import { subscribeKey as subKey } from 'valtio/vanilla/utils' +import { proxy, subscribe as sub } from 'valtio/vanilla' + +// -- Types --------------------------------------------- // +type TriggerRect = { + width: number + height: number + top: number + left: number +} + +export interface TooltipControllerState { + message: string + triggerRect: TriggerRect + open: boolean + variant: 'shade' | 'fill' +} + +type StateKey = keyof TooltipControllerState + +// -- State --------------------------------------------- // +const state = proxy({ + message: '', + open: false, + triggerRect: { + width: 0, + height: 0, + top: 0, + left: 0 + }, + variant: 'shade' +}) + +// -- Controller ---------------------------------------- // +export const TooltipController = { + state, + + subscribe(callback: (newState: TooltipControllerState) => void) { + return sub(state, () => callback(state)) + }, + + subscribeKey(key: K, callback: (value: TooltipControllerState[K]) => void) { + return subKey(state, key, callback) + }, + + showTooltip({ + message, + triggerRect, + variant + }: { + message: string + triggerRect: TriggerRect + variant: 'shade' | 'fill' + }) { + state.open = true + state.message = message + state.triggerRect = triggerRect + state.variant = variant + }, + + hide() { + state.open = false + state.message = '' + state.triggerRect = { + width: 0, + height: 0, + top: 0, + left: 0 + } + } +} diff --git a/packages/core/tests/controllers/TooltipController.test.ts b/packages/core/tests/controllers/TooltipController.test.ts new file mode 100644 index 0000000000..76f39f4ad1 --- /dev/null +++ b/packages/core/tests/controllers/TooltipController.test.ts @@ -0,0 +1,44 @@ +import { describe, expect, it } from 'vitest' +import { TooltipController } from '../../index.js' + +// -- Constants ---------------------------------------------------------------- +const mockTriggerRect = { + width: 100, + height: 100, + top: 100, + left: 100 +} + +const mockTooltip = { + message: 'Hello, World!', + triggerRect: mockTriggerRect, + variant: 'shade' as 'shade' | 'fill' +} + +// -- Tests -------------------------------------------------------------------- +describe('TooltipController', () => { + it('should have valid default state', () => { + expect(TooltipController.state).toEqual({ + message: '', + open: false, + triggerRect: { + width: 0, + height: 0, + top: 0, + left: 0 + }, + variant: 'shade' + }) + }) + + it('should show the tooltip as expected', () => { + TooltipController.showTooltip(mockTooltip) + expect(TooltipController.state.open).toEqual(true) + expect(TooltipController.state.message).toEqual('Hello, World!') + }) + + it('should hide the tooltip as expected', () => { + TooltipController.hide() + expect(TooltipController.state.open).toEqual(false) + }) +}) diff --git a/packages/scaffold/index.ts b/packages/scaffold/index.ts index 9ba073d69e..9d14b0d477 100644 --- a/packages/scaffold/index.ts +++ b/packages/scaffold/index.ts @@ -72,6 +72,8 @@ export * from './src/partials/w3m-activity-list/index.js' export * from './src/partials/w3m-input-token/index.js' export * from './src/partials/w3m-input-address/index.js' export * from './src/partials/w3m-wallet-send-details/index.js' +export * from './src/partials/w3m-tooltip/index.js' +export * from './src/partials/w3m-tooltip-trigger/index.js' export { Web3ModalScaffold } from './src/client.js' export type { LibraryOptions, ScaffoldOptions } from './src/client.js' diff --git a/packages/scaffold/src/modal/w3m-modal/index.ts b/packages/scaffold/src/modal/w3m-modal/index.ts index 803c9d04c4..3489891b35 100644 --- a/packages/scaffold/src/modal/w3m-modal/index.ts +++ b/packages/scaffold/src/modal/w3m-modal/index.ts @@ -61,6 +61,7 @@ export class W3mModal extends LitElement { + ` : null } diff --git a/packages/scaffold/src/modal/w3m-modal/styles.ts b/packages/scaffold/src/modal/w3m-modal/styles.ts index 322c5b4cea..e3b34e50b2 100644 --- a/packages/scaffold/src/modal/w3m-modal/styles.ts +++ b/packages/scaffold/src/modal/w3m-modal/styles.ts @@ -41,7 +41,7 @@ export default css` } wui-card { - max-width: 360px; + max-width: var(--w3m-modal-width); width: 100%; position: relative; animation-duration: 0.2s; diff --git a/packages/scaffold/src/modal/w3m-router/index.ts b/packages/scaffold/src/modal/w3m-router/index.ts index 3f73184755..9e7d1a9778 100644 --- a/packages/scaffold/src/modal/w3m-router/index.ts +++ b/packages/scaffold/src/modal/w3m-router/index.ts @@ -1,5 +1,5 @@ import type { RouterControllerState } from '@web3modal/core' -import { RouterController } from '@web3modal/core' +import { RouterController, TooltipController } from '@web3modal/core' import { customElement } from '@web3modal/ui' import { LitElement, html } from 'lit' import { state } from 'lit/decorators.js' @@ -135,6 +135,8 @@ export class W3mRouter extends LitElement { } private async onViewChange(newView: RouterControllerState['view']) { + TooltipController.hide() + const { history } = RouterController.state let xOut = -10 let xIn = 10 diff --git a/packages/scaffold/src/partials/w3m-account-wallet-features-widget/index.ts b/packages/scaffold/src/partials/w3m-account-wallet-features-widget/index.ts index fb2f8632cc..74b77d20fa 100644 --- a/packages/scaffold/src/partials/w3m-account-wallet-features-widget/index.ts +++ b/packages/scaffold/src/partials/w3m-account-wallet-features-widget/index.ts @@ -99,26 +99,20 @@ export class W3mAccountWalletFeaturesWidget extends LitElement { > ${this.tokenBalanceTemplate()} - - - - + + + + + + + + + + + + + + void)[] = [] + + // -- State & Properties -------------------------------- // + @property() text = '' + + @state() open = TooltipController.state.open + + public constructor() { + super() + this.unsubscribe.push( + RouterController.subscribeKey('view', () => { + TooltipController.hide() + }), + ModalController.subscribeKey('open', modalOpen => { + if (!modalOpen) { + TooltipController.hide() + } + }), + TooltipController.subscribeKey('open', tooltipOpen => { + this.open = tooltipOpen + }) + ) + } + + // -- Lifecycle ----------------------------------------- // + public override disconnectedCallback() { + this.unsubscribe.forEach(unsubscribe => unsubscribe()) + TooltipController.hide() + } + + // -- Render -------------------------------------------- // + public override render() { + return html` +
+ ${this.renderChildren()} +
+ ` + } + + private renderChildren() { + return html` ` + } + + // -- Private ------------------------------------------- // + private onMouseEnter() { + const rect = this.getBoundingClientRect() + if (!this.open) { + TooltipController.showTooltip({ + message: this.text, + triggerRect: { + width: rect.width, + height: rect.height, + left: rect.left, + top: rect.top + }, + variant: 'shade' + }) + } + } + + private onMouseLeave(event: MouseEvent) { + if (!this.contains(event.relatedTarget as Node)) { + TooltipController.hide() + } + } +} + +declare global { + interface HTMLElementTagNameMap { + 'w3m-tooltip-trigger': WuiTooltipTrigger + } +} diff --git a/packages/scaffold/src/partials/w3m-tooltip-trigger/styles.ts b/packages/scaffold/src/partials/w3m-tooltip-trigger/styles.ts new file mode 100644 index 0000000000..4737ccee15 --- /dev/null +++ b/packages/scaffold/src/partials/w3m-tooltip-trigger/styles.ts @@ -0,0 +1,8 @@ +import { css } from 'lit' + +export default css` + :host { + width: 100%; + display: block; + } +` diff --git a/packages/scaffold/src/partials/w3m-tooltip/index.ts b/packages/scaffold/src/partials/w3m-tooltip/index.ts new file mode 100644 index 0000000000..677e75c5de --- /dev/null +++ b/packages/scaffold/src/partials/w3m-tooltip/index.ts @@ -0,0 +1,68 @@ +import { html, LitElement } from 'lit' +import { TooltipController } from '@web3modal/core' +import { customElement } from '@web3modal/ui' +import { state } from 'lit/decorators.js' +import styles from './styles.js' + +@customElement('w3m-tooltip') +export class W3mTooltip extends LitElement { + public static override styles = [styles] + + // -- Members ------------------------------------------- // + private unsubscribe: (() => void)[] = [] + + // -- State & Properties -------------------------------- // + @state() private open = TooltipController.state.open + + @state() private message = TooltipController.state.message + + @state() private triggerRect = TooltipController.state.triggerRect + + @state() private variant = TooltipController.state.variant + + public constructor() { + super() + this.unsubscribe.push( + ...[ + TooltipController.subscribe(newState => { + this.open = newState.open + this.message = newState.message + this.triggerRect = newState.triggerRect + this.variant = newState.variant + }) + ] + ) + } + + // -- Lifecycle ----------------------------------------- // + public override disconnectedCallback() { + this.unsubscribe.forEach(unsubscribe => unsubscribe()) + } + + // -- Render -------------------------------------------- // + public override render() { + this.dataset['variant'] = this.variant + + const topValue = this.triggerRect.top + const leftValue = this.triggerRect.left + + this.style.cssText = ` + --w3m-tooltip-top: ${topValue}px; + --w3m-tooltip-left: ${leftValue}px; + --w3m-tooltip-parent-width: ${this.triggerRect.width / 2}px; + --w3m-tooltip-display: ${this.open ? 'flex' : 'none'}; + --w3m-tooltip-opacity: ${this.open ? 1 : 0}; + ` + + return html` + + ${this.message} + ` + } +} + +declare global { + interface HTMLElementTagNameMap { + 'w3m-tooltip': W3mTooltip + } +} diff --git a/packages/scaffold/src/partials/w3m-tooltip/styles.ts b/packages/scaffold/src/partials/w3m-tooltip/styles.ts new file mode 100644 index 0000000000..3d528a8dab --- /dev/null +++ b/packages/scaffold/src/partials/w3m-tooltip/styles.ts @@ -0,0 +1,67 @@ +import { css } from 'lit' + +export default css` + :host { + pointer-events: none; + } + + :host > wui-flex { + display: var(--w3m-tooltip-display); + opacity: var(--w3m-tooltip-opacity); + padding: 9px var(--wui-spacing-s) 10px var(--wui-spacing-s); + border-radius: var(--wui-border-radius-xxs); + color: var(--wui-color-bg-100); + position: fixed; + top: var(--w3m-tooltip-top); + left: var(--w3m-tooltip-left); + transform: translate(calc(-50% + var(--w3m-tooltip-parent-width)), calc(-100% - 8px)); + max-width: calc(var(--w3m-modal-width) - var(--wui-spacing-xl)); + transition: opacity 0.2s var(--wui-ease-out-power-2); + will-change: opacity; + } + + :host([data-variant='shade']) > wui-flex { + background-color: var(--wui-color-bg-150); + border: 1px solid var(--wui-gray-glass-005); + } + + :host([data-variant='shade']) > wui-flex > wui-text { + color: var(--wui-color-fg-150); + } + + :host([data-variant='fill']) > wui-flex { + background-color: var(--wui-color-fg-100); + border: none; + } + + wui-icon { + position: absolute; + width: 12px !important; + height: 4px !important; + color: var(--wui-color-bg-150); + } + + wui-icon[data-placement='top'] { + bottom: 0px; + left: 50%; + transform: translate(-50%, 95%); + } + + wui-icon[data-placement='bottom'] { + top: 0; + left: 50%; + transform: translate(-50%, -95%) rotate(180deg); + } + + wui-icon[data-placement='right'] { + top: 50%; + left: 0; + transform: translate(-65%, -50%) rotate(90deg); + } + + wui-icon[data-placement='left'] { + top: 50%; + right: 0%; + transform: translate(65%, -50%) rotate(270deg); + } +` diff --git a/packages/ui/index.ts b/packages/ui/index.ts index 3a683157a8..104fb7d75c 100644 --- a/packages/ui/index.ts +++ b/packages/ui/index.ts @@ -45,7 +45,6 @@ export * from './src/composites/wui-tabs/index.js' export * from './src/composites/wui-token-button/index.js' export * from './src/composites/wui-tag/index.js' export * from './src/composites/wui-tooltip/index.js' -export * from './src/composites/wui-tooltip-select/index.js' export * from './src/composites/wui-token-list-item/index.js' export * from './src/composites/wui-tag/index.js' export * from './src/composites/wui-transaction-visual/index.js' @@ -69,6 +68,7 @@ export * from './src/composites/wui-list-description/index.js' export * from './src/composites/wui-input-amount/index.js' export * from './src/composites/wui-token-button/index.js' export * from './src/composites/wui-preview-item/index.js' +export * from './src/composites/wui-icon-button/index.js' export * from './src/layout/wui-flex/index.js' export * from './src/layout/wui-grid/index.js' diff --git a/packages/ui/src/composites/wui-icon-button/index.ts b/packages/ui/src/composites/wui-icon-button/index.ts new file mode 100644 index 0000000000..9fdc315ef3 --- /dev/null +++ b/packages/ui/src/composites/wui-icon-button/index.ts @@ -0,0 +1,31 @@ +import { html, LitElement } from 'lit' +import { property } from 'lit/decorators.js' +import { customElement } from '../../utils/WebComponentsUtil.js' +import styles from './styles.js' +import '../wui-tooltip/index.js' +import '../../components/wui-icon/index.js' +import { elementStyles, resetStyles } from '../../utils/ThemeUtil.js' +import type { IconType } from '../../utils/TypeUtil.js' + +@customElement('wui-icon-button') +export class WuiIconButton extends LitElement { + public static override styles = [resetStyles, elementStyles, styles] + + // -- State & Properties -------------------------------- // + @property() text = '' + + @property() icon: IconType = 'card' + + // -- Render -------------------------------------------- // + public override render() { + return html`` + } +} + +declare global { + interface HTMLElementTagNameMap { + 'wui-icon-button': WuiIconButton + } +} diff --git a/packages/ui/src/composites/wui-tooltip-select/styles.ts b/packages/ui/src/composites/wui-icon-button/styles.ts similarity index 100% rename from packages/ui/src/composites/wui-tooltip-select/styles.ts rename to packages/ui/src/composites/wui-icon-button/styles.ts diff --git a/packages/ui/src/composites/wui-tooltip-select/index.ts b/packages/ui/src/composites/wui-tooltip-select/index.ts deleted file mode 100644 index c28893bd3b..0000000000 --- a/packages/ui/src/composites/wui-tooltip-select/index.ts +++ /dev/null @@ -1,61 +0,0 @@ -import { html, LitElement } from 'lit' -import { property } from 'lit/decorators.js' -import { customElement } from '../../utils/WebComponentsUtil.js' -import styles from './styles.js' -import '../wui-tooltip/index.js' -import '../../components/wui-icon/index.js' -import { elementStyles, resetStyles } from '../../utils/ThemeUtil.js' -import type { IconType } from '../../utils/TypeUtil.js' - -@customElement('wui-tooltip-select') -export class WuiTooltipSelect extends LitElement { - public static override styles = [resetStyles, elementStyles, styles] - - // -- State & Properties -------------------------------- // - @property() text = '' - - @property() icon: IconType = 'card' - - // -- Render -------------------------------------------- // - public override render() { - return html` - ` - } - - // -- Private ------------------------------------------- // - private onMouseEnter() { - const element = this.shadowRoot?.querySelector('wui-tooltip') - if (element) { - element.style.display = 'flex' - element?.animate([{ opacity: 0 }, { opacity: 1 }], { - fill: 'forwards', - easing: 'ease', - duration: 250 - }) - } - } - - private onMouseLeave() { - const element = this.shadowRoot?.querySelector('wui-tooltip') - if (element) { - element.style.display = 'none' - element?.animate([{ opacity: 1 }, { opacity: 0 }], { - fill: 'forwards', - easing: 'ease', - duration: 200 - }) - } - } -} - -declare global { - interface HTMLElementTagNameMap { - 'wui-tooltip-select': WuiTooltipSelect - } -} diff --git a/packages/ui/src/utils/JSXTypeUtil.ts b/packages/ui/src/utils/JSXTypeUtil.ts index 68b7ada54d..43f322bc28 100644 --- a/packages/ui/src/utils/JSXTypeUtil.ts +++ b/packages/ui/src/utils/JSXTypeUtil.ts @@ -58,7 +58,7 @@ import type { WuiTag } from '../composites/wui-tag/index.js' import type { WuiTokenButton } from '../composites/wui-token-button/index.js' import type { WuiTokenListItem } from '../composites/wui-token-list-item/index.js' import type { WuiTooltip } from '../composites/wui-tooltip/index.js' -import type { WuiTooltipSelect } from '../composites/wui-tooltip-select/index.js' +import type { WuiIconButton } from '../composites/wui-icon-button/index.js' import type { WuiTransactionListItem } from '../composites/wui-transaction-list-item/index.js' import type { WuiTransactionListItemLoader } from '../composites/wui-transaction-list-item-loader/index.js' import type { WuiTransactionVisual } from '../composites/wui-transaction-visual/index.js' @@ -135,7 +135,7 @@ declare global { 'wui-tag': CustomElement 'wui-token-button': CustomElement 'wui-token-list-item': CustomElement - 'wui-tooltip-select': CustomElement + 'wui-icon-button': CustomElement 'wui-tooltip': CustomElement 'wui-transaction-list-item-loader': CustomElement 'wui-transaction-list-item': CustomElement diff --git a/packages/ui/src/utils/ThemeUtil.ts b/packages/ui/src/utils/ThemeUtil.ts index cca68be8d4..80b743834b 100644 --- a/packages/ui/src/utils/ThemeUtil.ts +++ b/packages/ui/src/utils/ThemeUtil.ts @@ -45,6 +45,7 @@ function createRootStyles(themeVariables?: ThemeVariables) { core: css` @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); :root { + --w3m-modal-width: 360px; --w3m-color-mix-strength: ${unsafeCSS( themeVariables?.['--w3m-color-mix-strength'] ? `${themeVariables['--w3m-color-mix-strength']}%`