@imtbl/checkout-widgets 2.24.8 → 2.24.9-1

package/src/widgets/sale/views/OrderSummary.tsx

@@ -44,7 +44,7 @@ type OrderSummaryProps = {
 
 export function OrderSummary({ subView }: OrderSummaryProps) {
   const { t } = useTranslation();
-  const { sendFailedEvent, sendProceedToPay, sendInsufficientFunds } = useSaleEvent();
+  const { sendFailedEvent } = useSaleEvent();
   const {
     fromTokenAddress,
     collectionName,
@@ -138,7 +138,7 @@ export function OrderSummary({ subView }: OrderSummaryProps) {
 
     if (riskAssessment && isSingleAddressSanctioned(riskAssessment, address)) {
       const error = new Error('Sanctioned address');
-      sendFailedEvent(error.message, {}, [], undefined, { riskAssessment, paymentMethod });
+      sendFailedEvent(error.message, {}, [], { riskAssessment, paymentMethod });
 
       viewDispatch({
         payload: {
@@ -153,13 +153,6 @@ export function OrderSummary({ subView }: OrderSummaryProps) {
       return;
     }
 
-    sendProceedToPay(
-      SaleWidgetViews.ORDER_SUMMARY,
-      fundingBalance,
-      cryptoFiatState.conversions,
-    );
-    // checkoutPrimarySaleProceedToPay
-
     if (type === FundingBalanceType.SUFFICIENT) {
       signAndProceed(fundingItem.token.address);
       return;
@@ -237,12 +230,6 @@ export function OrderSummary({ subView }: OrderSummaryProps) {
       );
       setPaymentMethod(undefined);
 
-      // Send analytics event to track insufficient funds
-      sendInsufficientFunds(
-        SaleWidgetViews.ORDER_SUMMARY,
-        data,
-      );
-
       closeHandover();
       viewDispatch({
         payload: {

package/src/widgets/sale/views/PayWithCard.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { Box, LoadingOverlay } from '@biom3/react';
 
 import { useTranslation } from 'react-i18next';
@@ -6,12 +6,10 @@ import { HeaderNavigation } from '../../../components/Header/HeaderNavigation';
 import { SimpleLayout } from '../../../components/SimpleLayout/SimpleLayout';
 import { WithCard } from '../components/WithCard';
 import { useSaleContext } from '../context/SaleContextProvider';
-import { SaleWidgetViews } from '../../../context/view-context/SaleViewContextTypes';
 import { useSaleEvent } from '../hooks/useSaleEvents';
 import { SaleErrorTypes } from '../types';
 
 export function PayWithCard() {
-  const { sendPageView } = useSaleEvent();
   const [initialised, setInitialised] = useState(false);
   const {
     goBackToPaymentMethods,
@@ -19,7 +17,7 @@ export function PayWithCard() {
     signResponse: signData,
     signTokenIds,
   } = useSaleContext();
-  const { sendOrderCreated, sendCloseEvent, sendSuccessEvent } = useSaleEvent();
+  const { sendCloseEvent, sendSuccessEvent } = useSaleEvent();
   const { t } = useTranslation();
 
   const onInit = () => setInitialised(true);
@@ -64,49 +62,10 @@ export function PayWithCard() {
       transactionId: signData?.transactionId,
     };
 
-    sendSuccessEvent(SaleWidgetViews.SALE_SUCCESS, [], signTokenIds, details); // checkoutPrimarySaleSaleSuccess_SuccessEventSucceeded
-    sendCloseEvent(SaleWidgetViews.SALE_SUCCESS); // checkoutPrimarySaleSaleSuccess_CloseButtonPressed
+    sendSuccessEvent([], signTokenIds, details);
+    sendCloseEvent();
   };
 
-  const onOrderCreated = (data: Record<string, unknown> = {}) => {
-    const {
-      id: orderId,
-      status: orderStatus,
-      cryptoAmount,
-      cryptoCurrency,
-      fiatAmount,
-      fiatAmountInUsd,
-      amountPaid,
-      totalFeeInFiat,
-      paymentOptionId: paymentOption,
-      userId,
-      userKycType,
-      walletAddress,
-      nftAssetInfo,
-    } = data;
-    const { nftDataBase64, quantity } = nftAssetInfo || ({} as any);
-    sendOrderCreated(SaleWidgetViews.PAY_WITH_CARD, {
-      orderId,
-      orderStatus,
-      cryptoAmount,
-      cryptoCurrency,
-      fiatAmount,
-      fiatAmountInUsd,
-      amountPaid,
-      totalFeeInFiat,
-      paymentOption,
-      userId,
-      userKycType,
-      walletAddress,
-      nftDataBase64,
-      quantity,
-      signData,
-      transactionId: signData?.transactionId,
-    }); // checkoutPrimarySalePayWithCard_OrderCreatedEvent
-  };
-
-  useEffect(() => sendPageView(SaleWidgetViews.PAY_WITH_CARD), []); // checkoutPrimarySalePayWithCardViewed
-
   return (
     <SimpleLayout
       header={
@@ -141,7 +100,6 @@ export function PayWithCard() {
             onInit={onInit}
             onOrderFailed={onOrderFailed}
             onOrderCompleted={onOrderProcessing}
-            onOrderCreated={onOrderCreated}
             onOrderProcessing={onOrderProcessing}
           />
         </Box>

package/src/widgets/sale/views/PayWithCoins.tsx

@@ -14,7 +14,6 @@ import {
 import { useHandover } from '../../../lib/hooks/useHandover';
 import { HandoverTarget } from '../../../context/handover-context/HandoverContext';
 import { HandoverContent } from '../../../components/Handover/HandoverContent';
-import { SaleWidgetViews } from '../../../context/view-context/SaleViewContextTypes';
 import { isPassportProvider } from '../../../lib/provider';
 import { errorToString, getRemoteRive } from '../../../lib/utils';
 import { HandoverDuration } from '../../../context/handover-context/HandoverProvider';
@@ -55,7 +54,6 @@ export function PayWithCoins() {
 
   const { t } = useTranslation();
   const {
-    sendPageView,
     sendTransactionSuccessEvent,
     sendFailedEvent,
     sendCloseEvent,
@@ -89,7 +87,7 @@ export function PayWithCoins() {
       },
       (error, txns) => {
         const details = { transactionId: signResponse?.transactionId };
-        sendFailedEvent(error.toString(), error, txns, undefined, details); // checkoutPrimarySalePaymentMethods_FailEventFailed
+        sendFailedEvent(error.toString(), error, txns, details);
         goToErrorView(error.type, error.data);
       },
       onTxnStepExecuteAll,
@@ -114,7 +112,7 @@ export function PayWithCoins() {
             const details = {
               transactionId: signResponse?.transactionId,
             };
-            sendFailedEvent(err.toString(), err, txns, undefined, details); // checkoutPrimarySalePaymentMethods_FailEventFailed
+            sendFailedEvent(err.toString(), err, txns, details);
             goToErrorView(err.type, err.data);
           },
           onTxnStepExecuteNextTransaction,
@@ -142,8 +140,6 @@ export function PayWithCoins() {
     environment,
   ]);
 
-  useEffect(() => sendPageView(SaleWidgetViews.PAY_WITH_COINS), []); // checkoutPrimarySalePayWithCoinsViewed
-
   useEffect(() => {
     if (!provider || filteredTransactions.length === 0) return;
 
@@ -183,12 +179,11 @@ export function PayWithCoins() {
         ),
         onClose: () => {
           sendSuccessEvent(
-            SaleWidgetViews.SALE_SUCCESS,
             executeResponse?.transactions,
             signTokenIds,
             details,
-          ); // checkoutPrimarySaleSaleSuccess_SuccessEventSucceeded
-          sendCloseEvent(SaleWidgetViews.SALE_SUCCESS); // checkoutPrimarySaleSaleSuccess_CloseButtonPressed
+          );
+          sendCloseEvent();
         },
       });
     }

package/src/widgets/sale/views/PaymentMethods.tsx

@@ -33,9 +33,7 @@ export function PaymentMethods() {
     disabledPaymentTypes,
     hideExcludedPaymentTypes,
   } = useSaleContext();
-  const {
-    sendPageView, sendCloseEvent, sendSelectedPaymentMethod,
-  } = useSaleEvent();
+  const { sendCloseEvent, sendSelectedPaymentMethod } = useSaleEvent();
 
   const handleOptionClick = (type: SalePaymentTypes) => {
     setPaymentMethod(type);
@@ -43,7 +41,7 @@ export function PaymentMethods() {
 
   useEffect(() => {
     if (paymentMethod) {
-      sendSelectedPaymentMethod(paymentMethod, SaleWidgetViews.PAYMENT_METHODS); // checkoutPrimarySalePaymentMethods_SelectMenuItem
+      sendSelectedPaymentMethod(paymentMethod);
     }
 
     if (
@@ -85,7 +83,6 @@ export function PaymentMethods() {
     }
   }, [paymentMethod]);
 
-  useEffect(() => sendPageView(SaleWidgetViews.PAYMENT_METHODS), []); // checkoutPrimarySalePaymentMethodsViewed
   useEffect(() => {
     if (!invalidParameters) return;
     goToErrorView(SaleErrorTypes.INVALID_PARAMETERS);
@@ -96,7 +93,7 @@ export function PaymentMethods() {
       testId="payment-methods"
       header={(
         <HeaderNavigation
-          onCloseButtonClick={() => sendCloseEvent(SaleWidgetViews.PAYMENT_METHODS)} // checkoutPrimarySalePaymentMethods_CloseButtonPressed
+          onCloseButtonClick={sendCloseEvent}
         />
       )}
       footer={<FooterLogo />}

package/src/widgets/sale/views/SaleErrorView.tsx

@@ -90,7 +90,7 @@ export function SaleErrorView({
           const details = {
             transactionId: signResponse?.transactionId,
           };
-          sendFailedEvent(err.toString(), err, txns, undefined, details);
+          sendFailedEvent(err.toString(), err, txns, details);
           setCurrentErrorType(SaleErrorTypes.TRANSACTION_FAILED);
         },
         onTxnStepExecuteNextTransaction,

package/src/widgets/swap/SwapWidget.tsx

@@ -50,7 +50,6 @@ import { TopUpView } from '../../views/top-up/TopUpView';
 import { ConnectLoaderContext } from '../../context/connect-loader-context/ConnectLoaderContext';
 import { EventTargetContext } from '../../context/event-target-context/EventTargetContext';
 import { getAllowedBalances } from '../../lib/balance';
-import { UserJourney, useAnalytics } from '../../context/analytics-provider/SegmentAnalyticsProvider';
 import { ServiceUnavailableErrorView } from '../../views/error/ServiceUnavailableErrorView';
 import { ServiceUnavailableToRegionErrorView } from '../../views/error/ServiceUnavailableToRegionErrorView';
 import { ServiceType } from '../../views/error/serviceTypes';
@@ -95,9 +94,6 @@ export default function SwapWidget({
     history: [],
   });
   const [swapState, swapDispatch] = useReducer(swapReducer, initialSwapState);
-
-  const { page } = useAnalytics();
-
   const [errorViewLoading, setErrorViewLoading] = useState(false);
 
   const swapReducerValues = useMemo(
@@ -281,16 +277,6 @@ export default function SwapWidget({
               statusText={t('views.SWAP.success.text')}
               actionText={t('views.SWAP.success.actionText')}
               onRenderEvent={() => {
-                page({
-                  userJourney: UserJourney.SWAP,
-                  screen: 'SwapSuccess',
-                  extras: {
-                    fromTokenAddress: viewState.view.data?.fromTokenAddress,
-                    fromAmount: viewState.view.data?.fromAmount,
-                    toTokenAddress: viewState.view.data?.toTokenAddress,
-                    toAmount: viewState.view.data?.toAmount,
-                  },
-                });
                 sendSwapSuccessEvent(
                   eventTarget,
                   (viewState.view as SwapSuccessView).data.transactionHash,
@@ -306,10 +292,6 @@ export default function SwapWidget({
               statusText={t('views.SWAP.failed.text')}
               actionText={t('views.SWAP.failed.actionText')}
               onRenderEvent={() => {
-                page({
-                  userJourney: UserJourney.SWAP,
-                  screen: 'SwapFailed',
-                });
                 sendSwapFailedEvent(eventTarget, 'Transaction failed');
               }}
               onActionClick={() => {
@@ -335,11 +317,6 @@ export default function SwapWidget({
               statusText={t('views.SWAP.rejected.text')}
               actionText={t('views.SWAP.rejected.actionText')}
               onRenderEvent={() => {
-                page({
-                  userJourney: UserJourney.SWAP,
-                  screen: 'PriceSurge',
-                  extras: viewState.view.data,
-                });
                 sendSwapRejectedEvent(eventTarget, 'Price surge');
               }}
               onActionClick={() => {
@@ -392,7 +369,6 @@ export default function SwapWidget({
             )}
             {viewState.view.type === SharedViews.TOP_UP_VIEW && (
               <TopUpView
-                analytics={{ userJourney: UserJourney.SWAP }}
                 checkout={checkout}
                 provider={provider}
                 widgetEvent={IMTBLWidgetEvents.IMTBL_SWAP_WIDGET_EVENT}

package/src/widgets/swap/SwapWidgetRoot.tsx

@@ -13,7 +13,6 @@ import { Base } from '../BaseWidgetRoot';
 import { ConnectLoader, ConnectLoaderParams } from '../../components/ConnectLoader/ConnectLoader';
 import { isValidAddress, isValidAmount, isValidWalletProvider } from '../../lib/validations/widgetValidators';
 import { ThemeProvider } from '../../components/ThemeProvider/ThemeProvider';
-import { CustomAnalyticsProvider } from '../../context/analytics-provider/CustomAnalyticsProvider';
 import { LoadingView } from '../../views/loading/LoadingView';
 import { HandoverProvider } from '../../context/handover-context/HandoverProvider';
 import { sendSwapWidgetCloseEvent } from './SwapWidgetEvents';
@@ -89,35 +88,35 @@ export class Swap extends Base<WidgetType.SWAP> {
 
     this.reactRoot!.render(
       <React.StrictMode>
-        <CustomAnalyticsProvider checkout={this.checkout}>
-          <ThemeProvider id="swap-container" config={this.strongConfig()}>
-            <HandoverProvider>
-              <ConnectLoader
-                params={connectLoaderParams}
-                widgetConfig={this.strongConfig()}
-                closeEvent={() => sendSwapWidgetCloseEvent(window)}
-              >
-                <Suspense fallback={<LoadingView loadingText={t('views.LOADING_VIEW.text')} />}>
-                  <SwapWidget
-                    fromTokenAddress={this.parameters.fromTokenAddress}
-                    toTokenAddress={this.parameters.toTokenAddress}
-                    amount={this.parameters.amount}
-                    config={this.strongConfig()}
-                    autoProceed={this.parameters.autoProceed}
-                    direction={this.parameters.direction ?? SwapDirection.FROM}
-                    showBackButton={this.parameters.showBackButton}
-                    walletProviderName={this.parameters.walletProviderName}
-                    swapConfig={{
-                      customTitle: this.properties.config?.customTitle,
-                      customSubTitle: this.properties.config?.customSubTitle,
-                      showHeader: this.properties.config?.showHeader,
-                    }}
-                  />
-                </Suspense>
-              </ConnectLoader>
-            </HandoverProvider>
-          </ThemeProvider>
-        </CustomAnalyticsProvider>
+
+        <ThemeProvider id="swap-container" config={this.strongConfig()}>
+          <HandoverProvider>
+            <ConnectLoader
+              params={connectLoaderParams}
+              widgetConfig={this.strongConfig()}
+              closeEvent={() => sendSwapWidgetCloseEvent(window)}
+            >
+              <Suspense fallback={<LoadingView loadingText={t('views.LOADING_VIEW.text')} />}>
+                <SwapWidget
+                  fromTokenAddress={this.parameters.fromTokenAddress}
+                  toTokenAddress={this.parameters.toTokenAddress}
+                  amount={this.parameters.amount}
+                  config={this.strongConfig()}
+                  autoProceed={this.parameters.autoProceed}
+                  direction={this.parameters.direction ?? SwapDirection.FROM}
+                  showBackButton={this.parameters.showBackButton}
+                  walletProviderName={this.parameters.walletProviderName}
+                  swapConfig={{
+                    customTitle: this.properties.config?.customTitle,
+                    customSubTitle: this.properties.config?.customSubTitle,
+                    showHeader: this.properties.config?.showHeader,
+                  }}
+                />
+              </Suspense>
+            </ConnectLoader>
+          </HandoverProvider>
+        </ThemeProvider>
+
       </React.StrictMode>,
     );
   }

package/src/widgets/swap/components/Fees.tsx

@@ -16,7 +16,7 @@ interface FeesProps {
   gasFeeToken?: TokenInfo;
   feeFiatValue: number | null;
   fees: FormattedFee[];
-  onFeesClick: () => void;
+  onFeesClick?: () => void;
   loading: boolean;
   sx?: SxProps;
 }

package/src/widgets/swap/components/SwapForm.tsx

@@ -15,7 +15,6 @@ import { useTranslation } from 'react-i18next';
 import { Environment } from '@imtbl/config';
 import { formatUnits, parseEther, parseUnits } from 'ethers';
 import { motion } from 'framer-motion';
-import { UserJourney, useAnalytics } from '../../../context/analytics-provider/SegmentAnalyticsProvider';
 import { NetworkSwitchDrawer } from '../../../components/NetworkSwitchDrawer/NetworkSwitchDrawer';
 import { amountInputValidation as textInputValidator } from '../../../lib/validations/amountInputValidations';
 import { SwapContext } from '../context/SwapContext';
@@ -117,8 +116,6 @@ export function SwapForm({
 
   const [direction, setDirection] = useState<SwapDirection>(SwapDirection.FROM);
   const [loading, setLoading] = useState(false);
-  const { track } = useAnalytics();
-
   // Form State
   const [fromAmount, setFromAmount] = useState<string>(data?.fromAmount || '');
   const [fromAmountError, setFromAmountError] = useState<string>('');
@@ -240,20 +237,7 @@ export function SwapForm({
 
   const onQuoteError = useCallback((error: any) => {
     setQuoteError(error);
-    track({
-      userJourney: UserJourney.SWAP,
-      screen: 'SwapCoins',
-      control: 'UnableToSwapDrawer',
-      controlType: 'Button',
-      extras: {
-        fromToken,
-        toToken,
-        fromAmount,
-        toAmount,
-        error: 'message' in error ? error.message : error,
-      },
-    });
-  }, [track, fromToken, toToken, fromAmount, toAmount]);
+  }, [fromToken, toToken, fromAmount, toAmount]);
 
   const tokensOptionsTo = useMemo(() => allowedTokens
     .map(
@@ -570,18 +554,6 @@ export function SwapForm({
     setFromToken(selected.token);
     setFromBalance(selected.formattedBalance);
     setFromTokenError('');
-
-    track({
-      userJourney: UserJourney.SWAP,
-      screen: 'SwapCoins',
-      control: 'SelectFrom',
-      controlType: 'Select',
-      extras: {
-        fromBalance: selected.formattedBalance,
-        fromToken: selected.token,
-        fromAmount,
-      },
-    });
   }, [toToken]);
 
   const onFromTextInputFocus = () => {
@@ -599,18 +571,6 @@ export function SwapForm({
       setLoading(true);
     }
     setFromAmount(value);
-
-    track({
-      userJourney: UserJourney.SWAP,
-      screen: 'SwapCoins',
-      control: 'InputFrom',
-      controlType: 'TextInput',
-      extras: {
-        fromBalance,
-        fromToken,
-        fromAmount: value,
-      },
-    });
   };
 
   const textInputMaxButtonClick = () => {
@@ -629,16 +589,6 @@ export function SwapForm({
     } else {
       setFromAmount(fromBalanceTruncated);
     }
-    track({
-      userJourney: UserJourney.SWAP,
-      screen: 'SwapCoins',
-      control: 'MaxFrom',
-      controlType: 'Button',
-      extras: {
-        fromBalance,
-        fromBalanceTruncated,
-      },
-    });
   };
 
   // ------------//
@@ -654,17 +604,6 @@ export function SwapForm({
 
     setToToken(selected);
     setToTokenError('');
-
-    track({
-      userJourney: UserJourney.SWAP,
-      screen: 'SwapCoins',
-      control: 'SelectTo',
-      controlType: 'Select',
-      extras: {
-        toToken: selected,
-        toAmount,
-      },
-    });
   }, [fromToken]);
 
   const onToTextInputFocus = () => {
@@ -683,23 +622,11 @@ export function SwapForm({
       setLoading(true);
     }
     setToAmount(value);
-
-    track({
-      userJourney: UserJourney.SWAP,
-      screen: 'SwapCoins',
-      control: 'InputTo',
-      controlType: 'TextInput',
-      extras: {
-        toToken,
-        toAmount: value,
-      },
-    });
   };
 
   const reverseTokens = () => {
     const currentFromToken = fromToken;
     const currentToToken = toToken;
-    const currentFromAmount = fromAmount;
     const currentToAmount = toAmount;
 
     setReverseRotation((prev) => (prev === 0 ? 180 : 0));
@@ -732,20 +659,6 @@ export function SwapForm({
       setToToken(currentFromToken);
       setToAmount(fromAmount);
     }
-
-    track({
-      userJourney: UserJourney.SWAP,
-      screen: 'SwapCoins',
-      control: 'Flip',
-      controlType: 'Button',
-      extras: {
-        fromToken: currentFromToken,
-        fromAmount: currentFromAmount,
-        toToken: currentToToken,
-        toAmount: currentToAmount,
-        isCurrentToTokenInSellList,
-      },
-    });
   };
 
   const openNotEnoughImxDrawer = () => {
@@ -778,24 +691,6 @@ export function SwapForm({
       || validateToTokenError
       || (validateFromAmountError && direction === SwapDirection.FROM)
       || (validateToAmountError && direction === SwapDirection.TO)) isSwapFormValid = false;
-
-    track({
-      userJourney: UserJourney.SWAP,
-      screen: 'SwapCoins',
-      control: 'FormValid',
-      controlType: 'Button',
-      extras: {
-        isSwapFormValid,
-        swapFromAddress: fromToken?.address,
-        swapFromAmount: fromAmount,
-        swapFromTokenSymbol: fromToken?.symbol,
-        swapToAddress: toToken?.address,
-        swapToAmount: toAmount,
-        swapToTokenSymbol: toToken?.symbol,
-        autoProceed,
-      },
-    });
-
     return isSwapFormValid;
   };
 
@@ -824,26 +719,7 @@ export function SwapForm({
     if (!quote) return;
 
     const transaction = quote;
-    const isValid = SwapFormValidator();
-    // Tracking swap from data here and is valid or not to understand behaviour
-    track({
-      userJourney: UserJourney.SWAP,
-      screen: 'SwapCoins',
-      control: 'Swap',
-      controlType: 'Button',
-      extras: {
-        swapFromAddress: fromToken?.address,
-        swapFromAmount: fromAmount,
-        swapFromTokenSymbol: fromToken?.symbol,
-        swapToAddress: toToken?.address,
-        swapToAmount: toAmount,
-        swapToTokenSymbol: toToken?.symbol,
-        isSwapFormValid: isValid,
-        hasFundsForGas: !insufficientFundsForGas,
-        autoProceed,
-      },
-    });
-    if (!isValid) return;
+    const isValid = SwapFormValidator(); if (!isValid) return;
     if (!checkout || !provider || !transaction) return;
     if (insufficientFundsForGas) {
       cancelAutoProceed();
@@ -1006,9 +882,6 @@ export function SwapForm({
                 : undefined}
               coinSelectorHeading={t('views.SWAP.swapForm.from.selectorTitle')}
               defaultTokenImage={defaultTokenImage}
-              control="FromToken"
-              userJourney={UserJourney.SWAP}
-              screen="SwapCoins"
               environment={checkout?.config.environment}
               theme={theme}
               themeOverrides={themeOverrides}
@@ -1085,9 +958,6 @@ export function SwapForm({
                 : undefined}
               coinSelectorHeading={t('views.SWAP.swapForm.to.selectorTitle')}
               defaultTokenImage={defaultTokenImage}
-              control="ToToken"
-              userJourney={UserJourney.SWAP}
-              screen="SwapCoins"
               environment={checkout?.config.environment}
               theme={theme}
               themeOverrides={themeOverrides}
@@ -1098,14 +968,6 @@ export function SwapForm({
           feeFiatValue={feeFiatValue}
           gasFeeToken={gasFeeToken}
           fees={formattedFees}
-          onFeesClick={() => {
-            track({
-              userJourney: UserJourney.SWAP,
-              screen: 'SwapCoins',
-              control: 'ViewFees',
-              controlType: 'Button',
-            });
-          }}
           sx={{
             paddingBottom: '0',
           }}