wao 0.41.3 → 0.41.5

package/app/public/blueprints/token.lua

@@ -0,0 +1,298 @@
+local bint = require('.bint')(256)
+--[[
+  This module implements the ao Standard Token Specification.
+
+  Terms:
+    Sender: the wallet or Process that sent the Message
+
+  It will first initialize the internal state, and then attach handlers,
+    according to the ao Standard Token Spec API:
+
+    - Info(): return the token parameters, like Name, Ticker, Logo, and Denomination
+
+    - Balance(Target?: string): return the token balance of the Target. If Target is not provided, the Sender
+        is assumed to be the Target
+
+    - Balances(): return the token balance of all participants
+
+    - Transfer(Target: string, Quantity: number): if the Sender has a sufficient balance, send the specified Quantity
+        to the Target. It will also issue a Credit-Notice to the Target and a Debit-Notice to the Sender
+
+    - Mint(Quantity: number): if the Sender matches the Process Owner, then mint the desired Quantity of tokens, adding
+        them the Processes' balance
+]]
+--
+local json = require('json')
+
+--[[
+  utils helper functions to remove the bint complexity.
+]]
+--
+
+
+local utils = {
+  add = function(a, b)
+    return tostring(bint(a) + bint(b))
+  end,
+  subtract = function(a, b)
+    return tostring(bint(a) - bint(b))
+  end,
+  toBalanceValue = function(a)
+    return tostring(bint(a))
+  end,
+  toNumber = function(a)
+    return bint.tonumber(a)
+  end
+}
+
+
+--[[
+     Initialize State
+
+     ao.id is equal to the Process.Id
+   ]]
+--
+Variant = "0.0.3"
+
+-- token should be idempotent and not change previous state updates
+Denomination = Denomination or 12
+Balances = Balances or { [ao.id] = utils.toBalanceValue(10000 * 10 ^ Denomination) }
+TotalSupply = TotalSupply or utils.toBalanceValue(10000 * 10 ^ Denomination)
+Name = Name or 'Points Coin'
+Ticker = Ticker or 'PNTS'
+Logo = Logo or 'SBCCXwwecBlDqRLUjb8dYABExTJXLieawf7m2aBJ-KY'
+
+--[[
+     Add handlers for each incoming Action defined by the ao Standard Token Specification
+   ]]
+--
+
+--[[
+     Info
+   ]]
+--
+Handlers.add('info', Handlers.utils.hasMatchingTag("Action", "Info"), function(msg)
+  if msg.reply then
+    msg.reply({
+      Name = Name,
+      Ticker = Ticker,
+      Logo = Logo,
+      Denomination = tostring(Denomination)
+    })
+  else
+    Send({Target = msg.From, 
+    Name = Name,
+    Ticker = Ticker,
+    Logo = Logo,
+    Denomination = tostring(Denomination)
+   })
+  end
+end)
+
+--[[
+     Balance
+   ]]
+--
+Handlers.add('balance', Handlers.utils.hasMatchingTag("Action", "Balance"), function(msg)
+  local bal = '0'
+
+  -- If not Recipient is provided, then return the Senders balance
+  if (msg.Tags.Recipient) then
+    if (Balances[msg.Tags.Recipient]) then
+      bal = Balances[msg.Tags.Recipient]
+    end
+  elseif msg.Tags.Target and Balances[msg.Tags.Target] then
+    bal = Balances[msg.Tags.Target]
+  elseif Balances[msg.From] then
+    bal = Balances[msg.From]
+  end
+  if msg.reply then
+    msg.reply({
+      Balance = bal,
+      Ticker = Ticker,
+      Account = msg.Tags.Recipient or msg.From,
+      Data = bal
+    })
+  else
+    Send({
+      Target = msg.From,
+      Balance = bal,
+      Ticker = Ticker,
+      Account = msg.Tags.Recipient or msg.From,
+      Data = bal
+    })
+  end
+end)
+
+--[[
+     Balances
+   ]]
+--
+Handlers.add('balances', Handlers.utils.hasMatchingTag("Action", "Balances"),
+  function(msg) 
+    if msg.reply then
+      msg.reply({ Data = json.encode(Balances) })
+    else 
+      Send({Target = msg.From, Data = json.encode(Balances) }) 
+    end
+  end)
+
+--[[
+     Transfer
+   ]]
+--
+Handlers.add('transfer', Handlers.utils.hasMatchingTag("Action", "Transfer"), function(msg)
+  assert(type(msg.Recipient) == 'string', 'Recipient is required!')
+  assert(type(msg.Quantity) == 'string', 'Quantity is required!')
+  assert(bint.__lt(0, bint(msg.Quantity)), 'Quantity must be greater than 0')
+
+  if not Balances[msg.From] then Balances[msg.From] = "0" end
+  if not Balances[msg.Recipient] then Balances[msg.Recipient] = "0" end
+
+  if bint(msg.Quantity) <= bint(Balances[msg.From]) then
+    Balances[msg.From] = utils.subtract(Balances[msg.From], msg.Quantity)
+    Balances[msg.Recipient] = utils.add(Balances[msg.Recipient], msg.Quantity)
+
+    --[[
+         Only send the notifications to the Sender and Recipient
+         if the Cast tag is not set on the Transfer message
+       ]]
+    --
+    if not msg.Cast then
+      -- Debit-Notice message template, that is sent to the Sender of the transfer
+      local debitNotice = {
+        Action = 'Debit-Notice',
+        Recipient = msg.Recipient,
+        Quantity = msg.Quantity,
+        Data = Colors.gray ..
+            "You transferred " ..
+            Colors.blue .. msg.Quantity .. Colors.gray .. " to " .. Colors.green .. msg.Recipient .. Colors.reset
+      }
+      -- Credit-Notice message template, that is sent to the Recipient of the transfer
+      local creditNotice = {
+        Target = msg.Recipient,
+        Action = 'Credit-Notice',
+        Sender = msg.From,
+        Quantity = msg.Quantity,
+        Data = Colors.gray ..
+            "You received " ..
+            Colors.blue .. msg.Quantity .. Colors.gray .. " from " .. Colors.green .. msg.From .. Colors.reset
+      }
+
+      -- Add forwarded tags to the credit and debit notice messages
+      for tagName, tagValue in pairs(msg) do
+        -- Tags beginning with "X-" are forwarded
+        if string.sub(tagName, 1, 2) == "X-" then
+          debitNotice[tagName] = tagValue
+          creditNotice[tagName] = tagValue
+        end
+      end
+
+      -- Send Debit-Notice and Credit-Notice
+      if msg.reply then
+        msg.reply(debitNotice)
+      else
+        debitNotice.Target = msg.From
+        Send(debitNotice)
+      end
+      Send(creditNotice)
+    end
+  else
+    if msg.reply then
+      msg.reply({
+        Action = 'Transfer-Error',
+        ['Message-Id'] = msg.Id,
+        Error = 'Insufficient Balance!'
+      })
+    else
+      Send({
+        Target = msg.From,
+        Action = 'Transfer-Error',
+        ['Message-Id'] = msg.Id,
+        Error = 'Insufficient Balance!'
+      })
+    end
+  end
+end)
+
+--[[
+    Mint
+   ]]
+--
+Handlers.add('mint', Handlers.utils.hasMatchingTag("Action","Mint"), function(msg)
+  assert(type(msg.Quantity) == 'string', 'Quantity is required!')
+  assert(bint(0) < bint(msg.Quantity), 'Quantity must be greater than zero!')
+
+  if not Balances[ao.id] then Balances[ao.id] = "0" end
+
+  if msg.From == ao.id then
+    -- Add tokens to the token pool, according to Quantity
+    Balances[msg.From] = utils.add(Balances[msg.From], msg.Quantity)
+    TotalSupply = utils.add(TotalSupply, msg.Quantity)
+    if msg.reply then
+      msg.reply({
+        Data = Colors.gray .. "Successfully minted " .. Colors.blue .. msg.Quantity .. Colors.reset
+      })
+    else
+      Send({
+        Target = msg.From,
+        Data = Colors.gray .. "Successfully minted " .. Colors.blue .. msg.Quantity .. Colors.reset
+      })
+    end
+  else
+    if msg.reply then
+      msg.reply({
+        Action = 'Mint-Error',
+        ['Message-Id'] = msg.Id,
+        Error = 'Only the Process Id can mint new ' .. Ticker .. ' tokens!'
+      })
+    else
+      Send({
+        Target = msg.From,
+        Action = 'Mint-Error',
+        ['Message-Id'] = msg.Id,
+        Error = 'Only the Process Id can mint new ' .. Ticker .. ' tokens!'
+      })
+    end
+  end
+end)
+
+--[[
+     Total Supply
+   ]]
+--
+Handlers.add('totalSupply', Handlers.utils.hasMatchingTag("Action","Total-Supply"), function(msg)
+  assert(msg.From ~= ao.id, 'Cannot call Total-Supply from the same process!')
+  if msg.reply then
+    msg.reply({
+      Action = 'Total-Supply',
+      Data = TotalSupply,
+      Ticker = Ticker
+    })
+  else
+    Send({
+      Target = msg.From,
+      Action = 'Total-Supply',
+      Data = TotalSupply,
+      Ticker = Ticker
+    })
+  end
+end)
+
+--[[
+ Burn
+]] --
+Handlers.add('burn', Handlers.utils.hasMatchingTag("Action",'Burn'), function(msg)
+  assert(type(msg.Tags.Quantity) == 'string', 'Quantity is required!')
+  assert(bint(msg.Tags.Quantity) <= bint(Balances[msg.From]), 'Quantity must be less than or equal to the current balance!')
+
+  Balances[msg.From] = utils.subtract(Balances[msg.From], msg.Tags.Quantity)
+  TotalSupply = utils.subtract(TotalSupply, msg.Tags.Quantity)
+  if msg.reply then
+    msg.reply({
+      Data = Colors.gray .. "Successfully burned " .. Colors.blue .. msg.Tags.Quantity .. Colors.reset
+    })
+  else
+    Send({Target = msg.From,  Data = Colors.gray .. "Successfully burned " .. Colors.blue .. msg.Tags.Quantity .. Colors.reset })
+  end
+end)

