@1001-digital/components 0.0.1

package/src/evm/components/EvmTransactionFlow.vue

@@ -0,0 +1,327 @@
+<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'"
+      spinner
+      stacked
+      :txt="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, 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 checkChain = useEnsureChainIdCheck()
+
+const wagmiConfig = useConfig()
+const blockExplorer = useBlockExplorer()
+const toast = useToast()
+
+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(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
+onBeforeUnmount(() => {
+  mounted = false
+})
+
+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) {
+    const err = e as { cause?: { code?: number }; shortMessage?: string }
+    if (err?.cause?.code === 4001) {
+      error.value = 'Transaction rejected by user.'
+    } else {
+      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,
+    action: {
+      label: 'View on Block Explorer',
+      onClick: () => window.open(link, '_blank'),
+    },
+  })
+
+  try {
+    const receiptObject = await waitForTransactionReceipt(
+      wagmiConfig as Config,
+      { hash: tx.value },
+    )
+    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,
+      ...(props.autoCloseSuccess && { duration: props.delayAutoclose }),
+    })
+  } catch (e: unknown) {
+    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.',
+      })
+    }
+    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

@@ -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/evm/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/evm/composables/chainId.ts

@@ -0,0 +1,41 @@
+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 = () => {
+  const chainId = useMainChainId()
+  const { mutate: switchChain } = useSwitchChain()
+  const { chainId: currentChainId } = useConnection()
+
+  return async () => {
+    if (chainId !== currentChainId.value) {
+      switchChain({ chainId })
+    }
+
+    if (chainId === currentChainId.value) {
+      return true
+    }
+
+    return false
+  }
+}

package/src/evm/config.ts

@@ -0,0 +1,32 @@
+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[]
+  }
+  baseURL?: 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/index.ts

@@ -0,0 +1,25 @@
+// Config
+export { EvmConfigKey, defaultEvmConfig, useEvmConfig } from './config'
+export type { EvmConfig, EvmChainConfig } from './config'
+
+// Utils
+export { shortAddress } from './utils/addresses'
+export { resolveChain } from './utils/chains'
+export { formatETH } from './utils/format-eth'
+
+// Composables
+export { useBaseURL } from './composables/base'
+export {
+  useChainConfig,
+  useMainChainId,
+  useBlockExplorer,
+  useEnsureChainIdCheck,
+} from './composables/chainId'
+
+// Components
+export { default as EvmAccount } from './components/EvmAccount.vue'
+export { default as EvmConnect } from './components/EvmConnect.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 EvmTransactionFlow } from './components/EvmTransactionFlow.vue'

package/src/evm/utils/addresses.ts

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

@@ -0,0 +1,32 @@
+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: [] } },
+  })

package/src/evm/utils/format-eth.ts

@@ -0,0 +1,15 @@
+export function formatETH(
+  value: string | number,
+  maxDecimals: number = 3,
+): string {
+  const numberValue = typeof value === 'string' ? parseFloat(value) : value
+
+  if (isNaN(numberValue)) {
+    throw new Error('Invalid number input')
+  }
+
+  return new Intl.NumberFormat('en-US', {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: maxDecimals,
+  }).format(numberValue)
+}

package/src/index.ts

@@ -0,0 +1,68 @@
+// Components
+export { default as Actions } from './base/components/Actions.vue'
+export { default as Alert } from './base/components/Alert.vue'
+export { default as Button } from './base/components/Button.vue'
+export { default as Card } from './base/components/Card.vue'
+export { default as CardLink } from './base/components/CardLink.vue'
+export { default as Dialog } from './base/components/Dialog.vue'
+export { default as Dropdown } from './base/components/Dropdown.vue'
+export { default as DropdownCheckboxItem } from './base/components/DropdownCheckboxItem.vue'
+export { default as DropdownGroup } from './base/components/DropdownGroup.vue'
+export { default as DropdownItem } from './base/components/DropdownItem.vue'
+export { default as DropdownLabel } from './base/components/DropdownLabel.vue'
+export { default as DropdownRadioGroup } from './base/components/DropdownRadioGroup.vue'
+export { default as DropdownRadioItem } from './base/components/DropdownRadioItem.vue'
+export { default as DropdownSeparator } from './base/components/DropdownSeparator.vue'
+export { default as DropdownSub } from './base/components/DropdownSub.vue'
+export { default as Form } from './base/components/Form.vue'
+export { default as FormCheckbox } from './base/components/FormCheckbox.vue'
+export { default as FormGroup } from './base/components/FormGroup.vue'
+export { default as FormInputGroup } from './base/components/FormInputGroup.vue'
+export { default as FormItem } from './base/components/FormItem.vue'
+export { default as FormLabel } from './base/components/FormLabel.vue'
+export { default as FormRadioGroup } from './base/components/FormRadioGroup.vue'
+export { default as FormSelect } from './base/components/FormSelect.vue'
+export { default as FormTextarea } from './base/components/FormTextarea.vue'
+export { default as Icon } from './base/components/Icon.vue'
+export { default as Loading } from './base/components/Loading.vue'
+export { default as Popover } from './base/components/Popover.vue'
+export { default as Tag } from './base/components/Tag.vue'
+export { default as Tags } from './base/components/Tags.vue'
+export { default as Toasts } from './base/components/Toasts.vue'
+export { default as Tooltip } from './base/components/Tooltip.vue'
+
+// Composables
+export { useToast } from './base/composables/toast'
+export type {
+  Toast as ToastType,
+  ToastAction,
+  ToastVariant,
+} from './base/composables/toast'
+export {
+  useSeconds,
+  useCountDown,
+  useTimeAgo,
+  useSecondsAgo,
+} from './base/composables/time'
+
+// Utils
+export {
+  formatNumber,
+  roundAndFormatNumber,
+  asPercentageOf,
+  formatUSD,
+} from './base/utils/format-number'
+export {
+  delay,
+  daysInSeconds,
+  nowInSeconds,
+  asUTCDate,
+} from './base/utils/time'
+
+// Injection keys & types
+export { IconAliasesKey, defaultIconAliases } from './base/icons'
+export type { IconAliases } from './base/icons'
+export { LinkComponentKey } from './base/link'
+
+// EVM
+export * from './evm/index'