accounts 0.3.0 → 0.4.1

package/src/core/Dialog.test-d.ts

@@ -0,0 +1,19 @@
+import { describe, expectTypeOf, test } from 'vp/test'
+
+import type * as Dialog from './Dialog.js'
+import type * as Store from './Store.js'
+
+describe('Dialog', () => {
+  test('has name and setup returning open, close, destroy, syncRequests', () => {
+    expectTypeOf<Dialog.SetupFn.Parameters>().toEqualTypeOf<{
+      host: string
+      store: Store.Store
+    }>()
+    expectTypeOf<Dialog.Instance>().toMatchTypeOf<{
+      open: () => void
+      close: () => void
+      destroy: () => void
+      syncRequests: (requests: readonly Store.QueuedRequest[]) => Promise<void>
+    }>()
+  })
+})

package/src/core/Dialog.ts

@@ -0,0 +1,442 @@
+import * as Messenger from './Messenger.js'
+import type * as Store from './Store.js'
+
+/** Dialog interface — manages the iframe/popup lifecycle for cross-origin auth. */
+export type Dialog = SetupFn & Meta
+
+/** Static metadata attached to a dialog function. */
+export type Meta = {
+  /** Identifier for the dialog type (e.g. `'iframe'`, `'popup'`). */
+  name?: string | undefined
+}
+
+export type Instance = {
+  /** Close the dialog (hide iframe / close popup). */
+  close: () => void
+  /** Destroy the dialog (remove DOM elements, clean up). */
+  destroy: () => void
+  /** Open the dialog (show iframe / open popup). */
+  open: () => void
+  /** Sync the pending request queue to the remote auth app. */
+  syncRequests: (requests: readonly Store.QueuedRequest[]) => Promise<void>
+}
+
+/** The setup function a dialog must implement. */
+export type SetupFn = (parameters: SetupFn.Parameters) => Instance
+
+export declare namespace SetupFn {
+  type Parameters = {
+    /** URL of the Tempo Auth app. */
+    host: string
+    /** Reactive state store. */
+    store: Store.Store
+  }
+}
+
+export const defaultSize = { height: 440, width: 360 }
+
+/** Creates a dialog from metadata and a setup function. */
+export function define(meta: Meta, fn: SetupFn): Dialog {
+  const { name, ...rest } = meta
+  Object.defineProperty(fn, 'name', { value: name, configurable: true })
+  return Object.assign(fn, rest) as Dialog
+}
+
+/** Detects Safari (which does not support WebAuthn in cross-origin iframes). */
+export function isSafari(): boolean {
+  if (typeof navigator === 'undefined') return false
+  const ua = navigator.userAgent.toLowerCase()
+  return ua.includes('safari') && !ua.includes('chrome')
+}
+
+/** Creates an iframe dialog that embeds the auth app in a `<dialog>` element. */
+export function iframe(): Dialog {
+  if (typeof window === 'undefined') return noop()
+
+  return define({ name: 'iframe' }, (parameters) => {
+    const { host, store } = parameters
+
+    const fallback = popup()(parameters)
+
+    let open = false
+
+    const referrer = getReferrer()
+
+    const hostUrl = new URL(host)
+    hostUrl.searchParams.set('chainId', String(store.getState().chainId))
+    hostUrl.searchParams.set('mode', 'iframe')
+    if (referrer.icon) {
+      if (typeof referrer.icon === 'string') hostUrl.searchParams.set('icon', referrer.icon)
+      else {
+        hostUrl.searchParams.set('icon', referrer.icon.light)
+        hostUrl.searchParams.set('iconDark', referrer.icon.dark)
+      }
+    }
+
+    const root = document.createElement('dialog')
+    root.dataset.tempoWallet = ''
+
+    root.setAttribute('role', 'dialog')
+    root.setAttribute('aria-closed', 'true')
+    root.setAttribute('aria-label', 'Tempo Auth')
+    root.setAttribute('hidden', 'until-found')
+
+    Object.assign(root.style, {
+      background: 'transparent',
+      border: '0',
+      outline: '0',
+      padding: '0',
+      position: 'fixed',
+    })
+
+    document.body.appendChild(root)
+
+    const frame = document.createElement('iframe')
+    frame.dataset.testid = 'tempo-wallet'
+    frame.setAttribute(
+      'allow',
+      [
+        `publickey-credentials-get ${hostUrl.origin}`,
+        `publickey-credentials-create ${hostUrl.origin}`,
+        'clipboard-write',
+      ].join('; '),
+    )
+    frame.setAttribute('allowtransparency', 'true')
+    frame.setAttribute('tabindex', '0')
+    frame.setAttribute('title', 'Tempo Auth')
+    frame.src = hostUrl.toString()
+
+    Object.assign(frame.style, {
+      backgroundColor: 'transparent',
+      border: '0',
+      colorScheme: 'light dark',
+      height: '100%',
+      left: '0',
+      position: 'fixed',
+      top: '0',
+      width: '100%',
+    })
+
+    const style = document.createElement('style')
+    style.innerHTML = `
+        dialog[data-tempo-wallet]::backdrop {
+          background: transparent!important;
+        }
+      `
+
+    root.appendChild(style)
+    root.appendChild(frame)
+
+    const messenger = Messenger.bridge({
+      from: Messenger.fromWindow(window, { targetOrigin: hostUrl.origin }),
+      to: Messenger.fromWindow(frame.contentWindow!, {
+        targetOrigin: hostUrl.origin,
+      }),
+      waitForReady: true,
+    })
+
+    messenger.on('rpc-response', (response) => handleResponse(store, response))
+
+    let savedOverflow = ''
+    let opener: HTMLElement | null = null
+
+    const onBlur = () => handleBlur(store)
+
+    // 1Password extension adds `inert` attribute to `dialog` rendering it unusable.
+    const inertObserver = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        if (mutation.type !== 'attributes') continue
+        if (mutation.attributeName !== 'inert') continue
+        root.removeAttribute('inert')
+      }
+    })
+    inertObserver.observe(root, { attributeOldValue: true, attributes: true })
+
+    // dialog/page interactivity (no visibility change)
+    let dialogActive = false
+    const activatePage = () => {
+      if (!dialogActive) return
+      dialogActive = false
+
+      root.removeEventListener('cancel', onBlur)
+      root.removeEventListener('click', onBlur)
+      root.style.pointerEvents = 'none'
+      opener?.focus()
+      opener = null
+
+      document.body.style.overflow = savedOverflow
+    }
+    const activateDialog = () => {
+      if (dialogActive) return
+      dialogActive = true
+
+      root.addEventListener('cancel', onBlur)
+      root.addEventListener('click', onBlur)
+      frame.focus()
+      root.style.pointerEvents = 'auto'
+
+      savedOverflow = document.body.style.overflow
+      document.body.style.overflow = 'hidden'
+    }
+
+    // dialog visibility
+    let visible = false
+    const showDialog = () => {
+      if (visible) return
+      visible = true
+
+      if (document.activeElement instanceof HTMLElement) opener = document.activeElement
+
+      root.removeAttribute('hidden')
+      root.removeAttribute('aria-closed')
+      root.showModal()
+    }
+    const hideDialog = () => {
+      if (!visible) return
+      visible = false
+      root.setAttribute('hidden', 'true')
+      root.setAttribute('aria-closed', 'true')
+      root.close()
+
+      // 1Password extension sometimes adds `inert` to dialog siblings
+      // and does not clean up when dialog closes.
+      for (const sibling of root.parentNode ? Array.from(root.parentNode.children) : []) {
+        if (sibling === root) continue
+        if (!sibling.hasAttribute('inert')) continue
+        sibling.removeAttribute('inert')
+      }
+    }
+
+    return {
+      close() {
+        fallback.close()
+        open = false
+
+        hideDialog()
+        activatePage()
+      },
+      destroy() {
+        fallback.close()
+        open = false
+
+        activatePage()
+        hideDialog()
+
+        fallback.destroy()
+        messenger.destroy()
+        root.remove()
+        inertObserver.disconnect()
+      },
+      open() {
+        if (open) return
+        open = true
+
+        showDialog()
+        activateDialog()
+      },
+      async syncRequests(requests) {
+        // Safari does not support WebAuthn credential creation in iframes.
+        // Fall back to popup dialog.
+        const unsupported =
+          isSafari() &&
+          requests.some((x) => ['wallet_connect', 'eth_requestAccounts'].includes(x.request.method))
+
+        if (unsupported) {
+          fallback.syncRequests(requests)
+        } else {
+          const requiresConfirm = requests.some((x) => x.status === 'pending')
+          if (!open && requiresConfirm) this.open()
+          messenger.send('rpc-requests', {
+            account: getAccount(store),
+            chainId: store.getState().chainId,
+            requests,
+          })
+        }
+      },
+    }
+  })
+}
+
+/** Opens the auth app in a new browser window. */
+export function popup(options: popup.Options = {}): Dialog {
+  if (typeof window === 'undefined') return noop()
+
+  const { size = defaultSize } = options
+
+  return define({ name: 'popup' }, (parameters) => {
+    const { host, store } = parameters
+
+    let win: Window | null = null
+
+    function onBlur() {
+      if (win) handleBlur(store)
+    }
+
+    const offDetectClosed = (() => {
+      const timer = setInterval(() => {
+        if (win?.closed) handleBlur(store)
+      }, 100)
+      return () => clearInterval(timer)
+    })()
+
+    let messenger: Messenger.Bridge | undefined
+
+    return {
+      close() {
+        if (!win) return
+        win.close()
+        win = null
+      },
+      destroy() {
+        this.close()
+        window.removeEventListener('focus', onBlur)
+        messenger?.destroy()
+        offDetectClosed()
+      },
+      open() {
+        const referrer = getReferrer()
+
+        const hostUrl = new URL(host)
+        hostUrl.searchParams.set('chainId', String(store.getState().chainId))
+        hostUrl.searchParams.set('mode', 'popup')
+        if (referrer.icon) {
+          if (typeof referrer.icon === 'string') hostUrl.searchParams.set('icon', referrer.icon)
+          else {
+            hostUrl.searchParams.set('icon', referrer.icon.light)
+            hostUrl.searchParams.set('iconDark', referrer.icon.dark)
+          }
+        }
+
+        const left = (window.innerWidth - size.width) / 2 + window.screenX
+        const top = window.screenY + 100
+
+        win = window.open(
+          hostUrl.toString(),
+          '_blank',
+          `width=${size.width},height=${size.height},left=${left},top=${top}`,
+        )
+        if (!win) throw new Error('Failed to open popup')
+
+        messenger = Messenger.bridge({
+          from: Messenger.fromWindow(window, { targetOrigin: hostUrl.origin }),
+          to: Messenger.fromWindow(win, { targetOrigin: hostUrl.origin }),
+          waitForReady: true,
+        })
+
+        messenger.on('rpc-response', (response) => handleResponse(store, response))
+
+        window.removeEventListener('focus', onBlur)
+        window.addEventListener('focus', onBlur)
+      },
+      async syncRequests(requests) {
+        const requiresConfirm = requests.some((x) => x.status === 'pending')
+        if (requiresConfirm) {
+          if (!win || win.closed) this.open()
+          win?.focus()
+        }
+        messenger?.send('rpc-requests', {
+          account: getAccount(store),
+          chainId: store.getState().chainId,
+          requests,
+        })
+      },
+    }
+  })
+}
+
+export declare namespace popup {
+  type Options = {
+    /** Popup window dimensions. @default `{ width: 360, height: 440 }` */
+    size?: { width: number; height: number } | undefined
+  }
+}
+
+/** Returns a no-op dialog for SSR environments. */
+export function noop(): Dialog {
+  return define({ name: 'noop' }, () => ({
+    open() {},
+    close() {},
+    destroy() {},
+    async syncRequests() {},
+  }))
+}
+
+/** Updates the store with an RPC response from the remote auth app. */
+function handleResponse(
+  store: Store.Store,
+  response: { id: number; result?: unknown; error?: { code: number; message: string } | undefined },
+) {
+  store.setState((x) => ({
+    ...x,
+    requestQueue: x.requestQueue.map((queued) => {
+      if (queued.request.id !== response.id) return queued
+      if (response.error)
+        return {
+          request: queued.request,
+          error: response.error,
+          status: 'error' as const,
+        }
+      return {
+        request: queued.request,
+        result: response.result,
+        status: 'success' as const,
+      }
+    }),
+  }))
+}
+
+/** Marks all pending requests as rejected (user closed the dialog). */
+function handleBlur(store: Store.Store) {
+  store.setState((x) => ({
+    ...x,
+    requestQueue: x.requestQueue.map((queued) =>
+      queued.status === 'pending'
+        ? {
+            request: queued.request,
+            error: { code: 4001, message: 'User rejected the request.' },
+            status: 'error' as const,
+          }
+        : queued,
+    ),
+  }))
+}
+
+/** Returns the active account from the store, or `undefined` if none. */
+function getAccount(store: Store.Store): { address: string } | undefined {
+  const { accounts, activeAccount } = store.getState()
+  const account = accounts[activeAccount]
+  if (!account) return undefined
+  return { address: account.address }
+}
+
+/**
+ * Extracts referrer metadata from the host page.
+ * Must be called in the host page context (where `document` is accessible).
+ */
+function getReferrer(): getReferrer.ReturnType {
+  const icon = (() => {
+    const dark = document.querySelector(
+      'link[rel~="icon"][media="(prefers-color-scheme: dark)"]',
+    ) as HTMLLinkElement | null
+    const light = (document.querySelector(
+      'link[rel~="icon"][media="(prefers-color-scheme: light)"]',
+    ) ?? document.querySelector('link[rel~="icon"]')) as HTMLLinkElement | null
+
+    if (dark?.href && light?.href && dark.href !== light.href)
+      return { dark: dark.href, light: light.href }
+
+    const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+    return (isDark ? dark?.href : light?.href) ?? light?.href
+  })()
+
+  return { icon, title: document.title }
+}
+
+declare namespace getReferrer {
+  type ReturnType = {
+    /** Favicon URL, or separate light/dark URLs. */
+    icon: string | { light: string; dark: string } | undefined
+    /** Document title of the host page. */
+    title: string
+  }
+}

