Display NFTs from wallet by policyId

[hunzai]

Each NFT has a policyId (each collection has same policyID) for example https://www.jpg.store/collection/theapesociety has many NFTs/Assets with same policy id.

In simple words, the name of collection is mapped to a unique policyId.

Feature To Implement As a multiple NFTs owner, I want to display NFTs on a web page by policyId.

Examples I have two collections

1. https://www.jpg.store/collection/theapesociety
2. https://www.jpg.store/collection/urducalligraphy-imrankhan

When I connect to the page then I see two cards with summary of each collection. Each card contains,

1. the collection name
2. total number of assets/nfts in the collection or policyId

[Shan-barcha]

@hunzai I will start work on this when the previous issue solved.

[Shan-barcha]

@hunzai sir, should I start working on this issue ? or should I wait till you merged the previous task ?

[hunzai]

@Shan-barcha the PR is merged.

[Shan-barcha]

@hunzai sir, wallet.getAssets(); gives us assects from the wallet, I don't have any collections to fetch. if you have any test collections please send them to me.

[Shan-barcha]

please guide me a little bit more about this.

[hunzai]

@Shan-barcha I will create some test collections.

In the next, PR you can work on the followings

1. Group collections into different sections with the name of collection in the heading.
2. The heading on the collection always has a floor price (fake for now)

See example below.

• Replace mint price with floor price. Display a dummy price

[Shan-barcha]

sir, I haven't received test collections!

[hunzai]

@Shan-barcha send me your pre-prod wallet address.

[hunzai]

@Shan-barcha rename /wallet page to /nfts and implement code in that page

[Shan-barcha]

addr_test1qp666nn4pmlv70ylpdd4chxz5qm7v39t67skg3e40gn7dtcq7aj2ytz4msx0y4gerdvvcr8vgxazhxsr8zwtu4h62sssa2gty0

[Shan-barcha]

prepod wallet adddress.

[hunzai]

@Shan-barcha sent NFTs , let me know. There are three different policies these should be enough for testing

[Shan-barcha]

sir made some changes please take a look.

[Shan-barcha]

I am unable to display images by policyId .

[hunzai]

@Shan-barcha what is the json response you are getting when you fetch asset from wallet? Does it contain image url ?

[hunzai]

You can get floor price using https://server.jpgstoreapis.com/collection/0bada513e47a999e756233c3213be4eed17361149db55d425f697dcd/floor where https://server.jpgstoreapis.com/collection//floor

Add an to the backend and get by implementing a method e.g. floorPrice(policyId) , let me know if u need help

[Shan-barcha]

sir, i didn't get any image URL in the JSON response.

[hunzai]

@Shan-barcha for now use a fake image

[hunzai]

work on floor mentioned above

[Shan-barcha]

sir as I mentioned above there is no image URL in the JSON response. for now, I just use the same image for all NFTs .

[hunzai]

integrate https://blockfrost.io/ and use https://blockfrost.dev/docs/sdks-js

[hunzai]

1. integrate/install sdk
2. use following json response

{
  "asset": "3bcc312ebe7cd9281ab3e3d641bf70f207012e539b0e6e7c3f1560d73242696c6c35363034",
  "policy_id": "3bcc312ebe7cd9281ab3e3d641bf70f207012e539b0e6e7c3f1560d7",
  "asset_name": "3242696c6c35363034",
  "fingerprint": "asset1fpma0dczekxdjm3pw33jr6uh6qldxt5jt6vkhg",
  "quantity": "1",
  "initial_mint_tx_hash": "c2eee460ad5d32c42ec90c883f216d888b5069712f49c8bef932743666917c07",
  "mint_or_burn_count": 1,
  "onchain_metadata": {
    "image": "ipfs://QmZiMc14ekVLgh9a9riMRUk3Lakz8cuufWBTJTV7uAhnbK",
    "Base": "Base 4",
    "Eyes": "Left",
    "Hair": "Wild",
    "Head": "Eyes Color",
    "Mask": "Nothing",
    "Name": ".2 Bill #5604",
    "Nose": "Nothing",
    "Suit": "Torso",
    "Asset": "2Bill5604",
    "Blood": "Nothing",
    "Horns": "Nothing",
    "Label": "WTF",
    "Mouth": "Girl Red",
    "Spear": "Spear 3",
    "Stamp": "Zimbabwe",
    "files": [
      {
        "src": "ipfs://QmZiMc14ekVLgh9a9riMRUk3Lakz8cuufWBTJTV7uAhnbK",
        "name": "2Bill5604",
        "mediaType": "image/jpeg"
      }
    ],
    "Number": "5604",
    "Phrase": "12",
    "Series": "$0.2 Bills",
    "Contour": "Doodles",
    "Drawing": "ADA",
    "Eye Pop": "Nothing",
    "Glasses": "Nothing",
    "Website": "https://www.oldmoney.io",
    "Forehead": "Nothing",
    "mediaType": "image/jpeg",
    "Collection": "Old Money",
    "Laser Eyes": "Nothing",
    "Degradation": "Fold 3",
    "Note Number": "18",
    "Stamp Color": "Green",
    "Plate Number": "33",
    "Serial Number": "Z12671602",
    "Burns and Tape": "Tape 1"
  },
  "metadata": null
}

[hunzai]

replace ipfs:// with https://ipfs.io/ in ipfs/QmQqzMTavQgT4f4T5v6PWBp7XNKtoPmC9jvn12WPT3gkSE

[Shan-barcha]

sir now everything works now but the image is not showing could you please check...

[Shan-barcha]

sir should i use tag instead of nextjs image tag it works when I use the simple img tag.

[Shan-barcha]

sir update the pull request please have a look.