@imtbl/checkout-widgets 2.24.8 → 2.24.9-1

package/src/widgets/purchase/components/PurchaseConnectWalletDrawer.tsx

@@ -12,12 +12,10 @@ import { MenuItemProps } from '@biom3/react';
 import { UnableToConnectDrawer } from '../../../components/UnableToConnectDrawer/UnableToConnectDrawer';
 import { WalletDrawer } from '../../../components/WalletDrawer/WalletDrawer';
 import { WalletChangeEvent } from '../../../components/WalletDrawer/WalletDrawerEvents';
-import { useAnalytics, UserJourney } from '../../../context/analytics-provider/SegmentAnalyticsProvider';
 import { useProvidersContext, ProvidersContextActions } from '../../../context/providers-context/ProvidersContext';
-import { identifyUser } from '../../../lib/analytics/identifyUser';
 import { ConnectEIP6963ProviderError, connectEIP6963Provider } from '../../../lib/connectEIP6963Provider';
-import { getProviderSlugFromRdns } from '../../../lib/provider';
-import { removeSpace } from '../../../lib/utils';
+import { } from '../../../lib/provider';
+import { } from '../../../lib/utils';
 
 type PurchaseConnectWalletDrawerProps = {
   heading: string;
@@ -28,7 +26,6 @@ type PurchaseConnectWalletDrawerProps = {
     providerInfo: EIP6963ProviderInfo
   ) => void;
   onError?: (errorType: ConnectEIP6963ProviderError) => void;
-  providerType: 'from' | 'to';
   walletOptions: EIP6963ProviderDetail[];
   bottomSlot?: ReactNode;
   menuItemSize?: MenuItemProps['size'];
@@ -36,7 +33,6 @@ type PurchaseConnectWalletDrawerProps = {
     label: string;
     rdns: string;
   }[];
-  shouldIdentifyUser?: boolean;
   drawerBackground: string | undefined;
 };
 
