@1001-digital/components 1.0.1 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1001-digital/components",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "type": "module",
   "sideEffects": [
     "*.css"

package/src/base/components/Globals.vue

@@ -1,6 +1,8 @@
 <template>
-  <Toasts />
-  <ConfirmDialog />
+  <Toasts>
+    <ConfirmDialog />
+    <slot />
+  </Toasts>
 </template>
 
 <script setup lang="ts">

package/src/base/components/Toasts.vue

@@ -3,6 +3,8 @@
     :duration="duration"
     :swipe-direction="swipeDirection"
   >
+    <slot />
+
     <ToastRoot
       v-for="toast in toasts"
       :key="toast.id"
@@ -40,7 +42,7 @@
           :model-value="toast.progress === true ? null : toast.progress"
         />
         <ToastAction
-          v-if="toast.action"
+          v-if="toast.action && !toast.action.persistent"
           :alt-text="toast.action.label"
           :as="Actions"
           class="left"
@@ -52,6 +54,17 @@
             {{ toast.action.label }}
           </Button>
         </ToastAction>
+        <Actions
+          v-if="toast.action?.persistent"
+          class="left"
+        >
+          <Button
+            class="small tertiary"
+            @click="toast.action!.onClick()"
+          >
+            {{ toast.action.label }}
+          </Button>
+        </Actions>
       </section>
     </ToastRoot>
 

package/src/base/composables/toast.ts

@@ -3,6 +3,7 @@ import { ref } from 'vue'
 export interface ToastAction {
   label: string
   onClick: () => void
+  persistent?: boolean
 }
 
 export type ToastVariant = 'info' | 'success' | 'error'

package/src/evm/components/EvmConnect.vue

@@ -20,8 +20,13 @@
     v-model:open="chooseModalOpen"
     @closed="onModalClosed"
   >
+    <EvmInAppWalletSetup
+      v-if="showInAppSetup"
+      @connected="onInAppConnected"
+      @back="showInAppSetup = false"
+    />
     <Alert
-      v-if="errorMessage"
+      v-else-if="errorMessage"
       type="error"
     >
       {{ errorMessage }}
@@ -77,6 +82,17 @@
         />
         <span>Safe</span>
       </Button>
+      <Button
+        v-if="inAppConnector"
+        @click="showInAppSetup = true"
+        class="choose-connector"
+      >
+        <img
+          :src="`${base}icons/wallets/in-app.svg`"
+          alt="Seed Phrase"
+        />
+        <span>In App</span>
+      </Button>
       <Button
         to="https://ethereum.org/wallets/"
         target="_blank"
@@ -106,6 +122,7 @@ import Loading from '../../base/components/Loading.vue'
 import EvmAccount from './EvmAccount.vue'
 import EvmMetaMaskQR from './EvmMetaMaskQR.vue'
 import EvmWalletConnectWallets from './EvmWalletConnectWallets.vue'
+import EvmInAppWalletSetup from './EvmInAppWalletSetup.vue'
 import { useBaseURL } from '../composables/base'
 
 const ICONS: Record<string, string> = {
@@ -115,6 +132,7 @@ const ICONS: Record<string, string> = {
   'Rabby Wallet': 'rabby.svg',
   Rainbow: 'rainbow.svg',
   Safe: 'safe.png',
+  'In App': 'in-app.svg',
   WalletConnect: 'walletconnect.svg',
 }
 
@@ -137,6 +155,11 @@ const connectors = useConnectors()
 const { mutateAsync: connectAsync } = useConnect()
 const { address, isConnected } = useConnection()
 
+const inAppConnector = computed(() =>
+  connectors.value.find((c) => c.type === 'inAppWallet'),
+)
+const showInAppSetup = ref(false)
+
 const showConnect = computed(() => !isConnected.value)
 const shownConnectors = computed(() => {
   const unique = Array.from(
@@ -147,8 +170,11 @@ const shownConnectors = computed(() => {
 
   const filtered =
     unique.length > 1
-      ? unique.filter((c) => c.id !== 'injected' && c.id !== 'safe')
-      : unique
+      ? unique.filter(
+          (c) =>
+            c.id !== 'injected' && c.id !== 'safe' && c.type !== 'inAppWallet',
+        )
+      : unique.filter((c) => c.type !== 'inAppWallet')
 
   return filtered.sort((a, b) => {
     const priorityA = PRIORITY[a.name] ?? 5
@@ -247,6 +273,11 @@ const login = async (connector: Connector) => {
   }
 }
 
+const onInAppConnected = () => {
+  chooseModalOpen.value = false
+  showInAppSetup.value = false
+}
+
 const onModalClosed = () => {
   errorMessage.value = ''
   isConnecting.value = false
@@ -254,6 +285,7 @@ const onModalClosed = () => {
   metaMaskUri.value = ''
   walletConnectUri.value = ''
   safeDeepLink.value = false
+  showInAppSetup.value = false
 }
 
 const check = () =>
@@ -276,6 +308,7 @@ onMounted(() => check())
     width: 100%;
     inline-size: auto;
     justify-content: flex-start;
+    padding-inline-start: var(--ui-padding-inline);
 
     img,
     .default-wallet-icon {

package/src/evm/components/EvmInAppWalletSetup.vue

@@ -0,0 +1,258 @@
+<template>
+  <div class="in-app-wallet-setup">
+    <!-- Step: Choose -->
+    <div
+      v-if="step === 'choose'"
+      class="setup-step"
+    >
+      <div class="setup-options">
+        <Button @click="startGenerate">
+          <Icon type="plus" />
+          <span>Create New Wallet</span>
+        </Button>
+        <Button @click="step = 'restore'">
+          <Icon type="key" />
+          <span>I Have a Seed Phrase</span>
+        </Button>
+      </div>
+      <Button
+        class="link muted small"
+        @click="$emit('back')"
+      >
+        <Icon type="arrow-left" />
+        <span>Back</span>
+      </Button>
+    </div>
+
+    <!-- Step: Generate -->
+    <div
+      v-else-if="step === 'generate'"
+      class="setup-step"
+    >
+      <Alert type="info">
+        Write down these 12 words in order. You will need them to restore your wallet. They will not be shown again.
+      </Alert>
+
+      <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>
+
+      <label class="confirm-backup">
+        <input
+          v-model="backupConfirmed"
+          type="checkbox"
+        />
+        <span>I've saved my seed phrase</span>
+      </label>
+
+      <Button
+        :disabled="!backupConfirmed"
+        @click="confirmGenerated"
+      >
+        Continue
+      </Button>
+      <Button
+        class="link muted small"
+        @click="step = 'choose'"
+      >
+        <Icon type="arrow-left" />
+        <span>Back</span>
+      </Button>
+    </div>
+
+    <!-- Step: Restore -->
+    <div
+      v-else-if="step === 'restore'"
+      class="setup-step"
+    >
+      <p class="muted">Enter your 12-word seed phrase to restore your wallet.</p>
+
+      <EvmSeedPhraseInput
+        v-model="restorePhrase"
+        @valid="restoreValid = $event"
+        @submit="restoreWallet"
+      />
+
+      <Button
+        :disabled="!restoreValid"
+        @click="restoreWallet"
+      >
+        Restore Wallet
+      </Button>
+      <Button
+        class="link muted small"
+        @click="step = 'choose'"
+      >
+        <Icon type="arrow-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 Loading from '../../base/components/Loading.vue'
+import EvmSeedPhraseInput from './EvmSeedPhraseInput.vue'
+import { prepareInAppWallet } from '../connectors/inAppWallet'
+
+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);
+
+  :deep(button),
+  :deep(.button) {
+    width: 100%;
+  }
+}
+
+.generated-words {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--spacer-sm);
+}
+
+@media (min-width: 600px) {
+  .generated-words {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+.generated-word {
+  display: flex;
+  align-items: center;
+  gap: var(--spacer-xs);
+  border: var(--border);
+  border-radius: var(--border-radius);
+  padding: var(--spacer-xs) var(--spacer-sm);
+
+  .word-number {
+    font-size: var(--font-xs);
+    color: var(--muted);
+    min-width: 1.5em;
+    text-align: right;
+  }
+
+  .word-text {
+    font-size: var(--font-sm);
+    font-family: var(--font-mono, monospace);
+  }
+}
+
+.confirm-backup {
+  display: flex;
+  align-items: center;
+  gap: var(--spacer-sm);
+  cursor: pointer;
+  font-size: var(--font-sm);
+  user-select: none;
+
+  input[type='checkbox'] {
+    width: auto;
+  }
+}
+
+.link.muted {
+  justify-self: center;
+  font-size: var(--font-xs);
+}
+
+p.muted {
+  font-size: var(--font-sm);
+  color: var(--muted);
+}
+</style>

package/src/evm/components/EvmProfile.vue

@@ -17,6 +17,7 @@
     v-model:open="dialogOpen"
     class="evm-profile"
     title="Account"
+    compat
   >
     <div class="profile-header">
       <div
@@ -26,7 +27,10 @@
         "
       />
       <div class="avatar-wrapper">
-        <EvmAvatar :address="address" large />
+        <EvmAvatar
+          :address="address"
+          large
+        />
       </div>
     </div>
 

package/src/evm/components/EvmSeedPhraseInput.vue

@@ -0,0 +1,196 @@
+<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);
+}
+
+@media (min-width: 600px) {
+  .seed-phrase-grid {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+.seed-word {
+  display: flex;
+  align-items: center;
+  gap: var(--spacer-xs);
+  border: var(--border);
+  border-radius: var(--border-radius);
+  padding: var(--spacer-xs) 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/EvmSwitchNetwork.vue

@@ -12,6 +12,7 @@
     title="Switch Network"
     v-model:open="dialogOpen"
     @closed="onClosed"
+    compat
   >
     <Alert
       v-if="errorMessage"
@@ -94,9 +95,10 @@ const switchTo = async (chain: Chain) => {
     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.'
+    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

package/src/evm/components/EvmTransactionFlow.vue

@@ -261,6 +261,7 @@ const initializeRequest = async (request = cachedRequest.value) => {
     action: {
       label: 'View on Block Explorer',
       onClick: () => window.open(link, '_blank'),
+      persistent: true,
     },
   })
 

package/src/evm/connectors/inAppWallet.ts

@@ -0,0 +1,220 @@
+import { createConnector } from '@wagmi/core'
+import {
+  type Address,
+  type Hex,
+  createPublicClient,
+  createWalletClient,
+  custom,
+  getAddress,
+  hexToBigInt,
+  hexToNumber,
+  http,
+  numberToHex,
+} from 'viem'
+import { privateKeyToAccount, type PrivateKeyAccount } from 'viem/accounts'
+
+const STORAGE_KEY = 'evm:in-app-wallet-pk'
+
+/**
+ * Derive a private key from a BIP39 mnemonic and store it in localStorage.
+ * Call this before `connectAsync({ connector })`.
+ */
+export async function prepareInAppWallet(mnemonic: string): Promise<Address> {
+  const { mnemonicToAccount } = await import('viem/accounts')
+  const { bytesToHex } = await import('viem')
+
+  const normalized = mnemonic.trim().toLowerCase().replace(/\s+/g, ' ')
+  const hdAccount = mnemonicToAccount(normalized)
+  const hdKey = hdAccount.getHdKey()
+  const pk = bytesToHex(hdKey.privateKey!) as `0x${string}`
+
+  localStorage.setItem(STORAGE_KEY, pk)
+  return hdAccount.address
+}
+
+export type InAppWalletParameters = {
+  storageKey?: string
+}
+
+inAppWallet.type = 'inAppWallet' as const
+
+export function inAppWallet(parameters: InAppWalletParameters = {}) {
+  const key = parameters.storageKey ?? STORAGE_KEY
+
+  type Provider =
+    ReturnType<typeof custom> extends (...args: infer A) => infer R ? R : never
+
+  return createConnector<Provider>((config) => {
+    let account: PrivateKeyAccount | null = null
+    let currentChainId: number = config.chains[0].id
+
+    function loadAccount(): PrivateKeyAccount | null {
+      if (typeof window === 'undefined') return null
+      try {
+        const stored = localStorage.getItem(key)
+        if (stored?.startsWith('0x')) {
+          account = privateKeyToAccount(stored as `0x${string}`)
+          return account
+        }
+      } catch {}
+      return null
+    }
+
+    function getChain(chainId?: number) {
+      return (
+        config.chains.find((c) => c.id === (chainId ?? currentChainId)) ??
+        config.chains[0]
+      )
+    }
+
+    return {
+      id: 'inAppWallet',
+      name: 'In App',
+      type: inAppWallet.type,
+
+      async connect({ chainId } = {}) {
+        const acct = account ?? loadAccount()
+        if (!acct) throw new Error('No in-app wallet key found in storage')
+
+        if (chainId) currentChainId = chainId
+
+        return {
+          accounts: [getAddress(acct.address)],
+          chainId: currentChainId,
+        }
+      },
+
+      async disconnect() {
+        account = null
+        if (typeof window !== 'undefined') {
+          localStorage.removeItem(key)
+        }
+      },
+
+      async getAccounts() {
+        const acct = account ?? loadAccount()
+        return acct ? [getAddress(acct.address)] : []
+      },
+
+      async getChainId() {
+        return currentChainId
+      },
+
+      async getProvider() {
+        const chain = getChain()
+        const transport = config.transports?.[chain.id] ?? http()
+
+        const request = async ({
+          method,
+          params,
+        }: {
+          method: string
+          params?: unknown[]
+        }): Promise<unknown> => {
+          // Account methods
+          if (method === 'eth_accounts' || method === 'eth_requestAccounts') {
+            return account ? [account.address] : []
+          }
+          if (method === 'eth_chainId') {
+            return numberToHex(currentChainId)
+          }
+
+          // Signing methods — handled locally
+          if (method === 'personal_sign') {
+            if (!account) throw new Error('Not connected')
+            const [data] = params as [Hex, Address]
+            return account.signMessage({ message: { raw: data } })
+          }
+          if (method === 'eth_signTypedData_v4') {
+            if (!account) throw new Error('Not connected')
+            const [, typedDataJson] = params as [Address, string]
+            const typedData = JSON.parse(typedDataJson)
+            return account.signTypedData(typedData)
+          }
+          if (method === 'eth_sign') {
+            if (!account) throw new Error('Not connected')
+            const [, data] = params as [Address, Hex]
+            return account.sign!({ hash: data })
+          }
+
+          // Send transaction — sign locally, broadcast via RPC
+          if (method === 'eth_sendTransaction') {
+            if (!account) throw new Error('Not connected')
+            const [tx] = params as [Record<string, string>]
+            const walletClient = createWalletClient({
+              account,
+              chain,
+              transport,
+            })
+            return walletClient.sendTransaction({
+              chain,
+              to: tx.to as Address,
+              data: tx.data as Hex | undefined,
+              value: tx.value ? hexToBigInt(tx.value as Hex) : undefined,
+              gas: tx.gas ? hexToBigInt(tx.gas as Hex) : undefined,
+              nonce:
+                tx.nonce != null ? hexToNumber(tx.nonce as Hex) : undefined,
+            })
+          }
+
+          // Chain switching
+          if (method === 'wallet_switchEthereumChain') {
+            const [{ chainId: hexChainId }] = params as [
+              { chainId: `0x${string}` },
+            ]
+            const newChainId = hexToNumber(hexChainId)
+            const chain = config.chains.find((c) => c.id === newChainId)
+            if (!chain) throw new Error('Chain not configured')
+            currentChainId = newChainId
+            config.emitter.emit('change', { chainId: newChainId })
+            return null
+          }
+
+          // Everything else — forward to RPC
+          const publicClient = createPublicClient({ chain, transport })
+          return (
+            publicClient as unknown as {
+              request: (args: {
+                method: string
+                params?: unknown[]
+              }) => Promise<unknown>
+            }
+          ).request({ method, params: params as unknown[] })
+        }
+
+        return custom({ request })({ retryCount: 0 })
+      },
+
+      async isAuthorized() {
+        const acct = account ?? loadAccount()
+        return !!acct
+      },
+
+      async switchChain({ chainId }) {
+        const chain = config.chains.find((c) => c.id === chainId)
+        if (!chain) throw new Error('Chain not configured')
+        currentChainId = chainId
+        config.emitter.emit('change', { chainId })
+        return chain
+      },
+
+      onAccountsChanged(accounts) {
+        if (accounts.length === 0) this.onDisconnect()
+        else
+          config.emitter.emit('change', {
+            accounts: accounts.map((a) => getAddress(a)),
+          })
+      },
+
+      onChainChanged(chain) {
+        const chainId = Number(chain)
+        config.emitter.emit('change', { chainId })
+      },
+
+      onDisconnect() {
+        config.emitter.emit('disconnect')
+        account = null
+      },
+    }
+  })
+}

package/src/evm/index.ts

@@ -34,6 +34,9 @@ export { usePriceFeed } from './composables/priceFeed'
 export { useWalletExplorer } from './composables/walletExplorer'
 export type { ExplorerWallet } from './composables/walletExplorer'
 
+// Connectors
+export { inAppWallet, prepareInAppWallet } from './connectors/inAppWallet'
+
 // Components
 export { default as EvmAccount } from './components/EvmAccount.vue'
 export { default as EvmAvatar } from './components/EvmAvatar.vue'
@@ -45,3 +48,5 @@ export { default as EvmMetaMaskQR } from './components/EvmMetaMaskQR.vue'
 export { default as EvmWalletConnectQR } from './components/EvmWalletConnectQR.vue'
 export { default as EvmWalletConnectWallets } from './components/EvmWalletConnectWallets.vue'
 export { default as EvmTransactionFlow } from './components/EvmTransactionFlow.vue'
+export { default as EvmSeedPhraseInput } from './components/EvmSeedPhraseInput.vue'
+export { default as EvmInAppWalletSetup } from './components/EvmInAppWalletSetup.vue'