@1001-digital/components 1.2.2 → 1.2.3

package/src/evm/components/EvmConnectorQR.vue

@@ -1,86 +0,0 @@
-<template>
-  <p>
-    <slot name="instruction">Scan the code in your wallet application</slot>
-  </p>
-  <div class="qr-frame">
-    <canvas ref="qrCanvas"></canvas>
-  </div>
-  <Button
-    @click="copyUri"
-    class="copy-uri tertiary small"
-  >
-    <Icon :type="isCopied ? 'check' : 'copy'" />
-    <span>
-      {{ isCopied ? 'Copied' : 'Copy Link' }}
-    </span>
-  </Button>
-</template>
-
-<script setup lang="ts">
-import { ref, watch, onMounted } from 'vue'
-import QRCode from 'qrcode'
-import { useClipboard } from '@vueuse/core'
-import Button from '../../base/components/Button.vue'
-import Icon from '../../base/components/Icon.vue'
-
-const props = defineProps<{
-  uri: string
-}>()
-
-const qrCanvas = ref<HTMLCanvasElement | null>(null)
-const { copy, copied: isCopied } = useClipboard()
-
-const generateQR = async () => {
-  if (!qrCanvas.value || !props.uri) return
-
-  try {
-    await QRCode.toCanvas(qrCanvas.value, props.uri, {
-      width: 300,
-      margin: 2,
-      color: {
-        dark: '#000000',
-        light: '#FFFFFF',
-      },
-    })
-  } catch (error) {
-    console.error('Failed to generate QR code:', error)
-  }
-}
-
-const copyUri = () => copy(props.uri)
-
-watch(() => props.uri, generateQR, { immediate: true })
-
-onMounted(() => {
-  generateQR()
-})
-</script>
-
-<style scoped>
-p {
-  text-align: center;
-  @mixin ui-font;
-  color: var(--muted);
-  font-size: var(--font-sm);
-}
-
-.qr-frame {
-  background: white;
-  padding: var(--spacer-sm);
-  max-width: 15rem;
-  max-height: 15rem;
-  border: var(--border);
-  border-radius: var(--border-radius);
-  margin: 0 auto;
-
-  canvas {
-    width: 100% !important;
-    height: 100% !important;
-  }
-}
-
-.copy-uri {
-  width: fit-content;
-  margin: 0 auto;
-}
-</style>

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>