From bc564a12df93eee0794e8b2b10bf498ad8934dcb Mon Sep 17 00:00:00 2001
From: Jhonatan Gonzalez <jhesgodi@gmail.com>
Date: Wed, 7 Aug 2024 09:33:28 +1000
Subject: [PATCH] [NO CHANGELOG][Checkout Widget] Fix initial iframe url
 (#2070)

---
 .../checkout/widgets-lib/src/lib/constants.ts |  2 +-
 .../src/widgets/checkout/CheckoutWidget.tsx   | 36 +++--------------
 .../context/CheckoutContextProvider.tsx       | 40 +++++++++++--------
 3 files changed, 30 insertions(+), 48 deletions(-)

diff --git a/packages/checkout/widgets-lib/src/lib/constants.ts b/packages/checkout/widgets-lib/src/lib/constants.ts
index 829ca640a6..e830330218 100644
--- a/packages/checkout/widgets-lib/src/lib/constants.ts
+++ b/packages/checkout/widgets-lib/src/lib/constants.ts
@@ -121,6 +121,6 @@ export const WITHDRAWAL_CLAIM_GAS_LIMIT = 91000;
  */
 export const CHECKOUT_APP_URL = {
   [ENV_DEVELOPMENT]: 'https://checkout.dev.immutable.com',
-  [Environment.SANDBOX]: 'http://localhost:3001',
+  [Environment.SANDBOX]: 'https://checkout.sandbox.immutable.com',
   [Environment.PRODUCTION]: 'https://checkout.immutable.com',
 };
diff --git a/packages/checkout/widgets-lib/src/widgets/checkout/CheckoutWidget.tsx b/packages/checkout/widgets-lib/src/widgets/checkout/CheckoutWidget.tsx
index 2274a88a92..3e10fa61c7 100644
--- a/packages/checkout/widgets-lib/src/widgets/checkout/CheckoutWidget.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/checkout/CheckoutWidget.tsx
@@ -3,7 +3,6 @@ import {
   Checkout,
   CheckoutWidgetConfiguration,
   CheckoutWidgetParams,
-  WalletProviderName,
 } from '@imtbl/checkout-sdk';
 import {
   CheckoutActions,
@@ -34,8 +33,11 @@ export default function CheckoutWidget(props: CheckoutWidgetInputs) {
     initialCheckoutState,
   );
   const checkoutReducerValues = useMemo(
-    () => ({ checkoutState, checkoutDispatch }),
-    [checkoutState, checkoutDispatch],
+    () => ({
+      checkoutState: { ...checkoutState, iframeUrl, checkout },
+      checkoutDispatch,
+    }),
+    [checkoutState, checkoutDispatch, iframeUrl, checkout],
   );
 
   useEffect(() => {
@@ -49,34 +51,6 @@ export default function CheckoutWidget(props: CheckoutWidgetInputs) {
     });
   }, [iframeUrl]);
 
-  useEffect(() => {
-    checkoutDispatch({
-      payload: {
-        type: CheckoutActions.SET_CHECKOUT,
-        checkout,
-      },
-    });
-
-    const connectProvider = async () => {
-      const createProviderResult = await checkout.createProvider({
-        walletProviderName: WalletProviderName.METAMASK,
-      });
-
-      const connectResult = await checkout.connect({
-        provider: createProviderResult.provider,
-      });
-
-      checkoutDispatch({
-        payload: {
-          type: CheckoutActions.SET_PROVIDER,
-          provider: connectResult.provider,
-        },
-      });
-    };
-
-    connectProvider();
-  }, [checkout]);
-
   return (
     <CheckoutContextProvider values={checkoutReducerValues}>
       <CheckoutAppIframe />
diff --git a/packages/checkout/widgets-lib/src/widgets/checkout/context/CheckoutContextProvider.tsx b/packages/checkout/widgets-lib/src/widgets/checkout/context/CheckoutContextProvider.tsx
index f72b746f1d..82280d97e7 100644
--- a/packages/checkout/widgets-lib/src/widgets/checkout/context/CheckoutContextProvider.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/checkout/context/CheckoutContextProvider.tsx
@@ -1,7 +1,6 @@
 import { PostMessageHandler } from '@imtbl/checkout-sdk';
 import {
-  Dispatch,
-  ReactNode, useContext, useEffect,
+  Dispatch, ReactNode, useContext, useEffect,
 } from 'react';
 import {
   CheckoutAction,
@@ -10,32 +9,42 @@ import {
   CheckoutState,
 } from './CheckoutContext';
 import { ProviderRelay } from './ProviderRelay';
-import { CHECKOUT_APP_URL } from '../../../lib';
 
 type CheckoutContextProviderProps = {
   values: {
-    checkoutState: CheckoutState,
-    checkoutDispatch: Dispatch<CheckoutAction>,
-  }, children: ReactNode
+    checkoutState: CheckoutState;
+    checkoutDispatch: Dispatch<CheckoutAction>;
+  };
+  children: ReactNode;
 };
-export function CheckoutContextProvider({ values, children }: CheckoutContextProviderProps) {
+export function CheckoutContextProvider({
+  values,
+  children,
+}: CheckoutContextProviderProps) {
   const { checkoutState, checkoutDispatch } = values;
-  const { checkout } = checkoutState;
-  const { provider, checkoutAppIframe, postMessageHandler } = checkoutState;
+  const {
+    checkout,
+    provider,
+    checkoutAppIframe,
+    postMessageHandler,
+    iframeUrl,
+  } = checkoutState;
 
   useEffect(() => {
-    if (!checkoutAppIframe || !checkout) return;
+    if (!checkoutAppIframe || !checkout || !iframeUrl) return;
+
+    const postMessageHandlerInstance = new PostMessageHandler({
+      targetOrigin: new URL(iframeUrl).origin,
+      eventTarget: checkoutAppIframe,
+    });
 
     checkoutDispatch({
       payload: {
         type: CheckoutActions.SET_POST_MESSAGE_HANDLER,
-        postMessageHandler: new PostMessageHandler({
-          targetOrigin: CHECKOUT_APP_URL[checkout.config.environment],
-          eventTarget: checkoutAppIframe,
-        }),
+        postMessageHandler: postMessageHandlerInstance,
       },
     });
-  }, [checkoutAppIframe, checkout]);
+  }, [checkoutAppIframe, checkout, iframeUrl]);
 
   useEffect(() => {
     if (!provider || !postMessageHandler) return undefined;
@@ -55,7 +64,6 @@ export function CheckoutContextProvider({ values, children }: CheckoutContextPro
     <CheckoutContext.Provider value={values}>
       {children}
     </CheckoutContext.Provider>
-
   );
 }