Implement shopping cart

[amenconi]

Apologies, didn't realize changing branch name would close the previous PR.

Initial shopping cart main feature set:

• Shopping cart icon in header that will open the cart in a modal.
• Shopping cart icon on NFT page and NFT cards on collection/nfts page with logic implemented to only display the icon for adding NFTs to cart if it passes same checks that allow the buy button to be visible on the NFT page.
• Notifications for when NFTs are added to cart, removed from cart or is blocked due to NFT already being present in the cart.
• Shopping cart to have the follow info per NFT added to cart: Image, Collection Name (linkable to collection page), NFT Name (linkable to NFT page), Royalties %, available for sale status, quantity / quantity available to add, [price] [token] per NFT and a remove icon.
• When cart loads, it will grab fresh Collection/NFT to display most up to date information and track if availability for sale of each cart NFT has changed or not.
• For NFTs that have more than 1 available for purchase (SFTs and Generated+Unowned etc.) have an input where quantity can be typed in or increased/decremented via up/down arrows.
• Checkout button that will launch an overlay with the cart checkout screen.
• Checkout screen will group each NFT from cart by network/token symbol since bulk order API requires a single network per call.
• NFTs in each group will display the following information: NFT Name (linkable to NFT page), Collection Name (linkable to Collection page), quantity, price per NFT, line item total showing price * quantity, a total row with sum of quantities and total price for all NFTs and quantities.
• If there are NFTs in cart that have become unavailable for sale, when checkout overlay loads it will warn the user that X number of NFTs were not included in the checkout review due to no longer being available for sale.
• Radio selector to choose which group of NFTs to purchase.
• Checkbox to agree to Terms and Conditions prior to Confirm and Lock button press which will generate the bulk buy transaction.
• Same process for purchase as single NFT buys with exception of button to "Show My NFT" upon purchase completion.
• "Sweep to Cart" button on collection/nft pages that will have a slider and a "Sweep to Cart" button. Upon slider select and button press, the collection NFTs available for sale will be sorted by price low to high and the top X NFTs added to the cart.

Left to do:
Review responsive design for small viewports and modify UI accordingly.

[adamunchained]

Amazing!

@amenconi - I'll be reviewing the code more in details over the weekend.

@SoonaverseTF - This new feature is available here: https://amenconi-shopping-cart.app-cqo.pages.dev - please work with the community on the testing and once you approve this request it'll be merged. It's linked to PROD database. See more on reason why here: #127 (review)

@SoonaverseTF - please also determine the TOKEN reward so we can update CONTRIBUTORS.md and execute SOON distribution

[amenconi]

