From 1b10cae3a676696b1f7321cc2943b8b54ae69c91 Mon Sep 17 00:00:00 2001 From: Sven Date: Thu, 29 Feb 2024 17:28:36 +0100 Subject: [PATCH 01/13] add several components and add feature flag --- .../stories/composites/wui-balance.stories.ts | 18 + .../composites/wui-profile-button.stories.ts | 32 ++ .../stories/composites/wui-promo.stories.ts | 17 + .../composites/wui-tooltip-select.stories.ts | 30 ++ .../stories/composites/wui-tooltip.stories.ts | 13 +- apps/gallery/utils/PresetUtils.ts | 1 + .../core/src/controllers/OptionsController.ts | 5 + packages/scaffold/index.ts | 2 + packages/scaffold/src/client.ts | 5 + .../w3m-account-default-widget/index.ts | 308 ++++++++++++++++++ .../w3m-account-default-widget}/styles.ts | 0 .../index.ts | 124 +++++++ .../styles.ts | 24 ++ .../views/w3m-account-settings-view/index.ts | 18 +- .../src/views/w3m-account-view/index.ts | 298 +---------------- packages/ui/index.ts | 4 + .../ui/src/assets/svg/cursor-transparent.ts | 11 + packages/ui/src/components/wui-icon/index.ts | 2 + .../ui/src/composites/wui-balance/index.ts | 26 ++ .../ui/src/composites/wui-balance/styles.ts | 16 + .../composites/wui-profile-button/index.ts | 76 +++++ .../composites/wui-profile-button/styles.ts | 37 +++ packages/ui/src/composites/wui-promo/index.ts | 29 ++ .../ui/src/composites/wui-promo/styles.ts | 24 ++ packages/ui/src/composites/wui-tabs/index.ts | 10 +- packages/ui/src/composites/wui-tabs/styles.ts | 19 +- .../composites/wui-tooltip-select/index.ts | 59 ++++ .../composites/wui-tooltip-select/styles.ts | 37 +++ .../ui/src/composites/wui-tooltip/index.ts | 6 +- .../ui/src/composites/wui-tooltip/styles.ts | 18 +- packages/ui/src/utils/JSXTypeUtil.ts | 8 + packages/ui/src/utils/ThemeUtil.ts | 2 + packages/ui/src/utils/TypeUtil.ts | 1 + packages/ui/src/utils/UiHelperUtil.ts | 8 + 34 files changed, 966 insertions(+), 322 deletions(-) create mode 100644 apps/gallery/stories/composites/wui-balance.stories.ts create mode 100644 apps/gallery/stories/composites/wui-profile-button.stories.ts create mode 100644 apps/gallery/stories/composites/wui-promo.stories.ts create mode 100644 apps/gallery/stories/composites/wui-tooltip-select.stories.ts create mode 100644 packages/scaffold/src/partials/w3m-account-default-widget/index.ts rename packages/scaffold/src/{views/w3m-account-view => partials/w3m-account-default-widget}/styles.ts (100%) create mode 100644 packages/scaffold/src/partials/w3m-account-wallet-features-widget/index.ts create mode 100644 packages/scaffold/src/partials/w3m-account-wallet-features-widget/styles.ts create mode 100644 packages/ui/src/assets/svg/cursor-transparent.ts create mode 100644 packages/ui/src/composites/wui-balance/index.ts create mode 100644 packages/ui/src/composites/wui-balance/styles.ts create mode 100644 packages/ui/src/composites/wui-profile-button/index.ts create mode 100644 packages/ui/src/composites/wui-profile-button/styles.ts create mode 100644 packages/ui/src/composites/wui-promo/index.ts create mode 100644 packages/ui/src/composites/wui-promo/styles.ts create mode 100644 packages/ui/src/composites/wui-tooltip-select/index.ts create mode 100644 packages/ui/src/composites/wui-tooltip-select/styles.ts diff --git a/apps/gallery/stories/composites/wui-balance.stories.ts b/apps/gallery/stories/composites/wui-balance.stories.ts new file mode 100644 index 0000000000..502f332363 --- /dev/null +++ b/apps/gallery/stories/composites/wui-balance.stories.ts @@ -0,0 +1,18 @@ +import type { Meta } from '@storybook/web-components' +import '@web3modal/ui/src/composites/wui-balance' +import type { WuiBalance } from '@web3modal/ui/src/composites/wui-balance' +import { html } from 'lit' + +type Component = Meta + +export default { + title: 'Composites/wui-balance', + args: { + dollars: '4,798', + pennies: '75' + } +} as Component + +export const Default: Component = { + render: args => html`` +} diff --git a/apps/gallery/stories/composites/wui-profile-button.stories.ts b/apps/gallery/stories/composites/wui-profile-button.stories.ts new file mode 100644 index 0000000000..f5d423f6f8 --- /dev/null +++ b/apps/gallery/stories/composites/wui-profile-button.stories.ts @@ -0,0 +1,32 @@ +import type { Meta } from '@storybook/web-components' +import '@web3modal/ui/src/composites/wui-profile-button' +import type { WuiProfileButton } from '@web3modal/ui/src/composites/wui-profile-button' +import { html } from 'lit' +import { address, avatarImageSrc, networkImageSrc } from '../../utils/PresetUtils' + +type Component = Meta + +export default { + title: 'Composites/wui-profile-button', + args: { + networkSrc: networkImageSrc, + avatarSrc: avatarImageSrc, + address, + isProfileName: false + }, + argTypes: { + isProfileName: { + control: { type: 'boolean' } + } + } +} as Component + +export const Default: Component = { + render: args => + html`` +} diff --git a/apps/gallery/stories/composites/wui-promo.stories.ts b/apps/gallery/stories/composites/wui-promo.stories.ts new file mode 100644 index 0000000000..0ae2b47c44 --- /dev/null +++ b/apps/gallery/stories/composites/wui-promo.stories.ts @@ -0,0 +1,17 @@ +import type { Meta } from '@storybook/web-components' +import '@web3modal/ui/src/composites/wui-promo' +import type { WuiPromo } from '@web3modal/ui/src/composites/wui-promo' +import { html } from 'lit' + +type Component = Meta + +export default { + title: 'Composites/wui-promo', + args: { + text: 'Activate your account' + } +} as Component + +export const Default: Component = { + render: args => html`` +} diff --git a/apps/gallery/stories/composites/wui-tooltip-select.stories.ts b/apps/gallery/stories/composites/wui-tooltip-select.stories.ts new file mode 100644 index 0000000000..ddcd25bbf3 --- /dev/null +++ b/apps/gallery/stories/composites/wui-tooltip-select.stories.ts @@ -0,0 +1,30 @@ +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 { html } from 'lit' +import '../../components/gallery-container' +import { iconOptions } from '../../utils/PresetUtils' + +type Component = Meta + +export default { + title: 'Composites/wui-tooltip-select', + args: { + icon: 'card', + text: 'Buy' + }, + argTypes: { + icon: { + options: iconOptions, + control: { type: 'select' } + } + } +} as Component + +export const Default: Component = { + render: args => html` + + + ` +} diff --git a/apps/gallery/stories/composites/wui-tooltip.stories.ts b/apps/gallery/stories/composites/wui-tooltip.stories.ts index ee0f691597..39b12947e1 100644 --- a/apps/gallery/stories/composites/wui-tooltip.stories.ts +++ b/apps/gallery/stories/composites/wui-tooltip.stories.ts @@ -11,18 +11,27 @@ export default { title: 'Composites/wui-tooltip', args: { message: 'Tooltip', - placement: 'top' + placement: 'top', + variant: 'fill' }, argTypes: { placement: { options: placementOptions, control: { type: 'select' } + }, + variant: { + options: ['fill', 'shade'], + control: { type: 'select' } } } } as Component export const Default: Component = { render: args => - html`` + html`` } diff --git a/apps/gallery/utils/PresetUtils.ts b/apps/gallery/utils/PresetUtils.ts index 9184e67b5c..fae3952a7a 100644 --- a/apps/gallery/utils/PresetUtils.ts +++ b/apps/gallery/utils/PresetUtils.ts @@ -179,6 +179,7 @@ export const iconOptions: IconType[] = [ 'compass', 'copy', 'cursor', + 'cursorTransparent', 'desktop', 'disconnect', 'discord', diff --git a/packages/core/src/controllers/OptionsController.ts b/packages/core/src/controllers/OptionsController.ts index 4b9b17a9b4..a79df96217 100644 --- a/packages/core/src/controllers/OptionsController.ts +++ b/packages/core/src/controllers/OptionsController.ts @@ -19,6 +19,7 @@ export interface OptionsControllerState { enableAnalytics?: boolean metadata?: Metadata enableOnramp?: boolean + enableWalletFeatures?: boolean } type StateKey = keyof OptionsControllerState @@ -92,5 +93,9 @@ export const OptionsController = { setOnrampEnabled(enableOnramp: OptionsControllerState['enableOnramp']) { state.enableOnramp = enableOnramp + }, + + setWalletFeaturesEnabled(enableWalletFeatures: OptionsControllerState['enableWalletFeatures']) { + state.enableWalletFeatures = enableWalletFeatures } } diff --git a/packages/scaffold/index.ts b/packages/scaffold/index.ts index fba2aa8681..c6aca2a1ad 100644 --- a/packages/scaffold/index.ts +++ b/packages/scaffold/index.ts @@ -51,6 +51,8 @@ export * from './src/partials/w3m-mobile-download-links/index.js' export * from './src/partials/w3m-onramp-providers-footer/index.js' export * from './src/partials/w3m-snackbar/index.js' export * from './src/partials/w3m-email-login-widget/index.js' +export * from './src/partials/w3m-account-default-widget/index.js' +export * from './src/partials/w3m-account-wallet-features-widget/index.js' export { Web3ModalScaffold } from './src/client.js' export type { LibraryOptions, ScaffoldOptions } from './src/client.js' diff --git a/packages/scaffold/src/client.ts b/packages/scaffold/src/client.ts index 283c1ca1ea..ee3910ca08 100644 --- a/packages/scaffold/src/client.ts +++ b/packages/scaffold/src/client.ts @@ -47,6 +47,7 @@ export interface LibraryOptions { enableAnalytics?: OptionsControllerState['enableAnalytics'] metadata?: OptionsControllerState['metadata'] enableOnramp?: OptionsControllerState['enableOnramp'] + enableWalletFeatures?: OptionsControllerState['enableWalletFeatures'] allowUnsupportedChain?: NetworkControllerState['allowUnsupportedChain'] _sdkVersion: OptionsControllerState['sdkVersion'] } @@ -238,6 +239,10 @@ export class Web3ModalScaffold { OptionsController.setOnrampEnabled(Boolean(options.enableOnramp)) } + if (options.enableWalletFeatures) { + OptionsController.setWalletFeaturesEnabled(Boolean(options.enableWalletFeatures)) + } + if (options.allowUnsupportedChain) { NetworkController.setAllowUnsupportedChain(options.allowUnsupportedChain) } diff --git a/packages/scaffold/src/partials/w3m-account-default-widget/index.ts b/packages/scaffold/src/partials/w3m-account-default-widget/index.ts new file mode 100644 index 0000000000..147c57c065 --- /dev/null +++ b/packages/scaffold/src/partials/w3m-account-default-widget/index.ts @@ -0,0 +1,308 @@ +import { + AccountController, + CoreHelperUtil, + ModalController, + NetworkController, + RouterController, + AssetUtil, + StorageUtil, + ConnectorController, + EventsController, + ConnectionController, + SnackController, + ConstantsUtil, + OptionsController +} from '@web3modal/core' +import { UiHelperUtil, customElement } from '@web3modal/ui' +import { LitElement, html } from 'lit' +import { state } from 'lit/decorators.js' +import { ifDefined } from 'lit/directives/if-defined.js' +import styles from './styles.js' + +@customElement('w3m-account-default-widget') +export class W3mAccountDefaultWidget extends LitElement { + public static override styles = styles + + // -- Members -------------------------------------------- // + private unsubscribe: (() => void)[] = [] + + // -- State & Properties --------------------------------- // + @state() private address = AccountController.state.address + + @state() private profileImage = AccountController.state.profileImage + + @state() private profileName = AccountController.state.profileName + + @state() private network = NetworkController.state.caipNetwork + + @state() private disconnecting = false + + @state() private balance = AccountController.state.balance + + @state() private balanceSymbol = AccountController.state.balanceSymbol + + public constructor() { + super() + this.unsubscribe.push( + ...[ + AccountController.subscribe(val => { + if (val.address) { + this.address = val.address + this.profileImage = val.profileImage + this.profileName = val.profileName + this.balance = val.balance + this.balanceSymbol = val.balanceSymbol + } else { + ModalController.close() + } + }) + ], + NetworkController.subscribeKey('caipNetwork', val => { + if (val?.id) { + this.network = val + } + }) + ) + } + + public override disconnectedCallback() { + this.unsubscribe.forEach(unsubscribe => unsubscribe()) + } + + // -- Render -------------------------------------------- // + public override render() { + if (!this.address) { + throw new Error('w3m-account-view: No account provided') + } + + const networkImage = AssetUtil.getNetworkImage(this.network) + + return html` + + + + + ${this.profileName + ? UiHelperUtil.getTruncateString({ + string: this.profileName, + charsStart: 20, + charsEnd: 0, + truncate: 'end' + }) + : UiHelperUtil.getTruncateString({ + string: this.address ? this.address : '', + charsStart: 4, + charsEnd: 4, + truncate: 'middle' + })} + + + + ${CoreHelperUtil.formatBalance(this.balance, this.balanceSymbol)} + + ${this.explorerBtnTemplate()} + + + + ${this.emailCardTemplate()} ${this.emailBtnTemplate()} + + + + ${this.network?.name ?? 'Unknown'} + + + ${this.onrampTemplate()} + + Activity + + + Disconnect + + ` + } + + // -- Private ------------------------------------------- // + private onrampTemplate() { + const { enableOnramp } = OptionsController.state + + if (!enableOnramp) { + return null + } + + return html` + + Buy crypto + + ` + } + + private emailCardTemplate() { + const type = StorageUtil.getConnectedConnector() + const emailConnector = ConnectorController.getEmailConnector() + const { origin } = location + if (!emailConnector || type !== 'EMAIL' || origin.includes(ConstantsUtil.SECURE_SITE)) { + return null + } + + return html` + + ` + } + + private handleClickPay() { + RouterController.push('OnRampProviders') + } + + private explorerBtnTemplate() { + const { addressExplorerUrl } = AccountController.state + + if (!addressExplorerUrl) { + return null + } + + return html` + + + Block Explorer + + + ` + } + + private emailBtnTemplate() { + const type = StorageUtil.getConnectedConnector() + const emailConnector = ConnectorController.getEmailConnector() + if (!emailConnector || type !== 'EMAIL') { + return null + } + const email = emailConnector.provider.getEmail() ?? '' + + return html` + this.onGoToUpdateEmail(email)} + > + ${email} + + ` + } + + private isAllowedNetworkSwitch() { + const { requestedCaipNetworks } = NetworkController.state + const isMultiNetwork = requestedCaipNetworks ? requestedCaipNetworks.length > 1 : false + const isValidNetwork = requestedCaipNetworks?.find(({ id }) => id === this.network?.id) + + return isMultiNetwork || !isValidNetwork + } + + private onCopyAddress() { + try { + if (this.address) { + CoreHelperUtil.copyToClopboard(this.address) + SnackController.showSuccess('Address copied') + } + } catch { + SnackController.showError('Failed to copy') + } + } + + private onNetworks() { + if (this.isAllowedNetworkSwitch()) { + EventsController.sendEvent({ type: 'track', event: 'CLICK_NETWORKS' }) + RouterController.push('Networks') + } + } + + private onTransactions() { + EventsController.sendEvent({ type: 'track', event: 'CLICK_TRANSACTIONS' }) + RouterController.push('Transactions') + } + + private async onDisconnect() { + try { + this.disconnecting = true + await ConnectionController.disconnect() + EventsController.sendEvent({ type: 'track', event: 'DISCONNECT_SUCCESS' }) + ModalController.close() + } catch { + EventsController.sendEvent({ type: 'track', event: 'DISCONNECT_ERROR' }) + SnackController.showError('Failed to disconnect') + } finally { + this.disconnecting = false + } + } + + private onExplorer() { + const { addressExplorerUrl } = AccountController.state + if (addressExplorerUrl) { + CoreHelperUtil.openHref(addressExplorerUrl, '_blank') + } + } + + private onGoToUpgradeView() { + EventsController.sendEvent({ type: 'track', event: 'EMAIL_UPGRADE_FROM_MODAL' }) + RouterController.push('UpgradeEmailWallet') + } + + private onGoToUpdateEmail(email: string) { + RouterController.push('UpdateEmailWallet', { email }) + } +} + +declare global { + interface HTMLElementTagNameMap { + 'w3m-account-default-widget': W3mAccountDefaultWidget + } +} diff --git a/packages/scaffold/src/views/w3m-account-view/styles.ts b/packages/scaffold/src/partials/w3m-account-default-widget/styles.ts similarity index 100% rename from packages/scaffold/src/views/w3m-account-view/styles.ts rename to packages/scaffold/src/partials/w3m-account-default-widget/styles.ts 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 new file mode 100644 index 0000000000..15d5c07fbc --- /dev/null +++ b/packages/scaffold/src/partials/w3m-account-wallet-features-widget/index.ts @@ -0,0 +1,124 @@ +import { + AccountController, + ModalController, + NetworkController, + AssetUtil, + RouterController +} from '@web3modal/core' +import { UiHelperUtil, customElement } from '@web3modal/ui' +import { LitElement, html } from 'lit' +import { state } from 'lit/decorators.js' +import { ifDefined } from 'lit/directives/if-defined.js' +import styles from './styles.js' + +@customElement('w3m-account-wallet-features-widget') +export class W3mAccountWalletFeaturesWidget extends LitElement { + public static override styles = styles + + // -- Members -------------------------------------------- // + private unsubscribe: (() => void)[] = [] + + // -- State & Properties --------------------------------- // + @state() private address = AccountController.state.address + + @state() private profileImage = AccountController.state.profileImage + + @state() private profileName = AccountController.state.profileName + + @state() private network = NetworkController.state.caipNetwork + + @state() private balance = AccountController.state.balance + + public constructor() { + super() + this.unsubscribe.push( + ...[ + AccountController.subscribe(val => { + if (val.address) { + this.address = val.address + this.profileImage = val.profileImage + this.profileName = val.profileName + this.balance = val.balance + } else { + ModalController.close() + } + }) + ], + NetworkController.subscribeKey('caipNetwork', val => { + if (val?.id) { + this.network = val + } + }) + ) + } + + public override disconnectedCallback() { + this.unsubscribe.forEach(unsubscribe => unsubscribe()) + } + + // -- Render -------------------------------------------- // + public override render() { + if (!this.address) { + throw new Error('w3m-account-view: No account provided') + } + + const tabs = [{ label: 'Tokens', icon: '' }, { label: 'NFTs', icon: '' }, { label: 'Activity' }] + + const networkImage = AssetUtil.getNetworkImage(this.network) + + return html` + ${this.activateAccountTemplate()} + + + + + + + + + + + ` + } + + // -- Private ------------------------------------------- // + + private activateAccountTemplate() { + // Todo: Check if SA is deployed + + return html` ` + } + + private onProfileButtonClick() { + RouterController.push('AccountSettings') + } + + private handleClickPay() { + RouterController.push('OnRampProviders') + } +} + +declare global { + interface HTMLElementTagNameMap { + 'w3m-account-wallet-features-widget': W3mAccountWalletFeaturesWidget + } +} diff --git a/packages/scaffold/src/partials/w3m-account-wallet-features-widget/styles.ts b/packages/scaffold/src/partials/w3m-account-wallet-features-widget/styles.ts new file mode 100644 index 0000000000..264076216f --- /dev/null +++ b/packages/scaffold/src/partials/w3m-account-wallet-features-widget/styles.ts @@ -0,0 +1,24 @@ +import { css } from 'lit' + +export default css` + wui-flex { + width: 100%; + } + + wui-promo { + position: absolute; + top: -32px; + } + + wui-profile-button { + margin-top: var(--wui-spacing-2l); + } + + wui-tooltip-select { + width: 100%; + } + + wui-tabs { + width: 100%; + } +` diff --git a/packages/scaffold/src/views/w3m-account-settings-view/index.ts b/packages/scaffold/src/views/w3m-account-settings-view/index.ts index 61cc2faff9..75d662de22 100644 --- a/packages/scaffold/src/views/w3m-account-settings-view/index.ts +++ b/packages/scaffold/src/views/w3m-account-settings-view/index.ts @@ -111,17 +111,11 @@ export class W3mAccountSettingsView extends LitElement { @click=${this.onCopyAddress} > - - - ${CoreHelperUtil.formatBalance(this.balance, this.balanceSymbol)} - - ${this.explorerBtnTemplate()} - - + - - - Activity - void)[] = [] - - // -- State & Properties --------------------------------- // - @state() private address = AccountController.state.address - - @state() private profileImage = AccountController.state.profileImage - - @state() private profileName = AccountController.state.profileName - - @state() private network = NetworkController.state.caipNetwork - - @state() private disconnecting = false - - @state() private balance = AccountController.state.balance - - @state() private balanceSymbol = AccountController.state.balanceSymbol - - public constructor() { - super() - this.unsubscribe.push( - ...[ - AccountController.subscribe(val => { - if (val.address) { - this.address = val.address - this.profileImage = val.profileImage - this.profileName = val.profileName - this.balance = val.balance - this.balanceSymbol = val.balanceSymbol - } else { - ModalController.close() - } - }) - ], - NetworkController.subscribeKey('caipNetwork', val => { - if (val?.id) { - this.network = val - } - }) - ) - } - - public override disconnectedCallback() { - this.unsubscribe.forEach(unsubscribe => unsubscribe()) - } - // -- Render -------------------------------------------- // public override render() { - if (!this.address) { - throw new Error('w3m-account-view: No account provided') - } - - const networkImage = AssetUtil.getNetworkImage(this.network) - return html` - - - - - - ${this.profileName - ? UiHelperUtil.getTruncateString({ - string: this.profileName, - charsStart: 20, - charsEnd: 0, - truncate: 'end' - }) - : UiHelperUtil.getTruncateString({ - string: this.address, - charsStart: 4, - charsEnd: 4, - truncate: 'middle' - })} - - - - ${CoreHelperUtil.formatBalance(this.balance, this.balanceSymbol)} - - ${this.explorerBtnTemplate()} - - - - ${this.emailCardTemplate()} ${this.emailBtnTemplate()} - - - - ${this.network?.name ?? 'Unknown'} - - - ${this.onrampTemplate()} - - Activity - - - Disconnect - - + ${OptionsController.state.enableWalletFeatures + ? this.walletFeaturesTemplate() + : this.defaultTemplate()} ` } // -- Private ------------------------------------------- // - private onrampTemplate() { - const { enableOnramp } = OptionsController.state - - if (!enableOnramp) { - return null - } - - return html` - - Buy crypto - - ` - } - - private emailCardTemplate() { - const type = StorageUtil.getConnectedConnector() - const emailConnector = ConnectorController.getEmailConnector() - const { origin } = location - if (!emailConnector || type !== 'EMAIL' || origin.includes(ConstantsUtil.SECURE_SITE)) { - return null - } - - return html` - - ` - } - - private handleClickPay() { - RouterController.push('OnRampProviders') - } - - private explorerBtnTemplate() { - const { addressExplorerUrl } = AccountController.state - - if (!addressExplorerUrl) { - return null - } - - return html` - - - Block Explorer - - - ` - } - - private emailBtnTemplate() { - const type = StorageUtil.getConnectedConnector() - const emailConnector = ConnectorController.getEmailConnector() - if (!emailConnector || type !== 'EMAIL') { - return null - } - const email = emailConnector.provider.getEmail() ?? '' - - return html` - this.onGoToUpdateEmail(email)} - > - ${email} - - ` - } - - private isAllowedNetworkSwitch() { - const { requestedCaipNetworks } = NetworkController.state - const isMultiNetwork = requestedCaipNetworks ? requestedCaipNetworks.length > 1 : false - const isValidNetwork = requestedCaipNetworks?.find(({ id }) => id === this.network?.id) - - return isMultiNetwork || !isValidNetwork - } - - private onCopyAddress() { - try { - if (this.address) { - CoreHelperUtil.copyToClopboard(this.address) - SnackController.showSuccess('Address copied') - } - } catch { - SnackController.showError('Failed to copy') - } - } - - private onNetworks() { - if (this.isAllowedNetworkSwitch()) { - EventsController.sendEvent({ type: 'track', event: 'CLICK_NETWORKS' }) - RouterController.push('Networks') - } - } - - private onTransactions() { - EventsController.sendEvent({ type: 'track', event: 'CLICK_TRANSACTIONS' }) - RouterController.push('Transactions') - } - - private async onDisconnect() { - try { - this.disconnecting = true - await ConnectionController.disconnect() - EventsController.sendEvent({ type: 'track', event: 'DISCONNECT_SUCCESS' }) - ModalController.close() - } catch { - EventsController.sendEvent({ type: 'track', event: 'DISCONNECT_ERROR' }) - SnackController.showError('Failed to disconnect') - } finally { - this.disconnecting = false - } - } - - private onExplorer() { - const { addressExplorerUrl } = AccountController.state - if (addressExplorerUrl) { - CoreHelperUtil.openHref(addressExplorerUrl, '_blank') - } - } - - private onGoToUpgradeView() { - EventsController.sendEvent({ type: 'track', event: 'EMAIL_UPGRADE_FROM_MODAL' }) - RouterController.push('UpgradeEmailWallet') + private walletFeaturesTemplate() { + return html`` } - private onGoToUpdateEmail(email: string) { - RouterController.push('UpdateEmailWallet', { email }) + private defaultTemplate() { + return html`` } } diff --git a/packages/ui/index.ts b/packages/ui/index.ts index 641cc83cab..605082121e 100644 --- a/packages/ui/index.ts +++ b/packages/ui/index.ts @@ -49,6 +49,10 @@ export * from './src/composites/wui-list-network/index.js' export * from './src/composites/wui-list-wallet-transaction/index.js' export * from './src/composites/wui-onramp-activity-item/index.js' export * from './src/composites/wui-onramp-provider-item/index.js' +export * from './src/composites/wui-promo/index.js' +export * from './src/composites/wui-tooltip-select/index.js' +export * from './src/composites/wui-balance/index.js' +export * from './src/composites/wui-profile-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/assets/svg/cursor-transparent.ts b/packages/ui/src/assets/svg/cursor-transparent.ts new file mode 100644 index 0000000000..d1f6215ba1 --- /dev/null +++ b/packages/ui/src/assets/svg/cursor-transparent.ts @@ -0,0 +1,11 @@ +import { svg } from 'lit' + +export const cursorTransparentSvg = svg` + + + + ` diff --git a/packages/ui/src/components/wui-icon/index.ts b/packages/ui/src/components/wui-icon/index.ts index ce9d973f95..f168dc62db 100644 --- a/packages/ui/src/components/wui-icon/index.ts +++ b/packages/ui/src/components/wui-icon/index.ts @@ -69,6 +69,7 @@ import { recycleHorizontalSvg } from '../../assets/svg/recycle-horizontal.js' import { bankSvg } from '../../assets/svg/bank.js' import { cardSvg } from '../../assets/svg/card.js' import { plusSvg } from '../../assets/svg/plus.js' +import { cursorTransparentSvg } from '../../assets/svg/cursor-transparent.js' const svgOptions: Record> = { add: addSvg, @@ -95,6 +96,7 @@ const svgOptions: Record> = { coinPlaceholder: coinPlaceholderSvg, copy: copySvg, cursor: cursorSvg, + cursorTransparent: cursorTransparentSvg, desktop: desktopSvg, disconnect: disconnectSvg, discord: discordSvg, diff --git a/packages/ui/src/composites/wui-balance/index.ts b/packages/ui/src/composites/wui-balance/index.ts new file mode 100644 index 0000000000..e685d4436a --- /dev/null +++ b/packages/ui/src/composites/wui-balance/index.ts @@ -0,0 +1,26 @@ +import { html, LitElement } from 'lit' +import { property } from 'lit/decorators.js' +import { customElement } from '../../utils/WebComponentsUtil.js' +import styles from './styles.js' +import { resetStyles } from '../../utils/ThemeUtil.js' + +@customElement('wui-balance') +export class WuiBalance extends LitElement { + public static override styles = [resetStyles, styles] + + // -- State & Properties -------------------------------- // + @property() dollars = '0' + + @property() pennies = '00' + + // -- Render -------------------------------------------- // + public override render() { + return html` $${this.dollars}.${this.pennies}` + } +} + +declare global { + interface HTMLElementTagNameMap { + 'wui-balance': WuiBalance + } +} diff --git a/packages/ui/src/composites/wui-balance/styles.ts b/packages/ui/src/composites/wui-balance/styles.ts new file mode 100644 index 0000000000..a6583e115c --- /dev/null +++ b/packages/ui/src/composites/wui-balance/styles.ts @@ -0,0 +1,16 @@ +import { css } from 'lit' + +export default css` + span { + font-weight: 500; + font-size: 40px; + color: var(--wui-color-fg-100); + line-height: 130%; /* 52px */ + letter-spacing: -1.6px; + text-align: center; + } + + .pennies { + color: var(--wui-color-fg-200); + } +` diff --git a/packages/ui/src/composites/wui-profile-button/index.ts b/packages/ui/src/composites/wui-profile-button/index.ts new file mode 100644 index 0000000000..9e0a57b085 --- /dev/null +++ b/packages/ui/src/composites/wui-profile-button/index.ts @@ -0,0 +1,76 @@ +import { html, LitElement } from 'lit' +import { property } from 'lit/decorators.js' +import '../../components/wui-icon/index.js' +import '../../components/wui-text/index.js' +import '../../components/wui-image/index.js' +import '../../layout/wui-flex/index.js' +import '../wui-avatar/index.js' +import '../wui-icon-box/index.js' +import { elementStyles, resetStyles } from '../../utils/ThemeUtil.js' +import { customElement } from '../../utils/WebComponentsUtil.js' +import styles from './styles.js' +import type { IconType } from '../../utils/TypeUtil.js' +import { UiHelperUtil } from '../../utils/UiHelperUtil.js' + +@customElement('wui-profile-button') +export class WuiProfileButton extends LitElement { + public static override styles = [resetStyles, elementStyles, styles] + + // -- State & Properties -------------------------------- // + @property() public networkSrc?: string = undefined + + @property() public avatarSrc?: string = undefined + + @property({ type: Boolean }) public isProfileName = false + + @property() public address = '' + + @property() public icon: IconType = 'chevronBottom' + + // -- Render -------------------------------------------- // + public override render() { + return html` ` + } + + // -- Private ------------------------------------------- // + private networkImageTemplate() { + if (this.networkSrc) { + return html`` + } + + return html` + + ` + } +} + +declare global { + interface HTMLElementTagNameMap { + 'wui-profile-button': WuiProfileButton + } +} diff --git a/packages/ui/src/composites/wui-profile-button/styles.ts b/packages/ui/src/composites/wui-profile-button/styles.ts new file mode 100644 index 0000000000..faa2292e9f --- /dev/null +++ b/packages/ui/src/composites/wui-profile-button/styles.ts @@ -0,0 +1,37 @@ +import { css } from 'lit' + +export default css` + button { + background-color: var(--wui-gray-glass-002); + border-radius: var(--wui-border-radius-3xl); + border: 1px solid var(--wui-gray-glass-002); + padding: var(--wui-spacing-xs) var(--wui-spacing-s) var(--wui-spacing-xs) var(--wui-spacing-xs); + position: relative; + } + + wui-avatar { + width: 32px; + height: 32px; + box-shadow: 0 0 0 0; + outline: 3px solid var(--wui-gray-glass-005); + } + + wui-icon-box, + wui-image { + width: 16px; + height: 16px; + border-radius: var(--wui-border-radius-3xl); + position: absolute; + left: 26px; + top: 24px; + } + + wui-image { + outline: 2px solid var(--wui-color-bg-125); + } + + wui-icon-box { + outline: 2px solid var(--wui-color-bg-200); + background-color: var(--wui-color-bg-250); + } +` diff --git a/packages/ui/src/composites/wui-promo/index.ts b/packages/ui/src/composites/wui-promo/index.ts new file mode 100644 index 0000000000..546a6f1130 --- /dev/null +++ b/packages/ui/src/composites/wui-promo/index.ts @@ -0,0 +1,29 @@ +import { html, LitElement } from 'lit' +import { property } from 'lit/decorators.js' +import { customElement } from '../../utils/WebComponentsUtil.js' +import styles from './styles.js' +import '../../components/wui-text/index.js' +import '../../components/wui-icon/index.js' +import { elementStyles, resetStyles } from '../../utils/ThemeUtil.js' + +@customElement('wui-promo') +export class WuiPromo extends LitElement { + public static override styles = [resetStyles, elementStyles, styles] + + // -- State & Properties -------------------------------- // + @property() text = '' + + // -- Render -------------------------------------------- // + public override render() { + return html`` + } +} + +declare global { + interface HTMLElementTagNameMap { + 'wui-promo': WuiPromo + } +} diff --git a/packages/ui/src/composites/wui-promo/styles.ts b/packages/ui/src/composites/wui-promo/styles.ts new file mode 100644 index 0000000000..67af6e5268 --- /dev/null +++ b/packages/ui/src/composites/wui-promo/styles.ts @@ -0,0 +1,24 @@ +import { css } from 'lit' + +export default css` + button { + display: flex; + gap: var(--wui-spacing-3xs); + align-items: center; + padding: 6.25px var(--wui-spacing-xs) 7.25px var(--wui-spacing-s); + background-color: var(--wui-gray-glass-090); + border-radius: var(--wui-border-radius-3xl); + border: 1px solid var(--wui-gray-glass-060); + } + + @media (hover: hover) and (pointer: fine) { + button:hover:enabled { + background-color: var(--wui-gray-glass-080); + } + + button:active:enabled { + transition: all var(--wui-ease-out-power-2) var(--wui-duration-sm); + background-color: var(--wui-gray-glass-060); + } + } +` diff --git a/packages/ui/src/composites/wui-tabs/index.ts b/packages/ui/src/composites/wui-tabs/index.ts index 0ea57a7572..9eb8088039 100644 --- a/packages/ui/src/composites/wui-tabs/index.ts +++ b/packages/ui/src/composites/wui-tabs/index.ts @@ -24,13 +24,16 @@ export class WuiTabs extends LitElement { @state() public isDense = false + @state() public tabWidth?: number = 320 + // -- Render -------------------------------------------- // public override render() { this.isDense = this.tabs.length > 3 this.style.cssText = ` --local-tab: ${this.activeTab}; - --local-tab-width: ${this.localTabWidth}; + --local-tabs-width: ${this.tabWidth}px; + --local-tab-count: ${this.tabs.length}; ` this.dataset['type'] = this.isDense ? 'flex' : 'block' @@ -43,9 +46,10 @@ export class WuiTabs extends LitElement { ?disabled=${this.disabled} @click=${() => this.onTabClick(index)} data-active=${isActive} - data-testid="tab-${tab.label?.toLowerCase()}" > - + ${tab.icon + ? html`` + : null} ${tab.label} ` diff --git a/packages/ui/src/composites/wui-tabs/styles.ts b/packages/ui/src/composites/wui-tabs/styles.ts index 29ef17946f..b4d3970c5e 100644 --- a/packages/ui/src/composites/wui-tabs/styles.ts +++ b/packages/ui/src/composites/wui-tabs/styles.ts @@ -2,7 +2,12 @@ import { css } from 'lit' export default css` :host { + --local-tab-width: calc( + calc(var(--local-tabs-width) - calc(var(--wui-spacing-3xs) * 2)) / var(--local-tab-count) + ); + width: var(--local-tabs-width); display: inline-flex; + justify-content: space-between; background-color: var(--wui-gray-glass-002); border-radius: var(--wui-border-radius-3xl); padding: var(--wui-spacing-3xs); @@ -23,13 +28,8 @@ export default css` border-radius: var(--wui-border-radius-3xl); background-color: var(--wui-gray-glass-002); box-shadow: inset 0 0 0 1px var(--wui-gray-glass-002); - transform: translateX(calc(var(--local-tab) * var(--local-tab-width))); - transition: transform var(--wui-ease-out-power-2) var(--wui-duration-lg); - } - - :host([data-type='flex'])::before { - left: 3px; - transform: translateX(calc((var(--local-tab) * 34px) + (var(--local-tab) * 4px))); + left: calc(var(--local-tab) * (var(--local-tab-width)) + var(--wui-spacing-3xs)); + transition: left var(--wui-ease-out-power-2) var(--wui-duration-lg); } :host([data-type='flex']) { @@ -76,7 +76,10 @@ export default css` } button { - width: var(--local-tab-width); + flex: 1; + display: flex; + align-items: center; + justify-content: center; } :host([data-type='flex']) > button { diff --git a/packages/ui/src/composites/wui-tooltip-select/index.ts b/packages/ui/src/composites/wui-tooltip-select/index.ts new file mode 100644 index 0000000000..46a43e3bbd --- /dev/null +++ b/packages/ui/src/composites/wui-tooltip-select/index.ts @@ -0,0 +1,59 @@ +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?.animate([{ opacity: 0 }, { opacity: 1 }], { + fill: 'forwards', + easing: 'ease', + duration: 250 + }) + } + } + + private onMouseLeave() { + const element = this.shadowRoot?.querySelector('wui-tooltip') + if (element) { + 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/composites/wui-tooltip-select/styles.ts b/packages/ui/src/composites/wui-tooltip-select/styles.ts new file mode 100644 index 0000000000..f1a06c0b6e --- /dev/null +++ b/packages/ui/src/composites/wui-tooltip-select/styles.ts @@ -0,0 +1,37 @@ +import { css } from 'lit' + +export default css` + :host { + position: relative; + } + button { + display: flex; + justify-content: center; + align-items: center; + height: 48px; + width: 100%; + background-color: var(--wui-accent-glass-010); + border-radius: var(--wui-border-radius-xs); + border: 1px solid var(--wui-accent-glass-010); + } + + wui-tooltip { + padding: 7px var(--wui-spacing-s) 8px var(--wui-spacing-s); + position: absolute; + top: -8px; + left: 50%; + transform: translate(-50%, -100%); + opacity: 0; + } + + @media (hover: hover) and (pointer: fine) { + button:hover:enabled { + background-color: var(--wui-accent-glass-015); + } + + button:active:enabled { + background-color: var(--wui-accent-glass-020); + transition: all var(--wui-ease-out-power-2) var(--wui-duration-sm); + } + } +` diff --git a/packages/ui/src/composites/wui-tooltip/index.ts b/packages/ui/src/composites/wui-tooltip/index.ts index 96db98f059..5ea3be0c38 100644 --- a/packages/ui/src/composites/wui-tooltip/index.ts +++ b/packages/ui/src/composites/wui-tooltip/index.ts @@ -14,15 +14,19 @@ export class WuiTooltip extends LitElement { // -- State & Properties -------------------------------- // @property() public placement: PlacementType = 'top' + @property() public variant: 'shade' | 'fill' = 'fill' + @property() public message = '' // -- Render -------------------------------------------- // public override render() { + this.dataset['variant'] = this.variant + return html` ${this.message}` } diff --git a/packages/ui/src/composites/wui-tooltip/styles.ts b/packages/ui/src/composites/wui-tooltip/styles.ts index bed3a8cb08..64e63c59b7 100644 --- a/packages/ui/src/composites/wui-tooltip/styles.ts +++ b/packages/ui/src/composites/wui-tooltip/styles.ts @@ -5,11 +5,25 @@ export default css` display: block; padding: 9px var(--wui-spacing-s) 10px var(--wui-spacing-s); border-radius: var(--wui-border-radius-xxs); - background-color: var(--wui-color-fg-100); + color: var(--wui-color-bg-100); position: relative; } + :host([data-variant='shade']) { + background-color: var(--wui-color-bg-150); + border: 1px solid var(--wui-gray-glass-005); + } + + :host([data-variant='shade']) > wui-text { + color: var(--wui-color-fg-150); + } + + :host([data-variant='fill']) { + background-color: var(--wui-color-fg-100); + border: none; + } + wui-icon { position: absolute; width: 12px !important; @@ -17,7 +31,7 @@ export default css` } wui-icon[data-placement='top'] { - bottom: 0; + bottom: 0px; left: 50%; transform: translate(-50%, 95%); } diff --git a/packages/ui/src/utils/JSXTypeUtil.ts b/packages/ui/src/utils/JSXTypeUtil.ts index ff0b90329e..c70d53b49b 100644 --- a/packages/ui/src/utils/JSXTypeUtil.ts +++ b/packages/ui/src/utils/JSXTypeUtil.ts @@ -49,6 +49,10 @@ import type { WuiListNetwork } from '../composites/wui-list-network/index.js' import type { WuiListWalletTransaction } from '../composites/wui-list-wallet-transaction/index.js' import type { WuiOnRampActivityItem } from '../composites/wui-onramp-activity-item/index.js' import type { WuiOnRampProviderItem } from '../composites/wui-onramp-provider-item/index.js' +import type { WuiPromo } from '../composites/wui-promo/index.js' +import type { WuiBalance } from '../composites/wui-balance/index.js' +import type { WuiTooltipSelect } from '../composites/wui-tooltip-select/index.js' +import type { WuiProfileButton } from '../composites/wui-profile-button/index.js' import type { WuiFlex } from '../layout/wui-flex/index.js' import type { WuiGrid } from '../layout/wui-grid/index.js' @@ -113,6 +117,10 @@ declare global { 'wui-list-wallet-transaction': CustomElement 'wui-onramp-activity-item': CustomElement 'wui-onramp-provider-item': CustomElement + 'wui-promo': CustomElement + 'wui-tooltip-select': CustomElement + 'wui-balance': CustomElement + 'wui-profile-button': CustomElement } } } diff --git a/packages/ui/src/utils/ThemeUtil.ts b/packages/ui/src/utils/ThemeUtil.ts index a9c401cb5f..9c893a6c80 100644 --- a/packages/ui/src/utils/ThemeUtil.ts +++ b/packages/ui/src/utils/ThemeUtil.ts @@ -536,6 +536,7 @@ function createRootStyles(themeVariables?: ThemeVariables) { --wui-gray-glass-030: rgba(255, 255, 255, 0.3); --wui-gray-glass-060: rgba(255, 255, 255, 0.6); --wui-gray-glass-080: rgba(255, 255, 255, 0.8); + --wui-gray-glass-090: rgba(255, 255, 255, 0.9); } `, dark: css` @@ -626,6 +627,7 @@ function createRootStyles(themeVariables?: ThemeVariables) { --wui-gray-glass-030: rgba(0, 0, 0, 0.3); --wui-gray-glass-060: rgba(0, 0, 0, 0.6); --wui-gray-glass-080: rgba(0, 0, 0, 0.8); + --wui-gray-glass-080: rgba(0, 0, 0, 0.9); } ` } diff --git a/packages/ui/src/utils/TypeUtil.ts b/packages/ui/src/utils/TypeUtil.ts index 45fee09ca0..ca13291d20 100644 --- a/packages/ui/src/utils/TypeUtil.ts +++ b/packages/ui/src/utils/TypeUtil.ts @@ -114,6 +114,7 @@ export type IconType = | 'compass' | 'copy' | 'cursor' + | 'cursorTransparent' | 'desktop' | 'disconnect' | 'discord' diff --git a/packages/ui/src/utils/UiHelperUtil.ts b/packages/ui/src/utils/UiHelperUtil.ts index e13012d743..3a90e53c10 100644 --- a/packages/ui/src/utils/UiHelperUtil.ts +++ b/packages/ui/src/utils/UiHelperUtil.ts @@ -106,5 +106,13 @@ export const UiHelperUtil = { } return 'dark' + }, + splitBalance(input: string): [string, string] { + const parts = input.split('.') as [string, string] + if (parts.length === 2) { + return [parts[0], parts[1]] + } + + return ['0', '00'] } } From ecde9e5c6a73ecc42fdc6e889320a8928fe90ba6 Mon Sep 17 00:00:00 2001 From: Sven Date: Thu, 29 Feb 2024 17:31:31 +0100 Subject: [PATCH 02/13] remove obsolete code --- .../views/w3m-account-settings-view/index.ts | 32 ------------------- 1 file changed, 32 deletions(-) diff --git a/packages/scaffold/src/views/w3m-account-settings-view/index.ts b/packages/scaffold/src/views/w3m-account-settings-view/index.ts index 75d662de22..f56bbdbae0 100644 --- a/packages/scaffold/src/views/w3m-account-settings-view/index.ts +++ b/packages/scaffold/src/views/w3m-account-settings-view/index.ts @@ -31,10 +31,6 @@ export class W3mAccountSettingsView extends LitElement { @state() private profileName = AccountController.state.profileName - @state() private balance = AccountController.state.balance - - @state() private balanceSymbol = AccountController.state.balanceSymbol - @state() private network = NetworkController.state.caipNetwork @state() private disconnecting = false @@ -145,27 +141,6 @@ export class W3mAccountSettingsView extends LitElement { } // -- Private ------------------------------------------- // - private onTransactions() { - EventsController.sendEvent({ type: 'track', event: 'CLICK_TRANSACTIONS' }) - RouterController.push('Transactions') - } - - private explorerBtnTemplate() { - const { addressExplorerUrl } = AccountController.state - - if (!addressExplorerUrl) { - return null - } - - return html` - - - Block Explorer - - - ` - } - private isAllowedNetworkSwitch() { const { requestedCaipNetworks } = NetworkController.state const isMultiNetwork = requestedCaipNetworks ? requestedCaipNetworks.length > 1 : false @@ -204,13 +179,6 @@ export class W3mAccountSettingsView extends LitElement { this.disconnecting = false } } - - private onExplorer() { - const { addressExplorerUrl } = AccountController.state - if (addressExplorerUrl) { - CoreHelperUtil.openHref(addressExplorerUrl, '_blank') - } - } } declare global { From 67cb914cdb30e7ce8d3c93e23feb6aaf02af08f9 Mon Sep 17 00:00:00 2001 From: Sven Date: Thu, 29 Feb 2024 17:39:23 +0100 Subject: [PATCH 03/13] remove obsolete code --- packages/scaffold/src/views/w3m-account-settings-view/index.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/scaffold/src/views/w3m-account-settings-view/index.ts b/packages/scaffold/src/views/w3m-account-settings-view/index.ts index f56bbdbae0..b566b51eb9 100644 --- a/packages/scaffold/src/views/w3m-account-settings-view/index.ts +++ b/packages/scaffold/src/views/w3m-account-settings-view/index.ts @@ -44,8 +44,6 @@ export class W3mAccountSettingsView extends LitElement { this.address = val.address this.profileImage = val.profileImage this.profileName = val.profileName - this.balance = val.balance - this.balanceSymbol = val.balanceSymbol } else { ModalController.close() } From 03f5db8b1f1d1601ac7218ae57e28b151c56f5d1 Mon Sep 17 00:00:00 2001 From: Sven Date: Fri, 1 Mar 2024 09:51:45 +0100 Subject: [PATCH 04/13] fix danger --- .../src/partials/w3m-account-default-widget/index.ts | 6 +++--- .../partials/w3m-account-wallet-features-widget/index.ts | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/scaffold/src/partials/w3m-account-default-widget/index.ts b/packages/scaffold/src/partials/w3m-account-default-widget/index.ts index 147c57c065..c7c3f2325c 100644 --- a/packages/scaffold/src/partials/w3m-account-default-widget/index.ts +++ b/packages/scaffold/src/partials/w3m-account-default-widget/index.ts @@ -23,10 +23,10 @@ import styles from './styles.js' export class W3mAccountDefaultWidget extends LitElement { public static override styles = styles - // -- Members -------------------------------------------- // + // -- Members ------------------------------------------- // private unsubscribe: (() => void)[] = [] - // -- State & Properties --------------------------------- // + // -- State & Properties -------------------------------- // @state() private address = AccountController.state.address @state() private profileImage = AccountController.state.profileImage @@ -159,7 +159,7 @@ export class W3mAccountDefaultWidget extends LitElement { ` } - // -- Private ------------------------------------------- // + // Private Methods ------------------------------------- // private onrampTemplate() { const { enableOnramp } = OptionsController.state 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 15d5c07fbc..0f35d4e7c5 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 @@ -15,10 +15,10 @@ import styles from './styles.js' export class W3mAccountWalletFeaturesWidget extends LitElement { public static override styles = styles - // -- Members -------------------------------------------- // + // -- Members ------------------------------------------- // private unsubscribe: (() => void)[] = [] - // -- State & Properties --------------------------------- // + // -- State & Properties -------------------------------- // @state() private address = AccountController.state.address @state() private profileImage = AccountController.state.profileImage @@ -100,7 +100,7 @@ export class W3mAccountWalletFeaturesWidget extends LitElement { ` } - // -- Private ------------------------------------------- // + // Private Methods ------------------------------------- // private activateAccountTemplate() { // Todo: Check if SA is deployed From bfab285ca2b81d920283c6cbad12a1c8184225ab Mon Sep 17 00:00:00 2001 From: Sven Date: Fri, 1 Mar 2024 09:55:08 +0100 Subject: [PATCH 05/13] fix danger --- .../scaffold/src/partials/w3m-account-default-widget/index.ts | 2 +- .../src/partials/w3m-account-wallet-features-widget/index.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/scaffold/src/partials/w3m-account-default-widget/index.ts b/packages/scaffold/src/partials/w3m-account-default-widget/index.ts index c7c3f2325c..67da9fe9cf 100644 --- a/packages/scaffold/src/partials/w3m-account-default-widget/index.ts +++ b/packages/scaffold/src/partials/w3m-account-default-widget/index.ts @@ -159,7 +159,7 @@ export class W3mAccountDefaultWidget extends LitElement { ` } - // Private Methods ------------------------------------- // + // -- Private ------------------------------------------- // private onrampTemplate() { const { enableOnramp } = OptionsController.state 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 0f35d4e7c5..d05610228e 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 @@ -100,7 +100,7 @@ export class W3mAccountWalletFeaturesWidget extends LitElement { ` } - // Private Methods ------------------------------------- // + // -- Private ------------------------------------------- // private activateAccountTemplate() { // Todo: Check if SA is deployed From 9d343330f67d2f6f2b796ea956a040d20ac8e180 Mon Sep 17 00:00:00 2001 From: Sven Date: Fri, 1 Mar 2024 10:15:47 +0100 Subject: [PATCH 06/13] fix lint --- apps/laboratory/src/pages/library/wagmi.tsx | 3 ++- .../src/partials/w3m-account-wallet-features-widget/index.ts | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/apps/laboratory/src/pages/library/wagmi.tsx b/apps/laboratory/src/pages/library/wagmi.tsx index f41ae76870..fb4cfb477c 100644 --- a/apps/laboratory/src/pages/library/wagmi.tsx +++ b/apps/laboratory/src/pages/library/wagmi.tsx @@ -25,7 +25,8 @@ const modal = createWeb3Modal({ termsConditionsUrl: 'https://walletconnect.com/terms', privacyPolicyUrl: 'https://walletconnect.com/privacy', customWallets: ConstantsUtil.CustomWallets, - enableOnramp: true + enableOnramp: true, + enableWalletFeatures: true }) ThemeStore.setModal(modal) 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 d05610228e..fb7f337f1f 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 @@ -103,6 +103,7 @@ export class W3mAccountWalletFeaturesWidget extends LitElement { // -- Private ------------------------------------------- // private activateAccountTemplate() { + // eslint-disable-next-line no-warning-comments // Todo: Check if SA is deployed return html` ` From 3d0bd5c2671f760b567fe1fe78172e84d305bd08 Mon Sep 17 00:00:00 2001 From: Sven Date: Fri, 1 Mar 2024 17:15:15 +0100 Subject: [PATCH 07/13] add receive flow --- .../stories/composites/wui-banner.stories.ts | 29 +++ .../composites/wui-chip-button.stories.ts | 42 ++++ .../wui-compatible-network.stories.ts | 22 +++ .../composites/wui-list-network.stories.ts | 7 +- .../composites/wui-network-image.stories.ts | 2 +- apps/gallery/utils/PresetUtils.ts | 8 + .../src/pages/library/ethers-wallet.tsx | 35 ++++ .../src/pages/library/wagmi-wallet.tsx | 51 +++++ apps/laboratory/src/pages/library/wagmi.tsx | 3 +- apps/laboratory/src/utils/DataUtil.ts | 10 + .../core/src/controllers/RouterController.ts | 2 + packages/scaffold/index.ts | 2 + .../scaffold/src/modal/w3m-router/index.ts | 4 + .../index.ts | 19 +- .../scaffold/src/partials/w3m-header/index.ts | 4 +- .../views/w3m-account-settings-view/index.ts | 31 ++- .../src/views/w3m-account-view/index.ts | 6 +- .../w3m-compatible-networks-view/index.ts | 52 +++++ .../w3m-compatible-networks-view/styles.ts | 13 ++ .../src/views/w3m-receive-view/index.ts | 142 ++++++++++++++ .../src/views/w3m-receive-view/styles.ts | 7 + packages/ui/index.ts | 3 + .../ui/src/composites/wui-banner/index.ts | 41 ++++ .../ui/src/composites/wui-banner/styles.ts | 11 ++ .../src/composites/wui-chip-button/index.ts | 46 +++++ .../src/composites/wui-chip-button/styles.ts | 184 ++++++++++++++++++ .../wui-compatible-network/index.ts | 50 +++++ .../wui-compatible-network/styles.ts | 30 +++ .../src/composites/wui-list-network/index.ts | 4 +- .../src/composites/wui-list-network/styles.ts | 5 + .../ui/src/composites/wui-qr-code/index.ts | 5 +- .../ui/src/composites/wui-qr-code/styles.ts | 4 + packages/ui/src/utils/ThemeUtil.ts | 3 +- 33 files changed, 859 insertions(+), 18 deletions(-) create mode 100644 apps/gallery/stories/composites/wui-banner.stories.ts create mode 100644 apps/gallery/stories/composites/wui-chip-button.stories.ts create mode 100644 apps/gallery/stories/composites/wui-compatible-network.stories.ts create mode 100644 apps/laboratory/src/pages/library/ethers-wallet.tsx create mode 100644 apps/laboratory/src/pages/library/wagmi-wallet.tsx create mode 100644 packages/scaffold/src/views/w3m-compatible-networks-view/index.ts create mode 100644 packages/scaffold/src/views/w3m-compatible-networks-view/styles.ts create mode 100644 packages/scaffold/src/views/w3m-receive-view/index.ts create mode 100644 packages/scaffold/src/views/w3m-receive-view/styles.ts create mode 100644 packages/ui/src/composites/wui-banner/index.ts create mode 100644 packages/ui/src/composites/wui-banner/styles.ts create mode 100644 packages/ui/src/composites/wui-chip-button/index.ts create mode 100644 packages/ui/src/composites/wui-chip-button/styles.ts create mode 100644 packages/ui/src/composites/wui-compatible-network/index.ts create mode 100644 packages/ui/src/composites/wui-compatible-network/styles.ts diff --git a/apps/gallery/stories/composites/wui-banner.stories.ts b/apps/gallery/stories/composites/wui-banner.stories.ts new file mode 100644 index 0000000000..2baef41142 --- /dev/null +++ b/apps/gallery/stories/composites/wui-banner.stories.ts @@ -0,0 +1,29 @@ +import type { Meta } from '@storybook/web-components' +import '@web3modal/ui/src/composites/wui-banner' +import type { WuiBanner } from '@web3modal/ui/src/composites/wui-banner' +import { html } from 'lit' +import { iconOptions } from '../../utils/PresetUtils' +import '../../components/gallery-container' + +type Component = Meta + +export default { + title: 'Composites/wui-banner', + args: { + text: 'Only send funds from these networks to be able receive them', + icon: 'warningCircle' + }, + argTypes: { + icon: { + options: iconOptions, + control: { type: 'select' } + } + } +} as Component + +export const Default: Component = { + render: args => + html` ` +} diff --git a/apps/gallery/stories/composites/wui-chip-button.stories.ts b/apps/gallery/stories/composites/wui-chip-button.stories.ts new file mode 100644 index 0000000000..9f9a6104b2 --- /dev/null +++ b/apps/gallery/stories/composites/wui-chip-button.stories.ts @@ -0,0 +1,42 @@ +import type { Meta } from '@storybook/web-components' +import '@web3modal/ui/src/composites/wui-chip-button' +import type { WuiChipButton } from '@web3modal/ui/src/composites/wui-chip-button' +import { html } from 'lit' +import { chipOptions, iconOptions, walletImagesOptions } from '../../utils/PresetUtils' + +type Component = Meta + +export default { + title: 'Composites/wui-chip-button', + args: { + variant: 'fill', + disabled: false, + icon: 'externalLink', + imageSrc: walletImagesOptions[3]?.src, + text: 'dianeyes.walletconnect.eth' + }, + argTypes: { + variant: { + options: chipOptions, + control: { type: 'select' } + }, + icon: { + options: iconOptions, + control: { type: 'select' } + }, + disabled: { + control: { type: 'boolean' } + } + } +} as Component + +export const Default: Component = { + render: args => + html`` +} diff --git a/apps/gallery/stories/composites/wui-compatible-network.stories.ts b/apps/gallery/stories/composites/wui-compatible-network.stories.ts new file mode 100644 index 0000000000..dbdd8a92d7 --- /dev/null +++ b/apps/gallery/stories/composites/wui-compatible-network.stories.ts @@ -0,0 +1,22 @@ +import type { Meta } from '@storybook/web-components' +import '@web3modal/ui/src/composites/wui-compatible-network' +import type { WuiCompatibleNetwork } from '@web3modal/ui/src/composites/wui-compatible-network' +import { html } from 'lit' +import { address, avatarImageSrc, networkImages } from '../../utils/PresetUtils' + +type Component = Meta + +export default { + title: 'Composites/wui-compatible-network', + args: { + text: 'Only receive from networks', + networkImages + } +} as Component + +export const Default: Component = { + render: args => html` + + + ` +} diff --git a/apps/gallery/stories/composites/wui-list-network.stories.ts b/apps/gallery/stories/composites/wui-list-network.stories.ts index ee83ead6e4..88abdab377 100644 --- a/apps/gallery/stories/composites/wui-list-network.stories.ts +++ b/apps/gallery/stories/composites/wui-list-network.stories.ts @@ -12,7 +12,11 @@ export default { args: { walletImages: walletImagesOptions, imageSrc: networkImageSrc, - name: 'Ethereum' + name: 'Ethereum', + transparent: false + }, + transparent: { + control: { type: 'boolean' } } } as Component @@ -23,6 +27,7 @@ export const Default: Component = { .imageSrc=${args.imageSrc} ?disabled=${args.disabled} name=${args.name} + ?transparent=${args.transparent} > ` } diff --git a/apps/gallery/stories/composites/wui-network-image.stories.ts b/apps/gallery/stories/composites/wui-network-image.stories.ts index 22f33721f6..0fd792b3e5 100644 --- a/apps/gallery/stories/composites/wui-network-image.stories.ts +++ b/apps/gallery/stories/composites/wui-network-image.stories.ts @@ -16,7 +16,7 @@ export default { }, argTypes: { size: { - options: ['sm', 'md', 'lg'], + options: ['xs', 'sm', 'md', 'lg'], control: { type: 'select' } } } diff --git a/apps/gallery/utils/PresetUtils.ts b/apps/gallery/utils/PresetUtils.ts index fae3952a7a..f9393e98aa 100644 --- a/apps/gallery/utils/PresetUtils.ts +++ b/apps/gallery/utils/PresetUtils.ts @@ -133,6 +133,14 @@ export const walletImageSrc = export const networkImageSrc = 'https://explorer-api.walletconnect.com/w3m/v1/getAssetImage/692ed6ba-e569-459a-556a-776476829e00?projectId=c1781fc385454899a2b1385a2b83df3b' +export const networkImages = [ + 'https://explorer-api.walletconnect.com/w3m/v1/getAssetImage/692ed6ba-e569-459a-556a-776476829e00?projectId=c1781fc385454899a2b1385a2b83df3b', + 'https://explorer-api.walletconnect.com/w3m/v1/getAssetImage/30c46e53-e989-45fb-4549-be3bd4eb3b00?projectId=c1781fc385454899a2b1385a2b83df3b', + 'https://explorer-api.walletconnect.com/w3m/v1/getAssetImage/93564157-2e8e-4ce7-81df-b264dbee9b00?projectId=c1781fc385454899a2b1385a2b83df3b', + 'https://explorer-api.walletconnect.com/w3m/v1/getAssetImage/ab9c186a-c52f-464b-2906-ca59d760a400?projectId=c1781fc385454899a2b1385a2b83df3b', + 'https://explorer-api.walletconnect.com/w3m/v1/getAssetImage/41d04d42-da3b-4453-8506-668cc0727900?projectId=c1781fc385454899a2b1385a2b83df3b' +] + export const avatarImageSrc = 'https://i.seadn.io/gcs/files/007a5af0d93d561f87c8d026ddd5179e.png?auto=format&dpr=1&w=1000' diff --git a/apps/laboratory/src/pages/library/ethers-wallet.tsx b/apps/laboratory/src/pages/library/ethers-wallet.tsx new file mode 100644 index 0000000000..17166d878a --- /dev/null +++ b/apps/laboratory/src/pages/library/ethers-wallet.tsx @@ -0,0 +1,35 @@ +import { createWeb3Modal, defaultConfig } from '@web3modal/ethers/react' +import { ThemeStore } from '../../utils/StoreUtil' +import { EthersConstants } from '../../utils/EthersConstants' +import { ConstantsUtil } from '../../utils/ConstantsUtil' +import { EthersTests } from '../../components/Ethers/EthersTests' +import { Web3ModalButtons } from '../../components/Web3ModalButtons' + +const modal = createWeb3Modal({ + ethersConfig: defaultConfig({ + metadata: ConstantsUtil.Metadata, + defaultChainId: 1, + rpcUrl: 'https://cloudflare-eth.com', + enableEmail: true + }), + chains: EthersConstants.chains, + projectId: ConstantsUtil.ProjectId, + enableAnalytics: true, + metadata: ConstantsUtil.Metadata, + termsConditionsUrl: 'https://walletconnect.com/terms', + privacyPolicyUrl: 'https://walletconnect.com/privacy', + enableOnramp: true, + customWallets: ConstantsUtil.CustomWallets, + enableWalletFeatures: true +}) + +ThemeStore.setModal(modal) + +export default function Ethers() { + return ( + <> + + + + ) +} diff --git a/apps/laboratory/src/pages/library/wagmi-wallet.tsx b/apps/laboratory/src/pages/library/wagmi-wallet.tsx new file mode 100644 index 0000000000..6c9b8336b4 --- /dev/null +++ b/apps/laboratory/src/pages/library/wagmi-wallet.tsx @@ -0,0 +1,51 @@ +import { createWeb3Modal } from '@web3modal/wagmi/react' +import { defaultWagmiConfig } from '@web3modal/wagmi/react/config' +import { QueryClient, QueryClientProvider } from '@tanstack/react-query' +import { useEffect, useState } from 'react' +import { WagmiProvider } from 'wagmi' +import { Web3ModalButtons } from '../../components/Web3ModalButtons' +import { WagmiTests } from '../../components/Wagmi/WagmiTests' +import { ThemeStore } from '../../utils/StoreUtil' +import { WagmiConstantsUtil } from '../../utils/WagmiConstants' +import { ConstantsUtil } from '../../utils/ConstantsUtil' + +const queryClient = new QueryClient() + +export const wagmiConfig = defaultWagmiConfig({ + chains: WagmiConstantsUtil.chains, + projectId: ConstantsUtil.ProjectId, + metadata: ConstantsUtil.Metadata, + enableEmail: true, + ssr: true +}) + +const modal = createWeb3Modal({ + wagmiConfig, + projectId: ConstantsUtil.ProjectId, + enableAnalytics: true, + metadata: ConstantsUtil.Metadata, + termsConditionsUrl: 'https://walletconnect.com/terms', + privacyPolicyUrl: 'https://walletconnect.com/privacy', + enableOnramp: true, + customWallets: ConstantsUtil.CustomWallets, + enableWalletFeatures: true +}) + +ThemeStore.setModal(modal) + +export default function Wagmi() { + const [ready, setReady] = useState(false) + + useEffect(() => { + setReady(true) + }, []) + + return ready ? ( + + + + + + + ) : null +} diff --git a/apps/laboratory/src/pages/library/wagmi.tsx b/apps/laboratory/src/pages/library/wagmi.tsx index fb4cfb477c..f41ae76870 100644 --- a/apps/laboratory/src/pages/library/wagmi.tsx +++ b/apps/laboratory/src/pages/library/wagmi.tsx @@ -25,8 +25,7 @@ const modal = createWeb3Modal({ termsConditionsUrl: 'https://walletconnect.com/terms', privacyPolicyUrl: 'https://walletconnect.com/privacy', customWallets: ConstantsUtil.CustomWallets, - enableOnramp: true, - enableWalletFeatures: true + enableOnramp: true }) ThemeStore.setModal(modal) diff --git a/apps/laboratory/src/utils/DataUtil.ts b/apps/laboratory/src/utils/DataUtil.ts index e98d371de4..f47555dbc3 100644 --- a/apps/laboratory/src/utils/DataUtil.ts +++ b/apps/laboratory/src/utils/DataUtil.ts @@ -33,6 +33,11 @@ export const wagmiSdkOptions = [ title: 'Email', link: '/library/wagmi-email/', description: 'Configuration usign wagmi and implementing email login' + }, + { + title: 'Wallet', + link: '/library/wagmi-wallet/', + description: 'Configuration usign wagmi and implementing email wallet' } ] @@ -51,5 +56,10 @@ export const ethersSdkOptions = [ title: 'Email', link: '/library/ethers-email/', description: 'Configuration usign ethers and implementing email login' + }, + { + title: 'Wallet', + link: '/library/ethers-wallet/', + description: 'Configuration usign ethers and implementing email wallet' } ] diff --git a/packages/core/src/controllers/RouterController.ts b/packages/core/src/controllers/RouterController.ts index e09fb2914a..f9e612e989 100644 --- a/packages/core/src/controllers/RouterController.ts +++ b/packages/core/src/controllers/RouterController.ts @@ -10,6 +10,7 @@ export interface RouterControllerState { | 'AllWallets' | 'ApproveTransaction' | 'BuyInProgress' + | 'CompatibleNetworks' | 'Connect' | 'ConnectingExternal' | 'ConnectingWalletConnect' @@ -23,6 +24,7 @@ export interface RouterControllerState { | 'OnRampFiatSelect' | 'OnRampProviders' | 'OnRampTokenSelect' + | 'Receive' | 'SwitchNetwork' | 'Transactions' | 'UnsupportedChain' diff --git a/packages/scaffold/index.ts b/packages/scaffold/index.ts index c6aca2a1ad..7cc79c5efa 100644 --- a/packages/scaffold/index.ts +++ b/packages/scaffold/index.ts @@ -33,6 +33,8 @@ export * from './src/views/w3m-update-email-wallet-view/index.js' export * from './src/views/w3m-update-email-primary-otp-view/index.js' export * from './src/views/w3m-update-email-secondary-otp-view/index.js' export * from './src/views/w3m-unsupported-chain-view/index.js' +export * from './src/views/w3m-receive-view/index.js' +export * from './src/views/w3m-compatible-networks-view/index.js' export * from './src/partials/w3m-all-wallets-list/index.js' export * from './src/partials/w3m-all-wallets-search/index.js' diff --git a/packages/scaffold/src/modal/w3m-router/index.ts b/packages/scaffold/src/modal/w3m-router/index.ts index 637289cc9a..7142e6f9b6 100644 --- a/packages/scaffold/src/modal/w3m-router/index.ts +++ b/packages/scaffold/src/modal/w3m-router/index.ts @@ -111,6 +111,10 @@ export class W3mRouter extends LitElement { return html`` case 'BuyInProgress': return html`` + case 'Receive': + return html`` + case 'CompatibleNetworks': + return html`` default: return html`` } 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 fb7f337f1f..7af0d25c61 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 @@ -81,18 +81,19 @@ export class W3mAccountWalletFeaturesWidget extends LitElement { avatarSrc=${ifDefined(this.profileImage ? this.profileImage : undefined)} ?isprofilename=${Boolean(this.profileName)} > - + - + @@ -113,9 +114,13 @@ export class W3mAccountWalletFeaturesWidget extends LitElement { RouterController.push('AccountSettings') } - private handleClickPay() { + private onBuyClick() { RouterController.push('OnRampProviders') } + + private onReceiveClick() { + RouterController.push('Receive') + } } declare global { diff --git a/packages/scaffold/src/partials/w3m-header/index.ts b/packages/scaffold/src/partials/w3m-header/index.ts index 948f9464b6..198bb3aeae 100644 --- a/packages/scaffold/src/partials/w3m-header/index.ts +++ b/packages/scaffold/src/partials/w3m-header/index.ts @@ -49,7 +49,9 @@ function headings() { WhatIsABuy: 'What is Buy?', BuyInProgress: 'Buy', OnRampTokenSelect: 'Select Token', - OnRampFiatSelect: 'Select Currency' + OnRampFiatSelect: 'Select Currency', + Receive: 'Receive', + CompatibleNetworks: 'Compatible Networks' } } diff --git a/packages/scaffold/src/views/w3m-account-settings-view/index.ts b/packages/scaffold/src/views/w3m-account-settings-view/index.ts index b566b51eb9..9ac0bf7cf5 100644 --- a/packages/scaffold/src/views/w3m-account-settings-view/index.ts +++ b/packages/scaffold/src/views/w3m-account-settings-view/index.ts @@ -7,7 +7,9 @@ import { ModalController, NetworkController, RouterController, - SnackController + SnackController, + StorageUtil, + ConnectorController } from '@web3modal/core' import { UiHelperUtil, customElement } from '@web3modal/ui' import { LitElement, html } from 'lit' @@ -110,6 +112,7 @@ export class W3mAccountSettingsView extends LitElement { + ${this.emailBtnTemplate()} this.onGoToUpdateEmail(email)} + > + ${email} + + ` + } + + private onGoToUpdateEmail(email: string) { + RouterController.push('UpdateEmailWallet', { email }) + } + private onNetworks() { if (this.isAllowedNetworkSwitch()) { RouterController.push('Networks') diff --git a/packages/scaffold/src/views/w3m-account-view/index.ts b/packages/scaffold/src/views/w3m-account-view/index.ts index 604f8cd4a0..9911b7fafc 100644 --- a/packages/scaffold/src/views/w3m-account-view/index.ts +++ b/packages/scaffold/src/views/w3m-account-view/index.ts @@ -1,4 +1,4 @@ -import { OptionsController } from '@web3modal/core' +import { OptionsController, StorageUtil } from '@web3modal/core' import { customElement } from '@web3modal/ui' import { LitElement, html } from 'lit' @@ -6,8 +6,10 @@ import { LitElement, html } from 'lit' export class W3mAccountView extends LitElement { // -- Render -------------------------------------------- // public override render() { + const type = StorageUtil.getConnectedConnector() + return html` - ${OptionsController.state.enableWalletFeatures + ${OptionsController.state.enableWalletFeatures && type === 'EMAIL' ? this.walletFeaturesTemplate() : this.defaultTemplate()} ` diff --git a/packages/scaffold/src/views/w3m-compatible-networks-view/index.ts b/packages/scaffold/src/views/w3m-compatible-networks-view/index.ts new file mode 100644 index 0000000000..0a3561ee08 --- /dev/null +++ b/packages/scaffold/src/views/w3m-compatible-networks-view/index.ts @@ -0,0 +1,52 @@ +import { AssetUtil, CoreHelperUtil, NetworkController } from '@web3modal/core' +import { customElement } from '@web3modal/ui' +import { LitElement, html } from 'lit' +import { ifDefined } from 'lit/directives/if-defined.js' +import styles from './styles.js' + +@customElement('w3m-compatible-networks-view') +export class W3mCompatibleNetworksView extends LitElement { + public static override styles = styles + + // -- Render -------------------------------------------- // + public override render() { + return html` + + ${this.networkTemplate()} + ` + } + + // -- Private ------------------------------------------- // + networkTemplate() { + const { approvedCaipNetworkIds, requestedCaipNetworks } = NetworkController.state + + const sortedNetworks = CoreHelperUtil.sortRequestedNetworks( + approvedCaipNetworkIds, + requestedCaipNetworks + ) + + return sortedNetworks.map( + network => html` + + + ` + ) + } +} + +declare global { + interface HTMLElementTagNameMap { + 'w3m-compatible-networks-view': W3mCompatibleNetworksView + } +} diff --git a/packages/scaffold/src/views/w3m-compatible-networks-view/styles.ts b/packages/scaffold/src/views/w3m-compatible-networks-view/styles.ts new file mode 100644 index 0000000000..61afa36915 --- /dev/null +++ b/packages/scaffold/src/views/w3m-compatible-networks-view/styles.ts @@ -0,0 +1,13 @@ +import { css } from 'lit' + +export default css` + :host > wui-flex { + max-height: clamp(360px, 540px, 80vh); + overflow: scroll; + scrollbar-width: none; + } + + :host > wui-flex::-webkit-scrollbar { + display: none; + } +` diff --git a/packages/scaffold/src/views/w3m-receive-view/index.ts b/packages/scaffold/src/views/w3m-receive-view/index.ts new file mode 100644 index 0000000000..df7ff17d04 --- /dev/null +++ b/packages/scaffold/src/views/w3m-receive-view/index.ts @@ -0,0 +1,142 @@ +import { + AccountController, + AssetUtil, + CoreHelperUtil, + ModalController, + NetworkController, + RouterController, + SnackController, + ThemeController +} from '@web3modal/core' +import { UiHelperUtil, customElement } from '@web3modal/ui' +import { LitElement, html } from 'lit' +import styles from './styles.js' +import { state } from 'lit/decorators.js' + +@customElement('w3m-receive-view') +export class W3mReceiveView extends LitElement { + public static override styles = styles + + // -- Members ------------------------------------------- // + private unsubscribe: (() => void)[] = [] + + // -- State & Properties -------------------------------- // + @state() private address = AccountController.state.address + + @state() private profileName = AccountController.state.profileName + + @state() private network = NetworkController.state.caipNetwork + + public constructor() { + super() + this.unsubscribe.push( + ...[ + AccountController.subscribe(val => { + if (val.address) { + this.address = val.address + this.profileName = val.profileName + } else { + ModalController.close() + } + }) + ], + NetworkController.subscribeKey('caipNetwork', val => { + if (val?.id) { + this.network = val + } + }) + ) + } + + public override disconnectedCallback() { + this.unsubscribe.forEach(unsubscribe => unsubscribe()) + } + + // -- Render -------------------------------------------- // + public override render() { + if (!this.address) { + throw new Error('w3m-receive-view: No account provided') + } + + const networkImage = AssetUtil.getNetworkImage(this.network) + + return html` + + + + + Copy your address or scan this QR code + + + ${this.networkTemplate()} + ` + } + + // -- Private ------------------------------------------- // + networkTemplate() { + const networks = NetworkController.getRequestedCaipNetworks() + const slicedNetworks = networks?.filter(network => network?.imageId)?.slice(0, 5) + + const imagesArray: string[] = [] + + for (const network of slicedNetworks) { + const image = AssetUtil.getNetworkImage(network) + if (image) { + imagesArray.push(image) + } + } + + return html`` + } + + onReceiveClick() { + RouterController.push('CompatibleNetworks') + } + + onCopyClick() { + try { + if (this.address) { + CoreHelperUtil.copyToClopboard(this.address) + SnackController.showSuccess('Address copied') + } + } catch { + SnackController.showError('Failed to copy') + } + } +} + +declare global { + interface HTMLElementTagNameMap { + 'w3m-receive-view': W3mReceiveView + } +} diff --git a/packages/scaffold/src/views/w3m-receive-view/styles.ts b/packages/scaffold/src/views/w3m-receive-view/styles.ts new file mode 100644 index 0000000000..3576735e3b --- /dev/null +++ b/packages/scaffold/src/views/w3m-receive-view/styles.ts @@ -0,0 +1,7 @@ +import { css } from 'lit' + +export default css` + wui-compatible-network { + margin-top: var(--wui-spacing-l); + } +` diff --git a/packages/ui/index.ts b/packages/ui/index.ts index 605082121e..e0bb70cd56 100644 --- a/packages/ui/index.ts +++ b/packages/ui/index.ts @@ -53,6 +53,9 @@ export * from './src/composites/wui-promo/index.js' export * from './src/composites/wui-tooltip-select/index.js' export * from './src/composites/wui-balance/index.js' export * from './src/composites/wui-profile-button/index.js' +export * from './src/composites/wui-chip-button/index.js' +export * from './src/composites/wui-compatible-network/index.js' +export * from './src/composites/wui-banner/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-banner/index.ts b/packages/ui/src/composites/wui-banner/index.ts new file mode 100644 index 0000000000..73ae897746 --- /dev/null +++ b/packages/ui/src/composites/wui-banner/index.ts @@ -0,0 +1,41 @@ +import { html, LitElement } from 'lit' +import { property } from 'lit/decorators.js' +import '../../components/wui-text/index.js' +import '../wui-icon-box/index.js' +import { elementStyles, resetStyles } from '../../utils/ThemeUtil.js' +import type { IconType } from '../../utils/TypeUtil.js' +import { customElement } from '../../utils/WebComponentsUtil.js' +import styles from './styles.js' + +@customElement('wui-banner') +export class WuiBanner extends LitElement { + public static override styles = [resetStyles, elementStyles, styles] + + // -- State & Properties -------------------------------- // + + @property() public icon: IconType = 'externalLink' + + @property() public text = '' + + // -- Render -------------------------------------------- // + public override render() { + return html` + + + ${this.text} + + ` + } +} + +declare global { + interface HTMLElementTagNameMap { + 'wui-banner': WuiBanner + } +} diff --git a/packages/ui/src/composites/wui-banner/styles.ts b/packages/ui/src/composites/wui-banner/styles.ts new file mode 100644 index 0000000000..4e715490b4 --- /dev/null +++ b/packages/ui/src/composites/wui-banner/styles.ts @@ -0,0 +1,11 @@ +import { css } from 'lit' + +export default css` + wui-flex { + width: 100%; + background-color: var(--wui-gray-glass-005); + border-radius: var(--wui-border-radius-s); + padding: var(--wui-spacing-1xs) var(--wui-spacing-s) var(--wui-spacing-1xs) + var(--wui-spacing-1xs); + } +` diff --git a/packages/ui/src/composites/wui-chip-button/index.ts b/packages/ui/src/composites/wui-chip-button/index.ts new file mode 100644 index 0000000000..f13b223423 --- /dev/null +++ b/packages/ui/src/composites/wui-chip-button/index.ts @@ -0,0 +1,46 @@ +import { html, LitElement } from 'lit' +import { property } from 'lit/decorators.js' +import '../../components/wui-icon/index.js' +import '../../components/wui-image/index.js' +import '../../components/wui-text/index.js' +import { elementStyles, resetStyles } from '../../utils/ThemeUtil.js' +import type { ChipType, IconType } from '../../utils/TypeUtil.js' +import { customElement } from '../../utils/WebComponentsUtil.js' +import styles from './styles.js' + +@customElement('wui-chip-button') +export class WuiChipButton extends LitElement { + public static override styles = [resetStyles, elementStyles, styles] + + // -- State & Properties -------------------------------- // + @property() public variant: ChipType = 'fill' + + @property() public imageSrc = '' + + @property({ type: Boolean }) public disabled = false + + @property() public icon: IconType = 'externalLink' + + @property() public text = '' + + // -- Render -------------------------------------------- // + public override render() { + const isSmall = + this.variant === 'success' || this.variant === 'transparent' || this.variant === 'shadeSmall' + const textVariant = isSmall ? 'small-600' : 'paragraph-600' + + return html` + + ` + } +} + +declare global { + interface HTMLElementTagNameMap { + 'wui-chip-button': WuiChipButton + } +} diff --git a/packages/ui/src/composites/wui-chip-button/styles.ts b/packages/ui/src/composites/wui-chip-button/styles.ts new file mode 100644 index 0000000000..b58b8c6306 --- /dev/null +++ b/packages/ui/src/composites/wui-chip-button/styles.ts @@ -0,0 +1,184 @@ +import { css } from 'lit' + +export default css` + button { + border: 1px solid var(--wui-gray-glass-010); + border-radius: var(--wui-border-radius-3xl); + } + + wui-image { + border-radius: var(--wui-border-radius-3xl); + overflow: hidden; + } + + button.disabled > wui-icon, + button.disabled > wui-image { + filter: grayscale(1); + } + + button[data-variant='fill'] { + color: var(--wui-color-inverse-100); + background-color: var(--wui-color-accent-100); + } + + button[data-variant='shade'], + button[data-variant='shadeSmall'] { + background-color: transparent; + background-color: var(--wui-gray-glass-010); + color: var(--wui-color-fg-200); + } + + button[data-variant='success'] { + column-gap: var(--wui-spacing-xxs); + border: 1px solid var(--wui-success-glass-010); + background-color: var(--wui-success-glass-010); + color: var(--wui-color-success-100); + } + + button[data-variant='error'] { + column-gap: var(--wui-spacing-xxs); + border: 1px solid var(--wui-error-glass-010); + background-color: var(--wui-error-glass-010); + color: var(--wui-color-error-100); + } + + button[data-variant='transparent'] { + column-gap: var(--wui-spacing-xxs); + background-color: transparent; + color: var(--wui-color-fg-150); + } + + button[data-variant='transparent'], + button[data-variant='success'], + button[data-variant='shadeSmall'], + button[data-variant='error'] { + padding: 7px var(--wui-spacing-s) 7px 8px; + } + + button[data-variant='transparent']:has(wui-text:first-child), + button[data-variant='success']:has(wui-text:first-child), + button[data-variant='shadeSmall']:has(wui-text:first-child), + button[data-variant='error']:has(wui-text:first-child) { + padding: 7px var(--wui-spacing-s); + } + + button[data-variant='fill'], + button[data-variant='shade'] { + column-gap: var(--wui-spacing-xs); + padding: var(--wui-spacing-xxs) var(--wui-spacing-m) var(--wui-spacing-xxs) + var(--wui-spacing-xs); + } + + button[data-variant='fill']:has(wui-text:first-child), + button[data-variant='shade']:has(wui-text:first-child) { + padding: 9px var(--wui-spacing-m) 9px var(--wui-spacing-m); + } + + button[data-variant='fill'] > wui-image, + button[data-variant='shade'] > wui-image { + width: 24px; + height: 24px; + } + + button[data-variant='fill'] > wui-image { + box-shadow: inset 0 0 0 1px var(--wui-color-accent-090); + } + + button[data-variant='shade'] > wui-image, + button[data-variant='shadeSmall'] > wui-image { + box-shadow: inset 0 0 0 1px var(--wui-gray-glass-010); + } + + button[data-variant='fill'] > wui-icon, + button[data-variant='shade'] > wui-icon { + width: 14px; + height: 14px; + } + + button[data-variant='transparent'] > wui-image, + button[data-variant='success'] > wui-image, + button[data-variant='shadeSmall'] > wui-image, + button[data-variant='error'] > wui-image { + width: 14px; + height: 14px; + } + + button[data-variant='transparent'] > wui-icon, + button[data-variant='success'] > wui-icon, + button[data-variant='shadeSmall'] > wui-icon, + button[data-variant='error'] > wui-icon { + width: 12px; + height: 12px; + } + + button[data-variant='fill']:focus-visible { + background-color: var(--wui-color-accent-090); + } + + button[data-variant='shade']:focus-visible, + button[data-variant='shadeSmall']:focus-visible { + background-color: var(--wui-gray-glass-015); + } + + button[data-variant='transparent']:focus-visible { + background-color: var(--wui-gray-glass-005); + } + + button[data-variant='success']:focus-visible { + background-color: var(--wui-success-glass-015); + } + + button[data-variant='error']:focus-visible { + background-color: var(--wui-error-glass-015); + } + + button.disabled { + color: var(--wui-gray-glass-015); + background-color: var(--wui-gray-glass-015); + pointer-events: none; + } + + @media (hover: hover) and (pointer: fine) { + button[data-variant='fill']:hover { + background-color: var(--wui-color-accent-090); + } + + button[data-variant='shade']:hover, + button[data-variant='shadeSmall']:hover { + background-color: var(--wui-gray-glass-015); + } + + button[data-variant='transparent']:hover { + background-color: var(--wui-gray-glass-005); + } + + button[data-variant='success']:hover { + background-color: var(--wui-success-glass-015); + } + + button[data-variant='error']:hover { + background-color: var(--wui-error-glass-015); + } + } + + button[data-variant='fill']:active { + background-color: var(--wui-color-accent-080); + } + + button[data-variant='shade']:active, + button[data-variant='shadeSmall']:active { + background-color: var(--wui-gray-glass-020); + } + + button[data-variant='transparent']:active { + background-color: var(--wui-gray-glass-010); + } + + button[data-variant='success']:active { + background-color: var(--wui-success-glass-020); + } + + button[data-variant='error']:active { + background-color: var(--wui-error-glass-020); + } +` diff --git a/packages/ui/src/composites/wui-compatible-network/index.ts b/packages/ui/src/composites/wui-compatible-network/index.ts new file mode 100644 index 0000000000..8d79aa526d --- /dev/null +++ b/packages/ui/src/composites/wui-compatible-network/index.ts @@ -0,0 +1,50 @@ +import { html, LitElement } from 'lit' +import { property } from 'lit/decorators.js' +import '../../components/wui-icon/index.js' +import '../../components/wui-text/index.js' +import '../../components/wui-image/index.js' +import '../../layout/wui-flex/index.js' +import { elementStyles, resetStyles } from '../../utils/ThemeUtil.js' +import { customElement } from '../../utils/WebComponentsUtil.js' +import styles from './styles.js' + +@customElement('wui-compatible-network') +export class WuiCompatibleNetwork extends LitElement { + public static override styles = [resetStyles, elementStyles, styles] + + // -- State & Properties -------------------------------- // + @property({ type: Array }) networkImages: string[] = [''] + + @property() public text = '' + + // -- Render -------------------------------------------- // + public override render() { + return html` + + ` + } + + // -- Private ------------------------------------------- // + private networksTemplate() { + const slicedNetworks = this.networkImages.slice(0, 5) + + return html` + ${slicedNetworks?.map( + network => + html` ` + )} + ` + } +} + +declare global { + interface HTMLElementTagNameMap { + 'wui-compatible-network': WuiCompatibleNetwork + } +} diff --git a/packages/ui/src/composites/wui-compatible-network/styles.ts b/packages/ui/src/composites/wui-compatible-network/styles.ts new file mode 100644 index 0000000000..a7921559b7 --- /dev/null +++ b/packages/ui/src/composites/wui-compatible-network/styles.ts @@ -0,0 +1,30 @@ +import { css } from 'lit' + +export default css` + button { + display: flex; + gap: var(--wui-spacing-xl); + width: 100%; + background-color: var(--wui-gray-glass-002); + border-radius: var(--wui-border-radius-xxs); + padding: var(--wui-spacing-m) var(--wui-spacing-s); + } + + wui-text { + width: 100%; + } + + wui-flex { + width: auto; + } + + .network-icon { + width: var(--wui-spacing-2l); + height: var(--wui-spacing-2l); + border-radius: calc(var(--wui-spacing-2l) / 2); + overflow: hidden; + box-shadow: + 0 0 0 3px var(--wui-gray-glass-002), + 0 0 0 3px var(--wui-color-modal-bg); + } +` diff --git a/packages/ui/src/composites/wui-list-network/index.ts b/packages/ui/src/composites/wui-list-network/index.ts index e6c16af1d1..ad036b7f80 100644 --- a/packages/ui/src/composites/wui-list-network/index.ts +++ b/packages/ui/src/composites/wui-list-network/index.ts @@ -17,10 +17,12 @@ export class WuiListNetwork extends LitElement { @property({ type: Boolean }) public disabled = false + @property({ type: Boolean }) public transparent = false + // -- Render -------------------------------------------- // public override render() { return html` - diff --git a/packages/ui/src/composites/wui-list-network/styles.ts b/packages/ui/src/composites/wui-list-network/styles.ts index 675d84f6c8..32298534d7 100644 --- a/packages/ui/src/composites/wui-list-network/styles.ts +++ b/packages/ui/src/composites/wui-list-network/styles.ts @@ -15,6 +15,11 @@ export default css` flex: 1; } + button[data-transparent='true'] { + pointer-events: none; + background-color: transparent; + } + wui-icon { color: var(--wui-color-fg-200) !important; } diff --git a/packages/ui/src/composites/wui-qr-code/index.ts b/packages/ui/src/composites/wui-qr-code/index.ts index 773427b4f5..5ce41bf0ce 100644 --- a/packages/ui/src/composites/wui-qr-code/index.ts +++ b/packages/ui/src/composites/wui-qr-code/index.ts @@ -23,9 +23,12 @@ export class WuiQrCode extends LitElement { @property() public alt?: string = undefined + @property({ type: Boolean }) public arenaClear?: boolean = undefined + // -- Render -------------------------------------------- // public override render() { this.dataset['theme'] = this.theme + this.dataset['clear'] = this.arenaClear this.style.cssText = `--local-size: ${this.size}px` return html`${this.templateVisual()} ${this.templateSvg()}` @@ -37,7 +40,7 @@ export class WuiQrCode extends LitElement { return svg` - ${QrCodeUtil.generate(this.uri, size, size / 4)} + ${QrCodeUtil.generate(this.uri, size, this.arenaClear ? 0 : size / 4)} ` } diff --git a/packages/ui/src/composites/wui-qr-code/styles.ts b/packages/ui/src/composites/wui-qr-code/styles.ts index 360a543b46..92fdd86725 100644 --- a/packages/ui/src/composites/wui-qr-code/styles.ts +++ b/packages/ui/src/composites/wui-qr-code/styles.ts @@ -21,6 +21,10 @@ export default css` background-color: var(--wui-color-bg-125); } + :host([data-clear='true']) > wui-icon { + display: none; + } + svg:first-child, wui-image, wui-icon { diff --git a/packages/ui/src/utils/ThemeUtil.ts b/packages/ui/src/utils/ThemeUtil.ts index 9c893a6c80..2c17959948 100644 --- a/packages/ui/src/utils/ThemeUtil.ts +++ b/packages/ui/src/utils/ThemeUtil.ts @@ -172,6 +172,7 @@ function createRootStyles(themeVariables?: ThemeVariables) { --wui-height-network-md: 54px; --wui-height-network-lg: 96px; + --wui-icon-size-network-xs: 12px; --wui-icon-size-network-sm: 16px; --wui-icon-size-network-md: 24px; --wui-icon-size-network-lg: 42px; @@ -627,7 +628,7 @@ function createRootStyles(themeVariables?: ThemeVariables) { --wui-gray-glass-030: rgba(0, 0, 0, 0.3); --wui-gray-glass-060: rgba(0, 0, 0, 0.6); --wui-gray-glass-080: rgba(0, 0, 0, 0.8); - --wui-gray-glass-080: rgba(0, 0, 0, 0.9); + --wui-gray-glass-090: rgba(0, 0, 0, 0.9); } ` } From 87b1877a99e478e36cdb78a313457f6bfe92b8d9 Mon Sep 17 00:00:00 2001 From: Sven Date: Fri, 1 Mar 2024 17:20:35 +0100 Subject: [PATCH 08/13] added jsx type util --- packages/ui/src/utils/JSXTypeUtil.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/ui/src/utils/JSXTypeUtil.ts b/packages/ui/src/utils/JSXTypeUtil.ts index c70d53b49b..81b9a3e2a6 100644 --- a/packages/ui/src/utils/JSXTypeUtil.ts +++ b/packages/ui/src/utils/JSXTypeUtil.ts @@ -53,6 +53,8 @@ import type { WuiPromo } from '../composites/wui-promo/index.js' import type { WuiBalance } from '../composites/wui-balance/index.js' import type { WuiTooltipSelect } from '../composites/wui-tooltip-select/index.js' import type { WuiProfileButton } from '../composites/wui-profile-button/index.js' +import type { WuiBanner } from '../composites/wui-banner/index.js' +import type { WuiCompatibleNetwork } from '../composites/wui-compatible-network/index.js' import type { WuiFlex } from '../layout/wui-flex/index.js' import type { WuiGrid } from '../layout/wui-grid/index.js' @@ -121,6 +123,8 @@ declare global { 'wui-tooltip-select': CustomElement 'wui-balance': CustomElement 'wui-profile-button': CustomElement + 'wui-banner': CustomElement + 'wui-compatible-network': CustomElement } } } From 5ff7fa25ba66f811a40090bf63e6b31413c98573 Mon Sep 17 00:00:00 2001 From: Sven Date: Fri, 1 Mar 2024 17:27:05 +0100 Subject: [PATCH 09/13] fix build and lint --- .../stories/composites/wui-compatible-network.stories.ts | 2 +- .../src/partials/w3m-account-wallet-features-widget/index.ts | 5 +---- packages/ui/src/composites/wui-qr-code/index.ts | 2 +- 3 files changed, 3 insertions(+), 6 deletions(-) diff --git a/apps/gallery/stories/composites/wui-compatible-network.stories.ts b/apps/gallery/stories/composites/wui-compatible-network.stories.ts index dbdd8a92d7..ccba4b079c 100644 --- a/apps/gallery/stories/composites/wui-compatible-network.stories.ts +++ b/apps/gallery/stories/composites/wui-compatible-network.stories.ts @@ -2,7 +2,7 @@ import type { Meta } from '@storybook/web-components' import '@web3modal/ui/src/composites/wui-compatible-network' import type { WuiCompatibleNetwork } from '@web3modal/ui/src/composites/wui-compatible-network' import { html } from 'lit' -import { address, avatarImageSrc, networkImages } from '../../utils/PresetUtils' +import { networkImages } from '../../utils/PresetUtils' type Component = Meta 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 7af0d25c61..62ae93bfa7 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 @@ -5,7 +5,7 @@ import { AssetUtil, RouterController } from '@web3modal/core' -import { UiHelperUtil, customElement } from '@web3modal/ui' +import { customElement } from '@web3modal/ui' import { LitElement, html } from 'lit' import { state } from 'lit/decorators.js' import { ifDefined } from 'lit/directives/if-defined.js' @@ -27,8 +27,6 @@ export class W3mAccountWalletFeaturesWidget extends LitElement { @state() private network = NetworkController.state.caipNetwork - @state() private balance = AccountController.state.balance - public constructor() { super() this.unsubscribe.push( @@ -38,7 +36,6 @@ export class W3mAccountWalletFeaturesWidget extends LitElement { this.address = val.address this.profileImage = val.profileImage this.profileName = val.profileName - this.balance = val.balance } else { ModalController.close() } diff --git a/packages/ui/src/composites/wui-qr-code/index.ts b/packages/ui/src/composites/wui-qr-code/index.ts index 5ce41bf0ce..0b7386ff51 100644 --- a/packages/ui/src/composites/wui-qr-code/index.ts +++ b/packages/ui/src/composites/wui-qr-code/index.ts @@ -28,7 +28,7 @@ export class WuiQrCode extends LitElement { // -- Render -------------------------------------------- // public override render() { this.dataset['theme'] = this.theme - this.dataset['clear'] = this.arenaClear + this.dataset['clear'] = this.arenaClear ? 'true' : 'false' this.style.cssText = `--local-size: ${this.size}px` return html`${this.templateVisual()} ${this.templateSvg()}` From 903f4b3d3d5ddf4127b0787d03376d90f4b4b00f Mon Sep 17 00:00:00 2001 From: Sven Date: Mon, 4 Mar 2024 14:10:24 +0100 Subject: [PATCH 10/13] feedback --- .../stories/composites/wui-banner.stories.ts | 2 +- .../wui-compatible-network.stories.ts | 2 +- .../core/src/controllers/RouterController.ts | 4 +-- packages/scaffold/index.ts | 4 +-- .../scaffold/src/modal/w3m-router/index.ts | 8 +++--- .../w3m-account-default-widget/index.ts | 2 +- .../index.ts | 7 +++-- .../scaffold/src/partials/w3m-header/index.ts | 4 +-- packages/scaffold/src/utils/ConstantsUtil.ts | 3 +++ .../index.ts | 8 +++--- .../styles.ts | 0 .../index.ts | 26 +++++++------------ .../styles.ts | 0 .../ui/src/assets/svg/cursor-transparent.ts | 7 +++-- .../ui/src/composites/wui-balance/index.ts | 2 +- .../ui/src/composites/wui-qr-code/index.ts | 2 +- packages/ui/src/composites/wui-tabs/index.ts | 2 +- 17 files changed, 40 insertions(+), 43 deletions(-) create mode 100644 packages/scaffold/src/utils/ConstantsUtil.ts rename packages/scaffold/src/views/{w3m-compatible-networks-view => w3m-wallet-compatible-networks-view}/index.ts (83%) rename packages/scaffold/src/views/{w3m-compatible-networks-view => w3m-wallet-compatible-networks-view}/styles.ts (100%) rename packages/scaffold/src/views/{w3m-receive-view => w3m-wallet-receive-view}/index.ts (85%) rename packages/scaffold/src/views/{w3m-receive-view => w3m-wallet-receive-view}/styles.ts (100%) diff --git a/apps/gallery/stories/composites/wui-banner.stories.ts b/apps/gallery/stories/composites/wui-banner.stories.ts index 2baef41142..fad470cc85 100644 --- a/apps/gallery/stories/composites/wui-banner.stories.ts +++ b/apps/gallery/stories/composites/wui-banner.stories.ts @@ -10,7 +10,7 @@ type Component = Meta export default { title: 'Composites/wui-banner', args: { - text: 'Only send funds from these networks to be able receive them', + text: 'You can only receive assets on these networks', icon: 'warningCircle' }, argTypes: { diff --git a/apps/gallery/stories/composites/wui-compatible-network.stories.ts b/apps/gallery/stories/composites/wui-compatible-network.stories.ts index ccba4b079c..3d8272385b 100644 --- a/apps/gallery/stories/composites/wui-compatible-network.stories.ts +++ b/apps/gallery/stories/composites/wui-compatible-network.stories.ts @@ -9,7 +9,7 @@ type Component = Meta export default { title: 'Composites/wui-compatible-network', args: { - text: 'Only receive from networks', + text: 'Only receive assets on these networks"', networkImages } } as Component diff --git a/packages/core/src/controllers/RouterController.ts b/packages/core/src/controllers/RouterController.ts index f9e612e989..819efb1038 100644 --- a/packages/core/src/controllers/RouterController.ts +++ b/packages/core/src/controllers/RouterController.ts @@ -10,7 +10,7 @@ export interface RouterControllerState { | 'AllWallets' | 'ApproveTransaction' | 'BuyInProgress' - | 'CompatibleNetworks' + | 'WalletCompatibleNetworks' | 'Connect' | 'ConnectingExternal' | 'ConnectingWalletConnect' @@ -24,7 +24,7 @@ export interface RouterControllerState { | 'OnRampFiatSelect' | 'OnRampProviders' | 'OnRampTokenSelect' - | 'Receive' + | 'WalletReceive' | 'SwitchNetwork' | 'Transactions' | 'UnsupportedChain' diff --git a/packages/scaffold/index.ts b/packages/scaffold/index.ts index 7cc79c5efa..d048612cfa 100644 --- a/packages/scaffold/index.ts +++ b/packages/scaffold/index.ts @@ -33,8 +33,8 @@ export * from './src/views/w3m-update-email-wallet-view/index.js' export * from './src/views/w3m-update-email-primary-otp-view/index.js' export * from './src/views/w3m-update-email-secondary-otp-view/index.js' export * from './src/views/w3m-unsupported-chain-view/index.js' -export * from './src/views/w3m-receive-view/index.js' -export * from './src/views/w3m-compatible-networks-view/index.js' +export * from './src/views/w3m-wallet-receive-view/index.js' +export * from './src/views/w3m-wallet-compatible-networks-view/index.js' export * from './src/partials/w3m-all-wallets-list/index.js' export * from './src/partials/w3m-all-wallets-search/index.js' diff --git a/packages/scaffold/src/modal/w3m-router/index.ts b/packages/scaffold/src/modal/w3m-router/index.ts index 7142e6f9b6..c009d71279 100644 --- a/packages/scaffold/src/modal/w3m-router/index.ts +++ b/packages/scaffold/src/modal/w3m-router/index.ts @@ -111,10 +111,10 @@ export class W3mRouter extends LitElement { return html`` case 'BuyInProgress': return html`` - case 'Receive': - return html`` - case 'CompatibleNetworks': - return html`` + case 'WalletReceive': + return html`` + case 'WalletCompatibleNetworks': + return html`` default: return html`` } diff --git a/packages/scaffold/src/partials/w3m-account-default-widget/index.ts b/packages/scaffold/src/partials/w3m-account-default-widget/index.ts index 96d546ccf0..ca920b6815 100644 --- a/packages/scaffold/src/partials/w3m-account-default-widget/index.ts +++ b/packages/scaffold/src/partials/w3m-account-default-widget/index.ts @@ -53,7 +53,7 @@ export class W3mAccountDefaultWidget extends LitElement { this.balance = val.balance this.balanceSymbol = val.balanceSymbol } else { - ModalController.close() + SnackController.showError('Account not found') } }) ], 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 62ae93bfa7..761119a258 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 @@ -10,6 +10,7 @@ import { LitElement, html } from 'lit' import { state } from 'lit/decorators.js' import { ifDefined } from 'lit/directives/if-defined.js' import styles from './styles.js' +import { ConstantsUtil } from '../../utils/ConstantsUtil.js' @customElement('w3m-account-wallet-features-widget') export class W3mAccountWalletFeaturesWidget extends LitElement { @@ -59,8 +60,6 @@ export class W3mAccountWalletFeaturesWidget extends LitElement { throw new Error('w3m-account-view: No account provided') } - const tabs = [{ label: 'Tokens', icon: '' }, { label: 'NFTs', icon: '' }, { label: 'Activity' }] - const networkImage = AssetUtil.getNetworkImage(this.network) return html` - + ` } @@ -116,7 +115,7 @@ export class W3mAccountWalletFeaturesWidget extends LitElement { } private onReceiveClick() { - RouterController.push('Receive') + RouterController.push('WalletReceive') } } diff --git a/packages/scaffold/src/partials/w3m-header/index.ts b/packages/scaffold/src/partials/w3m-header/index.ts index 198bb3aeae..97206b5fc7 100644 --- a/packages/scaffold/src/partials/w3m-header/index.ts +++ b/packages/scaffold/src/partials/w3m-header/index.ts @@ -50,8 +50,8 @@ function headings() { BuyInProgress: 'Buy', OnRampTokenSelect: 'Select Token', OnRampFiatSelect: 'Select Currency', - Receive: 'Receive', - CompatibleNetworks: 'Compatible Networks' + WalletReceive: 'Receive', + WalletCompatibleNetworks: 'Compatible Networks' } } diff --git a/packages/scaffold/src/utils/ConstantsUtil.ts b/packages/scaffold/src/utils/ConstantsUtil.ts new file mode 100644 index 0000000000..62a6e66b03 --- /dev/null +++ b/packages/scaffold/src/utils/ConstantsUtil.ts @@ -0,0 +1,3 @@ +export const ConstantsUtil = { + ACCOUNT_TABS: [{ label: 'Tokens' }, { label: 'NFTs' }, { label: 'Activity' }] +} diff --git a/packages/scaffold/src/views/w3m-compatible-networks-view/index.ts b/packages/scaffold/src/views/w3m-wallet-compatible-networks-view/index.ts similarity index 83% rename from packages/scaffold/src/views/w3m-compatible-networks-view/index.ts rename to packages/scaffold/src/views/w3m-wallet-compatible-networks-view/index.ts index 0a3561ee08..4e301c22de 100644 --- a/packages/scaffold/src/views/w3m-compatible-networks-view/index.ts +++ b/packages/scaffold/src/views/w3m-wallet-compatible-networks-view/index.ts @@ -4,8 +4,8 @@ import { LitElement, html } from 'lit' import { ifDefined } from 'lit/directives/if-defined.js' import styles from './styles.js' -@customElement('w3m-compatible-networks-view') -export class W3mCompatibleNetworksView extends LitElement { +@customElement('w3m-wallet-compatible-networks-view') +export class W3mWalletCompatibleNetworksView extends LitElement { public static override styles = styles // -- Render -------------------------------------------- // @@ -16,8 +16,8 @@ export class W3mCompatibleNetworksView extends LitElement { gap="xs" > ${this.networkTemplate()} ` @@ -47,6 +47,6 @@ export class W3mCompatibleNetworksView extends LitElement { declare global { interface HTMLElementTagNameMap { - 'w3m-compatible-networks-view': W3mCompatibleNetworksView + 'w3m-wallet-compatible-networks-view': W3mWalletCompatibleNetworksView } } diff --git a/packages/scaffold/src/views/w3m-compatible-networks-view/styles.ts b/packages/scaffold/src/views/w3m-wallet-compatible-networks-view/styles.ts similarity index 100% rename from packages/scaffold/src/views/w3m-compatible-networks-view/styles.ts rename to packages/scaffold/src/views/w3m-wallet-compatible-networks-view/styles.ts diff --git a/packages/scaffold/src/views/w3m-receive-view/index.ts b/packages/scaffold/src/views/w3m-wallet-receive-view/index.ts similarity index 85% rename from packages/scaffold/src/views/w3m-receive-view/index.ts rename to packages/scaffold/src/views/w3m-wallet-receive-view/index.ts index df7ff17d04..b33066bbc3 100644 --- a/packages/scaffold/src/views/w3m-receive-view/index.ts +++ b/packages/scaffold/src/views/w3m-wallet-receive-view/index.ts @@ -13,8 +13,8 @@ import { LitElement, html } from 'lit' import styles from './styles.js' import { state } from 'lit/decorators.js' -@customElement('w3m-receive-view') -export class W3mReceiveView extends LitElement { +@customElement('w3m-wallet-receive-view') +export class W3mWalletReceiveView extends LitElement { public static override styles = styles // -- Members ------------------------------------------- // @@ -36,7 +36,7 @@ export class W3mReceiveView extends LitElement { this.address = val.address this.profileName = val.profileName } else { - ModalController.close() + SnackController.showError('Account not found') } }) ], @@ -55,7 +55,7 @@ export class W3mReceiveView extends LitElement { // -- Render -------------------------------------------- // public override render() { if (!this.address) { - throw new Error('w3m-receive-view: No account provided') + throw new Error('w3m-wallet-receive-view: No account provided') } const networkImage = AssetUtil.getNetworkImage(this.network) @@ -68,7 +68,7 @@ export class W3mReceiveView extends LitElement { network?.imageId)?.slice(0, 5) - - const imagesArray: string[] = [] - - for (const network of slicedNetworks) { - const image = AssetUtil.getNetworkImage(network) - if (image) { - imagesArray.push(image) - } - } + const imagesArray = slicedNetworks.map(AssetUtil.getNetworkImage).filter(Boolean) as string[] return html`` } onReceiveClick() { - RouterController.push('CompatibleNetworks') + RouterController.push('WalletCompatibleNetworks') } onCopyClick() { @@ -137,6 +129,6 @@ export class W3mReceiveView extends LitElement { declare global { interface HTMLElementTagNameMap { - 'w3m-receive-view': W3mReceiveView + 'w3m-wallet-receive-view': W3mWalletReceiveView } } diff --git a/packages/scaffold/src/views/w3m-receive-view/styles.ts b/packages/scaffold/src/views/w3m-wallet-receive-view/styles.ts similarity index 100% rename from packages/scaffold/src/views/w3m-receive-view/styles.ts rename to packages/scaffold/src/views/w3m-wallet-receive-view/styles.ts diff --git a/packages/ui/src/assets/svg/cursor-transparent.ts b/packages/ui/src/assets/svg/cursor-transparent.ts index d1f6215ba1..cdce92a152 100644 --- a/packages/ui/src/assets/svg/cursor-transparent.ts +++ b/packages/ui/src/assets/svg/cursor-transparent.ts @@ -3,9 +3,12 @@ import { svg } from 'lit' export const cursorTransparentSvg = svg` - + ` diff --git a/packages/ui/src/composites/wui-balance/index.ts b/packages/ui/src/composites/wui-balance/index.ts index e685d4436a..28ed53604f 100644 --- a/packages/ui/src/composites/wui-balance/index.ts +++ b/packages/ui/src/composites/wui-balance/index.ts @@ -15,7 +15,7 @@ export class WuiBalance extends LitElement { // -- Render -------------------------------------------- // public override render() { - return html` $${this.dollars}.${this.pennies}` + return html`$${this.dollars}.${this.pennies}` } } diff --git a/packages/ui/src/composites/wui-qr-code/index.ts b/packages/ui/src/composites/wui-qr-code/index.ts index 0b7386ff51..6856bc4106 100644 --- a/packages/ui/src/composites/wui-qr-code/index.ts +++ b/packages/ui/src/composites/wui-qr-code/index.ts @@ -28,7 +28,7 @@ export class WuiQrCode extends LitElement { // -- Render -------------------------------------------- // public override render() { this.dataset['theme'] = this.theme - this.dataset['clear'] = this.arenaClear ? 'true' : 'false' + this.dataset['clear'] = String(this.arenaClear) this.style.cssText = `--local-size: ${this.size}px` return html`${this.templateVisual()} ${this.templateSvg()}` diff --git a/packages/ui/src/composites/wui-tabs/index.ts b/packages/ui/src/composites/wui-tabs/index.ts index 9eb8088039..4b856ad66d 100644 --- a/packages/ui/src/composites/wui-tabs/index.ts +++ b/packages/ui/src/composites/wui-tabs/index.ts @@ -10,7 +10,7 @@ export class WuiTabs extends LitElement { public static override styles = [resetStyles, elementStyles, styles] // -- State & Properties -------------------------------- // - @property({ type: Array }) public tabs: { icon: IconType; label: string }[] = [] + @property({ type: Array }) public tabs: { icon?: IconType; label: string }[] = [] @property() public onTabChange: (index: number) => void = () => null From 21e56cc3e7f1540cfddded5ebd8bd5ddc6213dca Mon Sep 17 00:00:00 2001 From: Sven Date: Mon, 4 Mar 2024 14:41:05 +0100 Subject: [PATCH 11/13] fix --- packages/scaffold/src/views/w3m-wallet-receive-view/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/scaffold/src/views/w3m-wallet-receive-view/index.ts b/packages/scaffold/src/views/w3m-wallet-receive-view/index.ts index b33066bbc3..28ee333c76 100644 --- a/packages/scaffold/src/views/w3m-wallet-receive-view/index.ts +++ b/packages/scaffold/src/views/w3m-wallet-receive-view/index.ts @@ -2,7 +2,6 @@ import { AccountController, AssetUtil, CoreHelperUtil, - ModalController, NetworkController, RouterController, SnackController, From 28f30bccd78d4ad36687a8a906fa20e471fb5d8b Mon Sep 17 00:00:00 2001 From: Sven Date: Mon, 4 Mar 2024 16:49:02 +0100 Subject: [PATCH 12/13] old tabs --- packages/ui/src/composites/wui-tabs/index.ts | 12 ++++-------- packages/ui/src/composites/wui-tabs/styles.ts | 19 ++++++++----------- 2 files changed, 12 insertions(+), 19 deletions(-) diff --git a/packages/ui/src/composites/wui-tabs/index.ts b/packages/ui/src/composites/wui-tabs/index.ts index 4b856ad66d..0ea57a7572 100644 --- a/packages/ui/src/composites/wui-tabs/index.ts +++ b/packages/ui/src/composites/wui-tabs/index.ts @@ -10,7 +10,7 @@ export class WuiTabs extends LitElement { public static override styles = [resetStyles, elementStyles, styles] // -- State & Properties -------------------------------- // - @property({ type: Array }) public tabs: { icon?: IconType; label: string }[] = [] + @property({ type: Array }) public tabs: { icon: IconType; label: string }[] = [] @property() public onTabChange: (index: number) => void = () => null @@ -24,16 +24,13 @@ export class WuiTabs extends LitElement { @state() public isDense = false - @state() public tabWidth?: number = 320 - // -- Render -------------------------------------------- // public override render() { this.isDense = this.tabs.length > 3 this.style.cssText = ` --local-tab: ${this.activeTab}; - --local-tabs-width: ${this.tabWidth}px; - --local-tab-count: ${this.tabs.length}; + --local-tab-width: ${this.localTabWidth}; ` this.dataset['type'] = this.isDense ? 'flex' : 'block' @@ -46,10 +43,9 @@ export class WuiTabs extends LitElement { ?disabled=${this.disabled} @click=${() => this.onTabClick(index)} data-active=${isActive} + data-testid="tab-${tab.label?.toLowerCase()}" > - ${tab.icon - ? html`` - : null} + ${tab.label} ` diff --git a/packages/ui/src/composites/wui-tabs/styles.ts b/packages/ui/src/composites/wui-tabs/styles.ts index b4d3970c5e..29ef17946f 100644 --- a/packages/ui/src/composites/wui-tabs/styles.ts +++ b/packages/ui/src/composites/wui-tabs/styles.ts @@ -2,12 +2,7 @@ import { css } from 'lit' export default css` :host { - --local-tab-width: calc( - calc(var(--local-tabs-width) - calc(var(--wui-spacing-3xs) * 2)) / var(--local-tab-count) - ); - width: var(--local-tabs-width); display: inline-flex; - justify-content: space-between; background-color: var(--wui-gray-glass-002); border-radius: var(--wui-border-radius-3xl); padding: var(--wui-spacing-3xs); @@ -28,8 +23,13 @@ export default css` border-radius: var(--wui-border-radius-3xl); background-color: var(--wui-gray-glass-002); box-shadow: inset 0 0 0 1px var(--wui-gray-glass-002); - left: calc(var(--local-tab) * (var(--local-tab-width)) + var(--wui-spacing-3xs)); - transition: left var(--wui-ease-out-power-2) var(--wui-duration-lg); + transform: translateX(calc(var(--local-tab) * var(--local-tab-width))); + transition: transform var(--wui-ease-out-power-2) var(--wui-duration-lg); + } + + :host([data-type='flex'])::before { + left: 3px; + transform: translateX(calc((var(--local-tab) * 34px) + (var(--local-tab) * 4px))); } :host([data-type='flex']) { @@ -76,10 +76,7 @@ export default css` } button { - flex: 1; - display: flex; - align-items: center; - justify-content: center; + width: var(--local-tab-width); } :host([data-type='flex']) > button { From 4424ea499d554b7ecb4cdf2915938db9a2976921 Mon Sep 17 00:00:00 2001 From: Sven Date: Mon, 4 Mar 2024 16:50:04 +0100 Subject: [PATCH 13/13] icon should optional --- packages/ui/src/composites/wui-tabs/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/src/composites/wui-tabs/index.ts b/packages/ui/src/composites/wui-tabs/index.ts index 0ea57a7572..bd67ff7f32 100644 --- a/packages/ui/src/composites/wui-tabs/index.ts +++ b/packages/ui/src/composites/wui-tabs/index.ts @@ -10,7 +10,7 @@ export class WuiTabs extends LitElement { public static override styles = [resetStyles, elementStyles, styles] // -- State & Properties -------------------------------- // - @property({ type: Array }) public tabs: { icon: IconType; label: string }[] = [] + @property({ type: Array }) public tabs: { icon?: IconType; label: string }[] = [] @property() public onTabChange: (index: number) => void = () => null