docs: Add comprehensive Setting your Grid guide (LSP28) #1318

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Merged

CJ42 merged 4 commits into main from docs/add-setting-your-grid-guide

Feb 10, 2026

Contributor

emmet-bot commented Feb 10, 2026 •

edited

Loading

Summary

Adds a production-ready guide for setting up LSP28 Grid on Universal Profiles at docs/learn/mini-apps/setting-your-grid.md.

What's Included

Content Coverage

LSP28 Grid concept — clear explanation of what The Grid is and how it relates to Universal Profiles
Complete JSON structure — all main properties and grid element types (IFRAME, TEXT, IMAGES, X, INSTAGRAM, QR_CODE, ELFSIGHT) with property tables
VerifiableURI format — binary layout breakdown table with the correct header format (0x00006f357c6a0020)
Full example — a complete Grid JSON with multiple element types

Code Examples

Encoding with erc725.js — two tabs: IPFS storage vs on-chain base64
Setting data on-chain — three tabs: viem + wagmi, ethers, web3.js
Reading Grid data — verification script using erc725.js fetchData()

Developer Experience

:::info, :::warning, :::success callouts for important details
Detailed troubleshooting section (reentrancy error, header format, permissions, gas costs)
Links to LSP28 spec, LSP2, related guides, and ERC725 Inspect tool
Illustration image at top

Technical Accuracy

setData() called directly on UP (not wrapped in execute())
LSP28 schema defined inline with note about future package imports
Correct VerifiableURI header with hash length bytes
Modern UP pattern (built-in Key Manager)

Related

Alternative approach to docs: Add Setting your Grid guide (LSP28) #1317
Follows all LUKSO docs conventions (tabs, callouts, proper imports)

emmet-bot mentioned this pull request

docs: Add Setting your Grid guide (LSP28) #1317

Open


          docs: add comprehensive Setting your Grid guide (LSP28)

08b262b

- Full LSP28 Grid specification coverage with all element types
- VerifiableURI encoding breakdown with header format table
- Encoding examples using erc725.js (IPFS and on-chain base64 tabs)
- Setting data on-chain in 3 tabs: viem, ethers, web3.js
- Reading Grid data back with erc725.js
- Troubleshooting section for common errors
- Links to LSP28 spec, LSP2, and related guides

emmet-bot force-pushed the docs/add-setting-your-grid-guide branch from 6a66831 to 08b262b Compare

February 10, 2026 11:16

emmet-bot changed the title ~~docs: Add Setting your Grid guide (LSP28)~~ docs: Add comprehensive Setting your Grid guide (LSP28)


          fix: prettier formatting

aca279c

Contributor

github-actions bot commented Feb 10, 2026 •

edited

Loading

Deployed with Cloudflare Pages ☁️ 🚀 🆗

URL: https://pr-1318.tech-docs-2ac.pages.dev
Specific: https://1edd7817.tech-docs-2ac.pages.dev

CJ42 requested changes

View reviewed changes

docs/learn/mini-apps/setting-your-grid.md Outdated

