mppx 0.5.3 → 0.5.5

package/src/tempo/server/Charge.test.ts

@@ -154,6 +154,7 @@ describe('tempo', () => {
       const { receipt } = await Actions.token.transferSync(client, {
         account: accounts[1],
         amount: BigInt(challenge1.request.amount),
+        memo: Attribution.encode({ challengeId: challenge1.id, serverId: realm }) as Hex.Hex,
         to: challenge1.request.recipient as Hex.Hex,
         token: challenge1.request.currency as Hex.Hex,
       })
@@ -231,6 +232,7 @@ describe('tempo', () => {
       const { receipt } = await Actions.token.transferSync(client, {
         account: accounts[1],
         amount: BigInt(challenge1.request.amount),
+        memo: Attribution.encode({ challengeId: challenge1.id, serverId: realm }) as Hex.Hex,
         to: challenge1.request.recipient as Hex.Hex,
         token: challenge1.request.currency as Hex.Hex,
       })
@@ -314,6 +316,7 @@ describe('tempo', () => {
       const { receipt } = await Actions.token.transferSync(client, {
         account: accounts[1],
         amount: BigInt(challenge1.request.amount),
+        memo: Attribution.encode({ challengeId: challenge1.id, serverId: realm }) as Hex.Hex,
         to: challenge1.request.recipient as Hex.Hex,
         token: challenge1.request.currency as Hex.Hex,
       })
@@ -477,6 +480,7 @@ describe('tempo', () => {
       const { receipt } = await Actions.token.transferSync(client, {
         account: accounts[1],
         amount: BigInt(challenge1.request.amount),
+        memo: Attribution.encode({ challengeId: challenge1.id, serverId: realm }) as Hex.Hex,
         to: challenge1.request.recipient as Hex.Hex,
         token: challenge1.request.currency as Hex.Hex,
       })
@@ -554,6 +558,7 @@ describe('tempo', () => {
       const { receipt } = await Actions.token.transferSync(client, {
         account: accounts[1],
         amount: BigInt(challenge1.request.amount),
+        memo: Attribution.encode({ challengeId: challenge1.id, serverId: realm }) as Hex.Hex,
         to: challenge1.request.recipient as Hex.Hex,
         token: challenge1.request.currency as Hex.Hex,
       })
@@ -635,6 +640,7 @@ describe('tempo', () => {
       const { receipt } = await Actions.token.transferSync(client, {
         account: accounts[1],
         amount: BigInt(challenge.request.amount),
+        memo: Attribution.encode({ challengeId: challenge.id, serverId: realm }) as Hex.Hex,
         to: challenge.request.recipient as Hex.Hex,
         token: challenge.request.currency as Hex.Hex,
       })
@@ -1570,7 +1576,7 @@ describe('tempo', () => {
       })
       const request = challenge.request
 
-      const memo = Attribution.encode({ serverId: challenge.realm })
+      const memo = Attribution.encode({ challengeId: challenge.id, serverId: challenge.realm })
 
       // Build a transaction with the valid transfer + a rogue extra call
       const transferCall = Actions.token.transfer.call({
@@ -2880,7 +2886,11 @@ describe('tempo', () => {
 
       expect(challenge.request.methodDetails?.memo).toBeUndefined()
 
-      const memo = Attribution.encode({ serverId: challenge.realm, clientId: 'test-app' })
+      const memo = Attribution.encode({
+        challengeId: challenge.id,
+        clientId: 'test-app',
+        serverId: challenge.realm,
+      })
       expect(Attribution.isMppMemo(memo)).toBe(true)
       expect(Attribution.verifyServer(memo, realm)).toBe(true)
 
@@ -2926,7 +2936,7 @@ describe('tempo', () => {
         methods: [tempo_client.charge()],
       })
 
-      const memo = Attribution.encode({ serverId: challenge.realm })
+      const memo = Attribution.encode({ challengeId: challenge.id, serverId: challenge.realm })
       const decoded = Attribution.decode(memo)
       expect(decoded).not.toBeNull()
       expect(decoded!.clientFingerprint).toBeNull()
@@ -2986,7 +2996,7 @@ describe('tempo', () => {
       httpServer.close()
     })
 
-    test('server accepts plain transfer without memo', async () => {
+    test('server rejects plain transfer without challenge-bound memo', async () => {
       const httpServer = await Http.createServer(async (req, res) => {
         const result = await Mppx_server.toNodeListener(
           server.charge({ amount: '1', decimals: 6 }),
@@ -3018,7 +3028,197 @@ describe('tempo', () => {
         const response = await fetch(httpServer.url, {
           headers: { Authorization: Credential.serialize(credential) },
         })
-        expect(response.status).toBe(200)
+        expect(response.status).toBe(402)
+        const body = (await response.json()) as { detail: string }
+        expect(body.detail).toContain('memo is not bound to this challenge')
+      }
+
+      httpServer.close()
+    })
+
+    test('server rejects hash with wrong challenge nonce (stolen tx)', async () => {
+      const httpServer = await Http.createServer(async (req, res) => {
+        const result = await Mppx_server.toNodeListener(
+          server.charge({ amount: '1', decimals: 6 }),
+        )(req, res)
+        if (result.status === 402) return
+        res.end('OK')
+      })
+
+      // Get two different challenges
+      const response1 = await fetch(httpServer.url)
+      expect(response1.status).toBe(402)
+      const challenge1 = Challenge.fromResponse(response1, {
+        methods: [tempo_client.charge()],
+      })
+
+      const response2 = await fetch(httpServer.url)
+      expect(response2.status).toBe(402)
+      const challenge2 = Challenge.fromResponse(response2, {
+        methods: [tempo_client.charge()],
+      })
+
+      // Legitimate transfer bound to challenge1
+      const memo = Attribution.encode({ challengeId: challenge1.id, serverId: realm })
+      const { receipt } = await Actions.token.transferSync(client, {
+        account: accounts[1],
+        amount: BigInt(challenge1.request.amount),
+        memo: memo as Hex.Hex,
+        to: challenge1.request.recipient as Hex.Hex,
+        token: challenge1.request.currency as Hex.Hex,
+      })
+
+      // Attacker tries to use this tx hash against challenge2
+      const credential = Credential.from({
+        challenge: challenge2,
+        payload: { hash: receipt.transactionHash, type: 'hash' as const },
+      })
+
+      {
+        const response = await fetch(httpServer.url, {
+          headers: { Authorization: Credential.serialize(credential) },
+        })
+        expect(response.status).toBe(402)
+        const body = (await response.json()) as { detail: string }
+        expect(body.detail).toContain('memo is not bound to this challenge')
+      }
+
+      httpServer.close()
+    })
+
+    test('server rejects hash with non-MPP memo', async () => {
+      const httpServer = await Http.createServer(async (req, res) => {
+        const result = await Mppx_server.toNodeListener(
+          server.charge({ amount: '1', decimals: 6 }),
+        )(req, res)
+        if (result.status === 402) return
+        res.end('OK')
+      })
+
+      const response = await fetch(httpServer.url)
+      expect(response.status).toBe(402)
+
+      const challenge = Challenge.fromResponse(response, {
+        methods: [tempo_client.charge()],
+      })
+
+      // Transfer with an arbitrary non-MPP memo
+      const arbitraryMemo =
+        '0xdeadbeefdeadbeefdeadbeefdeadbeefdeadbeefdeadbeefdeadbeefdeadbeef' as Hex.Hex
+      const { receipt } = await Actions.token.transferSync(client, {
+        account: accounts[1],
+        amount: BigInt(challenge.request.amount),
+        memo: arbitraryMemo,
+        to: challenge.request.recipient as Hex.Hex,
+        token: challenge.request.currency as Hex.Hex,
+      })
+
+      const credential = Credential.from({
+        challenge,
+        payload: { hash: receipt.transactionHash, type: 'hash' as const },
+      })
+
+      {
+        const response = await fetch(httpServer.url, {
+          headers: { Authorization: Credential.serialize(credential) },
+        })
+        expect(response.status).toBe(402)
+        const body = (await response.json()) as { detail: string }
+        expect(body.detail).toContain('memo is not bound to this challenge')
+      }
+
+      httpServer.close()
+    })
+
+    test('server rejects hash when challenge nonce is on dust transfer, not payment', async () => {
+      const dedupStore = Store.memory()
+      const chargeServer = Mppx_server.create({
+        methods: [
+          tempo_server.charge({
+            getClient() {
+              return client
+            },
+            currency: asset,
+            account: accounts[0],
+            store: dedupStore,
+          }),
+        ],
+        realm,
+        secretKey,
+      })
+
+      const httpServer = await Http.createServer(async (req, res) => {
+        const result = await Mppx_server.toNodeListener(
+          chargeServer.charge({ amount: '1', decimals: 6 }),
+        )(req, res)
+        if (result.status === 402) return
+        res.end('OK')
+      })
+
+      // Get two challenges
+      const response1 = await fetch(httpServer.url)
+      expect(response1.status).toBe(402)
+      const challengeA = Challenge.fromResponse(response1, {
+        methods: [tempo_client.charge()],
+      })
+
+      const response2 = await fetch(httpServer.url)
+      expect(response2.status).toBe(402)
+      const challengeB = Challenge.fromResponse(response2, {
+        methods: [tempo_client.charge()],
+      })
+
+      // Craft a multi-call tx: primary payment with challengeA's nonce,
+      // plus a same-currency dust transfer with challengeB's nonce.
+      // Without matched-log binding, the dust transfer would satisfy
+      // challengeB's binding check on the same tx hash.
+      const memoA = Attribution.encode({ challengeId: challengeA.id, serverId: realm })
+      const memoB = Attribution.encode({ challengeId: challengeB.id, serverId: realm })
+
+      // Broadcast a multi-call tx: payment to the merchant with challengeA's
+      // nonce, plus a same-currency dust transfer with challengeB's nonce.
+      const prepared = await prepareTransactionRequest(client, {
+        account: accounts[1]!,
+        calls: [
+          Actions.token.transfer.call({
+            amount: BigInt(challengeA.request.amount),
+            memo: memoA as Hex.Hex,
+            to: challengeA.request.recipient as Hex.Hex,
+            token: challengeA.request.currency as Hex.Hex,
+          }),
+          // Dust transfer with challengeB's nonce — the exploit vector
+          Actions.token.transfer.call({
+            amount: 1n,
+            memo: memoB as Hex.Hex,
+            to: accounts[2].address,
+            token: challengeA.request.currency as Hex.Hex,
+          }),
+        ],
+        nonceKey: 'expiring',
+      } as never)
+      prepared.gas = prepared.gas! + 5_000n
+      const sig = await signTransaction(client, prepared as never)
+      const { transactionHash } = await (
+        await import('viem/actions')
+      ).sendRawTransactionSync(client, {
+        serializedTransaction: sig,
+      })
+
+      // Submit hash against challengeB — the matched payment log (to the
+      // merchant for the correct amount) carries challengeA's nonce. The dust
+      // transfer carries challengeB's nonce but should NOT satisfy the check
+      // since it wasn't the matched payment log.
+      {
+        const credential = Credential.from({
+          challenge: challengeB,
+          payload: { hash: transactionHash, type: 'hash' as const },
+        })
+        const response = await fetch(httpServer.url, {
+          headers: { Authorization: Credential.serialize(credential) },
+        })
+        expect(response.status).toBe(402)
+        const body = (await response.json()) as { detail: string }
+        expect(body.detail).toContain('memo is not bound to this challenge')
       }
 
       httpServer.close()

package/src/tempo/server/Charge.ts

@@ -1,4 +1,10 @@
-import { decodeFunctionData, keccak256, parseEventLogs, type TransactionReceipt } from 'viem'
+import {
+  decodeFunctionData,
+  formatUnits,
+  keccak256,
+  parseEventLogs,
+  type TransactionReceipt,
+} from 'viem'
 import {
   getTransactionReceipt,
   sendRawTransaction,
@@ -8,14 +14,17 @@ import {
   call as viem_call,
 } from 'viem/actions'
 import { tempo as tempo_chain } from 'viem/chains'
-import { Abis, Transaction } from 'viem/tempo'
+import { Abis, Actions, Transaction } from 'viem/tempo'
 
 import { PaymentError, VerificationFailedError } from '../../Errors.js'
 import * as Expires from '../../Expires.js'
 import type { LooseOmit, NoExtraKeys } from '../../internal/types.js'
 import * as Method from '../../Method.js'
+import type * as Html from '../../server/internal/html/config.ts'
 import * as Store from '../../Store.js'
 import * as Client from '../../viem/Client.js'
+import type * as z from '../../zod.js'
+import * as Attribution from '../Attribution.js'
 import * as Account from '../internal/account.js'
 import * as TempoAddress from '../internal/address.js'
 import * as Charge_internal from '../internal/charge.js'
@@ -77,7 +86,35 @@ export function charge<const parameters extends charge.Parameters>(
       recipient,
     } as unknown as Defaults,
 
-    html: html ? { config: {}, content: htmlContent } : undefined,
+    html: html
+      ? {
+          config: {},
+          content: htmlContent,
+          formatAmount: async (request: z.output<typeof Methods.charge.schema.request>) => {
+            try {
+              const chainId = request.methodDetails?.chainId
+              if (chainId === undefined) throw new Error('no chainId')
+              const client = await getClient({ chainId })
+              const metadata = await Actions.token.getMetadata(client, {
+                token: request.currency as `0x${string}`,
+              })
+              const symbol =
+                new Intl.NumberFormat('en', {
+                  style: 'currency',
+                  currency: metadata.currency,
+                  currencyDisplay: 'narrowSymbol',
+                })
+                  .formatToParts(0)
+                  .find((p) => p.type === 'currency')?.value ?? metadata.currency
+              return `${symbol}${formatUnits(BigInt(request.amount), metadata.decimals)}`
+            } catch {
+              return `$${request.amount}`
+            }
+          },
+          text: typeof html === 'object' ? html.text : undefined,
+          theme: typeof html === 'object' ? html.theme : undefined,
+        }
+      : undefined,
 
     // TODO: dedupe `{charge,session}.request`
     async request({ credential, request }) {
@@ -144,12 +181,22 @@ export function charge<const parameters extends charge.Parameters>(
 
           const expectedTransfers = getExpectedTransfers({ amount, memo, methodDetails, recipient })
           const receipt = await getTransactionReceipt(client, { hash })
-          assertTransferLogs(receipt, {
+          const matchedLogs = assertTransferLogs(receipt, {
             currency,
             sender: receipt.from,
             transfers: expectedTransfers,
           })
 
+          // Only verify challenge binding when using auto-generated attribution memos.
+          // Explicit memos (set by the server) are strictly matched by assertTransferLogs
+          // but are NOT challenge-bound — callers that set explicit memos are responsible
+          // for ensuring memo uniqueness per challenge to prevent cross-challenge hash reuse.
+          if (!memo)
+            assertChallengeBoundMemo(matchedLogs, {
+              challengeId: challenge.id,
+              realm: challenge.realm,
+            })
+
           await markHashUsed(store, hash)
 
           return toReceipt(receipt)
@@ -299,7 +346,13 @@ export declare namespace charge {
 
   type Parameters = {
     /** Render payment page when Accept header is text/html (e.g. in browsers) */
-    html?: boolean | undefined
+    html?:
+      | boolean
+      | {
+          text?: Html.Text
+          theme?: Html.Theme
+        }
+      | undefined
     /** Testnet mode. */
     testnet?: boolean | undefined
     /**
@@ -465,6 +518,18 @@ function decodeTransferCall(
   return null
 }
 
+type TransferLog =
+  | {
+      kind: 'transfer'
+      args: { from: `0x${string}`; to: `0x${string}`; amount: bigint }
+      address: `0x${string}`
+    }
+  | {
+      kind: 'memo'
+      args: { from: `0x${string}`; to: `0x${string}`; amount: bigint; memo: `0x${string}` }
+      address: `0x${string}`
+    }
+
 function assertTransferLogs(
   receipt: TransactionReceipt,
   parameters: {
@@ -472,7 +537,7 @@ function assertTransferLogs(
     sender: `0x${string}`
     transfers: readonly ExpectedTransfer[]
   },
-) {
+): TransferLog[] {
   const transferLogs = parseEventLogs({
     abi: Abis.tip20,
     eventName: 'Transfer',
@@ -485,8 +550,11 @@ function assertTransferLogs(
     logs: receipt.logs,
   }).map((log) => ({ ...log, kind: 'memo' as const }))
 
-  const logs = [...transferLogs, ...memoLogs]
+  // Prefer memo logs so allowAnyMemo matches TransferWithMemo before Transfer,
+  // preserving the memo for challenge binding verification.
+  const logs = [...memoLogs, ...transferLogs]
   const used = new Set<number>()
+  const matched: TransferLog[] = []
 
   // Match memo-specific transfers before wildcards to avoid greedy
   // consumption of memo-bearing logs by allowAnyMemo entries.
@@ -519,7 +587,10 @@ function assertTransferLogs(
     }
 
     used.add(matchIndex)
+    matched.push(logs[matchIndex]! as TransferLog)
   }
+
+  return matched
 }
 
 /** @internal */
@@ -582,6 +653,28 @@ function toReceipt(receipt: TransactionReceipt) {
   } as const
 }
 
+/**
+ * Asserts that at least one of the matched payment logs carries a
+ * challenge-bound memo nonce (keccak256(challengeId)[0..6] in bytes 25–31).
+ * Only checks logs that were matched by `assertTransferLogs`, not the
+ * entire receipt — preventing unrelated dust transfers from satisfying
+ * the binding.
+ * @internal
+ */
+function assertChallengeBoundMemo(
+  matchedLogs: readonly TransferLog[],
+  parameters: { challengeId: string; realm: string },
+) {
+  const bound = matchedLogs.some((log) => {
+    if (log.kind !== 'memo') return false
+    if (!Attribution.verifyServer(log.args.memo, parameters.realm)) return false
+    return Attribution.verifyChallengeBinding(log.args.memo, parameters.challengeId)
+  })
+
+  if (!bound)
+    throw new MismatchError('Payment verification failed: memo is not bound to this challenge.', {})
+}
+
 /** @internal */
 class MismatchError extends PaymentError {
   override readonly name = 'MismatchError'

package/src/tempo/server/internal/html/main.ts

@@ -3,21 +3,50 @@ import { Json } from 'ox'
 import { createClient, custom, http } from 'viem'
 import { tempoModerato, tempoLocalnet } from 'viem/chains'
 
-import type * as Challenge from '../../../../Challenge.js'
 import { tempo } from '../../../../client/index.js'
 import * as Html from '../../../../server/internal/html/config.js'
 import { submitCredential } from '../../../../server/internal/html/serviceWorker.client.js'
 import type * as Methods from '../../../Methods.js'
 
-const data = Json.parse(document.getElementById(Html.dataId)!.textContent) as {
-  challenge: Challenge.FromMethods<[typeof Methods.charge]>
-}
+const dataElement = document.getElementById(Html.dataId)!
+const data = Json.parse(dataElement.textContent) as Html.Data<typeof Methods.charge>
 
-const root = document.getElementById('root')!
+const root = document.getElementById(Html.rootId)!
 
-const h2 = document.createElement('h2')
-h2.textContent = 'tempo'
-root.appendChild(h2)
+const css = String.raw
+const style = document.createElement('style')
+style.textContent = css`
+  form {
+    display: flex;
+    flex-direction: column;
+    gap: calc(${Html.vars.spacingUnit} * 8);
+  }
+  button {
+    background: ${Html.vars.accent};
+    border-radius: ${Html.vars.radius};
+    color: ${Html.vars.background};
+    cursor: pointer;
+    font-weight: 500;
+    padding: calc(${Html.vars.spacingUnit} * 4) calc(${Html.vars.spacingUnit} * 8);
+    width: 100%;
+  }
+  button:hover:not(:disabled) {
+    opacity: 0.85;
+  }
+  button:disabled {
+    cursor: default;
+    opacity: 0.5;
+  }
+  button svg {
+    display: inline;
+    fill: currentColor;
+    height: 0.85em;
+    transform: translateY(0.05em);
+    vertical-align: baseline;
+    width: auto;
+  }
+`
+root.append(style)
 
 const provider = Provider.create({
   // Dead code eliminated from production bundle (including top-level imports)
@@ -49,23 +78,34 @@ const provider = Provider.create({
 })
 
 const button = document.createElement('button')
-button.textContent = 'Continue with Tempo'
+button.innerHTML =
+  'Continue with <svg aria-label="Tempo" viewBox="0 0 107 25" role="img"><path d="M8.10464 23.7163H1.82475L7.64513 5.79356H0.201172L1.82475 0.540352H22.5637L20.9401 5.79356H13.8944L8.10464 23.7163Z"></path><path d="M31.474 23.7163H16.5861L24.0607 0.540352H38.8873L37.4782 4.95923H28.8701L27.3078 9.93433H35.6402L34.231 14.2914H25.8681L24.3057 19.2974H32.8525L31.474 23.7163Z"></path><path d="M38.2124 23.7163H33.2192L40.7244 0.540352H49.0567L48.781 13.0245L56.8989 0.540352H66.0277L58.5531 23.7163H52.3039L57.3584 7.86395L46.9736 23.7163H43.267L43.4201 7.80214L38.2124 23.7163Z"></path><path d="M73.057 4.83563L70.6369 12.3137H71.3108C72.8425 12.3137 74.1189 11.9532 75.14 11.2322C76.1612 10.4906 76.8249 9.43991 77.1312 8.08025C77.3967 6.90601 77.2538 6.07167 76.7023 5.57725C76.1509 5.08284 75.2319 4.83563 73.9453 4.83563H73.057ZM66.9915 23.7163H60.7116L68.1862 0.540352H75.814C77.5703 0.540352 79.0816 0.828764 80.3478 1.40559C81.6344 1.96181 82.5738 2.76524 83.166 3.81588C83.7787 4.84592 83.9829 6.05107 83.7787 7.43133C83.5132 9.2442 82.8189 10.8408 81.6956 12.221C80.5724 13.6013 79.1122 14.6725 77.315 15.4347C75.5383 16.1764 73.5471 16.5472 71.3415 16.5472H69.289L66.9915 23.7163Z"></path><path d="M98.747 22.233C96.664 23.4691 94.4481 24.0871 92.0996 24.0871H92.0383C89.9552 24.0871 88.1989 23.6236 86.7693 22.6965C85.3602 21.7489 84.3493 20.4717 83.7366 18.8648C83.1443 17.2579 83.0014 15.4966 83.3077 13.5807C83.6957 11.1704 84.5841 8.94549 85.9728 6.90601C87.3616 4.86653 89.0975 3.23906 91.1805 2.02361C93.2636 0.808164 95.4897 0.200439 97.8587 0.200439H97.9199C100.085 0.200439 101.872 0.663958 103.281 1.591C104.71 2.51803 105.701 3.78498 106.252 5.39185C106.824 6.97811 106.947 8.76008 106.62 10.7378C106.232 13.0657 105.343 15.2596 103.955 17.3197C102.566 19.3592 100.83 20.997 98.747 22.233ZM90.0777 18.2468C90.6292 19.2974 91.589 19.8227 92.9573 19.8227H93.0186C94.1418 19.8227 95.1833 19.4004 96.1432 18.5558C97.1235 17.6905 97.9506 16.5369 98.6245 15.0948C99.3189 13.6528 99.8294 12.0459 100.156 10.2742C100.463 8.54377 100.34 7.15322 99.7886 6.10257C99.2372 5.03133 98.2875 4.49571 96.9397 4.49571H96.8784C95.8369 4.49571 94.826 4.92833 93.8457 5.79356C92.8858 6.6588 92.0485 7.82274 91.3337 9.2854C90.6189 10.7481 90.0982 12.3343 89.7714 14.0442C89.4446 15.7747 89.5468 17.1755 90.0777 18.2468Z"></path></svg>'
 button.onclick = async () => {
   try {
+    document.getElementById(Html.errorId)?.remove()
     button.disabled = true
 
     const chain = [...(provider?.chains ?? []), tempoModerato, tempoLocalnet].find(
       (x) => x.id === data.challenge.request.methodDetails?.chainId,
     )
     const client = createClient({ chain, transport: custom(provider) })
-    const result = await provider.request({ method: 'wallet_connect' })
-    const account = result.accounts[0]?.address
+    const account = await (async () => {
+      const accounts = await provider.request({ method: 'eth_accounts' })
+      if (accounts.length > 0) return accounts.at(0)
+      const result = await provider.request({ method: 'wallet_connect' })
+      return result.accounts[0]?.address
+    })()
     const method = tempo({ account, getClient: () => client })[0]
 
     const credential = await method.createCredential({ challenge: data.challenge, context: {} })
     await submitCredential(credential)
+  } catch (e) {
+    const message = e instanceof Error && 'shortMessage' in e ? (e as any).shortMessage : undefined
+    Html.showError(message ?? (e instanceof Error ? e.message : 'Payment failed'))
   } finally {
     button.disabled = false
   }
 }
 root.appendChild(button)
+
+dataElement.remove()

package/src/tempo/server/internal/html/package.json

@@ -3,7 +3,7 @@
   "private": true,
   "type": "module",
   "dependencies": {
-    "accounts": "https://pkg.pr.new/tempoxyz/accounts@c339a21",
+    "accounts": "0.4.12",
     "mppx": "workspace:*",
     "viem": "2.47.5"
   }