@1001-digital/components 0.0.2 → 0.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1001-digital/components",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "type": "module",
   "sideEffects": [
     "*.css"
@@ -13,16 +13,12 @@
     "src"
   ],
   "peerDependencies": {
-    "@wagmi/core": ">=3.0.0",
-    "@wagmi/vue": ">=0.4.0",
+    "@wagmi/vue": ">=0.5.0",
     "viem": ">=2.0.0",
     "vue": "^3.5.0",
-    "@1001-digital/styles": "^0.0.1"
+    "@1001-digital/styles": "^0.0.2"
   },
   "peerDependenciesMeta": {
-    "@wagmi/core": {
-      "optional": true
-    },
     "@wagmi/vue": {
       "optional": true
     },

package/src/base/components/Dialog.vue

@@ -250,9 +250,10 @@ const onClickOutside = () => {
     > footer {
       display: flex;
       gap: var(--spacer);
-      justify-content: flex-end;
+      justify-content: safe flex-end;
       padding: var(--spacer);
       border-block-start: var(--border);
+      overflow-x: auto;
 
       &:empty {
         display: none;

package/src/base/components/Toasts.vue

@@ -13,6 +13,11 @@
       @update:open="(open) => !open && onClose(toast.id)"
     >
       <ToastTitle class="toast-title">
+        <span
+          v-if="toast.loading"
+          class="toast-spinner"
+          aria-hidden="true"
+        />
         {{ toast.title }}
       </ToastTitle>
       <ToastClose
@@ -37,7 +42,7 @@
           class="left"
         >
           <Button
-            class="small"
+            class="small tertiary"
             @click="toast.action!.onClick()"
           >
             {{ toast.action.label }}
@@ -211,6 +216,7 @@ const onClose = (id: string) => {
     .toast-title {
       display: flex;
       align-items: center;
+      gap: var(--spacer-sm);
       block-size: calc(var(--spacer) * 2);
       box-shadow: var(--border-shadow);
       padding-inline-start: var(--ui-padding-inline);
@@ -222,6 +228,16 @@ const onClose = (id: string) => {
       margin: 0;
     }
 
+    .toast-spinner {
+      width: var(--ui-font-size);
+      height: var(--ui-font-size);
+      border: 2px solid currentColor;
+      border-top-color: transparent;
+      border-radius: 50%;
+      animation: spin var(--speed-slow, 1s) linear infinite;
+      flex-shrink: 0;
+    }
+
     > section {
       padding: var(--ui-padding-inline);
       display: grid;
@@ -250,5 +266,11 @@ const onClose = (id: string) => {
       }
     }
   }
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
 }
 </style>

package/src/base/composables/toast.ts

@@ -14,6 +14,7 @@ export interface Toast {
   variant?: ToastVariant
   action?: ToastAction
   duration?: number
+  loading?: boolean
 }
 
 const toasts = ref<Toast[]>([])

package/src/evm/components/EvmTransactionFlow.vue

@@ -22,13 +22,7 @@
       :txt="text.lead[step] || ''"
     />
 
-    <p
-      v-if="
-        step !== 'requesting' &&
-        step !== 'error' &&
-        text.lead[step]
-      "
-    >
+    <p v-if="step !== 'requesting' && step !== 'error' && text.lead[step]">
       {{ text.lead[step] }}
     </p>
 
@@ -203,9 +197,7 @@ onBeforeUnmount(() => {
 })
 
 const canDismiss = computed(
-  () =>
-    props.dismissable &&
-    step.value !== 'requesting',
+  () => props.dismissable && step.value !== 'requesting',
 )
 
 const initializeRequest = async (request = cachedRequest.value) => {
@@ -245,6 +237,7 @@ const initializeRequest = async (request = cachedRequest.value) => {
     title: text.value.title.waiting,
     description: text.value.lead.waiting,
     duration: Infinity,
+    loading: true,
     action: {
       label: 'View on Block Explorer',
       onClick: () => window.open(link, '_blank'),
@@ -264,6 +257,7 @@ const initializeRequest = async (request = cachedRequest.value) => {
       variant: 'success',
       title: text.value.title.complete,
       description: text.value.lead.complete,
+      loading: false,
       ...(props.autoCloseSuccess && { duration: props.delayAutoclose }),
     })
   } catch (e: unknown) {
@@ -277,6 +271,7 @@ const initializeRequest = async (request = cachedRequest.value) => {
         variant: 'error',
         title: text.value.title.error,
         description: err.shortMessage || 'Transaction failed.',
+        loading: false,
       })
     }
     console.log(e)

package/src/evm/composables/chainId.ts

@@ -24,18 +24,19 @@ export const useBlockExplorer = (key?: string) =>
 
 export const useEnsureChainIdCheck = () => {
   const chainId = useMainChainId()
-  const { mutate: switchChain } = useSwitchChain()
+  const { mutateAsync: switchChain } = useSwitchChain()
   const { chainId: currentChainId } = useConnection()
 
   return async () => {
-    if (chainId !== currentChainId.value) {
-      switchChain({ chainId })
-    }
-
     if (chainId === currentChainId.value) {
       return true
     }
 
-    return false
+    try {
+      await switchChain({ chainId })
+      return true
+    } catch {
+      return false
+    }
   }
 }

package/src/evm/composables/ens.ts

@@ -1,6 +1,12 @@
 import { getPublicClient } from '@wagmi/core'
 import type { Config } from '@wagmi/vue'
-import { ensCache, fetchEnsFromIndexer, fetchEnsFromChain, ENS_KEYS_AVATAR, ENS_KEYS_PROFILE } from '../utils/ens'
+import {
+  ensCache,
+  fetchEnsFromIndexer,
+  fetchEnsFromChain,
+  ENS_KEYS_AVATAR,
+  ENS_KEYS_PROFILE,
+} from '../utils/ens'
 import type { EnsProfile } from '../utils/ens'
 
 type EnsMode = 'indexer' | 'chain'
@@ -10,12 +16,14 @@ interface UseEnsOptions {
 }
 
 interface EnsRuntimeConfig {
-  ens?: { indexer1?: string, indexer2?: string, indexer3?: string }
+  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[]
+  return [config.ens.indexer1, config.ens.indexer2, config.ens.indexer3].filter(
+    Boolean,
+  ) as string[]
 }
 
 async function resolve(
@@ -55,8 +63,12 @@ function useEnsBase(
   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 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(
@@ -65,9 +77,8 @@ function useEnsBase(
       const id = toValue(identifier)
       if (!id) return null
 
-      const strategies: EnsMode[] = mode.value === 'indexer'
-        ? ['indexer', 'chain']
-        : ['chain', 'indexer']
+      const strategies: EnsMode[] =
+        mode.value === 'indexer' ? ['indexer', 'chain'] : ['chain', 'indexer']
 
       return ensCache.fetch(cacheKey.value, () =>
         resolve(id, strategies, indexerUrls.value, $wagmi as Config, chainKeys),
@@ -80,11 +91,17 @@ function useEnsBase(
   )
 }
 
-export const useEns = (identifier: MaybeRefOrGetter<string | undefined>, options?: UseEnsOptions) =>
-  useEnsBase('resolve', identifier, [], options)
+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 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)
+export const useEnsProfile = (
+  identifier: MaybeRefOrGetter<string | undefined>,
+  options?: UseEnsOptions,
+) => useEnsBase('profile', identifier, [...ENS_KEYS_PROFILE], options)

package/src/evm/composables/gasPrice.ts

@@ -25,9 +25,10 @@ export const useGasPrice = () => {
     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),
+      gwei:
+        price.value > 2_000_000_000_000n
+          ? Math.round(parseFloat(formatGwei(price.value)))
+          : parseFloat(formatGwei(price.value)).toFixed(1),
       eth: formatEther(price.value),
     },
   }))

package/src/evm/composables/priceFeed.ts

@@ -53,10 +53,13 @@ function saveToStorage() {
   if (typeof window === 'undefined') return
 
   try {
-    localStorage.setItem(STORAGE_KEY, stringifyJSON({
-      ethUSDRaw: state.ethUSDRaw,
-      lastUpdated: state.lastUpdated,
-    }))
+    localStorage.setItem(
+      STORAGE_KEY,
+      stringifyJSON({
+        ethUSDRaw: state.ethUSDRaw,
+        lastUpdated: state.lastUpdated,
+      }),
+    )
   } catch {
     // Ignore storage errors
   }
@@ -68,12 +71,18 @@ export const usePriceFeed = () => {
   // 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 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)
+    const cents = (wei * (state.ethUSDRaw || 0n)) / 10n ** 18n / 10n ** 6n
     return formatPrice(Number(cents) / 100, 2)
   }
 

package/src/evm/utils/ens.ts

@@ -22,7 +22,15 @@ export interface EnsProfile {
 
 // --- Text record keys ---
 
-const ALL_KEYS = ['avatar', 'header', 'description', 'url', 'email', 'com.twitter', 'com.github'] as const
+const ALL_KEYS = [
+  'avatar',
+  'header',
+  'description',
+  'url',
+  'email',
+  'com.twitter',
+  'com.github',
+] as const
 
 export const ENS_KEYS_AVATAR = ['avatar'] as const
 export const ENS_KEYS_PROFILE = [...ALL_KEYS]
@@ -62,7 +70,7 @@ export async function fetchEnsFromChain(
 
   if (isAddr) {
     address = identifier
-    ens = await client.getEnsName({ address: identifier as Address }) ?? null
+    ens = (await client.getEnsName({ address: identifier as Address })) ?? null
   } else {
     ens = identifier
     const resolved = await client.getEnsAddress({ name: normalize(identifier) })
@@ -74,10 +82,17 @@ export async function fetchEnsFromChain(
 
   const name = normalize(ens)
   const results = await Promise.all(
-    keys.map(key => client.getEnsText({ name, key }).catch(() => null)),
+    keys.map((key) => client.getEnsText({ name, key }).catch(() => null)),
   )
 
-  return { address, ens, data: toProfileData(keys, results.map(r => r || '')) }
+  return {
+    address,
+    ens,
+    data: toProfileData(
+      keys,
+      results.map((r) => r || ''),
+    ),
+  }
 }
 
 // --- Helpers ---

package/src/evm/utils/price.ts

@@ -4,11 +4,13 @@ const replacer = (_: string, value: unknown) => {
 }
 
 const reviver = (_: string, value: unknown) => {
-  if (typeof value === 'string' && /^\d+n$/.test(value)) return BigInt(value.slice(0, -1))
+  if (typeof value === 'string' && /^\d+n$/.test(value))
+    return BigInt(value.slice(0, -1))
   return value
 }
 
-export const stringifyJSON = (obj: unknown): string => JSON.stringify(obj, replacer)
+export const stringifyJSON = (obj: unknown): string =>
+  JSON.stringify(obj, replacer)
 export const parseJSON = (json: string): unknown => JSON.parse(json, reviver)
 
 export const formatPrice = (num: number, digits: number = 2) =>