@ic-reactor/mcp 0.0.0-stage → 0.0.0

package/examples/vite-wallet/src/Wallet.test.tsx

@@ -0,0 +1,89 @@
+// Scenario 3, for what the keys do not cover: component state. The whole
+// page on a test client; a switch of account, or a sign-out, remounts the
+// account's sections, so a transfer's outcome (which can carry the account's
+// balance) or a refusal shown to one account is not shown to the next.
+import { principal } from "@meantjs/schema"
+import { act, cleanup, fireEvent, screen } from "@testing-library/react"
+import { afterEach, describe, expect, it } from "vitest"
+import { Wallet } from "./App.tsx"
+import {
+  BOB,
+  clearEnvCookie,
+  createTestWallet,
+  ICP,
+  patiently,
+  renderWithWallet,
+  SEED_1,
+  SEED_2,
+  type TestWallet,
+} from "./test/test-wallet.tsx"
+
+let wallet: TestWallet | undefined
+afterEach(() => {
+  cleanup()
+  wallet?.client.dispose()
+  clearEnvCookie()
+})
+
+const page = () => document.body.textContent ?? ""
+const refusal =
+  "Refused by the canister: Insufficient funds: the balance is 7 ICP, less than the amount plus the fee."
+
+async function refusedTransfer(): Promise<TestWallet> {
+  const made = createTestWallet()
+  made.setBalance(SEED_1, 7n * ICP)
+  made.setBalance(SEED_2, 2n * ICP)
+  made.addContact(SEED_1, { name: "Bob", owner: principal(BOB) })
+  wallet = made
+  renderWithWallet(made, <Wallet />)
+  await screen.findByText("7 ICP", {}, patiently)
+  fireEvent.change(screen.getByLabelText("To (principal)"), {
+    target: { value: BOB },
+  })
+  fireEvent.change(screen.getByLabelText("Amount (ICP)"), {
+    target: { value: "100" },
+  })
+  fireEvent.click(screen.getByRole("button", { name: "Send" }))
+  await screen.findByText(refusal, {}, patiently)
+  return made
+}
+
+describe("the wallet page", () => {
+  it("shows the next account nothing the previous one saw, outcomes included", async () => {
+    const made = await refusedTransfer()
+
+    act(() => {
+      made.auth.switchTo(2)
+    })
+
+    expect(page()).not.toContain(refusal)
+    expect(page()).not.toContain("7 ICP")
+    expect(page()).not.toContain("Bob")
+    await screen.findByText("2 ICP", {}, patiently)
+    await screen.findByText(
+      "Fee 0.0001 ICP, paid on top of the amount.",
+      {},
+      patiently
+    )
+    expect(page()).not.toContain(refusal)
+  })
+
+  it("shows nothing of the account after a sign-out", async () => {
+    const made = await refusedTransfer()
+
+    await act(async () => {
+      await made.client.signOut()
+    })
+
+    expect(page()).not.toContain(refusal)
+    expect(page()).not.toContain("7 ICP")
+    expect(screen.getByTestId("principal").textContent).toBe("2vxsx-fae")
+    // Still not once the token is read again, for the anonymous caller.
+    await screen.findByText(
+      "Fee 0.0001 ICP, paid on top of the amount.",
+      {},
+      patiently
+    )
+    expect(page()).not.toContain(refusal)
+  })
+})

package/examples/vite-wallet/src/account-switch.test.tsx

