@1001-digital/components 1.2.1 → 1.2.3

package/src/evm/components/EvmSeedPhraseInput.vue

@@ -1,193 +0,0 @@
-<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/evm/components/EvmSiwe.vue

@@ -1,190 +0,0 @@
-<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 from '../../base/components/Button.vue'
-import Alert from '../../base/components/Alert.vue'
-import Loading from '../../base/components/Loading.vue'
-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/evm/components/EvmSiweDialog.vue

@@ -1,93 +0,0 @@
-<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 from '../../base/components/Button.vue'
-import Dialog from '../../base/components/Dialog.vue'
-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/evm/components/EvmSwitchNetwork.vue

@@ -1,132 +0,0 @@
-<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 from '../../base/components/Button.vue'
-import Dialog from '../../base/components/Dialog.vue'
-import Icon from '../../base/components/Icon.vue'
-import Alert from '../../base/components/Alert.vue'
-import Loading from '../../base/components/Loading.vue'
-
-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>