@1001-digital/components 1.2.2 → 1.3.0

package/src/evm/components/EvmTransactionFlow.vue

@@ -1,353 +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"
-    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 from '../../base/components/Dialog.vue'
-import Loading from '../../base/components/Loading.vue'
-import Alert from '../../base/components/Alert.vue'
-import Button from '../../base/components/Button.vue'
-import { useEnsureChainIdCheck, useBlockExplorer } from '../composables/chainId'
-import { useToast } from '../../base/composables/toast'
-import { delay } from '../../base/utils/time'
-
-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/evm/components/EvmWalletConnectQR.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">
-import EvmConnectorQR from './EvmConnectorQR.vue'
-
-defineProps<{
-  uri: string
-}>()
-</script>

package/src/evm/components/EvmWalletConnectWallets.vue

@@ -1,200 +0,0 @@
-<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 from '../../base/components/Button.vue'
-import FormItem from '../../base/components/FormItem.vue'
-import Icon from '../../base/components/Icon.vue'
-import Loading from '../../base/components/Loading.vue'
-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/evm/composables/base.ts

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

package/src/evm/composables/chainId.ts

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