package/src/core/Expiry.ts

@@ -0,0 +1,34 @@
+/** Returns a unix timestamp (seconds) `n` days from now. */
+export function days(n: number) {
+  return Math.floor(Date.now() / 1000) + n * 24 * 60 * 60
+}
+
+/** Returns a unix timestamp (seconds) `n` hours from now. */
+export function hours(n: number) {
+  return Math.floor(Date.now() / 1000) + n * 60 * 60
+}
+
+/** Returns a unix timestamp (seconds) `n` minutes from now. */
+export function minutes(n: number) {
+  return Math.floor(Date.now() / 1000) + n * 60
+}
+
+/** Returns a unix timestamp (seconds) `n` months (30 days) from now. */
+export function months(n: number) {
+  return Math.floor(Date.now() / 1000) + n * 30 * 24 * 60 * 60
+}
+
+/** Returns a unix timestamp (seconds) `n` seconds from now. */
+export function seconds(n: number) {
+  return Math.floor(Date.now() / 1000) + n
+}
+
+/** Returns a unix timestamp (seconds) `n` weeks from now. */
+export function weeks(n: number) {
+  return Math.floor(Date.now() / 1000) + n * 7 * 24 * 60 * 60
+}
+
+/** Returns a unix timestamp (seconds) `n` years (365 days) from now. */
+export function years(n: number) {
+  return Math.floor(Date.now() / 1000) + n * 365 * 24 * 60 * 60
+}

