@bosonprotocol/react-kit 0.36.0-alpha.1 → 0.36.0-alpha.11

package/src/components/config/ConfigProvider.tsx

@@ -19,9 +19,6 @@ import {
 } from "../environment/EnvironmentProvider";
 import { MagicProvider } from "../magicLink/MagicProvider";
 import { withQueryClientProvider } from "../queryClient/withQueryClientProvider";
-import WalletConnectionProvider, {
-  WalletConnectionProviderProps
-} from "../wallet/WalletConnectionProvider";
 import { InnerWeb3Provider } from "../wallet2/web3Provider/InnerWeb3Provider";
 import {
   ConfigContext,
@@ -29,22 +26,20 @@ import {
   useConfigContext
 } from "./ConfigContext";
 
+type OptionalConfigProps = "dateFormat" | "shortDateFormat";
 export type ConfigProviderProps = Omit<
   ConfigContextProps,
-  "config" | "defaultCurrency" | "supportedChains"
-> & {
-  children: ReactNode;
-  defaultCurrencyTicker: string;
-  defaultCurrencySymbol: string;
-  withWeb3React: boolean;
-  withCustomReduxContext: boolean;
-} & EnvironmentProviderProps &
-  WalletConnectionProviderProps;
-export function ConfigProvider({
-  children,
-  walletConnectProjectId,
-  ...rest
-}: ConfigProviderProps) {
+  "config" | "defaultCurrency" | "supportedChains" | OptionalConfigProps
+> &
+  Partial<Pick<ConfigContextProps, OptionalConfigProps>> & {
+    children: ReactNode;
+    defaultCurrencyTicker?: string;
+    defaultCurrencySymbol?: string;
+    withWeb3React: boolean;
+    withCustomReduxContext: boolean;
+  } & EnvironmentProviderProps;
+
+export function ConfigProvider({ children, ...rest }: ConfigProviderProps) {
   const Web3ProviderComponent = useMemo(() => {
     return rest.withWeb3React ? InnerWeb3Provider : Fragment;
   }, [rest.withWeb3React]);
@@ -60,11 +55,7 @@ export function ConfigProvider({
       <InnerConfigProvider {...rest}>
         <Web3ProviderComponent>
           <MagicLinkProvider>
-            <WalletConnectionProvider
-              walletConnectProjectId={walletConnectProjectId}
-            >
-              <SyncCurrentConfigId>{children}</SyncCurrentConfigId>
-            </WalletConnectionProvider>
+            <SyncCurrentConfigId>{children}</SyncCurrentConfigId>
           </MagicLinkProvider>
         </Web3ProviderComponent>
       </InnerConfigProvider>
@@ -109,8 +100,8 @@ function InnerConfigProvider({
         setEnvConfig,
         config: envConfig,
         defaultCurrency: {
-          ticker: rest.defaultCurrencyTicker,
-          symbol: rest.defaultCurrencySymbol
+          ticker: rest.defaultCurrencyTicker || "USD",
+          symbol: rest.defaultCurrencySymbol || "$"
         },
         dateFormat: rest.dateFormat || "YYYY/MM/DD",
         shortDateFormat: rest.shortDateFormat || "MMM DD, YYYY",

package/src/components/connection/index.ts

@@ -79,7 +79,8 @@ export const injectedConnection: Connection = {
   // If on non-injected, non-mobile browser, prompt user to install Metamask
   overrideActivate: () => {
     if (getShouldAdvertiseMetaMask()) {
-      window.open("https://metamask.io/", "inst_metamask");
+      const windowToUse = window.top || window.parent;
+      windowToUse.open("https://metamask.io/", "inst_metamask");
       return true;
     }
     return false;
@@ -230,7 +231,8 @@ export const getCoinbaseWalletConnection = ({
     // If on a mobile browser that isn't the coinbase wallet browser, deeplink to the coinbase wallet app
     overrideActivate: () => {
       if (isMobile && !getIsInjectedMobileBrowser()) {
-        window.open("https://go.cb-w.com/mtUDhEZPy1", "cbwallet");
+        const windowToUse = window.top || window.parent;
+        windowToUse.open("https://go.cb-w.com/mtUDhEZPy1", "cbwallet");
         return true;
       }
       return false;

package/src/components/cta/common/CtaButton.tsx

@@ -1,7 +1,7 @@
-import React from "react";
+import React, { ReactNode } from "react";
 import { providers } from "ethers";
 
-import { Button } from "../../buttons/Button";
+import { Button, ButtonProps } from "../../buttons/Button";
 import { useCtaClickHandler, Action } from "../../../hooks/useCtaClickHandler";
 import { ButtonTextWrapper, ExtraInfo, LoadingWrapper } from "../common/styles";
 import { CtaButtonProps } from "../common/types";
@@ -11,7 +11,10 @@ import { useCoreSdkOverrides } from "../../../hooks/core-sdk/useCoreSdkOverrides
 import { useMetaTx } from "../../../hooks/useMetaTx";
 
 type Props<T> = CtaButtonProps<T> & {
-  defaultLabel?: string;
+  buttonComponent?: React.ElementType<
+    ButtonProps & Record<`$${string}`, unknown>
+  >;
+  defaultLabel?: ReactNode;
   actions: Action[];
   successPayload: T | ((receipt: providers.TransactionReceipt) => T);
 };
@@ -33,6 +36,7 @@ export function CtaButton<T>({
   variant = "secondaryFill",
   buttonRef,
   coreSdkConfig,
+  buttonComponent: ButtonComponent = Button,
   ...rest
 }: Props<T>) {
   const coreSdk = useCoreSdkOverrides({ coreSdkConfig });
@@ -51,7 +55,7 @@ export function CtaButton<T>({
   });
 
   return (
-    <Button
+    <ButtonComponent
       variant={variant}
       size={size}
       disabled={disabled}
@@ -77,6 +81,6 @@ export function CtaButton<T>({
           </>
         )}
       </ButtonTextWrapper>
-    </Button>
+    </ButtonComponent>
   );
 }

package/src/components/cta/common/types.ts

@@ -4,6 +4,7 @@ import { providers } from "ethers";
 import React, { RefObject } from "react";
 import { CoreSdkConfig } from "../../../hooks/core-sdk/useCoreSdk";
 import { ButtonProps } from "../../buttons/Button";
+import { BaseButtonTheme } from "../../buttons/BaseButton";
 
 type WriteContractFn = () => Promise<TransactionResponse>;
 type SignMetaTxFn = () => Promise<metaTx.handler.SignedMetaTx>;
@@ -77,7 +78,7 @@ export type CtaButtonProps<T> = Omit<ButtonProps, "onError"> & {
     }
   ) => void;
   children?: React.ReactNode;
-  variant?: ButtonProps["variant"];
+
   className?: string;
   buttonRef?: RefObject<HTMLButtonElement>;
-};
+} & ({ variant?: ButtonProps["variant"] } | { theme: BaseButtonTheme });

package/src/components/cta/offer/CommitButton.tsx

@@ -8,6 +8,25 @@ import { CtaButton } from "../common/CtaButton";
 import { CtaButtonProps } from "../common/types";
 import { useCoreSdkOverrides } from "../../../hooks/core-sdk/useCoreSdkOverrides";
 import { withQueryClientProvider } from "../../queryClient/withQueryClientProvider";
+import styled from "styled-components";
+import { Button } from "../../buttons/Button";
+import { CommitView } from "../../buttons/commit/CommitView";
+import { CommitButtonViewProps } from "../../buttons/commit/types";
+import { AddDollarPrefixToKeys } from "../../../types/helpers";
+
+const StyledButton = styled(Button)<{
+  $color: CommitButtonViewProps["color"];
+}>`
+  svg * {
+    fill: black;
+  }
+  &:not(:disabled) svg * {
+    fill: ${({ $color }) => ($color === "black" ? "white" : "black")};
+  }
+  &:hover:not(:disabled) * {
+    fill: ${({ $color }) => ($color === "black" ? "black" : "white")};
+  }
+`;
 
 type AdditionalProps = {
   /**
@@ -25,8 +44,14 @@ type AdditionalProps = {
 type SuccessPayload = {
   exchangeId: BigNumberish;
 };
-
-type Props = AdditionalProps & CtaButtonProps<SuccessPayload>;
+export type CommitButtonStylingProps = Omit<
+  CommitButtonViewProps,
+  "shape" | "color"
+> &
+  AddDollarPrefixToKeys<Required<Pick<CommitButtonViewProps, "color">>>;
+export type CommitButtonProps = AdditionalProps &
+  Omit<CtaButtonProps<SuccessPayload>, "variant" | "theme"> &
+  CommitButtonStylingProps;
 
 export const CommitButton = withQueryClientProvider(
   ({
@@ -34,10 +59,12 @@ export const CommitButton = withQueryClientProvider(
     exchangeToken,
     price,
     isPauseCommitting = false,
-    variant = "primaryFill",
     onGetSignerAddress,
+    minHeight,
+    minWidth,
+    layout,
     ...restProps
-  }: Props) => {
+  }: CommitButtonProps) => {
     const coreSdk = useCoreSdkOverrides({
       coreSdkConfig: restProps.coreSdkConfig
     });
@@ -89,8 +116,13 @@ export const CommitButton = withQueryClientProvider(
 
     return (
       <CtaButton
-        variant={variant}
-        defaultLabel="Commit to Buy"
+        variant={null}
+        buttonComponent={StyledButton}
+        style={{
+          minWidth,
+          minHeight
+        }}
+        defaultLabel={<CommitView layout={layout || "horizontal"} />}
         successPayload={(receipt) => ({
           exchangeId: coreSdk.getCommittedExchangeIdFromLogs(
             receipt.logs

package/src/components/cta/offer/ThemedCommitButton.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { CommitButtonProps, CommitButton } from "./CommitButton";
+import { useBosonTheme } from "../../widgets/BosonThemeProvider";
+import { colorToVariant } from "../../buttons/commit/const";
+
+export type ThemedCommitButtonProps = Omit<
+  CommitButtonProps,
+  "$color" | "themeVal"
+>;
+export const ThemedCommitButton = (props: ThemedCommitButtonProps) => {
+  const { themeKey } = useBosonTheme();
+
+  const color =
+    themeKey === "light"
+      ? "green"
+      : themeKey === "blackAndWhite"
+        ? "black"
+        : "white";
+  const commitButtonThemeKey = colorToVariant[color];
+  return (
+    <CommitButton {...props} themeVal={commitButtonThemeKey} $color={color} />
+  );
+};

package/src/components/currencyDisplay/CurrencyDisplay.tsx

@@ -25,11 +25,12 @@ export enum Currencies {
   WETH = "WETH"
 }
 
-interface CurrencyDisplayProps {
+export interface CurrencyDisplayProps {
   value?: string;
   currency: Currencies;
   height?: number;
   fontSize?: number | string;
+  color?: CSSProperties["color"];
   iconSize?: number;
   gap?: number | string;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -42,6 +43,7 @@ export const CurrencyDisplay = ({
   height = 25,
   fontSize,
   iconSize,
+  color,
   gap,
   ...rest
 }: CurrencyDisplayProps) => {
@@ -52,7 +54,12 @@ export const CurrencyDisplay = ({
     >
       <CurrencyLogo currency={currency} size={iconSize || height} />
       {value && (
-        <CurrencyDisplayValue $height={height} $fontSize={fontSize} $gap={gap}>
+        <CurrencyDisplayValue
+          $height={height}
+          $fontSize={fontSize}
+          $gap={gap}
+          $color={color}
+        >
           {value}
         </CurrencyDisplayValue>
       )}
@@ -70,13 +77,14 @@ const CurrencyDisplayValue = styled.span<{
   $height: CSSProperties["height"];
   $fontSize?: CSSProperties["fontSize"];
   $gap?: CSSProperties["gap"];
+  $color?: CSSProperties["color"];
 }>`
-  ${({ $height, $fontSize, $gap }) => css`
+  ${({ $height, $fontSize, $gap, $color }) => css`
     line-height: ${$height}px;
     font-size: ${$fontSize ? $fontSize : `${(Number($height) - 5) / 16}rem`};
     padding-left: ${$gap !== undefined ? $gap : "1rem"};
+    color: ${$color !== undefined ? $color : "inherit"};
   `}
-  color: #09182c;
   display: flex;
   text-align: right;
   align-items: center;

package/src/components/datepicker/DatePicker.style.tsx

@@ -1,9 +1,8 @@
 import styled, { css } from "styled-components";
 
-import { theme } from "../../theme";
+import { colors } from "../../theme";
 import { transition } from "../ui/styles";
 import { zIndex } from "../ui/zIndex";
-const colors = theme.colors.light;
 
 export const Picker = styled.div`
   width: 100%;
@@ -92,7 +91,7 @@ export const TimeSelectorElement = styled.div<{ active: boolean }>`
   ${({ active }) =>
     active
       ? css`
-          background: ${colors.secondary};
+          background: ${colors.violet};
         `
       : css`
           background: ${colors.white};
@@ -116,7 +115,7 @@ export const CalendarRow = styled.div`
 export const CalendarHeader = styled(CalendarFlex)`
   margin-bottom: 0.5rem;
   > div {
-    color: ${colors.darkGrey};
+    color: ${colors.greyDark};
     font-size: 0.875rem;
     font-weight: 600;
   }
@@ -148,7 +147,7 @@ export const CalendarDay = styled(CalendarCell)`
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    background: ${colors.lightGrey};
+    background: ${colors.greyLight};
     border-radius: 50%;
     width: 0;
     height: 0;
@@ -182,7 +181,7 @@ export const CalendarDay = styled(CalendarCell)`
     active &&
     css`
       &:after {
-        background: ${colors.secondary};
+        background: ${colors.violet};
         width: 2.25rem;
         height: 2.25rem;
         z-index: 2;
@@ -197,7 +196,7 @@ export const CalendarDay = styled(CalendarCell)`
     !active &&
     css`
       &:after {
-        background: ${colors.secondary};
+        background: ${colors.violet};
         width: 1.75rem;
         height: 1.75rem;
         z-index: 2;

package/src/components/detail/useOfferDataset.ts

@@ -4,9 +4,9 @@ import minMax from "dayjs/plugin/minMax";
 import { useMemo } from "react";
 
 import { getDateTimestamp } from "../../lib/dates/getDateTimestamp";
-import { theme } from "../../theme";
+import { colors } from "../../theme";
 import { Offer } from "./../../types/offer";
-const colors = theme.colors.light;
+
 dayjs.extend(minMax);
 
 const SAME_TYPES_OPTIONS = {

package/src/components/error/SimpleError.tsx

@@ -2,10 +2,9 @@ import { Warning } from "phosphor-react";
 import React, { ReactNode } from "react";
 import styled, { CSSProperties } from "styled-components";
 
-import { theme } from "../../theme";
+import { colors, getCssVar } from "../../theme";
 import { Grid, GridProps } from "../ui/Grid";
 import { Typography } from "../ui/Typography";
-const colors = theme.colors.light;
 
 const StyledGrid = styled(Grid)<{
   $background: CSSProperties["backgroundColor"];
@@ -23,8 +22,8 @@ export type SimpleErrorProps = GridProps & {
 export function SimpleError({
   errorMessage,
   children,
-  backgroundColor = colors.lightGrey,
-  warningColor = colors.darkOrange,
+  backgroundColor = getCssVar("--background-color"),
+  warningColor = colors.orangeDark,
   ...rest
 }: SimpleErrorProps) {
   return (
@@ -36,7 +35,7 @@ export function SimpleError({
       $background={backgroundColor}
       {...rest}
     >
-      <Warning color={warningColor} size={16} />
+      <Warning color={warningColor} size={16} style={{ minWidth: "1rem" }} />
       {children ? (
         children
       ) : (

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

@@ -1,5 +1,5 @@
 import styled, { css } from "styled-components";
-import { theme } from "../../theme";
+import { colors, getCssVar } from "../../theme";
 import { ExchangeCardStatus } from "./types";
 import { ProductCardLabelWrapper } from "../productCard/ProductCard.styles";
 
@@ -32,7 +32,7 @@ export const ExchangeCreatorName = styled.div`
   font-weight: 600;
   font-size: 0.75rem;
   line-height: 150%;
-  color: ${({ theme }) => theme?.colors?.light.accent};
+  color: ${colors.violet};
   flex: none;
   order: 1;
   flex-grow: 0;
@@ -44,7 +44,6 @@ export const ExchangeTitle = styled.div`
   font-weight: 600;
   font-size: 1.25rem;
   line-height: 150%;
-  color: ${({ theme }) => theme?.colors?.light.black};
   word-break: break-word;
 `;
 
@@ -64,7 +63,7 @@ export const ExchangeCardPrice = styled.div`
   line-height: 150%;
   text-align: right;
   margin-bottom: 0.25rem;
-  color: ${({ theme }) => theme?.colors?.light.darkGrey};
+  color: ${getCssVar("--sub-text-color")};
 `;
 
 export const ExchangeCarData = styled.div`
@@ -79,7 +78,7 @@ export const ExchangeCardBottom = styled.div`
   left: 0;
   right: 0;
   bottom: 0;
-  background: ${theme?.colors?.light.white};
+  background: ${getCssVar("--background-accent-color")};
 `;
 export const ExchangeCardBottomContent = styled.div`
   display: flex;
@@ -88,7 +87,7 @@ export const ExchangeCardBottomContent = styled.div`
   padding: 1rem 1.5rem;
   box-sizing: border-box;
   align-items: flex-start;
-  border-top: 2px solid ${theme.colors.light.border};
+  border-top: 2px solid ${getCssVar("--border-color")};
 `;
 
 export const ExchangeCardWrapper = styled.div<{
@@ -107,7 +106,7 @@ export const ExchangeCardWrapper = styled.div<{
   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: ${theme.colors.light.white};
+  background: ${getCssVar("--background-accent-color")};
   [data-image-wrapper] {
     position: static;
     padding-top: 0;
@@ -200,19 +199,19 @@ export const ExchangeStatus = styled.div<{
     switch ($status) {
       case "REDEEMED":
       case "CANCELLED":
-        return theme.colors.light.primary;
+        return colors.green;
       case "COMMITTED":
-        return theme.colors.light.accent;
+        return colors.violet;
       default:
-        return theme.colors.light.white;
+        return colors.white;
     }
   }};
   color: ${({ $status }) => {
     switch ($status) {
       case "COMMITTED":
-        return theme.colors.light.white;
+        return colors.white;
       default:
-        return theme.colors.light.black;
+        return colors.black;
     }
   }};
 `;
@@ -224,7 +223,7 @@ export const CommittedBottomText = styled.p`
   margin: 0;
   padding: 0 1.5rem 1.5rem 1.5rem;
   letter-spacing: 0.5px;
-  color: ${theme.colors.light.darkGrey};
+  color: ${colors.greyDark};
 `;
 
 export const ExchangeImageWrapper = styled.div`

package/src/components/exchangeCard/ExchangeCard.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from "react";
+import React, { ReactElement, useMemo, useState } from "react";
 import { Button } from "../buttons/Button";
 import {
   Currencies,
@@ -30,6 +30,7 @@ import {
   RedeemButtonWrapper
 } from "./ExchangeCard.styles";
 import { ExchangeCardStatus } from "./types";
+import { subgraph } from "@bosonprotocol/core-sdk";
 export type { ExchangeCardStatus } from "./types";
 interface Base {
   id: string;
@@ -46,25 +47,46 @@ interface Base {
   isHoverDisabled?: boolean;
   dataCard?: string;
   productType?: ProductType;
+  isConnected: boolean | undefined;
+  CTAIfDisconnected?: ReactElement;
+  status: ExchangeCardStatus;
 }
 
 interface RedeemCard extends Base {
-  status: Extract<ExchangeCardStatus, "REDEEMED">;
+  status: subgraph.ExchangeState.REDEEMED;
   disputeButtonConfig: IButton;
 }
 
 interface CancelledCard extends Base {
-  status: Extract<ExchangeCardStatus, "CANCELLED">;
+  status: subgraph.ExchangeState.CANCELLED;
 }
 
 interface CommittedCard extends Base {
-  status: Extract<ExchangeCardStatus, "COMMITTED">;
+  status: subgraph.ExchangeState.COMMITTED;
   redeemButtonConfig: IButton;
   cancelButtonConfig: IButton;
   bottomText?: string;
 }
 
-type ExchangeCardProps = CommittedCard | RedeemCard | CancelledCard;
+interface CompletedCard extends Base {
+  status: subgraph.ExchangeState.COMPLETED;
+}
+
+interface DisputedCard extends Base {
+  status: subgraph.ExchangeState.DISPUTED;
+}
+
+interface RevokedCard extends Base {
+  status: subgraph.ExchangeState.REVOKED;
+}
+
+export type ExchangeCardProps =
+  | CommittedCard
+  | RedeemCard
+  | CancelledCard
+  | CompletedCard
+  | DisputedCard
+  | RevokedCard;
 
 export const ExchangeCard = (props: ExchangeCardProps) => {
   const {
@@ -82,7 +104,9 @@ export const ExchangeCard = (props: ExchangeCardProps) => {
     dataTestId = "offer",
     isHoverDisabled = false,
     dataCard = "exchange-card",
-    productType
+    productType,
+    isConnected,
+    CTAIfDisconnected
   } = props;
 
   const [isImageLoaded, setIsImageLoaded] = useState(false);
@@ -90,7 +114,7 @@ export const ExchangeCard = (props: ExchangeCardProps) => {
   const exchangeCardBottom = useMemo(() => {
     if (isCTAVisible) {
       switch (status) {
-        case "REDEEMED": {
+        case subgraph.ExchangeState.REDEEMED: {
           const { disputeButtonConfig } = props;
           return (
             <ExchangeButtonWrapper>
@@ -111,7 +135,7 @@ export const ExchangeCard = (props: ExchangeCardProps) => {
             </ExchangeButtonWrapper>
           );
         }
-        case "COMMITTED": {
+        case subgraph.ExchangeState.COMMITTED: {
           const { redeemButtonConfig, cancelButtonConfig, bottomText } = props;
           return (
             <ExchangeButtonWrapper>
@@ -177,7 +201,11 @@ export const ExchangeCard = (props: ExchangeCardProps) => {
       <ExchangeCardBottom>
         <ExchangeCardBottomContent
           ref={(div) => {
-            !!div?.clientHeight && !height && setHeight(div.clientHeight);
+            !!div?.clientHeight &&
+              div.clientHeight !== height &&
+              setHeight(
+                height ? Math.min(div.clientHeight, height) : div.clientHeight
+              );
           }}
         >
           <ExchangeCarData>
@@ -209,11 +237,13 @@ export const ExchangeCard = (props: ExchangeCardProps) => {
             />
           </ExchangeCardPriceWrapper>
         </ExchangeCardBottomContent>
-        {isCTAVisible && (
+        {isCTAVisible && isConnected ? (
           <ExchangeCTAWrapper data-cta-wrapper>
             {exchangeCardBottom}
           </ExchangeCTAWrapper>
-        )}
+        ) : isCTAVisible && !isConnected && CTAIfDisconnected ? (
+          CTAIfDisconnected
+        ) : null}
       </ExchangeCardBottom>
     </ExchangeCardWrapper>
   );

package/src/components/exchangeCard/const.ts

@@ -0,0 +1,32 @@
+import { subgraph } from "@bosonprotocol/core-sdk";
+
+export const LabelType = {
+  purchased: "purchased",
+  shipped: "shipped",
+  cancelled: "cancelled",
+  disputed: "disputed",
+  completed: "completed",
+  revoked: "revoked"
+} as const;
+
+export const exchangeStateToLabelType = {
+  [subgraph.ExchangeState.COMMITTED]: "purchased",
+  [subgraph.ExchangeState.REDEEMED]: "shipped",
+  [subgraph.ExchangeState.CANCELLED]: "cancelled",
+  [subgraph.ExchangeState.DISPUTED]: "disputed",
+  [subgraph.ExchangeState.COMPLETED]: "completed",
+  [subgraph.ExchangeState.REVOKED]: "revoked"
+} as const satisfies Record<
+  subgraph.ExchangeState,
+  (typeof LabelType)[keyof typeof LabelType]
+>;
+
+export const labelValueToText = {
+  // TODO: to define
+  [LabelType.purchased]: "Purchased",
+  [LabelType.shipped]: "Shipped",
+  [LabelType.cancelled]: "Cancelled",
+  [LabelType.disputed]: "Disputed",
+  [LabelType.completed]: "Completed",
+  [LabelType.revoked]: "Revoked"
+} as const satisfies Record<(typeof LabelType)[keyof typeof LabelType], string>;

package/src/components/exchangeCard/types.ts

@@ -1 +1,3 @@
-export type ExchangeCardStatus = "REDEEMED" | "CANCELLED" | "COMMITTED";
+import { subgraph } from "@bosonprotocol/core-sdk";
+
+export type ExchangeCardStatus = subgraph.ExchangeState;