@@ -0,0 +1,108 @@
+// Scenario 3: a switch of account empties the page for the next caller.
+// Every read is keyed by its caller, so after a switch the balance, the
+// profile and the contacts start from nothing for the new account, and an
+// answer read for the previous account never shows up under the new one.
+import { principal } from "@meantjs/schema"
+import { act, cleanup, screen, waitFor } from "@testing-library/react"
+import { afterEach, describe, expect, it } from "vitest"
+import { AddressBook } from "./AddressBook.tsx"
+import { Balance } from "./Balance.tsx"
+import { Profile } from "./Profile.tsx"
+import { SendIcp } from "./SendIcp.tsx"
+import {
+  BOB,
+  createTestWallet,
+  ICP,
+  patiently,
+  renderWithWallet,
+  SEED_1,
+  SEED_2,
+  clearEnvCookie,
+  type TestWallet,
+} from "./test/test-wallet.tsx"
+
+let wallet: TestWallet | undefined
+afterEach(() => {
+  cleanup()
+  wallet?.client.dispose()
+  clearEnvCookie()
+})
+
+/** Seed 1 holds 7 ICP, is called Ada and knows Bob; seed 2 has 2 ICP and Grace. */
+function twoAccounts(): TestWallet {
+  const made = createTestWallet()
+  made.setBalance(SEED_1, 7n * ICP)
+  made.setName(SEED_1, "Ada")
+  made.addContact(SEED_1, { name: "Bob", owner: principal(BOB) })
+  made.setBalance(SEED_2, 2n * ICP)
+  made.setName(SEED_2, "Grace")
+  return made
+}
+
+const page = () => document.body.textContent ?? ""
+
+describe("switching accounts", () => {
+  it("shows the next account's data, and never the previous account's", async () => {
+    wallet = twoAccounts()
+    renderWithWallet(
+      wallet,
+      <>
+        <Balance refreshMs={60_000} />
+        <SendIcp />
+        <Profile />
+        <AddressBook />
+      </>
+    )
+    await screen.findByText("7 ICP", {}, patiently)
+    await screen.findByText("Name: Ada", {}, patiently)
+    await screen.findByText("Bob", {}, patiently)
+
+    // Seed 2's first balance read is held by the ledger, so the page can be
+    // looked at while it has everything but that balance.
+    const release = wallet.holdNext("icrc1_balance_of")
+    const switched = wallet
+    act(() => {
+      switched.auth.switchTo(2)
+    })
+
+    // At once: seed 1's answers are not shown under seed 2.
+    expect(page()).not.toContain("7 ICP")
+    expect(page()).not.toContain("Ada")
+    expect(page()).not.toContain("Bob")
+    await screen.findByText("Name: Grace", {}, patiently)
+    await screen.findByTestId("no-contacts", {}, patiently)
+    // The token has loaded for seed 2 and its balance has not: the balance
+    // shows nothing, not seed 1's amount kept from the last key.
+    await screen.findByText("Fee 0.0001 ICP, paid on top of the amount.")
+    expect(screen.getByTestId("balance").textContent).toBe("…")
+
+    release()
+    await screen.findByText("2 ICP", {}, patiently)
+  })
+
+  it("never shows the next account a late answer to a read for the previous one", async () => {
+    wallet = twoAccounts()
+    renderWithWallet(wallet, <Balance refreshMs={60_000} />)
+    await screen.findByText("7 ICP", {}, patiently)
+
+    // Seed 1's balance is read again, and the ledger holds the answer while
+    // the account switches.
+    const release = wallet.holdNext("icrc1_balance_of")
+    wallet.setBalance(SEED_1, 9n * ICP)
+    const { client } = wallet
+    act(() => {
+      void client.queryClient.invalidateQueries()
+    })
+    await waitFor(() => expect(wallet?.callsOf("icrc1_balance_of")).toBe(2))
+    const switched = wallet
+    act(() => {
+      switched.auth.switchTo(2)
+    })
+    release()
+
+    await screen.findByText("2 ICP", {}, patiently)
+    // Seed 1's late answer (9 ICP) was never shown to seed 2.
+    expect(page()).not.toContain("9 ICP")
+    expect(page()).not.toContain("7 ICP")
+  })
+})

package/examples/vite-wallet/src/auth/dev-accounts.test.ts

