@lukso/transaction-view-core 0.3.1-dev.a8c9315

package/src/shared/gas-provider-view.ts

@@ -0,0 +1,218 @@
+import { Task } from '@lit/task'
+import { useAddressResolver } from '@lukso/transaction-view-headless'
+import makeBlockie from 'ethereum-blockies-base64'
+import { html } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+import { safeCustomElement } from './safe-custom-element'
+import './load-web-components'
+import { CoreLitElement } from '../styles'
+
+type GasProvider = { type: 'relayer' | 'controller'; id: string }
+type Relayer = {
+  id: string
+  name: string
+  isCustom: boolean
+  apiUrl: string
+  chainIds: string[]
+  createdAt: number
+  website?: string
+}
+
+@safeCustomElement('gas-provider-view')
+export class GasProviderView extends CoreLitElement {
+  @property({ type: Array, reflect: true }) allRelayers: Relayer[] = []
+  @property({ type: Number, reflect: true }) balance = 0
+  @property({ type: Object, attribute: 'selected-gas-provider', reflect: true })
+  selectedGasProvider?: GasProvider
+  @property({ attribute: 'controller-address', reflect: true })
+  controllerAddress?: string
+  @property({ attribute: 'controller-name', reflect: true })
+  controllerName?: string
+  @property({ attribute: 'symbol', reflect: true }) symbol: string = 'LYX'
+  @property({ type: Number, reflect: true }) decimals = 18
+  @property({ type: Number, attribute: 'transaction-fee', reflect: true })
+  transactionFee = 0
+  @property({ type: Number, attribute: 'relayer-available', reflect: true })
+  relayerAvailable = 0
+  @property({ type: Number, attribute: 'relayer-used', reflect: true })
+  relayerUsed = 0
+  @property({ type: Number, attribute: 'relayer-to-be-used', reflect: true })
+  relayerToBeUsed = 0
+  @property({ attribute: 'relayer-reset-date', reflect: true })
+  relayerResetDate: string = 'N/A'
+
+  private formatToken(amount: number) {
+    // naive formatting for display; consumers can override by slotting
+    return (amount / 10 ** this.decimals).toLocaleString(undefined, {
+      maximumFractionDigits: 6,
+    })
+  }
+
+  private onSelectChanged(e: Event) {
+    const value = (e.target as any).value as string | undefined
+    if (!value) return
+    if (this.controllerAddress && value === this.controllerAddress) {
+      const next: GasProvider = {
+        type: 'controller',
+        id: this.controllerAddress,
+      }
+      if (
+        !this.selectedGasProvider ||
+        this.selectedGasProvider.id !== next.id ||
+        this.selectedGasProvider.type !== next.type
+      ) {
+        this.selectedGasProvider = next
+        this.dispatchEvent(
+          new CustomEvent('on-gas-provider-change', {
+            detail: next,
+            bubbles: true,
+          })
+        )
+      }
+      return
+    }
+    // Map selection back to relayer by website/apiUrl fallback
+    const match = this.allRelayers.find(
+      (r) => r.website === value || r.apiUrl === value
+    )
+    if (match) {
+      const next: GasProvider = { type: 'relayer', id: match.id }
+      if (
+        !this.selectedGasProvider ||
+        this.selectedGasProvider.id !== next.id ||
+        this.selectedGasProvider.type !== next.type
+      ) {
+        this.selectedGasProvider = next
+        this.dispatchEvent(
+          new CustomEvent('on-gas-provider-change', {
+            detail: next,
+            bubbles: true,
+          })
+        )
+      }
+      return
+    }
+  }
+
+  private renderProgress(
+    totalAvailable: number,
+    used: number,
+    toBeUsed: number,
+    symbol: string,
+    hasError: boolean
+  ) {
+    const usedPercent = totalAvailable ? (used / totalAvailable) * 100 : 0
+    const toBeUsedPercent = totalAvailable
+      ? (toBeUsed / totalAvailable) * 100
+      : 0
+    const barOverHalf = usedPercent > 50
+    return html`<progress-view
+            class=${hasError ? 'error' : ''}
+            .data=${[
+              {
+                value: usedPercent,
+                color: 'var(--green-54)',
+                title: `${usedPercent}%`,
+              },
+              {
+                value: toBeUsedPercent,
+                color: 'var(--neutral-60)',
+                title: `${toBeUsedPercent}%`,
+              },
+            ]}
+            label-position=${barOverHalf ? 'left' : 'right'}
+            .label=${`${toBeUsed} / ${String(totalAvailable)} ${symbol}`}
+          >
+          </progress-view>`
+  }
+
+  private renderControllerProgress() {
+    return this.renderProgress(
+      this.balance,
+      0,
+      this.transactionFee,
+      this.symbol,
+      this.transactionFee > this.balance
+    )
+  }
+
+  private renderRelayerProgress() {
+    return this.renderProgress(
+      this.relayerAvailable,
+      this.relayerUsed,
+      this.relayerToBeUsed,
+      'M GAS',
+      this.relayerToBeUsed > this.relayerAvailable
+    )
+  }
+
+  private displayRelayerResetDate() {
+    const date = new Date(this.relayerResetDate)
+    return isNaN(date.getTime()) ? 'N/A' : date.toLocaleDateString()
+  }
+
+  override render() {
+    const formatted = this.formatToken(this.balance)
+
+    // Build select options: relayers first, then controller
+    const relayerOptions = this.allRelayers.map((r) => ({
+      value: r.website || r.apiUrl || `relayer:${r.id}`,
+      label: r.name,
+      disabled: false,
+    }))
+    const controllerOption = this.controllerAddress
+      ? [
+          {
+            value: this.controllerAddress,
+            label: this.controllerName
+              ? `${this.controllerName} (${formatted} ${this.symbol})`
+              : `UP Browser Extension (${formatted} ${this.symbol})`,
+            disabled: false,
+          },
+        ]
+      : []
+    const options = [...relayerOptions, ...controllerOption]
+
+    const selectedValue = this.selectedGasProvider
+      ? this.selectedGasProvider.type === 'controller'
+        ? this.controllerAddress
+        : (() => {
+            const r = this.allRelayers.find(
+              (x) => x.id === this.selectedGasProvider!.id
+            )
+            return (
+              r?.website ||
+              r?.apiUrl ||
+              `relayer:${this.selectedGasProvider!.id}`
+            )
+          })()
+      : undefined
+
+    return html`
+      <div class="w-full">
+        <custom-select .value=${selectedValue} .options=${options} @change=${this.onSelectChanged}></custom-select>
+          ${
+            this.selectedGasProvider
+              ? html`<div class="mt-2">
+          ${this.selectedGasProvider?.type === 'controller' ? this.renderControllerProgress() : this.renderRelayerProgress()}
+          ${
+            this.selectedGasProvider?.type === 'relayer'
+              ? html`<span class="text-[12px] text-neutral-60 mt-2 block">
+          Your total of ${this.relayerAvailable}M resets on ${this.displayRelayerResetDate()}.
+        </span>`
+              : html``
+          }
+        </div>`
+              : html``
+          }
+       
+      </div>
+    `
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'gas-provider-view': GasProviderView
+  }
+}

