feat: remove /wallet route (#6350)

* feat: replace internal microsite routes with links to external site

* feat: use updated analytics events from events repo

* fix: remove unnused empty wallet page

package.json

@@ -141,7 +141,7 @@
     "@sentry/tracing": "^7.45.0",
     "@types/react-window-infinite-loader": "^1.0.6",
     "@uniswap/analytics": "^1.3.1",
-    "@uniswap/analytics-events": "^2.9.0",
+    "@uniswap/analytics-events": "^2.10.0",
     "@uniswap/conedison": "^1.4.0",
     "@uniswap/governance": "^1.0.2",
     "@uniswap/liquidity-staker": "^1.0.2",

src/components/AccountDrawer/DownloadButton.tsx

 import { sendAnalyticsEvent } from '@uniswap/analytics'
-import { useMGTMMicrositeEnabled } from 'featureFlags/flags/mgtm'
+import { InterfaceElementName, InterfaceEventName, SharedEventName } from '@uniswap/analytics-events'
 import { PropsWithChildren, useCallback } from 'react'
-import { useNavigate } from 'react-router-dom'
 import styled from 'styled-components/macro'
 import { ClickableStyle } from 'theme'
 import { isIOS } from 'utils/userAgent'
@@ -34,21 +33,32 @@ function BaseButton({ onClick, branded, children }: PropsWithChildren<{ onClick?
 }
 
 const APP_STORE_LINK = 'https://apps.apple.com/us/app/uniswap-wallet/id6443944476'
+const MICROSITE_LINK = 'https://wallet.uniswap.org/'
 
+const openAppStore = () => {
+  window.open(APP_STORE_LINK, /* target = */ 'uniswap_wallet_appstore')
+}
+const openWalletMicrosite = () => {
+  sendAnalyticsEvent(InterfaceEventName.UNISWAP_WALLET_MICROSITE_OPENED)
+  window.open(MICROSITE_LINK, /* target = */ 'uniswap_wallet_microsite')
+}
 // Launches App Store if on an iOS device, else navigates to Uniswap Wallet microsite
-export function DownloadButton({ onClick, text = 'Download' }: { onClick?: () => void; text?: string }) {
-  const navigate = useNavigate()
-  const micrositeEnabled = useMGTMMicrositeEnabled()
-
+export function DownloadButton({
+  onClick,
+  text = 'Download',
+  element,
+}: {
+  onClick?: () => void
+  text?: string
+  element: InterfaceElementName
+}) {
   const onButtonClick = useCallback(() => {
     // handles any actions required by the parent, i.e. cancelling wallet connection attempt or dismissing an ad
     onClick?.()
-
-    if (isIOS || !micrositeEnabled) {
-      sendAnalyticsEvent('Uniswap wallet download clicked')
-      window.open(APP_STORE_LINK)
-    } else navigate('/wallet')
-  }, [onClick, micrositeEnabled, navigate])
+    sendAnalyticsEvent(SharedEventName.ELEMENT_CLICKED, { element })
+    if (isIOS) openAppStore()
+    else openWalletMicrosite()
+  }, [element, onClick])
 
   return (
     <BaseButton branded onClick={onButtonClick}>
@@ -58,5 +68,5 @@ export function DownloadButton({ onClick, text = 'Download' }: { onClick?: () =>
 }
 
 export function LearnMoreButton() {
-  return <BaseButton onClick={() => window.open('https://wallet.uniswap.org/', '_blank')}>Learn More</BaseButton>
+  return <BaseButton onClick={openWalletMicrosite}>Learn More</BaseButton>
 }

src/components/AccountDrawer/SettingsMenu.tsx

@@ -3,7 +3,7 @@ import { LOCALE_LABEL, SUPPORTED_LOCALES, SupportedLocale } from 'constants/loca
 import { useActiveLocale } from 'hooks/useActiveLocale'
 import { useLocationLinkProps } from 'hooks/useLocationLinkProps'
 import { Check } from 'react-feather'
-import { Link, useLocation } from 'react-router-dom'
+import { Link } from 'react-router-dom'
 import styled, { useTheme } from 'styled-components/macro'
 import { ClickableStyle, ThemedText } from 'theme'
 import ThemeToggle from 'theme/components/ThemeToggle'
@@ -56,16 +56,13 @@ const BalanceToggleContainer = styled.div`
 export default function SettingsMenu({ onClose }: { onClose: () => void }) {
   const activeLocale = useActiveLocale()
 
-  const { pathname } = useLocation()
-  const isWalletPage = pathname.includes('/wallet')
-
   return (
     <SlideOutMenu title={<Trans>Settings</Trans>} onClose={onClose}>
       <SectionTitle>
         <Trans>Preferences</Trans>
       </SectionTitle>
       <ThemeToggleContainer>
-        <ThemeToggle disabled={isWalletPage} />
+        <ThemeToggle />
       </ThemeToggleContainer>
       <BalanceToggleContainer>
         <SmallBalanceToggle />

src/components/AccountDrawer/UniwalletModal.tsx

 import { Trans } from '@lingui/macro'
 import { sendAnalyticsEvent } from '@uniswap/analytics'
+import { InterfaceElementName } from '@uniswap/analytics-events'
 import { useWeb3React } from '@web3-react/core'
 import { WalletConnect } from '@web3-react/walletconnect'
 import Column, { AutoColumn } from 'components/Column'
@@ -95,7 +96,7 @@ export default function UniwalletModal() {
           )}
         </QRCodeWrapper>
         <Divider />
-        <InfoSection onClose={onClose} />
+        <InfoSection />
       </UniwalletConnectWrapper>
     </Modal>
   )
@@ -108,7 +109,7 @@ const InfoSectionWrapper = styled(RowBetween)`
   gap: 20px;
 `
 
-function InfoSection({ onClose }: { onClose: () => void }) {
+function InfoSection() {
   return (
     <InfoSectionWrapper>
       <AutoColumn gap="4px">
@@ -122,7 +123,7 @@ function InfoSection({ onClose }: { onClose: () => void }) {
         </ThemedText.Caption>
       </AutoColumn>
       <Column>
-        <DownloadButton onClick={onClose} />
+        <DownloadButton element={InterfaceElementName.UNISWAP_WALLET_MODAL_DOWNLOAD_BUTTON} />
       </Column>
     </InfoSectionWrapper>
   )

src/components/Banner/UniswapWalletBanner.tsx

 import { Trans } from '@lingui/macro'
+import { InterfaceElementName } from '@uniswap/analytics-events'
 import { useAccountDrawer } from 'components/AccountDrawer'
 import { DownloadButton, LearnMoreButton } from 'components/AccountDrawer/DownloadButton'
 import { AutoColumn } from 'components/Column'
@@ -99,7 +100,10 @@ export default function UniswapWalletBanner() {
 
         <ButtonRow>
           <LearnMoreButton />
-          <DownloadButton onClick={() => toggleHideUniswapWalletBanner()} />
+          <DownloadButton
+            onClick={() => toggleHideUniswapWalletBanner()}
+            element={InterfaceElementName.UNISWAP_WALLET_BANNER_DOWNLOAD_BUTTON}
+          />
         </ButtonRow>
       </InnerContainer>
     </PopupContainer>

src/components/FeatureFlagModal/FeatureFlagModal.tsx

-import { BaseVariant, FeatureFlag, featureFlagSettings, useBaseFlag, useUpdateFlag } from 'featureFlags'
+import { BaseVariant, FeatureFlag, featureFlagSettings, useUpdateFlag } from 'featureFlags'
 import { MgtmVariant, useMgtmFlag } from 'featureFlags/flags/mgtm'
 import { useMiniPortfolioFlag } from 'featureFlags/flags/miniPortfolio'
 import { NftGraphqlVariant, useNftGraphqlFlag } from 'featureFlags/flags/nftlGraphql'
@@ -211,12 +211,6 @@ export default function FeatureFlagModal() {
         featureFlag={FeatureFlag.mgtm}
         label="Mobile Wallet go-to-market assets"
       />
-      <FeatureFlagOption
-        variant={BaseVariant}
-        value={useBaseFlag(FeatureFlag.walletMicrosite)}
-        featureFlag={FeatureFlag.walletMicrosite}
-        label="Mobile Wallet microsite (requires mgtm to also be enabled)"
-      />
       <FeatureFlagOption
         variant={BaseVariant}
         value={useMiniPortfolioFlag()}

src/components/NavBar/index.tsx

 import { Trans } from '@lingui/macro'
 import { useWeb3React } from '@web3-react/core'
-import NewBadge from 'components/WalletModal/NewBadge'
 import Web3Status from 'components/Web3Status'
-import { useMGTMMicrositeEnabled } from 'featureFlags/flags/mgtm'
 import { chainIdToBackendName } from 'graphql/data/util'
 import { useIsNftPage } from 'hooks/useIsNftPage'
 import { useIsPoolsPage } from 'hooks/useIsPoolsPage'
@@ -60,7 +58,6 @@ export const PageTabs = () => {
 
   const isPoolActive = useIsPoolsPage()
   const isNftPage = useIsNftPage()
-  const micrositeEnabled = useMGTMMicrositeEnabled()
 
   const shouldDisableNFTRoutes = useAtomValue(shouldDisableNFTRoutesAtom)
 
@@ -82,14 +79,6 @@ export const PageTabs = () => {
           <Trans>Pools</Trans>
         </MenuItem>
       </Box>
-      {micrositeEnabled && (
-        <Box display={{ sm: 'none', xxxl: 'flex' }}>
-          <MenuItem href="/wallet" isActive={pathname.startsWith('/wallet')}>
-            <Trans>Wallet</Trans>
-            <NewBadge />
-          </MenuItem>
-        </Box>
-      )}
       <Box marginY={{ sm: '4', md: 'unset' }}>
         <MenuDropdown />
       </Box>

src/featureFlags/flags/featureFlags.ts

@@ -10,6 +10,5 @@ export enum FeatureFlag {
   statsigDummy = 'web_dummy_gate_amplitude_id',
   nftGraphql = 'nft_graphql_migration',
   mgtm = 'web_mobile_go_to_market_enabled',
-  walletMicrosite = 'walletMicrosite',
   miniPortfolio = 'miniPortfolio',
 }

src/featureFlags/flags/mgtm.ts

@@ -10,9 +10,4 @@ export function useMgtmEnabled(): boolean {
   return useMgtmFlag() === BaseVariant.Enabled
 }
 
-export function useMGTMMicrositeEnabled() {
-  const mgtmEnabled = useMgtmEnabled()
-  return useBaseFlag(FeatureFlag.walletMicrosite) === BaseVariant.Enabled && mgtmEnabled
-}
-
 export { BaseVariant as MgtmVariant }

src/pages/App.tsx

@@ -4,7 +4,6 @@ import { useWeb3React } from '@web3-react/core'
 import Loader from 'components/Icons/LoadingSpinner'
 import TopLevelModals from 'components/TopLevelModals'
 import { useFeatureFlagsIsLoaded } from 'featureFlags'
-import { useMGTMMicrositeEnabled } from 'featureFlags/flags/mgtm'
 import ApeModeQueryParamReader from 'hooks/useApeModeQueryParamReader'
 import { useAtom } from 'jotai'
 import { useBag } from 'nft/hooks/useBag'
@@ -48,7 +47,6 @@ import Tokens from './Tokens'
 
 const TokenDetails = lazy(() => import('./TokenDetails'))
 const Vote = lazy(() => import('./Vote'))
-const Wallet = lazy(() => import('./Wallet'))
 const NftExplore = lazy(() => import('nft/pages/explore'))
 const Collection = lazy(() => import('nft/pages/collection'))
 const Profile = lazy(() => import('nft/pages/profile/profile'))
@@ -192,9 +190,7 @@ export default function App() {
   }, [])
 
   const isBagExpanded = useBag((state) => state.bagExpanded)
-  const isOnWalletPage = useLocation().pathname === '/wallet'
-  const micrositeEnabled = useMGTMMicrositeEnabled()
-  const isHeaderTransparent = (!scrolledState && !isBagExpanded) || isOnWalletPage
+  const isHeaderTransparent = !scrolledState && !isBagExpanded
 
   const { account } = useWeb3React()
   const statsigUser: StatsigUser = useMemo(
@@ -245,7 +241,6 @@ export default function App() {
                     }
                   />
                   <Route path="create-proposal" element={<Navigate to="/vote/create-proposal" replace />} />
-                  {micrositeEnabled && <Route path="wallet" element={<Wallet />} />}
                   <Route path="send" element={<RedirectPathToSwapOnly />} />
                   <Route path="swap" element={<Swap />} />
 

src/pages/Wallet/index.tsx

-export default function Wallet() {
-  return <div>uniswap wallet pretty cool</div>
-}

yarn.lock

@@ -4567,10 +4567,10 @@
     "@typescript-eslint/types" "5.47.0"
     eslint-visitor-keys "^3.3.0"
 
-"@uniswap/analytics-events@^2.9.0":
-  version "2.9.0"
-  resolved "https://registry.yarnpkg.com/@uniswap/analytics-events/-/analytics-events-2.9.0.tgz#80c634bfae850da33b446df0a9fb325869fa8ffa"
-  integrity sha512-pgrr44L26/0MhRNKC7u8NwjIjVv5tKFqKre2h+TYpzRamZsOD37sR9mnovlF6FA91jNPRMPKK+kHouiimMfmrA==
+"@uniswap/analytics-events@^2.10.0":
+  version "2.10.0"
+  resolved "https://registry.yarnpkg.com/@uniswap/analytics-events/-/analytics-events-2.10.0.tgz#08c80d4c17212c112a7c182fa84a201b4199a241"
+  integrity sha512-Lkz2JqzixPDSGp71SczXMf9UQDo9QX2wEqfma09YoDHm8HCw/baqLQiK1KGdUQULZxbj64W4SH3nFlxq/Jb/OQ==
 
 "@uniswap/analytics@^1.3.1":
   version "1.3.1"