redesign commit widget

packages/react-kit/src/colors.ts

@@ -9,6 +9,7 @@ export const colors = {
   border: "#5560720f",
   bosonSkyBlue: "#51BEFA",
   cyan: "#00FFFF",
+  darkShade: "#333033",
   froly: "#F46A6A",
   green: "#02F3A2",
   grey: "grey",

packages/react-kit/src/components/buttons/BaseButton.tsx

@@ -31,8 +31,39 @@ const ButtonWithThemeProps = styled.button<ButtonWithThemePropsType>`
     props.theme?.boxShadow ? `box-shadow: ${props.theme.boxShadow}` : ""};
   color: ${(props) => props.theme?.color || "#000000"};
   background-color: ${(props) => props.theme?.background || "transparent"};
+
   svg {
     stroke: ${(props) => props.theme?.color || "#000000"};
+    ${(props) =>
+      props.theme.svg &&
+      css`
+        ${props.theme.svg.fill &&
+        css`
+          fill: ${props.theme.svg.fill} !important;
+        `};
+        line {
+          ${props.theme.svg.line?.stroke &&
+          css`
+            stroke: ${props.theme.svg.line.stroke} !important;
+          `};
+        }
+        polyline {
+          ${props.theme.svg.polyline?.stroke &&
+          css`
+            stroke: ${props.theme.svg.polyline?.stroke} !important;
+          `};
+        }
+        path {
+          ${props.theme.svg.path?.stroke &&
+          css`
+            stroke: ${props.theme.svg.path.stroke} !important;
+          `};
+          ${props.theme.svg.path?.fill &&
+          css`
+            fill: ${props.theme.svg.path.fill} !important;
+          `};
+        }
+      `}
   }
   ${(props) =>
     props.$fill
@@ -49,15 +80,23 @@ const ButtonWithThemeProps = styled.button<ButtonWithThemePropsType>`
         css`
           color: ${props.theme.hover.color} !important;
           svg {
-            fill: ${props.theme.hover.color} !important;
+            fill: ${props.theme.hover?.svg?.fill ||
+            props.theme.hover.color} !important;
             line {
-              stroke: ${props.theme.hover.color} !important;
+              stroke: ${props.theme.hover?.svg?.line?.stroke ||
+              props.theme.hover.color} !important;
             }
             polyline {
-              stroke: ${props.theme.hover.color} !important;
+              stroke: ${props.theme.hover?.svg?.polyline?.stroke ||
+              props.theme.hover.color} !important;
             }
             path {
-              stroke: ${props.theme.hover.color} !important;
+              stroke: ${props.theme.hover?.svg?.path?.stroke ||
+              props.theme.hover.color} !important;
+              ${props.theme.hover?.svg?.path?.fill &&
+              css`
+                fill: ${props.theme.hover?.svg?.path?.fill} !important;
+              `};
             }
           }
         `};
@@ -103,6 +142,20 @@ const ButtonWithThemeProps = styled.button<ButtonWithThemePropsType>`
   }}
 `;
 
