From abc296a49b36292c5ecd37600c0ad0cffa2861c9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lu=C3=A3=20de=20Souza?= Date: Thu, 28 Nov 2024 16:20:52 +1100 Subject: [PATCH] fix: Ensure anonymousId is kept through every Segment identify call (#2429) --- .../src/components/ConnectLoader/ConnectLoader.tsx | 6 ++++-- .../widgets-lib/src/lib/analytics/identifyUser.ts | 1 + .../widgets-lib/src/widgets/connect/ConnectWidget.tsx | 8 ++++++-- .../src/widgets/connect/components/WalletList.tsx | 7 +++++-- .../src/widgets/connect/views/ReadyToConnect.tsx | 8 ++++++-- 5 files changed, 22 insertions(+), 8 deletions(-) diff --git a/packages/checkout/widgets-lib/src/components/ConnectLoader/ConnectLoader.tsx b/packages/checkout/widgets-lib/src/components/ConnectLoader/ConnectLoader.tsx index 45a7c7c50d..4d2545a164 100644 --- a/packages/checkout/widgets-lib/src/components/ConnectLoader/ConnectLoader.tsx +++ b/packages/checkout/widgets-lib/src/components/ConnectLoader/ConnectLoader.tsx @@ -77,7 +77,7 @@ export function ConnectLoader({ connectionStatus, deepLink, provider, } = connectLoaderState; - const { identify } = useAnalytics(); + const { identify, user } = useAnalytics(); const hasNoWalletProviderNameAndNoWeb3Provider = (localProvider?: Web3Provider): boolean => { if (!walletProviderName && !localProvider) { @@ -212,7 +212,9 @@ export function ConnectLoader({ 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 - await identifyUser(identify, web3Provider!); + const userData = user ? await user() : undefined; + const anonymousId = userData?.anonymousId(); + await identifyUser(identify, web3Provider!, { anonymousId }); } catch (err) { return; } diff --git a/packages/checkout/widgets-lib/src/lib/analytics/identifyUser.ts b/packages/checkout/widgets-lib/src/lib/analytics/identifyUser.ts index eb1256d885..1657ef9764 100644 --- a/packages/checkout/widgets-lib/src/lib/analytics/identifyUser.ts +++ b/packages/checkout/widgets-lib/src/lib/analytics/identifyUser.ts @@ -5,6 +5,7 @@ import { isMetaMaskProvider, isPassportProvider } from '../provider'; * identifyUser - function to identify a user by their wallet address and call the function to raise analytics * @param identify - The identify function from the useAnalytics() hook * @param provider - the Web3Provider used to find the user's walletAddress + * @param options - additional options to pass to the identify function */ export async function identifyUser( identify: (id: string, attributes: Record, options?: Record) => void, diff --git a/packages/checkout/widgets-lib/src/widgets/connect/ConnectWidget.tsx b/packages/checkout/widgets-lib/src/widgets/connect/ConnectWidget.tsx index 3041121b4b..edb1b559cd 100644 --- a/packages/checkout/widgets-lib/src/widgets/connect/ConnectWidget.tsx +++ b/packages/checkout/widgets-lib/src/widgets/connect/ConnectWidget.tsx @@ -110,7 +110,7 @@ export default function ConnectWidget({ [viewState, viewDispatch], ); - const { identify, page } = useAnalytics(); + const { identify, page, user } = useAnalytics(); let targetChain = targetChainId; if (!targetChain) { @@ -186,7 +186,11 @@ export default function ConnectWidget({ }); // Set up EIP-1193 provider event listeners for widget root instances addProviderListenersForWidgetRoot(provider); - await identifyUser(identify, provider); + + const userData = user ? await user() : undefined; + const anonymousId = userData?.anonymousId(); + + await identifyUser(identify, provider, { anonymousId }); sendProviderUpdatedEvent({ provider }); // Find the wallet provider info via injected with Passport and MetaMask fallbacks diff --git a/packages/checkout/widgets-lib/src/widgets/connect/components/WalletList.tsx b/packages/checkout/widgets-lib/src/widgets/connect/components/WalletList.tsx index b11fb61643..a65b4878e5 100644 --- a/packages/checkout/widgets-lib/src/widgets/connect/components/WalletList.tsx +++ b/packages/checkout/widgets-lib/src/widgets/connect/components/WalletList.tsx @@ -73,7 +73,7 @@ export function WalletList(props: WalletListProps) { connectState: { checkout }, } = useContext(ConnectContext); const { viewDispatch } = useContext(ViewContext); - const { track, identify } = useAnalytics(); + const { track, identify, user } = useAnalytics(); const { providers } = useInjectedProviders({ checkout }); const [showWalletDrawer, setShowWalletDrawer] = useState(false); const { isWalletConnectEnabled, openWalletConnectModal } = useWalletConnect(); @@ -180,7 +180,10 @@ export function WalletList(props: WalletListProps) { // Set up EIP-1193 provider event listeners for widget root instances addProviderListenersForWidgetRoot(connectResult.provider); - await identifyUser(identify, connectResult.provider); + + const userData = user ? await user() : undefined; + const anonymousId = userData?.anonymousId(); + await identifyUser(identify, connectResult.provider, { anonymousId }); selectWeb3Provider( web3Provider, diff --git a/packages/checkout/widgets-lib/src/widgets/connect/views/ReadyToConnect.tsx b/packages/checkout/widgets-lib/src/widgets/connect/views/ReadyToConnect.tsx index fcb56a4716..fea6e621ac 100644 --- a/packages/checkout/widgets-lib/src/widgets/connect/views/ReadyToConnect.tsx +++ b/packages/checkout/widgets-lib/src/widgets/connect/views/ReadyToConnect.tsx @@ -36,7 +36,9 @@ export function ReadyToConnect({ targetChainId, allowedChains }: ReadyToConnectP const isPassport = isPassportProvider(provider); const isMetaMask = isMetaMaskProvider(provider); - const { page, identify, track } = useAnalytics(); + const { + page, identify, track, user, + } = useAnalytics(); useEffect(() => { page({ @@ -145,7 +147,9 @@ export function ReadyToConnect({ targetChainId, allowedChains }: ReadyToConnectP // Set up EIP-1193 provider event listeners for widget root instances addProviderListenersForWidgetRoot(connectResult.provider); - await identifyUser(identify, connectResult.provider); + const userData = user ? await user() : undefined; + const anonymousId = userData?.anonymousId(); + await identifyUser(identify, connectResult.provider, { anonymousId }); connectDispatch({ payload: {