@1001-digital/components 1.2.2 → 1.3.0

package/src/evm/composables/ens.ts

@@ -1,113 +0,0 @@
-import { ref, computed, watchEffect, toValue, type MaybeRefOrGetter, type Ref } from 'vue'
-import { getPublicClient } from '@wagmi/core'
-import { useConfig, type Config } from '@wagmi/vue'
-import { useEvmConfig } from '../config'
-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>
-}
-
-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 config = useConfig()
-  const evmConfig = useEvmConfig()
-
-  const mode = computed<EnsMode>(
-    () => toValue(options.mode) || evmConfig.ens?.mode || 'indexer',
-  )
-  const indexerUrls = computed(() => evmConfig.ens?.indexerUrls || [])
-  const cacheKey = computed(() => `ens-${tier}-${toValue(identifier)}`)
-
-  const data: Ref<EnsProfile | null | undefined> = ref(
-    ensCache.get(cacheKey.value) ?? undefined,
-  )
-  const pending = ref(false)
-
-  watchEffect(async () => {
-    const id = toValue(identifier)
-    if (!id) {
-      data.value = null
-      pending.value = false
-      return
-    }
-
-    const cached = ensCache.get(cacheKey.value)
-    if (cached) {
-      data.value = cached
-      pending.value = false
-      return
-    }
-
-    const strategies: EnsMode[] =
-      mode.value === 'indexer' ? ['indexer', 'chain'] : ['chain', 'indexer']
-
-    pending.value = true
-    try {
-      data.value = await ensCache.fetch(cacheKey.value, () =>
-        resolve(id, strategies, indexerUrls.value, config, chainKeys),
-      )
-    } catch {
-      data.value = null
-    } finally {
-      pending.value = false
-    }
-  })
-
-  return { data, pending }
-}
-
-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

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

@@ -1,116 +0,0 @@
-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/composables/siwe.ts

@@ -1,89 +0,0 @@
-import { ref, readonly } from 'vue'
-import { signMessage } from '@wagmi/core'
-import { useConfig, useConnection } from '@wagmi/vue'
-import type { Config } from '@wagmi/vue'
-import { createSiweMessage, type SiweMessageParams } from '../utils/siwe'
-
-export interface SiweSession {
-  address: `0x${string}`
-  chainId: number
-}
-
-export interface UseSiweOptions {
-  getNonce: () => Promise<string>
-  verify: (message: string, signature: string) => Promise<boolean>
-  domain?: string
-  uri?: string
-  statement?: string
-  expirationTime?: string
-  requestId?: string
-  resources?: string[]
-}
-
-const _isAuthenticated = ref(false)
-const _session = ref<SiweSession | null>(null)
-
-export const useSiwe = () => {
-  const config = useConfig()
-  const { address, chainId } = useConnection()
-
-  const setSession = (session: SiweSession) => {
-    _isAuthenticated.value = true
-    _session.value = session
-  }
-
-  const clearSession = () => {
-    _isAuthenticated.value = false
-    _session.value = null
-  }
-
-  const signIn = async (options: UseSiweOptions) => {
-    const currentAddress = address.value
-    const currentChainId = chainId.value
-
-    if (!currentAddress || !currentChainId) {
-      throw new Error('Wallet not connected')
-    }
-
-    const nonce = await options.getNonce()
-
-    const messageParams: SiweMessageParams = {
-      domain: options.domain || window.location.host,
-      address: currentAddress,
-      uri: options.uri || window.location.origin,
-      chainId: currentChainId,
-      nonce,
-      statement: options.statement,
-      expirationTime: options.expirationTime,
-      requestId: options.requestId,
-      resources: options.resources,
-    }
-
-    const message = createSiweMessage(messageParams)
-    const signature = await signMessage(config as Config, { message })
-
-    const verified = await options.verify(message, signature)
-
-    if (!verified) {
-      throw new Error('Signature verification failed')
-    }
-
-    setSession({
-      address: currentAddress,
-      chainId: currentChainId,
-    })
-  }
-
-  const signOut = () => {
-    clearSession()
-  }
-
-  return {
-    isAuthenticated: readonly(_isAuthenticated),
-    session: readonly(_session),
-    signIn,
-    signOut,
-    setSession,
-    clearSession,
-  }
-}

package/src/evm/composables/uri.ts

@@ -1,12 +0,0 @@
-import { useEvmConfig } from '../config'
-import { resolveUri } from '../utils/uri'
-
-export const useResolveUri = () => {
-  const evmConfig = useEvmConfig()
-
-  return (uri?: string) =>
-    resolveUri(uri, {
-      ipfsGateway: evmConfig.ipfsGateway,
-      arweaveGateway: evmConfig.arweaveGateway,
-    })
-}