package/src/core/Messenger.ts

@@ -0,0 +1,206 @@
+import type { RpcRequest, RpcResponse } from 'ox'
+
+import type * as Store from './Store.js'
+
+/** Messenger interface for cross-frame communication. */
+export type Messenger = {
+  /** Tear down all listeners. */
+  destroy: () => void
+  /** Subscribe to a topic. Returns an unsubscribe function. */
+  on: <const topic extends Topic>(
+    topic: topic | Topic,
+    listener: (payload: Payload<topic>, event: MessageEvent) => void,
+    id?: string | undefined,
+  ) => () => void
+  /** Send a message on a topic. */
+  send: <const topic extends Topic>(
+    topic: topic | Topic,
+    payload: Payload<topic>,
+    targetOrigin?: string | undefined,
+  ) => Promise<{ id: string; topic: topic; payload: Payload<topic> }>
+}
+
+/** Bridge messenger that waits for a `ready` signal from the remote frame. */
+export type Bridge = Messenger & {
+  /** Signal readiness (called by the remote frame). */
+  ready: () => void
+  /** Promise that resolves when the remote frame signals ready. */
+  waitForReady: () => Promise<void>
+}
+
+/** Message schema for cross-frame communication. */
+export type Schema = [
+  {
+    topic: 'ready'
+    payload: undefined
+  },
+  {
+    topic: 'rpc-requests'
+    payload: {
+      account: { address: string } | undefined
+      chainId: number
+      requests: readonly Store.QueuedRequest[]
+    }
+  },
+  {
+    topic: 'rpc-response'
+    payload: RpcResponse.RpcResponse & {
+      _request: RpcRequest.RpcRequest
+    }
+  },
+  {
+    topic: 'close'
+    payload: undefined
+  },
+]
+
+/** Union of all topic strings. */
+export type Topic = Schema[number]['topic']
+
+/** Payload for a given topic. */
+export type Payload<topic extends Topic> = Extract<Schema[number], { topic: topic }>['payload']
+
+/** Creates a messenger from a custom implementation. */
+export function from(messenger: Messenger): Messenger {
+  return messenger
+}
+
+/**
+ * Creates a messenger backed by `window.postMessage` / `addEventListener('message')`.
+ * Filters messages by `targetOrigin` when provided.
+ */
+export function fromWindow(w: Window, options: fromWindow.Options = {}): Messenger {
+  const { targetOrigin } = options
+  const listeners = new Map<string, (event: MessageEvent) => void>()
+
+  return from({
+    destroy() {
+      for (const listener of listeners.values()) w.removeEventListener('message', listener)
+      listeners.clear()
+    },
+    on(topic, listener, id) {
+      function onMessage(event: MessageEvent) {
+        if (event.data.topic !== topic) return
+        if (id && event.data.id !== id) return
+        if (targetOrigin && event.origin !== targetOrigin) return
+        listener(event.data.payload as never, event)
+      }
+      w.addEventListener('message', onMessage)
+      listeners.set(topic, onMessage)
+      return () => {
+        w.removeEventListener('message', onMessage)
+        listeners.delete(topic)
+      }
+    },
+    async send(topic, payload, target) {
+      const id = crypto.randomUUID()
+      w.postMessage(normalizeValue({ id, payload, topic }), target ?? targetOrigin ?? '*')
+      return { id, payload, topic } as never
+    },
+  })
+}
+
+export declare namespace fromWindow {
+  type Options = {
+    /** Only accept messages from this origin. Also used as the `targetOrigin` for `postMessage`. */
+    targetOrigin?: string | undefined
+  }
+}
+
+/**
+ * Bridges two window messengers. The bridge waits for a `ready` signal
+ * before sending messages when `waitForReady` is `true`.
+ */
+export function bridge(parameters: bridge.Parameters): Bridge {
+  const { from: from_, to, waitForReady = false } = parameters
+
+  let pending = false
+
+  const ready = withResolvers<void>()
+  from_.on('ready', ready.resolve)
+
+  const messenger = from({
+    destroy() {
+      from_.destroy()
+      to.destroy()
+      if (pending) ready.reject()
+    },
+    on(topic, listener, id) {
+      return from_.on(topic, listener, id)
+    },
+    async send(topic, payload) {
+      pending = true
+      if (waitForReady) await ready.promise.finally(() => (pending = false))
+      return to.send(topic, payload)
+    },
+  })
+
+  return {
+    ...messenger,
+    ready() {
+      void messenger.send('ready', undefined)
+    },
+    waitForReady() {
+      return ready.promise
+    },
+  }
+}
+
+export declare namespace bridge {
+  type Parameters = {
+    /** Listens on this messenger. */
+    from: Messenger
+    /** Sends to this messenger. */
+    to: Messenger
+    /** Buffer sends until `ready` is received. */
+    waitForReady?: boolean | undefined
+  }
+}
+
+/** Returns a no-op bridge for SSR environments. */
+export function noop(): Bridge {
+  return {
+    destroy() {},
+    on() {
+      return () => {}
+    },
+    send() {
+      return Promise.resolve(undefined as never)
+    },
+    ready() {},
+    waitForReady() {
+      return Promise.resolve()
+    },
+  }
+}
+
+function withResolvers<type>() {
+  let resolve: (value: type | PromiseLike<type>) => void = () => undefined
+  let reject: (reason?: unknown) => void = () => undefined
+  const promise = new Promise<type>((resolve_, reject_) => {
+    resolve = resolve_
+    reject = reject_
+  })
+  return { promise, reject, resolve }
+}
+
+/**
+ * Normalizes a value into a structured-clone compatible format.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/structuredClone
+ */
+function normalizeValue<type>(value: type): type {
+  if (Array.isArray(value)) return value.map(normalizeValue) as never
+  if (typeof value === 'function') return undefined as never
+  if (typeof value !== 'object' || value === null) return value
+  if (Object.getPrototypeOf(value) !== Object.prototype)
+    try {
+      return structuredClone(value)
+    } catch {
+      return undefined as never
+    }
+
+  const normalized: Record<string, unknown> = {}
+  for (const [k, v] of Object.entries(value)) normalized[k] = normalizeValue(v)
+  return normalized as never
+}