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

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

@@ -4,22 +4,27 @@ import { ArrowLeft } from "phosphor-react";
 import { Exchange } from "../../../../../types/exchange";
 import ContractualAgreement from "../../../../contractualAgreement/ContractualAgreement";
 import { useNonModalContext } from "../../../nonModal/NonModal";
-import { theme } from "../../../../../theme";
+import { getCssVar } from "../../../../../theme";
 import { BosonLogo } from "../../common/BosonLogo";
 
-const colors = theme.colors.light;
 interface Props {
   onBackClick: () => void;
   exchange: Exchange | null;
+  showBosonLogoInFooter: boolean;
 }
 
-export function ContractualAgreementView({ onBackClick, exchange }: Props) {
+export function ContractualAgreementView({
+  onBackClick,
+  exchange,
+  showBosonLogoInFooter
+}: Props) {
   const offer = exchange?.offer;
   const offerId = offer?.id;
-  const dispatch = useNonModalContext();
+  const { dispatch } = useNonModalContext();
   useEffect(() => {
     dispatch({
       payload: {
+        onArrowLeftClick: null,
         headerComponent: (
           <Grid style={{ flex: "1" }} gap="1rem" justifyContent="flex-start">
             <ArrowLeft
@@ -31,13 +36,13 @@ export function ContractualAgreementView({ onBackClick, exchange }: Props) {
           </Grid>
         ),
         contentStyle: {
-          background: colors.white
+          background: getCssVar("--background-accent-color")
         },
-        footerComponent: <BosonLogo />
+        footerComponent: showBosonLogoInFooter ? <BosonLogo /> : null
       }
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [dispatch]);
+  }, [dispatch, showBosonLogoInFooter]);
   return (
     <>
       {exchange ? (

package/src/components/modal/components/Redeem/DetailView/InnerExchangeDetailView.tsx

@@ -11,7 +11,7 @@ import type { ExtendedExchange } from "../../../../../hooks/useExchanges";
 import { getDateTimestamp } from "../../../../../lib/dates/getDateTimestamp";
 import { titleCase } from "../../../../../lib/string/formatText";
 import { breakpoint } from "../../../../../lib/ui/breakpoint";
-import { theme } from "../../../../../theme";
+import { colors, getCssVar } from "../../../../../theme";
 import { Button } from "../../../../buttons/Button";
 import { Grid } from "../../../../ui/Grid";
 import ThemedButton from "../../../../ui/ThemedButton";
@@ -24,7 +24,6 @@ import {
 } from "../../common/detail/Detail.style";
 import { InnerDetailViewWithPortal } from "../../common/detail/InnerDetailViewWithPortal";
 import { DetailViewProps } from "../../common/detail/types";
-const colors = theme.colors.light;
 
 const RedeemButton = styled(Button)`
   padding: 1rem;
@@ -144,6 +143,7 @@ export default function InnerExchangeDetailView(
                       display: "block",
                       marginTop: "0.25rem"
                     }}
+                    color={getCssVar("--sub-text-color")}
                   >
                     By proceeding to Redeem, I agree to the{" "}
                     <span
@@ -191,12 +191,12 @@ export default function InnerExchangeDetailView(
           >
             <Typography
               tag="p"
-              style={{ color: colors.darkGrey, margin: 0 }}
+              style={{ color: colors.greyDark, margin: 0 }}
               fontSize="0.75rem"
             >
               You can withdraw your funds here
             </Typography>
-            <ArrowRight size={18} color={colors.darkGrey} />
+            <ArrowRight size={18} color={colors.greyDark} />
           </Grid>
         ) : isToRedeem ? (
           <RedeemLeftButton style={{ paddingTop: 0, paddingBottom: 0 }}>

package/src/components/modal/components/Redeem/ExchangeView/ExchangeFullDescriptionView/ExchangeFullDescriptionView.tsx

@@ -5,29 +5,31 @@ import { ArrowLeft } from "phosphor-react";
 import { Exchange } from "../../../../../../types/exchange";
 import { ExchangeFullDescription } from "./ExchangeFullDescription";
 import { useNonModalContext } from "../../../../nonModal/NonModal";
-import { theme } from "../../../../../../theme";
+import { colors } from "../../../../../../theme";
 import { OnClickBuyOrSwapHandler } from "../../../common/detail/types";
 import { UseGetOfferDetailDataProps } from "../../../common/detail/useGetOfferDetailData";
 import { BosonLogo } from "../../../common/BosonLogo";
 
-const colors = theme.colors.light;
 interface Props
   extends OnClickBuyOrSwapHandler,
     Pick<UseGetOfferDetailDataProps, "onExchangePolicyClick"> {
   onBackClick: () => void;
   exchange: Exchange | null;
+  showBosonLogoInFooter: boolean;
 }
 
 export function ExchangeFullDescriptionView({
   onBackClick,
   exchange,
   onExchangePolicyClick,
-  onClickBuyOrSwap
+  onClickBuyOrSwap,
+  showBosonLogoInFooter
 }: Props) {
-  const dispatch = useNonModalContext();
+  const { dispatch } = useNonModalContext();
   useEffect(() => {
     dispatch({
       payload: {
+        onArrowLeftClick: null,
         headerComponent: (
           <Grid style={{ flex: "1" }} gap="1rem">
             <ArrowLeft
@@ -44,11 +46,11 @@ export function ExchangeFullDescriptionView({
           background: colors.white,
           padding: 0
         },
-        footerComponent: <BosonLogo />
+        footerComponent: showBosonLogoInFooter ? <BosonLogo /> : null
       }
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [dispatch, exchange?.offer.metadata?.name]);
+  }, [dispatch, exchange?.offer.metadata?.name, showBosonLogoInFooter]);
   return (
     <>
       {!exchange ? (

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

@@ -4,7 +4,7 @@ import styled from "styled-components";
 import { useExchanges } from "../../../../../hooks/useExchanges";
 import { getOfferDetails } from "../../../../../lib/offer/getOfferDetails";
 import { breakpoint } from "../../../../../lib/ui/breakpoint";
-import { theme } from "../../../../../theme";
+import { getCssVar } from "../../../../../theme";
 import { isTruthy } from "../../../../../types/helpers";
 import { VariantV1 } from "../../../../../types/variants";
 import { Grid } from "../../../../ui/Grid";
@@ -24,8 +24,6 @@ import { UseGetOfferDetailDataProps } from "../../common/detail/useGetOfferDetai
 import { getOfferVariations } from "../../../../../lib/offer/getOfferVariations";
 import { BosonLogo } from "../../common/BosonLogo";
 
-const colors = theme.colors.light;
-
 const ImageWrapper = styled.div`
   container-type: inline-size;
   position: relative;
@@ -58,7 +56,6 @@ export type ExchangeViewProps = OnClickBuyOrSwapHandler &
     onHouseClick: () => void;
     onNextClick: () => void;
     onCancelExchange: () => void;
-    onPurchaseOverview: () => void;
     onViewFullDescription: () => void;
     onExpireVoucherClick: () => void;
     onRaiseDisputeClick: () => void;
@@ -66,10 +63,8 @@ export type ExchangeViewProps = OnClickBuyOrSwapHandler &
     onGetDetailViewProviderProps: (providerProps: DetailContextProps) => void;
     showBosonLogo?: boolean;
     exchangeId: string;
-    fairExchangePolicyRules: string;
-    defaultDisputeResolverId: string;
-    isValid: boolean;
     loadingViewFullDescription: boolean;
+    showBosonLogoInFooter: boolean;
   };
 
 const SLIDER_OPTIONS = {
@@ -84,14 +79,11 @@ export function ExchangeView({
   onNextClick,
   onCancelExchange,
   onExchangePolicyClick,
-  onPurchaseOverview,
   onViewFullDescription,
   onExpireVoucherClick,
   onRaiseDisputeClick,
   exchangeId,
-  fairExchangePolicyRules,
-  defaultDisputeResolverId,
-  isValid,
+  showBosonLogoInFooter,
   onClickBuyOrSwap,
   loadingViewFullDescription,
   onContractualAgreementClick,
@@ -130,10 +122,11 @@ export function ExchangeView({
     );
   }, [offerImg, images]);
 
-  const dispatch = useNonModalContext();
+  const { dispatch } = useNonModalContext();
   useEffect(() => {
     dispatch({
       payload: {
+        onArrowLeftClick: null,
         headerComponent: (
           <Grid gap="1rem" style={{ flex: "1" }}>
             <House
@@ -144,13 +137,13 @@ export function ExchangeView({
           </Grid>
         ),
         contentStyle: {
-          background: colors.lightGrey
+          background: getCssVar("--background-color")
         },
-        footerComponent: <BosonLogo />
+        footerComponent: showBosonLogoInFooter ? <BosonLogo /> : null
       }
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [dispatch, offer]);
+  }, [dispatch, offer, showBosonLogoInFooter]);
   const innerOnGetProviderProps = useCallback(
     (providerProps: DetailContextProps) => {
       onGetDetailViewProviderProps(providerProps);
@@ -254,7 +247,6 @@ export function ExchangeView({
               onRedeem={onNextClick}
               onExpireVoucherClick={onExpireVoucherClick}
               onRaiseDisputeClick={onRaiseDisputeClick}
-              onPurchaseOverview={onPurchaseOverview}
               onCancelExchangeClick={onCancelExchange}
               onContractualAgreementClick={onContractualAgreementClick}
               showPriceAsterisk={false}

package/src/components/modal/components/Redeem/ExchangeView/RedeemSuccess.tsx

@@ -10,7 +10,7 @@ import { Typography } from "../../../../ui/Typography";
 import DetailOpenSea from "../../common/DetailOpenSea";
 import { useFormikContext } from "formik";
 import { FormType } from "../RedeemFormModel";
-import { theme } from "../../../../../theme";
+import { colors } from "../../../../../theme";
 import Video from "../../../../ui/Video";
 import { Button } from "../../../../buttons/Button";
 import { GridContainer } from "../../../../ui/GridContainer";
@@ -19,8 +19,6 @@ import { useNonModalContext } from "../../../nonModal/NonModal";
 import { RedeemHeader } from "../RedeemHeader";
 import { BosonLogo } from "../../common/BosonLogo";
 
-const colors = theme.colors.light;
-
 const ImageWrapper = styled.div`
   position: relative;
   max-width: 35rem !important;
@@ -32,12 +30,14 @@ type Props = {
   onClickDone: () => void;
   onHouseClick: () => void;
   exchangeId: string;
+  showBosonLogoInFooter: boolean;
 };
 
 export function RedeemSuccess({
   onClickDone,
   onHouseClick,
-  exchangeId
+  exchangeId,
+  showBosonLogoInFooter
 }: Props) {
   const { postDeliveryInfoUrl } = useRedemptionContext();
   const {
@@ -57,10 +57,11 @@ export function RedeemSuccess({
   const offer = exchange?.offer;
 
   const offerDetails = offer ? getOfferDetails(offer) : undefined;
-  const dispatch = useNonModalContext();
+  const { dispatch } = useNonModalContext();
   useEffect(() => {
     dispatch({
       payload: {
+        onArrowLeftClick: null,
         headerComponent: (
           <Grid style={{ flex: "1" }}>
             <House
@@ -72,13 +73,13 @@ export function RedeemSuccess({
           </Grid>
         ),
         contentStyle: {
-          background: colors.lightGrey
+          background: colors.greyLight
         },
-        footerComponent: <BosonLogo />
+        footerComponent: showBosonLogoInFooter ? <BosonLogo /> : null
       }
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [dispatch]);
+  }, [dispatch, showBosonLogoInFooter]);
   return (
     <>
       {isFetching ? (
@@ -175,7 +176,7 @@ export function RedeemSuccess({
                 </div>
               </Grid>
               <Grid
-                style={{ background: colors.lightGrey, padding: "1.5rem" }}
+                style={{ background: colors.greyLight, padding: "1.5rem" }}
                 justifyContent="flex-start"
                 gap="1rem"
               >

package/src/components/modal/components/Redeem/ExchangeView/cancellation/CancelExchange.tsx

@@ -11,8 +11,7 @@ import useRefundData from "../../../../../../hooks/useRefundData";
 import { extractUserFriendlyError } from "../../../../../../lib/errors/transactions";
 import { useDisplayFloatWithConfig } from "../../../../../../lib/price/prices";
 import { poll } from "../../../../../../lib/promises/promises";
-import { theme } from "../../../../../../theme";
-import { Exchange } from "../../../../../../types/exchange";
+import { colors, getCssVar } from "../../../../../../theme";
 import {
   CancelButton,
   ICancelButton
@@ -23,36 +22,31 @@ import SuccessTransactionToast from "../../../../../toasts/SuccessTransactionToa
 import { Grid } from "../../../../../ui/Grid";
 import ThemedButton from "../../../../../ui/ThemedButton";
 import { Spinner } from "../../../../../ui/loading/Spinner";
-import {
-  RedemptionWidgetAction,
-  useRedemptionContext
-} from "../../../../../widgets/redemption/provider/RedemptionContext";
 import DetailTable from "../../../common/detail/DetailTable";
 
-const colors = theme.colors.light;
-
 export interface CancelExchangeProps
   extends Pick<
     ICancelButton,
     "onSuccess" | "onError" | "onPendingSignature" | "onPendingTransaction"
   > {
-  exchange: Exchange;
+  exchange: subgraph.ExchangeFieldsFragment;
   onBackClick: () => void;
+  showBackButton: boolean;
 }
 
 const Line = styled.hr`
   all: unset;
   display: block;
   width: 100%;
-  border-bottom: 2px solid ${colors.black};
+  border-bottom: 2px solid ${getCssVar("--main-text-color")};
   margin: 1rem 0;
 `;
 
 const Info = styled.div`
   padding: 1.5rem;
-  background-color: ${colors.lightGrey};
+  background-color: ${getCssVar("--background-color")};
   margin: 2rem 0;
-  color: ${colors.darkGrey};
+  color: ${getCssVar("--sub-text-color")};
   display: flex;
   align-items: center;
 `;
@@ -66,7 +60,7 @@ const SuccessIcon = styled(CheckCircle).attrs({ color: colors.green })`
 `;
 
 const ButtonsSection = styled.div`
-  border-top: 2px solid ${colors.border};
+  border-top: 2px solid ${getCssVar("--border-color")};
   padding-top: 2rem;
   display: flex;
   justify-content: space-between;
@@ -93,13 +87,13 @@ export function CancelExchange({
   onBackClick,
   onError,
   onPendingSignature,
-  onPendingTransaction
+  onPendingTransaction,
+  showBackButton
 }: CancelExchangeProps) {
   const [cancelSuccess, setCancelSuccess] = useState<boolean>(false);
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [cancelError, setCancelError] = useState<Error | null>(null);
   const { offer } = exchange;
-
   const displayFloat = useDisplayFloatWithConfig();
   const coreSDK = useCoreSDKWithContext();
 
@@ -110,8 +104,6 @@ export function CancelExchange({
     exchange,
     exchange.offer.price
   );
-  const { widgetAction } = useRedemptionContext();
-  const isCancelModeOnly = widgetAction === RedemptionWidgetAction.CANCEL_FORM;
   return (
     <>
       <DetailTable
@@ -260,8 +252,8 @@ export function CancelExchange({
             </Grid>
           </CancelButton>
         </CancelButtonWrapper>
-        {!isCancelModeOnly && (
-          <ThemedButton themeVal="blankOutline" onClick={() => onBackClick()}>
+        {showBackButton && (
+          <ThemedButton themeVal="secondary" onClick={() => onBackClick()}>
             Back
           </ThemedButton>
         )}

package/src/components/modal/components/Redeem/ExchangeView/cancellation/CancellationView.tsx

@@ -5,32 +5,34 @@ import { Grid } from "../../../../../ui/Grid";
 import { Typography } from "../../../../../ui/Typography";
 import { CancelExchange, CancelExchangeProps } from "./CancelExchange";
 import { useNonModalContext } from "../../../../nonModal/NonModal";
-import { theme } from "../../../../../../theme";
+import { colors } from "../../../../../../theme";
 import { useAccount } from "../../../../../../hooks/connection/connection";
+import { BosonLogo } from "../../../common/BosonLogo";
 import {
   RedemptionWidgetAction,
-  useRedemptionContext
-} from "../../../../../widgets/redemption/provider/RedemptionContext";
-import { BosonLogo } from "../../../common/BosonLogo";
+  useRedemptionWidgetContext
+} from "../../../../../widgets/redemption/provider/RedemptionWidgetContext";
 
-const colors = theme.colors.light;
 export interface CancellationViewProps {
   exchange: Exchange | null;
   onBackClick: CancelExchangeProps["onBackClick"];
   onSuccess: CancelExchangeProps["onSuccess"];
+  showBosonLogoInFooter: boolean;
 }
 
 export const CancellationView: React.FC<CancellationViewProps> = ({
   exchange,
-  onBackClick
+  onBackClick,
+  showBosonLogoInFooter
 }) => {
   const { address } = useAccount();
-  const dispatch = useNonModalContext();
-  const { widgetAction } = useRedemptionContext();
+  const { dispatch } = useNonModalContext();
+  const { widgetAction } = useRedemptionWidgetContext();
   const isCancelModeOnly = widgetAction === RedemptionWidgetAction.CANCEL_FORM;
   useEffect(() => {
     dispatch({
       payload: {
+        onArrowLeftClick: null,
         headerComponent: isCancelModeOnly ? (
           <Grid gap="1rem" style={{ flex: "1" }}>
             <Typography tag="h3" style={{ flex: "1 1" }}>
@@ -52,10 +54,10 @@ export const CancellationView: React.FC<CancellationViewProps> = ({
         contentStyle: {
           background: colors.white
         },
-        footerComponent: <BosonLogo />
+        footerComponent: showBosonLogoInFooter ? <BosonLogo /> : null
       }
     });
-  }, [dispatch, isCancelModeOnly, onBackClick]);
+  }, [dispatch, isCancelModeOnly, onBackClick, showBosonLogoInFooter]);
   return (
     <>
       {!exchange ? (
@@ -69,6 +71,7 @@ export const CancellationView: React.FC<CancellationViewProps> = ({
           exchange={exchange}
           onBackClick={onBackClick}
           onSuccess={onBackClick}
+          showBackButton={!isCancelModeOnly}
         />
       )}
     </>

package/src/components/modal/components/Redeem/ExchangeView/expireVoucher/ExpireVoucher.tsx

@@ -9,7 +9,7 @@ import useRefundData from "../../../../../../hooks/useRefundData";
 import { extractUserFriendlyError } from "../../../../../../lib/errors/transactions";
 import { useDisplayFloatWithConfig } from "../../../../../../lib/price/prices";
 import { poll } from "../../../../../../lib/promises/promises";
-import { theme } from "../../../../../../theme";
+import { colors } from "../../../../../../theme";
 import { Exchange } from "../../../../../../types/exchange";
 import {
   ExpireButton,
@@ -23,8 +23,6 @@ import { Typography } from "../../../../../ui/Typography";
 import { Spinner } from "../../../../../ui/loading/Spinner";
 import DetailTable from "../../../common/detail/DetailTable";
 
-const colors = theme.colors.light;
-
 const Content = styled.div`
   width: 100%;
   margin-top: 0.75rem;
@@ -43,7 +41,7 @@ const Content = styled.div`
 `;
 
 const ButtonsWrapper = styled.div`
-  border-top: 1px solid ${colors.lightGrey};
+  border-top: 1px solid ${colors.greyLight};
   padding-top: 2rem;
 `;
 const Line = styled.hr`
@@ -106,7 +104,7 @@ export default function ExpireVoucher({
           tag="p"
           textAlign="left"
           margin="0"
-          color={colors.darkGrey}
+          color={colors.greyDark}
           width="100%"
           style={{
             width: "100%"

package/src/components/modal/components/Redeem/ExchangeView/expireVoucher/ExpireVoucherView.tsx

@@ -3,26 +3,28 @@ import { ArrowLeft } from "phosphor-react";
 import { Exchange } from "../../../../../../types/exchange";
 import ExpireVoucher, { ExpireVoucherProps } from "./ExpireVoucher";
 import { useNonModalContext } from "../../../../nonModal/NonModal";
-import { theme } from "../../../../../../theme";
+import { getCssVar } from "../../../../../../theme";
 import { Grid } from "../../../../../ui/Grid";
 import { BosonLogo } from "../../../common/BosonLogo";
 
-const colors = theme.colors.light;
 export interface ExpireVoucherViewProps {
   onBackClick: ExpireVoucherProps["onBackClick"];
   onSuccess: ExpireVoucherProps["onSuccess"];
   exchange: Exchange | null;
+  showBosonLogoInFooter: boolean;
 }
 
 export const ExpireVoucherView: React.FC<ExpireVoucherViewProps> = ({
   exchange,
   onBackClick,
-  onSuccess
+  onSuccess,
+  showBosonLogoInFooter
 }) => {
-  const dispatch = useNonModalContext();
+  const { dispatch } = useNonModalContext();
   useEffect(() => {
     dispatch({
       payload: {
+        onArrowLeftClick: null,
         headerComponent: (
           <Grid style={{ flex: "1" }} gap="1rem">
             <ArrowLeft
@@ -34,13 +36,13 @@ export const ExpireVoucherView: React.FC<ExpireVoucherViewProps> = ({
           </Grid>
         ),
         contentStyle: {
-          background: colors.white
+          background: getCssVar("--background-accent-color")
         },
-        footerComponent: <BosonLogo />
+        footerComponent: showBosonLogoInFooter ? <BosonLogo /> : null
       }
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [dispatch]);
+  }, [dispatch, showBosonLogoInFooter]);
   return (
     <>
       {!exchange ? (

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

@@ -4,20 +4,25 @@ import { ArrowLeft } from "phosphor-react";
 import { Exchange } from "../../../../../types/exchange";
 import License from "../../../../license/License";
 import { useNonModalContext } from "../../../nonModal/NonModal";
-import { theme } from "../../../../../theme";
+import { getCssVar } from "../../../../../theme";
 import { BosonLogo } from "../../common/BosonLogo";
 
-const colors = theme.colors.light;
 interface Props {
   onBackClick: () => void;
   offer: Exchange["offer"] | null | undefined;
+  showBosonLogoInFooter: boolean;
 }
 
-export function LicenseAgreementView({ onBackClick, offer }: Props) {
-  const dispatch = useNonModalContext();
+export function LicenseAgreementView({
+  onBackClick,
+  offer,
+  showBosonLogoInFooter
+}: Props) {
+  const { dispatch } = useNonModalContext();
   useEffect(() => {
     dispatch({
       payload: {
+        onArrowLeftClick: null,
         headerComponent: (
           <Grid style={{ flex: "1" }} gap="1rem" justifyContent="flex-start">
             <ArrowLeft
@@ -29,13 +34,13 @@ export function LicenseAgreementView({ onBackClick, offer }: Props) {
           </Grid>
         ),
         contentStyle: {
-          background: colors.white
+          background: getCssVar("--background-accent-color")
         },
-        footerComponent: <BosonLogo />
+        footerComponent: showBosonLogoInFooter ? <BosonLogo /> : null
       }
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [dispatch]);
+  }, [dispatch, showBosonLogoInFooter]);
   return (
     <>
       {offer ? (

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

@@ -7,7 +7,7 @@ import mockedAvatar from "../../../../../assets/frame.png";
 import { ExchangeCard } from "../../../../exchangeCard/ExchangeCard";
 import { Currencies } from "../../../../currencyDisplay/CurrencyDisplay";
 import { exchanges } from "@bosonprotocol/core-sdk";
-import { theme } from "../../../../../theme";
+import { colors } from "../../../../../theme";
 import { getLensProfilePictureUrl } from "../../../../../lib/lens/profile";
 import { calcPrice } from "../../../../../lib/price/prices";
 import { useIpfsContext } from "../../../../ipfs/IpfsContext";
@@ -26,8 +26,6 @@ import {
 import { ExchangeCardStatus } from "../../../../exchangeCard/types";
 import { getOfferDetails } from "../../../../../lib/offer/getOfferDetails";
 
-const colors = theme.colors.light;
-
 interface Props {
   offer: ExtendedExchange["offer"];
   exchange: ExtendedExchange;
@@ -41,7 +39,6 @@ interface Props {
 const ExchangeCardWrapper = styled.div`
   [data-card="exchange-card"] {
     height: 500px;
-    color: ${colors.black};
     [data-image-wrapper] {
       img {
         object-fit: contain;
@@ -176,6 +173,7 @@ export default function Exchange({
         price={price}
         currency={offer.exchangeToken.symbol as Currencies}
         {...createSpecificCardConfig()}
+        isConnected={true}
       />
     </ExchangeCardWrapper>
   );