@@ -46,21 +42,16 @@ export function PurchaseConnectWalletDrawer({
   onClose,
   onConnect,
   onError,
-  providerType,
   walletOptions,
   bottomSlot,
   menuItemSize = 'small',
   disabledOptions = [],
-  shouldIdentifyUser = true,
   drawerBackground,
 }: PurchaseConnectWalletDrawerProps) {
   const {
     providersState: { checkout },
     providersDispatch,
   } = useProvidersContext();
-
-  const { identify, track, user } = useAnalytics();
-
   const prevWalletChangeEvent = useRef<WalletChangeEvent | undefined>();
 
   const [showUnableToConnectDrawer, setShowUnableToConnectDrawer] = useState(false);
@@ -94,20 +85,6 @@ export function PurchaseConnectWalletDrawer({
   const handleWalletConnection = async (event: WalletChangeEvent) => {
     const { providerDetail } = event;
     const { info } = providerDetail;
-
-    // Trigger analytics connect wallet, menu item, with wallet details
-    track({
-      userJourney: UserJourney.CONNECT,
-      screen: 'ConnectWallet',
-      control: removeSpace(info.name),
-      controlType: 'MenuItem',
-      extras: {
-        providerType,
-        wallet: getProviderSlugFromRdns(info.rdns),
-        walletRdns: info.rdns,
-      },
-    });
-
     if (info.rdns === WalletProviderRdns.PASSPORT) {
       const { isConnected } = await checkout.checkIsWalletConnected({
         provider: new WrappedBrowserProvider(providerDetail.provider!),
@@ -126,15 +103,6 @@ export function PurchaseConnectWalletDrawer({
         checkout,
         true,
       );
-
-      // Identify connected wallet, retaining current anonymousId
-      if (shouldIdentifyUser) {
-        const userData = user ? await user() : undefined;
-        const anonymousId = userData?.anonymousId();
-
-        await identifyUser(identify, provider, { anonymousId });
-      }
-
       // Store selected provider as fromProvider in context
       address = await setProviderInContext(provider, providerDetail.info);
 

package/src/widgets/purchase/components/PurchaseDeliverToWalletDrawer.tsx

@@ -38,7 +38,6 @@ export function PurchaseDeliverToWalletDrawer({
       heading={t('drawers.wallet.deliverToHeading')}
       visible={visible}
       onClose={onClose}
-      providerType="to"
       walletOptions={walletOptions}
       onConnect={handleOnConnect}
       drawerBackground={drawerBackground}

package/src/widgets/purchase/components/PurchasePayWithWalletDrawer.tsx

@@ -75,12 +75,10 @@ export function PurchasePayWithWalletDrawer({
       }
       visible={visible}
       onClose={onClose}
-      providerType="from"
       walletOptions={walletOptions}
       disabledOptions={disabledOptions}
       bottomSlot={payWithCardItem}
       onConnect={handleOnConnect}
-      shouldIdentifyUser={false}
       drawerBackground={drawerBackground}
     />
   );

package/src/widgets/purchase/components/PurchaseRouteOptionsDrawer/RouteOptionsDrawer.tsx

@@ -3,10 +3,9 @@ import {
 } from '@biom3/react';
 import { motion } from 'framer-motion';
 import {
-  useContext, useEffect, useRef, useState,
+  useRef, useState,
 } from 'react';
 import { Checkout } from '@imtbl/checkout-sdk';
-import { useAnalytics, UserJourney } from '../../../../context/analytics-provider/SegmentAnalyticsProvider';
 import { useProvidersContext } from '../../../../context/providers-context/ProvidersContext';
 import { listVariants } from '../../../../lib/animation/listAnimation';
 import { Chain, RouteData } from '../../../../lib/squid/types';
@@ -14,7 +13,6 @@ import {
   DirectCryptoPayData, DirectCryptoPayOptionType, FiatOptionType, SquidRouteOptionType,
 } from '../../types';
 import { RouteOptions } from './RouteOptions';
-import { PurchaseContext } from '../../context/PurchaseContext';
 
 type OptionsDrawerProps = {
   checkout: Checkout;
@@ -53,12 +51,6 @@ export function RouteOptionsDrawer({
   insufficientBalance,
   directCryptoPayRoutes,
 }: OptionsDrawerProps) {
-  const { track } = useAnalytics();
-
-  const {
-    purchaseState: { id },
-  } = useContext(PurchaseContext);
-
   const {
     providersState: { fromProviderInfo, fromAddress },
   } = useProvidersContext();
@@ -84,27 +76,6 @@ export function RouteOptionsDrawer({
     onChangeWalletClick();
   };
 
-  useEffect(() => {
-    if (!visible) {
-      return;
-    }
-
-    track({
-      userJourney: UserJourney.PURCHASE,
-      screen: 'InputScreen',
-      control: 'RoutesMenu',
-      controlType: 'MenuItem',
-      action: 'Opened',
-      extras: {
-        contextId: id,
-        showOnrampOption: Boolean(showOnrampOption),
-        showSwapOption: Boolean(showSwapOption),
-        insufficientBalance: Boolean(insufficientBalance),
-        routesAvailable: routes?.length ?? 0,
-      },
-    });
-  }, [visible]);
-
   return (
     <Drawer
       size="full"

package/src/widgets/purchase/components/WithCard.tsx

@@ -1,6 +1,5 @@
 import { useContext, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { WalletProviderRdns } from '@imtbl/checkout-sdk';
 import { PurchaseContext } from '../context/PurchaseContext';
 import { TransakIframe } from '../../../components/Transak/TransakIframe';
 import { TransakNFTData } from '../../../components/Transak/TransakTypes';
@@ -36,7 +35,6 @@ export function WithCard(props: WithCardProps) {
 
   const {
     providersState: {
-      toProviderInfo,
       toAddress,
       checkout,
     },
@@ -44,7 +42,6 @@ export function WithCard(props: WithCardProps) {
 
   const recipientEmail = '';
   const recipientAddress = toAddress || '';
-  const isPassportWallet = toProviderInfo?.rdns === WalletProviderRdns.PASSPORT;
   const excludeFiatCurrencies = [];
   const { environment } = checkout.config;
   const executeTxn = signResponse?.transactions.find((txn) => txn.methodCall.startsWith('execute'));
@@ -73,7 +70,6 @@ export function WithCard(props: WithCardProps) {
       type="nft-checkout"
       email={recipientEmail}
       walletAddress={recipientAddress}
-      isPassportWallet={isPassportWallet}
       exchangeScreenTitle={t('views.PAY_WITH_CARD.screenTitle')}
       nftData={nftData}
       calldata={executeTxn.rawData}

package/src/widgets/purchase/views/Purchase.tsx

@@ -14,7 +14,6 @@ import {
 } from 'react';
 import { TokenBalance } from '@0xsquid/sdk/dist/types';
 import { SimpleLayout } from '../../../components/SimpleLayout/SimpleLayout';
-import { UserJourney } from '../../../context/analytics-provider/SegmentAnalyticsProvider';
 import { CryptoFiatContext, CryptoFiatActions } from '../../../context/crypto-fiat-context/CryptoFiatContext';
 import { EventTargetContext } from '../../../context/event-target-context/EventTargetContext';
 import { useProvidersContext } from '../../../context/providers-context/ProvidersContext';
@@ -124,7 +123,7 @@ export function Purchase({
 
   const {
     getAllowance, approve, execute, getStatus,
-  } = useExecute(UserJourney.PURCHASE, (err) => {
+  } = useExecute('Purchase', (err) => {
     // eslint-disable-next-line no-console
     console.log('useExecute err', err);
   });

package/src/widgets/sale/SaleWidget.tsx

@@ -33,7 +33,6 @@ import { PaymentMethods } from './views/PaymentMethods';
 import { SaleErrorView } from './views/SaleErrorView';
 import { CryptoFiatProvider } from '../../context/crypto-fiat-context/CryptoFiatProvider';
 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 { OrderSummary } from './views/OrderSummary';
@@ -171,7 +170,6 @@ export default function SaleWidget(props: SaleWidgetProps) {
           )}
           {viewState.view.type === SharedViews.TOP_UP_VIEW && (
             <TopUpView
-              analytics={{ userJourney: UserJourney.SALE }}
               widgetEvent={IMTBLWidgetEvents.IMTBL_SALE_WIDGET_EVENT}
               checkout={checkout}
               provider={provider}

package/src/widgets/sale/SaleWidgetRoot.tsx

@@ -17,7 +17,6 @@ import {
 } from '../../components/ConnectLoader/ConnectLoader';
 import { 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 { sendSaleWidgetCloseEvent } from './SaleWidgetEvents';
@@ -131,46 +130,46 @@ export class Sale extends Base<WidgetType.SALE> {
 
     this.reactRoot.render(
       <React.StrictMode>
-        <CustomAnalyticsProvider checkout={this.checkout}>
-          <ThemeProvider id="sale-container" config={config}>
-            <HandoverProvider>
-              <ConnectLoader
-                widgetConfig={config}
-                params={connectLoaderParams}
-                closeEvent={() => {
-                  sendSaleWidgetCloseEvent(window);
-                }}
-              >
-                <Suspense
-                  fallback={
-                    <LoadingView loadingText={t('views.LOADING_VIEW.text')} />
+
+        <ThemeProvider id="sale-container" config={config}>
+          <HandoverProvider>
+            <ConnectLoader
+              widgetConfig={config}
+              params={connectLoaderParams}
+              closeEvent={() => {
+                sendSaleWidgetCloseEvent(window);
+              }}
+            >
+              <Suspense
+                fallback={
+                  <LoadingView loadingText={t('views.LOADING_VIEW.text')} />
                   }
-                >
-                  <SaleWidget
-                    config={config}
-                    items={this.parameters.items!}
-                    language={this.parameters.language as WidgetLanguage}
-                    environmentId={this.parameters.environmentId!}
-                    collectionName={this.parameters.collectionName!}
-                    excludePaymentTypes={this.parameters.excludePaymentTypes!}
-                    excludeFiatCurrencies={
+              >
+                <SaleWidget
+                  config={config}
+                  items={this.parameters.items!}
+                  language={this.parameters.language as WidgetLanguage}
+                  environmentId={this.parameters.environmentId!}
+                  collectionName={this.parameters.collectionName!}
+                  excludePaymentTypes={this.parameters.excludePaymentTypes!}
+                  excludeFiatCurrencies={
                       this.parameters.excludeFiatCurrencies!
                     }
-                    preferredCurrency={this.parameters.preferredCurrency!}
-                    customOrderData={this.parameters.customOrderData!}
-                    hideExcludedPaymentTypes={
+                  preferredCurrency={this.parameters.preferredCurrency!}
+                  customOrderData={this.parameters.customOrderData!}
+                  hideExcludedPaymentTypes={
                       this.properties?.config?.hideExcludedPaymentTypes ?? false
                     }
-                    waitFulfillmentSettlements={
+                  waitFulfillmentSettlements={
                       this.properties?.config?.waitFulfillmentSettlements
                       ?? true
                     }
-                  />
-                </Suspense>
-              </ConnectLoader>
-            </HandoverProvider>
-          </ThemeProvider>
-        </CustomAnalyticsProvider>
+                />
+              </Suspense>
+            </ConnectLoader>
+          </HandoverProvider>
+        </ThemeProvider>
+
       </React.StrictMode>,
     );
   }

package/src/widgets/sale/components/OrderReview.tsx

@@ -10,8 +10,7 @@ import {
   TransactionRequirement,
 } from '@imtbl/checkout-sdk';
 import {
-  OrderSummarySubViews,
-  SaleWidgetViews,
+
 } from '../../../context/view-context/SaleViewContextTypes';
 import { calculateCryptoToFiat, tokenValueFormat } from '../../../lib/utils';
 import { HeaderNavigation } from '../../../components/Header/HeaderNavigation';
@@ -29,8 +28,6 @@ import {
 } from '../functions/fundingBalanceFees';
 import { FeesDisplay, OrderFees } from './OrderFees';
 import { useSaleContext } from '../context/SaleContextProvider';
-import { getPaymentTokenDetails } from '../utils/analytics';
-import { useMount } from '../../../hooks/useMount';
 
 type OrderReviewProps = {
   collectionName: string;
@@ -67,7 +64,7 @@ export function OrderReview({
     selectedCurrency,
     config: { theme, environment },
   } = useSaleContext();
-  const { sendSelectedPaymentToken, sendViewFeesEvent, sendPageView } = useSaleEvent();
+  const { sendSelectedPaymentToken } = useSaleEvent();
 
   const [showCoinsDrawer, setShowCoinsDrawer] = useState(false);
   const [selectedCurrencyIndex, setSelectedCurrencyIndex] = useState(0);
@@ -92,7 +89,6 @@ export function OrderReview({
     setSelectedCurrencyIndex(selectedIndex);
 
     sendSelectedPaymentToken(
-      OrderSummarySubViews.REVIEW_ORDER,
       fundingBalances[selectedIndex],
       conversions,
     );
@@ -175,27 +171,6 @@ export function OrderReview({
     });
   }, [gasFees, fundingBalance, conversions]);
 
-  // Trigger page loaded event
-  useMount(
-    () => {
-      const tokens = fundingBalances.map((fb) => getPaymentTokenDetails(fb, conversions));
-      sendPageView(SaleWidgetViews.ORDER_SUMMARY, {
-        subView: OrderSummarySubViews.REVIEW_ORDER,
-        tokens,
-        items,
-        collectionName,
-      });
-      // checkoutPrimarySaleOrderSummaryViewed
-    },
-    () => Boolean(
-      items.length
-          && fundingBalances.length
-          && !loadingBalances
-          && conversions.size,
-    ),
-    [items, fundingBalances, loadingBalances, conversions],
-  );
-
   const multiple = items.length > 1;
   const withFees = transactionFees.formattedFees.length > 0;
 
@@ -257,7 +232,6 @@ export function OrderReview({
                   borderTopWidth: 'base.border.size.200',
                   borderTopColor: 'base.color.translucent.inverse.1000',
                 }}
-                onFeesClick={() => sendViewFeesEvent(SaleWidgetViews.ORDER_SUMMARY)}
               />
             )}
           </OrderItems>
@@ -274,7 +248,6 @@ export function OrderReview({
             borderTopWidth: 'base.border.size.100',
             borderTopColor: 'base.color.translucent.emphasis.400',
           }}
-          onFeesClick={() => sendViewFeesEvent(SaleWidgetViews.ORDER_SUMMARY)}
         />
       )}
       <SelectCoinDropdown

package/src/widgets/sale/components/WithCard.tsx

@@ -27,7 +27,6 @@ export function WithCard(props: WithCardProps) {
   const {
     recipientEmail,
     recipientAddress,
-    isPassportWallet,
     signResponse,
     goToErrorView,
     environment,
@@ -64,7 +63,6 @@ export function WithCard(props: WithCardProps) {
       type="nft-checkout"
       email={recipientEmail}
       walletAddress={recipientAddress}
-      isPassportWallet={isPassportWallet}
       exchangeScreenTitle={t('views.PAY_WITH_CARD.screenTitle')}
       nftData={nftData}
       calldata={executeTxn.rawData}

package/src/widgets/sale/hooks/useSaleEvents.ts

@@ -1,11 +1,5 @@
 import { useContext } from 'react';
-import { StandardAnalyticsActions } from '@imtbl/react-analytics';
 import { SalePaymentTypes } from '@imtbl/checkout-sdk';
-import {
-  UserJourney,
-  useAnalytics,
-  AnalyticsControlTypes,
-} from '../../../context/analytics-provider/SegmentAnalyticsProvider';
 import { EventTargetContext } from '../../../context/event-target-context/EventTargetContext';
 import {
   sendSaleFailedEvent,
@@ -15,75 +9,25 @@ import {
   sendSalePaymentMethodEvent,
   sendSalePaymentTokenEvent,
 } from '../SaleWidgetEvents';
-import { SaleWidgetViews } from '../../../context/view-context/SaleViewContextTypes';
 import { ExecutedTransaction, FundingBalance } from '../types';
 import { useSaleContext } from '../context/SaleContextProvider';
-import { toPascalCase, toStringifyTransactions } from '../functions/utils';
 import { getPaymentTokenDetails } from '../utils/analytics';
 
 export const useSaleEvent = () => {
-  const { track, page } = useAnalytics();
-  const {
-    recipientAddress: userId,
-    signResponse,
-    paymentMethod,
-  } = useSaleContext();
+  const { paymentMethod } = useSaleContext();
   const {
     eventTargetState: { eventTarget },
   } = useContext(EventTargetContext);
-  const defaultView = SaleWidgetViews.PAYMENT_METHODS;
-  const commonProps = {
-    location: 'web',
-    userJourney: UserJourney.SALE,
-  };
-  const userProps = {
-    userId,
-    paymentMethod,
-  };
-  const orderProps = {
-    amount: signResponse?.order.totalAmount,
-    currency: signResponse?.order.currency.name,
-  };
 
-  const sendCloseEvent = (
-    screen: string = defaultView,
-    controlType: AnalyticsControlTypes = 'Button',
-    action: StandardAnalyticsActions = 'Pressed',
-  ) => {
-    track({
-      ...commonProps,
-      screen: toPascalCase(screen),
-      control: 'Close',
-      controlType,
-      action,
-      extras: {
-        ...userProps,
-      },
-    });
+  const sendCloseEvent = () => {
     sendSaleWidgetCloseEvent(eventTarget);
   };
 
   const sendSuccessEvent = (
-    screen: string = defaultView,
     transactions: ExecutedTransaction[] = [],
     tokenIds: string[] = [],
     details: Record<string, any> = {},
   ) => {
-    track({
-      ...commonProps,
-      screen: toPascalCase(screen),
-      control: 'Success',
-      controlType: 'Event',
-      action: 'Succeeded',
-      extras: {
-        ...details,
-        ...userProps,
-        transactions: toStringifyTransactions(transactions),
-        ...orderProps,
-        paymentMethod,
-        tokenIds,
-      },
-    });
     sendSaleSuccessEvent(
       eventTarget,
       paymentMethod,
@@ -97,25 +41,8 @@ export const useSaleEvent = () => {
     reason: string,
     error: Record<string, unknown>,
     transactions: ExecutedTransaction[] = [],
-    screen: string = defaultView,
     details: Record<string, any> = {},
   ) => {
-    track({
-      ...commonProps,
-      screen: toPascalCase(screen || defaultView),
-      control: 'Fail',
-      controlType: 'Event',
-      action: 'Failed',
-      extras: {
-        ...details,
-        transactions: toStringifyTransactions(transactions),
-        ...error,
-        ...orderProps,
-        ...userProps,
-        paymentMethod,
-        reason,
-      },
-    });
     sendSaleFailedEvent(
       eventTarget,
       reason,
@@ -130,133 +57,24 @@ export const useSaleEvent = () => {
     sendSaleTransactionSuccessEvent(eventTarget, paymentMethod, [transaction]);
   };
 
-  const sendSelectedPaymentMethod = (
-    type: SalePaymentTypes,
-    screen: string,
-  ) => {
-    track({
-      ...commonProps,
-      screen: toPascalCase(screen),
-      control: 'Select',
-      controlType: 'MenuItem',
-      extras: {
-        paymentMethod: type,
-      },
-    });
+  const sendSelectedPaymentMethod = (type: SalePaymentTypes) => {
     sendSalePaymentMethodEvent(eventTarget, type);
   };
 
   const sendSelectedPaymentToken = (
-    screen: string,
     fundingBalance: FundingBalance,
     conversions: Map<string, number>,
   ) => {
     const details = getPaymentTokenDetails(fundingBalance, conversions);
-    track({
-      ...commonProps,
-      screen: toPascalCase(screen),
-      control: 'Select',
-      controlType: 'MenuItem',
-      extras: {
-        ...details,
-      },
-    });
     sendSalePaymentTokenEvent(eventTarget, details);
   };
 
-  const sendPageView = (screen: string, data?: Record<string, unknown>) => {
-    page({
-      ...commonProps,
-      screen: toPascalCase(screen),
-      action: 'Viewed',
-      extras: { ...data },
-    });
-  };
-
-  const sendOrderCreated = (
-    screen: string,
-    details: Record<string, unknown>,
-  ) => {
-    track({
-      ...commonProps,
-      screen: toPascalCase(screen),
-      control: 'OrderCreated',
-      controlType: 'Event',
-      extras: {
-        ...details,
-      },
-    });
-  };
-
-  const sendProceedToPay = (
-    screen: string,
-    fundingBalance: FundingBalance,
-    conversions: Map<string, number>,
-    controlType: AnalyticsControlTypes = 'Button',
-    action: StandardAnalyticsActions = 'Pressed',
-  ) => {
-    track({
-      ...commonProps,
-      screen: toPascalCase(screen),
-      control: 'ProceedToPay',
-      controlType,
-      action,
-      extras: {
-        ...userProps,
-        ...getPaymentTokenDetails(fundingBalance, conversions),
-      },
-    });
-  };
-
-  const sendInsufficientFunds = (
-    screen: string,
-    txRequirements: any,
-    controlType: AnalyticsControlTypes = 'Event',
-    action: StandardAnalyticsActions = 'Viewed',
-  ) => {
-    track({
-      ...commonProps,
-      screen: toPascalCase(screen),
-      control: 'InsufficientFunds',
-      controlType,
-      action,
-      extras: {
-        ...userProps,
-        ...txRequirements,
-      },
-    });
-  };
-
-  const sendViewFeesEvent = (
-    screen: string,
-    controlType: AnalyticsControlTypes = 'Button',
-    action: StandardAnalyticsActions = 'Pressed',
-  ) => {
-    track({
-      ...commonProps,
-      screen: toPascalCase(screen),
-      control: 'ViewFees',
-      controlType,
-      action,
-      extras: {
-        ...userProps,
-      },
-    });
-  };
-
   return {
-    track,
-    page,
-    sendPageView,
     sendCloseEvent,
     sendSuccessEvent,
     sendFailedEvent,
     sendTransactionSuccessEvent,
-    sendOrderCreated,
     sendSelectedPaymentMethod,
     sendSelectedPaymentToken,
-    sendProceedToPay,
-    sendViewFeesEvent,
-    sendInsufficientFunds,
   };
 };