@1001-digital/components.evm 1.2.2

package/src/components/EvmTransactionFlow.vue

@@ -0,0 +1,348 @@
+<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"
+    compat
+  >
+    <slot name="before" />
+
+    <Loading
+      v-if="step === 'requesting'"
+      spinner
+      stacked
+      :txt="connector?.name
+        ? `Requesting signature from ${connector.name}...`
+        : text.lead[step] || ''"
+    />
+
+    <p v-if="step !== 'requesting' && 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>
+
+    <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 { ref, computed, watch, onBeforeUnmount } from 'vue'
+import { waitForTransactionReceipt, watchChainId } from '@wagmi/core'
+import { useConfig, useConnection, type Config } from '@wagmi/vue'
+import type { TransactionReceipt, Hash } from 'viem'
+import { Dialog, Loading, Alert, Button, useToast, delay } from '@1001-digital/components'
+import { useEnsureChainIdCheck, useBlockExplorer } from '../composables/chainId'
+
+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 props = withDefaults(
+  defineProps<{
+    chain?: string
+    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,
+  },
+)
+
+function isUserRejection(e: unknown): boolean {
+  const re = /reject|denied|cancel/i
+  let current = e as Record<string, unknown> | undefined
+  while (current) {
+    if ((current as { code?: number }).code === 4001) return true
+    if (re.test((current as { details?: string }).details || '')) return true
+    current = current.cause as Record<string, unknown> | undefined
+  }
+  return false
+}
+
+const checkChain = useEnsureChainIdCheck(props.chain)
+
+const wagmiConfig = useConfig()
+const { connector } = useConnection()
+const blockExplorer = useBlockExplorer(props.chain)
+const toast = useToast()
+
+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(wagmiConfig 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}`)
+
+let mounted = true
+let progressTimer: ReturnType<typeof setInterval> | undefined
+
+onBeforeUnmount(() => {
+  mounted = false
+  clearInterval(progressTimer)
+})
+
+const canDismiss = computed(
+  () => props.dismissable && step.value !== 'requesting',
+)
+
+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
+  }
+
+  // Phase 1: Signing (dialog)
+  try {
+    step.value = 'requesting'
+    tx.value = await request!()
+  } catch (e: unknown) {
+    if (isUserRejection(e)) {
+      error.value = 'Transaction rejected by user.'
+    } else {
+      const err = e as { shortMessage?: string }
+      error.value = err.shortMessage || 'Error submitting transaction request.'
+    }
+    step.value = 'error'
+    console.log(e)
+    return
+  }
+
+  // Phase 2: Receipt (toast)
+  step.value = 'idle'
+
+  const link = `${blockExplorer}/tx/${tx.value}`
+  const toastId = toast.add({
+    variant: 'info',
+    title: text.value.title.waiting,
+    description: text.value.lead.waiting,
+    duration: Infinity,
+    loading: true,
+    progress: 0,
+    action: {
+      label: 'View on Block Explorer',
+      onClick: () => window.open(link, '_blank'),
+      persistent: true,
+    },
+  })
+
+  const start = Date.now()
+  progressTimer = setInterval(() => {
+    const elapsed = (Date.now() - start) / 1000
+    toast.update(toastId, { progress: Math.round(90 * (1 - Math.exp(-elapsed / 15))) })
+  }, 500)
+
+  try {
+    const receiptObject = await waitForTransactionReceipt(
+      wagmiConfig as Config,
+      { hash: tx.value },
+    )
+    clearInterval(progressTimer)
+    toast.update(toastId, { progress: 100, loading: false })
+    await delay(props.delayAfter)
+    receipt.value = receiptObject
+    emit('complete', receiptObject)
+
+    toast.update(toastId, {
+      variant: 'success',
+      title: text.value.title.complete,
+      description: text.value.lead.complete,
+      progress: false,
+      ...(props.autoCloseSuccess && { duration: props.delayAutoclose }),
+    })
+  } catch (e: unknown) {
+    clearInterval(progressTimer)
+    const err = e as { shortMessage?: string }
+    if (mounted) {
+      toast.dismiss(toastId)
+      error.value = err.shortMessage || 'Transaction failed.'
+      step.value = 'error'
+    } else {
+      toast.update(toastId, {
+        variant: 'error',
+        title: text.value.title.error,
+        description: err.shortMessage || 'Transaction failed.',
+        loading: false,
+        progress: false,
+      })
+    }
+    console.log(e)
+  }
+
+  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/src/components/EvmWalletConnectQR.vue

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

package/src/components/EvmWalletConnectWallets.vue

@@ -0,0 +1,197 @@
+<template>
+  <div class="wc-wallets">
+    <EvmConnectorQR :uri="uri">
+      <template #instruction> Scan with your wallet app </template>
+    </EvmConnectorQR>
+
+    <div class="separator">
+      <span>Or choose a wallet</span>
+    </div>
+
+    <FormItem>
+      <template #prefix>
+        <Icon type="lucide:search" />
+      </template>
+      <input
+        v-model="searchQuery"
+        type="text"
+        placeholder="Search wallets"
+        @input="onSearchInput"
+      />
+    </FormItem>
+
+    <div
+      v-if="displayedWallets.length > 0"
+      class="wallet-grid"
+    >
+      <Button
+        v-for="wallet in displayedWallets"
+        :key="wallet.id"
+        @click="openWallet(wallet)"
+        class="wallet-card tertiary"
+      >
+        <img
+          :src="explorer.imageUrl(wallet)"
+          :alt="wallet.name"
+          loading="lazy"
+        />
+        <span>{{ wallet.name }}</span>
+      </Button>
+    </div>
+
+    <p
+      v-if="
+        searchQuery &&
+        !explorer.searching.value &&
+        displayedWallets.length === 0
+      "
+      class="empty-state"
+    >
+      No wallets found
+    </p>
+
+    <Loading
+      v-if="explorer.loading.value || explorer.searching.value"
+      spinner
+      stacked
+      txt=""
+    />
+
+    <Button
+      class="link muted small"
+      @click="$emit('back')"
+    >
+      <Icon type="chevron-left" />
+      <span>Back</span>
+    </Button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
+import { Button, FormItem, Icon, Loading } from '@1001-digital/components'
+import EvmConnectorQR from './EvmConnectorQR.vue'
+import {
+  useWalletExplorer,
+  type ExplorerWallet,
+} from '../composables/walletExplorer'
+
+const props = defineProps<{
+  uri: string
+}>()
+
+defineEmits<{
+  back: []
+}>()
+
+const explorer = useWalletExplorer()
+const searchQuery = ref('')
+let searchTimeout: ReturnType<typeof setTimeout>
+
+const TOP_COUNT = 9
+
+const displayedWallets = computed(() => {
+  if (searchQuery.value) return explorer.searchResults.value
+
+  const recents = explorer.recentWallets.value
+  const recentIds = new Set(recents.map((w) => w.id))
+  const rest = explorer.wallets.value
+    .filter((w) => !recentIds.has(w.id))
+    .slice(0, TOP_COUNT - recents.length)
+
+  return [...recents, ...rest]
+})
+
+function openWallet(wallet: ExplorerWallet) {
+  const href = explorer.walletHref(wallet, props.uri)
+  if (href) {
+    window.open(href, '_blank', 'noreferrer')
+  }
+  explorer.addRecent(wallet.id)
+}
+
+function onSearchInput() {
+  clearTimeout(searchTimeout)
+  searchTimeout = setTimeout(() => {
+    if (searchQuery.value) {
+      explorer.search(searchQuery.value)
+    }
+  }, 300)
+}
+
+onBeforeUnmount(() => {
+  clearTimeout(searchTimeout)
+})
+
+onMounted(() => {
+  explorer.fetchNextPage()
+})
+</script>
+
+<style scoped>
+.wc-wallets {
+  display: grid;
+  gap: var(--spacer);
+}
+
+/* Separator */
+.separator {
+  display: flex;
+  align-items: center;
+  gap: var(--spacer-sm);
+  @mixin ui-font;
+  color: var(--muted);
+  font-size: var(--font-sm);
+
+  &::before,
+  &::after {
+    content: '';
+    flex: 1;
+    border-top: var(--border);
+  }
+}
+
+/* Wallet grid */
+.wallet-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
+  gap: var(--spacer-sm);
+}
+
+.wallet-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacer-sm);
+  block-size: auto;
+  min-inline-size: 0;
+  inline-size: 100%;
+
+  img {
+    width: var(--size-6);
+    height: var(--size-6);
+    border-radius: var(--border-radius);
+    margin-top: var(--spacer-xs);
+  }
+
+  span {
+    font-size: var(--font-xs);
+    text-align: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+  }
+}
+
+.link.muted {
+  justify-self: center;
+}
+
+/* Empty state */
+.empty-state {
+  text-align: center;
+  @mixin ui-font;
+  color: var(--muted);
+}
+</style>

package/src/composables/base.ts

@@ -0,0 +1,7 @@
+import { useEvmConfig } from '../config'
+
+export const useBaseURL = () => {
+  const config = useEvmConfig()
+  const base = config.baseURL || '/'
+  return base.endsWith('/') ? base : base + '/'
+}

package/src/composables/chainId.ts

@@ -0,0 +1,42 @@
+import { useConnection, useSwitchChain } from '@wagmi/vue'
+import { useEvmConfig } from '../config'
+
+interface ChainConfig {
+  id: number
+  blockExplorer: string
+}
+
+export const useChainConfig = (key?: string): ChainConfig => {
+  const evmConfig = useEvmConfig()
+  const resolvedKey = key || evmConfig.defaultChain || 'mainnet'
+  const chain = evmConfig.chains[resolvedKey]
+
+  return {
+    id: chain?.id ?? 1,
+    blockExplorer: chain?.blockExplorer ?? 'https://etherscan.io',
+  }
+}
+
+export const useMainChainId = () => useChainConfig().id
+
+export const useBlockExplorer = (key?: string) =>
+  useChainConfig(key).blockExplorer
+
+export const useEnsureChainIdCheck = (key?: string) => {
+  const chainId = useChainConfig(key).id
+  const { mutateAsync: switchChain } = useSwitchChain()
+  const { chainId: currentChainId } = useConnection()
+
+  return async () => {
+    if (chainId === currentChainId.value) {
+      return true
+    }
+
+    try {
+      await switchChain({ chainId })
+      return true
+    } catch {
+      return false
+    }
+  }
+}

package/src/composables/ens.ts

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