package/app/public/blueprints/voting.lua

@@ -0,0 +1,45 @@
+Balances = Balances or {}
+Votes = Votes or {}
+
+-- Vote Action Handler
+Handlers.vote = function(msg)
+  local quantity = Stakers[msg.From].amount
+  local target = msg.Tags.Target
+  local side = msg.Tags.Side
+  local deadline = tonumber(msg['Block-Height']) + tonumber(msg.Tags.Deadline)
+  assert(quantity > 0, "No staked tokens to vote")
+  Votes[target] = Votes[target] or { yay = 0, nay = 0, deadline = deadline }
+  Votes[target][side] = Votes[target][side] + quantity
+  
+end
+
+-- Finalization Handler
+local finalizationHandler = function(msg)
+  local currentHeight = tonumber(msg['Block-Height'])
+  -- Process voting
+  for target, voteInfo in pairs(Votes) do
+      if currentHeight >= voteInfo.deadline then
+          if voteInfo.yay > voteInfo.nay then
+              print("Handle Vote")
+          end
+          -- Clear the vote record after processing
+          Votes[target] = nil
+      end
+  end
+end
+
+-- wrap function to continue handler flow
+local function continue(fn)
+  return function (msg)
+    local result = fn(msg)
+    if (result) == -1 then
+      return 1
+    end
+    return result
+  end
+end
+
+Handlers.add("vote",
+  continue(Handlers.utils.hasMatchingTag("Action", "Vote")), Handlers.vote)
+-- Finalization handler should be called for every message
+Handlers.add("finalize", function (msg) return "continue" end, finalizationHandler)