@@ -0,0 +1,113 @@
+// Scenario 3: the dev account, an AuthLike of the app's own, on its own.
+import { describe, expect, it, vi } from "vitest"
+import {
+  createDevAccounts,
+  DEV_ACCOUNTS_KEY,
+  type AccountStorage,
+} from "./dev-accounts.ts"
+
+/** An in-memory stand-in for sessionStorage. */
+function memoryStorage(): AccountStorage & {
+  readonly map: Map<string, string>
+} {
+  const map = new Map<string, string>()
+  return {
+    map,
+    getItem: (key) => map.get(key) ?? null,
+    setItem: (key, value) => void map.set(key, value),
+  }
+}
+
+/** A fixed seed per account, so principals are the same in every run. */
+const seeds = () => {
+  let n = 0
+  return () => new Uint8Array(32).fill(++n)
+}
+
+describe("dev accounts", () => {
+  it("starts signed out, with an anonymous identity", async () => {
+    const accounts = createDevAccounts(memoryStorage(), seeds())
+    expect(accounts.getStatus()).toEqual({ state: "signed-out" })
+    expect(accounts.getPrincipal()).toBeUndefined()
+    expect((await accounts.getIdentity()).getPrincipal().toText()).toBe(
+      "2vxsx-fae"
+    )
+  })
+
+  it("signs in as account 1, and hands the client the same identity object every time", async () => {
+    const accounts = createDevAccounts(memoryStorage(), seeds())
+    await accounts.signIn()
+    expect(accounts.getStatus()).toEqual({ state: "signed-in" })
+    const principal = accounts.getPrincipal()?.toText()
+    expect(principal).toBeDefined()
+    const identity = await accounts.getIdentity()
+    expect(identity.getPrincipal().toText()).toBe(principal)
+    // One agent per identity object: the same object until the account changes.
+    expect(await accounts.getIdentity()).toBe(identity)
+    expect(accounts.list()).toEqual([{ number: 1, principal }])
+    expect(accounts.numberOf(principal ?? "")).toBe(1)
+  })
+
+  it("switches accounts with one notification and no signed-out state in between", async () => {
+    const accounts = createDevAccounts(memoryStorage(), seeds())
+    await accounts.signIn({ account: 1 })
+    const first = accounts.getPrincipal()?.toText()
+    const seen: string[] = []
+    accounts.subscribe(() =>
+      seen.push(
+        `${accounts.getStatus().state}:${accounts.getPrincipal()?.toText()}`
+      )
+    )
+
+    await accounts.signIn({ account: 2 })
+
+    const second = accounts.getPrincipal()?.toText()
+    expect(second).not.toBe(first)
+    expect(seen).toEqual([`signed-in:${second}`])
+  })
+
+  it("keeps the keys in storage: a reload signs in as the same principals", async () => {
+    const storage = memoryStorage()
+    const before = createDevAccounts(storage, seeds())
+    await before.signIn({ account: 1 })
+    await before.signIn({ account: 2 })
+    const principals = before.list().map((a) => a.principal)
+
+    // A reload of the tab: a new object over the same sessionStorage.
+    const after = createDevAccounts(storage, () => {
+      throw new Error("a reload makes no new key")
+    })
+    expect(after.getPrincipal()?.toText()).toBe(principals[1])
+    expect(after.list().map((a) => a.principal)).toEqual(principals)
+    await after.signOut()
+    await after.signIn()
+    expect(after.getPrincipal()?.toText()).toBe(principals[1])
+  })
+
+  it("signs out without forgetting the accounts, and tells listeners once", async () => {
+    const accounts = createDevAccounts(memoryStorage(), seeds())
+    await accounts.signIn()
+    const listener = vi.fn()
+    accounts.subscribe(listener)
+    await accounts.signOut()
+    await accounts.signOut()
+    expect(listener).toHaveBeenCalledTimes(1)
+    expect(accounts.getStatus()).toEqual({ state: "signed-out" })
+    expect(accounts.list()).toHaveLength(1)
+  })
+
+  it("refuses an account number that skips one, or is not a number from 1", async () => {
+    const accounts = createDevAccounts(memoryStorage(), seeds())
+    await expect(accounts.signIn({ account: 3 })).rejects.toThrow(RangeError)
+    await expect(accounts.signIn({ account: 0 })).rejects.toThrow(TypeError)
+    expect(accounts.getStatus()).toEqual({ state: "signed-out" })
+  })
+
+  it("starts over when storage holds something else", () => {
+    const storage = memoryStorage()
+    storage.setItem(DEV_ACCOUNTS_KEY, '{"seeds":["not hex"],"signedIn":1}')
+    const accounts = createDevAccounts(storage, seeds())
+    expect(accounts.getStatus()).toEqual({ state: "signed-out" })
+    expect(accounts.list()).toEqual([])
+  })
+})

package/examples/vite-wallet/src/auth/dev-accounts.ts

