wip: pending to update CTAs in commit widget

bosonprotocol · Jan 13, 2025 · 8bb5602 · 8bb5602
1 parent 67e3a03
commit 8bb5602
Show file tree

Hide file tree

Showing 158 changed files with 390 additions and 379 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -123,6 +123,7 @@
     "react": "^18.2.0",
     "react-avatar-editor": "^13.0.0",
     "react-chartjs-2": "^4.2.0",
+    "react-cookie": "^7.2.2",
     "react-csv": "^2.2.2",
     "react-dom": "^18.2.0",
     "react-draggable": "^4.4.5",

diff --git a/src/components/addressInputPanel/index.tsx b/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}
               >

diff --git a/src/components/avatar/fallback-avatar.tsx b/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;
 `;

diff --git a/src/components/breadcrumbs/Breadcrumbs.tsx b/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>

diff --git a/src/components/collapse/Collapse.tsx b/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;
 `;
 

diff --git a/src/components/currencyInputPanel/SwapCurrencyInputPanel.tsx b/src/components/currencyInputPanel/SwapCurrencyInputPanel.tsx
@@ -97,7 +97,7 @@ const CurrencySelect = styled(Button)<{
     &:hover,
     &:active {
       background-color: ${({ selected }) =>
-        selected ? colors.darkGrey : colors.secondary};
+        selected ? colors.greyDark : colors.secondary};
       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)};
   }
 `;
 
@@ -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" } : {}}
         >

diff --git a/src/components/datepicker/DatePicker.style.tsx b/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;

diff --git a/src/components/detail/Detail.style.tsx b/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}
@@ -494,7 +494,7 @@ export const RaiseProblemButton = styled(Button)`
     transition: all 150ms ease-in-out;
     &:hover:not(:disabled) {
       color: ${colors.red};
-      background: ${colors.lightGrey};
+      background: ${colors.greyLight};
     }
     svg {
       margin-left: 1rem;

diff --git a/src/components/detail/DetailWidget/BasicCommitDetailWidget.tsx b/src/components/detail/DetailWidget/BasicCommitDetailWidget.tsx
@@ -28,6 +28,7 @@ export const BasicCommitDetailWidget: React.FC<
     <ExternalCommitDetailView
       providerProps={{
         ...CONFIG,
+        sendDeliveryInfoThroughXMTP: true,
         envName: config.envName,
         configId: config.envConfig.configId,
         walletConnectProjectId: CONFIG.walletConnect.projectId,
@@ -40,7 +41,8 @@ export const BasicCommitDetailWidget: React.FC<
           curationLists?.sellerCurationList?.join(",") || "",
         withReduxProvider: false,
         withCustomReduxContext: false,
-        withWeb3React: false
+        withWeb3React: false,
+        roundness: "min"
       }}
       selectedVariant={selectedVariant}
       showPriceAsterisk={isPreview}
@@ -53,11 +55,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 });
       }}

diff --git a/src/components/detail/DetailWidget/CommitDetailWidget.tsx b/src/components/detail/DetailWidget/CommitDetailWidget.tsx
@@ -1,12 +1,12 @@
 import {
-  CommitButton,
   ExternalCommitDetailView,
   extractUserFriendlyError,
   getHasUserRejectedTx,
   getIsOfferExpired,
   Provider,
   RedeemButton,
-  subgraph
+  subgraph,
+  ThemedCommitButton
 } from "@bosonprotocol/react-kit";
 import * as Sentry from "@sentry/browser";
 import { useConfigContext } from "components/config/ConfigContext";
@@ -231,7 +231,6 @@ export const CommitDetailWidget: React.FC<CommitDetailWidgetProps> = ({
         disabled={disabled}
         data-commit-proxy-address
         style={{ height: "3.5rem" }}
-        withBosonStyle
       >
         Commit <small>Step 1/2</small>
       </BosonButton>
@@ -464,7 +463,9 @@ export const CommitDetailWidget: React.FC<CommitDetailWidgetProps> = ({
         externalConnectedSigner: signer,
         withReduxProvider: false,
         withWeb3React: false,
-        withCustomReduxContext: false
+        withCustomReduxContext: false,
+        sendDeliveryInfoThroughXMTP: true,
+        roundness: "min"
       }}
       selectedVariant={selectedVariant}
       showPriceAsterisk={isPreview}
@@ -477,11 +478,6 @@ export const CommitDetailWidget: React.FC<CommitDetailWidgetProps> = ({
           exchangePolicyCheckResult: exchangePolicyCheckResult
         });
       }}
-      onPurchaseOverview={() => {
-        showModal(MODAL_TYPES.WHAT_IS_REDEEM, {
-          title: "Commit to Buy and Redeem"
-        });
-      }}
       onClickBuyOrSwap={({ swapParams }) => {
         navigate({ pathname: BosonRoutes.Swap, search: swapParams });
       }}
@@ -513,14 +509,13 @@ export const CommitDetailWidget: React.FC<CommitDetailWidgetProps> = ({
                   {showCommitProxyButton ? (
                     <CommitProxyButton />
                   ) : (
-                    <CommitButton
+                    <ThemedCommitButton
                       coreSdkConfig={{
                         envName: config.envName,
                         configId: config.envConfig.configId,
                         web3Provider: signer?.provider as Provider,
                         metaTx: config.metaTx
                       }}
-                      variant="primaryFill"
                       isPauseCommitting={!address}
                       buttonRef={commitButtonRef}
                       onGetSignerAddress={handleOnGetSignerAddress}
@@ -533,7 +528,6 @@ export const CommitDetailWidget: React.FC<CommitDetailWidgetProps> = ({
                       onPendingTransaction={onCommitPendingTransaction}
                       onSuccess={onCommitSuccess}
                       extraInfo="Step 1/2"
-                      withBosonStyle
                     />
                   )}
                 </>
@@ -566,7 +560,6 @@ export const CommitDetailWidget: React.FC<CommitDetailWidgetProps> = ({
               metaTx: config.envConfig.metaTx
             }}
             disabled
-            withBosonStyle
             exchangeId="0"
             extraInfo="Step 2/2"
             variant="primaryFill"