fix: Multiple off chain issues (#2344)

* fix: Cancel sell page not disabling the cancel button when cancelling the order * fix: Confirm input value modal not disabling the close or cancel buttons * fix: Sell modal not preventing users from closing the modal when cancelling * fix: Cancel page not disabling the cancel button when cancelling order * fix: Force the request of a single NFT to not be cached * fix: Close all modals when cancelling an order successfully * fix: Owner being shown in the item detail page when the item is L1
decentraland · Jan 2, 2025 · 86b4643 · 86b4643
1 parent 38be515
commit 86b4643
Show file tree

Hide file tree

Showing 9 changed files with 23 additions and 11 deletions.
diff --git a/webapp/src/components/AssetPage/ItemDetail/ItemDetail.tsx b/webapp/src/components/AssetPage/ItemDetail/ItemDetail.tsx
@@ -151,7 +151,11 @@ const ItemDetail = ({ item }: Props) => {
             ) : null}
           </div>
           <div className={styles.attributesRow}>
-            <div className={styles.attributesColumn}>{item.network === Network.MATIC ? <Owner asset={item} /> : null}</div>
+            {item.network === Network.MATIC ? (
+              <div className={styles.attributesColumn}>
+                <Owner asset={item} />
+              </div>
+            ) : null}
             <div className={styles.attributesColumn}>
               <Collection asset={item} />
             </div>

