refactor(checkout-widgets): remove Segment react-analytics

packages/checkout/widgets-lib/package.json

@@ -24,7 +24,6 @@
     "@imtbl/cryptofiat": "workspace:*",
     "@imtbl/dex-sdk": "workspace:*",
     "@imtbl/passport": "workspace:*",
-    "@imtbl/react-analytics": "0.3.4-alpha",
     "@rive-app/react-canvas-lite": "^4.9.0",
     "@walletconnect/ethereum-provider": "^2.11.1",
     "@walletconnect/modal": "^2.6.2",
@@ -51,7 +50,6 @@
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-replace": "catalog:toolchain",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@segment/analytics-next": "^1.53.2",
     "@swc/core": "catalog:toolchain",
     "@swc/jest": "catalog:toolchain",
     "@testing-library/jest-dom": "catalog:testing",

packages/checkout/widgets-lib/src/components/ConnectLoader/ConnectLoader.tsx

@@ -22,8 +22,6 @@
 import ConnectWidget from '../../widgets/connect/ConnectWidget';
 import { ConnectWidgetViews } from '../../context/view-context/ConnectViewContextTypes';
 import { StrongCheckoutWidgetsConfig } from '../../lib/withDefaultWidgetConfig';
-import { useAnalytics } from '../../context/analytics-provider/SegmentAnalyticsProvider';
-import { identifyUser } from '../../lib/analytics/identifyUser';
 
 export interface ConnectLoaderProps {
   children?: React.ReactNode;
@@ -77,9 +75,6 @@
   const {
     connectionStatus, deepLink, provider,
   } = connectLoaderState;
-
-  const { identify, user } = useAnalytics();
-
   const hasNoWalletProviderNameAndNoBrowserProvider = (localProvider?: WrappedBrowserProvider): boolean => {
     if (!walletProviderName && !localProvider) {
       connectLoaderDispatch({
@@ -198,7 +193,7 @@
           // If unsupported network or current network is not in the allowed chains
           // then show the switch network screen
           if ((isCheckNetworkEnabled === undefined || isCheckNetworkEnabled)
               && (!allowedChains.includes(currentChainId) || !currentNetworkInfo.isSupported)) {
             connectLoaderDispatch({
               payload: {
                 type: ConnectLoaderActions.UPDATE_CONNECTION_STATUS,
@@ -208,20 +203,9 @@
             });
             return;
           }
         } catch (err) {
           return;
         }
-
-        try {
-          // WT-1698 Analytics - Identify user here then progress to widget
-          // TODO: Identify user should be separated out into a use Effect with only the provider (from connect loader state) as dependency
-          const userData = user ? await user() : undefined;
-          const anonymousId = userData?.anonymousId();
-          await identifyUser(identify, browserProvider!, { anonymousId });
-        } catch (err) {
-          return;
-        }
-
         // The user is connected and the widget will be shown
         connectLoaderDispatch({
           payload: {

packages/checkout/widgets-lib/src/components/FormComponents/SelectForm/SelectForm.tsx

@@ -8,7 +8,6 @@ import { TokenImage } from '../../TokenImage/TokenImage';
 import { FormControlWrapper } from '../FormControlWrapper/FormControlWrapper';
 import { CoinSelector } from '../../CoinSelector/CoinSelector';
 import { CoinSelectorOptionProps } from '../../CoinSelector/CoinSelectorOption';
-import { useAnalytics, UserJourney } from '../../../context/analytics-provider/SegmentAnalyticsProvider';
 
 interface SelectFormProps {
   testId: string;
@@ -21,11 +20,7 @@ interface SelectFormProps {
   disabled?: boolean;
   onSelectChange: (value: string) => void;
   coinSelectorHeading: string;
-  defaultTokenImage: string;
-  userJourney: UserJourney;
-  screen: string;
-  control: string;
-  environment?: Environment;
+  defaultTokenImage: string;environment?: Environment;
   theme: WidgetTheme,
   themeOverrides: ThemeOverrides,
 }
@@ -42,14 +37,10 @@ export function SelectForm({
   selectedOption,
   coinSelectorHeading,
   defaultTokenImage,
-  userJourney,
-  screen,
-  control,
   environment = Environment.PRODUCTION,
   theme,
   themeOverrides,
 }: SelectFormProps) {
-  const { track } = useAnalytics();
   const [coinSelectorOpen, setCoinSelectorOpen] = useState<boolean>(false);
   const coinSelectorOptions = useMemo(() => options.map((option) => ({
     ...option,
@@ -71,14 +62,7 @@ export function SelectForm({
 
   const openCoinSelector = useCallback(() => {
     setCoinSelectorOpen(true);
-    track({
-      userJourney,
-      screen,
-      control,
-      controlType: 'Select',
-      action: 'Opened',
-    });
-  }, [setCoinSelectorOpen, track]);
+  }, [setCoinSelectorOpen]);
 
   return (
     <Box>

packages/checkout/widgets-lib/src/components/FormComponents/SelectInput/SelectInput.tsx

@@ -9,7 +9,6 @@ import {
 import { SelectForm } from '../SelectForm/SelectForm';
 import { InputMode, TextInputForm, TextInputType } from '../TextInputForm/TextInputForm';
 import { CoinSelectorOptionProps } from '../../CoinSelector/CoinSelectorOption';
-import { UserJourney } from '../../../context/analytics-provider/SegmentAnalyticsProvider';
 
 interface SelectInputProps {
   testId: string;
@@ -34,11 +33,7 @@ interface SelectInputProps {
   textInputMaxButtonClick?: () => void;
   onSelectChange: (value: OptionKey) => void;
   selectedOption?: OptionKey;
-  defaultTokenImage: string;
-  userJourney: UserJourney;
-  screen: string;
-  control: string;
-  environment?: Environment;
+  defaultTokenImage: string;environment?: Environment;
   theme: WidgetTheme;
   themeOverrides: ThemeOverrides;
 }
@@ -67,9 +62,6 @@ export function SelectInput({
   selectedOption,
   coinSelectorHeading,
   defaultTokenImage,
-  userJourney,
-  screen,
-  control,
   environment,
   theme,
   themeOverrides,
@@ -88,9 +80,6 @@ export function SelectInput({
           selectedOption={selectedOption}
           coinSelectorHeading={coinSelectorHeading}
           defaultTokenImage={defaultTokenImage}
-          control={control}
-          userJourney={userJourney}
-          screen={screen}
           environment={environment}
           theme={theme}
           themeOverrides={themeOverrides}

packages/checkout/widgets-lib/src/components/RouteOptionsDrawer/RouteOptionsDrawer.tsx

@@ -2,11 +2,10 @@ import {
   Drawer, EllipsizedText, MenuItem,
 } from '@biom3/react';
 import { motion } from 'framer-motion';
-import { useContext, useEffect, useRef } from 'react';
+import { useContext, useRef } from 'react';
 
 import { Checkout } from '@imtbl/checkout-sdk';
 import { useTranslation } from 'react-i18next';
-import { useAnalytics, UserJourney } from '../../context/analytics-provider/SegmentAnalyticsProvider';
 import { useProvidersContext } from '../../context/providers-context/ProvidersContext';
 import { listVariants } from '../../lib/animation/listAnimation';
 import { RouteData } from '../../lib/squid/types';
@@ -42,10 +41,8 @@ export function RouteOptionsDrawer({
   insufficientBalance,
 }: OptionsDrawerProps) {
   const { t } = useTranslation();
-  const { track } = useAnalytics();
-
   const {
-    addTokensState: { id, chains },
+    addTokensState: { chains },
   } = useContext(AddTokensContext);
 
   const {
@@ -59,27 +56,6 @@ export function RouteOptionsDrawer({
     onRouteClick(route);
   };
 
-  useEffect(() => {
-    if (!visible) {
-      return;
-    }
-
-    track({
-      userJourney: UserJourney.ADD_TOKENS,
-      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"

packages/checkout/widgets-lib/src/components/Transactions/ChangeWallet.tsx

@@ -5,11 +5,7 @@ import { useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { BridgeContext } from '../../widgets/bridge/context/BridgeContext';
 import { isWalletConnectProvider } from '../../lib/provider';
-import {
-  UserJourney,
-  useAnalytics,
-} from '../../context/analytics-provider/SegmentAnalyticsProvider';
-import { BridgeWidgetViews } from '../../context/view-context/BridgeViewContextTypes';
+import { } from '../../context/view-context/BridgeViewContextTypes';
 import { useWalletConnect } from '../../lib/hooks/useWalletConnect';
 import {
   headingStyles, rawImageStyle, wcStickerLogoStyles, wcWalletLogoStyles, wcWalletLogoWrapperStyles,
@@ -30,17 +26,10 @@ export function ChangeWallet({ onChangeWalletClick }: ChangeWalletProps) {
   );
   const [isWalletConnect, setIsWalletConnect] = useState<boolean>(false);
   const { isWalletConnectEnabled, getWalletLogoUrl } = useWalletConnect();
-  const { track } = useAnalytics();
   const walletAddress = from?.walletAddress || '';
   const walletProviderInfo = from?.walletProviderInfo;
 
   const handleChangeWalletClick = () => {
-    track({
-      userJourney: UserJourney.BRIDGE,
-      screen: BridgeWidgetViews.TRANSACTIONS,
-      controlType: 'Button',
-      control: 'Pressed',
-    });
     onChangeWalletClick();
   };
 

packages/checkout/widgets-lib/src/components/Transactions/ClaimWithdrawalInProgress.tsx

@@ -1,7 +1,6 @@
 import { useContext, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { TransactionResponse } from 'ethers';
-import { UserJourney, useAnalytics } from '../../context/analytics-provider/SegmentAnalyticsProvider';
 import { ViewActions, ViewContext } from '../../context/view-context/ViewContext';
 import { BridgeWidgetViews } from '../../context/view-context/BridgeViewContextTypes';
 import { LoadingView } from '../../views/loading/LoadingView';
@@ -13,16 +12,6 @@ interface ClaimWithdrawalInProgressProps {
 export function ClaimWithdrawalInProgress({ transactionResponse }: ClaimWithdrawalInProgressProps) {
   const { t } = useTranslation();
   const { viewDispatch } = useContext(ViewContext);
-
-  const { page } = useAnalytics();
-
-  useEffect(() => {
-    page({
-      userJourney: UserJourney.BRIDGE,
-      screen: 'ClaimWithdrawalInProgress',
-    });
-  }, []);
-
   useEffect(() => {
     if (!transactionResponse) return;
 

packages/checkout/widgets-lib/src/components/Transactions/NoTransactions.tsx

@@ -4,7 +4,6 @@ import {
 import { Checkout } from '@imtbl/checkout-sdk';
 import { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { UserJourney, useAnalytics } from '../../context/analytics-provider/SegmentAnalyticsProvider';
 import { PASSPORT_URL } from '../../lib';
 import {
   noTransactionsBodyStyle, noTransactionsContainerStyle, passportBodyStyle, containerStyles,
@@ -24,22 +23,13 @@ export function NoTransactions(
     changeWallet,
   }: NoTransactionsProps,
 ) {
-  const { page } = useAnalytics();
   const { t } = useTranslation();
   const [passportLink, setPassportLink] = useState('');
 
   useEffect(() => {
     if (!checkout) return;
     setPassportLink(PASSPORT_URL[checkout.config.environment]);
   }, [checkout]);
-
-  useEffect(() => {
-    page({
-      userJourney: UserJourney.BRIDGE,
-      screen: 'NoTransactions',
-    });
-  }, []);
-
   return (
     <Box sx={containerStyles}>
       <ChangeWallet onChangeWalletClick={changeWallet} />

packages/checkout/widgets-lib/src/components/Transactions/TransactionItemWithdrawPending.tsx

@@ -10,7 +10,6 @@ import {
 import { useContext, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Environment } from '@imtbl/config';
-import { UserJourney, useAnalytics } from '../../context/analytics-provider/SegmentAnalyticsProvider';
 import { Transaction, TransactionStatus } from '../../lib/clients/checkoutApiType';
 import { BridgeWidgetViews } from '../../context/view-context/BridgeViewContextTypes';
 import { ViewActions, ViewContext } from '../../context/view-context/ViewContext';
@@ -37,9 +36,7 @@ export function TransactionItemWithdrawPending({
   defaultTokenImage,
   environment,
 }: TransactionItemWithdrawPendingProps) {
-  const { viewDispatch } = useContext(ViewContext);
-  const { track } = useAnalytics();
-  const translation = useTranslation();
+  const { viewDispatch } = useContext(ViewContext); const translation = useTranslation();
   const dateNowUnixMs = useMemo(() => new Date().getTime(), []);
   const withdrawalReadyDate = useMemo(
     () => (transaction.details.current_status.withdrawal_ready_at
@@ -141,15 +138,6 @@ export function TransactionItemWithdrawPending({
           borderTopRightRadius: '0',
           borderTopLeftRadius: '0',
         }}
-        onExpandChange={
-          (expanded) => expanded
-            && track({
-              userJourney: UserJourney.BRIDGE,
-              screen: 'TransactionItem',
-              control: 'Accordion',
-              controlType: 'Button',
-            })
-        }
       >
         <Accordion.TargetLeftSlot sx={{ pr: 'base.spacing.x2' }}>
           <MenuItem size="xSmall">

packages/checkout/widgets-lib/src/components/Transactions/Transactions.tsx

@@ -34,10 +34,6 @@ import {
   CryptoFiatActions,
   CryptoFiatContext,
 } from '../../context/crypto-fiat-context/CryptoFiatContext';
-import {
-  UserJourney,
-  useAnalytics,
-} from '../../context/analytics-provider/SegmentAnalyticsProvider';
 import {
   BridgeActions,
   BridgeContext,
@@ -111,11 +107,7 @@ export function Transactions({
   const {
     bridgeDispatch,
     bridgeState: { checkout, from, tokenBridge },
-  } = useContext(BridgeContext);
-  const { page } = useAnalytics();
-  const { t } = useTranslation();
-  const { track } = useAnalytics();
-
+  } = useContext(BridgeContext); const { t } = useTranslation();
   const [loading, setLoading] = useState(true);
   const [knownTokenMap, setKnownTokenMap] = useState<
   KnownNetworkMap | undefined
@@ -269,16 +261,6 @@ export function Transactions({
 
   const handleWalletChange = useCallback(
     async (event: WalletChangeEvent) => {
-      track({
-        userJourney: UserJourney.BRIDGE,
-        screen: 'EmptyStateNotConnected',
-        control: 'WalletProvider',
-        controlType: 'Select',
-        extras: {
-          walletProviderName: event.providerDetail.info.name,
-        },
-      });
-
       try {
         let changeAccount = false;
         if (event.providerDetail.info.rdns === WalletProviderRdns.METAMASK) {
@@ -311,7 +293,7 @@ export function Transactions({
         setShowWalletDrawer(false);
       }
     },
-    [checkout, bridgeDispatch, track],
+    [checkout, bridgeDispatch],
   );
 
   const handleBackButtonClick = () => {
@@ -384,14 +366,6 @@ export function Transactions({
       setLoading(false);
     })();
   }, [from, checkout, fetchData]);
-
-  useEffect(() => {
-    page({
-      userJourney: UserJourney.BRIDGE,
-      screen: 'Transactions',
-    });
-  }, [page]);
-
   return (
     <SimpleLayout
       testId="bridge-view"