Thanks Adam. Initially dev link for testing seemed to work well yesterday when I tried, now it seems that no data loads (i.e. all collections show 0 deposited for all I've checked).

When I checked it yesterday I found 2 issues that might be worth correcting before merging anything:

1. Sweep to Cart slider didn't populate correct range on load of some collections. I believe it is related to the collections type and can fix the issue so it's more robust and functions with all collection types at all collection statuses. Alternately I can pull it out into it's own feature for testing and release after shopping cart gets merged.

2. Selecting quantity outside of valid range in cart modal gives a warning that an invalid value has been selected, however if not fixed, it will pass the invalid qty value to the checkout overlay. I actually built a more robust input identical to the cart quantity input in the single-nft-bulk-buy feature so can easily enhance this code based on that so that values always default in the input to within the valid range.

Let me know what would be best practice to address each of these issues and will keep testing to see if I find anything else.

Thank you.

[amenconi]

Pushed more refinements to branch, namely:

1. Improved cart quantity input to revert any input value outside of valid range to closest value within the valid range. This should stop anyone from ignoring the warning about incorrect quantities and passing the incorrect values to the cart checkout modal.

2. Fixed issues with "Sweep to Cart" feature. As part of this work I ended up refactoring the collection/nfts page. Retrieving available NFTs to set max allowed sweep amount in slider should now be better separated from code that populates the page with NFTs. Also fixed a sorting issue so that the sweep should better select the cheapest NFTs in collection that are available for sale before adding them to the cart. Also added a message to indicate when not enough NFTs in the collection are available to perform a sweep.

This should allow a simplistic method of sweeping for users. In the future we should probably discuss adding in a more robust sweep mechanic with such features as:

• Real-time highlighting of NFTs on the page as sweep amount is changed on slider.
• Adding in ability to checkout selected sweep NFTs as an alternative options to adding the NFTs to the cart.
• Summing total price and displaying it to user before selecting to add them to cart or bulk purchase them directly.
• etc
  However that feels like it should be a separate enhancement project on it's own and likely not in line with our current priorities for now.

Thank you.

[adamunchained]

Great effort! See some of my comments.

I'll talk to people in #dev channel and ask them to help on testing. I'll try to do some testing myself as well tomorrow based on all features you highlighted.

[adamunchained]

Just tested the sweep function. You should exclude NFTs that are available only for certain members. If the member logged in is not the same it should not add NFT into the card. It will fail during purchase.

[adamunchained]

Screen.Recording.2024-01-30.at.2.31.59.PM.mov

• hide items once bulk purchase is created

I feel like once the bulk purchase is ordered it might be a good idea to hide the items otherwise user might not notice bottom section.

I'm wondering if it wouldn't be cleaner to have dedicated page for the shopping page instead of multiple modals. They tend to be quite big. Anyways, I'll spend some time on this tomorrow and provide more feedback.

[amenconi]

Just tested the sweep function. You should exclude NFTs that are available only for certain members. If the member logged in is not the same it should not add NFT into the card. It will fail during purchase.

Yes this is a good point. I was just thinking about NFTs posted with specified "saleAccessMembers" as well. I'll have to more closely review all possible states that might not allow the sale of the NFT for both logged in and not logged in users and add it in for a more comprehensive "isAvailableForSale" boolean check.

[amenconi]

Screen.Recording.2024-01-30.at.2.31.59.PM.mov * [ ] hide items once bulk purchase is created

I feel like once the bulk purchase is ordered it might be a good idea to hide the items otherwise user might not notice bottom section.

I'm wondering if it wouldn't be cleaner to have dedicated page for the shopping page instead of multiple modals. They tend to be quite big. Anyways, I'll spend some time on this tomorrow and provide more feedback.

Ah yeah, I should have handled everything centrally from the cart service to begin with. Will refactor this so that cart modal and checkout overlay open, close and state tracking is all handled in the service to avoid things like this.

Also good idea on hiding the items. I'll put them in a collapsible div and just collapse it once you are past the CONFIRM stage, so they are out of sight but can be reviewed by expanding checkout items any time after, as needed.

I did think about a dedicated page and looked at a few other NFT marketplace sites that are popular. Seems like many others handle it in a drawer or modal. My thought process was keep it in modal/overlay and potentially also add a cart/checkout page available in the profile later for logged in users to give users more options for navigation to review cart and checkout progress. However I am, of course, completely open to redesigning this in any way at all that makes it most intuitive for the user, efficient and performant.

For now I'll fix the highlighted issues but at any time let me know if you'd like it designed differently and we can hash out how it might be improved for the next iteration.

Thanks.

[adamunchained]

Screen.Recording.2024-01-30.at.2.31.59.PM.mov * [ ] hide items once bulk purchase is created I feel like once the bulk purchase is ordered it might be a good idea to hide the items otherwise user might not notice bottom section. I'm wondering if it wouldn't be cleaner to have dedicated page for the shopping page instead of multiple modals. They tend to be quite big. Anyways, I'll spend some time on this tomorrow and provide more feedback.

Ah yeah, I should have handled everything centrally from the cart service to begin with. Will refactor this so that cart modal and checkout overlay open, close and state tracking is all handled in the service to avoid things like this.

Also good idea on hiding the items. I'll put them in a collapsible div and just collapse it once you are past the CONFIRM stage, so they are out of sight but can be reviewed by expanding checkout items any time after, as needed.

I did think about a dedicated page and looked at a few other NFT marketplace sites that are popular. Seems like many others handle it in a drawer or modal. My thought process was keep it in modal/overlay and potentially also add a cart/checkout page available in the profile later for logged in users to give users more options for navigation to review cart and checkout progress. However I am, of course, completely open to redesigning this in any way at all that makes it most intuitive for the user, efficient and performant.

For now I'll fix the highlighted issues but at any time let me know if you'd like it designed differently and we can hash out how it might be improved for the next iteration.

Thanks.

Make sense. I agree it's a great start and you can improve / change as people use it.

Great work on this. I put together list of some suggestions and potential issues. I will leave it up to you to decide what you think it's important to fix/change/improve:

• I think user should have an option to empty the whole cart with one click (specially if they hit sweep with large qty)
• I fee like headers in the shopping cart are too repetitive (info, status, price each, etc.). Some of them are also obvious and might not need header (ie. remove)
• on the price column I would also show USD value
• on some items in the shopping cart you're not able to increase qty because you are buying exact item. In this case, I think the field should be disabled.
• when you click on checkout, it shows the list where I'm able to click on actual "NFT" and "Collection" to navigate into it. It changes in the background without closing the modal. User might not notice. I think I would just open it in a new window.
• when I hit "add the cart" on the NFT, I can hit again even though it's already in the cart. Maybe, button could change and tell the user it's already in their cart.
• sometimes certain items might no longer be on sale by the time user hits buy / or might be restricted sale. You only show internal error atm. I think you might want to interpret messages coming from the build.5. See screenshot 1
• when I'm purchasing from various networks it seems "iota" symbol is uknown. See screenshot 2
• after I hit purchase button I'm presented with address to send funds too. In case of multiple networks it shows items from the network I didn't select. I think you can only shows items for the actual network they're purchasing in.
• I would hide the purchase not completed if the shopping cart is open. It's overlaying over each other. See screenshot 3
• after the successful purchase, it would be cool to take them to their gallery (NFTs tab) to see they own those purchased item. It's ordered by most recent purchases so it should be at the top.

Screenshot 1

Screenshot 2

Screenshot 3

Great work! This is very exciting feature.

[emmap3-do]

I've been testing and overall it's looking great and working fine.
I have some suggestions/comments:

• On each NFT card, the wallet icon (buy) and cart icon are 'touching' each other, maybe separate them a few pixels.
• On the cart modal popup, maybe remove the gray labels 'Info', 'Status', etc. Maybe change it as shown in the picture attached.
• Add an 'Empty cart' button to the modal footer.
• When you add an item to the cart, disable the cart button in the card (because it was already added), Or replace it with a 'remove from cart' button.
• When you add an item to the cart, the cart icon in the top right corner of the screen updates the qty of items (which is correct) but if you have multiple browser tabs opened, the qty is not updated on the other tabs. Furthermore, if you open the cart details in any of the other tabs, you don't see the recently added item, until you refresh the page. This should be consistent throughout browser tabs.
• It would be great if the 'Sweep to cart' slider also shows the total amount the sweep entails. Eg. "4 items / 3600 SMR"
• Checkout page: I would add the Royalties value to each item there.
• When you have items from different networks added to the cart and go to the checkout step, I think radiobuttons are not very clear for the user. May be good to think of an alternate approach for this UI. One idea that comes to mind is to have 2 tabs within this checkout (one tab for each network). With labels like: 'IOTA Checkout' and 'SMR Checkout'. This would also make the popup smaller in height and button at the bottom visible. But may be more complex because you would need to disable a tab once it's been paid out.
  Another approach would be to split the checkout process into steps (one step per network). But this development may took more work and it also means you have to decide what network the user will pay first (some users may prefer to have the option).

[cloudflare-workers-and-pages]

Deploying prod-soonaverse-pr-previews with    Cloudflare Pages

Latest commit:	fba8fdd
Status:	✅  Deploy successful!
Preview URL:	https://f628cea2.app-cqo.pages.dev
Branch Preview URL:	https://amenconi-shopping-cart.app-cqo.pages.dev

View logs

[amenconi]

Sorry for delay on things. Thank you for the fantastic feedback. I've just pushed a large revision and will try to capture the major changes. I refactored the cart checkout modal to gain better control of when and how it opens and closes. Main feature changes:

• Added a clear cart button to remove all cart items at once.
• Changed the cart modal header to just display once rather then for each NFT row.
• Reduced the NFT image size and padding so each NFT row in cart takes up less vertical space.
• It now should be impossible to open multiple versions of the cart checkout window.
• Aligned the cart checkout with the header #notCompletedNotification template so that it accurately detects when the checkout is open or not and only displays when cart checkout is closed.
• USD values for NFTs should be displayed in cart and cart checkout modal. In debug the USD was always $0 but it looked like that is likely due to the cache holding no token values, hoping this will be accurate against production, used the units service "getUsd" function for this.
• Cart NFT rows that only allow a qty of 1 have the quantity input disabled.
• Navigating to Collection or NFT from cart or cart checkout should close cart and cart checkout modals.
• In cases where the "Network" used to display "Unknown" it now defaults to DEFAULT_NETWORK.
• It should appropriately block and warn with notification any time an NFT is attempted to be added that already exists in the cart.
• I reworked the "isNftAvailableForSale" check to include checking if user is part of the space, a guardian of the space or has the required badge(s) and now the check will return a boolean indicating if the NFT is available for sale as well a text message listing all the conditions it failed in cases where it is not available for sale.
• NFT card shopping cart icon, "Add to Cart" button on NFT page and Available/Not Available label in cart modal becomes disabled when NFT is not available for sale with the disabled element showing a tooltip with description of which conditions were not met for the NFT to be available for sale.
• In steps after CONFIRM only the group of NFTs on network the pending transaction is on should be visible in the cart checkout with a button to toggle visibility of the items.
• Cart checkout modal is blocked from opening while there is an NFT purchase transaction pending that did not originate from the cart checkout and show notification to finish sale or let expire before performing cart checkout actions.
• When cart checkout is opened on CONFIRM step and there is only NFTs from one network the cart checkout items are toggled to be visible and the network selected for purchase is automatically selected for the network so user only has to agree to terms and conditions and press the "Confirm and Lock" button to generate purchase transaction.
• When cart checkout is opened on CONFIRM step and there are NFTs across multiple networks, NFTs rows for each group are hidden. Notice is displayed instructing user to choose the network they would like to purchase. Hovering on each network group highlights with border and clicking on each will set the network for the purchase, highlight the group with the border and toggle the NFT rows for the group to display.
• Royalties added to cart checkout modal.
• When there is a cart checkout transaction pending, the items in the cart modal cannot be removed.
• In cart checkout each network group header indicates how many NFTs are in the group.

There is likely more that we can do to refine and tweak but this should get us much closer to where we need it.

Let me know what you guys think. Thanks!

[emmap3-do]

Great update!
I have tested this new version, and here is a new report:

• In the Cart modal popup, I'd suggest to move the Clear Cart button to the bottom alongside the other buttons. Having it in the upper right corner may have users click it by mistake when they try to click the X button to close the popup. Specially on mobile devices.

• On mobile, Cart details doesn;t look good. Maybe rearrange elements, eg: make the nft image a lot bigger, with the trash can button on its right, and move the description text below the picture.

• USD values look wrong. I have one NFT with a price of 1 Miota added and it shows a USD value of $247,750.00 USD. It looks like there is a formatting issue with the decimal places. Same thing happens to USD value calculated from SMR.

• The trash can button in the cart details popup works fine if you have a quantity of 1 NFT on an item line. But if you increase the Qty to a value greater than 1 then you cannot remove the line item from your cart anymore. You click the trash can button, the element gets removed initially and you see the information message, but a few seconds later the removed line item pops up again by itself within the cart details.
  Note: I was able to perform this test because I had a filled cart from the previous deployment with a line item with qty=3. But if you want to reproduce it, you'll need to first fix the bug from the item below.

• I can no longer increase the qty of SFT NFT per line item within the cart details popup. Take this collection for example: https://amenconi-shopping-cart.app-cqo.pages.dev/nft/0xaf4d7cee058c23314509806436c94c3da2026196
  I added 1 of those NFT to the cart, and I cannot increase its quantity. In previous deployment this was working fine.

• All ' Add to cart' buttons within each NFT card of the same collection get disabled after you add one NFT to your cart.
  To reproduce:
  a) Go to a collection page, eg: https://amenconi-shopping-cart.app-cqo.pages.dev/collection/0xc52dea85d86306a88b33720400791d236763d49a
  b) Add one NFT to your cart
  c) Refresh the page or simply navigate to another page and navigate to the collection page again
  d) All cart buttons are disabled and hovering over it says "Member does not have access to this space."
  Then I also noticed that
  e) After several tests of this I noticed that it does not reproduce all the time but randomly, maybe there is some sort of racing condition somewhere that produces this issue. It is also reflected in the 'Sweep to cart' functionality, which gets disabled. See image attached:

