xprnetwork / nft-demo

Monsters NFT Demo

This demo shows the basic functionality of NFTs on the Proton chain. Through the use of the Proton Web SDK, this demo allows for purchasing and selling of monsters NFT. You may view the live version of this demo (which uses Protonchain mainnet) here.

This is built off of atomicassets NFT framework.

• API Documentation for atomicassets (mainnet)
• API Documentation for atomicmarket (mainnet)
• API Documentation for atomicassets (testnet)
• API Documentation for atomicmarket (testnet)

The demo uses FOOBAR as a currency to buy and sell the monster NFTs. To get some FOOBAR tokens, use the FOOBAR Faucet.

To build and run locally

Docker

Run a docker container:

docker build \
          --tag nft-demo \
          --build-arg NEXT_PUBLIC_CHAIN_ID="384da888112027f0321850a169f737c33e53b388aad48b5adace4bab97f437e0" \
          --build-arg NEXT_PUBLIC_CHAIN_ENDPOINT="https://proton.greymass.com" \
          --build-arg NEXT_PUBLIC_BLOCK_EXPLORER="https://proton.bloks.io/block/" \
          --build-arg NEXT_PUBLIC_GA_TRACKING_ID="YOUR_TRACKING_ID_HERE" \
          --build-arg NEXT_PUBLIC_NFT_ENDPOINT="https://proton.api.atomicassets.io" \
          .

docker images

docker run -p 3000:3000 -i -d [image id]

npm

git clone https://github.com/ProtonProtocol/nft-demo.git

npm install

npm run dev

Environment

Create a copy of .env.template and name it .env.local:

For mainnet:

NEXT_PUBLIC_CHAIN_ID='384da888112027f0321850a169f737c33e53b388aad48b5adace4bab97f437e0'
NEXT_PUBLIC_CHAIN_ENDPOINT='https://proton.greymass.com'
NEXT_PUBLIC_BLOCK_EXPLORER='https://proton.bloks.io/block/'
NEXT_PUBLIC_NFT_ENDPOINT='https://proton.api.atomicassets.io'

For testnet:

NEXT_PUBLIC_CHAIN_ID='71ee83bcf52142d61019d95f9cc5427ba6a0d7ff8accd9e2088ae2abeaf3d3dd'
NEXT_PUBLIC_CHAIN_ENDPOINT='https://testnet.protonchain.com'
NEXT_PUBLIC_BLOCK_EXPLORER='https://proton-test.bloks.io/block/'
NEXT_PUBLIC_NFT_ENDPOINT='https://test.proton.api.atomicassets.io'

Marketplace

The marketplace page consists of templates of a specific collection_name.

Custom flags

• The Template object is extended with the following custom property: lowestPrice.
  • lowestPrice (string) is determined by checking the Sales API for assets listed for sale and finding the lowest price of the assets of that particular template.

My NFTs

The My NFTs page consists of the current user's assets. Each user is only allowed to view their own collection page in this demo.

Custom flags

• The Asset object is extended with the following custom properties: isForSale and salePrice.
  • isForSale (boolean) is determined by checking the Sales API for currently listed sales using the asset_id and seller (current user's chainAccount)
  • salePrice (string) is determined by checking the Sales API and combining an asset's listing_price and listing_symbol

nft-demo's Issues

Bug: my-nft page broken with template_ids from other collections

Hi, don't have time to make a PR, so here the fix:

To reproduce the error, check this out:

https://nft.protonchain.com/my-nfts/cryptotester

Here the fix:

File: services/templates.ts:

Replace:

    const templateIds = accountResponse.data.templates
      .map(({ template_id }) => template_id)
      .splice((page - 1) * 10, 10);

With:

    const templateIds = accountResponse.data.templates
      .filter((tpl) => tpl.collection_name === DEFAULT_COLLECTION)
      .map(({ template_id }) => template_id)
      .splice((page - 1) * 10, 10);

Like this you filter just templates of the monsters collection ;)

Cheers

Insufficient Funds Error

Lets only show this error once a user selects a serial # to buy

Show interesting statistics in the template page

It would be really nice to show, when clicking e.g. a template like this:

https://nft.protonchain.com/10

Besides "Edition Size" also:

