@web3modal/ui - npm Package Compare versions

Comparing version 4.2.4-bafaf84.0 to 4.2.4-cn-social.0

dist/esm/src/components/wui-icon/index.js

@@ -49,2 +49,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 import { helpCircleSvg } from '../../assets/svg/help-circle.js';
+import { imageSvg } from '../../assets/svg/image.js';
 import { infoCircleSvg } from '../../assets/svg/info-circle.js';
@@ -118,2 +119,3 @@ import { mailSvg } from '../../assets/svg/mail.js';
     helpCircle: helpCircleSvg,
+    image: imageSvg,
     id: idSvg,
@@ -120,0 +122,0 @@ infoCircle: infoCircleSvg,

dist/esm/src/components/wui-image/index.js

@@ -24,4 +24,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
       `;
-        return html `<img src=${this.src} alt=${this.alt} />`;
+        return html `<img src=${this.src} alt=${this.alt} @error=${this.handleImageError} />`;
     }
+    handleImageError() {
+        this.dispatchEvent(new CustomEvent('onLoadError', { bubbles: true, composed: true }));
+    }
 };
@@ -28,0 +31,0 @@ WuiImage.styles = [resetStyles, colorStyles, styles];

dist/esm/src/components/wui-text/index.js

@@ -19,2 +19,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
         this.align = 'left';
+        this.lineClamp = undefined;
     }
@@ -24,3 +25,4 @@ render() {
             [`wui-font-${this.variant}`]: true,
-            [`wui-color-${this.color}`]: true
+            [`wui-color-${this.color}`]: true,
+            [`wui-line-clamp-${this.lineClamp}`]: this.lineClamp ? true : false
         };
@@ -44,2 +46,5 @@ this.style.cssText = `
 ], WuiText.prototype, "align", void 0);
+__decorate([
+    property()
+], WuiText.prototype, "lineClamp", void 0);
 WuiText = __decorate([
@@ -46,0 +51,0 @@ customElement('wui-text')

dist/esm/src/components/wui-text/styles.js

@@ -24,2 +24,16 @@ import { css } from 'lit';
 
+  .wui-line-clamp-1 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+  }
+
+  .wui-line-clamp-2 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+  }
+
   .wui-font-medium-400 {
@@ -26,0 +40,0 @@ font-size: var(--wui-font-size-medium);

dist/esm/src/composites/wui-list-accordion/styles.js

@@ -27,3 +27,3 @@ import { css } from 'lit';
     bottom: 0;
-    background: linear-gradient(to top, var(--wui-color-bg-200), transparent);
+    background: linear-gradient(to top, var(--wui-color-bg-150), transparent);
     border-bottom-left-radius: var(--wui-border-radius-xs);
@@ -30,0 +30,0 @@ border-bottom-right-radius: var(--wui-border-radius-xs);

dist/esm/src/composites/wui-snackbar/index.js

@@ -10,2 +10,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 import '../../components/wui-text/index.js';
+import '../../components/wui-loading-spinner/index.js';
 import { resetStyles } from '../../utils/ThemeUtil.js';
@@ -22,13 +23,16 @@ import { customElement } from '../../utils/WebComponentsUtil.js';
         this.message = '';
+        this.loading = false;
     }
     render() {
         return html `
-      <wui-icon-box
-        size="sm"
-        iconSize="xs"
-        iconColor=${this.iconColor}
-        backgroundColor=${this.backgroundColor}
-        icon=${this.icon}
-        background="opaque"
-      ></wui-icon-box>
+      ${this.loading
+            ? html `<wui-loading-spinner size="md" color="accent-100"></wui-loading-spinner>`
+            : html `<wui-icon-box
+            size="sm"
+            iconSize="xs"
+            iconColor=${this.iconColor}
+            backgroundColor=${this.backgroundColor}
+            icon=${this.icon}
+            background="opaque"
+          ></wui-icon-box>`}
       <wui-text variant="paragraph-500" color="fg-100">${this.message}</wui-text>
@@ -51,2 +55,5 @@ `;
 ], WuiSnackbar.prototype, "message", void 0);
