@1001-digital/layers.evm 1.0.7 → 1.0.8

package/app/components/EvmConnectorQR.client.vue

@@ -1,108 +0,0 @@
-<template>
-  <p>
-    <slot name="instruction">Scan the code in your wallet application</slot>
-  </p>
-  <div class="qr-frame">
-    <canvas ref="qrCanvas"></canvas>
-  </div>
-  <p class="uri-label">Or copy the connection URI:</p>
-  <div class="uri-display">
-    <code>{{ uri }}</code>
-    <Button @click="copyUri" class="copy-button" :class="{ copied: isCopied }">
-      <Icon :type="isCopied ? 'check' : 'copy'" />
-    </Button>
-  </div>
-</template>
-
-<script setup lang="ts">
-import QRCode from 'qrcode'
-
-const props = defineProps<{
-  uri: string
-}>()
-
-const qrCanvas = ref<HTMLCanvasElement | null>(null)
-const { copy, copied: isCopied } = useClipboard()
-
-const generateQR = async () => {
-  if (!qrCanvas.value || !props.uri) return
-
-  try {
-    await QRCode.toCanvas(qrCanvas.value, props.uri, {
-      width: 300,
-      margin: 2,
-      color: {
-        dark: '#000000',
-        light: '#FFFFFF',
-      },
-    })
-  } catch (error) {
-    console.error('Failed to generate QR code:', error)
-  }
-}
-
-const copyUri = () => copy(props.uri)
-
-watch(() => props.uri, generateQR, { immediate: true })
-
-onMounted(() => {
-  generateQR()
-})
-</script>
-
-<style scoped>
-p {
-  text-align: center;
-  @mixin ui-font;
-  color: var(--muted);
-  font-size: var(--font-sm);
-}
-
-.qr-frame {
-  background: white;
-  padding: var(--spacer-sm);
-  max-width: 15rem;
-  max-height: 15rem;
-  border: var(--border);
-  border-radius: var(--border-radius);
-  margin: 0 auto;
-
-  canvas {
-    width: 100% !important;
-    height: 100% !important;
-  }
-}
-
-.uri-display {
-  display: flex;
-  align-items: center;
-  gap: var(--spacer-xs);
-  background: var(--color-bg-secondary);
-  border: var(--border);
-  border-radius: var(--border-radius-sm);
-  overflow: hidden;
-  height: min-content;
-  padding: 0;
-
-  code {
-    flex: 1;
-    font-size: var(--font-xs);
-    font-family: monospace;
-    white-space: nowrap;
-    overflow: hidden;
-    padding: 0 var(--spacer-sm);
-    color: var(--muted);
-  }
-
-  .copy-button {
-    flex-shrink: 0;
-    padding: var(--spacer-xs);
-    min-width: auto;
-    margin: -1px;
-
-    &.copied {
-      color: var(--color-success);
-    }
-  }
-}
-</style>

package/app/components/EvmMetaMaskQR.client.vue

@@ -1,13 +0,0 @@
-<template>
-  <EvmConnectorQR :uri="uri">
-    <template #instruction>
-      Scan the code in your MetaMask mobile app
-    </template>
-  </EvmConnectorQR>
-</template>
-
-<script setup lang="ts">
-defineProps<{
-  uri: string
-}>()
-</script>

package/app/components/EvmTransactionFlow.vue