+type SvgTheme = Partial<{
+  fill: CSSProperties["color"];
+  line: Partial<{
+    stroke: CSSProperties["color"];
+  }>;
+  polyline: Partial<{
+    stroke: CSSProperties["color"];
+  }>;
+  path: Partial<{
+    stroke: CSSProperties["color"];
+    fill: CSSProperties["color"];
+  }>;
+}>;
+
 export type BaseButtonTheme = {
   background?: CSSProperties["backgroundColor"];
   borderColor?: CSSProperties["borderColor"];
@@ -112,10 +165,12 @@ export type BaseButtonTheme = {
   color?: CSSProperties["color"];
   padding?: CSSProperties["padding"];
   gap?: CSSProperties["gap"];
+  svg?: SvgTheme;
   hover?: {
     background?: CSSProperties["backgroundColor"];
     borderColor?: CSSProperties["borderColor"];
     color?: CSSProperties["color"];
+    svg?: SvgTheme;
   };
   disabled?: {
     background?: CSSProperties["backgroundColor"];

packages/react-kit/src/components/buttons/Button.tsx

@@ -13,31 +13,19 @@ export type ButtonProps = IButton & {
   loading?: boolean;
 };
 
+export const variantToThemeKey = {
+  primaryFill: "primary",
+  secondaryFill: "secondary",
+  secondaryInverted: "secondaryInverted",
+  accentFill: "accentFill",
+  accentInverted: "accentInverted"
+} satisfies Record<NonNullable<ButtonProps["variant"]>, IButton["themeVal"]>;
+
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   ({ variant = "primaryFill", loading = false, ...props }, ref) => {
-    let themeVal: IButton["themeVal"] = props.themeVal;
-    switch (variant) {
-      case "primaryFill": {
-        themeVal = "primary";
-        break;
-      }
-      case "secondaryFill": {
-        themeVal = "secondary";
-        break;
-      }
-      case "secondaryInverted": {
-        themeVal = "secondaryInverted";
-        break;
-      }
-      case "accentFill": {
-        themeVal = "accentFill";
-        break;
-      }
-      case "accentInverted": {
-        themeVal = "accentInverted";
-        break;
-      }
-    }
+    const themeVal: IButton["themeVal"] = variant
+      ? variantToThemeKey[variant] || props.themeVal
+      : props.themeVal;
     return (
       <ThemedButton
         {...props}

packages/react-kit/src/components/cta/common/CtaButton.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ReactNode } from "react";
 import { providers } from "ethers";
 
 import { Button } from "../../buttons/Button";
@@ -11,7 +11,7 @@ import { useCoreSdkOverrides } from "../../../hooks/core-sdk/useCoreSdkOverrides
 import { useMetaTx } from "../../../hooks/useMetaTx";
 
 type Props<T> = CtaButtonProps<T> & {
-  defaultLabel?: string;
+  defaultLabel?: ReactNode;
   actions: Action[];
   successPayload: T | ((receipt: providers.TransactionReceipt) => T);
 };

packages/react-kit/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 });

packages/react-kit/src/components/cta/offer/CommitButton.tsx

@@ -8,6 +8,11 @@ import { CtaButton } from "../common/CtaButton";
 import { CtaButtonProps } from "../common/types";
 import { useCoreSdkOverrides } from "../../../hooks/core-sdk/useCoreSdkOverrides";
 import { withQueryClientProvider } from "../../queryClient/withQueryClientProvider";
+import { BosonLogo } from "../../modal/components/common/BosonLogo";
+import { Typography } from "../../ui/Typography";
+import { Grid } from "../../ui/Grid";
+import { bosonButtonThemes } from "../../ui/ThemedButton";
+import { BaseButtonTheme } from "../../buttons/BaseButton";
 
 type AdditionalProps = {
   /**
@@ -26,15 +31,32 @@ type SuccessPayload = {
   exchangeId: BigNumberish;
 };
 
-type Props = AdditionalProps & CtaButtonProps<SuccessPayload>;
+type Props = AdditionalProps &
+  Omit<CtaButtonProps<SuccessPayload>, "variant" | "theme">;
 
+const commitButtonTheme = {
+  ...bosonButtonThemes()["primary"],
+  svg: {
+    path: {
+      fill: "black"
+    }
+  },
+  hover: {
+    ...bosonButtonThemes()["primary"].hover,
+    svg: {
+      fill: "unset",
+      path: {
+        fill: "white"
+      }
+    }
+  }
+} satisfies BaseButtonTheme;
 export const CommitButton = withQueryClientProvider(
   ({
     offerId,
     exchangeToken,
     price,
     isPauseCommitting = false,
-    variant = "primaryFill",
     onGetSignerAddress,
     ...restProps
   }: Props) => {
@@ -89,8 +111,19 @@ export const CommitButton = withQueryClientProvider(
 
     return (
       <CtaButton
-        variant={variant}
-        defaultLabel="Commit to Buy"
+        variant={null}
+        theme={commitButtonTheme}
+        defaultLabel={
+          <Grid justifyContent="center" alignItems="center" gap="0.375rem">
+            <Typography fontWeight={700} fontSize="0.9375rem">
+              Buy with
+            </Typography>{" "}
+            <BosonLogo
+              svgImageProps={{ width: "", height: "19px" }}
+              gridProps={{ padding: 0 }}
+            />
+          </Grid>
+        }
         successPayload={(receipt) => ({
           exchangeId: coreSdk.getCommittedExchangeIdFromLogs(
             receipt.logs

packages/react-kit/src/components/modal/components/Commit/CommitNonModal.tsx

@@ -46,6 +46,7 @@ export type CommitNonModalProps = Pick<
   forcedAccount?: string;
   withExternalSigner?: boolean | undefined | null;
   lookAndFeel: "regular" | "modal";
+  withLeftArrowButton?: boolean;
 };
 
 export function CommitWrapper({
@@ -60,6 +61,7 @@ export function CommitWrapper({
       contentStyle={{
         background: getCssVar("--background-accent-color")
       }}
+      withLeftArrowButton={props.withLeftArrowButton}
       lookAndFeel={props.lookAndFeel}
       showConnectButton={!props.withExternalSigner}
     >

packages/react-kit/src/components/modal/components/Commit/DetailView/CommitRedeemSteps.tsx

@@ -0,0 +1,99 @@
+import { css, styled } from "styled-components";
+import { Grid } from "../../../../ui/Grid";
+import React, { ReactNode } from "react";
+import { Checks, Package, ShoppingCartSimple } from "phosphor-react";
+import { Typography } from "../../../../ui/Typography";
+import { colors } from "../../../../../colors";
+
+const IconWrapper = styled.div<{ $isDisabled?: boolean }>`
+  display: grid;
+  align-content: center;
+  justify-content: center;
+  min-width: 40px;
+  min-height: 40px;
+  background-color: black;
+  border-radius: 8px;
+  ${({ $isDisabled }) => {
+    return $isDisabled
+      ? css`
+          background-color: ${colors.greyLight};
+        `
+      : "";
+  }};
+`;
+const Wrapper = styled(Grid)`
+  > *:first-child > *:first-child {
+    position: relative;
+    &::after {
+      content: "";
+      position: absolute;
+      background-color: ${colors.greyLight};
+      bottom: -62%;
+      left: 50%;
+      height: 18px;
+      width: 3px;
+      flex-shrink: 0;
+    }
+  }
+`;
+
+const iconSize = 24;
+export type CommitRedeemStepsProps = {
+  offerId: string;
+  status: "pending-transaction" | "pending-signature" | "success";
+  children: ReactNode;
+};
+export const CommitRedeemSteps = ({
+  offerId,
+  status,
+  children
+}: CommitRedeemStepsProps) => {
+  return (
+    <Wrapper flexDirection="column" alignItems="flex-start" gap="2rem">
+      {status === "pending-signature" ? (
+        <Grid justifyContent="flex-start" gap="1rem">
+          <IconWrapper>
+            <ShoppingCartSimple color="white" size={iconSize} />
+          </IconWrapper>
+          <Typography fontSize="0.875rem" fontWeight={600}>
+            Confirm transaction to buy this product
+          </Typography>
+        </Grid>
+      ) : status === "success" ? (
+        <Grid justifyContent="flex-start" gap="1rem">
+          <IconWrapper>
+            <Checks color="black" size={iconSize} />
+          </IconWrapper>
+          <Typography fontSize="0.875rem" fontWeight={600}>
+            You've successfully purchased this item.
+          </Typography>
+        </Grid>
+      ) : null}
+      {status === "pending-signature" ? (
+        <Grid justifyContent="flex-start" gap="1rem" style={{ opacity: 0.5 }}>
+          <IconWrapper $isDisabled={true}>
+            <Package color="black" size={iconSize} />
+          </IconWrapper>
+          <Grid flexDirection="column" alignItems="flex-start">
+            <Typography fontSize="0.875rem" fontWeight={600}>
+              Request shipment (redeem)
+            </Typography>
+            <Typography fontSize="0.75rem" fontWeight={400}>
+              You can redeem your product now or later.
+            </Typography>
+          </Grid>
+        </Grid>
+      ) : status === "success" ? (
+        <Grid justifyContent="flex-start" gap="1rem">
+          <IconWrapper>
+            <Package color="white" size={iconSize} />
+          </IconWrapper>
+          <Typography fontSize="0.875rem" fontWeight={600}>
+            Ship, Trade or Hold
+          </Typography>
+        </Grid>
+      ) : null}
+      {children}
+    </Wrapper>
+  );
+};