+__decorate([
+    property()
+], WuiSnackbar.prototype, "loading", void 0);
 WuiSnackbar = __decorate([
@@ -53,0 +60,0 @@ customElement('wui-snackbar')

dist/esm/src/composites/wui-snackbar/styles.js

@@ -17,3 +17,7 @@ import { css } from 'lit';
   }
+
+  :host wui-loading-spinner {
+    margin-left: var(--wui-spacing-3xs);
+  }
 `;
 //# sourceMappingURL=styles.js.map

dist/esm/src/composites/wui-token-list-item/index.js

@@ -8,3 +8,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 import { html, LitElement } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import '../../components/wui-image/index.js';
@@ -20,3 +20,4 @@ import '../../components/wui-text/index.js';
     constructor() {
-        super(...arguments);
+        super();
+        this.observer = new IntersectionObserver(() => undefined);
         this.imageSrc = undefined;
@@ -27,4 +28,25 @@ this.name = undefined;
         this.amount = undefined;
+        this.visible = false;
+        this.imageError = false;
+        this.observer = new IntersectionObserver(entries => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    this.visible = true;
+                }
+                else {
+                    this.visible = false;
+                }
+            });
+        }, { threshold: 0.1 });
     }
+    firstUpdated() {
+        this.observer.observe(this);
+    }
+    disconnectedCallback() {
+        this.observer.disconnect();
+    }
     render() {
+        if (!this.visible) {
+            return null;
+        }
         const value = this.amount && this.price ? NumberUtil.multiply(this.price, this.amount)?.toFixed(3) : null;
@@ -36,3 +58,3 @@ return html `
           <wui-flex justifyContent="space-between">
-            <wui-text variant="paragraph-500" color="fg-100">${this.name}</wui-text>
+            <wui-text variant="paragraph-500" color="fg-100" lineClamp="1">${this.name}</wui-text>
             ${value
@@ -47,3 +69,3 @@ ? html `
           <wui-flex justifyContent="space-between">
-            <wui-text variant="small-400" color="fg-200">${this.symbol}</wui-text>
+            <wui-text variant="small-400" color="fg-200" lineClamp="1">${this.symbol}</wui-text>
             ${this.amount
@@ -60,7 +82,20 @@ ? html `<wui-text variant="small-400" color="fg-200">
     visualTemplate() {
+        if (this.imageError) {
+            return html `<wui-flex class="token-item-image-placeholder">
+        <wui-icon name="image" color="inherit"></wui-icon>
+      </wui-flex>`;
+        }
         if (this.imageSrc) {
-            return html `<wui-image width="40" height="40" src=${this.imageSrc}></wui-image>`;
+            return html `<wui-image
+        width="40"
+        height="40"
+        src=${this.imageSrc}
+        @onLoadError=${this.imageLoadError}
+      ></wui-image>`;
         }
         return null;
     }
+    imageLoadError() {
+        this.imageError = true;
+    }
 };
@@ -83,2 +118,8 @@ WuiTokenListItem.styles = [resetStyles, elementStyles, styles];
 ], WuiTokenListItem.prototype, "amount", void 0);