package/cli-esm.js

@@ -0,0 +1,55 @@
+#!/usr/bin/env node
+import pm2 from "pm2"
+
+const args = process.argv.slice(2)
+
+const cmds = {
+  wao: { script: "./src/run.js" },
+  hub: { script: "./src/hub/index.js" },
+  fs: { script: "./src/hub/fs.js" },
+  proxy: { script: "./src/hub/ws-proxy.js" },
+}
+
+const cmd = cmds[args[0]] ?? cmds["wao"]
+if (cmds[args[0]]) args.shift()
+
+if (!cmd) {
+  console.log("The wrong command")
+  process.exit()
+}
+
+pm2.connect(false, err => {
+  if (err) {
+    console.error("Error connecting to PM2:", err)
+    process.exit(2)
+  }
+
+  const _nodeMajor = parseInt((process.versions.node || "0").split(".")[0], 10)
+  const _wasm64Flag = _nodeMajor >= 24 ? "" : "--experimental-wasm-memory64"
+  pm2.start(
+    {
+      script: cmd.script,
+      nodeArgs: _wasm64Flag,
+      instances: 1,
+      force: true,
+      args: args,
+      daemon: false,
+      name: "wao",
+    },
+    err => {
+      if (err) {
+        console.error("Error starting process:", err)
+        pm2.disconnect()
+        process.exit(2)
+      }
+    }
+  )
+  pm2.streamLogs("all", 0, false)
+})
+
+process.on("SIGINT", () => {
+  pm2.delete("wao", err => {
+    pm2.disconnect()
+    process.exit(err ? 1 : 0)
+  })
+})

package/cli.js

