fix(wallet): handle cancelled offer state (#4292)

* fix(wallet): handle cancelled offer state

* chore(wallet): simplify conditional

packages/wallet/ui/src/components/Offer.jsx

@@ -20,6 +20,7 @@ const statusText = {
   complete: 'Accepted',
   pending: 'Pending',
   proposed: 'Proposed',
+  cancel: 'Cancelled',
 };
 
 const statusColors = {
@@ -29,6 +30,7 @@ const statusColors = {
   pending: 'warning',
   proposed: 'default',
   complete: 'success',
+  cancel: 'default',
 };
 
 const cmp = (a, b) => {
@@ -69,7 +71,7 @@ const OfferWithoutContext = ({
     setPendingOffers({ offerId: id, isPending: true });
   }
 
-  // Eagerly show pending and declined offers states.
+  // Eagerly show pending and declined offers' states.
   if (status === 'proposed' && pendingOffers.has(id)) {
     status = 'pending';
   }
@@ -192,17 +194,16 @@ const OfferWithoutContext = ({
     </div>
   );
 
+  const isOfferCompleted = [
+    'accept',
+    'decline',
+    'complete',
+    'rejected',
+    'cancel',
+  ].includes(status);
+
   return (
-    <Request
-      header="Offer"
-      completed={
-        status === 'accept' ||
-        status === 'decline' ||
-        status === 'complete' ||
-        status === 'rejected'
-      }
-      close={close}
-    >
+    <Request header="Offer" completed={isOfferCompleted} close={close}>
       <Chip
         variant="outlined"
         color={statusColors[status]}

packages/wallet/ui/src/components/tests/Offer.test.jsx

@@ -290,6 +290,11 @@ test('renders the request as completed when appropriate', () => {
   rejectedOffer.status = 'rejected';
   component = mount(<Offer offer={rejectedOffer} />);
   expect(component.find(Request).props().completed).toEqual(true);
+
+  const cancelledOffer = { ...offer };
+  cancelledOffer.status = 'cancel';
+  component = mount(<Offer offer={cancelledOffer} />);
+  expect(component.find(Request).props().completed).toEqual(true);
 });
 
 test('closes the offer', () => {