@@ -0,0 +1,216 @@
+// Scenario 3: a sign-in source of the app's own, as an `AuthLike`.
+//
+// "Dev account (local only)" signs in without a passkey: an Ed25519 key this
+// tab makes and keeps in sessionStorage. It is how a person or a script demos
+// the wallet on a local network in one click (no window to open, no prompt
+// to answer, several accounts to switch between), and how an account gets
+// test ICP: `pnpm faucet <its principal>`.
+//
+// The client takes any sign-in that has the six methods of `AuthLike`
+// (`getPrincipal`, `getStatus`, `getIdentity`, `subscribe`, `signIn`,
+// `signOut`), plus `dispose` if it holds anything. This object is one, with no
+// adapter; `wallet-auth.ts` puts it next to Internet Identity behind one
+// `auth`. Two rules it keeps for the client:
+//
+// - `getIdentity()` returns the same object until the account changes: the
+//   client builds one agent per identity object it is handed.
+// - Every change of who is signed in reaches `subscribe()`'s listeners once,
+//   and `getStatus()`/`getPrincipal()` already say the new answer when they
+//   run.
+//
+// Never offer this on a deployed site: the key is readable by any script on
+// the page. `main.tsx` makes it only when the page is local.
+import type { AuthLike } from "@ic-reactor/core"
+import { AnonymousIdentity, type Identity } from "@icp-sdk/core/agent"
+import { Ed25519KeyIdentity } from "@icp-sdk/core/identity"
+
+/** Where the accounts of this tab are kept. */
+export const DEV_ACCOUNTS_KEY = "vite-wallet:dev-accounts"
+
+/** The storage this reads and writes: `sessionStorage` in the app. */
+export type AccountStorage = Pick<Storage, "getItem" | "setItem">
+
+/** One dev account: its number in this tab, and its principal. */
+export interface DevAccount {
+  readonly number: number
+  readonly principal: string
+}
+
+/** What `signIn()` takes: an account number, or none for the last one used. */
+export interface DevSignIn {
+  readonly account?: number
+}
+
+export interface DevAccounts extends AuthLike {
+  /** The accounts this tab has made, numbered from 1. */
+  list(): readonly DevAccount[]
+  /** The number of the account whose principal is `principal`, if it is one. */
+  numberOf(principal: string): number | undefined
+  /**
+   * Signs in as account `account`, made on first use; with no account, the
+   * one signed in last (account 1 the first time). Signed in as one account,
+   * signing in as another is a switch: listeners hear one change, never a
+   * signed-out state in between. `account` may be at most one past the last
+   * account made.
+   */
+  signIn(options?: DevSignIn): Promise<void>
+  /** Signs out. The keys stay, so signing in again returns to the same principals. */
+  signOut(): Promise<void>
+}
+
+/** What is kept: the 32-byte seed of each account, and who is signed in. */
+interface Saved {
+  readonly seeds: readonly string[]
+  readonly signedIn: number | null
+  readonly last: number | null
+}
+
+const EMPTY: Saved = { seeds: [], signedIn: null, last: null }
+
+const toHex = (bytes: Uint8Array) =>
+  Array.from(bytes, (b) => b.toString(16).padStart(2, "0")).join("")
+
+const fromHex = (hex: string) =>
+  Uint8Array.from(hex.match(/../g) ?? [], (pair) => parseInt(pair, 16))
+
+/** What `storage` holds, or nothing when it holds something else. */
+function read(storage: AccountStorage): Saved {
+  try {
+    const saved: unknown = JSON.parse(
+      storage.getItem(DEV_ACCOUNTS_KEY) ?? "null"
+    )
+    if (
+      typeof saved === "object" &&
+      saved !== null &&
+      "seeds" in saved &&
+      Array.isArray(saved.seeds) &&
+      saved.seeds.every(
+        (seed: unknown) =>
+          typeof seed === "string" && /^[0-9a-f]{64}$/.test(seed)
+      )
+    ) {
+      const seeds: string[] = saved.seeds
+      const valid = (n: unknown): number | null =>
+        typeof n === "number" &&
+        Number.isInteger(n) &&
+        n >= 1 &&
+        n <= seeds.length
+          ? n
+          : null
+      return {
+        seeds,
+        signedIn: "signedIn" in saved ? valid(saved.signedIn) : null,
+        last: "last" in saved ? valid(saved.last) : null,
+      }
+    }
+  } catch {
+    // Not JSON: start over.
+  }
+  return EMPTY
+}
+
+/** The account number `options` asks for, or why it is not one. */
+function accountIn(options: unknown): number | undefined {
+  if (options === undefined || options === null) return undefined
+  const account = (options as { account?: unknown }).account
+  if (account === undefined) return undefined
+  if (
+    typeof account !== "number" ||
+    !Number.isInteger(account) ||
+    account < 1
+  ) {
+    throw new TypeError(
+      `A dev account is a number from 1, got ${String(account)}.`
+    )
+  }
+  return account
+}
+
+/**
+ * The dev accounts of one tab, kept in `storage`.
+ *
+ * @param newSeed - Makes the 32 secret bytes of a new account. Tests pass a
+ * fixed one; the app uses the browser's random numbers.
+ */
+export function createDevAccounts(
+  storage: AccountStorage,
+  newSeed: () => Uint8Array = () => crypto.getRandomValues(new Uint8Array(32))
+): DevAccounts {
+  let saved = read(storage)
+  const identities = new Map<number, Identity>()
+  const listeners = new Set<() => void>()
+  const anonymous = new AnonymousIdentity()
+
+  /** The identity of account `n`: one object per account, made once. */
+  const identityOf = (n: number): Identity => {
+    let identity = identities.get(n)
+    if (identity === undefined) {
+      const seed = saved.seeds[n - 1]
+      if (seed === undefined) throw new RangeError(`No dev account ${n}.`)
+      identity = Ed25519KeyIdentity.generate(fromHex(seed))
+      identities.set(n, identity)
+    }
+    return identity
+  }
+
+  const change = (next: Saved) => {
+    saved = next
+    storage.setItem(DEV_ACCOUNTS_KEY, JSON.stringify(next))
+    // A copy: a listener may unsubscribe as it runs.
+    for (const listener of [...listeners]) listener()
+  }
+
+  return {
+    getPrincipal: () =>
+      saved.signedIn === null
+        ? undefined
+        : identityOf(saved.signedIn).getPrincipal(),
+    getStatus: () => ({
+      state: saved.signedIn === null ? "signed-out" : "signed-in",
+    }),
+    getIdentity: async () =>
+      saved.signedIn === null ? anonymous : identityOf(saved.signedIn),
+    subscribe(listener) {
+      listeners.add(listener)
+      return () => {
+        listeners.delete(listener)
+      }
+    },
+    async signIn(options?: DevSignIn) {
+      const account = accountIn(options) ?? saved.last ?? 1
+      if (account > saved.seeds.length + 1) {
+        throw new RangeError(
+          `Make dev account ${saved.seeds.length + 1} before account ${account}.`
+        )
+      }
+      if (saved.signedIn === account) return
+      const seeds =
+        account === saved.seeds.length + 1
+          ? [...saved.seeds, toHex(newSeed())]
+          : saved.seeds
+      change({ seeds, signedIn: account, last: account })
+    },
+    async signOut() {
+      if (saved.signedIn !== null) change({ ...saved, signedIn: null })
+    },
+    list: () =>
+      saved.seeds.map((_seed, i) => ({
+        number: i + 1,
+        principal: identityOf(i + 1)
+          .getPrincipal()
+          .toText(),
+      })),
+    numberOf(principal) {
+      const index = saved.seeds.findIndex(
+        (_seed, i) =>
+          identityOf(i + 1)
+            .getPrincipal()
+            .toText() === principal
+      )
+      return index === -1 ? undefined : index + 1
+    },
+    // No `dispose()`: the accounts belong to the tab, not to a client, and a
+    // client that is disposed removes its listener through the function
+    // `subscribe()` returned.
+  }
+}