@@ -0,0 +1,54 @@
+#!/usr/bin/env node
+const pm2 = require("pm2")
+
+const args = process.argv.slice(2)
+
+const cmds = {
+  wao: { script: "./src/run.js" },
+  hub: { script: "./hub/index.js" },
+  fs: { script: "./hub/fs.js" },
+  proxy: { script: "./hub/ws-proxy.js" },
+}
+
+const cmd = cmds[args[0]] ?? cmds["wao"]
+if (cmds[args[0]]) args.shift()
+if (!cmd) {
+  console.log("The wrong command")
+  process.exit()
+}
+
+pm2.connect(false, err => {
+  if (err) {
+    console.error("Error connecting to PM2:", err)
+    process.exit(2)
+  }
+
+  const _nodeMajor = parseInt((process.versions.node || "0").split(".")[0], 10)
+  const _wasm64Flag = _nodeMajor >= 24 ? "" : "--experimental-wasm-memory64"
+  pm2.start(
+    {
+      script: "./cjs/run.js",
+      nodeArgs: _wasm64Flag,
+      instances: 1,
+      force: true,
+      args: args,
+      daemon: false,
+      name: "wao",
+    },
+    err => {
+      if (err) {
+        console.error("Error starting process:", err)
+        pm2.disconnect()
+        process.exit(2)
+      }
+    }
+  )
+  pm2.streamLogs("all", 0, false)
+})
+
+process.on("SIGINT", () => {
+  pm2.delete("wao", err => {
+    pm2.disconnect()
+    process.exit(err ? 1 : 0)
+  })
+})

package/devnet/app/api.js

@@ -0,0 +1,129 @@
+async function gql(query, variables = {}) {
+  const res = await fetch("/ar/graphql", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ query, variables }),
+  })
+  return res.json()
+}
+
+export async function getArInfo() {
+  const res = await fetch("/ar")
+  return res.json()
+}
+
+export async function queryBlocks({ first = 10, after, min, max } = {}) {
+  const vars = { first }
+  if (after) vars.after = after
+
+  let blockFilter = ""
+  if (min !== undefined || max !== undefined) {
+    const parts = []
+    if (min !== undefined) parts.push(`min: ${min}`)
+    if (max !== undefined) parts.push(`max: ${max}`)
+    blockFilter = `, block: {${parts.join(", ")}}`
+  }
+
+  const { data } = await gql(`
+    query($first: Int, $after: String) {
+      blocks(first: $first, after: $after, sort: HEIGHT_DESC${blockFilter}) {
+        pageInfo { hasNextPage }
+        edges {
+          cursor
+          node {
+            id
+            height
+            timestamp
+            previous
+          }
+        }
+      }
+    }
+  `, vars)
+  return data.blocks
+}
+
+export async function queryTxs({ first = 10, after, ids, owners, recipients, tags, sort, bundledIn } = {}) {
+  const vars = { first }
+  if (after) vars.after = after
+  if (ids) vars.ids = ids
+  if (owners) vars.owners = owners
+  if (recipients) vars.recipients = recipients
+  if (tags) vars.tags = tags
+  if (sort) vars.sort = sort
+  if (bundledIn) vars.bundledIn = bundledIn
+
+  const { data } = await gql(`
+    query($first: Int, $after: String, $ids: [ID!], $owners: [String!], $recipients: [String!], $tags: [TagFilter!], $sort: SortOrder, $bundledIn: [ID!]) {
+      transactions(first: $first, after: $after, ids: $ids, owners: $owners, recipients: $recipients, tags: $tags, sort: $sort, bundledIn: $bundledIn) {
+        pageInfo { hasNextPage }
+        edges {
+          cursor
+          node {
+            id
+            owner { address }
+            recipient
+            block { id height timestamp }
+            tags { name value }
+            data { size type }
+            bundledIn { id }
+          }
+        }
+      }
+    }
+  `, vars)
+  return data.transactions
+}
+
+export async function getProcesses() {
+  const res = await fetch("/su")
+  return res.json()
+}
+
+export async function getProcessMsgs(pid) {
+  const res = await fetch(`/su/${pid}`)
+  return res.json()
+}
+
+export async function getResults(pid, { from, limit } = {}) {
+  const params = new URLSearchParams()
+  if (from) params.set("from", from)
+  if (limit) params.set("limit", limit)
+  const qs = params.toString()
+  const res = await fetch(`/cu/results/${pid}${qs ? "?" + qs : ""}`)
+  return res.json()
+}
+
+export async function getResult(mid, pid) {
+  const res = await fetch(`/cu/result/${mid}?process-id=${pid}`)
+  return res.json()
+}
+
+const MAX_DATA_SIZE = 50 * 1024 * 1024 // 50 MB
+
+export async function getTxData(id) {
+  const res = await fetch(`/ar/${id}`)
+  if (!res.ok) return null
+  const contentType = res.headers.get("content-type") || "application/octet-stream"
+
+  // Check size before downloading full body
+  const cl = parseInt(res.headers.get("content-length") || "0", 10)
+  if (cl > MAX_DATA_SIZE) {
+    return { contentType, blob: null, text: null, size: cl, tooLarge: true }
+  }
+
+  const blob = await res.blob()
+  if (blob.size > MAX_DATA_SIZE) {
+    return { contentType, blob: null, text: null, size: blob.size, tooLarge: true }
+  }
+
+  let text = null
+  const textTypes = [
+    "text/", "json", "javascript", "xml", "svg", "markdown",
+    "x-lua", "css", "x-python", "x-toml", "x-yaml", "x-sh",
+  ]
+  if (textTypes.some(t => contentType.includes(t))) {
+    text = await blob.text()
+  }
+  return { contentType, blob, text, size: blob.size }
+}

