Skip to main content

Read Asset Data

In this guide, we will learn how to:

  • Get all assets owned by a Universal Profile.
  • Fetch the metadata of all owned assets.
tip

A complete "ready to use" JS file is available at the end in the Final Code section. If you want to run the code as standalone JavaScript files within the terminal or the browser, you can open the lukso-playground repository or use the correlated StackBlitz page.

Asset example on universalprofile.cloud
The Lambada Dyed Red White Blue asset as seen on UniversalProfile.cloud

We will use:

  • web3.js for utility as well as connecting to the LUKSO L14 or L16 network.
  • erc725.js library to fetch the asset metadata.
  • lsp-smart-contracts to integrate the ABIs for the LUKSO Standards.

Setup

Open a terminal in the project's folder of your choice and install all required libraries.

npm install web3 @erc725/erc725.js @lukso/lsp-smart-contracts

Step 1 - Get all owned assets

In the Read Profile Data guide, we learned how to read the Universal Profile properties and use the data key names with the fetchData() function of the erc725.js library. In the same way, we can now fetch all the assets owned by the Universal Profile by calling fetchData and passing the LSP5ReceivedAssets[] key.

info

This same method can also be used to fetch all assets a Universal Profile has ever issued by using the LSP12IssuedAssets[] key.

caution

If using erc725.js in a NodeJS environment you may need to install and import isomorphic-fetch to use the fetchData() method.

read_assets.js
// Import and network setup
import { ERC725 } from '@erc725/erc725.js';
import UniversalProfileSchema from '@erc725/erc725.js/schemas/LSP3UniversalProfileMetadata.json';
import Web3 from 'web3';

// Static variables
const SAMPLE_PROFILE_ADDRESS = '0xa907c1904c22DFd37FF56c1f3c3d795682539196';
const RPC_ENDPOINT = 'https://rpc.l16.lukso.network';
const IPFS_GATEWAY = 'https://2eff.lukso.dev/ipfs/';

// Parameters for the ERC725 instance
const provider = new Web3.providers.HttpProvider(RPC_ENDPOINT);
const config = { ipfsGateway: IPFS_GATEWAY };

// Fetch the LSP5 data of the Universal Profile to get its owned assets
const profile = new ERC725(
UniversalProfileSchema,
SAMPLE_PROFILE_ADDRESS,
provider,
config,
);

const result = await profile.fetchData('LSP5ReceivedAssets[]');
const ownedAssets = result.value;

console.log(ownedAssets);

Step 2 - Fetch the asset metadata

Now we can retrieve the metadata for the asset address. The LSP4 metadata is saved under the ERC725Y key-value store of the digital asset. We need to input the correct data key to fetch the associated value. There are multiple LSP4 keys for different properties.

  • LSP4TokenName
  • LSP4TokenSymbol
  • LSP4Metadata
  • LSP4Creators[]

In this guide, we will use the LSP4Metadata key to read the asset metadata.

read_assets.js
// ABIs
import LSP4schema from '@erc725/erc725.js/schemas/LSP4DigitalAsset.json';

// ...

// Instantiate the asset
const digitalAsset = new ERC725(LSP4Schema, ownedAssets[0], provider, config);

// Get the encoded data
const decodedAssetMetadata = await digitalAsset.fetchData('LSP4Metadata');

To get the metadata of all owned assets we can iterate through the ownedAssets array.

const ownedAssetsMetadata = await ownedAssets.map(async (ownedAsset) => {
const digitalAsset = new ERC725(LSP4Schema, ownedAsset, provider, config);

return await digitalAsset.fetchData('LSP4Metadata');
});

Final Code

Below is the complete code snippet of this guide, with all the steps compiled together.

read_assets.js
// Import and network setup
import { ERC725 } from '@erc725/erc725.js';
import UniversalProfileSchema from '@erc725/erc725.js/schemas/LSP3UniversalProfileMetadata.json';
import LSP4Schema from '@erc725/erc725.js/schemas/LSP4DigitalAsset.json';
import Web3 from 'web3';

// Static variables
const SAMPLE_PROFILE_ADDRESS = '0xa907c1904c22DFd37FF56c1f3c3d795682539196';
const RPC_ENDPOINT = 'https://rpc.l16.lukso.network';
const IPFS_GATEWAY = 'https://2eff.lukso.dev/ipfs/';

// Parameters for the ERC725 instance
const provider = new Web3.providers.HttpProvider(RPC_ENDPOINT);
const config = { ipfsGateway: IPFS_GATEWAY };

// Fetch the LSP5 data of the Universal Profile to get its owned assets
const profile = new ERC725(
UniversalProfileSchema,
SAMPLE_PROFILE_ADDRESS,
provider,
config,
);

const result = await profile.fetchData('LSP5ReceivedAssets[]');
const ownedAssets = result.value;

const ownedAssetsMetadata = await ownedAssets.map(async (ownedAsset) => {
// Instantiate the asset
const digitalAsset = new ERC725(LSP4Schema, ownedAsset, provider, config);

// Get the encoded data
return await digitalAsset.fetchData('LSP4Metadata');
});

console.log(ownedAssetsMetadata);