+__decorate([
+    state()
+], WuiTokenListItem.prototype, "visible", void 0);
+__decorate([
+    state()
+], WuiTokenListItem.prototype, "imageError", void 0);
 WuiTokenListItem = __decorate([
@@ -85,0 +126,0 @@ customElement('wui-token-list-item')

dist/esm/src/composites/wui-token-list-item/styles.js

 import { css } from 'lit';
 export default css `
+  :host {
+    height: 60px;
+    min-height: 60px;
+  }
+
   :host > wui-flex {
     cursor: pointer;
+    height: 100%;
     display: flex;
@@ -32,4 +38,6 @@ column-gap: var(--wui-spacing-s);
 
-  :host > wui-flex > wui-image {
+  :host > wui-flex > wui-image,
+  :host > wui-flex > .token-item-image-placeholder {
     width: 40px;
+    max-width: 40px;
     height: 40px;
@@ -40,3 +48,10 @@ border-radius: var(--wui-border-radius-3xl);
 
-  :host > wui-flex > wui-image::after {
+  :host > wui-flex > .token-item-image-placeholder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  :host > wui-flex > wui-image::after,
+  :host > wui-flex > .token-item-image-placeholder::after {
     position: absolute;
@@ -43,0 +58,0 @@ content: '';

dist/types/src/components/wui-image/index.d.ts

@@ -9,2 +9,3 @@ import { LitElement } from 'lit';
     render(): import("lit-html").TemplateResult<1>;
+    private handleImageError;
 }
@@ -11,0 +12,0 @@ declare global {

dist/types/src/components/wui-text/index.d.ts

 import { LitElement } from 'lit';
-import type { ColorType, TextAlign, TextType } from '../../utils/TypeUtil.js';
+import type { ColorType, LineClamp, TextAlign, TextType } from '../../utils/TypeUtil.js';
 export declare class WuiText extends LitElement {
@@ -8,2 +8,3 @@ static styles: import("lit").CSSResult[];
     align?: TextAlign;
+    lineClamp?: LineClamp;
     render(): import("lit-html").TemplateResult<1>;
@@ -10,0 +11,0 @@ }

dist/types/src/composites/wui-snackbar/index.d.ts

 import { LitElement } from 'lit';
 import '../../components/wui-text/index.js';
+import '../../components/wui-loading-spinner/index.js';
 import type { ColorType, IconType } from '../../utils/TypeUtil.js';
@@ -11,2 +12,3 @@ import '../wui-icon-box/index.js';
     message: string;
+    loading: boolean;
     render(): import("lit-html").TemplateResult<1>;
@@ -13,0 +15,0 @@ }

dist/types/src/composites/wui-token-list-item/index.d.ts

@@ -7,2 +7,3 @@ import { LitElement } from 'lit';
     static styles: import("lit").CSSResult[];
+    private observer;
     imageSrc?: string;
@@ -13,4 +14,10 @@ name?: string;
     amount?: string;
-    render(): import("lit-html").TemplateResult<1>;
+    private visible;
+    private imageError;
+    constructor();
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1> | null;
     private visualTemplate;
+    private imageLoadError;
 }
@@ -17,0 +24,0 @@ declare global {

dist/types/src/utils/TypeUtil.d.ts

 export type ColorType = 'accent-100' | 'error-100' | 'fg-100' | 'fg-150' | 'fg-200' | 'fg-250' | 'fg-300' | 'inherit' | 'inverse-000' | 'inverse-100' | 'success-100' | 'gray-glass-005' | 'gray-glass-020';
 export type TextType = 'large-500' | 'large-600' | 'large-700' | 'medium-400' | 'medium-600' | 'medium-title-600' | 'micro-600' | 'micro-700' | 'mini-700' | 'paragraph-400' | 'paragraph-500' | 'paragraph-600' | 'paragraph-700' | 'small-400' | 'small-500' | 'small-600' | 'tiny-400' | 'tiny-500' | 'tiny-600' | '2xl-500';
 export type TextAlign = 'center' | 'left' | 'right';
+export type LineClamp = '1' | '2';
 export type SizeType = 'inherit' | 'xl' | 'lg' | 'md' | 'mdl' | 'sm' | 'xs' | 'xxs' | 'xxl';
@@ -20,3 +21,3 @@ export type SpacingType = '0' | '1xs' | '2xl' | '3xl' | '4xl' | '5xl' | '3xs' | '4xs' | 'l' | '2l' | 'm' | 's' | 'xl' | 'xs' | 'xxl' | 'xxs';
 export type GridItemsType = 'center' | 'end' | 'start' | 'stretch';
-export type IconType = 'add' | 'allWallets' | 'arrowBottomCircle' | 'appStore' | 'chromeStore' | 'apple' | 'arrowBottom' | 'arrowLeft' | 'arrowRight' | 'arrowTop' | 'bank' | 'browser' | 'card' | 'checkmark' | 'checkmarkBold' | 'chevronBottom' | 'chevronLeft' | 'chevronRight' | 'chevronTop' | 'clock' | 'close' | 'coinPlaceholder' | 'compass' | 'copy' | 'cursor' | 'cursorTransparent' | 'desktop' | 'disconnect' | 'discord' | 'etherscan' | 'extension' | 'externalLink' | 'facebook' | 'filters' | 'github' | 'google' | 'helpCircle' | 'id' | 'infoCircle' | 'mail' | 'mobile' | 'more' | 'networkPlaceholder' | 'nftPlaceholder' | 'off' | 'playStore' | 'plus' | 'qrCode' | 'recycleHorizontal' | 'refresh' | 'search' | 'send' | 'swapHorizontal' | 'swapHorizontalBold' | 'swapHorizontalMedium' | 'swapHorizontalRoundedBold' | 'swapVertical' | 'telegram' | 'twitch' | 'twitter' | 'twitterIcon' | 'verify' | 'verifyFilled' | 'wallet' | 'walletConnect' | 'walletPlaceholder' | 'warningCircle' | 'x';
+export type IconType = 'add' | 'allWallets' | 'arrowBottomCircle' | 'appStore' | 'chromeStore' | 'apple' | 'arrowBottom' | 'arrowLeft' | 'arrowRight' | 'arrowTop' | 'bank' | 'browser' | 'card' | 'checkmark' | 'checkmarkBold' | 'chevronBottom' | 'chevronLeft' | 'chevronRight' | 'chevronTop' | 'clock' | 'close' | 'coinPlaceholder' | 'compass' | 'copy' | 'cursor' | 'cursorTransparent' | 'desktop' | 'disconnect' | 'discord' | 'etherscan' | 'extension' | 'externalLink' | 'facebook' | 'filters' | 'github' | 'google' | 'helpCircle' | 'image' | 'id' | 'infoCircle' | 'mail' | 'mobile' | 'more' | 'networkPlaceholder' | 'nftPlaceholder' | 'off' | 'playStore' | 'plus' | 'qrCode' | 'recycleHorizontal' | 'refresh' | 'search' | 'send' | 'swapHorizontal' | 'swapHorizontalBold' | 'swapHorizontalMedium' | 'swapHorizontalRoundedBold' | 'swapVertical' | 'telegram' | 'twitch' | 'twitter' | 'twitterIcon' | 'verify' | 'verifyFilled' | 'wallet' | 'walletConnect' | 'walletPlaceholder' | 'warningCircle' | 'x';
 export type VisualType = 'browser' | 'coinbase' | 'dao' | 'defi' | 'defiAlt' | 'eth' | 'google' | 'layers' | 'lightbulb' | 'lock' | 'login' | 'network' | 'nft' | 'noun' | 'onrampCard' | 'profile' | 'system' | 'moonpay' | 'stripe' | 'paypal' | 'pencil';
@@ -23,0 +24,0 @@ export type VisualSize = 'sm' | 'md' | 'lg';

package.json

 {
   "name": "@web3modal/ui",
-  "version": "4.2.4-bafaf84.0",
+  "version": "4.2.4-cn-social.0",
   "type": "module",
@@ -25,3 +25,3 @@ "main": "./dist/esm/index.js",
     "@types/qrcode": "1.5.5",
-    "@web3modal/common": "4.2.4-bafaf84.0",
+    "@web3modal/common": "4.2.4-cn-social.0",
     "eslint-plugin-lit": "1.11.0",
@@ -28,0 +28,0 @@ "eslint-plugin-wc": "2.0.4"

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

693140

increased by1.19%

Number of package files

746

increased by0.4%

Lines of code

12173

increased by0.95%

No dependency changes