NFTs View - Filter By Collection Dropdown

[picarodias]

What is to be done?

• Implement the Filter by Collection Dropdown in NFT View

Implementation Notes

• The current return of GhostMarket API makes it hard to filter by collection.
• We need to define a strategy for this before this issue can be implemented.

Technical Requirements

Filter By Collection Dropdown

• dropdown: Collections
  • label: Filter by collection
  • (must be populated by all collections of which the given address holds NFTs | choosing a collection must filter the NFTs displayed, showing only the ones belonging to the chosen collection)

Mobile Adjustments

Just the dropdown layout in the page is changed.

• dropdown: Collections
  • Center aligned to the page, instead of to the right.
  • Full page width

[picarodias]

Collection Filtering implemented on NWD by @comountainclimber
For reference only:

async function getNFTs({ net, address }) {
  if (net === 'MainNet') {
    const rpcClient = new rpc.RPCClient('http://seed1.neo.org:10332/', '2.3.3')

    const { result } = await rpcClient.execute(
      new rpc.Query({
        method: 'getnep11balances',
        params: [address],
      }),
    )

    const results = []

    if (result && result.balance && result.balance.length) {
      for (const nft of result.balance) {
        const tokenNameResponse = await new n3Rpc.RPCClient(
          'http://seed1.neo.org:10332/',
        )
          .invokeFunction(nft.assethash, 'symbol')
          .catch(e => {
            console.error({ e })
          })

        const symbol = atob(tokenNameResponse.stack[0].value)

        const API_URL = `https://api.ghostmarket.io/api/v1/metadata?contract=${
          nft.assethash
        }&chain=n3&token_id=${nft.tokens[0].tokenid}`
        const { data } = await axios.get(API_URL)

        const collectedData = {
          collection: data.name || 'N/A',
          symbol,
          count: nft.tokens.length,
        }

        results.push(collectedData)
      }
    }

    return results
  }

  return []
}

[thiagocbalducci]

We need to discuss with GM about risks of using their API directly in our Frontend and see if they would have us implement some kind of limitation (maybe a new API on our side to reach them?)