feat: update code with redesign of commit widget and other updates from core components

package.json

@@ -46,7 +46,7 @@
   "dependencies": {
     "@apollo/client": "^3.8.1",
     "@bosonprotocol/chat-sdk": "^1.3.1-alpha.9",
-    "@bosonprotocol/react-kit": "^0.35.1-alpha.7",
+    "@bosonprotocol/react-kit": "^0.36.0-alpha.16",
     "@davatar/react": "^1.10.4",
     "@ethersproject/address": "^5.6.1",
     "@ethersproject/units": "^5.7.0",

src/components/addressInputPanel/index.tsx

@@ -14,7 +14,7 @@ const InputPanel = styled.div`
   ${flexColumnNoWrap};
   position: relative;
   border-radius: 1.25rem;
-  background-color: ${colors.darkGrey};
+  background-color: ${colors.greyDark};
   z-index: 1;
   width: 100%;
 `;
@@ -30,7 +30,7 @@ const ContainerRow = styled.div<{ error: boolean }>`
   transition:
     border-color 300ms ${({ error }) => (error ? "step-end" : "step-start")},
     color 500ms ${({ error }) => (error ? "step-end" : "step-start")};
-  background-color: ${colors.darkGrey};
+  background-color: ${colors.greyDark};
 `;
 
 const InputContainer = styled.div`
@@ -44,7 +44,7 @@ const Input = styled.input<{ error?: boolean }>`
   border: none;
   flex: 1 1 auto;
   width: 0;
-  background-color: ${colors.darkGrey};
+  background-color: ${colors.greyDark};
   transition: color 300ms ${({ error }) => (error ? "step-end" : "step-start")};
   color: ${({ error, theme }) =>
     error ? theme.accentFailure : theme.textPrimary};
@@ -111,7 +111,7 @@ export default function AddressInputPanel({
           <AutoColumn $gap="md">
             <Grid>
               <Typography
-                color={colors.lightGrey}
+                color={colors.greyLight}
                 fontWeight={500}
                 fontSize={14}
               >

src/components/app/index.tsx

@@ -1,10 +1,11 @@
+import { BosonThemeProvider } from "@bosonprotocol/react-kit";
 import { IconContext } from "phosphor-react";
 import { ThemeProvider } from "styled-components";
 
 import ModalProvider from "../../components/modal/ModalProvider";
 import { getCurrentViewMode, ViewMode } from "../../lib/viewMode";
 import ChatProvider from "../../pages/chat/ChatProvider/ChatProvider";
-import theme from "../../theme";
+import theme, { themeVars } from "../../theme";
 import CookieBanner from "../cookie/CookieBanner";
 import { AppView } from "./AppView";
 import { Container } from "./index.styles";
@@ -39,8 +40,11 @@ export default function App({
         }}
       >
         <ChatProvider>
-          <ModalProvider>
-            <>
+          <BosonThemeProvider
+            roundness={themeVars.roundness}
+            theme={themeVars.themeKey}
+          >
+            <ModalProvider>
               <Container>
                 <AppView
                   wrapper={Wrapper}
@@ -53,8 +57,8 @@ export default function App({
                 </AppView>
               </Container>
               <CookieBanner isDapp={getCurrentViewMode() === ViewMode.DAPP} />
-            </>
-          </ModalProvider>
+            </ModalProvider>
+          </BosonThemeProvider>
         </ChatProvider>
       </IconContext.Provider>
     </ThemeProvider>

src/components/avatar/fallback-avatar.tsx

@@ -4,9 +4,9 @@ import styled from "styled-components";
 import { colors } from "../../lib/styles/colors";
 
 const AddressImageContainer = styled.div<{ avatarSize: number }>`
-  border: ${({ avatarSize }) => avatarSize / 40}px solid ${colors.lightGrey};
+  border: ${({ avatarSize }) => avatarSize / 40}px solid ${colors.greyLight};
   border-radius: 50%;
-  background-color: ${colors.lightGrey};
+  background-color: ${colors.greyLight};
   margin-bottom: 5px;
   display: flex;
 `;

src/components/breadcrumbs/Breadcrumbs.tsx

@@ -49,15 +49,15 @@ function Breadcrumbs({ steps, margin }: Props) {
           <Typography
             fontSize="0.875rem"
             fontWeight="600"
-            color={step.hightlighted ? "var(--accent)" : colors.darkGrey}
+            color={step.hightlighted ? "var(--accent)" : colors.greyDark}
             margin="0 0.3125rem 0 0"
           >
             {step.label}
           </Typography>{" "}
           {isNotFinalStep(step.id) && (
             <StyledCaret
               size={18}
-              color={step.hightlighted ? "var(--accent)" : colors.darkGrey}
+              color={step.hightlighted ? "var(--accent)" : colors.greyDark}
             />
           )}
         </Button>

src/components/collapse/Collapse.tsx

@@ -21,7 +21,7 @@ const ArrowContainer = styled.div`
   font-size: 1.5rem;
 `;
 const CollapseWrapper = styled.div`
-  background: ${colors.lightGrey};
+  background: ${colors.greyLight};
   padding: 1rem;
 `;
 

src/components/currencyInputPanel/FiatValue.tsx

@@ -23,9 +23,9 @@ export function FiatValue({
     if (!priceImpact) return undefined;
     if (priceImpact.lessThan("0")) return colors.green;
     const severity = warningSeverity(priceImpact);
-    if (severity < 1) return colors.secondary;
+    if (severity < 1) return colors.violet;
     if (severity < 3) return "yellow";
-    return colors.darkRed;
+    return colors.redDark;
   }, [priceImpact]);
 
   if (fiatValue.isLoading) {
@@ -34,7 +34,7 @@ export function FiatValue({
 
   return (
     <Grid gap="1rem">
-      <Typography color={colors.secondary}>
+      <Typography color={colors.violet}>
         {fiatValue.data ? (
           formatNumber(fiatValue.data, NumberType.FiatTokenPrice)
         ) : (

src/components/currencyInputPanel/SwapCurrencyInputPanel.tsx

@@ -63,7 +63,7 @@ const CurrencySelect = styled(Button)<{
   min-width: 175px;
   align-items: center;
   background-color: ${({ selected }) =>
-    selected ? colors.black : colors.secondary};
+    selected ? colors.black : colors.violet};
   opacity: ${({ disabled }) => (!disabled ? 1 : 0.4)};
   box-shadow: ${({ selected }) =>
     selected ? "none" : "0px 6px 10px rgba(0, 0, 0, 0.075)"};
@@ -97,7 +97,7 @@ const CurrencySelect = styled(Button)<{
     &:hover,
     &:active {
       background-color: ${({ selected }) =>
-        selected ? colors.darkGrey : colors.secondary};
+        selected ? colors.greyDark : colors.violet};
       color: ${colors.white};
     }
 
@@ -115,11 +115,11 @@ const CurrencySelect = styled(Button)<{
     }
 
     &:hover:before {
-      background-color: ${opacify(8, colors.darkGrey)};
+      background-color: ${opacify(8, colors.greyDark)};
     }
 
     &:active:before {
-      background-color: ${opacify(24, colors.lightGrey)};
+      background-color: ${opacify(24, colors.greyLight)};
     }
   }
 
@@ -135,13 +135,13 @@ const InputRow = styled.div`
 const LabelRow = styled.div`
   ${flexRowNoWrap};
   align-items: center;
-  color: ${colors.lightGrey};
+  color: ${colors.greyLight};
   font-size: 0.75rem;
   line-height: 1rem;
 
   span:hover {
     cursor: pointer;
-    color: ${darken(0.2, colors.lightGrey)};
+    color: ${darken(0.2, colors.greyLight)};
   }
 `;
 
@@ -167,7 +167,7 @@ const StyledDropDown = styled(DropDown)<{ selected: boolean }>`
   }
 
   path {
-    stroke: ${({ selected }) => (selected ? colors.primary : colors.white)};
+    stroke: ${({ selected }) => (selected ? colors.green : colors.white)};
     stroke-width: 2px;
   }
 `;
@@ -182,7 +182,7 @@ const StyledTokenName = styled.span<{ active?: boolean }>`
 const StyledBalanceMax = styled.button<{ disabled?: boolean }>`
   background-color: transparent;
   border: none;
-  color: ${colors.secondary};
+  color: ${colors.violet};
   cursor: pointer;
   font-size: 0.875rem;
   font-weight: 600;
@@ -285,7 +285,7 @@ export default function SwapCurrencyInputPanel({
         </FixedContainer>
       )}
       <Container hideInput={hideInput}>
-        <Typography color={colors.darkGrey}>{label}</Typography>
+        <Typography color={colors.greyDark}>{label}</Typography>
         <InputRow
           style={hideInput ? { padding: "0", borderRadius: "8px" } : {}}
         >

src/components/datepicker/DatePicker.style.tsx

@@ -104,7 +104,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;
   }
@@ -136,7 +136,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;
@@ -170,7 +170,7 @@ export const CalendarDay = styled(CalendarCell)<{
     active &&
     css`
       &:after {
-        background: ${colors.secondary};
+        background: ${colors.violet};
         width: 2.25rem;
         height: 2.25rem;
         z-index: 2;
@@ -185,7 +185,7 @@ export const CalendarDay = styled(CalendarCell)<{
     !active &&
     css`
       &:after {
-        background: ${colors.secondary};
+        background: ${colors.violet};
         width: 1.75rem;
         height: 1.75rem;
         z-index: 2;

src/components/detail/Detail.style.tsx

@@ -37,7 +37,7 @@ export const CommitStepWrapper = styled.div`
 export const CommitStep = styled.div`
   position: relative;
   padding: 1rem;
-  background: ${colors.lightGrey};
+  background: ${colors.greyLight};
   &:not(:last-child) {
     &:before {
       position: absolute;
@@ -50,7 +50,7 @@ export const CommitStep = styled.div`
       transform: translate(-50%, 0);
       border-left: 30rem solid transparent;
       border-right: 30rem solid transparent;
-      border-top: 1rem solid ${colors.lightGrey};
+      border-top: 1rem solid ${colors.greyLight};
     }
 
     &:after {
@@ -85,7 +85,7 @@ export const CommitStep = styled.div`
         left: initial;
         transform: translate(0%, -50%);
         border-top: 10rem solid transparent;
-        border-left: 1rem solid ${colors.lightGrey};
+        border-left: 1rem solid ${colors.greyLight};
         border-bottom: 10rem solid transparent;
         border-right: none;
       }
@@ -269,7 +269,7 @@ export const Table = styled.table<{
             color: inherit;
           `
         : css`
-            color: ${colors.darkGrey};
+            color: ${colors.greyDark};
           `}
   }
   tr {
@@ -472,7 +472,7 @@ export const RedeemLeftButton = styled.button`
   cursor: pointer;
   transition: all 150ms ease-in-out;
   &:hover {
-    background: ${colors.lightGrey};
+    background: ${colors.greyLight};
   }
 
   ${miniButton}
@@ -489,12 +489,12 @@ export const RaiseProblemButton = styled(Button)`
     padding: 0.75rem 1rem;
 
     font-weight: 600;
-    color: ${colors.accent};
+    color: ${colors.violet};
     cursor: pointer;
     transition: all 150ms ease-in-out;
     &:hover:not(:disabled) {
       color: ${colors.red};
-      background: ${colors.lightGrey};
+      background: ${colors.greyLight};
     }
     svg {
       margin-left: 1rem;
@@ -504,7 +504,7 @@ export const RaiseProblemButton = styled(Button)`
 export const StyledCancelButton = RaiseProblemButton;
 export const ContactSellerButton = styled(RaiseProblemButton)`
   && {
-    color: ${colors.secondary};
+    color: ${colors.violet};
   }
 `;
 

src/components/detail/DetailWidget/BasicCommitDetailWidget.tsx

@@ -7,6 +7,7 @@ import { BosonRoutes } from "lib/routing/routes";
 import { useKeepQueryParamsNavigate } from "lib/utils/hooks/useKeepQueryParamsNavigate";
 import { VariantV1 } from "pages/products/types";
 import React, { ReactNode } from "react";
+import { themeVars } from "theme";
 
 import { useCurationLists } from "../../../lib/utils/hooks/useCurationLists";
 
@@ -28,6 +29,7 @@ export const BasicCommitDetailWidget: React.FC<
     <ExternalCommitDetailView
       providerProps={{
         ...CONFIG,
+        sendDeliveryInfoThroughXMTP: true,
         envName: config.envName,
         configId: config.envConfig.configId,
         walletConnectProjectId: CONFIG.walletConnect.projectId,
@@ -40,7 +42,8 @@ export const BasicCommitDetailWidget: React.FC<
           curationLists?.sellerCurationList?.join(",") || "",
         withReduxProvider: false,
         withCustomReduxContext: false,
-        withWeb3React: false
+        withWeb3React: false,
+        roundness: themeVars.roundness
       }}
       selectedVariant={selectedVariant}
       showPriceAsterisk={isPreview}
@@ -53,11 +56,6 @@ export const BasicCommitDetailWidget: React.FC<
           exchangePolicyCheckResult: exchangePolicyCheckResult
         });
       }}
-      onPurchaseOverview={() => {
-        showModal(MODAL_TYPES.WHAT_IS_REDEEM, {
-          title: "Commit to Buy and Redeem"
-        });
-      }}
       onClickBuyOrSwap={({ swapParams }) => {
         navigate({ pathname: BosonRoutes.Swap, search: swapParams });
       }}