Cart system feedbacks

[NicolasMahe]

Let's centralize here the cart system feedbacks to not block PR https://github.com/liteflow-labs/starter-kit/pull/471

[NicolasMahe]

• [x] Add a go back button when displaying an error. It's really annoying to close the cart and reopen again

  

• [x] Replace the network icon on the button "Continue with [icon]" by the network name

  

• [x] The hover and click area on the nft in the cart doesn't match. I need to click on the picture or texts to be redirected to the nft.

  

• [x] Add html hint / tooltip on the add to cart and remove from cart button. As a user I'm not sure what action the icons are going to trigger, specially the - button: Use a better icon.

  

• [x] Open the cart when I add a NFT. It's not super obvious how to open the cart.

• [ ] No more modal with the transaction status? Specially when doing the approval, it takes time and I don't have much info. Moved to https://github.com/liteflow-labs/starter-kit/issues/529

• [ ] There is no selection of quantity for ERC1155. It purchases one edition only. Moved to https://github.com/liteflow-labs/starter-kit/issues/529

[EmmanuelDrouin]

Feedback based on Nicolas proposal:

• I agree on all feedback if I do not comment those

The hover and click area on the nft in the cart doesn't match. I need to click on the picture or texts to be redirected to the nft.

I think we should only give the ability here to get redirected to the item and not the collection. I feel like this will be more efficient for the users. This is the behavrio on Opensea and Rarible, you can only get redirected to the item, no link to the collection

Open the cart when I add a NFT. It's not super obvious how to open the cart.

This is not something we should do, it will become very annoying for users to have to close the cart every time they add items. You can compare with OpenSea, Rarible, Looksrare and so on, nobody is opening the cart when adding an item.

My feedback

UI

• The Width of the cart is pretty small, compared to Opensea and Rarible I think we could extend it to give more spaces for the content (currently very very truncated)
• Summary screen > Keep the same consistency in displaying assets in terms of style as the previous screen (rounded corner, not fully rounded, same info with collection/name). As well as the same order, between those 2 screens the order changes which downgrades the accessibility for a user
  • First screen
  • 
  • Second screen with the wrong style
  • 

UX

Purchase with all items on the same chain (only 1 chain in the cart)

• After you successfully purchase your asset, the actionable route is only the explorer.
  • Change style for the secondary button
  • Add the primary button below to redirect to the user "owned" page to see the NFTs he just purchased

Purchase with items on different chains (multiple chains in the cart)

• add a button to continue checkout on another chain without "closing/re-opening" the cart

[EmmanuelDrouin]

@ismailToyran did you implement my feedback UI/UX as well from this issue? Can we close this issue if all the work left is tracked on dedicated issues?