+              <br /><br />
+              </div>
+              The **Grid** ([LSP28](https://github.com/lukso-network/LIPs/blob/main/LSPs/LSP-28-TheGrid.md)) is a standard that lets Universal Profiles display **customizable, modular layouts** made of mini-apps, social media embeds, images, text, and other interactive content. Think of it as a personal dashboard you can attach to any Universal Profile — or even to [LSP7](/standards/tokens/LSP7-Digital-Asset.md) and [LSP8](/standards/tokens/LSP8-Identifiable-Digital-Asset.md) token contracts.

Member

CJ42 Feb 10, 2026

Remove this line as not implemented in ue.io yet

Suggested change

      
            The **Grid** ([LSP28](https://github.com/lukso-network/LIPs/blob/main/LSPs/LSP-28-TheGrid.md)) is a standard that lets Universal Profiles display **customizable, modular layouts** made of mini-apps, social media embeds, images, text, and other interactive content. Think of it as a personal dashboard you can attach to any Universal Profile — or even to [LSP7](/standards/tokens/LSP7-Digital-Asset.md) and [LSP8](/standards/tokens/LSP8-Identifiable-Digital-Asset.md) token contracts.
          
            The **Grid** ([LSP28](https://github.com/lukso-network/LIPs/blob/main/LSPs/LSP-28-TheGrid.md)) is a standard that lets Universal Profiles display **customizable, modular layouts** made of mini-apps, social media embeds, images, text, and other interactive content. Think of it as a personal dashboard you can attach to any Universal Profile.

docs/learn/mini-apps/setting-your-grid.md Outdated

+. Understanding the Grid JSON structure and all available element types
+. Encoding the Grid as a [VerifiableURI](/standards/metadata/lsp2-json-schema.md#verifiableuri)
+. Writing the encoded data on-chain to your Universal Profile

Member

CJ42 Feb 10, 2026

Suggested change

      
            3. Writing the encoded data on-chain to your Universal Profile
          
            3. encode the grid data either on-chain as base64 or off-chain on IPFS
          
            4. set it on your Universal Profile via `setData(bytes32,bytes)`

docs/learn/mini-apps/setting-your-grid.md Outdated

+              ## Prerequisites
+              - A **Universal Profile** on LUKSO (mainnet or testnet)
+              - A **controller EOA** private key with [`SETDATA` permission](/standards/access-control/lsp6-key-manager.md#permissions) on the profile

Member

CJ42 Feb 10, 2026

No need for that, as this is a dApp guide. It will be run through the UP Browser extension. So you don't need the controller private key.
You will just use { from: upAddress } in the tx.

docs/learn/mini-apps/setting-your-grid.md Outdated

+              - A **Universal Profile** on LUKSO (mainnet or testnet)
+              - A **controller EOA** private key with [`SETDATA` permission](/standards/access-control/lsp6-key-manager.md#permissions) on the profile
+              - **Node.js** ≥ 18

Member

CJ42 Feb 10, 2026

to remove

docs/learn/mini-apps/setting-your-grid.md Outdated


		## The LSP28 Data Key

		The Grid data is stored under a single [ERC725Y](https://github.com/ethereum/EIPs/blob/master/EIPS/eip-725.md) data key:

Member

CJ42 Feb 10, 2026

Suggested change

      
            The Grid data is stored under a single [ERC725Y](https://github.com/ethereum/EIPs/blob/master/EIPS/eip-725.md) data key:
          
            The Grid data is stored under a single [ERC725Y](http://docs.lukso.tech/standards/erc725/#erc725y-generic-data-keyvalue-store) data key:

docs/learn/mini-apps/setting-your-grid.md Outdated


		Once you have the encoded key-value pair, call [`setData`](/contracts/contracts/ERC725/ERC725.md) on the Universal Profile contract. Modern Universal Profiles have the [Key Manager (LSP6)](/standards/access-control/lsp6-key-manager.md) built-in, so you call `setData` directly on the UP from a controller address.

		:::warning Do NOT Wrap in `execute()`

Member

CJ42 Feb 10, 2026

Remove this callout

docs/learn/mini-apps/setting-your-grid.md Outdated

+              <TabItem value="viem" label="viem + wagmi" default>
+              ```shell
+              npm install viem @erc725/erc725.js @lukso/lsp-smart-contracts

Member

CJ42 Feb 10, 2026

Suggested change

      
            npm install viem @erc725/erc725.js @lukso/lsp-smart-contracts
          
            npm install wagmi viem@2.x @tanstack/react-query @erc725/erc725.js @lukso/lsp-smart-contracts

docs/learn/mini-apps/setting-your-grid.md Outdated

+              // --- Configuration ---
+              const PRIVATE_KEY = '0x...'; // Controller EOA private key (with SETDATA permission)
+              const UP_ADDRESS = '0x...'; // Your Universal Profile address
+              const RPC_URL = 'https://rpc.lukso.network'; // Use https://rpc.testnet.lukso.network for testnet

Member

CJ42 Feb 10, 2026

Suggested change

      
            const RPC_URL = 'https://rpc.lukso.network'; // Use https://rpc.testnet.lukso.network for testnet
          
            const RPC_URL = 'https://rpc.mainnet.lukso.network'; // Use https://rpc.testnet.lukso.network for testnet

docs/learn/mini-apps/setting-your-grid.md Outdated

+              import UniversalProfile from '@lukso/lsp-smart-contracts/artifacts/UniversalProfile.json';
+              // --- Configuration ---
+              const PRIVATE_KEY = '0x...'; // Controller EOA private key (with SETDATA permission)

Member

CJ42 Feb 10, 2026

This code snippet needs to be refactored. We don't use a private key and wallet, we call the UP contract directly with the UP address retrieved from the Browser extension.

in wagmi + viem

const { address: UP_ADDRESS } = useAccount()

See other guides for ethers + web3.js examples

docs/learn/mini-apps/setting-your-grid.md Outdated

+              <details>
+              <summary><strong>❌ Grid doesn't show up on Universal Everything</strong></summary>
+. Verify the data was written correctly by reading it back (see [Reading the Grid](#reading-the-grid))

Member

CJ42 Feb 10, 2026

Suggested change

      
            1. Verify the data was written correctly by reading it back (see [Reading the Grid](#reading-the-grid))
          
            1. Verify the data was written correctly by reading it back. Use [**ERC725 Inspect Tool**](https://erc725-inspect.lukso.tech/inspector?address=0x26e7Da1968cfC61FB8aB2Aad039b5A083b9De21e) or see the [Reading the Grid guide](#reading-the-grid))

emmet-bot and others added 2 commits

February 10, 2026 14:14


          docs: Apply review feedback from CJ42

163bde7

- Replace image with updated screenshot
- Remove LSP7/LSP8 mention (not implemented in ue.io yet)
- Simplify prerequisites (UP Browser Extension, no private key needed)
- Add wagmi + @tanstack/react-query to viem dependencies
- Add full LSP28TheGrid JSON template in collapsible block
- Convert all element types to collapsible <details> sections
- Update VerifiableURI table with both off-chain and on-chain methods
- Add separate paragraphs for IPFS vs on-chain header formats
- Move gas cost callout under Encoding section heading
- Move IPFS upload tip above code example
- Simplify Setting Data intro, remove execute() warning
- Refactor all code examples to use UP Browser Extension pattern
  (wagmi hooks, ethers BrowserProvider, web3 window.lukso)
- Update RPC URL to rpc.mainnet.lukso.network
- Update troubleshooting with ERC725 Inspect Tool link


          feat: add nulti grid examples, move VerifiableURI encoding to LSP2 se…

0a3bb80

…ction and improve descriptions

CJ42 requested a review from YamenMerhi as a code owner

February 10, 2026 17:56

CJ42 approved these changes

View reviewed changes

CJ42 merged commit fe2e829 into main

3 checks passed

CJ42 deleted the docs/add-setting-your-grid-guide branch

February 10, 2026 18:03

This was referenced Feb 10, 2026

docs: Modernize Edit Universal Profile guide #1319

Open

docs: Modernize token metadata guides #1320

Open

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet