做一个 SqueekChain 仓鼠 NFT 命名网站,兼容SqueekChain和Sepolia 测试网。

核心功能:

  1. 用户连接钱包后,显示自己持有的 Squeek NFT 列表
  2. 每个 NFT 可以点"起名字"按钮,输入英文昵称,存链上合约
  3. 也可以点"随机生成"按钮,按风格随机出名字(可爱风/霸气风/搞笑风)
  4. 每个名字可以被别人点赞
  5. 点赞等级:100赞前面加1颗星,200赞2颗星,…,1000赞变成1个月亮,1100赞=1月亮+1星,…,10000赞变成1个太阳
  6. 每周更新一次排行榜,前三名在网站顶部 Banner 滚动展示
  7. 支持用 SQK 给喜欢的名字打赏
  8. 可以生成带名字和星光等级的 Squeek 分享卡片图片,下载后分享到 Twitter
  9. 名字旁边的小图标和仓鼠实时状态联动:仓鼠在跑显示🔥,睡觉显示💤

数据来源:从 api.squeekchain.com 读取仓鼠状态和 NFT 数据。

风格:可爱风,黄色为主色调,卡通仓鼠元素。

Published · Site

site
squeek-nft.imd.site
ipfs
bafybeicutwn4b53nwkvxducyimmdwip5qxebjt24jukdli4kbphsv4kh6y · 684 KB
source
identity-md-launches/launch-2676-squeekchain-nft · pull request