@@ -1,293 +0,0 @@
-<template>
-  <slot
-    :start="start"
-    :step="step"
-    :open="open"
-    name="start"
-  ></slot>
-
-  <Dialog
-    v-model:open="open"
-    :closable="canDismiss"
-    :click-outside="canDismiss"
-    :title="text.title[step]"
-    class="transaction-flow"
-  >
-    <slot name="before" />
-
-    <Loading
-      v-if="step === 'requesting' || step === 'waiting'"
-      spinner
-      stacked
-      :txt="text.lead[step] || ''"
-    />
-
-    <p
-      v-if="
-        step !== 'requesting' &&
-        step !== 'waiting' &&
-        step !== 'error' &&
-        text.lead[step]
-      "
-    >
-      {{ text.lead[step] }}
-    </p>
-
-    <Alert
-      v-if="error"
-      type="error"
-    >
-      <p v-if="text.lead[step]">{{ text.lead[step] }}</p>
-      <p>{{ error }}</p>
-    </Alert>
-
-    <Button
-      v-if="step === 'waiting'"
-      :to="txLink"
-      target="_blank"
-      class="link muted small centered"
-    >
-      <Icon type="link" />
-      <span>View on Block Explorer</span>
-    </Button>
-
-    <slot
-      :name="step"
-      :cancel="cancel"
-    ></slot>
-
-    <template #footer>
-      <template v-if="step === 'chain'">
-        <Button
-          @click="cancel"
-          class="secondary"
-          >Cancel</Button
-        >
-      </template>
-
-      <template v-if="step === 'confirm' || step === 'error'">
-        <Button
-          @click="cancel"
-          class="secondary"
-          >Cancel</Button
-        >
-        <Button @click="() => initializeRequest()">
-          {{ text.action[step] || 'Execute' }}
-        </Button>
-      </template>
-
-      <slot
-        name="actions"
-        :step="step"
-        :cancel="cancel"
-        :execute="() => initializeRequest()"
-        :tx-link="txLink"
-      />
-    </template>
-  </Dialog>
-</template>
-
-<script setup lang="ts">
-import { waitForTransactionReceipt, watchChainId } from '@wagmi/core'
-import type { Config } from '@wagmi/vue'
-import type { TransactionReceipt, Hash } from 'viem'
-
-interface TextConfig {
-  title?: Record<string, string>
-  lead?: Record<string, string>
-  action?: Record<string, string>
-}
-
-type Step =
-  | 'idle'
-  | 'confirm'
-  | 'chain'
-  | 'requesting'
-  | 'waiting'
-  | 'complete'
-  | 'error'
-
-const defaultText = {
-  title: {
-    confirm: 'Confirm Transaction',
-    chain: 'Switch Network',
-    requesting: 'Requesting',
-    waiting: 'Processing',
-    complete: 'Complete',
-    error: 'Error',
-  },
-  lead: {
-    confirm: 'Please review and confirm this transaction.',
-    chain: 'Please switch to the correct network to continue.',
-    requesting: 'Requesting transaction signature...',
-    waiting: 'Waiting for transaction confirmation...',
-    complete: 'Transaction confirmed successfully.',
-  },
-  action: {
-    confirm: 'Execute',
-    error: 'Try Again',
-  },
-} satisfies TextConfig
-
-const slots = useSlots()
-const checkChain = useEnsureChainIdCheck()
-
-const { $wagmi } = useNuxtApp()
-const blockExplorer = useBlockExplorer()
-
-const props = withDefaults(
-  defineProps<{
-    text?: TextConfig
-    request?: () => Promise<Hash>
-    delayAfter?: number
-    delayAutoclose?: number
-    skipConfirmation?: boolean
-    autoCloseSuccess?: boolean
-    dismissable?: boolean
-  }>(),
-  {
-    delayAfter: 2000,
-    delayAutoclose: 2000,
-    skipConfirmation: false,
-    autoCloseSuccess: true,
-    dismissable: true,
-  },
-)
-
-const emit = defineEmits<{
-  complete: [receipt: TransactionReceipt]
-  cancel: []
-}>()
-
-const text = computed<Required<TextConfig>>(() => ({
-  title: { ...defaultText.title, ...props.text?.title },
-  lead: { ...defaultText.lead, ...props.text?.lead },
-  action: { ...defaultText.action, ...props.text?.action },
-}))
-
-const step = ref<Step>('idle')
-
-const open = computed({
-  get: () => step.value !== 'idle',
-  set: (v) => {
-    if (!v) {
-      step.value = 'idle'
-      error.value = ''
-    }
-  },
-})
-
-watchChainId($wagmi as Config, {
-  async onChange() {
-    if (step.value !== 'chain') return
-
-    if (await checkChain()) {
-      initializeRequest()
-    }
-  },
-})
-
-const cachedRequest = ref(props.request)
-watch(
-  () => props.request,
-  (v) => {
-    cachedRequest.value = v
-  },
-)
-
-const error = ref('')
-const tx = ref<Hash | null>(null)
-const receipt = ref<TransactionReceipt | null>(null)
-const txLink = computed(() => `${blockExplorer}/tx/${tx.value}`)
-
-const canDismiss = computed(
-  () =>
-    props.dismissable &&
-    step.value !== 'requesting' &&
-    step.value !== 'waiting',
-)
-
-const initializeRequest = async (request = cachedRequest.value) => {
-  cachedRequest.value = request
-  error.value = ''
-  tx.value = null
-  receipt.value = null
-  step.value = 'confirm'
-
-  if (!(await checkChain())) {
-    step.value = 'chain'
-    return
-  }
-
-  try {
-    step.value = 'requesting'
-    tx.value = await request!()
-    step.value = 'waiting'
-    const receiptObject = await waitForTransactionReceipt($wagmi as Config, {
-      hash: tx.value,
-    })
-    await delay(props.delayAfter)
-    receipt.value = receiptObject
-    emit('complete', receiptObject)
-    step.value = 'complete'
-  } catch (e: unknown) {
-    const err = e as { cause?: { code?: number }; shortMessage?: string }
-    if (err?.cause?.code === 4001) {
-      error.value = 'Transaction rejected by user.'
-      step.value = 'error'
-    } else {
-      error.value = err.shortMessage || 'Error submitting transaction request.'
-      step.value = 'error'
-    }
-    console.log(e)
-  }
-
-  if (props.autoCloseSuccess && step.value === 'complete') {
-    await delay(props.delayAutoclose)
-    step.value = 'idle'
-    await delay(300)
-  }
-
-  return receipt.value
-}
-
-const start = () => {
-  if (props.skipConfirmation && step.value === 'idle') {
-    initializeRequest()
-    return
-  }
-
-  step.value = 'confirm'
-}
-
-const cancel = () => {
-  step.value = 'idle'
-  error.value = ''
-  emit('cancel')
-}
-
-defineExpose({
-  initializeRequest,
-})
-</script>
-
-<style>
-.transaction-flow > section {
-  display: grid;
-  gap: var(--spacer);
-
-  .text {
-    width: 100%;
-    height: min-content;
-  }
-
-  p {
-    white-space: pre-wrap;
-    width: 100%;
-
-    a {
-      text-decoration: underline;
-    }
-  }
-}
-</style>