package/src/evm/composables/walletExplorer.ts

@@ -1,130 +0,0 @@
-import { ref, computed } from 'vue'
-import { useEvmConfig } from '../config'
-
-const EXPLORER_API = 'https://explorer-api.walletconnect.com/v3'
-const RECENT_KEY = 'evm:recent-wallets'
-const PAGE_SIZE = 40
-
-export interface ExplorerWallet {
-  id: string
-  name: string
-  image_id: string
-  homepage: string
-  mobile: { native: string; universal: string }
-  desktop: { native: string; universal: string }
-  injected: { namespace: string; injected_id: string }[] | null
-}
-
-export function useWalletExplorer() {
-  const config = useEvmConfig()
-  const projectId = computed(() => config.walletConnectProjectId || '')
-
-  const wallets = ref<ExplorerWallet[]>([])
-  const searchResults = ref<ExplorerWallet[]>([])
-  const totalCount = ref(0)
-  const page = ref(0)
-  const loading = ref(false)
-  const searching = ref(false)
-  const recentIds = ref<string[]>(loadRecent())
-
-  const recentWallets = computed(() =>
-    recentIds.value
-      .map(id => wallets.value.find(w => w.id === id))
-      .filter((w): w is ExplorerWallet => !!w)
-  )
-
-  const hasMore = computed(() => wallets.value.length < totalCount.value)
-
-  function imageUrl(wallet: ExplorerWallet) {
-    return `${EXPLORER_API}/logo/md/${wallet.image_id}?projectId=${projectId.value}`
-  }
-
-  function walletHref(wallet: ExplorerWallet, uri: string) {
-    const encoded = encodeURIComponent(uri)
-
-    const universal = wallet.mobile?.universal
-    if (universal) {
-      const base = universal.endsWith('/') ? universal : universal + '/'
-      return `${base}wc?uri=${encoded}`
-    }
-
-    const native = wallet.mobile?.native
-    if (native) {
-      return `${native}wc?uri=${encoded}`
-    }
-
-    return null
-  }
-
-  async function fetchNextPage() {
-    if (!projectId.value || loading.value) return
-    loading.value = true
-    const nextPage = page.value + 1
-    try {
-      const res = await fetch(
-        `${EXPLORER_API}/wallets?projectId=${projectId.value}&entries=${PAGE_SIZE}&page=${nextPage}&sdks=sign_v2`
-      )
-      const data = await res.json()
-      const fetched = Object.values(data.listings || {}) as ExplorerWallet[]
-      wallets.value = nextPage === 1 ? fetched : [...wallets.value, ...fetched]
-      totalCount.value = data.total || 0
-      page.value = nextPage
-    } catch (e) {
-      console.error('Failed to fetch wallets:', e)
-    } finally {
-      loading.value = false
-    }
-  }
-
-  async function search(query: string) {
-    if (!projectId.value || !query || query.length < 2) {
-      searchResults.value = []
-      return
-    }
-    searching.value = true
-    try {
-      const res = await fetch(
-        `${EXPLORER_API}/wallets?projectId=${projectId.value}&entries=${PAGE_SIZE}&page=1&search=${encodeURIComponent(query)}&sdks=sign_v2`
-      )
-      const data = await res.json()
-      searchResults.value = Object.values(data.listings || {})
-    } catch (e) {
-      console.error('Failed to search wallets:', e)
-    } finally {
-      searching.value = false
-    }
-  }
-
-  function loadRecent(): string[] {
-    try {
-      return JSON.parse(localStorage.getItem(RECENT_KEY) || '[]')
-    } catch {
-      return []
-    }
-  }
-
-  function addRecent(walletId: string) {
-    const ids = recentIds.value.filter(id => id !== walletId)
-    ids.unshift(walletId)
-    recentIds.value = ids.slice(0, 3)
-    try {
-      localStorage.setItem(RECENT_KEY, JSON.stringify(recentIds.value))
-    } catch {}
-  }
-
-  return {
-    wallets,
-    searchResults,
-    totalCount,
-    page,
-    loading,
-    searching,
-    recentWallets,
-    hasMore,
-    imageUrl,
-    walletHref,
-    fetchNextPage,
-    search,
-    addRecent,
-  }
-}

package/src/evm/config.ts