diff --git a/webapp/src/components/CancelSalePage/CancelSalePage.tsx b/webapp/src/components/CancelSalePage/CancelSalePage.tsx
@@ -55,7 +55,9 @@ const CancelSalePage = (props: Props) => {
                     <Header size="large">{t('cancel_sale_page.title')}</Header>
                     <div className="subtitle">{subtitle}</div>
                     <div className="buttons">
-                      <Button onClick={() => history.push(locations.nft(nft.contractAddress, nft.tokenId))}>{t('global.cancel')}</Button>
+                      <Button disabled={isLoading} onClick={() => history.push(locations.nft(nft.contractAddress, nft.tokenId))}>
+                        {t('global.cancel')}
+                      </Button>
                       <ChainButton
                         primary
                         loading={isLoading}

diff --git a/webapp/src/components/ConfirmInputValueModal/ConfirmInputValueModal.tsx b/webapp/src/components/ConfirmInputValueModal/ConfirmInputValueModal.tsx
@@ -23,13 +23,14 @@ const ConfirmInputValueModal = ({
   const isDisabled = disabled || parsedValueToConfirm !== confirmedInput
 
   return (
-    <Modal size="small" open={open} className="ConfirmInputValueModal">
-      <ModalNavigation title={headerTitle} onClose={onCancel}></ModalNavigation>
+    <Modal size="small" open={open} onClose={!loading ? onCancel : undefined} className="ConfirmInputValueModal">
+      <ModalNavigation title={headerTitle} onClose={!loading ? onCancel : undefined}></ModalNavigation>
       <Modal.Content>
         {content}
         <ManaField
           label={t('global.price')}
           network={network}
+          disabled={loading}
           placeholder={parsedValueToConfirm}
           value={confirmedInput}
           onChange={(_event, props) => {
@@ -40,14 +41,15 @@ const ConfirmInputValueModal = ({
       <Modal.Actions>
         <Button
           type="button"
+          disabled={loading}
           onClick={() => {
             setConfirmedInput('')
             onCancel()
           }}
         >
           {t('global.cancel')}
         </Button>
-        <Button type="submit" primary disabled={isDisabled} loading={loading} onClick={onConfirm}>
+        <Button type="submit" primary disabled={isDisabled || loading} loading={loading} onClick={onConfirm}>
           {t('global.proceed')}
         </Button>
       </Modal.Actions>

diff --git a/webapp/src/components/Modals/SellModal/SellModal.container.ts b/webapp/src/components/Modals/SellModal/SellModal.container.ts
@@ -27,7 +27,7 @@ const mapState = (state: RootState): MapStateProps => {
     authorizations: getAuthorizations(state),
     isCreatingOrder: isLoadingType(getLoadingOrders(state), CREATE_ORDER_REQUEST),
     isAuthorizing: isLoadingType(getLoading(state), GRANT_TOKEN_REQUEST) || isLoadingType(getLoading(state), REVOKE_TOKEN_REQUEST),
-    isCancelling: isLoadingType(getLoading(state), CANCEL_ORDER_REQUEST),
+    isCancelling: isLoadingType(getLoadingOrders(state), CANCEL_ORDER_REQUEST),
     isOffchainPublicNFTOrdersEnabled: getIsOffchainPublicNFTOrdersEnabled(state)
   }
 }

diff --git a/webapp/src/components/Modals/SellModal/SellModal.tsx b/webapp/src/components/Modals/SellModal/SellModal.tsx
@@ -322,7 +322,7 @@ const SellModal = ({
       navigation: (
         <ModalNavigation
           title={t('sell_page.confirm.title')}
-          onClose={onClose}
+          onClose={isCancelling ? undefined : onClose}
           onBack={isCancelling || shouldRemoveOffchainListing ? undefined : () => setStep(StepperValues.SELL_MODAL)}
         />
       ),

diff --git a/webapp/src/components/SellPage/SellModal/SellModal.tsx b/webapp/src/components/SellPage/SellModal/SellModal.tsx
@@ -151,7 +151,7 @@ const SellModal = (props: Props) => {
       {shouldRemoveListing ? (
         <div className="cancel-order">
           <ErrorBanner info={t('sell_page.cancel_order_warning')} />
-          <Button primary onClick={handleCancelTrade} loading={isLoadingCancelOrder}>
+          <Button primary onClick={handleCancelTrade} disabled={isLoadingCancelOrder} loading={isLoadingCancelOrder}>
             {t('sell_page.cancel_order')}
           </Button>
         </div>
@@ -189,7 +189,7 @@ const SellModal = (props: Props) => {
               />
             </div>
             <div className="buttons">
-              <Button as="div" onClick={onGoBack}>
+              <Button as="div" disabled={isLoading} onClick={onGoBack}>
                 {t('global.cancel')}
               </Button>
               <ChainButton type="submit" primary disabled={isDisabled || isLoading} loading={isLoading} chainId={nft.chainId}>

diff --git a/webapp/src/modules/modal/sagas.spec.ts b/webapp/src/modules/modal/sagas.spec.ts
@@ -12,6 +12,7 @@ import {
   UPDATE_LIST_SUCCESS
 } from '../favorites/actions'
 import { NFT } from '../nft/types'
+import { CANCEL_ORDER_SUCCESS } from '../order/actions'
 import {
   claimAssetSuccess,
   upsertRentalSuccess,
@@ -31,6 +32,7 @@ describe.each([
   DELETE_LIST_FAILURE,
   BULK_PICK_SUCCESS,
   BULK_PICK_FAILURE,
+  CANCEL_ORDER_SUCCESS,
   UPDATE_LIST_SUCCESS
 ])('when handling the success action of the %s action', actionType => {
   it('should put the action to close all modals', () => {

diff --git a/webapp/src/modules/modal/sagas.ts b/webapp/src/modules/modal/sagas.ts
@@ -9,6 +9,7 @@ import {
   DELETE_LIST_SUCCESS,
   UPDATE_LIST_SUCCESS
 } from '../favorites/actions'
+import { CANCEL_ORDER_SUCCESS } from '../order/actions'
 import {
   CLAIM_ASSET_SUCCESS,
   UPSERT_RENTAL_SUCCESS,
@@ -27,7 +28,8 @@ export function* modalSaga() {
       DELETE_LIST_FAILURE,
       BULK_PICK_SUCCESS,
       BULK_PICK_FAILURE,
-      UPDATE_LIST_SUCCESS
+      UPDATE_LIST_SUCCESS,
+      CANCEL_ORDER_SUCCESS
     ],
     handleCloseAllModals
   )

diff --git a/webapp/src/modules/vendor/decentraland/nft/authApi.ts b/webapp/src/modules/vendor/decentraland/nft/authApi.ts
@@ -44,7 +44,7 @@ export class NFTAuthAPI extends BaseClient {
             : null
       )
     }
-    const response: NFTResponse = await this.fetch(`/v1/nfts?${queryParams.toString()}`)
+    const response: NFTResponse = await this.fetch(`/v1/nfts?${queryParams.toString()}`, { cache: 'reload' })
 
     if (response.data.length === 0) {
       throw new Error('Not found')