Merge pull request #169 from bosonprotocol/168-add-base-network

feat: upgrade react-kit to support base network

Author: levalleux-ludo

package-lock.json

@@ -44,7 +44,7 @@
     ]
   },
   "dependencies": {
-    "@bosonprotocol/react-kit": "^0.35.1-alpha.7",
+    "@bosonprotocol/react-kit": "^0.36.0-alpha.16",
     "@krakenjs/zoid": "^10.3.3",
     "@svgr/webpack": "^8.1.0",
     "@testing-library/jest-dom": "^5.16.5",

package.json

@@ -12,10 +12,6 @@ import {
 } from "./components/widgets/commitButton/CommitButton";
 import { Finance, financePath } from "./components/widgets/finance/Finance";
 import { indexPath } from "./components/widgets/path";
-import {
-  PurchaseOverview,
-  purchaseOverviewPath
-} from "./components/widgets/purchaseOverview/PurchaseOverview";
 import { Redeem, redeemPath } from "./components/widgets/redeem/Redeem";
 import { GlobalStyle } from "./globalStyles";
 
@@ -30,10 +26,6 @@ function App() {
           <Route path={financePath} element={<Finance />}></Route>
           <Route path={commitPath} element={<Commit />}></Route>
           <Route path={commitButtonPath} element={<CommitButton />}></Route>
-          <Route
-            path={purchaseOverviewPath}
-            element={<PurchaseOverview />}
-          ></Route>
           <Route path={redeemPath} element={<Redeem />}></Route>
         </Routes>
       </HashRouter>

src/App.tsx

@@ -5,6 +5,12 @@ import { CSSProperties } from "styled-components";
 import * as yup from "yup";
 
 import { CONFIG, getMetaTxConfig } from "../../../config";
+import {
+  createDeliveryInfoHandler,
+  createRedemptionConfirmedHandler,
+  createRedemptionSubmittedHandler,
+  parseDeliveryInfoData
+} from "../../../utils/redeem";
 import { GlobalStyle } from "../styles";
 
 export const commitPath = "/commit";
@@ -60,12 +66,47 @@ export function Commit() {
   const account = getProp("account") as string;
   const withExternalSigner = getProp("withExternalSigner");
   const bodyOverflow = getProp("bodyOverflow");
+
+  const {
+    deliveryInfoDecoded,
+    sendDeliveryInfoThroughXMTP,
+    shouldWaitForResponse,
+    postDeliveryInfoHeadersDecoded,
+    postDeliveryInfoUrl,
+    postRedemptionConfirmedHeadersDecoded,
+    postRedemptionConfirmedUrl,
+    postRedemptionSubmittedHeadersDecoded,
+    postRedemptionSubmittedUrl,
+    targetOrigin,
+    eventTag
+  } = parseDeliveryInfoData(searchParams);
   return (
     <>
       <GlobalStyle $bodyOverflow={bodyOverflow} />
       <CommitWidget
+        withGlobalStyle={false}
+        roundness="min"
+        sendDeliveryInfoThroughXMTP={sendDeliveryInfoThroughXMTP}
+        deliveryInfoHandler={createDeliveryInfoHandler(
+          targetOrigin,
+          shouldWaitForResponse,
+          eventTag
+        )}
+        redemptionSubmittedHandler={createRedemptionSubmittedHandler(
+          targetOrigin
+        )}
+        redemptionConfirmedHandler={createRedemptionConfirmedHandler(
+          targetOrigin
+        )}
+        deliveryInfo={deliveryInfoDecoded}
+        postDeliveryInfoUrl={postDeliveryInfoUrl}
+        postDeliveryInfoHeaders={postDeliveryInfoHeadersDecoded}
+        postRedemptionSubmittedUrl={postRedemptionSubmittedUrl}
+        postRedemptionSubmittedHeaders={postRedemptionSubmittedHeadersDecoded}
+        postRedemptionConfirmedUrl={postRedemptionConfirmedUrl}
+        postRedemptionConfirmedHeaders={postRedemptionConfirmedHeadersDecoded}
         withCustomReduxContext={false}
-        withWeb3React={false}
+        withWeb3React={true}
         withExternalSigner={withExternalSigner === "true"}
         configId={configId}
         forcedAccount={account}
@@ -93,7 +134,6 @@ export function Commit() {
         ipfsGateway={CONFIG.ipfsGateway as string}
         ipfsProjectId={CONFIG.ipfsProjectId}
         ipfsProjectSecret={CONFIG.ipfsProjectSecret}
-        children={<></>}
         walletConnectProjectId={CONFIG.walletConnectProjectId as string}
         fairExchangePolicyRules={CONFIG.fairExchangePolicyRules as string}
         closeWidgetClick={() => {

src/components/widgets/commit/Commit.tsx

@@ -11,7 +11,6 @@ import { GlobalStyle } from "../styles";
 export const commitButtonPath = "/commit-button";
 
 declare const CommitWidgetModal: (props: Record<string, unknown>) => any;
-declare const PurchaseOverviewModal: (props: Record<string, unknown>) => any;
 
 const yupStringOrNumber = yup
   .mixed<string | number>()
@@ -215,26 +214,6 @@ export function CommitButton() {
             props.onClickCommitButton();
           }
         }}
-        onTaglineClick={() => {
-          PurchaseOverviewModal({
-            bodyOverflow,
-            onClose: () => {
-              if (
-                typeof props.onCloseTagline === "function" &&
-                props.onCloseTagline
-              ) {
-                props.onCloseTagline();
-              }
-            },
-            modalMargin
-          }).renderTo(window.parent, renderToValue, validatedContext);
-          if (
-            typeof props.onClickTagline === "function" &&
-            props.onClickTagline
-          ) {
-            props.onClickTagline();
-          }
-        }}
       />
     </>
   );

src/components/widgets/commitButton/CommitButton.tsx

@@ -22,7 +22,7 @@ export function Finance() {
     <FinanceWidget
       withReduxProvider={true}
       withCustomReduxContext={false}
-      withWeb3React={false}
+      withWeb3React={true}
       sellerId={sellerId}
       withExternalSigner={withExternalSigner === "true"}
       configId={configId}
@@ -41,7 +41,6 @@ export function Finance() {
       licenseTemplate={CONFIG.licenseTemplate as string}
       defaultCurrencyTicker="USD"
       defaultCurrencySymbol="$"
-      children={<></>}
       walletConnectProjectId={CONFIG.walletConnectProjectId as string}
       fairExchangePolicyRules={CONFIG.fairExchangePolicyRules as string}
     ></FinanceWidget>