@reown/appkit-ui 0.0.3

package/dist/esm/src/composites/wui-tooltip/index.js

@@ -0,0 +1,46 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import '../../components/wui-icon/index.js';
+import '../../components/wui-text/index.js';
+import { elementStyles, resetStyles } from '../../utils/ThemeUtil.js';
+import { customElement } from '../../utils/WebComponentsUtil.js';
+import styles from './styles.js';
+let WuiTooltip = class WuiTooltip extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.placement = 'top';
+        this.variant = 'fill';
+        this.message = '';
+    }
+    render() {
+        this.dataset['variant'] = this.variant;
+        return html `<wui-icon
+        data-placement=${this.placement}
+        color="fg-100"
+        size="inherit"
+        name=${this.variant === 'fill' ? 'cursor' : 'cursorTransparent'}
+      ></wui-icon>
+      <wui-text color="inherit" variant="small-500">${this.message}</wui-text>`;
+    }
+};
+WuiTooltip.styles = [resetStyles, elementStyles, styles];
+__decorate([
+    property()
+], WuiTooltip.prototype, "placement", void 0);
+__decorate([
+    property()
+], WuiTooltip.prototype, "variant", void 0);
+__decorate([
+    property()
+], WuiTooltip.prototype, "message", void 0);
+WuiTooltip = __decorate([
+    customElement('wui-tooltip')
+], WuiTooltip);
+export { WuiTooltip };
+//# sourceMappingURL=index.js.map

package/dist/esm/src/composites/wui-tooltip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/composites/wui-tooltip/index.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,OAAO,oCAAoC,CAAA;AAC3C,OAAO,oCAAoC,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAErE,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAA;AAChE,OAAO,MAAM,MAAM,aAAa,CAAA;AAGzB,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QAIc,cAAS,GAAkB,KAAK,CAAA;QAEhC,YAAO,GAAqB,MAAM,CAAA;QAElC,YAAO,GAAG,EAAE,CAAA;IAcjC,CAAC;IAXiB,MAAM;QACpB,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC,OAAO,CAAA;QAEtC,OAAO,IAAI,CAAA;yBACU,IAAI,CAAC,SAAS;;;eAGxB,IAAI,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,mBAAmB;;sDAEjB,IAAI,CAAC,OAAO,aAAa,CAAA;IAC7E,CAAC;;AApBsB,iBAAM,GAAG,CAAC,WAAW,EAAE,aAAa,EAAE,MAAM,CAAC,AAAvC,CAAuC;AAGjD;IAAlB,QAAQ,EAAE;6CAAwC;AAEhC;IAAlB,QAAQ,EAAE;2CAA0C;AAElC;IAAlB,QAAQ,EAAE;2CAAoB;AARpB,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAsBtB"}

package/dist/esm/src/composites/wui-tooltip/styles.js