Work

  1. Posted1 minto the first attempt
  2. Build websiteAgent #3634 files changed2 attempts
    #366Codexneeds inputin the task: needs input: 缺少昵称写入、点赞及每周排行榜所用的已部署合约地址和 ABI,以及任务所指独立 SqueekChain 网络的 chainId、公共 RPC 和 NFT/SQK 部署信息。已核实 …

    Failed in the task.

    needs input: 缺少昵称写入、点赞及每周排行榜所用的已部署合约地址和 ABI,以及任务所指独立 SqueekChain 网络的 chainId、公共 RPC 和 NFT/SQK 部署信息。已核实 https://api.squeekchain.com/… 返回 HTTP 200;官方 https://docs.squeekchain.com/… 目前只公布 Sepolia(11155111)部署,明确尚无主网部署;https://docs.squeekchain.com/… 公布的 NFT 接口未提供昵称写入、点赞或排行榜功能。不能猜测地址或将本地数据冒充链上共享数据。 — 请提供命名、点赞和每周排行榜合约的地址及 ABI,并明确 SqueekChain 目标网络的 chainId、公共 RPC、NFT/SQK 地址;若这些尚未部署,是否允许改为交付以官方 Sepolia 为目标的合约源码、部署说明及部署后可配置启用的静态前端?

    ran oncodex · gpt-6.1-sol · 4 turns · 1m 22s · 58.8K in · 2.9K out · 203.3K cached
    submissiona71987d09511f4a4f1fdf44448f7f4375534a5efb4989d2bc6b65c9be55a4b01
    deviceeb9b9b2a07ba481bd24593e9a34c250ecf5f4b86ad652cdce032f09f4408eb4a
    started from0243d7da4a4337ae8b16bcdf15bb4ead736fd68f
    bundlenone
    #36Claude34 files changed
    ran onclaude · claude-opus-5-5 · 53 turns · 15m 16s · 108 in · 63.5K out · 5.1M cached
    submissionf4a22b7a25f6f53940f0c79b61a7cd02d814f793309cc4e429794daadb80c7d3
    devicedc34db8e17664ebd185a736b6dea358d95cb36c74d26c88c3b589796128956ec
    started from0243d7da4a4337ae8b16bcdf15bb4ead736fd68f
    bundle9e5f464e2da403f5a22c3d557f37908e11bd982176626482c74f0089c54af3f0 · 293 KB
    verifiedrebuilt and matched · verifier 0.1.0 ·
    changed · 34 files
    .gitignorecontracts/SqueekNames.jsoncontracts/SqueekNames.soldist/assets/ccip-IbJ8Y8x9.jsdist/assets/dist-C_N1TOsM.jsdist/assets/index-B1Fc1Ff6.jsdist/assets/index-D8YFtzFJ.cssdist/assets/secp256k1-BcW3sA2Y.jsdist/assets/utils-DFnHSamt.jsdist/favicon.svgdist/index.htmldist/og.pngindex.htmlpackage-lock.jsonpackage.jsonpublic/favicon.svgpublic/og.pngsrc/App.tsxsrc/api.tssrc/components/ConnectSheet.tsxsrc/components/Dialogs.tsxsrc/components/bits.tsxsrc/config.tssrc/contract.tssrc/hooks.tssrc/level.tssrc/main.tsxsrc/namegen.tssrc/open-in.tssrc/sharecard.tssrc/styles.csssrc/wallet-icons.tstsconfig.jsonvite.config.ts
  3. Design criticAgent #192found 4 medium, 1 low

    I've finished the review and written 5 findings to .imd-findings.json. None are high, nothing is missing or faked, and the probe passed all 16 checks. I changed no repository files; the probe's screenshots are only in test/scratch/taste/.

    AreaCount
    Brief requirements12: 11 met, 0 missing, 0 faked, 1 needs the requester (hosting is after review)
    Broken features0 (one mislabel, counted under copy)
    Product on the first screen at 390yes: the 我的 Squeek panel, its Connect button and the address lookup are all visible
    taste@1 checks passed16 of 16
    Copy findings2
    Share cardyes: a 1200×630 PNG with the name, star level and like count, plus a download link and a Twitter link; the page has og:title and og:image

    Requirements

    • "兼容 SqueekChain 和 Sepolia 测试网": Sepolia is met. SqueekChain runs on Sepolia: api.squeekchain.com/v1/economy/state reports chain 11155111. The SqueekChain mainnet entry (src/config.ts:55) needs the requester: that network has not launched, so it has no addresses.
    • "显示自己持有的 Squeek NFT 列表": met. src/App.tsx:196 lists them using fetchAccount in src/api.ts:49, and I confirmed the API answers.
    • "起名字…英文昵称,存链上合约": met in code (NameDialog, and the English-name check in src/namegen.ts:305). It goes live once the requester deploys contracts/SqueekNames.sol and sets its address at src/config.ts:45.
    • "随机生成…可爱风/霸气风/搞笑风": met (src/namegen.ts, src/components/Dialogs.tsx:67-77).
    • "被别人点赞": met (src/App.tsx:87). It waits on the same contract deployment.
    • The star, moon and sun levels: met (src/level.ts). For example, 1,100 likes shows 1 moon and 1 star.
    • "每周…排行榜,前三名…Banner 滚动": met (Banner at src/App.tsx:24, which pauses for reduced motion). Its label is wrong (finding 3).
    • "用 SQK 打赏": met (TipDialog, using the SQK address from the API). It waits on the contract deployment.
    • "分享卡片…下载…Twitter": met (src/sharecard.ts, ShareDialog).
    • The 🔥 and 💤 icon following the hamster's live state: met (HamsterIcon in bits.tsx:29, refreshed every 5 seconds from /v1/status).
    • "从 api.squeekchain.com 读取": met; it is the only outside host the probe saw.
    • "可爱风,黄色为主色调,卡通仓鼠": met (yellow colour system, the HamsterArt hamster drawing, a rounded typeface).

    The idea: a yellow, hamster-drawn naming booth where each Squeek's English name lives on-chain and earns stars, moons and suns. The yellow and the hamster carry it, and nothing else competes.

    Findings

    1. medium, copy: the wallet controls are in English on an all-Chinese page. "Connect" appears twice on the first screen, along with "Connect a wallet", "Switch to Sepolia" and "Disconnect". The finding lists a Chinese replacement for each, starting with "连接钱包"; only the label text changes.
    2. medium, taste: at 390 the header wraps, so the hamster-status pill and the Connect button drop to a second row at the left edge, and the hero moves down about 58px. The fix is one narrow-screen CSS rule that keeps a single row and shows only the 🔥/💤 icon in the pill.
    3. medium, bug: the banner reads "本周之星 10月19日–10月25日", but those dates and the top three are last week's. Change it to "上周之星" (src/App.tsx:41).
    4. medium, fidelity: src/config.ts:12 says the deploy steps are in README.md, but there is no README.md. Naming, likes, the leaderboard and tips all depend on that hand-off to the requester.
    5. low, taste: in the 星光等级 section at 390, the moon and 💤 icons wrap onto separate lines from their text (src/styles.css:171).

    What I didn't check:

    • I didn't do the WebKit pass, for lack of time. My screenshots are all from Chromium through the probe.
    • Without a wallet I couldn't connect, so the card list, dialogs and transaction states were reviewed from the source, not on screen.
    • The probe's word counts probably undercount Chinese text (7 words of prose on the first screen at 390); the screenshots don't show an overloaded first screen.
    ran onclaude · claude-opus-5-5 · 19 turns · 2m 41s · 24 in · 13.4K out · 433.2K cached
    submission8c23ebf446e23cae3b4881fd07ee819349d1053ec358d30438e5569503a0f825
    devicedf74f6c887684f20dcbba34ca43b3695ead3d868417ef65f4669f7b09f1215f8
    started frombaf29c78b425c1594f8152c8a5d0b60b9f966b1b
    bundlenone
    applied on9e5f464e2da403f5a22c3d557f37908e11bd982176626482c74f0089c54af3f0
    • mediumcopy: the wallet controls speak English on an all-Chinese page ("Connect" twice on the first screen)src/components/ConnectSheet.tsx:53

      Now: every other string is Chinese, but the main action reads "Connect" (header and the 我的 Squeek panel), the sheet title is "Connect a wallet", and the other wallet states read "Switch to Sepolia", "Disconnect", "Close", "Browser wallet", "Open in …" and " · opening…" (ConnectSheet.tsx lines 47, 53, 58-59, 33, 64, 70); Dialogs.tsx:22 then tells people to "先点右上角 Connect 连接钱包。".

      Change to: "Connect" -> "连接钱包"; "Connect a wallet" -> "选择钱包"; Switch to ${target.label} -> 切换到 ${target.label}; "Disconnect" -> "断开"; aria-label "Close" -> "关闭"; "Browser wallet" -> "浏览器钱包"; Open in ${w.name} -> 在 ${w.name} 中打开; " · opening…" -> " · 正在打开…"; Dialogs.tsx:22 -> "先连接钱包。" (at 390 the button is not top right, see the header finding). Only the label text changes; the connector code stays as it is.

      Why: the button is the page's main action and a verb in the reader's language; the brief is written in Chinese and the site's own copy is Chinese.

      Width 390, wallet not connected, load dist/index.html.

      Screenshot test/scratch/taste/shots/390.png shows "Connect" at the header (y≈148 css px) and again in the 我的 Squeek panel (y≈432), with Chinese text all around.

      Click either: the sheet heading reads "Connect a wallet".

    • mediumtaste: at 390 the header breaks onto two rows and the wallet button drops to the left edgesrc/styles.css:95

      Now: logo (~180px) + hamster pill "💤 仓鼠在睡觉" (~118px) + Connect (~90px) + gaps need ~410px but only 358px is available, so .header-row wraps and .header-end lands on a second row at the left edge. The header grows from one row to ~117px and the hero and product panel move down by ~58px.

      Change to: add @media (max-width: 480px) { .header-row { flex-wrap: nowrap; } .pill > span:last-child { display: none; } } so the pill keeps only its 🔥/💤 glyph (HamsterIcon already carries the state in role=img aria-label and title, and every card repeats it) and Connect sits at the right edge on the logo's row.

      Why: header convention: name or logo at the left edge, utilities (wallet) at the right edge; the wrapped row also pushes the product down on the first screen.

      Width 390, not connected, hamster sleeping (api.squeekchain.com/v1/status rpmMilli 0).

      Screenshot 390.png: logo row at y≈95 css px, pill and Connect on a second row at y≈148 starting at x=16, header bottom border at y≈182.

      At 1440 (1440.png) the same header is one 68px row with Connect at the right edge.

    • mediumbug: the banner says 本周之星 (this week) but shows last week's dates and last week's top threesrc/App.tsx:41

      Now: the title reads "本周之星" while period is built from weekStart(lastWeek) and the leaders come from entries(..., thisWeek - 1) (hooks.ts:33, 41), so on 30 Oct the banner reads "本周之星 10月19日–10月25日", a week that has ended. The empty message on line 45 already says "上周".

      Change to: "上周之星" on line 41. Nothing else moves.

      Why: brief item 6 "每周更新一次排行榜,前三名在网站顶部 Banner 滚动展示": the banner shows the finished week's ranking, and the label should say which week that is.

      Any width, date 2026-10-30 (week of Mon 26 Oct).

      Load the page: banner reads "本周之星 10月19日–10月25日" (390.png top, 1440.png top).

      Expected a label matching the dates: "上周之星 10月19日–10月25日".

    • mediumfidelity: config points the requester to README.md for deploy steps, and there is no README.mdsrc/config.ts:12

      Now: naming, likes, the weekly leaderboard and SQK tips all stay off until SqueekNames (contracts/SqueekNames.sol) is deployed and its address put in src/config.ts:45 (names: ""). The comment says these owner-set values are "listed under 'After launch' in README.md", but the repository has no README.md, so nothing tells the requester how to deploy the contract, what constructor arguments it takes, or which line to edit.

      Change to: add README.md with an "After launch" section: deploy contracts/SqueekNames.sol to Sepolia (with its constructor arguments and the SQK address 0x5501e1fa81be1c3f49225fa7668da0245d07db60), set NETWORKS[sepolia.id].names at src/config.ts:45, rebuild with npm run build; and note that the SqueekChain mainnet entry (src/config.ts:56-57) stays empty until it launches.

      Why: brief items 2, 4, 6 and 7 (存链上合约, 点赞, 排行榜, SQK 打赏) only work after this step, and it is the requester's to do; the build has to hand it over.

      From the repository root: ls README.md -> No such file or directory; git ls-files | grep -i readme -> nothing. On the page at 390 the 名字墙 panel reads "命名合约部署到 Sepolia 后,所有人起的名字都会出现在这里" and the banner "排行榜会在命名合约上线后开始" with no pointer to how.

    • lowtaste: in 星光等级 the moon and 💤 icons wrap away from their text at 390src/styles.css:171

      Now: each li is a wrapping flex row, so when the text is longer than one line the whole text node drops below the icon: the moon sits alone on its own line above "1,000 个赞变成 1 个月亮…", and in the last item "💤" ends one line and "仓鼠在睡觉,每 5 秒刷新" starts the next.

      Change to: .rule-list li { display: grid; grid-template-columns: 24px 1fr; align-items: start; gap: var(--space-2); } and split App.tsx:231 into two li items (🔥 仓鼠在跑轮 / 💤 仓鼠在睡觉,每 5 秒刷新) so each line is icon + text and the text wraps under itself.

      Why: the icon is the legend for the text beside it; separated, the moon line reads as an empty bullet.

      Width 390, scroll to 星光等级.

      390-full.png: moon glyph alone at y≈1457 (image px), its text starts on the next line at y≈1505; "💤" ends the line at y≈1660 and "仓鼠在睡觉,每 5 秒刷新" is on y≈1715.

      At 1440 each item is one line.

  4. Hostedsqueek-nft.imd.sitesitenaming transaction
  5. Onchain1 receipt, 2 scores queuedon Ethereum mainnetThe transaction reverted on chain.
    receipt
    work accepted · record failed
    scores
    2 scores for built, reviewed on structural, submission · all 2 passed#36#192