@bosonprotocol/react-kit 0.37.0-alpha.0 → 0.37.0-alpha.2

package/dist/esm/components/widgets/roblox/components/RobloxExchangesGrid.d.ts

@@ -3,16 +3,16 @@ import React from "react";
 import { BosonRobloxExchange, GetExchangesResponse } from "@bosonprotocol/roblox-sdk";
 import { FetchNextPageOptions, InfiniteData, InfiniteQueryObserverResult, QueryObserverResult, RefetchOptions, RefetchQueryFilters } from "react-query";
 export type RobloxExchangesGridProps = {
-    isLoading: boolean;
     numProducts?: number;
     itemsPerRow: GridContainerProps["itemsPerRow"];
     raiseDisputeForExchangeUrl: string;
     handleRequestShipment: (robloxExchange: BosonRobloxExchange) => void;
     handleCancellation: (robloxExchange: BosonRobloxExchange) => void;
+    handleOnCardClick: (robloxExchange: BosonRobloxExchange) => void;
     exchanges: BosonRobloxExchange[] | undefined;
     fetchNextPage: (options?: FetchNextPageOptions) => Promise<InfiniteQueryObserverResult<GetExchangesResponse, unknown>>;
     refetch: <TPageData>(options?: (RefetchOptions & RefetchQueryFilters<TPageData>) | undefined) => Promise<QueryObserverResult<InfiniteData<GetExchangesResponse>, unknown>>;
     hasNextPage: boolean | undefined;
 };
-export declare const RobloxExchangesGrid: ({ isLoading, numProducts, itemsPerRow, raiseDisputeForExchangeUrl, exchanges, handleRequestShipment, handleCancellation, fetchNextPage, refetch, hasNextPage }: RobloxExchangesGridProps) => React.JSX.Element;
+export declare const RobloxExchangesGrid: ({ numProducts, itemsPerRow, raiseDisputeForExchangeUrl, exchanges, handleRequestShipment, handleOnCardClick, handleCancellation, fetchNextPage, refetch, hasNextPage }: RobloxExchangesGridProps) => React.JSX.Element;
 //# sourceMappingURL=RobloxExchangesGrid.d.ts.map

