@1001-digital/components.evm 1.2.2

package/src/components/EvmSeedPhraseInput.vue

@@ -0,0 +1,193 @@
+<template>
+  <div class="seed-phrase-input">
+    <div class="seed-phrase-grid">
+      <div
+        v-for="(_, i) in 12"
+        :key="i"
+        class="seed-word"
+        :class="{ invalid: words[i] && !isValidWord(words[i]) }"
+      >
+        <label :for="`seed-word-${i}`">{{ i + 1 }}</label>
+        <input
+          :id="`seed-word-${i}`"
+          :ref="
+            (el) => {
+              if (el) inputRefs[i] = el as HTMLInputElement
+            }
+          "
+          v-model="words[i]"
+          type="text"
+          autocomplete="off"
+          autocapitalize="none"
+          spellcheck="false"
+          :disabled="disabled"
+          @keydown="onKeydown($event, i)"
+          @paste="onPaste($event, i)"
+          @input="onInput(i)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed, onMounted } from 'vue'
+import { english } from 'viem/accounts'
+
+const props = defineProps<{
+  modelValue?: string
+  disabled?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  valid: [isValid: boolean]
+  submit: []
+}>()
+
+const wordSet = new Set(english)
+
+const words = ref<string[]>(Array.from({ length: 12 }, () => ''))
+const inputRefs = ref<HTMLInputElement[]>([])
+
+function isValidWord(word: string): boolean {
+  return wordSet.has(word.trim().toLowerCase())
+}
+
+const isValid = computed(() =>
+  words.value.every((w) => w.trim() !== '' && isValidWord(w)),
+)
+
+const phrase = computed(() =>
+  words.value.map((w) => w.trim().toLowerCase()).join(' '),
+)
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (!val) return
+    const incoming = val.trim().split(/\s+/)
+    if (incoming.length === 12) {
+      for (let i = 0; i < 12; i++) {
+        words.value[i] = incoming[i]!
+      }
+    }
+  },
+  { immediate: true },
+)
+
+watch(phrase, (val) => {
+  emit('update:modelValue', val)
+})
+
+watch(isValid, (val) => {
+  emit('valid', val)
+})
+
+function focusInput(index: number) {
+  const el = inputRefs.value[index]
+  if (el) {
+    el.focus()
+    el.select()
+  }
+}
+
+function onKeydown(event: KeyboardEvent, index: number) {
+  if (event.key === ' ' || (event.key === 'Enter' && index < 11)) {
+    event.preventDefault()
+    focusInput(index + 1)
+  } else if (event.key === 'Enter' && index === 11 && isValid.value) {
+    event.preventDefault()
+    emit('submit')
+  } else if (
+    event.key === 'Backspace' &&
+    words.value[index] === '' &&
+    index > 0
+  ) {
+    event.preventDefault()
+    focusInput(index - 1)
+  } else if (event.key === 'Tab' && !event.shiftKey && index === 11) {
+    // Allow natural tab out
+  } else if (event.key === 'Tab' && event.shiftKey && index === 0) {
+    // Allow natural tab out
+  }
+}
+
+function onPaste(event: ClipboardEvent, index: number) {
+  const text = event.clipboardData?.getData('text')
+  if (!text) return
+
+  const pasted = text.trim().split(/\s+/)
+  if (pasted.length > 1) {
+    event.preventDefault()
+    for (let i = 0; i < pasted.length && index + i < 12; i++) {
+      words.value[index + i] = pasted[i]!.toLowerCase()
+    }
+    const nextIndex = Math.min(index + pasted.length, 11)
+    focusInput(nextIndex)
+  }
+}
+
+function onInput(index: number) {
+  // Auto-advance if the word contains a space (mobile autocomplete)
+  const val = words.value[index]
+  if (val?.includes(' ')) {
+    const parts = val.trim().split(/\s+/)
+    words.value[index] = parts[0]!
+    if (parts.length > 1 && index < 11) {
+      for (let i = 1; i < parts.length && index + i < 12; i++) {
+        words.value[index + i] = parts[i]!
+      }
+      focusInput(Math.min(index + parts.length, 11))
+    }
+  }
+}
+
+onMounted(() => {
+  if (!props.disabled) {
+    focusInput(0)
+  }
+})
+</script>
+
+<style scoped>
+.seed-phrase-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--spacer-sm);
+}
+
+
+.seed-word {
+  display: flex;
+  align-items: center;
+  gap: var(--spacer-sm);
+  border: var(--border);
+  border-radius: var(--border-radius);
+  padding: var(--spacer-sm);
+  transition: border-color var(--speed);
+
+  &:focus-within {
+    border-color: var(--accent);
+  }
+
+  &.invalid {
+    border-color: var(--error);
+  }
+
+  label {
+    font-size: var(--font-xs);
+    color: var(--muted);
+    min-width: 1.5em;
+    text-align: right;
+    user-select: none;
+  }
+
+  input {
+    all: unset;
+    width: 100%;
+    font-size: var(--font-sm);
+    font-family: var(--font-mono, monospace);
+  }
+}
+</style>