package/examples/vite-wallet/src/auth/local-page.test.ts

@@ -0,0 +1,28 @@
+// Where the dev account is offered: a page served from this machine.
+import { describe, expect, it } from "vitest"
+import { isLocalPage } from "./local-page.ts"
+
+const page = (origin: string) => ({
+  origin,
+  hostname: new URL(origin).hostname,
+})
+
+describe("a local page", () => {
+  it.each([
+    "http://localhost:5175",
+    "http://app.localhost:5175",
+    "http://127.0.0.1:5185",
+    "http://[::1]:5175",
+  ])("%s is local", (origin) => {
+    expect(isLocalPage(page(origin))).toBe(true)
+  })
+
+  it.each([
+    "https://abcde-aaaaa-aaaaa-aaaaa-cai.icp0.io",
+    "https://notlocalhost.com",
+    "https://localhost.example.com",
+    "https://wallet.example.com",
+  ])("%s is not", (origin) => {
+    expect(isLocalPage(page(origin))).toBe(false)
+  })
+})

package/examples/vite-wallet/src/auth/local-page.ts

@@ -0,0 +1,20 @@
+// Whether the page is served from this machine: the only place the dev
+// account is offered. The same test ic-reactor applies before it trusts the
+// ic_env cookie: localhost, its subdomains, and the loopback addresses.
+
+/** The part of `window.location` this reads. */
+export interface PageLocation {
+  readonly hostname: string
+  readonly origin: string
+}
+
+export function isLocalPage(page: PageLocation): boolean {
+  const { hostname } = page
+  return (
+    hostname === "localhost" ||
+    hostname.endsWith(".localhost") ||
+    /^127\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(hostname) ||
+    hostname === "[::1]" ||
+    hostname === "::1"
+  )
+}