package/app/components/EvmWalletConnectQR.client.vue

@@ -1,13 +0,0 @@
-<template>
-  <EvmConnectorQR :uri="uri">
-    <template #instruction>
-      Scan the code in your wallet application
-    </template>
-  </EvmConnectorQR>
-</template>
-
-<script setup lang="ts">
-defineProps<{
-  uri: string
-}>()
-</script>

package/app/composables/clipboard.ts

@@ -1,26 +0,0 @@
-export const useClipboard = () => {
-  const copied = ref(false)
-  let timeout: ReturnType<typeof setTimeout> | null = null
-
-  const copy = async (text: string) => {
-    try {
-      await navigator.clipboard.writeText(text)
-      copied.value = true
-
-      if (timeout) clearTimeout(timeout)
-      timeout = setTimeout(() => {
-        copied.value = false
-      }, 2000)
-
-      return true
-    } catch (error) {
-      console.error('Failed to copy to clipboard:', error)
-      return false
-    }
-  }
-
-  return {
-    copy,
-    copied,
-  }
-}

package/app/composables/ens.ts

@@ -1,88 +0,0 @@
-import { getPublicClient } from '@wagmi/core'
-import type { Config } from '@wagmi/vue'
-
-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/app/composables/gasPrice.ts

@@ -1,36 +0,0 @@
-import 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/app/composables/helpers.ts

@@ -1 +0,0 @@
-export const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))

package/app/composables/priceFeed.ts

@@ -1,103 +0,0 @@
-import { readContract } from '@wagmi/core'
-
-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 (!import.meta.client) 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 (!import.meta.client) return
-
-  try {
-    localStorage.setItem(STORAGE_KEY, stringifyJSON({
-      ethUSDRaw: state.ethUSDRaw,
-      lastUpdated: state.lastUpdated,
-    }))
-  } catch {
-    // Ignore storage errors
-  }
-}
-
-export const usePriceFeed = () => {
-  const { $wagmi } = useNuxtApp()
-
-  // 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($wagmi, {
-        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/app/plugins/price-feed.client.ts

@@ -1,7 +0,0 @@
-export default defineNuxtPlugin(() => {
-  const priceFeed = usePriceFeed()
-
-  priceFeed.fetchPrice()
-
-  setInterval(() => priceFeed.fetchPrice(), 60 * 60 * 1000)
-})