package/src/components/EvmSiwe.vue

@@ -0,0 +1,188 @@
+<template>
+  <Loading
+    v-if="step === 'signing'"
+    spinner
+    stacked
+    :txt="connector?.name
+      ? `Requesting signature from ${connector.name}...`
+      : 'Requesting signature...'"
+  />
+
+  <Loading
+    v-else-if="step === 'verifying'"
+    spinner
+    stacked
+    txt="Verifying signature..."
+  />
+
+  <template v-else-if="step === 'complete'">
+    <slot name="complete">
+      <Alert type="info">
+        <p>Successfully signed in.</p>
+      </Alert>
+    </slot>
+  </template>
+
+  <template v-else-if="step === 'error'">
+    <Alert type="error">
+      <p>{{ errorMessage }}</p>
+    </Alert>
+    <Button
+      class="secondary"
+      @click="signIn"
+    >Try Again</Button>
+  </template>
+
+  <template v-else>
+    <slot name="idle">
+      <p v-if="props.statement">{{ props.statement }}</p>
+    </slot>
+    <Button @click="signIn">
+      Sign In
+    </Button>
+  </template>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { signMessage } from '@wagmi/core'
+import { useConfig, useConnection } from '@wagmi/vue'
+import type { Config } from '@wagmi/vue'
+import { Button, Alert, Loading } from '@1001-digital/components'
+import { createSiweMessage } from '../utils/siwe'
+import { useSiwe } from '../composables/siwe'
+
+type Step = 'idle' | 'signing' | 'verifying' | 'complete' | 'error'
+
+const props = defineProps<{
+  getNonce: () => Promise<string>
+  verify: (message: string, signature: string) => Promise<boolean>
+  domain?: string
+  statement?: string
+  uri?: string
+  resources?: string[]
+  requestId?: string
+  expirationTime?: string
+}>()
+
+const emit = defineEmits<{
+  authenticated: [{ address: `0x${string}`; chainId: number }]
+  error: [error: string]
+}>()
+
+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
+    if (re.test((current as { message?: string }).message || '')) return true
+    current = current.cause as Record<string, unknown> | undefined
+  }
+  return false
+}
+
+const config = useConfig()
+const { address, chainId, connector } = useConnection()
+const { setSession } = useSiwe()
+
+const step = ref<Step>('idle')
+const errorMessage = ref('')
+
+const signIn = async () => {
+  const currentAddress = address.value
+  const currentChainId = chainId.value
+
+  if (!currentAddress || !currentChainId) {
+    errorMessage.value = 'Wallet not connected.'
+    step.value = 'error'
+    emit('error', errorMessage.value)
+    return
+  }
+
+  errorMessage.value = ''
+
+  // Get nonce
+  let nonce: string
+  try {
+    nonce = await props.getNonce()
+  } catch {
+    errorMessage.value = 'Failed to get authentication nonce.'
+    step.value = 'error'
+    emit('error', errorMessage.value)
+    return
+  }
+
+  // Sign message
+  step.value = 'signing'
+  const message = createSiweMessage({
+    domain: props.domain || window.location.host,
+    address: currentAddress,
+    uri: props.uri || window.location.origin,
+    chainId: currentChainId,
+    nonce,
+    statement: props.statement,
+    expirationTime: props.expirationTime,
+    requestId: props.requestId,
+    resources: props.resources,
+  })
+
+  let signature: string
+  try {
+    signature = await signMessage(config as Config, { message })
+  } catch (e: unknown) {
+    if (isUserRejection(e)) {
+      errorMessage.value = 'Signature rejected by user.'
+    } else {
+      const err = e as { shortMessage?: string; message?: string }
+      errorMessage.value = err.shortMessage || err.message || 'Failed to sign message.'
+    }
+    step.value = 'error'
+    emit('error', errorMessage.value)
+    console.error('SIWE signing error:', e)
+    return
+  }
+
+  // Verify with backend
+  step.value = 'verifying'
+  try {
+    const verified = await props.verify(message, signature)
+
+    if (!verified) {
+      throw new Error('Signature verification failed')
+    }
+  } catch (e: unknown) {
+    const err = e as { message?: string }
+    errorMessage.value = err.message || 'Verification failed.'
+    step.value = 'error'
+    emit('error', errorMessage.value)
+    console.error('SIWE verification error:', e)
+    return
+  }
+
+  // Update shared authentication state
+  setSession({
+    address: currentAddress,
+    chainId: currentChainId,
+  })
+
+  step.value = 'complete'
+  emit('authenticated', {
+    address: currentAddress,
+    chainId: currentChainId,
+  })
+}
+
+const reset = () => {
+  step.value = 'idle'
+  errorMessage.value = ''
+}
+
+defineExpose({ reset })
+</script>
+
+<style scoped>
+.secondary {
+  margin-top: var(--spacer-sm);
+}
+</style>

