Skip to content

docs: Modernize token metadata guides #1320

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

Open
emmet-bot wants to merge 1 commit into
base: main
Choose a base branch
from
Open

docs: Modernize token metadata guides #1320

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
146 changes: 137 additions & 9 deletions docs/learn/digital-assets/metadata-management/edit-token-metadata.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
sidebar_label: 'Set LSP7 Token Metadata'
sidebar_position: 3
description: Learn how to update LSP4 Metadata of digital assets on LUKSO.
description: Learn how to update LSP4 Metadata of digital assets on LUKSO using ethers.js, web3.js, or Hardhat.
---

import Tabs from '@theme/Tabs';
Expand Down Expand Up @@ -56,16 +56,72 @@ If you want to learn more about the contract deployment itself, please have a lo

## Setup

First, you have to prepare all imports and constants to send the transaction.
First, prepare the encoded metadata and connect to your token contract.

<Tabs groupId="web3-lib">
<TabItem value="ethers" label="ethers" attributes={{className: "tab_ethers"}}>

```js title="set-token-metadata-ethers.js"
import { ethers } from 'ethers';
import LSP7Artifact from '@lukso/lsp-smart-contracts/artifacts/LSP7DigitalAsset.json';

// As generated in the Asset Preparation guide
const encodedLSP4Metadata = {
keys: ['0x9afb95cacc9f95858ec44aa8c3b685511002e30ae54415823f406128b85b238e'],
values: [
'0x00006f357c6a0020610be5a5ebf25a8323ed5a9d8735f78aaf97c7e3529da7249f17e1b4129636f3697066733a2f2f516d5154716865424c5a466e5155787535524473387441394a746b78665a714d42636d47643973756b587877526d',
],
};

// Connect via the UP Browser Extension
const provider = new ethers.BrowserProvider(window.lukso);
await provider.send('eth_requestAccounts', []);
const signer = await provider.getSigner();

const myAssetAddress = '0x...';

// Instantiate the token contract
const token = new ethers.Contract(myAssetAddress, LSP7Artifact.abi, signer);
```

</TabItem>
<TabItem value="web3" label="web3" attributes={{className: "tab_web3"}}>

```js title="set-token-metadata-web3.js"
import Web3 from 'web3';
import LSP7Artifact from '@lukso/lsp-smart-contracts/artifacts/LSP7DigitalAsset.json';

// As generated in the Asset Preparation guide
const encodedLSP4Metadata = {
keys: ['0x9afb95cacc9f95858ec44aa8c3b685511002e30ae54415823f406128b85b238e'],
values: [
'0x00006f357c6a0020610be5a5ebf25a8323ed5a9d8735f78aaf97c7e3529da7249f17e1b4129636f3697066733a2f2f516d5154716865424c5a466e5155787535524473387441394a746b78665a714d42636d47643973756b587877526d',
],
};

// Connect via the UP Browser Extension
const web3 = new Web3(window.lukso);
await web3.eth.requestAccounts();
const accounts = await web3.eth.getAccounts();

const myAssetAddress = '0x...';

// Instantiate the token contract
const token = new web3.eth.Contract(LSP7Artifact.abi, myAssetAddress);
```

</TabItem>
<TabItem value="hardhat" label="Hardhat" attributes={{className: "tab_hardhat"}}>

```ts title="scripts/attachAssetMetadataAsEOA.ts"
import { ethers } from 'hardhat';
import LSP7Artifact from '@lukso/lsp-smart-contracts/artifacts/LSP7DigitalAsset.json';
import * as dotenv from 'dotenv';

// Load the environment variables
dotenv.config();

// As generated in the Asset guide
// As generated in the Asset Preparation guide
const encodedLSP4Metadata = {
keys: ['0x9afb95cacc9f95858ec44aa8c3b685511002e30ae54415823f406128b85b238e'],
values: [
Expand All @@ -76,15 +132,46 @@ const encodedLSP4Metadata = {
const [signer] = await ethers.getSigners();
const myAssetAddress = '0x...';

// Instantiate asset
const token = await ethers.Contract(myAssetAddress, LSP7Artifact.abi, signer);
// Instantiate the token contract
const token = new ethers.Contract(myAssetAddress, LSP7Artifact.abi, signer);
```

</TabItem>
</Tabs>

## Set data on token

