@1001-digital/components 1.2.2 → 1.3.0

package/src/evm/components/EvmInAppWalletSetup.vue

@@ -1,251 +0,0 @@
-<template>
-  <div class="in-app-wallet-setup">
-    <!-- Step: Choose -->
-    <div
-      v-if="step === 'choose'"
-      class="setup-step"
-    >
-      <p class="muted font-sm">{{ note }}</p>
-
-      <div class="setup-options">
-        <Button
-          class="block"
-          @click="startGenerate"
-        >
-          <Icon type="plus" />
-          <span>Create New Wallet</span>
-        </Button>
-        <Button
-          class="block"
-          @click="step = 'restore'"
-        >
-          <Icon type="key" />
-          <span>Use Existing Recovery Key</span>
-        </Button>
-      </div>
-      <Button
-        class="link muted small"
-        @click="$emit('back')"
-      >
-        <Icon type="chevron-left" />
-        <span>Back</span>
-      </Button>
-    </div>
-
-    <!-- Step: Generate -->
-    <div
-      v-else-if="step === 'generate'"
-      class="setup-step"
-    >
-      <p class="muted font-sm">
-        Write down these 12 words in order. Think of them as your secure
-        password so keep them safe - you will need them to restore your account.
-        They will not be shown again.
-      </p>
-
-      <div class="generated-words">
-        <div
-          v-for="(word, i) in generatedWords"
-          :key="i"
-          class="generated-word"
-        >
-          <span class="word-number">{{ i + 1 }}</span>
-          <span class="word-text">{{ word }}</span>
-        </div>
-      </div>
-
-      <div>
-        <FormCheckbox v-model="backupConfirmed">
-          I've saved my seed phrase
-        </FormCheckbox>
-      </div>
-
-      <Button
-        class="block"
-        :disabled="!backupConfirmed"
-        @click="confirmGenerated"
-      >
-        Continue
-      </Button>
-      <Button
-        class="link muted small"
-        @click="step = 'choose'"
-      >
-        <Icon type="chevron-left" />
-        <span>Back</span>
-      </Button>
-    </div>
-
-    <!-- Step: Restore -->
-    <div
-      v-else-if="step === 'restore'"
-      class="setup-step"
-    >
-      <p class="muted font-sm">
-        Enter your 12-word seed phrase to restore your wallet.
-      </p>
-
-      <EvmSeedPhraseInput
-        v-model="restorePhrase"
-        @valid="restoreValid = $event"
-        @submit="restoreWallet"
-      />
-
-      <Button
-        class="block"
-        :disabled="!restoreValid"
-        @click="restoreWallet"
-      >
-        Restore Wallet
-      </Button>
-      <Button
-        class="link muted small"
-        @click="step = 'choose'"
-      >
-        <Icon type="chevron-left" />
-        <span>Back</span>
-      </Button>
-    </div>
-
-    <!-- Step: Connecting -->
-    <div
-      v-else-if="step === 'connecting'"
-      class="setup-step"
-    >
-      <Loading
-        txt="Connecting wallet..."
-        spinner
-        stacked
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed } from 'vue'
-import { useConnect, useConnectors } from '@wagmi/vue'
-import Button from '../../base/components/Button.vue'
-import Icon from '../../base/components/Icon.vue'
-import Alert from '../../base/components/Alert.vue'
-import FormCheckbox from '../../base/components/FormCheckbox.vue'
-import Loading from '../../base/components/Loading.vue'
-import EvmSeedPhraseInput from './EvmSeedPhraseInput.vue'
-import { prepareInAppWallet } from '../connectors/inAppWallet'
-
-const props = withDefaults(
-  defineProps<{
-    note?: string
-  }>(),
-  {
-    note: 'Create a browser-based wallet stored locally on this device. Only you have access to your keys.',
-  },
-)
-
-const emit = defineEmits<{
-  connected: []
-  back: []
-}>()
-
-const connectors = useConnectors()
-const { mutateAsync: connectAsync } = useConnect()
-const inAppConnector = computed(() =>
-  connectors.value.find((c) => c.type === 'inAppWallet'),
-)
-
-type Step = 'choose' | 'generate' | 'restore' | 'connecting'
-const step = ref<Step>('choose')
-
-// Generate state
-const generatedMnemonic = ref('')
-const generatedWords = ref<string[]>([])
-const backupConfirmed = ref(false)
-
-// Restore state
-const restorePhrase = ref('')
-const restoreValid = ref(false)
-
-async function startGenerate() {
-  const { generateMnemonic, english } = await import('viem/accounts')
-  generatedMnemonic.value = generateMnemonic(english)
-  generatedWords.value = generatedMnemonic.value.split(' ')
-  backupConfirmed.value = false
-  step.value = 'generate'
-}
-
-async function connectWithMnemonic(mnemonic: string) {
-  await prepareInAppWallet(mnemonic)
-  await connectAsync({ connector: inAppConnector.value! })
-}
-
-async function confirmGenerated() {
-  step.value = 'connecting'
-  try {
-    await connectWithMnemonic(generatedMnemonic.value)
-    emit('connected')
-  } catch (e) {
-    console.error('Failed to connect in-app wallet:', e)
-    step.value = 'generate'
-  }
-}
-
-async function restoreWallet() {
-  if (!restoreValid.value) return
-  step.value = 'connecting'
-  try {
-    await connectWithMnemonic(restorePhrase.value)
-    emit('connected')
-  } catch (e) {
-    console.error('Failed to restore in-app wallet:', e)
-    step.value = 'restore'
-  }
-}
-</script>
-
-<style scoped>
-.in-app-wallet-setup {
-  display: grid;
-  gap: var(--spacer);
-}
-
-.setup-step {
-  display: grid;
-  gap: var(--spacer);
-}
-
-.setup-options {
-  display: grid;
-  gap: var(--spacer);
-}
-
-.generated-words {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: var(--spacer-sm);
-}
-
-.generated-word {
-  display: flex;
-  align-items: center;
-  gap: var(--spacer-sm);
-  border: var(--border);
-  border-radius: var(--border-radius);
-  padding: var(--spacer-sm);
-
-  .word-number {
-    font-size: var(--font-xs);
-    color: var(--muted);
-    min-width: 1.5em;
-    text-align: right;
-    user-select: none;
-  }
-
-  .word-text {
-    font-size: var(--font-sm);
-    font-family: var(--font-mono, monospace);
-  }
-}
-
-.link.muted {
-  justify-self: center;
-}
-</style>