package/devnet/app/components/layout.js

@@ -0,0 +1,89 @@
+import { createSearch } from "./search.js"
+
+function initTheme() {
+  const saved = localStorage.getItem("theme")
+  if (saved) {
+    document.documentElement.setAttribute("data-theme", saved)
+  }
+  // no saved = dark (default via CSS :root)
+}
+
+function toggleTheme() {
+  const current = document.documentElement.getAttribute("data-theme")
+  const next = current === "light" ? "dark" : "light"
+  if (next === "dark") {
+    document.documentElement.removeAttribute("data-theme")
+  } else {
+    document.documentElement.setAttribute("data-theme", next)
+  }
+  localStorage.setItem("theme", next)
+  return next
+}
+
+function getCurrentTheme() {
+  return document.documentElement.getAttribute("data-theme") === "light" ? "light" : "dark"
+}
+
+export function createLayout(app) {
+  initTheme()
+
+  const header = document.createElement("header")
+  const logo = document.createElement("a")
+  logo.className = "logo"
+  logo.href = "#/"
+  logo.innerHTML = '<div class="logo-text">WAO SCAN</div><span>DEVNET ALPHA</span>'
+  header.appendChild(logo)
+
+  const headerRight = document.createElement("div")
+  headerRight.className = "header-right"
+  headerRight.appendChild(createSearch())
+
+  const themeBtn = document.createElement("button")
+  themeBtn.className = "theme-toggle"
+  themeBtn.title = "Toggle dark/light mode"
+  const updateIcon = () => {
+    const theme = getCurrentTheme()
+    themeBtn.innerHTML = theme === "light"
+      ? '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>'
+      : '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg>'
+  }
+  updateIcon()
+  themeBtn.addEventListener("click", () => {
+    toggleTheme()
+    updateIcon()
+  })
+  headerRight.appendChild(themeBtn)
+
+  header.appendChild(headerRight)
+
+  const nav = document.createElement("nav")
+  const items = [
+    { href: "#/", label: "Dashboard", icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>' },
+    { href: "#/blocks", label: "Blocks", icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/></svg>' },
+    { href: "#/transactions", label: "Transactions", icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 1l4 4-4 4"/><path d="M3 11V9a4 4 0 014-4h14"/><path d="M7 23l-4-4 4-4"/><path d="M21 13v2a4 4 0 01-4 4H3"/></svg>' },
+    { href: "#/modules", label: "Modules", icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"/><path d="M3.27 6.96L12 12.01l8.73-5.05M12 22.08V12"/></svg>' },
+    { href: "#/processes", label: "Processes", icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"/></svg>' },
+    { href: "#/messages", label: "Messages", icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>' },
+    { href: "#/schedulers", label: "Schedulers", icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>' },
+  ]
+  for (const item of items) {
+    const a = document.createElement("a")
+    a.href = item.href
+    a.innerHTML = `${item.icon}<span>${item.label}</span>`
+    nav.appendChild(a)
+  }
+
+  const content = document.createElement("main")
+  content.id = "content"
+
+  const footer = document.createElement("footer")
+  footer.className = "site-footer"
+  footer.innerHTML = `<a href="https://wao.eco" target="_blank" rel="noopener">WizardAO</a>`
+
+  app.appendChild(header)
+  app.appendChild(nav)
+  app.appendChild(content)
+  app.appendChild(footer)
+
+  return content
+}