package/dist/esm/components/widgets/roblox/components/RobloxExchangesGrid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RobloxExchangesGrid.d.ts","sourceRoot":"","sources":["../../../../../../src/components/widgets/roblox/components/RobloxExchangesGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAI9E,OAAO,KAAgC,MAAM,OAAO,CAAC;AAarD,OAAO,EACL,mBAAmB,EACnB,oBAAoB,EACrB,MAAM,2BAA2B,CAAC;AAInC,OAAO,EACL,oBAAoB,EACpB,YAAY,EACZ,2BAA2B,EAC3B,mBAAmB,EACnB,cAAc,EACd,mBAAmB,EACpB,MAAM,aAAa,CAAC;AAwBrB,MAAM,MAAM,wBAAwB,GAAG;IACrC,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,kBAAkB,CAAC,aAAa,CAAC,CAAC;IAC/C,0BAA0B,EAAE,MAAM,CAAC;IACnC,qBAAqB,EAAE,CAAC,cAAc,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACrE,kBAAkB,EAAE,CAAC,cAAc,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAClE,SAAS,EAAE,mBAAmB,EAAE,GAAG,SAAS,CAAC;IAC7C,aAAa,EAAE,CACb,OAAO,CAAC,EAAE,oBAAoB,KAC3B,OAAO,CAAC,2BAA2B,CAAC,oBAAoB,EAAE,OAAO,CAAC,CAAC,CAAC;IACzE,OAAO,EAAE,CAAC,SAAS,EACjB,OAAO,CAAC,EAAE,CAAC,cAAc,GAAG,mBAAmB,CAAC,SAAS,CAAC,CAAC,GAAG,SAAS,KACpE,OAAO,CACV,mBAAmB,CAAC,YAAY,CAAC,oBAAoB,CAAC,EAAE,OAAO,CAAC,CACjE,CAAC;IACF,WAAW,EAAE,OAAO,GAAG,SAAS,CAAC;CAClC,CAAC;AAEF,eAAO,MAAM,mBAAmB,mKAW7B,wBAAwB,sBA+J1B,CAAC"}
+{"version":3,"file":"RobloxExchangesGrid.d.ts","sourceRoot":"","sources":["../../../../../../src/components/widgets/roblox/components/RobloxExchangesGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAI9E,OAAO,KAAgC,MAAM,OAAO,CAAC;AAarD,OAAO,EACL,mBAAmB,EACnB,oBAAoB,EACrB,MAAM,2BAA2B,CAAC;AAInC,OAAO,EACL,oBAAoB,EACpB,YAAY,EACZ,2BAA2B,EAC3B,mBAAmB,EACnB,cAAc,EACd,mBAAmB,EACpB,MAAM,aAAa,CAAC;AAwBrB,MAAM,MAAM,wBAAwB,GAAG;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,kBAAkB,CAAC,aAAa,CAAC,CAAC;IAC/C,0BAA0B,EAAE,MAAM,CAAC;IACnC,qBAAqB,EAAE,CAAC,cAAc,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACrE,kBAAkB,EAAE,CAAC,cAAc,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAClE,iBAAiB,EAAE,CAAC,cAAc,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACjE,SAAS,EAAE,mBAAmB,EAAE,GAAG,SAAS,CAAC;IAC7C,aAAa,EAAE,CACb,OAAO,CAAC,EAAE,oBAAoB,KAC3B,OAAO,CAAC,2BAA2B,CAAC,oBAAoB,EAAE,OAAO,CAAC,CAAC,CAAC;IACzE,OAAO,EAAE,CAAC,SAAS,EACjB,OAAO,CAAC,EAAE,CAAC,cAAc,GAAG,mBAAmB,CAAC,SAAS,CAAC,CAAC,GAAG,SAAS,KACpE,OAAO,CACV,mBAAmB,CAAC,YAAY,CAAC,oBAAoB,CAAC,EAAE,OAAO,CAAC,CACjE,CAAC;IACF,WAAW,EAAE,OAAO,GAAG,SAAS,CAAC;CAClC,CAAC;AAEF,eAAO,MAAM,mBAAmB,2KAW7B,wBAAwB,sBA0J1B,CAAC"}

package/dist/esm/components/widgets/roblox/components/RobloxExchangesGrid.js

@@ -37,7 +37,7 @@ const TransparentSkeletonProductCard = styled(ProductCardSkeleton) `
   height: 100%;
 `;
 const gap = "2rem";
-export const RobloxExchangesGrid = ({ isLoading, numProducts, itemsPerRow, raiseDisputeForExchangeUrl, exchanges, handleRequestShipment, handleCancellation, fetchNextPage, refetch, hasNextPage }) => {
+export const RobloxExchangesGrid = ({ numProducts, itemsPerRow, raiseDisputeForExchangeUrl, exchanges, handleRequestShipment, handleOnCardClick, handleCancellation, fetchNextPage, refetch, hasNextPage }) => {
     const { address } = useAccount();
     const { ipfsImageGateway } = useIpfsContext();
     const [isNextLoading, setNextLoading] = useState(false);
@@ -88,11 +88,8 @@ export const RobloxExchangesGrid = ({ isLoading, numProducts, itemsPerRow, raise
                                 handleRequestShipment(robloxExchange);
                             },
                             type: "button"
-                        }, cancelButtonConfig: {
-                            onClick: () => {
-                                handleCancellation(robloxExchange);
-                            },
-                            type: "button"
+                        }, onCardClick: () => {
+                            handleOnCardClick(robloxExchange);
                         }, disputeButtonConfig: {
                             onClick: () => {
                                 const raiseDisputeForExchangeUrlWithId = raiseDisputeForExchangeUrl?.replace("{id}", exchangeId || "");

package/dist/esm/components/widgets/roblox/components/RobloxExchangesGrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"RobloxExchangesGrid.js","sourceRoot":"","sources":["../../../../../../src/components/widgets/roblox/components/RobloxExchangesGrid.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"RobloxExchangesGrid.js","sourceRoot":"","sources":["../../../../../../src/components/widgets/roblox/components/RobloxExchangesGrid.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bosonprotocol/react-kit",
   "description": "React toolkit with smart components and hooks for building on top of the Boson Protocol.",
-  "version": "0.37.0-alpha.0",
+  "version": "0.37.0-alpha.2",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
   "types": "./dist/cjs/index.d.ts",
@@ -205,5 +205,5 @@
   "overrides": {
     "typescript": "^5.1.6"
   },
-  "gitHead": "be71619dc1637ecf9e40630e4cba8239d9f0a6f0"
+  "gitHead": "9db355a00d406cf8c3947d181eae307244a6c296"
 }

package/src/components/exchangeCard/ExchangeCard.styles.ts

@@ -1,19 +1,14 @@
 import styled, { css } from "styled-components";
 import { colors, getCssVar } from "../../theme";
 import { ExchangeCardStatus } from "./types";
-import { ProductCardLabelWrapper } from "../productCard/ProductCard.styles";
+import {
+  CTAOnHoverContainer,
+  ProductCardTitle
+} from "../productCard/ProductCard.styles";
+import { Grid } from "../ui/Grid";
 
 const topSpace = "1rem";
 const sideSpace = "1rem";
-export const ExchangeCardLabelWrapper = styled(ProductCardLabelWrapper)`
-  top: ${topSpace};
-  left: ${sideSpace};
-`;
-export const ExchangeCreator = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-`;
 
 export const ExchangeCreatorAvatar = styled.div`
   width: 1rem;
@@ -47,17 +42,18 @@ export const ExchangeTitle = styled.div`
   word-break: break-word;
 `;
 
-export const ExchangeCardPriceWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-self: stretch;
-  max-width: 50%;
-  min-width: 44%;
+export const ExchangeCardPriceWrapper = styled(Grid)`
   span {
     padding-left: 0.5rem;
   }
 `;
 
+export const ExchangeCardTitleWrapper = styled(Grid)`
+  width: 100%;
+  box-sizing: border-box;
+  align-items: flex-start;
+`;
+
 export const ExchangeCardPrice = styled.div`
   font-size: 0.75rem;
   line-height: 150%;
@@ -68,7 +64,7 @@ export const ExchangeCardPrice = styled.div`
 
 export const ExchangeCarData = styled.div`
   display: flex;
-  flex-direction: column;
+  width: 100%;
 `;
 
 export const ExchangeCardBottom = styled.div`
@@ -103,10 +99,8 @@ export const ExchangeCardWrapper = styled.div<{
   isolation: isolate;
   width: 100%;
   min-height: 31.25rem;
-  border: 1px solid rgba(85, 96, 114, 0.15);
-  box-shadow: 0px 4.31783px 107.946px rgba(21, 30, 52, 0.1);
   cursor: pointer;
-  background: ${getCssVar("--background-accent-color")};
+  background: ${getCssVar("--background-color")};
   [data-image-wrapper] {
     position: static;
     padding-top: 0;
@@ -160,7 +154,6 @@ export const ExchangeCardTop = styled.div<{ $isNotImageLoaded: boolean }>`
 `;
 export const ExchangeButtonWrapper = styled.div`
   width: 100%;
-  border-top: 1px solid rgba(85, 96, 114, 0.15);
   align-items: center;
 `;
 
@@ -181,10 +174,24 @@ export const CommittedButtonWrapper = styled.div`
 
 export const ExchangeStatus = styled.div<{
   $status: ExchangeCardStatus;
+  $side: "left" | "right";
 }>`
   position: absolute;
   top: ${topSpace};
-  right: ${sideSpace};
+  ${({ $side }) => {
+    switch ($side) {
+      case "left": {
+        return css`
+          left: ${sideSpace};
+        `;
+      }
+      case "right": {
+        return css`
+          right: ${sideSpace};
+        `;
+      }
+    }
+  }}
   z-index: 10;
   letter-spacing: 0.5px;
   line-height: 16px;
@@ -236,3 +243,14 @@ export const ExchangeCTAWrapper = styled.div`
   transition: all 0.4s ease-out;
   max-height: 0;
 `;
+
+export const ExchangeCardTitle = styled(ProductCardTitle)`
+  width: 100%;
+  white-space: normal;
+`;
+
+export const CTAOnHoverContainerExchangeCard = styled(CTAOnHoverContainer)`
+  left: 50%;
+  transform: translate(-50%, 0);
+  margin-bottom: 1rem;
+`;

package/src/components/exchangeCard/ExchangeCard.tsx

@@ -9,28 +9,27 @@ import { IBaseImage, Image } from "../image/Image";
 import { ProductType } from "../productCard/const";
 import { IButton } from "../ui/ThemedButton";
 import {
-  CommittedBottomText,
+  CTAOnHoverContainerExchangeCard,
   CommittedButtonWrapper,
   ExchangeButtonWrapper,
   ExchangeCTAWrapper,
   ExchangeCarData,
   ExchangeCardBottom,
   ExchangeCardBottomContent,
-  ExchangeCardLabelWrapper,
-  ExchangeCardPrice,
   ExchangeCardPriceWrapper,
+  ExchangeCardTitle,
+  ExchangeCardTitleWrapper,
   ExchangeCardTop,
   ExchangeCardWrapper,
-  ExchangeCreator,
-  ExchangeCreatorAvatar,
-  ExchangeCreatorName,
   ExchangeImageWrapper,
   ExchangeStatus,
-  ExchangeTitle,
   RedeemButtonWrapper
 } from "./ExchangeCard.styles";
 import { ExchangeCardStatus } from "./types";
 import { subgraph } from "@bosonprotocol/core-sdk";
+
+import { Grid } from "../ui/Grid";
+import { PhygitalLabel } from "../productCard/ProductCard";
 export type { ExchangeCardStatus } from "./types";
 interface Base {
   id: string;
@@ -64,7 +63,6 @@ interface CancelledCard extends Base {
 interface CommittedCard extends Base {
   status: subgraph.ExchangeState.COMMITTED;
   redeemButtonConfig: IButton;
-  cancelButtonConfig: IButton;
   bottomText?: string;
 }
 
@@ -95,8 +93,6 @@ export const ExchangeCard = (props: ExchangeCardProps) => {
     imageProps,
     price,
     currency,
-    avatar,
-    avatarName,
     onCardClick,
     status,
     isCTAVisible = true,
@@ -110,7 +106,7 @@ export const ExchangeCard = (props: ExchangeCardProps) => {
   } = props;
 
   const [isImageLoaded, setIsImageLoaded] = useState(false);
-
+  const [isHovered, setIsHovered] = useState(false);
   const exchangeCardBottom = useMemo(() => {
     if (isCTAVisible) {
       switch (status) {
@@ -136,7 +132,7 @@ export const ExchangeCard = (props: ExchangeCardProps) => {
           );
         }
         case subgraph.ExchangeState.COMMITTED: {
-          const { redeemButtonConfig, cancelButtonConfig, bottomText } = props;
+          const { redeemButtonConfig } = props;
           return (
             <ExchangeButtonWrapper>
               <CommittedButtonWrapper>
@@ -152,20 +148,7 @@ export const ExchangeCard = (props: ExchangeCardProps) => {
                 >
                   Redeem
                 </Button>
-                <Button
-                  variant="secondaryInverted"
-                  {...cancelButtonConfig}
-                  onClick={(
-                    e: React.MouseEvent<HTMLButtonElement, MouseEvent>
-                  ) => {
-                    e.stopPropagation();
-                    cancelButtonConfig?.onClick?.(e);
-                  }}
-                >
-                  Cancel
-                </Button>
               </CommittedButtonWrapper>
-              <CommittedBottomText>{bottomText}</CommittedBottomText>
             </ExchangeButtonWrapper>
           );
         }
@@ -183,6 +166,8 @@ export const ExchangeCard = (props: ExchangeCardProps) => {
       data-card={dataCard}
       $isHoverDisabled={isHoverDisabled}
       data-testid={dataTestId}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
       onClick={(e) => {
         e.preventDefault();
         onCardClick?.(id);
@@ -190,12 +175,22 @@ export const ExchangeCard = (props: ExchangeCardProps) => {
     >
       <ExchangeCardTop $isNotImageLoaded={isNotImageLoaded}>
         <ExchangeImageWrapper>
-          {isPhygital && (
-            <ExchangeCardLabelWrapper>Phygital</ExchangeCardLabelWrapper>
-          )}
           <Image {...imageProps} onLoaded={() => setIsImageLoaded(true)} />
+          {isCTAVisible && isConnected && (
+            <CTAOnHoverContainerExchangeCard $isHovered={isHovered}>
+              {isCTAVisible && isConnected ? (
+                <ExchangeCTAWrapper data-cta-wrapper>
+                  {exchangeCardBottom}
+                </ExchangeCTAWrapper>
+              ) : isCTAVisible && !isConnected && CTAIfDisconnected ? (
+                CTAIfDisconnected
+              ) : null}
+            </CTAOnHoverContainerExchangeCard>
+          )}
         </ExchangeImageWrapper>
-        <ExchangeStatus $status={status}>{status.toLowerCase()}</ExchangeStatus>
+        <ExchangeStatus $status={status} $side="left">
+          {status.toLowerCase()}
+        </ExchangeStatus>
       </ExchangeCardTop>
       <div style={{ height: height + "px" }} />
       <ExchangeCardBottom>
@@ -209,41 +204,42 @@ export const ExchangeCard = (props: ExchangeCardProps) => {
           }}
         >
           <ExchangeCarData>
-            <ExchangeCreator
+            <Grid
+              flexDirection="column"
+              alignItems="flex-start"
               onClick={(e) => {
                 e.stopPropagation();
                 onAvatarNameClick?.();
               }}
             >
-              <ExchangeCreatorAvatar>
-                <img src={avatar} alt="avatar" />
-              </ExchangeCreatorAvatar>
-              <ExchangeCreatorName data-avatarname="exchange-card">
-                {avatarName}
-              </ExchangeCreatorName>
-            </ExchangeCreator>
-            <ExchangeTitle>{title}</ExchangeTitle>
+              <ExchangeCardTitleWrapper>
+                <ExchangeCardTitle fontSize={"0.75rem"} fontWeight={"600"}>
+                  {title}
+                </ExchangeCardTitle>
+                <ExchangeCardPriceWrapper
+                  justifyContent="flex-end"
+                  alignItems="center"
+                  width="40%"
+                >
+                  <CurrencyDisplay
+                    value={price}
+                    currency={currency}
+                    fontSize={"0.875rem"}
+                    iconSize={16}
+                    gap={"0.3125rem"}
+                    style={{
+                      wordBreak: "break-all",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      fontWeight: "600"
+                    }}
+                  />
+                </ExchangeCardPriceWrapper>
+              </ExchangeCardTitleWrapper>
+              {isPhygital && <PhygitalLabel />}
+            </Grid>
           </ExchangeCarData>
-          <ExchangeCardPriceWrapper>
-            <ExchangeCardPrice>Price</ExchangeCardPrice>
-            <CurrencyDisplay
-              value={price}
-              currency={currency}
-              style={{
-                wordBreak: "break-all",
-                alignItems: "flex-start",
-                justifyContent: "flex-end"
-              }}
-            />
-          </ExchangeCardPriceWrapper>
         </ExchangeCardBottomContent>
-        {isCTAVisible && isConnected ? (
-          <ExchangeCTAWrapper data-cta-wrapper>
-            {exchangeCardBottom}
-          </ExchangeCTAWrapper>
-        ) : isCTAVisible && !isConnected && CTAIfDisconnected ? (
-          CTAIfDisconnected
-        ) : null}
       </ExchangeCardBottom>
     </ExchangeCardWrapper>
   );

package/src/components/form/Select.tsx

@@ -7,7 +7,6 @@ import ReactSelect, {
   SingleValue,
   ActionMeta,
   Props as ReactSelectProps,
-  PropsValue,
   CSSObjectWithLabel
 } from "react-select";
 import { CSSProperties } from "react";
@@ -208,7 +207,10 @@ export function Select<
   isMulti,
   ...props
 }: SelectProps<Option, IsMulti, Group>) {
-  const [field, meta, helpers] = useField(name);
+  const [field, meta, helpers] =
+    useField<IsMulti extends true ? MultiValue<Option> : SingleValue<Option>>(
+      name
+    );
 
   const displayErrorMessage =
     meta.error && meta.touched && !errorMessage
@@ -261,7 +263,7 @@ export function Select<
         isMulti={isMulti}
         placeholder={placeholder}
         options={options}
-        value={field.value as PropsValue<Option>}
+        value={field.value}
         onChange={handleChange}
         onBlur={handleBlur}
         isSearchable={isSearchable}

package/src/components/modal/components/Commit/DetailView/InnerCommitDetailView.tsx

@@ -355,7 +355,10 @@ export default function InnerCommitDetailView(
           priceSibling={
             status === "success" ? (
               // TODO: if exchange is in a different state what do we do?
-              <ExchangeStatus $status={subgraph.ExchangeState.COMMITTED}>
+              <ExchangeStatus
+                $status={subgraph.ExchangeState.COMMITTED}
+                $side="right"
+              >
                 {labelValueToText[LabelType.purchased]}
               </ExchangeStatus>
             ) : (

package/src/components/modal/components/Redeem/MyItems/Exchange.tsx

@@ -4,7 +4,10 @@ import { useMemo } from "react";
 import styled from "styled-components";
 import mockedAvatar from "../../../../../assets/frame.png";
 
-import { ExchangeCard } from "../../../../exchangeCard/ExchangeCard";
+import {
+  ExchangeCard,
+  ExchangeCardProps
+} from "../../../../exchangeCard/ExchangeCard";
 import { Currencies } from "../../../../currencyDisplay/CurrencyDisplay";
 import { exchanges } from "@bosonprotocol/core-sdk";
 import { colors } from "../../../../../theme";
@@ -31,7 +34,6 @@ interface Props {
   exchange: ExtendedExchange;
   onCardClick: (exchange: IExchange) => void;
   onRedeemClick: (exchange: IExchange) => void;
-  onCancelExchangeClick: (exchange: IExchange) => void;
   onRaiseDisputeClick: (exchange: IExchange) => void;
   onAvatarClick: (exchange: IExchange) => void;
 }
@@ -56,7 +58,6 @@ export default function Exchange({
   exchange,
   onRedeemClick,
   onCardClick,
-  onCancelExchangeClick,
   onRaiseDisputeClick,
   onAvatarClick
 }: Props) {
@@ -122,12 +123,6 @@ export default function Exchange({
         const handleRedeem = () => {
           onRedeemClick(exchange);
         };
-        const handleCancel = () => {
-          if (!exchange) {
-            return;
-          }
-          onCancelExchangeClick(exchange);
-        };
         return {
           status: "COMMITTED" as Extract<ExchangeCardStatus, "COMMITTED">,
           isCTAVisible: isBuyer,
@@ -136,13 +131,10 @@ export default function Exchange({
             onClick: handleRedeem,
             type: "button",
             disabled: isInWrongChain
-          } as const,
-          cancelButtonConfig: {
-            onClick: handleCancel,
-            type: "button",
-            disabled: isInWrongChain
           } as const
-        };
+        } satisfies Partial<
+          Extract<ExchangeCardProps, { status: "COMMITTED" }>
+        >;
       }
       default:
         return {

package/src/components/modal/components/Redeem/MyItems/Exchanges.tsx

@@ -6,7 +6,6 @@ import { ProductGridContainer } from "./ProfilePage.styles";
 interface Props {
   onCardClick: (exchange: IExchange) => void;
   onRedeemClick: (exchange: IExchange) => void;
-  onCancelExchangeClick: (exchange: IExchange) => void;
   onRaiseDisputeClick: (exchange: IExchange) => void;
   onAvatarClick: (exchange: IExchange) => void;
   exchanges: ExtendedExchange[];
@@ -15,7 +14,6 @@ interface Props {
 export default function Exchanges({
   onRedeemClick,
   exchanges,
-  onCancelExchangeClick,
   onRaiseDisputeClick,
   onCardClick,
   onAvatarClick
@@ -38,7 +36,6 @@ export default function Exchanges({
             exchange={exchange}
             onRedeemClick={onRedeemClick}
             onCardClick={onCardClick}
-            onCancelExchangeClick={onCancelExchangeClick}
             onRaiseDisputeClick={onRaiseDisputeClick}
             onAvatarClick={onAvatarClick}
           />

package/src/components/modal/components/Redeem/MyItems/MyItems.tsx

@@ -16,7 +16,6 @@ import { BosonLogo } from "../../common/BosonLogo";
 export type MyItemsProps = {
   onExchangeCardClick: (exchange: Exchange) => void;
   onRedeemClick: (exchange: Exchange) => void;
-  onCancelExchange: (exchange: Exchange) => void;
   onRaiseDisputeClick: (exchange: Exchange) => void;
   onAvatarClick: (exchange: Exchange) => void;
   isValid: boolean;
@@ -30,7 +29,6 @@ const ExchangesWithData = WithExchangesData(Exchanges);
 export function MyItems({
   onRedeemClick,
   onExchangeCardClick,
-  onCancelExchange,
   onRaiseDisputeClick,
   onAvatarClick,
   sellerIds,
@@ -100,7 +98,6 @@ export function MyItems({
                   {...values}
                   onCardClick={onExchangeCardClick}
                   onRedeemClick={onRedeemClick}
-                  onCancelExchangeClick={onCancelExchange}
                   onRaiseDisputeClick={onRaiseDisputeClick}
                   onAvatarClick={onAvatarClick}
                 />

package/src/components/modal/components/Redeem/MyItems/WithExchangesData.tsx

@@ -20,7 +20,6 @@ const orderProps = {
 interface CommonProps {
   onCardClick: (exchange: Exchange) => void;
   onRedeemClick: (exchange: Exchange) => void;
-  onCancelExchangeClick: (exchange: Exchange) => void;
   onRaiseDisputeClick: (exchange: Exchange) => void;
   onAvatarClick: (exchange: Exchange) => void;
 }

package/src/components/modal/components/Redeem/RedeemNonModal.tsx

@@ -87,7 +87,6 @@ export type RedeemNonModalProps = Pick<
     hideModal?: NonModalProps["hideModal"];
     myItemsOnExchangeCardClick?: MyItemsProps["onExchangeCardClick"];
     myItemsOnRedeemClick?: MyItemsProps["onRedeemClick"];
-    myItemsOnCancelExchange?: MyItemsProps["onCancelExchange"];
     myItemsOnRaiseDisputeClick?: MyItemsProps["onRaiseDisputeClick"];
     myItemsOnAvatarClick?: MyItemsProps["onAvatarClick"];
     onExchangePolicyClick?: ExchangeViewProps["onExchangePolicyClick"];
@@ -161,7 +160,6 @@ function RedeemNonModal({
   raiseDisputeForExchangeUrl,
   myItemsOnExchangeCardClick,
   myItemsOnRedeemClick,
-  myItemsOnCancelExchange,
   myItemsOnRaiseDisputeClick,
   myItemsOnAvatarClick,
   onExchangePolicyClick,
@@ -403,11 +401,6 @@ function RedeemNonModal({
                     setExchange(exchange);
                     myItemsOnRedeemClick?.(exchange);
                   }}
-                  onCancelExchange={(exchange) => {
-                    setActiveStep(ActiveStep.CANCELLATION_VIEW);
-                    setExchange(exchange);
-                    myItemsOnCancelExchange?.(exchange);
-                  }}
                   isValid={isRedeemFormOK}
                   onRaiseDisputeClick={(exchange) => {
                     setExchange(exchange);