LSP28 网格技能

在通用资料上管理LSP28网格。创建包含迷你应用、内嵌框架和外部链接的网格布局。

快速开始

1. 配置环境

设置以下环境变量或编辑脚本：

bash
export UPPRIVATEKEY=yourcontrollerprivate_key
export UPADDRESS=youruniversalprofileaddress
export KEYMANAGER=yourkeymanageraddress

2. 更新网格布局

javascript
const { ethers } = require(ethers);

// 网格数据结构
const gridData = {
isEditable: true,
items: [
{
type: miniapp,
id: app1,
title: 我的应用,
backgroundColor: #1a1a2e,
textColor: #ffffff,
text: 点击我
},
{
type: iframe,
src: https://example.com/embed,
id: frame1,
title: 外部内容
},
{
type: external,
url: https://example.com,
id: link1,
title: 访问网站
}
]
};

// 编码为可验证URI
const jsonString = JSON.stringify(gridData);
const base64Data = Buffer.from(jsonString).toString(base64);
const verifiableUri = data:application/json;base64,${base64Data};

3. 执行交易

javascript
// LSP28 网格数据键
const LSP28GRIDKEY = 0x31cf14955c5b0052c1491ec06644438ec7c14454be5eb6cb9ce4e4edef647423;

// 最小ABI
const LSP0_ABI = [function setData(bytes32 dataKey, bytes dataValue) external];
const LSP6_ABI = [function execute(bytes calldata payload) external payable returns (bytes memory)];

// 设置提供者和钱包
const provider = new ethers.JsonRpcProvider(https://rpc.mainnet.lukso.network);
const wallet = new ethers.Wallet(process.env.UPPRIVATEKEY, provider);

// 在UP上编码setData调用
const upInterface = new ethers.Interface(LSP0_ABI);
const executeData = upInterface.encodeFunctionData(setData, [
LSP28GRIDKEY,
ethers.toUtf8Bytes(verifiableUri)
]);

// 通过KeyManager发送
const keyManager = new ethers.Contract(process.env.KEYMANAGER, LSP6ABI, wallet);
const tx = await keyManager.execute(executeData);
const receipt = await tx.wait();
console.log(网格已在区块中更新：, receipt.blockNumber);

数据结构参考

网格项目类型

迷你应用 (type: miniapp)
javascript
{
type: miniapp,
id: unique-id, // 必需：唯一标识符
title: 应用标题, // 必需：显示标题
text: 按钮文本, // 必需：按钮标签
backgroundColor: #fe005b, // 必需：十六进制颜色
textColor: #ffffff, // 必需：文本十六进制颜色
size: medium // 可选：small, medium, large
}

内嵌框架 (type: iframe)
javascript
{
type: iframe,
id: unique-id, // 必需：唯一标识符
title: 框架标题, // 必需：显示标题
src: https://example.com/embed // 必需：iframe URL
}

外部链接 (type: external)
javascript
{
type: external,
id: unique-id, // 必需：唯一标识符
title: 链接标题, // 必需：显示标题
url: https://example.com // 必需：外部URL
}

完整网格结构

javascript
{
isEditable: true, // 布尔值：允许编辑
items: [
// 网格项目数组（参见上述类型）
]
}

重要常量

常量	值	描述
LSP28GRIDKEY	0x31cf14955c5b0052c1491ec06644438ec7c14454be5eb6cb9ce4e4edef647423	网格存储的数据键
链ID

42 | LUKSO主网 | | RPC URL | https://rpc.mainnet.lukso.network | 公共RPC端点 |

颜色对比度要求

确保文本在背景颜色上可读：

背景	文本颜色	结果
#1a1a2e (深色)	#ffffff (白色)	良好对比度
#ffffff (白色)

#000000 (黑色) | 良好对比度 |
| #fe005b (粉色) | #ffffff (白色) | 良好对比度 |
| #000000 (黑色) | #fe005b (粉色) | 良好对比度 |

常见错误

❌ 错误的属性名称：
javascript
// 错误：
{ color: #fe005b, content: 点击我 }

// 正确：
{ backgroundColor: #fe005b, text: 点击我 }

❌ 缺少必填字段：

• - 所有项目需要：type, id, title
• 迷你应用额外需要：text, backgroundColor, textColor

❌ 错误的编码：
javascript
// 错误 - 使用了toUtf8String而不是toUtf8Bytes：
setData(key, ethers.toUtf8String(uri))

// 正确：
setData(key, ethers.toUtf8Bytes(uri))

交易流程

控制器密钥
↓
KeyManager.execute(payload)
↓
UP.setData(LSP28GRIDKEY, verifiableUri)
↓
网格在链上更新

CLI使用

使用提供的脚本：

bash

使用示例网格

node scripts/update-grid.js --example

从JSON文件加载

node scripts/update-grid.js --file my-grid.json

参考资料

• - references/lsp28-spec.md - 完整LSP28规范
• scripts/update-grid.js - 完整工作示例
• LSP28标准：https://github.com/lukso-network/LIPs/blob/main/LSPs/LSP-28-TheGrid.md