Frontend Reconstruction

Collection and Items Events

The Item protocol provides two major events regarding Collection and Items creation that can be used in Frontend integrations.

Collection event

The first one is the Collection event:

event Collection(address indexed from, address indexed to, bytes32 indexed collectionId);

The Collection event is currently emitted when a new Collection is created through the createCollection function:

emit Collection(address(0), storageCollection.host, collectionId)

The address from is equal to address(0) because a new Collection is created, the address to is equal to the new hostaddress and the collectionId is equal to the idof the newly created Collection.

CollectionItem event

The second one is the CollectionItem event:

event CollectionItem(bytes32 indexed fromCollectionId, bytes32 indexed toCollectionId, uint256 indexed itemId);

The CollectionItem event is currently emitted when:

• New Items are created through the mintItems function

• New quantity of a previously created Item is minted

• When Items are created together with the Collection using the createCollection function

CollectionItem(bytes32(0), newItem.collectionId, itemIds[i])

Multiple Items can be created in a single transaction, so one CollectionItem event is emitted for each created Item.

The fromCollectionId is equal to bytes32(0) because you're creating a new Item in a Collection, the fromCollectionId represents the id of the Collection in which the Items have been created and the itemId represents the ids of the newly created Items.

If the Items are created together with the Collection using the createCollection function, both the Collection and CollectionItem events are emitted.

Frontend reconstruction

The following code can be used to retrieve all the existing Collection in your frontend, using the Collection event:

var allCollections = await web3.eth.getPastLogs({
    fromBlock: '0',
    toBlock: 'latest',
    address: itemMainInterface.options.address,
    topics: [
        web3.utils.sha3("Collection(address,address,bytes32)")
    ]
});
var allCollectionsIds = allCollections.map(it => web3.eth.abi.decodeParameter("bytes32", it.topics[3]));
allCollections = allCollections.filter((it, i) => allCollections.indexOf(it) === i);

The following code can be used to retrieve all the Collection with a certain host, aka owner, address in you frontend using the Collection event:

var allCollections = await web3.eth.getPastLogs({
     fromBlock: '0',
     toBlock: 'latest',
     address: itemMainInterface.options.address,
     topics: [
         web3.utils.sha3("Collection(address,address,bytes32)"),
         null,
         web3.eth.abi.encodeParameter("address", hostAddress)
     ]
});

The following code can be used to retrieve all the Items of specific Collection ids in you frontend using the CollectionItems event:

var collectionIds = [collectionId1, collectionId2];
var allCollectionItems = await web3.eth.getPastLogs({
                fromBlock: '0',
                toBlock: 'latest',
                address: itemMainInterface.options.address,
                topics: [
                    web3.utils.sha3("CollectionItem(bytes32,bytes32,uint256)"),
null,
collectionIds.map(it => web3.eth.abi.encodeParameter("bytes32", it))
                ]
            });
var collectionItems = {
};
allCollectionItems.forEach(it => {
var collectionId = web3.eth.abi.decodeParameter("bytes32", it.topics[2]);
var itemId =  web3.eth.abi.decodeParameter("uint256", it.topics[3]);

(collectionItems[collectionId] = collectionItems[collectionId] || []).push(objectId);
});

Display Item decimals

Items have 18 decimals both on Interoperable Interface (ERC20 side) and Main Interface (ERC1155 side), unlike the classic ERC721 and ERC1155 NFT standards which have 0 decimals.

When you show supply and balances of Items you have to take into consideration that Items have 18 decimals.

All you need to do to correctly display the supply/balance of an Item is implement the following code in your frontend: web3.utils.fromWei("1000000000000000000", 'ether') “1000000000000000000” would be the Item’s supply.

For example, $OS is an Item, and has a supply of roughly 1 million. But, without this precaution, the supply is displayed as much, much more:

• The current $OS supply is 1,036,890.000000000000000000.

  • If you read it from the Main Interface as a normal ERC1155 with 0 decimal places it displays the $OS supply as 1036890422885628366051096 (i.e. without the proper decimals).

  • If you read it from the Main Interface using the web3.utils.fromWei it displays the $OS supply as 1036890000000000000