• nr of minted items (sometimes the edition size is big, but the minted nr is not the maximum supply)
• nr of items for sale (this is easy: total of items in the dropdown)
• nr of items not for sale (=minted amount - amount items for sale)
• list of owners (users who hodl this but didn't put it for sale and if they have many of this, how many per user)
• total amount of sales so far (basically how many times this template has been traded)

Redirect to My NFTs once bought

Once the user buys a NFT, lets redirect them to their My NFTs, which will work great with #27

Rething serial sorting (e.g. by price)

Hi, when checking the details of an NFT, please rethink the serial number dropdown. Allow to sort NFTs by ID or price, ascending or descending.

Now the order looks like random, see screenshot:

Also what happens if the dropdown has thousands of articles for sale?

See sales history of a particular monster (template) instead of just history of asset

See here. Right now when you browse to an asset, e.g. Dullahan, you see by default only the history of the cheaper offer, like in this case the id 86 being sold for 1.5M.

It would be nice to have a way to see the history of all Dullahan serial numbers. In fact this would make more sense to me, so to understand market prices etc. I mean I'd be very curious to see what where the selling prices before reaching 1.5M. The majority of them is not listed for sale, but it would be cool ti see that history too.

I'd do like this, change the actual history and show the history of all serial numbers (asset_ids, actually) belonging to that template.

Then I'd add a switch button called like "only this serial history" that if clicked, would filter the history and show only the selected asset. So e.g. when clicking a different serial number from the dropdown I'd still show the global history. When the switch button clicked: show only that serial nr. If clicked again, show again the global history. If clicked (filtered by serial) and clicked a new serial nr from the dropdown, like now, show the history filtered by that asset.

What do you think?

Transfer / gift NFTs

I think that an NFT marketplace needs also the ability to transfer NFTs to other users. It should be feasible by adding a "transfer" or "send" button, then allow the user to provide a username, then on send, check if the username exists, if yes let the wallet confirm the transaction or if the wallet is not needed, just make in on the fly.

Bug: Sale history not per template but global

I recently bought Wendigo two times for 6k FOOBAR each, going to Wendigo page: https://nft.protonchain.com/9
Expanding the sale history:

Now going to ghoul (or any other monster): https://nft.protonchain.com/8

Expanding the sale history:

The history is the same.

Expected result: each monster page should show the sales history of that particular monster, not all market history.

Strip trailing zeroes and delimitation

Prices require formatting

Lowest Price
1999.000000 FOOBAR -> 1,999 FOOBAR

Highest Price
1000000000.000000 FOOBAR -> 1,000,000,000 FOOBAR

Incorrect labelling of template # as serial number

Issue: UI says serial number #9 / 900. Actually it is not #9/900, #9 is the template.
Fix: Remove the Serial # text

Wrong lowest price

Dullahan shows up at 2 FOOBAR, but when I click it the lowest price is actually 2 millions. See also other NFTs.
Browser: Brave.

I think you messed up something if price is too high you divide by 1000?
Also if I try to buy it it doesn't stop me, it actually starts the transaction that I must confirm on my wallet, just to see that I don't have balance. It should prevent it directly if the balance is not enough (the marketplace knows my balance as I have to deposit before buying, so somewhere the price is really messed up).

Invalid sorting by price

The sorting algorithm here by price seems off: https://nft.protonchain.com/10

Remove Test Details

https://nft.protonchain.com/assets/4398046515841

Still says "Test Details"

Sort My NFTs by Transfer time

Lets sort by descending transfer_time in the My NFTs page, can see all data fields at https://nft.protonchain.com/api/my-assets?owner=syedjafri&page=1

Add sorting/filtering in Marketplace and My NFTs pages

Originally posted by @cryptotester in #42 (comment)

May I add also to improve this page in general, like add sorting by:

• rarity (e.g. 100s edition comes before 200s etc.)
• name
• purchase price
• purchase datetime
• actual lowest value (compare the same item being sold and show its minimum price in the market, and show the price too, so you know how much it's worth the cheapest one now)
• other sorting...

Feel free to create a new issue if you think this is a new feature. But since you said you have some new designs in progress maybe you wanted to improve this page already and this could be related too.

Bug: mark for sale

Hi, browse to "My NFTs" page. Click a monster and click "mark for sale".
I get this error "An unexpected error has occurred."

Modify sale price

To modify the price of an item for sale, I have to cancel the sale, then list it again. I'd like this to happen in one go, add a "modify" price and let the user specify the new price, then authorize the operation. Better user experience.

Site not loading monsters with docker container

OS: Ubuntu 20.04
docker -v # my docker version is: Docker version 19.03.13, build 4484c46d9d

I did like this:

Set the .env.local variable, the site works without docker if I use warn run dev

cd nft-demo # optional (to be inside the nft-demo folder if not there already)
docker build . # Please note in the README it's written docker build nft-demo . which does not work, docker build needs exactly 1 parameter not 2...
docker images
docker run -p 3000:3000 -i -d IMAGEID

I browse to http://localhost:3000/
Loading indicator loads forever.

Browser console:

I also tried to copy .env.local to .env
Same result

Notice that when I build the image I get a lot of errors in red:

Step 18/20 : RUN yarn build
---> Running in 910a82909c4d
yarn run v1.22.5
$ next build
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
Loaded env from /usr/src/app/.env.local
Loaded env from /usr/src/app/.env
info - Creating an optimized production build...
Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://nextjs.org/telemetry

info - Using external babel configuration from /usr/src/app/babel.config.json
info - Compiled successfully
info - Collecting page data...
n [Error]
at e. (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:66214)
at c (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:3942)
at Generator._invoke (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:3695)
at Generator.throw (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:4301)
at o (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:310)
at u (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:549)
at runMicrotasks ()
at processTicksAndRejections (internal/process/task_queues.js:93:5) {
json: undefined
}
(node:26) UnhandledPromiseRejectionWarning: Error
at e. (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:66214)
at c (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:3942)
at Generator._invoke (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:3695)
at Generator.throw (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:4301)
at o (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:310)
at u (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:549)
at runMicrotasks ()
at processTicksAndRejections (internal/process/task_queues.js:93:5)
(Use node --trace-warnings ... to show where the warning was created)
(node:26) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2)
(node:26) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
n [Error]
at e. (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:66214)
at c (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:3942)
at Generator._invoke (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:3695)
at Generator.throw (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:4301)
at o (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:310)
at u (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:549)
at processTicksAndRejections (internal/process/task_queues.js:93:5) {
json: undefined
}
(node:52) UnhandledPromiseRejectionWarning: Error
at e. (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:66214)
at c (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:3942)
at Generator._invoke (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:3695)
at Generator.throw (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:4301)
at o (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:310)
at u (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:549)
at processTicksAndRejections (internal/process/task_queues.js:93:5)
(Use node --trace-warnings ... to show where the warning was created)
(node:52) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2)
(node:52) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
n [Error]
at e. (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:66214)
at c (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:3942)
at Generator._invoke (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:3695)
at Generator.throw (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:4301)
at o (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:310)
at u (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:549)
at processTicksAndRejections (internal/process/task_queues.js:93:5) {
json: undefined
}
n [Error]
at e. (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:66214)
at c (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:3942)
at Generator._invoke (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:3695)
at Generator.throw (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:4301)
at o (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:310)
at u (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:549)
at processTicksAndRejections (internal/process/task_queues.js:93:5) {
json: undefined
}
(node:45) UnhandledPromiseRejectionWarning: Error
at e. (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:66214)
at c (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:3942)
at Generator._invoke (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:3695)
at Generator.throw (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:4301)
at o (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:310)
at u (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:549)
at processTicksAndRejections (internal/process/task_queues.js:93:5)
(Use node --trace-warnings ... to show where the warning was created)
(node:45) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2)
(node:45) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
(node:59) UnhandledPromiseRejectionWarning: Error
at e. (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:66214)
at c (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:3942)
at Generator._invoke (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:3695)
at Generator.throw (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:4301)
at o (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:310)
at u (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:549)
at processTicksAndRejections (internal/process/task_queues.js:93:5)
(Use node --trace-warnings ... to show where the warning was created)
(node:59) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2)
(node:59) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
n [Error]
at e. (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:66214)
at c (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:3942)
at Generator._invoke (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:3695)
at Generator.throw (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:4301)
at o (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:310)
at u (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:549)
at processTicksAndRejections (internal/process/task_queues.js:93:5) {
json: undefined
}
(node:66) UnhandledPromiseRejectionWarning: Error
at e. (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:66214)
at c (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:3942)
at Generator._invoke (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:3695)
at Generator.throw (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:4301)
at o (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:310)
at u (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:549)
at processTicksAndRejections (internal/process/task_queues.js:93:5)
(Use node --trace-warnings ... to show where the warning was created)
(node:66) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2)
(node:66) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
info - Generating static pages (0/4)
n [Error]
at e. (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:66214)
at c (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:3942)
at Generator._invoke (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:3695)
at Generator.throw (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:4301)
at o (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:310)
at u (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:549) {
json: undefined
}
n [Error]
at e. (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:66214)
at c (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:3942)
at Generator._invoke (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:3695)
at Generator.throw (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:4301)
at o (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:310)
at u (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:549) {
json: undefined
}
n [Error]
at e. (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:66214)
at c (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:3942)
at Generator._invoke (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:3695)
at Generator.throw (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:4301)
at o (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:310)
at u (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:549) {
json: undefined
}
(node:96) UnhandledPromiseRejectionWarning: Error
at e. (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:66214)
at c (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:3942)
at Generator._invoke (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:3695)
at Generator.throw (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:4301)
at o (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:310)
at u (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:549)
(Use node --trace-warnings ... to show where the warning was created)
(node:96) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2)
(node:96) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
info - Generating static pages (1/4)
(node:107) UnhandledPromiseRejectionWarning: Error
at e. (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:66214)
at c (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:3942)
at Generator._invoke (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:3695)
at Generator.throw (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:4301)
at o (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:310)
at u (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:549)
(Use node --trace-warnings ... to show where the warning was created)
(node:107) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2)
(node:107) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
info - Generating static pages (2/4)
n [Error]
at e. (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:66214)
at c (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:3942)
at Generator._invoke (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:3695)
at Generator.throw (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:4301)
at o (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:310)
at u (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:549) {
json: undefined
}
(node:114) UnhandledPromiseRejectionWarning: Error
at e. (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:66214)
at c (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:3942)
at Generator._invoke (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:3695)
at Generator.throw (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:4301)
at o (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:310)
at u (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:549)
(Use node --trace-warnings ... to show where the warning was created)
(node:114) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2)
(node:114) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
info - Generating static pages (3/4)
(node:94) UnhandledPromiseRejectionWarning: Error
at e. (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:66214)
at c (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:3942)
at Generator._invoke (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:3695)
at Generator.throw (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:4301)
at o (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:310)
at u (/usr/src/app/node_modules/@proton/js/dist/js.cjs.production.min.js:1:549)
(Use node --trace-warnings ... to show where the warning was created)
(node:94) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2)
(node:94) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

