From 9e9a2831d076504b09427bbaea406d95ee837844 Mon Sep 17 00:00:00 2001 From: enesozturk Date: Thu, 20 Jun 2024 11:55:22 +0300 Subject: [PATCH 1/2] fix: export onramp components and remove from scaffold --- packages/scaffold-ui/exports/index.ts | 2 + .../w3m-onramp-activity-item/index.ts | 112 ------------------ .../w3m-onramp-activity-item/styles.ts | 56 --------- .../w3m-onramp-provider-item/index.ts | 77 ------------ .../w3m-onramp-provider-item/styles.ts | 58 --------- 5 files changed, 2 insertions(+), 303 deletions(-) delete mode 100644 packages/scaffold/src/partials/w3m-onramp-activity-item/index.ts delete mode 100644 packages/scaffold/src/partials/w3m-onramp-activity-item/styles.ts delete mode 100644 packages/scaffold/src/partials/w3m-onramp-provider-item/index.ts delete mode 100644 packages/scaffold/src/partials/w3m-onramp-provider-item/styles.ts diff --git a/packages/scaffold-ui/exports/index.ts b/packages/scaffold-ui/exports/index.ts index 3c0d5f3d24..539c0d078f 100644 --- a/packages/scaffold-ui/exports/index.ts +++ b/packages/scaffold-ui/exports/index.ts @@ -73,7 +73,9 @@ export * from '../src/partials/w3m-swap-input/index.js' export * from '../src/partials/w3m-swap-input-skeleton/index.js' export * from '../src/partials/w3m-header/index.js' export * from '../src/partials/w3m-help-widget/index.js' +export * from '../src/partials/w3m-onramp-activity-item/index.js' export * from '../src/partials/w3m-onramp-input/index.js' +export * from '../src/partials/w3m-onramp-provider-item/index.js' export * from '../src/partials/w3m-legal-footer/index.js' export * from '../src/partials/w3m-mobile-download-links/index.js' export * from '../src/partials/w3m-onramp-providers-footer/index.js' diff --git a/packages/scaffold/src/partials/w3m-onramp-activity-item/index.ts b/packages/scaffold/src/partials/w3m-onramp-activity-item/index.ts deleted file mode 100644 index 6463ef5932..0000000000 --- a/packages/scaffold/src/partials/w3m-onramp-activity-item/index.ts +++ /dev/null @@ -1,112 +0,0 @@ -import { html, LitElement } from 'lit' -import { property } from 'lit/decorators.js' -import { customElement } from '@web3modal/ui' -import type { ColorType } from '@web3modal/ui/src/utils/TypeUtil.js' -import { ApiController } from '@web3modal/core' -import styles from './styles.js' - -@customElement('w3m-onramp-activity-item') -export class W3mOnRampActivityItem extends LitElement { - public static override styles = [styles] - - // -- State & Properties -------------------------------- // - @property({ type: Boolean }) public disabled = false - - @property() color: ColorType = 'inherit' - - @property() public label = 'Bought' - - @property() public purchaseValue = '' - - @property() public purchaseCurrency = '' - - @property() public date = '' - - @property({ type: Boolean }) public completed = false - - @property({ type: Boolean }) public inProgress = false - - @property({ type: Boolean }) public failed = false - - @property() public onClick: (() => void) | null = null - - @property() public symbol = '' - - @property() public icon?: string - - // -- Render -------------------------------------------- // - public override firstUpdated() { - if (!this.icon) { - this.fetchTokenImage() - } - } - - public override render() { - return html` - - ${this.imageTemplate()} - - - ${this.statusIconTemplate()} - ${this.label} - - - + ${this.purchaseValue} ${this.purchaseCurrency} - - - ${this.inProgress - ? html`` - : html`${this.date}`} - - ` - } - - // -- Private ------------------------------------------- // - private async fetchTokenImage() { - await ApiController._fetchTokenImage(this.purchaseCurrency) - } - - private statusIconTemplate() { - if (this.inProgress) { - return null - } - - return this.completed ? this.boughtIconTemplate() : this.errorIconTemplate() - } - - private errorIconTemplate() { - return html`` - } - - private imageTemplate() { - const icon = this.icon || `https://avatar.vercel.sh/andrew.svg?size=50&text=${this.symbol}` - - return html` - - ` - } - - private boughtIconTemplate() { - return html`` - } -} - -declare global { - interface HTMLElementTagNameMap { - 'w3m-onramp-activity-item': W3mOnRampActivityItem - } -} diff --git a/packages/scaffold/src/partials/w3m-onramp-activity-item/styles.ts b/packages/scaffold/src/partials/w3m-onramp-activity-item/styles.ts deleted file mode 100644 index 01d6177f5f..0000000000 --- a/packages/scaffold/src/partials/w3m-onramp-activity-item/styles.ts +++ /dev/null @@ -1,56 +0,0 @@ -import { css } from 'lit' - -export default css` - :host { - width: 100%; - } - - :host > wui-flex { - width: 100%; - padding: var(--wui-spacing-s); - border-radius: var(--wui-border-radius-xs); - width: 100%; - display: flex; - align-items: center; - justify-content: flex-start; - gap: var(--wui-spacing-s); - } - - :host > wui-flex:hover { - background-color: var(--wui-color-gray-glass-002); - } - - .purchase-image-container { - display: flex; - justify-content: center; - align-items: center; - position: relative; - width: var(--wui-icon-box-size-lg); - height: var(--wui-icon-box-size-lg); - } - - .purchase-image-container wui-image { - width: 100%; - height: 100%; - position: relative; - border-radius: calc(var(--wui-icon-box-size-lg) / 2); - } - - .purchase-image-container wui-image::after { - content: ''; - display: block; - width: 100%; - height: 100%; - position: absolute; - inset: 0; - border-radius: calc(var(--wui-icon-box-size-lg) / 2); - box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005); - } - - .purchase-image-container wui-icon-box { - position: absolute; - right: 0; - bottom: 0; - transform: translate(20%, 20%); - } -` diff --git a/packages/scaffold/src/partials/w3m-onramp-provider-item/index.ts b/packages/scaffold/src/partials/w3m-onramp-provider-item/index.ts deleted file mode 100644 index ff1b552299..0000000000 --- a/packages/scaffold/src/partials/w3m-onramp-provider-item/index.ts +++ /dev/null @@ -1,77 +0,0 @@ -import { html, LitElement } from 'lit' -import { property } from 'lit/decorators.js' -import { ifDefined } from 'lit/directives/if-defined.js' -import { customElement } from '@web3modal/ui' -import type { ColorType } from '@web3modal/ui/src/utils/TypeUtil.js' -import { AssetUtil, NetworkController, type OnRampProvider } from '@web3modal/core' -import styles from './styles.js' - -@customElement('w3m-onramp-provider-item') -export class W3mOnRampProviderItem extends LitElement { - public static override styles = [styles] - - // -- State & Properties -------------------------------- // - @property({ type: Boolean }) public disabled = false - - @property() color: ColorType = 'inherit' - - @property() public name?: OnRampProvider['name'] - - @property() public label = '' - - @property() public feeRange = '' - - @property({ type: Boolean }) public loading = false - - @property() public onClick: (() => void) | null = null - - // -- Render -------------------------------------------- // - public override render() { - return html` - - ` - } - - // -- Private ------------------------------------------- // - private networksTemplate() { - const networks = NetworkController.getRequestedCaipNetworks() - const slicedNetworks = networks?.filter(network => network?.imageId)?.slice(0, 5) - - return html` - - ${slicedNetworks?.map( - network => html` - - - - ` - )} - - ` - } -} - -declare global { - interface HTMLElementTagNameMap { - 'w3m-onramp-provider-item': W3mOnRampProviderItem - } -} diff --git a/packages/scaffold/src/partials/w3m-onramp-provider-item/styles.ts b/packages/scaffold/src/partials/w3m-onramp-provider-item/styles.ts deleted file mode 100644 index 80c576c386..0000000000 --- a/packages/scaffold/src/partials/w3m-onramp-provider-item/styles.ts +++ /dev/null @@ -1,58 +0,0 @@ -import { css } from 'lit' - -export default css` - button { - padding: var(--wui-spacing-s); - border-radius: var(--wui-border-radius-xs); - background-color: var(--wui-color-gray-glass-002); - width: 100%; - display: flex; - align-items: center; - justify-content: flex-start; - gap: var(--wui-spacing-s); - transition: background-color var(--wui-ease-out-power-1) var(--wui-duration-md); - will-change: background-color; - } - - button:hover { - background-color: var(--wui-color-gray-glass-005); - } - - .provider-image { - width: var(--wui-spacing-3xl); - min-width: var(--wui-spacing-3xl); - height: var(--wui-spacing-3xl); - border-radius: calc(var(--wui-border-radius-xs) - calc(var(--wui-spacing-s) / 2)); - position: relative; - overflow: hidden; - } - - .provider-image::after { - content: ''; - display: block; - width: 100%; - height: 100%; - position: absolute; - inset: 0; - border-radius: calc(var(--wui-border-radius-xs) - calc(var(--wui-spacing-s) / 2)); - box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005); - } - - .network-icon { - width: var(--wui-spacing-m); - height: var(--wui-spacing-m); - border-radius: calc(var(--wui-spacing-m) / 2); - overflow: hidden; - box-shadow: - 0 0 0 3px var(--wui-color-gray-glass-002), - 0 0 0 3px var(--wui-color-modal-bg); - transition: box-shadow var(--wui-ease-out-power-1) var(--wui-duration-md); - will-change: box-shadow; - } - - button:hover .network-icon { - box-shadow: - 0 0 0 3px var(--wui-color-gray-glass-005), - 0 0 0 3px var(--wui-color-modal-bg); - } -` From 3dae5ff3a82c6cc8af428e87d291f0d353dfa8b3 Mon Sep 17 00:00:00 2001 From: enesozturk Date: Thu, 20 Jun 2024 12:34:00 +0300 Subject: [PATCH 2/2] chore: reset button styles for onramp provider item --- .../scaffold-ui/src/partials/w3m-onramp-provider-item/styles.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/scaffold-ui/src/partials/w3m-onramp-provider-item/styles.ts b/packages/scaffold-ui/src/partials/w3m-onramp-provider-item/styles.ts index 80c576c386..eaaefd81b2 100644 --- a/packages/scaffold-ui/src/partials/w3m-onramp-provider-item/styles.ts +++ b/packages/scaffold-ui/src/partials/w3m-onramp-provider-item/styles.ts @@ -4,6 +4,8 @@ export default css` button { padding: var(--wui-spacing-s); border-radius: var(--wui-border-radius-xs); + border: none; + outline: none; background-color: var(--wui-color-gray-glass-002); width: 100%; display: flex;