fix: [GPR-415][Sale Widget] Fix transak integration after breaking ch…

…anges (#1522)
immutable · Feb 23, 2024 · 33b0cc3 · 33b0cc3
1 parent dabd6f2
commit 33b0cc3
Show file tree

Hide file tree

Showing 10 changed files with 158 additions and 100 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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,
     ],
   );