@lukso/transaction-view-core 0.5.0 → 0.6.0-dev.3b54e9f

package/src/shared/notification-view.ts

@@ -1,5 +1,5 @@
 import { html } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
+import { 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="large" color="${this.getVariantColor()}"></lukso-icon>
+        <lukso-icon name="${this.renderIcon()}" size="small" 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-30"><slot>${this.message}</slot></div>
+          <div class="text-neutral-20"><slot>${this.message}</slot></div>
           ${
             this.acknowledgeable
               ? html`

package/src/shared/progress-view.ts

@@ -1,5 +1,5 @@
 import { html } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
+import { property } from 'lit/decorators.js'
 import { CoreLitElement } from '../styles'
 import { safeCustomElement } from './safe-custom-element'
 
@@ -42,15 +42,6 @@ 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 { customElement, property } from 'lit/decorators.js'
+import { property } from 'lit/decorators.js'
 import { CoreLitElement } from '../styles'
 import { safeCustomElement } from './safe-custom-element'
 

package/src/shared/signal-controller.ts

@@ -90,7 +90,9 @@ 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 { customElement, property, state } from 'lit/decorators.js'
+import { 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 && this.label.trim()) {
+      if (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 && this.label.trim() ? this.label : this.url
+      this.displayName = 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 { css, html } from 'lit'
+import { html, type TemplateResult } from 'lit'
 import { property, state } from 'lit/decorators.js'
 import { when } from 'lit/directives/when.js'
 import { safeCustomElement } from './safe-custom-element'
@@ -8,21 +8,7 @@ import { safeCustomElement } from './safe-custom-element'
 // Import LUKSO web components
 import './load-web-components'
 import { CoreLitElement } from '../styles'
-
-// 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}`
-}
+import { formatUnits } from '../utils'
 
 /**
  * Value display component
@@ -47,7 +33,7 @@ export class ValueView extends CoreLitElement {
    * The value to display (required)
    * Can be string, number, boolean, or bigint
    */
-  @property() value?: string | number | boolean | bigint | null
+  @property() value?: TemplateResult | string | number | boolean | bigint | null
 
   /**
    * The key name (used for special formatting logic)
@@ -98,7 +84,7 @@ export class ValueView extends CoreLitElement {
   /**
    * Optional label to show in card header
    */
-  @property() label?: string
+  @property() label?: string | TemplateResult
 
   /**
    * Maximum width for truncation
@@ -111,13 +97,6 @@ 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
 
@@ -219,15 +198,16 @@ 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'
@@ -270,7 +250,7 @@ export class ValueView extends CoreLitElement {
     try {
       if (typeof value === 'bigint') {
         numeric = formatUnits(value, effectiveDecimals)
-      } else if (typeof value === 'string' && !isNaN(Number(value))) {
+      } else if (typeof value === 'string' && !Number.isNaN(Number(value))) {
         const bigintValue = BigInt(value)
         numeric = formatUnits(bigintValue, effectiveDecimals)
       }
@@ -386,7 +366,7 @@ export class ValueView extends CoreLitElement {
 
       if (effectiveType === 'currency') {
         const { numeric, symbol } = this.getCurrencyParts()
-        if (this.label && this.label.trim() !== '') {
+        if (this.label) {
           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/dist/styles/main.css";
+@import "@lukso/web-components/tools/styles/main.css";

package/src/utils.test.ts

@@ -0,0 +1,47 @@
+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

@@ -0,0 +1,82 @@
+// 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
+  }
+}

package/src/vue-entry.ts

@@ -12,4 +12,3 @@ 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',
           }
         })