From 33b0cc3a4894689b88e27ee6f11f40ce50788fe3 Mon Sep 17 00:00:00 2001
From: Jhonatan Gonzalez <jhesgodi@gmail.com>
Date: Fri, 23 Feb 2024 13:50:02 +1100
Subject: [PATCH] fix: [GPR-415][Sale Widget] Fix transak integration after
 breaking changes (#1522)

---
 .../src/components/Transak/TransakIframe.tsx  | 33 +++++---
 .../components/Transak/useTransakIframe.ts    | 23 +++---
 .../src/widgets/sale/SaleWidget.tsx           | 11 ++-
 .../src/widgets/sale/components/WithCard.tsx  | 11 ++-
 .../sale/context/SaleContextProvider.tsx      | 20 +++--
 .../src/widgets/sale/hooks/useClientConfig.ts | 82 +++++++++++++++++++
 .../src/widgets/sale/hooks/useCurrency.ts     | 57 -------------
 .../src/widgets/sale/hooks/useSignOrder.ts    |  6 +-
 .../widgets-lib/src/widgets/sale/types.ts     | 13 ++-
 .../src/widgets/sale/utils/config.ts          |  2 -
 10 files changed, 158 insertions(+), 100 deletions(-)
 create mode 100644 packages/checkout/widgets-lib/src/widgets/sale/hooks/useClientConfig.ts
 delete mode 100644 packages/checkout/widgets-lib/src/widgets/sale/hooks/useCurrency.ts

diff --git a/packages/checkout/widgets-lib/src/components/Transak/TransakIframe.tsx b/packages/checkout/widgets-lib/src/components/Transak/TransakIframe.tsx
index ce9f747517..bc9317a18d 100644
--- a/packages/checkout/widgets-lib/src/components/Transak/TransakIframe.tsx
+++ b/packages/checkout/widgets-lib/src/components/Transak/TransakIframe.tsx
@@ -1,4 +1,5 @@
 import { useRef } from 'react';
+import { Environment } from '@imtbl/config';
 import { TransakEventHandlers, useTransakEvents } from './useTransakEvents';
 
 import {
@@ -10,17 +11,19 @@ import { UserJourney } from '../../context/analytics-provider/SegmentAnalyticsPr
 import { CenteredBoxContent } from '../CenteredBoxContent/CenteredBoxContent';
 import { LoadingBox } from '../../views/loading/LoadingBox';
 
-export type TransactionIframeProps = {
+export type TransakIframeProps = {
   id: string;
   type: TransakWidgetType;
   email: string;
+  contractId: string;
+  environment: Environment;
   walletAddress: string;
   isPassportWallet: boolean;
   loadingText: string;
 } & TransakEventHandlers &
 TransakNFTCheckoutParams;
 
-export function TransakIframe(props: TransactionIframeProps) {
+export function TransakIframe(props: TransakIframeProps) {
   const {
     id,
     type,
@@ -32,7 +35,6 @@ export function TransakIframe(props: TransactionIframeProps) {
     cryptoCurrencyCode,
     estimatedGasLimit,
     exchangeScreenTitle,
-    smartContractAddress,
     partnerOrderId,
     onOpen,
     onInit,
@@ -43,6 +45,8 @@ export function TransakIframe(props: TransactionIframeProps) {
     onFailedToLoad,
     failedToLoadTimeoutInMs,
     loadingText,
+    environment,
+    contractId,
   } = props;
   const iframeRef = useRef<HTMLIFrameElement>(null);
 
@@ -64,15 +68,18 @@ export function TransakIframe(props: TransactionIframeProps) {
 
   const { iframeSrc } = useTransakIframe({
     type,
-    nftData,
-    calldata,
-    cryptoCurrencyCode,
-    estimatedGasLimit,
-    exchangeScreenTitle,
-    smartContractAddress,
-    email,
-    walletAddress,
-    partnerOrderId,
+    contractId,
+    environment,
+    transakParams: {
+      nftData,
+      calldata,
+      cryptoCurrencyCode,
+      estimatedGasLimit,
+      exchangeScreenTitle,
+      email,
+      walletAddress,
+      partnerOrderId,
+    },
   });
 
   return (
@@ -83,8 +90,8 @@ export function TransakIframe(props: TransactionIframeProps) {
         </CenteredBoxContent>
       )}
       <iframe
-        ref={iframeRef}
         id={id}
+        ref={iframeRef}
         src={iframeSrc}
         title="Transak-Iframe"
         allow="camera;microphone;fullscreen;payment"
diff --git a/packages/checkout/widgets-lib/src/components/Transak/useTransakIframe.ts b/packages/checkout/widgets-lib/src/components/Transak/useTransakIframe.ts
index 099bd60efd..7d7ce8f32a 100644
--- a/packages/checkout/widgets-lib/src/components/Transak/useTransakIframe.ts
+++ b/packages/checkout/widgets-lib/src/components/Transak/useTransakIframe.ts
@@ -11,7 +11,6 @@ export type TransakNFTCheckoutParams = {
   calldata: string;
   cryptoCurrencyCode: string;
   estimatedGasLimit: number;
-  smartContractAddress: string;
   exchangeScreenTitle: string;
   partnerOrderId?: string;
   walletAddress?: string;
@@ -20,28 +19,32 @@ export type TransakNFTCheckoutParams = {
 
 type UseTransakIframeProps = {
   type: TransakWidgetType;
-} & TransakNFTCheckoutParams;
+  contractId: string;
+  environment: Environment;
+  transakParams: TransakNFTCheckoutParams;
+};
 
 const MAX_GAS_LIMIT = '30000000';
 
 // TODO: Move to common config file inside Checkout SDK while refactoring onRamp
-// const { baseUrl, apiKey } = checkout.fiatExchangeConfig('transak')
 export const TRANSAK_API_BASE_URL = {
   [Environment.SANDBOX]: 'https://global-stg.transak.com',
   [Environment.PRODUCTION]: 'https://global.transak.com/',
 };
 
+export const TRANSAK_ENVIRONMENT = {
+  [Environment.SANDBOX]: 'STAGING',
+  [Environment.PRODUCTION]: 'PRODUCTION',
+};
+
 export const useTransakIframe = (props: UseTransakIframeProps) => {
-  const { type, ...transakParams } = props;
+  const { contractId, environment, transakParams } = props;
   const [iframeSrc, setIframeSrc] = useState<string>('');
 
   // TODO: Get transak config from checkout SDK
   // const { checkout, provider } = connectLoaderState;
-  // const {  config } = checkout.fiatExchangeConfig('transak');
-  // const { environment, apiKey, network } = config
-  const environment = 'sandbox';
+  // const { baseUrl, apiKey, environment } = checkout.fiatExchangeConfig('transak')
   const apiKey = 'd14b44fb-0f84-4db5-affb-e044040d724b';
-  const network = 'immutablezkevm';
 
   const getNFTCheckoutURL = useCallback(() => {
     const {
@@ -59,10 +62,10 @@ export const useTransakIframe = (props: UseTransakIframeProps) => {
 
     const params = {
       apiKey,
-      network,
       isNFT: 'true',
       disableWalletAddressForm: 'true',
-      environment: 'STAGING',
+      contractId,
+      environment: TRANSAK_ENVIRONMENT[environment],
       calldata: btoa(String.fromCharCode.apply(null, pako.deflate(calldata))),
       nftData: btoa(JSON.stringify(nftData)),
       estimatedGasLimit: gasLimit.toString(),
diff --git a/packages/checkout/widgets-lib/src/widgets/sale/SaleWidget.tsx b/packages/checkout/widgets-lib/src/widgets/sale/SaleWidget.tsx
index 464aefe0e4..dc6eaed8e8 100644
--- a/packages/checkout/widgets-lib/src/widgets/sale/SaleWidget.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/sale/SaleWidget.tsx
@@ -38,8 +38,7 @@ import { TopUpView } from '../../views/top-up/TopUpView';
 import { UserJourney } from '../../context/analytics-provider/SegmentAnalyticsProvider';
 import { sendSaleWidgetCloseEvent } from './SaleWidgetEvents';
 import { EventTargetContext } from '../../context/event-target-context/EventTargetContext';
-import { useCurrency } from './hooks/useCurrency';
-import { CURRENCY_NAME } from './utils/config';
+import { useClientConfig } from './hooks/useClientConfig';
 
 export interface SaleWidgetProps
   extends Required<Omit<SaleWidgetParams, 'walletProviderName'>> {
@@ -67,10 +66,9 @@ export default function SaleWidget(props: SaleWidgetProps) {
     () => ({ viewState, viewDispatch }),
     [viewState, viewDispatch],
   );
-  const { currencyResponse: currency } = useCurrency({
-    env: config.environment,
+  const { currency, clientConfig } = useClientConfig({
     environmentId,
-    currencyName: CURRENCY_NAME,
+    environment: config.environment,
   });
 
   const fromTokenAddress = currency?.erc20Address || '';
@@ -117,12 +115,13 @@ export default function SaleWidget(props: SaleWidgetProps) {
           items,
           amount,
           fromTokenAddress,
-          env: config.environment,
+          environment: config.environment,
           environmentId,
           provider,
           checkout,
           passport: checkout?.passport,
           collectionName,
+          clientConfig,
         }}
       >
         <CryptoFiatProvider environment={config.environment}>
diff --git a/packages/checkout/widgets-lib/src/widgets/sale/components/WithCard.tsx b/packages/checkout/widgets-lib/src/widgets/sale/components/WithCard.tsx
index 543e73b4e3..d1558375c8 100644
--- a/packages/checkout/widgets-lib/src/widgets/sale/components/WithCard.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/sale/components/WithCard.tsx
@@ -25,7 +25,13 @@ export function WithCard(props: WithCardProps) {
     onOrderFailed,
   } = props;
   const {
-    recipientEmail, recipientAddress, isPassportWallet, signResponse, goToErrorView,
+    recipientEmail,
+    recipientAddress,
+    isPassportWallet,
+    signResponse,
+    goToErrorView,
+    environment,
+    clientConfig,
   } = useSaleContext();
   const executeTxn = signResponse?.transactions.find((txn) => txn.methodCall.startsWith('execute'));
 
@@ -63,7 +69,6 @@ export function WithCard(props: WithCardProps) {
       calldata={executeTxn.rawData}
       cryptoCurrencyCode={signResponse.order.currency.name}
       estimatedGasLimit={executeTxn.gasEstimate}
-      smartContractAddress={executeTxn.tokenAddress}
       partnerOrderId={executeTxn.params.reference}
       onInit={onInit}
       onOpen={onOpen}
@@ -72,6 +77,8 @@ export function WithCard(props: WithCardProps) {
       onOrderCompleted={onOrderCompleted}
       onOrderFailed={onOrderFailed}
       onFailedToLoad={onFailedToLoad}
+      environment={environment}
+      contractId={clientConfig.contractId}
     />
   );
 }
diff --git a/packages/checkout/widgets-lib/src/widgets/sale/context/SaleContextProvider.tsx b/packages/checkout/widgets-lib/src/widgets/sale/context/SaleContextProvider.tsx
index d519c30f8c..334e68caba 100644
--- a/packages/checkout/widgets-lib/src/widgets/sale/context/SaleContextProvider.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/sale/context/SaleContextProvider.tsx
@@ -16,6 +16,7 @@ import {
   useRef,
   useState,
 } from 'react';
+import { Environment } from '@imtbl/config';
 import { ConnectLoaderState } from '../../../context/connect-loader-context/ConnectLoaderContext';
 import {
   FundWithSmartCheckoutSubViews,
@@ -28,6 +29,7 @@ import {
 import { StrongCheckoutWidgetsConfig } from '../../../lib/withDefaultWidgetConfig';
 import { useSignOrder } from '../hooks/useSignOrder';
 import {
+  ClientConfig,
   ExecuteOrderResponse,
   ExecutedTransaction,
   SaleErrorTypes,
@@ -37,10 +39,11 @@ import {
 } from '../types';
 
 import { useSmartCheckout } from '../hooks/useSmartCheckout';
+import { defaultClientConfig } from '../hooks/useClientConfig';
 
 type SaleContextProps = {
   config: StrongCheckoutWidgetsConfig;
-  env: string;
+  environment: Environment;
   environmentId: string;
   items: SaleItem[];
   amount: string;
@@ -49,6 +52,7 @@ type SaleContextProps = {
   provider: ConnectLoaderState['provider'];
   checkout: ConnectLoaderState['checkout'];
   passport?: Passport;
+  clientConfig: ClientConfig;
 };
 
 type SaleContextValues = SaleContextProps & {
@@ -90,7 +94,7 @@ const SaleContext = createContext<SaleContextValues>({
   provider: undefined,
   checkout: undefined,
   environmentId: '',
-  env: '',
+  environment: Environment.SANDBOX,
   recipientAddress: '',
   recipientEmail: '',
   sign: () => Promise.resolve(undefined),
@@ -111,6 +115,7 @@ const SaleContext = createContext<SaleContextValues>({
   fundingRoutes: [],
   disabledPaymentTypes: [],
   invalidParameters: false,
+  clientConfig: defaultClientConfig,
 });
 
 SaleContext.displayName = 'SaleSaleContext';
@@ -126,7 +131,7 @@ export function SaleContextProvider(props: {
     children,
     value: {
       config,
-      env,
+      environment,
       environmentId,
       items,
       amount,
@@ -135,6 +140,7 @@ export function SaleContextProvider(props: {
       checkout,
       passport,
       collectionName,
+      clientConfig,
     },
   } = props;
 
@@ -199,7 +205,7 @@ export function SaleContextProvider(props: {
     fromTokenAddress,
     recipientAddress,
     environmentId,
-    env,
+    environment,
   });
 
   const sign = useCallback(
@@ -363,7 +369,7 @@ export function SaleContextProvider(props: {
       executeResponse,
       environmentId,
       collectionName,
-      env,
+      environment,
       provider,
       checkout,
       recipientAddress,
@@ -379,10 +385,11 @@ export function SaleContextProvider(props: {
       fundingRoutes,
       disabledPaymentTypes,
       invalidParameters,
+      clientConfig,
     }),
     [
       config,
-      env,
+      environment,
       environmentId,
       items,
       amount,
@@ -405,6 +412,7 @@ export function SaleContextProvider(props: {
       fundingRoutes,
       disabledPaymentTypes,
       invalidParameters,
+      clientConfig,
     ],
   );
 
diff --git a/packages/checkout/widgets-lib/src/widgets/sale/hooks/useClientConfig.ts b/packages/checkout/widgets-lib/src/widgets/sale/hooks/useClientConfig.ts
new file mode 100644
index 0000000000..d7d814909f
--- /dev/null
+++ b/packages/checkout/widgets-lib/src/widgets/sale/hooks/useClientConfig.ts
@@ -0,0 +1,82 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import { useState, useEffect } from 'react';
+import { PRIMARY_SALES_API_BASE_URL } from '../utils/config';
+import { ClientConfig, ClientConfigCurrency } from '../types';
+
+type ClientConfigResponse = {
+  contract_id: string;
+  currencies: {
+    name: string;
+    decimals: number;
+    erc20_address: string;
+  }[];
+};
+
+const toClientConfig = (response: ClientConfigResponse): ClientConfig => ({
+  contractId: response.contract_id,
+  currencies: response.currencies.map((c) => ({
+    ...c,
+    erc20Address: c.erc20_address,
+  })),
+});
+
+type UseClientConfigParams = {
+  environment: string;
+  environmentId: string;
+  defaultCurrency?: 'USDC';
+};
+
+export const defaultClientConfig: ClientConfig = {
+  contractId: '',
+  currencies: [],
+};
+
+export const useClientConfig = ({
+  environment,
+  environmentId,
+  defaultCurrency,
+}: UseClientConfigParams) => {
+  const [currency, setCurrency] = useState<ClientConfigCurrency | undefined>();
+  const [clientConfig, setClientConfig] = useState<ClientConfig>(defaultClientConfig);
+
+  useEffect(() => {
+    if (!environment || !environmentId) return;
+
+    (async () => {
+      const baseUrl = `${PRIMARY_SALES_API_BASE_URL[environment]}/${environmentId}/client-config`;
+
+      try {
+        const response = await fetch(baseUrl, {
+          method: 'GET',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+        });
+
+        if (!response.ok) {
+          throw new Error(`${response.status} - ${response.statusText}`);
+        }
+
+        const data: ClientConfigResponse = await response.json();
+
+        setClientConfig(toClientConfig(data));
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.warn('Error fetching client config', error);
+      }
+    })();
+  }, [environment, environmentId]);
+
+  useEffect(() => {
+    if (clientConfig.currencies.length === 0) return;
+
+    const selectedCurrency = clientConfig.currencies.find((c) => c.name === defaultCurrency)
+      || clientConfig.currencies[0];
+    setCurrency(selectedCurrency);
+  }, [defaultCurrency, clientConfig]);
+
+  return {
+    clientConfig,
+    currency,
+  };
+};
diff --git a/packages/checkout/widgets-lib/src/widgets/sale/hooks/useCurrency.ts b/packages/checkout/widgets-lib/src/widgets/sale/hooks/useCurrency.ts
deleted file mode 100644
index 4bc1f6a6dc..0000000000
--- a/packages/checkout/widgets-lib/src/widgets/sale/hooks/useCurrency.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-/* eslint-disable @typescript-eslint/naming-convention */
-import { useState, useEffect } from 'react';
-import { PRIMARY_SALES_API_BASE_URL } from '../utils/config';
-
-type CurrencyResponse = {
-  decimals: number;
-  erc20Address: string;
-  name: string;
-};
-
-type UseCurrencyParams = {
-  env: string;
-  environmentId: string;
-  currencyName?: string;
-};
-
-export const useCurrency = ({
-  env,
-  environmentId,
-  currencyName,
-}: UseCurrencyParams) => {
-  const [currencyResponse, setCurrencyResponse] = useState<CurrencyResponse | undefined
-  >(undefined);
-
-  useEffect(() => {
-    const fetchCurrency = async () => {
-      if (!env || !environmentId) return;
-
-      try {
-        const baseUrl = `${PRIMARY_SALES_API_BASE_URL[env]}/${environmentId}/currency`;
-        const response = await fetch(baseUrl, {
-          method: 'GET',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-        });
-
-        const data = await response.json();
-
-        const selectedCurrency = data.currencies.find((c) => c.name === currencyName) || data.currencies[0];
-
-        const mappedCurrency: CurrencyResponse = {
-          ...selectedCurrency,
-          erc20Address: selectedCurrency.erc20_address,
-        };
-
-        setCurrencyResponse(mappedCurrency);
-      } catch (error) {
-        setCurrencyResponse(undefined);
-      }
-    };
-
-    fetchCurrency();
-  }, [env, environmentId, currencyName]);
-
-  return { currencyResponse };
-};
diff --git a/packages/checkout/widgets-lib/src/widgets/sale/hooks/useSignOrder.ts b/packages/checkout/widgets-lib/src/widgets/sale/hooks/useSignOrder.ts
index 79d07c3a2f..e1a1d63473 100644
--- a/packages/checkout/widgets-lib/src/widgets/sale/hooks/useSignOrder.ts
+++ b/packages/checkout/widgets-lib/src/widgets/sale/hooks/useSignOrder.ts
@@ -145,7 +145,7 @@ const toSignResponse = (
 
 export const useSignOrder = (input: SignOrderInput) => {
   const {
-    provider, items, recipientAddress, env, environmentId,
+    provider, items, recipientAddress, environment, environmentId,
   } = input;
   const [signError, setSignError] = useState<SignOrderError | undefined>(
     undefined,
@@ -249,7 +249,7 @@ export const useSignOrder = (input: SignOrderInput) => {
           })),
         };
 
-        const baseUrl = `${PRIMARY_SALES_API_BASE_URL[env]}/${environmentId}/order/sign`;
+        const baseUrl = `${PRIMARY_SALES_API_BASE_URL[environment]}/${environmentId}/order/sign`;
         const response = await fetch(baseUrl, {
           method: 'POST',
           headers: {
@@ -294,7 +294,7 @@ export const useSignOrder = (input: SignOrderInput) => {
       }
       return undefined;
     },
-    [items, recipientAddress, environmentId, env, provider],
+    [items, recipientAddress, environmentId, environment, provider],
   );
 
   const execute = async (
diff --git a/packages/checkout/widgets-lib/src/widgets/sale/types.ts b/packages/checkout/widgets-lib/src/widgets/sale/types.ts
index a8304665a0..7a429305d1 100644
--- a/packages/checkout/widgets-lib/src/widgets/sale/types.ts
+++ b/packages/checkout/widgets-lib/src/widgets/sale/types.ts
@@ -45,7 +45,7 @@ export type SignOrderInput = {
   items: SaleItem[];
   fromTokenAddress: string;
   recipientAddress: string;
-  env: string;
+  environment: string;
   environmentId: string;
 };
 
@@ -87,3 +87,14 @@ export enum SaleErrorTypes {
 export enum SmartCheckoutErrorTypes {
   FRACTIONAL_BALANCE_BLOCKED = 'FRACTIONAL_BALANCE_BLOCKED',
 }
+
+export type ClientConfigCurrency = {
+  name: string;
+  decimals: number;
+  erc20Address: string;
+};
+
+export type ClientConfig = {
+  contractId: string;
+  currencies: ClientConfigCurrency[];
+};
diff --git a/packages/checkout/widgets-lib/src/widgets/sale/utils/config.ts b/packages/checkout/widgets-lib/src/widgets/sale/utils/config.ts
index 5e6e117d31..29496a4abf 100644
--- a/packages/checkout/widgets-lib/src/widgets/sale/utils/config.ts
+++ b/packages/checkout/widgets-lib/src/widgets/sale/utils/config.ts
@@ -1,7 +1,5 @@
 import { Environment } from '@imtbl/config';
 
-export const CURRENCY_NAME = 'USDC';
-
 export const PRIMARY_SALES_API_BASE_URL = {
   [Environment.SANDBOX]: 'https://api.sandbox.immutable.com/v1/primary-sales',
   [Environment.PRODUCTION]: 'https://api.immutable.com/v1/primary-sales',