From a117876268fd3cbf44e8f3aaf8fe37fb2b1fb31d Mon Sep 17 00:00:00 2001
From: Albert Folch <albertfolch@redeemeum.com>
Date: Thu, 30 Nov 2023 13:13:06 +0100
Subject: [PATCH] wip

---
 packages/core-sdk/src/core-sdk.ts             |  4 ++
 packages/core-sdk/src/mixins/base-core-sdk.ts |  2 +
 .../Commit/DetailView/DetailView.tsx          | 53 ++++++++++++-------
 .../react-kit/src/hooks/core-sdk/types.ts     |  3 --
 .../hooks/core-sdk/useCoreSdkWithContext.ts   | 13 ++---
 5 files changed, 45 insertions(+), 30 deletions(-)
 delete mode 100644 packages/react-kit/src/hooks/core-sdk/types.ts

diff --git a/packages/core-sdk/src/core-sdk.ts b/packages/core-sdk/src/core-sdk.ts
index 001b51c29..da0ab542c 100644
--- a/packages/core-sdk/src/core-sdk.ts
+++ b/packages/core-sdk/src/core-sdk.ts
@@ -96,6 +96,10 @@ export class CoreSDK extends BaseCoreSDK {
     return this._web3Lib;
   }
 
+  public get uuid() {
+    return this._uuid;
+  }
+
   public checkMetaTxConfigSet(
     args: {
       contractAddress?: string;
diff --git a/packages/core-sdk/src/mixins/base-core-sdk.ts b/packages/core-sdk/src/mixins/base-core-sdk.ts
index f5e82a33d..8b8fe11dd 100644
--- a/packages/core-sdk/src/mixins/base-core-sdk.ts
+++ b/packages/core-sdk/src/mixins/base-core-sdk.ts
@@ -20,6 +20,7 @@ export class BaseCoreSDK {
   protected _metaTxConfig?: Partial<MetaTxConfig>;
   protected _lens?: Lens;
   protected _contracts?: ContractAddresses;
+  protected _uuid: string;
   protected _getTxExplorerUrl?: (
     txHash?: string,
     isAddress?: boolean
@@ -50,6 +51,7 @@ export class BaseCoreSDK {
     this._metaTxConfig = opts.metaTx;
     this._lens = opts.lens;
     this._contracts = opts.contracts;
+    this._uuid = crypto.randomUUID();
     this._getTxExplorerUrl = opts.getTxExplorerUrl;
   }
 
diff --git a/packages/react-kit/src/components/modal/components/Commit/DetailView/DetailView.tsx b/packages/react-kit/src/components/modal/components/Commit/DetailView/DetailView.tsx
index f141febaa..2848476b6 100644
--- a/packages/react-kit/src/components/modal/components/Commit/DetailView/DetailView.tsx
+++ b/packages/react-kit/src/components/modal/components/Commit/DetailView/DetailView.tsx
@@ -57,8 +57,18 @@ import { DetailDisputeResolver } from "../../common/detail/DetailDisputeResolver
 import Grid from "../../../../ui/Grid";
 import VariationSelects from "../../common/VariationSelects";
 import { VariantV1 } from "../../../../../types/variants";
+import { breakpoint } from "../../../../../lib/ui/breakpoint";
 const colors = theme.colors.light;
 
+const StyledPrice = styled(Price)`
+  h3 {
+    font-size: 2rem;
+  }
+  small {
+    font-size: 1rem;
+  }
+`;
+
 const CommitButtonWrapper = styled.div<{
   $pointerEvents: string;
   disabled: boolean;
@@ -78,15 +88,22 @@ const CommitButtonWrapper = styled.div<{
     pointer-events: ${({ $pointerEvents }) => $pointerEvents};
   }
 `;
-
-const StyledPrice = styled(Price)`
-  h3 {
-    font-size: 2rem;
+const CommitWrapper = styled(Grid)`
+  flex-direction: column;
+  column-gap: 1rem;
+  align-items: flex-start;
+  ${breakpoint.m} {
+    flex-direction: row;
   }
-  small {
-    font-size: 1rem;
+`;
+
+const ResponsiveVariationSelects = styled(VariationSelects)`
+  flex-direction: column;
+  ${breakpoint.m} {
+    flex-direction: row;
   }
 `;
+
 type ActionName = "approveExchangeToken" | "depositFunds" | "commit";
 
 const getOfferDetailData = ({
@@ -194,41 +211,41 @@ const getOfferDetailData = ({
           <Typography tag="h6">
             <b>Exchange policy</b>
           </Typography>
-          <Typography tag="p">
+          <p>
             The Exchange policy ensures that the terms of sale are set in a fair
             way to protect both buyers and sellers.
-          </Typography>
+          </p>
         </>
       ),
       value: exchangePolicyCheckResult ? (
         exchangePolicyCheckResult.isValid ? (
-          <Typography tag="p">
+          <p>
             {exchangePolicyLabel + " "}
             <ArrowSquareOut
               size={20}
               onClick={() => handleShowExchangePolicy()}
               style={{ cursor: "pointer" }}
             />
-          </Typography>
+          </p>
         ) : (
-          <Typography tag="p" color={colors.orange}>
+          <p style={{ color: colors.orange }}>
             <WarningCircle size={20}></WarningCircle> Non-standard{" "}
             <ArrowSquareOut
               size={20}
               onClick={() => handleShowExchangePolicy()}
               style={{ cursor: "pointer" }}
             />
-          </Typography>
+          </p>
         )
       ) : (
-        <Typography tag="p" color="purple">
+        <p style={{ color: "purple" }}>
           <CircleWavyQuestion size={20}></CircleWavyQuestion> Unknown{" "}
           <ArrowSquareOut
             size={20}
             onClick={() => handleShowExchangePolicy()}
             style={{ cursor: "pointer" }}
           />
-        </Typography>
+        </p>
       )
     },
     {
@@ -558,7 +575,7 @@ const DetailView: React.FC<IDetailWidget> = ({
     isBuyerInsufficientFunds ||
     (offer.condition && !isConditionMet);
   const hasVariations = !!selectedVariant.variations?.length;
-
+  console.log("allVariants", allVariants);
   return (
     <Widget>
       <div>
@@ -592,7 +609,7 @@ const DetailView: React.FC<IDetailWidget> = ({
           <div
             style={{ width: "100%", marginTop: "0.5rem", marginBottom: "1rem" }}
           >
-            <VariationSelects
+            <ResponsiveVariationSelects
               selectedVariant={selectedVariant}
               variants={allVariants}
               disabled={allVariants.length < 2}
@@ -621,7 +638,7 @@ const DetailView: React.FC<IDetailWidget> = ({
         />
       </div>
       <Break />
-      <Grid gap="1rem" justifyContent="space-between" margin="1rem 0">
+      <CommitWrapper justifyContent="space-between" margin="1rem 0">
         <CommitButtonWrapper
           disabled={!!isCommitDisabled}
           role="button"
@@ -685,7 +702,7 @@ const DetailView: React.FC<IDetailWidget> = ({
           </span>
           .
         </Typography>
-      </Grid>
+      </CommitWrapper>
     </Widget>
   );
 };
diff --git a/packages/react-kit/src/hooks/core-sdk/types.ts b/packages/react-kit/src/hooks/core-sdk/types.ts
deleted file mode 100644
index b32e345ef..000000000
--- a/packages/react-kit/src/hooks/core-sdk/types.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { CoreSDK } from "@bosonprotocol/core-sdk";
-
-export type ExtendedCoreSDK = CoreSDK & { uuid: string };
diff --git a/packages/react-kit/src/hooks/core-sdk/useCoreSdkWithContext.ts b/packages/react-kit/src/hooks/core-sdk/useCoreSdkWithContext.ts
index fcce79cee..fa72826bd 100644
--- a/packages/react-kit/src/hooks/core-sdk/useCoreSdkWithContext.ts
+++ b/packages/react-kit/src/hooks/core-sdk/useCoreSdkWithContext.ts
@@ -1,13 +1,12 @@
 import { providers } from "ethers";
-import { getEnvConfigById, hooks } from "../..";
+import { CoreSDK, getEnvConfigById, hooks } from "../..";
 import { useEnvContext } from "../../components/environment/EnvironmentContext";
 import { Token } from "../../components/widgets/finance/convertion-rate/ConvertionRateContext";
 import { useSigner } from "../connection/connection";
 import { useMemo } from "react";
 import { useExternalSigner } from "../../components/signer/useExternalSigner";
-import { ExtendedCoreSDK } from "./types";
 
-export function useCoreSDKWithContext(): ExtendedCoreSDK {
+export function useCoreSDKWithContext(): CoreSDK {
   const { envName, configId, metaTx } = useEnvContext();
   const externalSigner = useExternalSigner();
   const signer = useSigner();
@@ -15,7 +14,7 @@ export function useCoreSDKWithContext(): ExtendedCoreSDK {
   const overrides = useMemo(() => {
     return externalSigner ? { web3Lib: externalSigner } : undefined;
   }, [externalSigner]);
-  const coreSDK = hooks.useCoreSdk(
+  return hooks.useCoreSdk(
     {
       envName,
       configId,
@@ -31,11 +30,7 @@ export function useCoreSDKWithContext(): ExtendedCoreSDK {
       }
     },
     overrides
-  ) as ExtendedCoreSDK;
-  if (!coreSDK.uuid) {
-    coreSDK.uuid = crypto.randomUUID();
-  }
-  return coreSDK;
+  );
 }
 
 function getMetaTxApiIds(