package/src/evm/components/EvmMetaMaskQR.vue

@@ -1,34 +0,0 @@
-<template>
-  <EvmConnectorQR :uri="uri">
-    <template #instruction>
-      Scan the code in your MetaMask mobile app
-    </template>
-  </EvmConnectorQR>
-  <Button
-    class="link muted small"
-    @click="$emit('back')"
-  >
-    <Icon type="chevron-left" />
-    <span>Back</span>
-  </Button>
-</template>
-
-<script setup lang="ts">
-import EvmConnectorQR from './EvmConnectorQR.vue'
-import Button from '../../base/components/Button.vue'
-import Icon from '../../base/components/Icon.vue'
-
-defineProps<{
-  uri: string
-}>()
-
-defineEmits<{
-  back: []
-}>()
-</script>
-
-<style scoped>
-.link.muted {
-  justify-self: center;
-}
-</style>

package/src/evm/components/EvmProfile.vue

@@ -1,186 +0,0 @@
-<template>
-  <Button
-    @click="dialogOpen = true"
-    :class="className"
-  >
-    <slot
-      :address="address"
-      :display="display"
-      :ens-name="ensName"
-      :ens-avatar="ensAvatar"
-    >
-      {{ display }}
-    </slot>
-  </Button>
-
-  <Dialog
-    v-model:open="dialogOpen"
-    class="evm-profile"
-    title="Account"
-    compat
-  >
-    <div class="profile-header">
-      <div
-        class="banner"
-        :style="
-          ensHeader ? { backgroundImage: `url(${ensHeader})` } : undefined
-        "
-      />
-      <div class="avatar-wrapper">
-        <EvmAvatar
-          :address="address"
-          large
-        />
-      </div>
-    </div>
-
-    <div class="profile-identity">
-      <strong v-if="ensName">{{ ensName }}</strong>
-      <Button
-        class="link muted small"
-        @click="copyAddress"
-      >
-        <span>{{ shortAddr }}</span>
-        <Icon :type="copied ? 'check' : 'copy'" />
-      </Button>
-    </div>
-
-    <div class="profile-actions">
-      <slot name="actions" />
-
-      <EvmSwitchNetwork class-name="block">
-        <template #default="{ currentChain }">
-          <Icon type="wallet" />
-          <span>Switch Network ({{ currentChain?.name || 'Unknown' }})</span>
-        </template>
-      </EvmSwitchNetwork>
-
-      <Button
-        v-if="ensName"
-        class="block"
-        :to="`https://app.ens.domains/${ensName}`"
-        target="_blank"
-      >
-        <Icon type="link" />
-        <span>Manage ENS</span>
-      </Button>
-
-      <Button
-        class="block danger"
-        @click="disconnect"
-      >
-        <span>Disconnect</span>
-      </Button>
-    </div>
-  </Dialog>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, nextTick } from 'vue'
-import { useConnection, useDisconnect } from '@wagmi/vue'
-import { useClipboard } from '@vueuse/core'
-import { useConfirm } from '../../base/composables/confirm'
-import { useEnsProfile } from '../composables/ens'
-import { useResolveUri } from '../composables/uri'
-import { shortAddress } from '../utils/addresses'
-import Button from '../../base/components/Button.vue'
-import Dialog from '../../base/components/Dialog.vue'
-import Icon from '../../base/components/Icon.vue'
-import EvmAvatar from './EvmAvatar.vue'
-import EvmSwitchNetwork from './EvmSwitchNetwork.vue'
-
-defineProps<{
-  className?: string
-}>()
-
-const emit = defineEmits<{
-  disconnected: []
-}>()
-
-const { address } = useConnection()
-const { mutate: disconnectWallet } = useDisconnect()
-const { confirm } = useConfirm()
-const { data: ensData } = useEnsProfile(address)
-
-const { copy, copied } = useClipboard()
-const resolve = useResolveUri()
-
-const ensName = computed(() => ensData.value?.ens || null)
-const ensAvatar = computed(() => resolve(ensData.value?.data?.avatar))
-const ensHeader = computed(() => resolve(ensData.value?.data?.header))
-
-const shortAddr = computed(() =>
-  address.value ? shortAddress(address.value) : '',
-)
-
-const display = computed(() => ensName.value || shortAddr.value)
-
-const dialogOpen = ref(false)
-
-const copyAddress = () => {
-  if (address.value) copy(address.value)
-}
-
-const disconnect = async () => {
-  const confirmed = await confirm({
-    title: 'Disconnect Wallet',
-    description: 'Are you sure you want to disconnect your wallet?',
-    okText: 'Disconnect',
-  })
-
-  if (!confirmed) return
-
-  dialogOpen.value = false
-  await nextTick()
-  disconnectWallet()
-  emit('disconnected')
-}
-</script>
-
-<style scoped>
-.profile-header {
-  position: relative;
-  margin: calc(var(--spacer) * -3) calc(var(--spacer) * -1) 0;
-  margin-bottom: 0;
-  z-index: -1;
-
-  .banner {
-    aspect-ratio: 3 / 1;
-    width: 100%;
-    height: auto;
-    background-color: var(--gray-z-1);
-    background-size: cover;
-    background-position: center;
-    border-bottom: var(--border);
-  }
-
-  .avatar-wrapper {
-    display: flex;
-    justify-content: center;
-    margin-top: -10%;
-    position: relative;
-    z-index: 1;
-  }
-
-  :deep(.evm-avatar) {
-    border: 3px solid var(--background);
-  }
-}
-
-.profile-identity {
-  display: grid;
-  justify-items: center;
-  gap: var(--spacer-sm);
-
-  > strong {
-    font-size: var(--font-lg);
-  }
-}
-
-.profile-actions {
-  display: grid;
-  gap: var(--spacer);
-  padding-block-start: var(--spacer);
-
-}
-</style>

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>