package/src/components/EvmSiweDialog.vue

@@ -0,0 +1,92 @@
+<template>
+  <Button
+    v-if="!isAuthenticated"
+    @click="open = true"
+    :class="className"
+  >
+    <slot>Sign In</slot>
+  </Button>
+  <slot
+    v-else
+    name="authenticated"
+    :address="session?.address"
+    :sign-out="handleSignOut"
+  >
+    <Button
+      @click="handleSignOut"
+      :class="className"
+    >Sign Out</Button>
+  </slot>
+
+  <Dialog
+    v-if="!isAuthenticated"
+    title="Sign In with Ethereum"
+    v-model:open="open"
+    @closed="onClosed"
+  >
+    <EvmSiwe
+      ref="siweRef"
+      :get-nonce="getNonce"
+      :verify="verify"
+      :domain="domain"
+      :statement="statement"
+      :uri="uri"
+      :resources="resources"
+      :request-id="requestId"
+      :expiration-time="expirationTime"
+      @authenticated="onAuthenticated"
+      @error="(e) => emit('error', e)"
+    />
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { Button, Dialog } from '@1001-digital/components'
+import EvmSiwe from './EvmSiwe.vue'
+import { useSiwe } from '../composables/siwe'
+
+const props = defineProps<{
+  className?: string
+  getNonce: () => Promise<string>
+  verify: (message: string, signature: string) => Promise<boolean>
+  domain?: string
+  statement?: string
+  uri?: string
+  resources?: string[]
+  requestId?: string
+  expirationTime?: string
+}>()
+
+const emit = defineEmits<{
+  authenticated: [{ address: `0x${string}`; chainId: number }]
+  signedOut: []
+  error: [error: string]
+}>()
+
+const { isAuthenticated, session, signOut } = useSiwe()
+
+const open = ref(false)
+const siweRef = ref<InstanceType<typeof EvmSiwe> | null>(null)
+
+const onAuthenticated = (data: { address: `0x${string}`; chainId: number }) => {
+  open.value = false
+  emit('authenticated', data)
+}
+
+const onClosed = () => {
+  siweRef.value?.reset()
+}
+
+const handleSignOut = () => {
+  signOut()
+  emit('signedOut')
+}
+
+watch(isAuthenticated, (authenticated) => {
+  if (!authenticated) {
+    open.value = false
+    siweRef.value?.reset()
+  }
+})
+</script>

