@lukso/transaction-view-core 0.5.0-dev.c21633f → 0.5.0

package/src/shared/notification-view.ts

@@ -1,5 +1,5 @@
 import { html } from 'lit'
-import { property, state } from 'lit/decorators.js'
+import { customElement, property, state } from 'lit/decorators.js'
 import { safeCustomElement } from './safe-custom-element'
 import './load-web-components'
 import { CoreLitElement } from '../styles'
@@ -58,7 +58,7 @@ export class NotificationView extends CoreLitElement {
     return html`
       <div class="grid grid-cols-[24px_1fr] items-start gap-3 p-3 rounded-xl text-neutral-10 leading-snug ${this.getVariantBackgroundClass()}">
         <div class="flex items-center justify-center text-[16px] text-neutral-20 self-center" aria-hidden="true">
-        <lukso-icon name="${this.renderIcon()}" size="small" color="${this.getVariantColor()}"></lukso-icon>
+        <lukso-icon name="${this.renderIcon()}" size="large" color="${this.getVariantColor()}"></lukso-icon>
         </div>
         <div class="text-[14px] flex flex-col gap-1.5">
           ${
@@ -66,7 +66,7 @@ export class NotificationView extends CoreLitElement {
               ? html`<div class="font-semibold text-neutral-20 paragraph-inter-14-semi-bold">${this.title}</div>`
               : ''
           }
-          <div class="text-neutral-20"><slot>${this.message}</slot></div>
+          <div class="text-neutral-30"><slot>${this.message}</slot></div>
           ${
             this.acknowledgeable
               ? html`

package/src/shared/progress-view.ts

@@ -1,5 +1,5 @@
 import { html } from 'lit'
-import { property } from 'lit/decorators.js'
+import { customElement, property } from 'lit/decorators.js'
 import { CoreLitElement } from '../styles'
 import { safeCustomElement } from './safe-custom-element'
 
@@ -42,6 +42,15 @@ export class ProgressView extends CoreLitElement {
     `
   }
 
+  private renderAddressLabel() {
+    return html`
+      <value-view
+        .value=${this.address}
+        .unit=${this.unit}
+      ></value-view>
+    `
+  }
+
   override render() {
     const isError = (this.className || '').split(/\s+/).includes('error')
     return html`

package/src/shared/scroll-to-bottom-button.ts

@@ -1,5 +1,5 @@
 import { html } from 'lit'
-import { property } from 'lit/decorators.js'
+import { customElement, property } from 'lit/decorators.js'
 import { CoreLitElement } from '../styles'
 import { safeCustomElement } from './safe-custom-element'
 

package/src/shared/signal-controller.ts

@@ -90,9 +90,7 @@ export class MultiSignalController implements ReactiveController {
   }
 
   hostDisconnected() {
-    this.unsubscribes.forEach((unsubscribe) => {
-      unsubscribe()
-    })
+    this.unsubscribes.forEach((unsubscribe) => unsubscribe())
     this.unsubscribes = []
   }
 

package/src/shared/transaction-view-controller.ts

@@ -255,7 +255,7 @@ export function useTransactionView(
 /**
  * Controller for working with transaction signals from the decoder
  */
-export class TransactionSignalController<_T = any>
+export class TransactionSignalController<T = any>
   implements ReactiveController
 {
   private host: ReactiveControllerHost

package/src/shared/url-view.ts

@@ -1,5 +1,5 @@
 import { html } from 'lit'
-import { property, state } from 'lit/decorators.js'
+import { customElement, property, state } from 'lit/decorators.js'
 import { safeCustomElement } from './safe-custom-element'
 import './load-web-components'
 import { CoreLitElement } from '../styles'
@@ -56,7 +56,7 @@ export class UrlView extends CoreLitElement {
         .replace(/-/g, ' ')
         .replace(/\b\w/g, (c) => c.toUpperCase())
 
-      if (this.label?.trim()) {
+      if (this.label && this.label.trim()) {
         this.displayName = this.label.trim()
       } else {
         this.displayName = hostnamePretty || this.url
@@ -64,7 +64,7 @@ export class UrlView extends CoreLitElement {
     } catch {
       this.favicon = undefined
       // Fallback to raw string if URL parse fails
-      this.displayName = this.label?.trim() ? this.label : this.url
+      this.displayName = this.label && this.label.trim() ? this.label : this.url
     }
   }
 

package/src/shared/value-view.ts

@@ -1,6 +1,6 @@
 import { Task } from '@lit/task'
 import { useAddressResolver } from '@lukso/transaction-view-headless'
-import { html, type TemplateResult } from 'lit'
+import { css, html } from 'lit'
 import { property, state } from 'lit/decorators.js'
 import { when } from 'lit/directives/when.js'
 import { safeCustomElement } from './safe-custom-element'
@@ -8,7 +8,21 @@ import { safeCustomElement } from './safe-custom-element'
 // Import LUKSO web components
 import './load-web-components'
 import { CoreLitElement } from '../styles'
-import { formatUnits } from '../utils'
+
+// Value formatting utilities
+function formatUnits(value: bigint, decimals = 18): string {
+  const divisor = 10n ** BigInt(decimals)
+  const quotient = value / divisor
+  const remainder = value % divisor
+
+  if (remainder === 0n) {
+    return quotient.toString()
+  }
+
+  const remainderStr = remainder.toString().padStart(decimals, '0')
+  const trimmed = remainderStr.replace(/0+$/, '')
+  return `${quotient}.${trimmed}`
+}
 
 /**
  * Value display component
@@ -33,7 +47,7 @@ export class ValueView extends CoreLitElement {
    * The value to display (required)
    * Can be string, number, boolean, or bigint
    */
-  @property() value?: TemplateResult | string | number | boolean | bigint | null
+  @property() value?: string | number | boolean | bigint | null
 
   /**
    * The key name (used for special formatting logic)
@@ -84,7 +98,7 @@ export class ValueView extends CoreLitElement {
   /**
    * Optional label to show in card header
    */
-  @property() label?: string | TemplateResult
+  @property() label?: string
 
   /**
    * Maximum width for truncation
@@ -97,6 +111,13 @@ export class ValueView extends CoreLitElement {
    */
   @property() address?: string
 
+  // Internal state for resolved metadata
+  @state() private resolvedMetadata?: {
+    symbol?: string
+    decimals?: number
+    name?: string
+  }
+
   // Tracks whether the component has any slotted content
   @state() private _hasSlotContent = false
 
@@ -198,16 +219,15 @@ export class ValueView extends CoreLitElement {
     if (value === undefined) return 'undefined'
 
     switch (effectiveType) {
-      case 'currency': {
+      case 'currency':
         const { numeric, symbol } = this.getCurrencyParts()
         return `${numeric} ${symbol}`
-      }
 
       case 'bigint':
         if (typeof value === 'bigint') {
-          return `${value.toString()}n`
+          return value.toString() + 'n'
         }
-        return `${String(value)}n`
+        return String(value) + 'n'
 
       case 'boolean':
         return value ? 'true' : 'false'
@@ -250,7 +270,7 @@ export class ValueView extends CoreLitElement {
     try {
       if (typeof value === 'bigint') {
         numeric = formatUnits(value, effectiveDecimals)
-      } else if (typeof value === 'string' && !Number.isNaN(Number(value))) {
+      } else if (typeof value === 'string' && !isNaN(Number(value))) {
         const bigintValue = BigInt(value)
         numeric = formatUnits(bigintValue, effectiveDecimals)
       }
@@ -366,7 +386,7 @@ export class ValueView extends CoreLitElement {
 
       if (effectiveType === 'currency') {
         const { numeric, symbol } = this.getCurrencyParts()
-        if (this.label) {
+        if (this.label && this.label.trim() !== '') {
           headerText = this.label
           contentTemplate = html`
               <span class="inline-block overflow-hidden text-ellipsis whitespace-nowrap min-w-0 ${this.getNumericClass()}">${numeric}</span>

package/src/styles/styles.css

@@ -1 +1 @@
-@import "@lukso/web-components/tools/styles/main.css";
+@import "@lukso/web-components/dist/styles/main.css";

package/src/vue-entry.ts

@@ -12,3 +12,4 @@ export type {
 // Also re-export the core functionality
 export * from './registry/index.js'
 export * from './shared/index.js'
+export * from './vue/index.js'

package/tsup.config.ts

@@ -1,6 +1,6 @@
-import { readFileSync } from 'node:fs'
-import { dirname, resolve } from 'node:path'
 import autoprefixer from 'autoprefixer'
+import { readFileSync } from 'fs'
+import { dirname, resolve } from 'path'
 import postcss from 'postcss'
 import postcssImport from 'postcss-import'
 import tailwindcss from 'tailwindcss'
@@ -37,7 +37,7 @@ export default defineConfig({
           // Return with a special virtual path marker that the onLoad hook can recognize
           // Use 'file' namespace to ensure esbuild calls our onLoad handler
           return {
-            path: `${resolvedPath}?__raw__`,
+            path: resolvedPath + '?__raw__',
             namespace: 'file',
           }
         })

package/.turbo/turbo-typecheck.log

@@ -1,4 +0,0 @@
-
-> @lukso/transaction-view-core@0.5.0 typecheck /home/runner/work/service-auth-simple/service-auth-simple/packages/transaction-view-core
-> tsc --noEmit
-

package/src/utils.test.ts

@@ -1,47 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import { formatUnits, parseBigInt } from './utils.js'
-
-describe('formatUnits', () => {
-  it('returns integer string when remainder is zero', () => {
-    expect(formatUnits(1000000000000000000n)).toBe('1')
-    expect(formatUnits(5000n, 3)).toBe('5')
-  })
-
-  it('formats values with fractional part respecting decimals', () => {
-    expect(formatUnits(123000000000000000n)).toBe('0.123')
-    expect(formatUnits(987654321n, 6)).toBe('987.654321')
-  })
-
-  it('trims trailing zeros in fractional part', () => {
-    expect(formatUnits(120n, 2)).toBe('1.2')
-    expect(formatUnits(1001000n, 6)).toBe('1.001')
-  })
-
-  it('handles zero value', () => {
-    expect(formatUnits(0n)).toBe('0')
-  })
-})
-
-describe('parseBigInt', () => {
-  it('parses decimal and hex strings with optional suffix', () => {
-    expect(parseBigInt('42')).toBe(42n)
-    expect(parseBigInt('0x10')).toBe(16n)
-    expect(parseBigInt('21n')).toBe(21n)
-    expect(parseBigInt('  0xFFn  ')).toBe(255n)
-  })
-
-  it('returns bigint directly or from integer numbers', () => {
-    const value = 123n
-    expect(parseBigInt(value)).toBe(value)
-    expect(parseBigInt(9007199254740991)).toBe(9007199254740991n)
-  })
-
-  it('returns undefined for invalid inputs', () => {
-    expect(parseBigInt('')).toBeUndefined()
-    expect(parseBigInt('1.5')).toBeUndefined()
-    expect(parseBigInt('0xG')).toBeUndefined()
-    expect(parseBigInt(1.1)).toBeUndefined()
-    expect(parseBigInt(null)).toBeUndefined()
-    expect(parseBigInt(undefined)).toBeUndefined()
-  })
-})

package/src/utils.ts

@@ -1,82 +0,0 @@
-// Value formatting utilities
-/**
- * Convert a token amount from base units (bigint) to a decimal string.
- *
- * - Handles arbitrary `decimals` without floating point precision loss.
- * - Trims trailing zeros in the fractional part.
- * - Returns only the integer part when remainder is zero.
- *
- * @param value - The amount in base units as a bigint (e.g., wei for ETH).
- * @param decimals - Number of decimal places the token uses (default 18).
- * @returns A human-readable decimal string.
- *
- * @example
- * // 1 ether in wei
- * formatUnits(1000000000000000000n) // '1'
- *
- * @example
- * // 1.23 tokens with 2 decimals
- * formatUnits(123n, 2) // '1.23'
- *
- * @example
- * // No remainder: return integer part only
- * formatUnits(2000000000000000000n) // '2'
- */
-export function formatUnits(value: bigint, decimals = 18): string {
-  const divisor = 10n ** BigInt(decimals)
-  const quotient = value / divisor
-  const remainder = value % divisor
-
-  if (remainder === 0n) {
-    return quotient.toString()
-  }
-
-  const remainderStr = remainder.toString().padStart(decimals, '0')
-  const trimmed = remainderStr.replace(/0+$/, '')
-  return `${quotient}.${trimmed}`
-}
-
-function isBigIntString(str: string): boolean {
-  const trimmed = str.trim()
-  if (trimmed.endsWith('n'))
-    return /^[0-9]+n$/.test(trimmed) || /^0x[0-9a-fA-F]+n$/.test(trimmed)
-  return /^[0-9]+$/.test(trimmed) || /^0x[0-9a-fA-F]+$/.test(trimmed)
-}
-
-/**
- * Parse loose bigint inputs coming from attributes, JSON, or user input.
- *
- * - Accepts bigint literals (`123n`), decimal/hex strings, and integers.
- * - Trims whitespace and optional trailing `n` suffix.
- * - Returns `undefined` for invalid formats (floats, empty strings, non-numeric text).
- *
- * @param value - Source value to parse (string | number | bigint | null | undefined).
- * @returns BigInt when parsing succeeds, otherwise `undefined`.
- *
- * @example
- * parseBigInt('42') // 42n
- * @example
- * parseBigInt('0x10n') // 16n
- * @example
- * parseBigInt(1000n) // 1000n (passthrough)
- * @example
- * parseBigInt('1.5') // undefined (decimals not allowed)
- */
-export function parseBigInt(
-  value: string | number | bigint | null | undefined
-): bigint | undefined {
-  if (!value) return undefined
-  if (typeof value === 'bigint') return value
-  if (typeof value === 'number') {
-    if (!Number.isInteger(value)) return undefined
-    return BigInt(value)
-  }
-  const trimmed = value.trim()
-  const cleaned = trimmed.endsWith('n') ? trimmed.slice(0, -1) : trimmed
-  if (!isBigIntString(cleaned)) return undefined
-  try {
-    return BigInt(cleaned)
-  } catch {
-    return undefined
-  }
-}