Integrate the Item standard in LooksRare Interface and SDK

[francescocirulli]

Overview:

Items are objects working as ERC1155 and ERC20 at the same time. All Items have 18 decimals (both on ERC1155 and ERc20 side) and not 0 like standard ERC1155. Also, all Items have the same 1155 address but have virtualized Collections.

With this issue, we want to provide you with all the info to correctly show items decimal and the items collection.

If you need more info send us an email:
[email protected]

Problem:
Decimals
The LooksRare interface does not read the decimals of the Items correctly as it reads all tokens as normal ERC1155 with 0 decimals. As a result, tokens with 18 decimals result in a wrong supply/balance causing issues for users.

Collections
All Items have the same 1155 address (0x8d53aFBEB62C18917B5F71385d52E8ba87669794 on Ethereum mainnet) since they all belong to the Main Interface smart contract. Consequently they are all seen as part of the same Collection. However each Item belongs to a specific virtualized Collection defined by a bytes32 identifier. In fact, each Collection has its own specific Metadata and minting permissions.

Solution:
Decimals
All you need to do to correctly display the supply/balance of an Item is to implement the following code in your frontend: web3.utils.fromWei("1000000000000000000", 'ether') "10000000000000000000000" would be the Item's supply.
For example, [$OS](https://etherscan.io/token/0x6100dd79fcaa88420750dcee3f735d168abcb771) 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,000,000.000000000000000000.
• If you read it from the Main Interface as a normal ERC1155 with 0 decimal places it displays the $OS supply as 1000000000000000000000000 (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 100000000000000000000

Collections
All you need to do to correctly display Items Collection is to divide in your Interface the Items by Collection and not show them all under one "items" collection.
To do this just read from the CollectionItem event emitted every time a new Item is mined. The event has the second bytes32 parameter that indicates the specific id of the Collection it belongs to.
The following code can be used as a guideline:

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);
});

Resources:
https://docs.ethos.wiki/ethereansos-docs/items/items/frontend-integration/frontend-reconstruction