package/src/components/EvmSwitchNetwork.vue

@@ -0,0 +1,128 @@
+<template>
+  <template v-if="chains.length > 1">
+    <Button
+      @click="dialogOpen = true"
+      :class="className"
+    >
+      <slot :current-chain="currentChain">
+        {{ currentChain?.name || 'Unknown Network' }}
+      </slot>
+    </Button>
+
+    <Dialog
+      title="Switch Network"
+      v-model:open="dialogOpen"
+      @closed="onClosed"
+      compat
+    >
+      <Alert
+        v-if="errorMessage"
+        type="error"
+      >
+        {{ errorMessage }}
+      </Alert>
+
+      <Loading
+        v-if="switching"
+        spinner
+        stacked
+        :txt="`Switching to ${switchingTo}...`"
+      />
+
+      <div
+        v-if="!switching"
+        class="chain-list"
+      >
+        <Button
+          v-for="chain in chains"
+          :key="chain.id"
+          :disabled="chain.id === currentChainId || undefined"
+          :class="['block', 'chain-item', { active: chain.id === currentChainId }]"
+          @click="() => switchTo(chain)"
+        >
+          <span>{{ chain.name }}</span>
+          <Icon
+            v-if="chain.id === currentChainId"
+            type="check"
+          />
+        </Button>
+      </div>
+    </Dialog>
+  </template>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import type { Chain } from 'viem'
+import { useConfig, useConnection, useSwitchChain } from '@wagmi/vue'
+import { Button, Dialog, Icon, Alert, Loading } from '@1001-digital/components'
+
+defineProps<{
+  className?: string
+}>()
+
+const emit = defineEmits<{
+  switched: [{ chainId: number; name: string }]
+  error: [{ message: string }]
+}>()
+
+const config = useConfig()
+const { chainId: currentChainId } = useConnection()
+const { mutateAsync: switchChainAsync } = useSwitchChain()
+
+const chains = computed<readonly Chain[]>(() => config.chains)
+const currentChain = computed(() =>
+  chains.value.find((c) => c.id === currentChainId.value),
+)
+
+const dialogOpen = ref(false)
+const switching = ref(false)
+const switchingTo = ref('')
+const errorMessage = ref('')
+
+const switchTo = async (chain: Chain) => {
+  if (chain.id === currentChainId.value) return
+
+  switching.value = true
+  switchingTo.value = chain.name
+  errorMessage.value = ''
+
+  try {
+    await switchChainAsync({ chainId: chain.id })
+    emit('switched', { chainId: chain.id, name: chain.name })
+    dialogOpen.value = false
+  } catch (e: unknown) {
+    const message = e instanceof Error ? e.message : 'Failed to switch network.'
+    errorMessage.value =
+      message.includes('rejected') || message.includes('denied')
+        ? 'Network switch cancelled.'
+        : 'Failed to switch network. Please try again.'
+    emit('error', { message: errorMessage.value })
+  } finally {
+    switching.value = false
+    switchingTo.value = ''
+  }
+}
+
+const onClosed = () => {
+  switching.value = false
+  switchingTo.value = ''
+  errorMessage.value = ''
+}
+</script>
+
+<style scoped>
+.chain-list {
+  display: grid;
+  gap: var(--spacer-sm);
+}
+
+.chain-item {
+  justify-content: space-between;
+
+  &.active {
+    pointer-events: none;
+    opacity: 1;
+  }
+}
+</style>