fix(wallet): handle cancelled offer state

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) => {
@@ -71,7 +73,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';
   }
@@ -194,17 +196,15 @@ const OfferWithoutContext = ({
     </div>
   );
 
+  const isOfferCompleted =
+    status === 'accept' ||
+    status === 'decline' ||
+    status === 'complete' ||
+    status === 'rejected' ||
+    status === 'cancel';
+
   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

@@ -291,6 +291,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', () => {