From 46c8caa09c9b01d5f62e077e4531ef0bc35baa47 Mon Sep 17 00:00:00 2001 From: Kristie Huang Date: Tue, 7 Nov 2023 17:24:44 -0500 Subject: [PATCH] feat: update app download tracking for Android launch (#7542) * feat: change UniwalletModal android text * very wip android WC * adding android/ios disambiguated event names * put analytics events in todos * use analytics package * use isAndroidGALaunched * fix ternary * add navbar menu element * broken onelink changes * replace utm with onelinks * use microsite link in address redirect * fix unit tests, no longer discriminate between platforms expected behavior * nit lint --- package.json | 2 +- .../AccountDrawer/DownloadButton.tsx | 8 ++- .../AccountDrawer/UniwalletModal.tsx | 25 ++++--- .../Banner/BaseAnnouncementBanner/index.tsx | 19 +++-- src/components/NavBar/MenuDropdown.tsx | 3 +- src/components/WalletModal/index.tsx | 4 +- src/connection/index.ts | 5 +- src/connection/types.ts | 2 +- src/pages/App.tsx | 4 +- .../Landing/__snapshots__/index.test.tsx.snap | 4 +- src/pages/Landing/index.ios.test.tsx | 14 ---- src/pages/Landing/index.nonios.test.tsx | 14 ---- src/pages/Landing/index.test.tsx | 7 ++ src/pages/Landing/index.tsx | 5 +- src/utils/openDownloadApp.ts | 71 +++++++++---------- src/utils/userAgent.ts | 2 + yarn.lock | 8 +-- 17 files changed, 100 insertions(+), 97 deletions(-) delete mode 100644 src/pages/Landing/index.ios.test.tsx delete mode 100644 src/pages/Landing/index.nonios.test.tsx diff --git a/package.json b/package.json index 354157b7eb..1683fdc6e0 100644 --- a/package.json +++ b/package.json @@ -197,7 +197,7 @@ "@types/react-helmet": "^6.1.7", "@types/react-window-infinite-loader": "^1.0.6", "@uniswap/analytics": "1.5.0", - "@uniswap/analytics-events": "^2.25.0", + "@uniswap/analytics-events": "^2.28.0", "@uniswap/governance": "^1.0.2", "@uniswap/liquidity-staker": "^1.0.2", "@uniswap/merkle-distributor": "^1.0.1", diff --git a/src/components/AccountDrawer/DownloadButton.tsx b/src/components/AccountDrawer/DownloadButton.tsx index cc7ff243f6..72325c092d 100644 --- a/src/components/AccountDrawer/DownloadButton.tsx +++ b/src/components/AccountDrawer/DownloadButton.tsx @@ -1,4 +1,5 @@ import { InterfaceElementName } from '@uniswap/analytics-events' +import { useAndroidGALaunchFlagEnabled } from 'featureFlags/flags/androidGALaunch' import { PropsWithChildren, useCallback } from 'react' import styled from 'styled-components' import { ClickableStyle } from 'theme/components' @@ -31,7 +32,7 @@ function BaseButton({ onClick, branded, children }: PropsWithChildren<{ onClick? ) } -// Launches App Store if on an iOS device, else navigates to Uniswap Wallet microsite +// Launches App/Play Store if on an iOS/Android device, else navigates to Uniswap Wallet microsite export function DownloadButton({ onClick, text = 'Download', @@ -41,11 +42,12 @@ export function DownloadButton({ text?: string element: InterfaceElementName }) { + const isAndroidGALaunched = useAndroidGALaunchFlagEnabled() const onButtonClick = useCallback(() => { // handles any actions required by the parent, i.e. cancelling wallet connection attempt or dismissing an ad onClick?.() - openDownloadApp({ element }) - }, [element, onClick]) + openDownloadApp({ element, isAndroidGALaunched }) + }, [element, isAndroidGALaunched, onClick]) return ( diff --git a/src/components/AccountDrawer/UniwalletModal.tsx b/src/components/AccountDrawer/UniwalletModal.tsx index c85484c40f..f258a00f41 100644 --- a/src/components/AccountDrawer/UniwalletModal.tsx +++ b/src/components/AccountDrawer/UniwalletModal.tsx @@ -1,5 +1,5 @@ import { Trans } from '@lingui/macro' -import { InterfaceElementName } from '@uniswap/analytics-events' +import { InterfaceElementName, InterfaceEventName } from '@uniswap/analytics-events' import { WalletConnect as WalletConnectv2 } from '@web3-react/walletconnect-v2' import { sendAnalyticsEvent } from 'analytics' import Column, { AutoColumn } from 'components/Column' @@ -9,11 +9,12 @@ import { uniwalletWCV2ConnectConnection } from 'connection' import { ActivationStatus, useActivationState } from 'connection/activate' import { ConnectionType } from 'connection/types' import { UniwalletConnect as UniwalletConnectV2 } from 'connection/WalletConnectV2' +import { useAndroidGALaunchFlagEnabled } from 'featureFlags/flags/androidGALaunch' import { QRCodeSVG } from 'qrcode.react' import { useEffect, useState } from 'react' import styled, { useTheme } from 'styled-components' import { CloseIcon, ThemedText } from 'theme/components' -import { isIOS } from 'utils/userAgent' +import { isAndroid, isIOS } from 'utils/userAgent' import uniPng from '../../assets/images/uniwallet_modal_icon.png' import { DownloadButton } from './DownloadButton' @@ -42,9 +43,11 @@ export default function UniwalletModal() { const { activationState, cancelActivation } = useActivationState() const [uri, setUri] = useState() - // Displays the modal if not on iOS, a Uniswap Wallet Connection is pending, & qrcode URI is available + const isAndroidGALaunched = useAndroidGALaunchFlagEnabled() + // Displays the modal if not on iOS/Android, a Uniswap Wallet Connection is pending, & qrcode URI is available + const onLaunchedMobilePlatform = isIOS || (isAndroidGALaunched && isAndroid) const open = - !isIOS && + !onLaunchedMobilePlatform && activationState.status === ActivationStatus.PENDING && activationState.connection.type === ConnectionType.UNISWAP_WALLET_V2 && !!uri @@ -57,7 +60,7 @@ export default function UniwalletModal() { }, []) useEffect(() => { - if (open) sendAnalyticsEvent('Uniswap wallet modal opened') + if (open) sendAnalyticsEvent(InterfaceEventName.UNIWALLET_CONNECT_MODAL_OPENED) }, [open]) const theme = useTheme() @@ -102,6 +105,8 @@ const InfoSectionWrapper = styled(RowBetween)` ` function InfoSection() { + const isAndroidGALaunched = useAndroidGALaunchFlagEnabled() + return ( @@ -109,9 +114,13 @@ function InfoSection() { Don't have Uniswap Wallet? - - Download in the App Store to safely store your tokens and NFTs, swap tokens, and connect to crypto apps. - + {isAndroidGALaunched ? ( + Get the Uniswap app on iOS and Android to safely store and swap tokens. + ) : ( + + Download in the App Store to safely store your tokens and NFTs, swap tokens, and connect to crypto apps. + + )} diff --git a/src/components/Banner/BaseAnnouncementBanner/index.tsx b/src/components/Banner/BaseAnnouncementBanner/index.tsx index 4f7f8df7c5..e092b4e364 100644 --- a/src/components/Banner/BaseAnnouncementBanner/index.tsx +++ b/src/components/Banner/BaseAnnouncementBanner/index.tsx @@ -11,7 +11,7 @@ import { useLocation } from 'react-router-dom' import { useHideBaseWalletBanner } from 'state/user/hooks' import { ThemedText } from 'theme/components' import { openDownloadApp, openWalletMicrosite } from 'utils/openDownloadApp' -import { isIOS, isMobileSafari } from 'utils/userAgent' +import { isAndroid, isIOS, isMobileSafari } from 'utils/userAgent' import { BannerButton, BaseBackgroundImage, ButtonRow, PopupContainer, StyledXButton } from './styled' @@ -60,14 +60,14 @@ export default function BaseWalletBanner() { - {isIOS ? ( + {isIOS || (isAndroidGALaunched && isAndroid) ? ( <> openDownloadApp({ element: InterfaceElementName.UNISWAP_WALLET_BANNER_DOWNLOAD_BUTTON, - appStoreParams: 'pt=123625782&ct=base-app-banner&mt=8', + isAndroidGALaunched, }) } > @@ -77,14 +77,23 @@ export default function BaseWalletBanner() { - openWalletMicrosite()}> + + openWalletMicrosite({ element: InterfaceElementName.UNISWAP_WALLET_BANNER_DOWNLOAD_BUTTON }) + } + > Learn more ) : ( - openWalletMicrosite()}> + openWalletMicrosite({ element: InterfaceElementName.UNISWAP_WALLET_BANNER_DOWNLOAD_BUTTON })} + > Learn more diff --git a/src/components/NavBar/MenuDropdown.tsx b/src/components/NavBar/MenuDropdown.tsx index 9ae4f49483..500f790fcd 100644 --- a/src/components/NavBar/MenuDropdown.tsx +++ b/src/components/NavBar/MenuDropdown.tsx @@ -174,7 +174,8 @@ export const MenuDropdown = () => { openDownloadApp({ - element: InterfaceElementName.UNISWAP_WALLET_MODAL_DOWNLOAD_BUTTON, + element: InterfaceElementName.UNISWAP_WALLET_NAVBAR_MENU_DOWNLOAD_BUTTON, + isAndroidGALaunched, }) } > diff --git a/src/components/WalletModal/index.tsx b/src/components/WalletModal/index.tsx index 1cf805e901..405d40a6aa 100644 --- a/src/components/WalletModal/index.tsx +++ b/src/components/WalletModal/index.tsx @@ -6,6 +6,7 @@ import { AutoRow } from 'components/Row' import { connections, deprecatedNetworkConnection, networkConnection } from 'connection' import { ActivationStatus, useActivationState } from 'connection/activate' import { isSupportedChain } from 'constants/chains' +import { useAndroidGALaunchFlagEnabled } from 'featureFlags/flags/androidGALaunch' import { useFallbackProviderEnabled } from 'featureFlags/flags/fallbackProvider' import { useEffect } from 'react' import styled from 'styled-components' @@ -40,6 +41,7 @@ const PrivacyPolicyWrapper = styled.div` export default function WalletModal({ openSettings }: { openSettings: () => void }) { const { connector, chainId } = useWeb3React() + const isAndroidGALaunched = useAndroidGALaunchFlagEnabled() const { activationState } = useActivationState() const fallbackProviderEnabled = useFallbackProviderEnabled() @@ -66,7 +68,7 @@ export default function WalletModal({ openSettings }: { openSettings: () => void {connections - .filter((connection) => connection.shouldDisplay()) + .filter((connection) => connection.shouldDisplay(isAndroidGALaunched)) .map((connection) => (