• Clear cart button sometimes work, sometimes items appear back and you need to click it twice. See gif: https://gifyu.com/image/SC8ii

• I still see the issue with multiple tabs opened and the cart not being updated throughout them all, as this could have the user checkout a cart that is not the more recent one.

[adamunchained]

@amenconi - FYI I've approved the current code but I'll review any further changes based on above feedback. Great progress!

[amenconi]

Thanks Alec, regarding the USD value to add, I meant here (see image below). Although adding it to group header for each network sounds good too.

Ah gotcha, I've added that and also included total price with USD conversion in the network group header.

This latest commit implements everything in last message:

• "Confirm and Lock" button is replaced with "Connect Wallet" button if user is not logged in.
• Sweep to cart should now only display one notification.
• Single cart NFT removals no longer generate a notification.
• NFT card component now subscribes to cart changes and refreshes UI reactively.
• Shopping cart icon badge now reflects number of NFTs to include unique NFTs with a quantity of more than 1.
• Add to cart function will now be disabled while there is a pending transaction generated from cart checkout.

I've also included the following:

• NFT quantities should now not allow fractions.
• When checking if NFT is available for sale, the space, space guardian, badge/award and NFT ownership for accessCollections checks will only be performed if the NFT is now currently owned (not on secondary market for sale).
• Cart service now pulls owned NFTs by member so it can perform check to see if requisite NFTs are owned to satisfy accessCollections requirements for NFTs for sale not on secondary market.