If I run yarn build locally I don't get all these errors, for me it seems to work flawlessy. Just not inside docker:

yarn run v1.17.3
$ next build
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
Loaded env from /nft-demo/.env.local
Loaded env from /nft-demo/.env
info - Using external babel configuration from /nft-demo/babel.config.json
info - Creating an optimized production build
info - Compiled successfully
info - Collecting page data
info - Generating static pages (4/4)
info - Finalizing page optimization

Page Size First Load JS
┌ ○ / 3.58 kB 343 kB
├ /_app 0 B 330 kB
├ ○ /[templateId] 2.36 kB 349 kB
├ ○ /404 2.55 kB 333 kB
├ λ /api/profile 0 B 330 kB
├ λ /my-nfts/[chainAccount] 3.74 kB 343 kB
└ ○ /my-templates/[templateId] 3.33 kB 350 kB

• First Load JS shared by all 330 kB
  ├ chunks/commons.c80e79.js 13.2 kB
  ├ chunks/f7a7a2b2b684dd1f7d7020af3edf6ab5d4cbed9b.385beb.js 262 kB
  ├ chunks/framework.8eb5a3.js 41.8 kB
  ├ chunks/main.bbc201.js 6.17 kB
  ├ chunks/pages/_app.3c8a42.js 6.26 kB
  ├ chunks/webpack.57651b.js 751 B
  └ css/c2624a443703a8a92b21.css 772 B

λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
○ (Static) automatically rendered as static HTML (uses no initial props)
● (SSG) automatically generated as static HTML + JSON (uses getStaticProps)
(ISR) incremental static regeneration (uses revalidate in getStaticProps)

Done in 26.94s.

NFT page: button/control to sort NFTs by price or id ascending/descending

Problem, when clicking an NFT to buy it, the dropdown sorts the available items by id, and it looks kinda messy if you want to get an idea of the available prices. See:

It would be nice to have a button or a control to allow to sort the available NFTs by id and by price ascending and descending. So if you want cheap you sort by price asc, if you are a whale and want to buy the expensive one without scrolling down too much you can sort by price descending.

Maybe a button/control as indicated in the red rectangle? See:

My NFTs - group doubles (like in the marketplace)

My NFTs page looks like this because I bought the same NFTs a few times, some to collect, some to sell later a bit higher and make some profits (kinda a realistic use case):

It would be nice to group the same NFTs under the same image. Then either when clicking I'd see a detail page like now, or a page showing all the editions.

I'm no UX expert but I think a good solution could be to show a dropdown in the "My NFTs page" under each NFT, when the owned ID is clicked the detail page of that particular one would open the asset page, like now. If there is only one NFT show just a text, if more are owned of the same show the dropdown. It may look not so nice if there is only one with a dropdown and the others are unique. Must be tested a bit, maybe you find a nice looking "+" button to expand or something like that...

Profile Image Caching

Issue: 100s of requests made for profile images
Replicate: Go to https://nft.protonchain.com/9

Quick Fix: Add a new /profile endpoint to server, which will enable local caching (not request Joe 50 times)
Long term fix: Need caching through cloudflare workers / redis