@1001-digital/components 0.0.1 → 0.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1001-digital/components",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "type": "module",
   "sideEffects": [
     "*.css"
@@ -13,16 +13,12 @@
     "src"
   ],
   "peerDependencies": {
-    "@wagmi/core": ">=3.0.0",
-    "@wagmi/vue": ">=0.4.0",
+    "@wagmi/vue": ">=0.5.0",
     "viem": ">=2.0.0",
     "vue": "^3.5.0",
-    "@1001-digital/styles": "^0.0.1"
+    "@1001-digital/styles": "^0.0.2"
   },
   "peerDependenciesMeta": {
-    "@wagmi/core": {
-      "optional": true
-    },
     "@wagmi/vue": {
       "optional": true
     },

package/src/base/components/Dialog.vue

@@ -250,9 +250,10 @@ const onClickOutside = () => {
     > footer {
       display: flex;
       gap: var(--spacer);
-      justify-content: flex-end;
+      justify-content: safe flex-end;
       padding: var(--spacer);
       border-block-start: var(--border);
+      overflow-x: auto;
 
       &:empty {
         display: none;

package/src/base/components/Toasts.vue

@@ -13,6 +13,11 @@
       @update:open="(open) => !open && onClose(toast.id)"
     >
       <ToastTitle class="toast-title">
+        <span
+          v-if="toast.loading"
+          class="toast-spinner"
+          aria-hidden="true"
+        />
         {{ toast.title }}
       </ToastTitle>
       <ToastClose
@@ -37,7 +42,7 @@
           class="left"
         >
           <Button
-            class="small"
+            class="small tertiary"
             @click="toast.action!.onClick()"
           >
             {{ toast.action.label }}
@@ -211,6 +216,7 @@ const onClose = (id: string) => {
     .toast-title {
       display: flex;
       align-items: center;
+      gap: var(--spacer-sm);
       block-size: calc(var(--spacer) * 2);
       box-shadow: var(--border-shadow);
       padding-inline-start: var(--ui-padding-inline);
@@ -222,6 +228,16 @@ const onClose = (id: string) => {
       margin: 0;
     }
 
+    .toast-spinner {
+      width: var(--ui-font-size);
+      height: var(--ui-font-size);
+      border: 2px solid currentColor;
+      border-top-color: transparent;
+      border-radius: 50%;
+      animation: spin var(--speed-slow, 1s) linear infinite;
+      flex-shrink: 0;
+    }
+
     > section {
       padding: var(--ui-padding-inline);
       display: grid;
@@ -250,5 +266,11 @@ const onClose = (id: string) => {
       }
     }
   }
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
 }
 </style>

package/src/base/composables/toast.ts

@@ -14,6 +14,7 @@ export interface Toast {
   variant?: ToastVariant
   action?: ToastAction
   duration?: number
+  loading?: boolean
 }
 
 const toasts = ref<Toast[]>([])

package/src/evm/components/EvmTransactionFlow.vue

@@ -22,13 +22,7 @@
       :txt="text.lead[step] || ''"
     />
 
-    <p
-      v-if="
-        step !== 'requesting' &&
-        step !== 'error' &&
-        text.lead[step]
-      "
-    >
+    <p v-if="step !== 'requesting' && step !== 'error' && text.lead[step]">
       {{ text.lead[step] }}
     </p>
 
@@ -203,9 +197,7 @@ onBeforeUnmount(() => {
 })
 
 const canDismiss = computed(
-  () =>
-    props.dismissable &&
-    step.value !== 'requesting',
+  () => props.dismissable && step.value !== 'requesting',
 )
 
 const initializeRequest = async (request = cachedRequest.value) => {
@@ -245,6 +237,7 @@ const initializeRequest = async (request = cachedRequest.value) => {
     title: text.value.title.waiting,
     description: text.value.lead.waiting,
     duration: Infinity,
+    loading: true,
     action: {
       label: 'View on Block Explorer',
       onClick: () => window.open(link, '_blank'),
@@ -264,6 +257,7 @@ const initializeRequest = async (request = cachedRequest.value) => {
       variant: 'success',
       title: text.value.title.complete,
       description: text.value.lead.complete,
+      loading: false,
       ...(props.autoCloseSuccess && { duration: props.delayAutoclose }),
     })
   } catch (e: unknown) {
@@ -277,6 +271,7 @@ const initializeRequest = async (request = cachedRequest.value) => {
         variant: 'error',
         title: text.value.title.error,
         description: err.shortMessage || 'Transaction failed.',
+        loading: false,
       })
     }
     console.log(e)

package/src/evm/composables/ens.ts

@@ -0,0 +1,107 @@
+import { getPublicClient } from '@wagmi/core'
+import type { Config } from '@wagmi/vue'
+import {
+  ensCache,
+  fetchEnsFromIndexer,
+  fetchEnsFromChain,
+  ENS_KEYS_AVATAR,
+  ENS_KEYS_PROFILE,
+} from '../utils/ens'
+import type { EnsProfile } from '../utils/ens'
+
+type EnsMode = 'indexer' | 'chain'
+
+interface UseEnsOptions {
+  mode?: MaybeRefOrGetter<EnsMode | undefined>
+}
+
+interface EnsRuntimeConfig {
+  ens?: { indexer1?: string; indexer2?: string; indexer3?: string }
+}
+
+function getIndexerUrls(config: EnsRuntimeConfig): string[] {
+  if (!config.ens) return []
+  return [config.ens.indexer1, config.ens.indexer2, config.ens.indexer3].filter(
+    Boolean,
+  ) as string[]
+}
+
+async function resolve(
+  identifier: string,
+  strategies: EnsMode[],
+  indexerUrls: string[],
+  wagmi: Config,
+  chainKeys: string[],
+): Promise<EnsProfile> {
+  for (const strategy of strategies) {
+    try {
+      if (strategy === 'indexer') {
+        if (!indexerUrls.length) continue
+        return await fetchEnsFromIndexer(identifier, indexerUrls)
+      }
+
+      if (strategy === 'chain') {
+        const client = getPublicClient(wagmi, { chainId: 1 })
+        if (!client) continue
+        return await fetchEnsFromChain(identifier, client, chainKeys)
+      }
+    } catch {
+      continue
+    }
+  }
+
+  return { address: identifier, ens: null, data: null }
+}
+
+function useEnsBase(
+  tier: string,
+  identifier: MaybeRefOrGetter<string | undefined>,
+  chainKeys: string[],
+  options: UseEnsOptions = {},
+) {
+  const { $wagmi } = useNuxtApp()
+  const appConfig = useAppConfig()
+  const runtimeConfig = useRuntimeConfig()
+
+  const mode = computed<EnsMode>(
+    () => toValue(options.mode) || appConfig.evm?.ens?.mode || 'indexer',
+  )
+  const indexerUrls = computed(() =>
+    getIndexerUrls(runtimeConfig.public.evm as EnsRuntimeConfig),
+  )
+  const cacheKey = computed(() => `ens-${tier}-${toValue(identifier)}`)
+
+  return useAsyncData(
+    cacheKey.value,
+    async () => {
+      const id = toValue(identifier)
+      if (!id) return null
+
+      const strategies: EnsMode[] =
+        mode.value === 'indexer' ? ['indexer', 'chain'] : ['chain', 'indexer']
+
+      return ensCache.fetch(cacheKey.value, () =>
+        resolve(id, strategies, indexerUrls.value, $wagmi as Config, chainKeys),
+      )
+    },
+    {
+      watch: [() => toValue(identifier)],
+      getCachedData: () => ensCache.get(cacheKey.value) ?? undefined,
+    },
+  )
+}
+
+export const useEns = (
+  identifier: MaybeRefOrGetter<string | undefined>,
+  options?: UseEnsOptions,
+) => useEnsBase('resolve', identifier, [], options)
+
+export const useEnsWithAvatar = (
+  identifier: MaybeRefOrGetter<string | undefined>,
+  options?: UseEnsOptions,
+) => useEnsBase('avatar', identifier, [...ENS_KEYS_AVATAR], options)
+
+export const useEnsProfile = (
+  identifier: MaybeRefOrGetter<string | undefined>,
+  options?: UseEnsOptions,
+) => useEnsBase('profile', identifier, [...ENS_KEYS_PROFILE], options)

package/src/evm/composables/gasPrice.ts

@@ -0,0 +1,37 @@
+import { ref, computed, watch, type Ref, type WatchStopHandle } from 'vue'
+import { formatEther, formatGwei } from 'viem'
+import { getGasPrice } from '@wagmi/core'
+import { useConfig, useBlockNumber } from '@wagmi/vue'
+
+let priceWatcher: WatchStopHandle | null = null
+const price: Ref<bigint> = ref(0n)
+
+export const useGasPrice = () => {
+  const config = useConfig()
+  const { data: blockNumber } = useBlockNumber()
+
+  const updatePrice = async () => {
+    price.value = await getGasPrice(config)
+  }
+
+  if (!priceWatcher) {
+    updatePrice()
+    priceWatcher = watch(blockNumber, () => updatePrice())
+  }
+
+  const unitPrice = computed(() => ({
+    wei: price.value,
+    gwei: formatGwei(price.value),
+    eth: formatEther(price.value),
+
+    formatted: {
+      gwei:
+        price.value > 2_000_000_000_000n
+          ? Math.round(parseFloat(formatGwei(price.value)))
+          : parseFloat(formatGwei(price.value)).toFixed(1),
+      eth: formatEther(price.value),
+    },
+  }))
+
+  return unitPrice
+}

package/src/evm/composables/priceFeed.ts

@@ -0,0 +1,116 @@
+import { reactive, computed } from 'vue'
+import { readContract } from '@wagmi/core'
+import { useConfig } from '@wagmi/vue'
+import { parseJSON, stringifyJSON, formatPrice } from '../utils/price'
+import { nowInSeconds } from '../../base/utils/time'
+
+const CHAINLINK_ETH_USD_ABI = [
+  {
+    inputs: [],
+    name: 'latestRoundData',
+    outputs: [
+      { internalType: 'uint80', name: 'roundId', type: 'uint80' },
+      { internalType: 'int256', name: 'answer', type: 'int256' },
+      { internalType: 'uint256', name: 'startedAt', type: 'uint256' },
+      { internalType: 'uint256', name: 'updatedAt', type: 'uint256' },
+      { internalType: 'uint80', name: 'answeredInRound', type: 'uint80' },
+    ],
+    stateMutability: 'view',
+    type: 'function',
+  },
+] as const
+
+const CHAINLINK_ETH_USD = '0x5f4eC3Df9cbd43714FE2740f5E3616155c5b8419'
+const STORAGE_KEY = 'evm:price-feed'
+const CACHE_TTL = 3_600 // 1 hour in seconds
+
+interface PriceFeedState {
+  ethUSDRaw: bigint | null
+  lastUpdated: number
+}
+
+const state = reactive<PriceFeedState>({
+  ethUSDRaw: null,
+  lastUpdated: 0,
+})
+
+function loadFromStorage() {
+  if (typeof window === 'undefined') return
+
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY)
+    if (!stored) return
+
+    const parsed = parseJSON(stored) as PriceFeedState
+    if (parsed.ethUSDRaw) state.ethUSDRaw = parsed.ethUSDRaw
+    if (parsed.lastUpdated) state.lastUpdated = parsed.lastUpdated
+  } catch {
+    // Ignore corrupted storage
+  }
+}
+
+function saveToStorage() {
+  if (typeof window === 'undefined') return
+
+  try {
+    localStorage.setItem(
+      STORAGE_KEY,
+      stringifyJSON({
+        ethUSDRaw: state.ethUSDRaw,
+        lastUpdated: state.lastUpdated,
+      }),
+    )
+  } catch {
+    // Ignore storage errors
+  }
+}
+
+export const usePriceFeed = () => {
+  const config = useConfig()
+
+  // Load cached data on first use
+  if (!state.lastUpdated) loadFromStorage()
+
+  const ethUSD = computed(() =>
+    state.ethUSDRaw ? state.ethUSDRaw / BigInt(1e8) : 0n,
+  )
+  const ethUSC = computed(() =>
+    state.ethUSDRaw ? state.ethUSDRaw / BigInt(1e6) : 0n,
+  )
+  const ethUSDFormatted = computed(() =>
+    formatPrice(Number(ethUSC.value) / 100, 2),
+  )
+
+  const weiToUSD = (wei: bigint) => {
+    const cents = (wei * (state.ethUSDRaw || 0n)) / 10n ** 18n / 10n ** 6n
+    return formatPrice(Number(cents) / 100, 2)
+  }
+
+  async function fetchPrice() {
+    if (nowInSeconds() - state.lastUpdated < CACHE_TTL) return
+
+    try {
+      const [, answer] = await readContract(config, {
+        address: CHAINLINK_ETH_USD,
+        abi: CHAINLINK_ETH_USD_ABI,
+        functionName: 'latestRoundData',
+        chainId: 1,
+      })
+
+      state.ethUSDRaw = answer
+      state.lastUpdated = nowInSeconds()
+      saveToStorage()
+    } catch (error) {
+      console.warn('Error fetching ETH/USD price:', error)
+    }
+  }
+
+  return {
+    ethUSDRaw: computed(() => state.ethUSDRaw),
+    ethUSD,
+    ethUSC,
+    ethUSDFormatted,
+    weiToUSD,
+    fetchPrice,
+  }
+}

package/src/evm/index.ts

@@ -3,9 +3,19 @@ export { EvmConfigKey, defaultEvmConfig, useEvmConfig } from './config'
 export type { EvmConfig, EvmChainConfig } from './config'
 
 // Utils
+export { createCache } from './utils/cache'
 export { shortAddress } from './utils/addresses'
 export { resolveChain } from './utils/chains'
 export { formatETH } from './utils/format-eth'
+export {
+  ensCache,
+  fetchEnsFromIndexer,
+  fetchEnsFromChain,
+  ENS_KEYS_AVATAR,
+  ENS_KEYS_PROFILE,
+} from './utils/ens'
+export type { EnsProfile } from './utils/ens'
+export { stringifyJSON, parseJSON, formatPrice } from './utils/price'
 
 // Composables
 export { useBaseURL } from './composables/base'
@@ -15,6 +25,9 @@ export {
   useBlockExplorer,
   useEnsureChainIdCheck,
 } from './composables/chainId'
+export { useEns, useEnsWithAvatar, useEnsProfile } from './composables/ens'
+export { useGasPrice } from './composables/gasPrice'
+export { usePriceFeed } from './composables/priceFeed'
 
 // Components
 export { default as EvmAccount } from './components/EvmAccount.vue'

package/src/evm/utils/cache.ts

@@ -0,0 +1,59 @@
+interface CacheEntry<T> {
+  data: T
+  expiresAt: number
+}
+
+export function createCache<T>(ttl: number, max: number) {
+  const entries = new Map<string, CacheEntry<T>>()
+  const pending = new Map<string, Promise<T>>()
+
+  function prune() {
+    const now = Date.now()
+    for (const [key, entry] of entries) {
+      if (entry.expiresAt <= now) entries.delete(key)
+    }
+
+    if (entries.size > max) {
+      const excess = entries.size - max
+      const keys = entries.keys()
+      for (let i = 0; i < excess; i++) {
+        entries.delete(keys.next().value!)
+      }
+    }
+  }
+
+  function get(key: string): T | undefined {
+    const entry = entries.get(key)
+    if (!entry) return undefined
+    if (entry.expiresAt <= Date.now()) {
+      entries.delete(key)
+      return undefined
+    }
+    return entry.data
+  }
+
+  function fetch(key: string, fn: () => Promise<T>): Promise<T> {
+    const cached = get(key)
+    if (cached) return Promise.resolve(cached)
+
+    const inflight = pending.get(key)
+    if (inflight) return inflight
+
+    const promise = fn()
+      .then((result) => {
+        entries.set(key, { data: result, expiresAt: Date.now() + ttl })
+        pending.delete(key)
+        if (entries.size > max) prune()
+        return result
+      })
+      .catch((err) => {
+        pending.delete(key)
+        throw err
+      })
+
+    pending.set(key, promise)
+    return promise
+  }
+
+  return { get, fetch }
+}

package/src/evm/utils/ens.ts

@@ -0,0 +1,114 @@
+import { isAddress, type PublicClient, type Address } from 'viem'
+import { normalize } from 'viem/ens'
+import { createCache } from './cache'
+
+// --- Types ---
+
+export interface EnsProfile {
+  address: string
+  ens: string | null
+  data: {
+    avatar: string
+    header: string
+    description: string
+    links: {
+      url: string
+      email: string
+      twitter: string
+      github: string
+    }
+  } | null
+}
+
+// --- Text record keys ---
+
+const ALL_KEYS = [
+  'avatar',
+  'header',
+  'description',
+  'url',
+  'email',
+  'com.twitter',
+  'com.github',
+] as const
+
+export const ENS_KEYS_AVATAR = ['avatar'] as const
+export const ENS_KEYS_PROFILE = [...ALL_KEYS]
+
+// --- Cache ---
+
+export const ensCache = createCache<EnsProfile>(5 * 60 * 1000, 500)
+
+// --- Fetchers ---
+
+export async function fetchEnsFromIndexer(
+  identifier: string,
+  urls: string[],
+): Promise<EnsProfile> {
+  let lastError: Error | undefined
+
+  for (const url of urls) {
+    try {
+      return await $fetch<EnsProfile>(`${url}/${identifier}`)
+    } catch (err) {
+      lastError = err as Error
+    }
+  }
+
+  throw lastError ?? new Error('No indexer URLs provided')
+}
+
+export async function fetchEnsFromChain(
+  identifier: string,
+  client: PublicClient,
+  keys: string[] = [],
+): Promise<EnsProfile> {
+  const isAddr = isAddress(identifier)
+
+  let address: string
+  let ens: string | null
+
+  if (isAddr) {
+    address = identifier
+    ens = (await client.getEnsName({ address: identifier as Address })) ?? null
+  } else {
+    ens = identifier
+    const resolved = await client.getEnsAddress({ name: normalize(identifier) })
+    if (!resolved) return { address: '', ens, data: null }
+    address = resolved
+  }
+
+  if (!ens || !keys.length) return { address, ens: ens ?? null, data: null }
+
+  const name = normalize(ens)
+  const results = await Promise.all(
+    keys.map((key) => client.getEnsText({ name, key }).catch(() => null)),
+  )
+
+  return {
+    address,
+    ens,
+    data: toProfileData(
+      keys,
+      results.map((r) => r || ''),
+    ),
+  }
+}
+
+// --- Helpers ---
+
+function toProfileData(keys: string[], results: string[]): EnsProfile['data'] {
+  const get = (key: string) => results[keys.indexOf(key)] || ''
+
+  return {
+    avatar: get('avatar'),
+    header: get('header'),
+    description: get('description'),
+    links: {
+      url: get('url'),
+      email: get('email'),
+      twitter: get('com.twitter'),
+      github: get('com.github'),
+    },
+  }
+}

package/src/evm/utils/price.ts

@@ -0,0 +1,17 @@
+const replacer = (_: string, value: unknown) => {
+  if (typeof value === 'bigint') return value.toString() + 'n'
+  return value
+}
+
+const reviver = (_: string, value: unknown) => {
+  if (typeof value === 'string' && /^\d+n$/.test(value))
+    return BigInt(value.slice(0, -1))
+  return value
+}
+
+export const stringifyJSON = (obj: unknown): string =>
+  JSON.stringify(obj, replacer)
+export const parseJSON = (json: string): unknown => JSON.parse(json, reviver)
+
+export const formatPrice = (num: number, digits: number = 2) =>
+  num?.toLocaleString('en-US', { maximumFractionDigits: digits })