Unfortunately it looks like the test link for Cloudflare Pages was not successful but once that can be fixed please test and let me know if any further issues are found.

Thank you!

[emmap3-do]

Awesome Alec, thank you for this update!

@adamunchained can you please take a look at the cloudflare build failure? Thanks!

[emmap3-do]

@amenconi, I made new tests and so far so good. Only one minor thing that can be improved (see image attached)

For the first item, I put the value "123" but only "12" is read.
For the second item, there is just the default "1" but it doesn't read because the available items value takes 4 characters long.

Maybe enlarge the field a bit so that more characters can fit in.

[amenconi]

@amenconi, I made new tests and so far so good. Only one minor thing that can be improved (see image attached)

For the first item, I put the value "123" but only "12" is read.

For the second item, there is just the default "1" but it doesn't read because the available items value takes 4 characters long.

Maybe enlarge the field a bit so that more characters can fit in.

Excellent, glad this latest version seems to be working well. Nice catch for collections with large available amounts, will make sure it's large enough for at least 5 figures.

Also as a continuation of PR 127 discussion, it's odd it's not rounding down, it seemed to round up and down without issue in debug but will take another look and try to make sure valid figures are displayed at all times. Also will make sure NFT image doesn't change shape as your picture showed and will add the USD value for single and multi NFT buy previews.