@@ -1,35 +0,0 @@
-import { inject, type InjectionKey } from 'vue'
-
-export interface EvmChainConfig {
-  id: number
-  blockExplorer?: string
-}
-
-export interface EvmConfig {
-  title?: string
-  defaultChain?: string
-  chains: Record<string, EvmChainConfig>
-  ens?: {
-    mode?: 'indexer' | 'chain'
-    indexerUrls?: string[]
-  }
-  ipfsGateway?: string
-  arweaveGateway?: string
-  baseURL?: string
-  walletConnectProjectId?: string
-}
-
-export const EvmConfigKey: InjectionKey<EvmConfig> = Symbol('EvmConfig')
-
-export const defaultEvmConfig: EvmConfig = {
-  title: 'EVM Layer',
-  defaultChain: 'mainnet',
-  chains: {
-    mainnet: { id: 1, blockExplorer: 'https://etherscan.io' },
-  },
-  ens: { mode: 'indexer' },
-}
-
-export const useEvmConfig = (): EvmConfig => {
-  return inject(EvmConfigKey, defaultEvmConfig)
-}

package/src/evm/connectors/inAppWallet.ts

@@ -1,5 +0,0 @@
-export {
-  inAppWallet,
-  prepareInAppWallet,
-  type InAppWalletParameters,
-} from '@1001-digital/wagmi-in-app-wallet'

package/src/evm/index.ts

@@ -1,60 +0,0 @@
-// Config
-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'
-export { resolveUri } from './utils/uri'
-export type { ResolveUriOptions } from './utils/uri'
-export { createSiweMessage } from './utils/siwe'
-export type { SiweMessageParams } from './utils/siwe'
-
-// Composables
-export { useBaseURL } from './composables/base'
-export {
-  useChainConfig,
-  useMainChainId,
-  useBlockExplorer,
-  useEnsureChainIdCheck,
-} from './composables/chainId'
-export { useEns, useEnsWithAvatar, useEnsProfile } from './composables/ens'
-export { useResolveUri } from './composables/uri'
-export { useGasPrice } from './composables/gasPrice'
-export { usePriceFeed } from './composables/priceFeed'
-export { useWalletExplorer } from './composables/walletExplorer'
-export type { ExplorerWallet } from './composables/walletExplorer'
-export { useSiwe } from './composables/siwe'
-export type { SiweSession, UseSiweOptions } from './composables/siwe'
-
-// Connectors
-export { inAppWallet, prepareInAppWallet } from './connectors/inAppWallet'
-
-// Components
-export { default as EvmAccount } from './components/EvmAccount.vue'
-export { default as EvmAvatar } from './components/EvmAvatar.vue'
-export { default as EvmConnect } from './components/EvmConnect.vue'
-export { default as EvmConnectDialog } from './components/EvmConnectDialog.vue'
-export { default as EvmConnectionStatus } from './components/EvmConnectionStatus.vue'
-export { default as EvmProfile } from './components/EvmProfile.vue'
-export { default as EvmSwitchNetwork } from './components/EvmSwitchNetwork.vue'
-export { default as EvmConnectorQR } from './components/EvmConnectorQR.vue'
-export { default as EvmMetaMaskQR } from './components/EvmMetaMaskQR.vue'
-export { default as EvmWalletConnectQR } from './components/EvmWalletConnectQR.vue'
-export { default as EvmWalletConnectWallets } from './components/EvmWalletConnectWallets.vue'
-export { default as EvmTransactionFlow } from './components/EvmTransactionFlow.vue'
-export { default as EvmSeedPhraseInput } from './components/EvmSeedPhraseInput.vue'
-export { default as EvmInAppWalletSetup } from './components/EvmInAppWalletSetup.vue'
-export { default as EvmSiwe } from './components/EvmSiwe.vue'
-export { default as EvmSiweDialog } from './components/EvmSiweDialog.vue'

package/src/evm/utils/addresses.ts

@@ -1,6 +0,0 @@
-import type { Address } from 'viem'
-
-export const shortAddress = (address: Address, length: number = 3) =>
-  address.substring(0, length + 2) +
-  '...' +
-  address.substring(address.length - length)

package/src/evm/utils/cache.ts

@@ -1,59 +0,0 @@
-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/chains.ts

@@ -1,32 +0,0 @@
-import { defineChain, type Chain } from 'viem'
-import {
-  mainnet,
-  sepolia,
-  holesky,
-  optimism,
-  arbitrum,
-  base,
-  polygon,
-  localhost,
-} from 'viem/chains'
-
-const KNOWN: Chain[] = [
-  mainnet,
-  sepolia,
-  holesky,
-  optimism,
-  arbitrum,
-  base,
-  polygon,
-  localhost,
-]
-const byId = new Map<number, Chain>(KNOWN.map((c) => [c.id, c]))
-
-export const resolveChain = (id: number): Chain =>
-  byId.get(id) ??
-  defineChain({
-    id,
-    name: `Chain ${id}`,
-    nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
-    rpcUrls: { default: { http: [] } },
-  })