Once you have the data key and value (with the encoded VerifiableURI in it), simply call the [`setData()`](../../../contracts/contracts/ERC725/ERC725.md#setdata) function of the Token contract.
Once you have the data key and value (with the encoded VerifiableURI in it), call the [`setData(bytes32,bytes)`](/contracts/contracts/UniversalProfile/#setdata) function on the Token contract.

In order to update the metadata using your EOA, you can call the [`setDataBatch()`](../../../contracts/contracts/ERC725/ERC725.md#setdatabatch) function directly on the asset contract.
<Tabs groupId="web3-lib">
<TabItem value="ethers" label="ethers" attributes={{className: "tab_ethers"}}>

```js title="set-token-metadata-ethers.js"
// Update the ERC725Y storage of the LSP4 metadata
const tx = await token.setData(
encodedLSP4Metadata.keys[0],
encodedLSP4Metadata.values[0],
);

// Wait for the transaction to be included in a block
const receipt = await tx.wait();
console.log('✅ Token metadata updated:', receipt.hash);
```

</TabItem>
<TabItem value="web3" label="web3" attributes={{className: "tab_web3"}}>

```js title="set-token-metadata-web3.js"
// Update the ERC725Y storage of the LSP4 metadata
const receipt = await token.methods
.setData(encodedLSP4Metadata.keys[0], encodedLSP4Metadata.values[0])
.send({ from: accounts[0] });

console.log('✅ Token metadata updated:', receipt.transactionHash);
```

</TabItem>
<TabItem value="hardhat" label="Hardhat" attributes={{className: "tab_hardhat"}}>

```ts title="scripts/attachAssetMetadataAsEOA.ts"
// Update the ERC725Y storage of the LSP4 metadata
Expand All @@ -95,11 +182,52 @@ const tx = await token.setData(

// Wait for the transaction to be included in a block
const receipt = await tx.wait();
console.log('Token metadata updated:', receipt);
console.log('✅ Token metadata updated:', receipt);
```

Afterwards, you are able to run the deployment script:
Run the script:

```bash
npx hardhat --network luksoTestnet run scripts/attachAssetMetadataAsEOA.ts
```

</TabItem>
</Tabs>

### Setting multiple data keys at once

If you need to update multiple metadata keys simultaneously, use [`setDataBatch(bytes32[],bytes[])`](/contracts/contracts/UniversalProfile/#setdatabatch):

<Tabs groupId="web3-lib">
<TabItem value="ethers" label="ethers" attributes={{className: "tab_ethers"}}>

```js
const tx = await token.setDataBatch(
encodedLSP4Metadata.keys,
encodedLSP4Metadata.values,
);
await tx.wait();
```

</TabItem>
<TabItem value="web3" label="web3" attributes={{className: "tab_web3"}}>

```js
await token.methods
.setDataBatch(encodedLSP4Metadata.keys, encodedLSP4Metadata.values)
.send({ from: accounts[0] });
```

</TabItem>
<TabItem value="hardhat" label="Hardhat" attributes={{className: "tab_hardhat"}}>

```ts
const tx = await token.setDataBatch(
encodedLSP4Metadata.keys,
encodedLSP4Metadata.values,
);
await tx.wait();
```

</TabItem>
</Tabs>
26 changes: 15 additions & 11 deletions docs/learn/digital-assets/metadata-management/metadata-preparation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,11 @@ After uploading the media files, you can attach their links to a JSON File in th
{
"width": 60,
"height": 60,
"url": "https://mycentralised-storage.com/filename.png"
"url": "https://mycentralised-storage.com/filename.png",
"verification": {
"method": "keccak256(bytes)",
"data": "0x<hashOfTheUploadedFile>"
}
}
],
"images": [
Expand All @@ -110,17 +114,15 @@ After uploading the media files, you can attach their links to a JSON File in th
"method": "keccak256(bytes)",
"data": "0x<hashOfTheUploadedFile>"
}

}
{
},
{
"width": 500,
"height": 500,
"url": "ipfs://[IPFS-CID]",
"verification": {
"method": "keccak256(bytes)",
"data": "0x<hashOfTheUploadedFile>"
}

}
]
],
Expand Down Expand Up @@ -167,13 +169,15 @@ const LSP4JSON = {
};

const encodedLSP4Metadata = ERC725.encodeData(
{
keyName: 'LSP4Metadata',
value: {
json: LSP4JSON,
url: 'https://my-file-provider.com/my-file-link.json', // It can also be: ipfs://[CID]
[
{
keyName: 'LSP4Metadata',
value: {
json: LSP4JSON,
url: 'https://my-file-provider.com/my-file-link.json', // It can also be: ipfs://[CID]
},
},
},
],
LSP4DigitalAssetSchema,
);
```
Expand Down
Loading