@adamunchained thank you for merging 127 and 128!

I'll get the merge conflicts solved, finish the above items and add in the ability on NFT page when choosing quantities of more than 1 to also be added to cart as well as checking out directly.

[amenconi]

I believe PR 127 should now be merged with 128.

I've also made the following modifications:

• Extended the cart modal qty input to take full width of it's column. This should allow large qty and allowed qty figures for collections that will allow it.
• Rounding fractions on quantity inputs for cart modal and NFT page bulk buy should round up and down and always to a valid integer within the valid range.
• I've added USD conversions on the NFT price on the NFT page and on the NFT checkout page for single and bulk buy checkouts.
• NFT page bulk buy checkouts should have styling that keeps the content thin enough vertically so that the NFT image can fit horizontally and not expand so that much of the image is hidden. I've also changed it up so that large quantities, prices and USD conversions can hopefully fit in each column as I realize the previous styling was based on tests where the quantity and prices were very low (1 IOTA each with single digit quantities).
• Choosing a quantity on the NFT page allows you to bulk buy that amount directly or add that quantity of the NFT to your cart.

I'll look into the Bloom payment icon/link more but I believe that was likely added to a branch that wasn't merged with this one yet. If needed though I will add it.

Thank you!

[emmap3-do]

Hi @amenconi , I found a visual bug in the cart checkout process, here is how to reproduce it:

• I added items to the cart, went to the Checkout step and confirmed it: as expected it showed up the address where to send the payment to, the 4 minutes countdown and the 3 buttons below it (Bloom, Firefly, Tanglepay).
  At this point, I switched to another browser tab that I had opened previously. On this tab I got the bubble message saying "Purchase has not been completed" with a blue button saying "Open checkout" (so far so good).
  So, I clicked the "open checkout" button and it opened up the cart checkout popup showing the information text at the top plus the 2 networks boxes, but the 2 boxes with network items immediately disappear and popup displayed as follows:

Then, I switched tabs again and went back to the first tab (where I had confirmed the checkout process from initially) and suddenly the Bloom button disappeared there:

[amenconi]

Hi @emmap3-do,

So if I understand correctly this appears to be 2 issues:

1. Current checkout state during the WAIT/TRANSACTION steps don't seem to be shared across browser tabs as evidenced by your top image (content on second browser tab) asking for purchase network to be selected.

This is likely due to cart changes and state being stored and shared between tabs via local storage, but checkout meta data (selected network for purchase in this case) only being stored in local memory. I should be able to solve this by setting and retrieving this data from local storage as well. To keep things clean I'll see if I can extend cart local storage to include this type of meta data as well so we aren't using a ton of separate local storage items to keep track of.

2. Inconsistent display of the Bloom deeplink:

Unclear to me if these items are related or not but will review all code part of this PR and verify the bloom link is present everywhere you'd expect it to be.

Will update once fixed, thank you!

[emmap3-do]

Exactly, thanks Alec!

[amenconi]

With this latest push I actually went the opposite direction than I thought and created local storage items for "selected network" and "current step" as I realized we should change and track these separately to cart changes. Persisting states for these in local storage is necessary for real time updates across browser tabs.

I've also reverted intentional behavior with the cart checkout modal. Originally if you opened the checkout modal and made a network selection but didn't lock in the transaction, then closed the modal and re-opened it, it would wipe out the network selection and start the selection process over. I had to ditch this as it caused issues with multiple browser tabs open, since if both had the cart checkout modal open and one was closed it would wipe out the selected network on the second open tab. So now it will remember the network selection until the transaction is finished or expired.

Also looked at the Bloom deep link. My code calls "wen-wallet-deeplink" component which has logic that generates a link for Firefly and TanglePay as long as there is an input of valid target address and target amount, however the logic to generate a Bloom link requires an input of valid network. Since the second tab wasn't getting real-time updates on selected network, this input was blank and so was only generating the other 2 deeplinks. Persisting selected network with local storage (and as an observable) should solve this.

Thank you!

[emmap3-do]

Found another bug. I added SMR and IOTA networks NFTs to my cart. Then I started the checkout process for IOTA network and waited for it to timeout. After that, the IOTA item got stuck as shown below, instead of being enabled for removal from cart:

Other than that, very small couple of things:

• Add a margin to the bottom of the modal popup, as for some cases content is touching the bottom edge of the window:
  

• Font size looks very small in this case:
  

[amenconi]

Newest commit changes:

• Text size for NFT checkout price/qty data increased (was trying to keep it small for cases where NFTs may have high prices and quantities but should be ok to move from xxs to xs font size).
• Cart checkout modal was given some bottom padding so buttons have a bit of spacing.
• Previously the logic to dictate disabling of remove button involved checking current step and network selected for purchase. I've added a check for the pending transaction so that once the transaction is expired the disable logic should fail and remove icon should be selectable.

Thanks!

[emmap3-do]

Sweep to Cart - I'm not sure how the next scenario is expected to work, neither if this needs to be addressed now or can wait for a future release.

If you go to a collection that has not mint out, eg:
https://amenconi-shopping-cart.app-cqo.pages.dev/collection/0x4cb60c66748cc145c4da7382bd5a28a26f7f3d8c
and eg. sweep 3 from floor, it adds 1 new mint + 2 from floor (those from floor happen to have the same price as new to be minted ones)