@@ -0,0 +1,56 @@
+import { css } from 'lit';
+export default css `
+  :host {
+    display: block;
+    padding: 9px var(--wui-spacing-s) 10px var(--wui-spacing-s);
+    border-radius: var(--wui-border-radius-xxs);
+
+    color: var(--wui-color-bg-100);
+    position: relative;
+  }
+
+  :host([data-variant='shade']) {
+    background-color: var(--wui-color-bg-150);
+    border: 1px solid var(--wui-color-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;
+    height: 4px !important;
+  }
+
+  wui-icon[data-placement='top'] {
+    bottom: 0px;
+    left: 50%;
+    transform: translate(-50%, 95%);
+  }
+
+  wui-icon[data-placement='bottom'] {
+    top: 0;
+    left: 50%;
+    transform: translate(-50%, -95%) rotate(180deg);
+  }
+
+  wui-icon[data-placement='right'] {
+    top: 50%;
+    left: 0;
+    transform: translate(-65%, -50%) rotate(90deg);
+  }
+
+  wui-icon[data-placement='left'] {
+    top: 50%;
+    right: 0%;
+    transform: translate(65%, -50%) rotate(270deg);
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/src/composites/wui-tooltip/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/composites/wui-tooltip/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqDjB,CAAA"}

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

@@ -0,0 +1,105 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { customElement } from '../../utils/WebComponentsUtil.js';
+import { TransactionTypePastTense } from '../../utils/TypeUtil.js';
+import { resetStyles } from '../../utils/ThemeUtil.js';
+import '../../components/wui-text/index.js';
+import '../wui-transaction-visual/index.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import styles from './styles.js';
+let WuiTransactionListItem = class WuiTransactionListItem extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.type = 'approve';
+        this.onlyDirectionIcon = false;
+        this.images = [];
+        this.price = [];
+        this.amount = [];
+        this.symbol = [];
+    }
+    render() {
+        return html `
+      <wui-flex>
+        <wui-transaction-visual
+          .status=${this.status}
+          direction=${ifDefined(this.direction)}
+          type=${this.type}
+          onlyDirectionIcon=${ifDefined(this.onlyDirectionIcon)}
+          .images=${this.images}
+        ></wui-transaction-visual>
+        <wui-flex flexDirection="column" gap="3xs">
+          <wui-text variant="paragraph-600" color="fg-100">
+            ${TransactionTypePastTense[this.type] || this.type}
+          </wui-text>
+          <wui-flex class="description-container">
+            ${this.templateDescription()} ${this.templateSecondDescription()}
+          </wui-flex>
+        </wui-flex>
+        <wui-text variant="micro-700" color="fg-300"><span>${this.date}</span></wui-text>
+      </wui-flex>
+    `;
+    }
+    templateDescription() {
+        const description = this.descriptions?.[0];
+        return description
+            ? html `
+          <wui-text variant="small-500" color="fg-200">
+            <span>${description}</span>
+          </wui-text>
+        `
+            : null;
+    }
+    templateSecondDescription() {
+        const description = this.descriptions?.[1];
+        return description
+            ? html `
+          <wui-icon class="description-separator-icon" size="xxs" name="arrowRight"></wui-icon>
+          <wui-text variant="small-400" color="fg-200">
+            <span>${description}</span>
+          </wui-text>
+        `
+            : null;
+    }
+};
+WuiTransactionListItem.styles = [resetStyles, styles];
+__decorate([
+    property()
+], WuiTransactionListItem.prototype, "type", void 0);
+__decorate([
+    property({ type: Array })
+], WuiTransactionListItem.prototype, "descriptions", void 0);
+__decorate([
+    property()
+], WuiTransactionListItem.prototype, "date", void 0);
+__decorate([
+    property({ type: Boolean })
+], WuiTransactionListItem.prototype, "onlyDirectionIcon", void 0);
+__decorate([
+    property()
+], WuiTransactionListItem.prototype, "status", void 0);
+__decorate([
+    property()
+], WuiTransactionListItem.prototype, "direction", void 0);
+__decorate([
+    property({ type: Array })
+], WuiTransactionListItem.prototype, "images", void 0);
+__decorate([
+    property({ type: Array })
+], WuiTransactionListItem.prototype, "price", void 0);
+__decorate([
+    property({ type: Array })
+], WuiTransactionListItem.prototype, "amount", void 0);
+__decorate([
+    property({ type: Array })
+], WuiTransactionListItem.prototype, "symbol", void 0);
+WuiTransactionListItem = __decorate([
+    customElement('wui-transaction-list-item')
+], WuiTransactionListItem);
+export { WuiTransactionListItem };
+//# sourceMappingURL=index.js.map

package/dist/esm/src/composites/wui-transaction-list-item/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/composites/wui-transaction-list-item/index.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAA;AAChE,OAAO,EAAwB,wBAAwB,EAAE,MAAM,yBAAyB,CAAA;AAMxF,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,oCAAoC,CAAA;AAC3C,OAAO,oCAAoC,CAAA;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACxD,OAAO,MAAM,MAAM,aAAa,CAAA;AAGzB,IAAM,sBAAsB,GAA5B,MAAM,sBAAuB,SAAQ,UAAU;IAA/C;;QAIc,SAAI,GAAoB,SAAS,CAAA;QAMhB,sBAAiB,GAAa,KAAK,CAAA;QAMrC,WAAM,GAAuB,EAAE,CAAA;QAE/B,UAAK,GAAuB,EAAE,CAAA;QAE9B,WAAM,GAAuB,EAAE,CAAA;QAE/B,WAAM,GAAuB,EAAE,CAAA;IAmDnE,CAAC;IAhDiB,MAAM;QACpB,OAAO,IAAI,CAAA;;;oBAGK,IAAI,CAAC,MAAM;sBACT,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC;iBAC9B,IAAI,CAAC,IAAI;8BACI,SAAS,CAAC,IAAI,CAAC,iBAAiB,CAAC;oBAC3C,IAAI,CAAC,MAAM;;;;cAIjB,wBAAwB,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI;;;cAGhD,IAAI,CAAC,mBAAmB,EAAE,IAAI,IAAI,CAAC,yBAAyB,EAAE;;;6DAGf,IAAI,CAAC,IAAI;;KAEjE,CAAA;IACH,CAAC;IAGO,mBAAmB;QACzB,MAAM,WAAW,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,CAAA;QAE1C,OAAO,WAAW;YAChB,CAAC,CAAC,IAAI,CAAA;;oBAEQ,WAAW;;SAEtB;YACH,CAAC,CAAC,IAAI,CAAA;IACV,CAAC;IAEO,yBAAyB;QAC/B,MAAM,WAAW,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,CAAA;QAE1C,OAAO,WAAW;YAChB,CAAC,CAAC,IAAI,CAAA;;;oBAGQ,WAAW;;SAEtB;YACH,CAAC,CAAC,IAAI,CAAA;IACV,CAAC;;AAvEsB,6BAAM,GAAG,CAAC,WAAW,EAAE,MAAM,CAAC,AAAxB,CAAwB;AAGlC;IAAlB,QAAQ,EAAE;oDAAyC;AAElB;IAAjC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;4DAA+B;AAEtC;IAAlB,QAAQ,EAAE;oDAAqB;AAEI;IAAnC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iEAA2C;AAEpD;IAAlB,QAAQ,EAAE;sDAAkC;AAE1B;IAAlB,QAAQ,EAAE;yDAAwC;AAEjB;IAAjC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;sDAAuC;AAE/B;IAAjC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;qDAAsC;AAE9B;IAAjC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;sDAAuC;AAE/B;IAAjC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;sDAAuC;AAtBtD,sBAAsB;IADlC,aAAa,CAAC,2BAA2B,CAAC;GAC9B,sBAAsB,CAyElC"}

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

@@ -0,0 +1,46 @@
+import { css } from 'lit';
+export default css `
+  :host > wui-flex:first-child {
+    align-items: center;
+    column-gap: var(--wui-spacing-s);
+    padding: 6.5px var(--wui-spacing-xs) 6.5px var(--wui-spacing-xs);
+    width: 100%;
+  }
+
+  :host > wui-flex:first-child wui-text:nth-child(1) {
+    text-transform: capitalize;
+  }
+
+  wui-transaction-visual {
+    width: 40px;
+    height: 40px;
+  }
+
+  wui-flex {
+    flex: 1;
+  }
+
+  :host wui-flex wui-flex {
+    overflow: hidden;
+  }
+
+  :host .description-container wui-text span {
+    word-break: break-all;
+  }
+
+  :host .description-container wui-text {
+    overflow: hidden;
+  }
+
+  :host .description-separator-icon {
+    margin: 0px 6px;
+  }
+
+  :host wui-text > span {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/src/composites/wui-transaction-list-item/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/composites/wui-transaction-list-item/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2CjB,CAAA"}

package/dist/esm/src/composites/wui-transaction-list-item-loader/index.js

@@ -0,0 +1,32 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement } from 'lit';
+import { customElement } from '../../utils/WebComponentsUtil.js';
+import { resetStyles } from '../../utils/ThemeUtil.js';
+import '../../components/wui-text/index.js';
+import '../wui-transaction-visual/index.js';
+import styles from './styles.js';
+let WuiTransactionListItemLoader = class WuiTransactionListItemLoader extends LitElement {
+    render() {
+        return html `
+      <wui-flex alignItems="center">
+        <wui-shimmer width="40px" height="40px"></wui-shimmer>
+        <wui-flex flexDirection="column" gap="2xs">
+          <wui-shimmer width="72px" height="16px" borderRadius="4xs"></wui-shimmer>
+          <wui-shimmer width="148px" height="14px" borderRadius="4xs"></wui-shimmer>
+        </wui-flex>
+        <wui-shimmer width="24px" height="12px" borderRadius="5xs"></wui-shimmer>
+      </wui-flex>
+    `;
+    }
+};
+WuiTransactionListItemLoader.styles = [resetStyles, styles];
+WuiTransactionListItemLoader = __decorate([
+    customElement('wui-transaction-list-item-loader')
+], WuiTransactionListItemLoader);
+export { WuiTransactionListItemLoader };
+//# sourceMappingURL=index.js.map

package/dist/esm/src/composites/wui-transaction-list-item-loader/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/composites/wui-transaction-list-item-loader/index.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAA;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,oCAAoC,CAAA;AAC3C,OAAO,oCAAoC,CAAA;AAC3C,OAAO,MAAM,MAAM,aAAa,CAAA;AAGzB,IAAM,4BAA4B,GAAlC,MAAM,4BAA6B,SAAQ,UAAU;IAI1C,MAAM;QACpB,OAAO,IAAI,CAAA;;;;;;;;;KASV,CAAA;IACH,CAAC;;AAdsB,mCAAM,GAAG,CAAC,WAAW,EAAE,MAAM,CAAC,AAAxB,CAAwB;AAD1C,4BAA4B;IADxC,aAAa,CAAC,kCAAkC,CAAC;GACrC,4BAA4B,CAgBxC"}

package/dist/esm/src/composites/wui-transaction-list-item-loader/styles.js

@@ -0,0 +1,14 @@
+import { css } from 'lit';
+export default css `
+  :host > wui-flex:first-child {
+    column-gap: var(--wui-spacing-s);
+    padding: 7px var(--wui-spacing-l) 7px var(--wui-spacing-xs);
+    width: 100%;
+  }
+
+  wui-flex {
+    display: flex;
+    flex: 1;
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/src/composites/wui-transaction-list-item-loader/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/composites/wui-transaction-list-item-loader/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;CAWjB,CAAA"}

package/dist/esm/src/composites/wui-transaction-visual/index.js

@@ -0,0 +1,139 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { customElement } from '../../utils/WebComponentsUtil.js';
+import '../../components/wui-image/index.js';
+import '../wui-icon-box/index.js';
+import styles from './styles.js';
+let WuiTransactionVisual = class WuiTransactionVisual extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.images = [];
+        this.secondImage = {
+            type: undefined,
+            url: ''
+        };
+    }
+    render() {
+        const [firstImage, secondImage] = this.images;
+        const isLeftNFT = firstImage?.type === 'NFT';
+        const isRightNFT = secondImage?.url ? secondImage.type === 'NFT' : isLeftNFT;
+        const leftRadius = isLeftNFT ? 'var(--wui-border-radius-xxs)' : 'var(--wui-border-radius-s)';
+        const rightRadius = isRightNFT ? 'var(--wui-border-radius-xxs)' : 'var(--wui-border-radius-s)';
+        this.style.cssText = `
+    --local-left-border-radius: ${leftRadius};
+    --local-right-border-radius: ${rightRadius};
+    `;
+        return html `<wui-flex> ${this.templateVisual()} ${this.templateIcon()} </wui-flex>`;
+    }
+    templateVisual() {
+        const [firstImage, secondImage] = this.images;
+        const firstImageType = firstImage?.type;
+        const haveTwoImages = this.images.length === 2;
+        if (haveTwoImages && (firstImage?.url || secondImage?.url)) {
+            return html `<div class="swap-images-container">
+        ${firstImage?.url
+                ? html `<wui-image src=${firstImage.url} alt="Transaction image"></wui-image>`
+                : null}
+        ${secondImage?.url
+                ? html `<wui-image src=${secondImage.url} alt="Transaction image"></wui-image>`
+                : null}
+      </div>`;
+        }
+        else if (firstImage?.url) {
+            return html `<wui-image src=${firstImage.url} alt="Transaction image"></wui-image>`;
+        }
+        else if (firstImageType === 'NFT') {
+            return html `<wui-icon size="inherit" color="fg-200" name="nftPlaceholder"></wui-icon>`;
+        }
+        return html `<wui-icon size="inherit" color="fg-200" name="coinPlaceholder"></wui-icon>`;
+    }
+    templateIcon() {
+        let color = 'accent-100';
+        let icon = undefined;
+        icon = this.getIcon();
+        if (this.status) {
+            color = this.getStatusColor();
+        }
+        if (!icon) {
+            return null;
+        }
+        return html `
+      <wui-icon-box
+        size="xxs"
+        iconColor=${color}
+        backgroundColor=${color}
+        background="opaque"
+        icon=${icon}
+        ?border=${true}
+        borderColor="wui-color-bg-125"
+      ></wui-icon-box>
+    `;
+    }
+    getDirectionIcon() {
+        switch (this.direction) {
+            case 'in':
+                return 'arrowBottom';
+            case 'out':
+                return 'arrowTop';
+            default:
+                return undefined;
+        }
+    }
+    getIcon() {
+        if (this.onlyDirectionIcon) {
+            return this.getDirectionIcon();
+        }
+        if (this.type === 'trade') {
+            return 'swapHorizontalBold';
+        }
+        else if (this.type === 'approve') {
+            return 'checkmark';
+        }
+        else if (this.type === 'cancel') {
+            return 'close';
+        }
+        return this.getDirectionIcon();
+    }
+    getStatusColor() {
+        switch (this.status) {
+            case 'confirmed':
+                return 'success-100';
+            case 'failed':
+                return 'error-100';
+            case 'pending':
+                return 'inverse-100';
+            default:
+                return 'accent-100';
+        }
+    }
+};
+WuiTransactionVisual.styles = [styles];
+__decorate([
+    property()
+], WuiTransactionVisual.prototype, "type", void 0);
+__decorate([
+    property()
+], WuiTransactionVisual.prototype, "status", void 0);
+__decorate([
+    property()
+], WuiTransactionVisual.prototype, "direction", void 0);
+__decorate([
+    property({ type: Boolean })
+], WuiTransactionVisual.prototype, "onlyDirectionIcon", void 0);
+__decorate([
+    property({ type: Array })
+], WuiTransactionVisual.prototype, "images", void 0);
+__decorate([
+    property({ type: Object })
+], WuiTransactionVisual.prototype, "secondImage", void 0);
+WuiTransactionVisual = __decorate([
+    customElement('wui-transaction-visual')
+], WuiTransactionVisual);
+export { WuiTransactionVisual };
+//# sourceMappingURL=index.js.map

package/dist/esm/src/composites/wui-transaction-visual/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/composites/wui-transaction-visual/index.ts"],"names":[],"mappings":"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"}

package/dist/esm/src/composites/wui-transaction-visual/styles.js

@@ -0,0 +1,61 @@
+import { css } from 'lit';
+export default css `
+  :host > wui-flex {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    width: 40px;
+    height: 40px;
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005);
+    background-color: var(--wui-color-gray-glass-005);
+  }
+
+  :host > wui-flex wui-image {
+    display: block;
+  }
+
+  :host > wui-flex,
+  :host > wui-flex wui-image,
+  .swap-images-container,
+  .swap-images-container.nft,
+  wui-image.nft {
+    border-top-left-radius: var(--local-left-border-radius);
+    border-top-right-radius: var(--local-right-border-radius);
+    border-bottom-left-radius: var(--local-left-border-radius);
+    border-bottom-right-radius: var(--local-right-border-radius);
+  }
+
+  wui-icon {
+    width: 20px;
+    height: 20px;
+  }
+
+  wui-icon-box {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    transform: translate(20%, 20%);
+  }
+
+  .swap-images-container {
+    position: relative;
+    width: 40px;
+    height: 40px;
+    overflow: hidden;
+  }
+
+  .swap-images-container wui-image:first-child {
+    position: absolute;
+    width: 40px;
+    height: 40px;
+    top: 0;
+    left: 0%;
+    clip-path: inset(0px calc(50% + 2px) 0px 0%);
+  }
+
+  .swap-images-container wui-image:last-child {
+    clip-path: inset(0px 0px 0px calc(50% + 2px));
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/src/composites/wui-transaction-visual/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/composites/wui-transaction-visual/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0DjB,CAAA"}

package/dist/esm/src/composites/wui-visual-thumbnail/index.js

@@ -0,0 +1,45 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import '../../components/wui-image/index.js';
+import '../../components/wui-icon/index.js';
+import { resetStyles } from '../../utils/ThemeUtil.js';
+import { customElement } from '../../utils/WebComponentsUtil.js';
+import styles from './styles.js';
+let WuiVisualThumbnail = class WuiVisualThumbnail extends LitElement {
+    render() {
+        this.style.cssText = `--local-border-radius: ${this.borderRadiusFull ? '1000px' : '20px'}; background-color: var(--wui-color-modal-bg);`;
+        return html `${this.templateVisual()}`;
+    }
+    templateVisual() {
+        if (this.imageSrc) {
+            return html `<wui-image src=${this.imageSrc} alt=${this.alt ?? ''}></wui-image>`;
+        }
+        return html `<wui-icon
+      data-parent-size="md"
+      size="inherit"
+      color="inherit"
+      name="walletPlaceholder"
+    ></wui-icon>`;
+    }
+};
+WuiVisualThumbnail.styles = [resetStyles, styles];
+__decorate([
+    property()
+], WuiVisualThumbnail.prototype, "imageSrc", void 0);
+__decorate([
+    property()
+], WuiVisualThumbnail.prototype, "alt", void 0);
+__decorate([
+    property({ type: Boolean })
+], WuiVisualThumbnail.prototype, "borderRadiusFull", void 0);
+WuiVisualThumbnail = __decorate([
+    customElement('wui-visual-thumbnail')
+], WuiVisualThumbnail);
+export { WuiVisualThumbnail };
+//# sourceMappingURL=index.js.map

package/dist/esm/src/composites/wui-visual-thumbnail/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/composites/wui-visual-thumbnail/index.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,OAAO,qCAAqC,CAAA;AAC5C,OAAO,oCAAoC,CAAA;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAA;AAChE,OAAO,MAAM,MAAM,aAAa,CAAA;AAGzB,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAWhC,MAAM;QACpB,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,0BACnB,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MACrC,gDAAgD,CAAA;QAEhD,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,cAAc,EAAE,EAAE,CAAA;IACvC,CAAC;IAGO,cAAc;QACpB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,OAAO,IAAI,CAAA,kBAAkB,IAAI,CAAC,QAAQ,QAAQ,IAAI,CAAC,GAAG,IAAI,EAAE,eAAe,CAAA;QACjF,CAAC;QAED,OAAO,IAAI,CAAA;;;;;iBAKE,CAAA;IACf,CAAC;;AA9BsB,yBAAM,GAAG,CAAC,WAAW,EAAE,MAAM,CAAC,AAAxB,CAAwB;AAGlC;IAAlB,QAAQ,EAAE;oDAAgC;AAExB;IAAlB,QAAQ,EAAE;+CAAoB;AAEK;IAAnC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4DAAkC;AARnD,kBAAkB;IAD9B,aAAa,CAAC,sBAAsB,CAAC;GACzB,kBAAkB,CAgC9B"}

package/dist/esm/src/composites/wui-visual-thumbnail/styles.js

@@ -0,0 +1,19 @@
+import { css } from 'lit';
+export default css `
+  :host {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: var(--wui-icon-box-size-xl);
+    height: var(--wui-icon-box-size-xl);
+    box-shadow: 0 0 0 8px var(--wui-thumbnail-border);
+    border-radius: var(--local-border-radius);
+    overflow: hidden;
+  }
+
+  wui-icon {
+    width: 32px;
+    height: 32px;
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/src/composites/wui-visual-thumbnail/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/composites/wui-visual-thumbnail/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;CAgBjB,CAAA"}