feat: added toast message when error in excecute order with metamtask (…

…decentraland#1430)

* feat: added toast message when error in excecute order with metamtask

* feat: added test

* fix: comment

webapp/src/modules/toast/sagas.spec.ts

@@ -1,11 +1,11 @@
-import { RentalListing } from '@dcl/schemas'
+import { Order, RentalListing } from '@dcl/schemas'
 import { showToast } from 'decentraland-dapps/dist/modules/toast/actions'
 import { getState } from 'decentraland-dapps/dist/modules/toast/selectors'
 import { expectSaga } from 'redux-saga-test-plan'
 import { select } from 'redux-saga/effects'
 import { buyItemWithCardFailure } from '../item/actions'
 import { NFT } from '../nft/types'
-import { executeOrderWithCardFailure } from '../order/actions'
+import { executeOrderFailure, executeOrderWithCardFailure } from '../order/actions'
 import {
   claimAssetSuccess,
   removeRentalSuccess,
@@ -15,6 +15,7 @@ import { UpsertRentalOptType } from '../rental/types'
 import { updateStoreSuccess } from '../store/actions'
 import { getEmptyStore } from '../store/utils'
 import {
+  getExcecuteOrderFailureToast,
   getBuyNFTWithCardErrorToast,
   getLandClaimedBackSuccessToast,
   getListingRemoveSuccessToast,
@@ -111,3 +112,21 @@ describe('when handling the failure of a buy NFTs with card', () => {
       .silentRun()
   })
 })
+
+
+describe('when handling the failure of excecute order ', () => {
+  const error = 'anError'
+  const order =  {
+    contractAddress: 'aContractAddress',
+    tokenId: 'aTokenId',
+    price: '100000000000'
+  } as Order;
+
+  it('should show a toast signaling the failure ', () => {
+    return expectSaga(toastSaga)
+      .provide([[select(getState), []]])
+      .put(showToast(getExcecuteOrderFailureToast(), 'bottom center'))
+      .dispatch(executeOrderFailure(order, nft, error))
+      .silentRun()
+  })
+})

webapp/src/modules/toast/sagas.ts

@@ -9,9 +9,10 @@ import {
   UPSERT_RENTAL_SUCCESS
 } from '../rental/actions'
 import { BUY_ITEM_WITH_CARD_FAILURE } from '../item/actions'
-import { EXECUTE_ORDER_WITH_CARD_FAILURE } from '../order/actions'
+import { EXECUTE_ORDER_WITH_CARD_FAILURE, EXECUTE_ORDER_FAILURE } from '../order/actions'
 import {
   getBuyNFTWithCardErrorToast,
+  getExcecuteOrderFailureToast,
   getLandClaimedBackSuccessToast,
   getListingRemoveSuccessToast,
   getStoreUpdateSuccessToast,
@@ -33,6 +34,7 @@ function* successToastSagas() {
   yield takeEvery(UPSERT_RENTAL_SUCCESS, handleUpsertRentalSuccess)
   yield takeEvery(BUY_ITEM_WITH_CARD_FAILURE, handleBuyNFTWithCardFailure)
   yield takeEvery(EXECUTE_ORDER_WITH_CARD_FAILURE, handleBuyNFTWithCardFailure)
+  yield takeEvery(EXECUTE_ORDER_FAILURE ,handleExcecuteOrderFailure)
 }
 
 function* handleStoreUpdateSuccess() {
@@ -61,3 +63,7 @@ function* handleUpsertRentalSuccess(action: UpsertRentalSuccessAction) {
 function* handleBuyNFTWithCardFailure() {
   yield put(showToast(getBuyNFTWithCardErrorToast(), 'bottom center'))
 }
+
+function* handleExcecuteOrderFailure() {
+  yield put(showToast(getExcecuteOrderFailureToast(), 'bottom center'))
+}

webapp/src/modules/toast/toasts.tsx

@@ -78,3 +78,14 @@ export function getBuyNFTWithCardErrorToast(): Omit<Toast, 'id'> {
     icon: <Icon name="exclamation circle" />
   }
 }
+
+export function getExcecuteOrderFailureToast(): Omit<Toast, 'id'> {
+  return {
+    type: ToastType.ERROR,
+    title: t('toast.meta_transaction_failure.title'),
+    body: (
+        <p>{t('toast.meta_transaction_failure.body')}</p>
+    ),
+    icon: <Icon name="exclamation circle" />
+  }
+}