Cart then looks like this:

For such cases, I'm not sure if it would make more sense to just mint 3 new NFTs, or to skip new mints and sweep 3 from floor minted and put on sale by someone else...

Cart checkout - The total count of items in the summarized title is not accurate when you have several NFTs to be minted added to cart, as shown below:

A third thing to check is: add NFTs to cart, open cart details popup and leave it open. Open up a new browser tab and in there, open up the cart details popup too. On this 2nd tab, click 'Checkout' button, then 'Confirm and lock'. Now go to the 1st tab and you will be able to make edits to the cart items (eg you can increase/decrease qty, or you can remove items from cart. You can make these edits and then if you swap again to the other tab, it is reflected in the title summary too (NFTs total qty and price are updated). This could be missleading for the user.

[amenconi]

Good question on the sweep to cart, we can definitely change the logic to handle either scenario (multiple quantity of mint NFT or ignore minting NFTs altogether). I'll pose the question on Discord and see if we can get others to weigh in on which direction is preferable.

I'll change the cart checkout title to have the full count of NFTs rather then the "unique" count being checked out.

For the third issue, sounds like the broadcast of changes to current step, pending checkout transaction and other observables involved in locking down cart items that are part of a checkout process are either not going out as expected or not being read reactively in some cases. Will experiment a bit and make sure the qty changes, item removals and cart clearing is updating based on checkout processes happening on another tab in real-time.

Thank you!

[amenconi]

Changes in latest push:

• Cart checkout titles show total number of NFTs including multiple quantities of a placeholder NFT and removed "unique" from the wording.
• Refactored checkout meta state management. Current step and selected network should now have more robust communication to ensure all tabs have real-time synced states. Added cart checkout pending transaction to this so each tab receives reactive pending transaction state. Decoupled logic to disable clear cart and remove cart item buttons from current step so now the cart items for the network of the pending transaction is disabled when there is a pending transaction and that transaction is not expired. This was necessary so that one tab can show the expired transaction screen and other tabs can still detect when the transaction expires or is completed and re-enable the clear cart and remove item buttons in real-time.

The cross tab state management refactor was more involved than I originally thought it would be. I did some general testing and it appears to work and I don't think it broke any other pieces but please let me know how it works for you now.

Thank you.

[adamunchained]

Great effort @emmap3-do / @amenconi !!

I've presented your feature to SOON Committee (request https://github.com/soonaverse/foundation/issues/83) and it has just been approved by a majority.

It has been agreed to give away following allocation:

• @amenconi - reward 76'000 SOON
• @emmap3-do - reward 15'200 SOON

Please provide your SMR address so I can update CONTRIBUTORS.md in this pull request and merge into master.

We can then release this feature into the production. I'm sure community will be excited to use it.

Great effort team and thank you for your amazing work! It's very much appreciated.

Looking forward to see more work from you!

[amenconi]

Thank you @adamunchained and SOON committee!

Additionally can't stress enough the huge appreciation to emmap3 for their assistance throughout this development.

Very much looking forward to supercharging our efforts to bring more improvements as fast as we can, especially now, as we become more familiar with the code base.

SMR address: smr1qrncyy5lcfpr4hta0hg7qp2cmw6ssm0ycllx5nnz5pwcup8rxs0zzp2jp64

[emmap3-do]

Thank you Adam and SOON Commitee, and Thank you Alec for bringing new features into the platform!
It's been exciting to be a part of this process. I'm sure community will be happy with the results!

My SMR address remains the same:
smr1qzt5qs6m6s2us8ll0hdfefzpr43cdz2xmjzywmrkz0sc2uyegvzjwazr6f8

[TangleAccountant]

Alec reward sent: https://explorer.shimmer.network/shimmer/transaction/0x21f57a8e050028e40802ee741ad4c7f3bf694fb79f08457cc2999ae79efaca2a

emmap3 reward sent: https://explorer.shimmer.network/shimmer/transaction/0x45f9ba1d0e9a90e4d3d476ec018a2314764fe0506bf74e1e0cd9bcbd0af9ace8