package/src/shared/icon-view.ts

@@ -0,0 +1,288 @@
+import { Task } from '@lit/task'
+import {
+  useAddressResolver,
+  useImageLoader,
+} from '@lukso/transaction-view-headless'
+import { html } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+import { CoreLitElement } from '../styles'
+import { safeCustomElement } from './safe-custom-element'
+
+// LUKSO web components are loaded dynamically via plugin
+
+/**
+ * Address data interface for display
+ */
+export interface AddressData {
+  address: string
+  name?: string
+  lsp4TokenName?: string
+  lsp4TokenSymbol?: string
+  baseAsset?: {
+    lsp4TokenName?: string
+    lsp4TokenSymbol?: string
+  }
+  profileImages?: any[]
+  avatar?: any[]
+  icon?: any[]
+  images?: any[]
+  __gqltype?: string
+  __identity?: string
+  identity?: string
+}
+
+/**
+ * Icon/Avatar display component for addresses
+ *
+ * Displays just the profile image/avatar for an address with proper styling.
+ * Supports both Universal Profiles and contract addresses.
+ *
+ * @example
+ * ```html
+ * <icon-view
+ *   address="0x1234..."
+ *   .resolved="${resolvedData}"
+ *   size="medium"
+ * ></icon-view>
+ * ```
+ */
+@safeCustomElement('icon-view')
+export class IconView extends CoreLitElement {
+  /**
+   * The address to display (required)
+   */
+  @property() address!: string
+
+  /**
+   * Resolved address data (profile, images, etc.)
+   */
+  @property({ type: Object }) resolved?: AddressData
+
+  /**
+   * Display size
+   */
+  @property() size: 'x-small' | 'small' | 'medium' | 'large' | '2x-large' =
+    'small'
+
+  /**
+   * Optional label to display above the icon
+   */
+  @property() label?: string
+
+  /**
+   * Whether to show the resolved display name below/beside the icon
+   */
+  @property({ type: Boolean, attribute: 'show-name' }) showName = true
+
+  /**
+   * Name placement relative to the icon: 'below' (stacked) or 'beside' (inline)
+   */
+  @property({ attribute: 'name-position' }) namePosition: 'below' | 'beside' =
+    'below'
+
+  /**
+   * Maximum width for the name label (pixels)
+   */
+  @property({ type: Number, attribute: 'max-width' }) maxWidth = 200
+
+  /**
+   * Whether to show small identicon badge on the avatar
+   */
+  @property({ type: Boolean, attribute: 'show-icon-identicon' })
+  showIconIdenticon = true
+
+  /**
+   * Whether to show small identicon badge on the label
+   */
+  @property({ type: Boolean, attribute: 'show-label-identicon' })
+  showLabelIdenticon = false
+
+  /**
+   * Force unresolved display (for testing)
+   */
+  @property({ type: Boolean, attribute: 'force-unresolved' }) forceUnresolved =
+    false
+
+  /**
+   * Property name to use for loading images (e.g., 'images', 'icons', 'profileImages')
+   * If not set, uses default image loading logic
+   */
+  @property({ type: String, attribute: 'image-hint' }) imageHint?: string
+
+  /**
+   * Index to use when loading from an image array (e.g., images[0])
+   * Only used when imageHint points to an array property
+   */
+  @property({ type: Number, attribute: 'image-index' }) imageIndex?: number
+
+  // Internal state
+  @state() private imageData?: { src: string }
+  @state() private isLoadingImage = false
+  @state() private isLoadingAddress = false
+
+  // Composables
+  private imageLoader = useImageLoader()
+  private addressResolver = useAddressResolver()
+
+  // Task for resolving address data
+  private addressTask = new Task(this, {
+    task: async ([address], { signal }) => {
+      if (!address) return null
+
+      this.isLoadingAddress = true
+      try {
+        // Pass the full compound address to resolver (e.g., "0x123...-0x456...")
+        const resolved = await this.addressResolver.resolveAddress(address)
+        this.requestUpdate() // Force re-render after resolution
+        return resolved
+      } catch (error) {
+        console.warn('❌ IconView: Failed to resolve address:', error)
+        return null
+      } finally {
+        this.isLoadingAddress = false
+      }
+    },
+    args: () => [this.address],
+  })
+
+  // Task for loading profile image
+  private imageTask = new Task(this, {
+    task: async ([resolved], { signal }) => {
+      if (!resolved) return null
+
+      this.isLoadingImage = true
+      try {
+        let image
+
+        // If imageHint is specified, load directly from that property
+        if (this.imageHint && (resolved as any)[this.imageHint]) {
+          const imageArray = (resolved as any)[this.imageHint]
+          if (Array.isArray(imageArray) && imageArray.length > 0) {
+            image = await this.imageLoader.loadImage(imageArray, {
+              width: this.getSizePixels(),
+              height: this.getSizePixels(),
+              dpr: window.devicePixelRatio || 1,
+              index: this.imageIndex,
+            })
+          }
+        } else {
+          // Use default profile image loading logic
+          image = await this.imageLoader.loadProfileImage(resolved, {
+            width: this.getSizePixels(),
+            height: this.getSizePixels(),
+            dpr: window.devicePixelRatio || 1,
+            index: this.imageIndex,
+          })
+        }
+
+        return image || this.imageLoader.getFallbackImage(resolved)
+      } catch (error) {
+        console.warn('Failed to load address image:', error)
+        return this.imageLoader.getFallbackImage(resolved || {})
+      } finally {
+        this.isLoadingImage = false
+      }
+    },
+    args: () => [this.addressTask.value],
+  })
+
+  /**
+   * Get pixel size for the current size setting
+   */
+  private getSizePixels(): number {
+    switch (this.size) {
+      case 'x-small':
+        return 16
+      case 'small':
+        return 24
+      case 'medium':
+        return 32
+      case 'large':
+        return 48
+      case '2x-large':
+        return 124
+      default:
+        return 24
+    }
+  }
+
+  /**
+   * Check if this is a contract address (shows square icon)
+   */
+  private get isContract(): boolean {
+    const resolved = this.addressTask.value
+    return resolved ? this.imageLoader.isContractAddress(resolved) : false
+  }
+
+  /**
+   * Handle icon click
+   */
+  private handleClick() {
+    this.dispatchEvent(
+      new CustomEvent('address-click', {
+        detail: {
+          address: this.address,
+          resolved: this.addressTask.value,
+        },
+        bubbles: true,
+      })
+    )
+  }
+
+  override render() {
+    const imageResult = this.imageTask.value
+
+    const containerClass = this.namePosition === 'beside' ? 'row' : 'column'
+    return html`
+      <div class="${
+        containerClass === 'row'
+          ? 'flex items-start gap-1'
+          : 'flex flex-col items-center gap-1'
+      }">
+        ${
+          this.label
+            ? html`<div class="text-[12px] text-neutral-60 font-medium">${
+                this.label
+              }</div>`
+            : ''
+        }
+
+        <div class="${
+          this.namePosition === 'beside'
+            ? 'inline-flex flex-row items-center gap-2'
+            : 'inline-flex flex-col items-center gap-1.5'
+        }">
+          <lukso-profile
+            size=${this.size}
+            profile-address=${this.address}
+            profile-url=${imageResult?.src || ''}
+            ?has-identicon=${this.showIconIdenticon}
+            ?is-square=${this.isContract}
+            class="inline-flex items-center cursor-pointer transition-transform duration-200 hover:scale-105"
+            @click=${this.handleClick}
+          ></lukso-profile>
+
+          ${
+            this.showName
+              ? html`
+                <address-view
+                  class="leading-none"
+                  address=${this.address}
+                  .showIdenticon=${this.showLabelIdenticon}
+                  size=${this.size}
+                  max-width=${this.maxWidth}
+                ></address-view>
+              `
+              : ''
+          }
+        </div>
+      </div>
+    `
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'icon-view': IconView
+  }
+}