feat: add Android feature flag & change some app logos (#7524)

* fix: generalize iOS language to app, and add color app icon

* remove apple logo

* delete more apple logos

* remove learn more arrow

* update snapshots

* add feature flags to android changes

src/assets/svg/apple_logo.svg

-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 22.773 22.773" style="enable-background:new 0 0 22.773 22.773;" xml:space="preserve">
-<g>
-	<g>
-		<path d="M15.769,0c0.053,0,0.106,0,0.162,0c0.13,1.606-0.483,2.806-1.228,3.675c-0.731,0.863-1.732,1.7-3.351,1.573
-			c-0.108-1.583,0.506-2.694,1.25-3.561C13.292,0.879,14.557,0.16,15.769,0z"/>
-		<path d="M20.67,16.716c0,0.016,0,0.03,0,0.045c-0.455,1.378-1.104,2.559-1.896,3.655c-0.723,0.995-1.609,2.334-3.191,2.334
-			c-1.367,0-2.275-0.879-3.676-0.903c-1.482-0.024-2.297,0.735-3.652,0.926c-0.155,0-0.31,0-0.462,0
-			c-0.995-0.144-1.798-0.932-2.383-1.642c-1.725-2.098-3.058-4.808-3.306-8.276c0-0.34,0-0.679,0-1.019
-			c0.105-2.482,1.311-4.5,2.914-5.478c0.846-0.52,2.009-0.963,3.304-0.765c0.555,0.086,1.122,0.276,1.619,0.464
-			c0.471,0.181,1.06,0.502,1.618,0.485c0.378-0.011,0.754-0.208,1.135-0.347c1.116-0.403,2.21-0.865,3.652-0.648
-			c1.733,0.262,2.963,1.032,3.723,2.22c-1.466,0.933-2.625,2.339-2.427,4.74C17.818,14.688,19.086,15.964,20.67,16.716z"/>
-	</g>
-	<g>
-	</g>
-	<g>
-	</g>
-	<g>
-	</g>
-	<g>
-	</g>
-	<g>
-	</g>
-	<g>
-	</g>
-	<g>
-	</g>
-	<g>
-	</g>
-	<g>
-	</g>
-	<g>
-	</g>
-	<g>
-	</g>
-	<g>
-	</g>
-	<g>
-	</g>
-	<g>
-	</g>
-	<g>
-	</g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-</svg>
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 22.773 22.773" style="enable-background:new 0 0 22.773 22.773;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M15.769,0c0.053,0,0.106,0,0.162,0c0.13,1.606-0.483,2.806-1.228,3.675c-0.731,0.863-1.732,1.7-3.351,1.573
+			c-0.108-1.583,0.506-2.694,1.25-3.561C13.292,0.879,14.557,0.16,15.769,0z"/>
+		<path d="M20.67,16.716c0,0.016,0,0.03,0,0.045c-0.455,1.378-1.104,2.559-1.896,3.655c-0.723,0.995-1.609,2.334-3.191,2.334
+			c-1.367,0-2.275-0.879-3.676-0.903c-1.482-0.024-2.297,0.735-3.652,0.926c-0.155,0-0.31,0-0.462,0
+			c-0.995-0.144-1.798-0.932-2.383-1.642c-1.725-2.098-3.058-4.808-3.306-8.276c0-0.34,0-0.679,0-1.019
+			c0.105-2.482,1.311-4.5,2.914-5.478c0.846-0.52,2.009-0.963,3.304-0.765c0.555,0.086,1.122,0.276,1.619,0.464
+			c0.471,0.181,1.06,0.502,1.618,0.485c0.378-0.011,0.754-0.208,1.135-0.347c1.116-0.403,2.21-0.865,3.652-0.648
+			c1.733,0.262,2.963,1.032,3.723,2.22c-1.466,0.933-2.625,2.339-2.427,4.74C17.818,14.688,19.086,15.964,20.67,16.716z"/>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/components/Banner/BaseAnnouncementBanner/index.tsx

@@ -4,6 +4,8 @@ import { ChainId } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
 import { ReactComponent as AppleLogo } from 'assets/svg/apple_logo.svg'
 import baseLogoUrl from 'assets/svg/base_background_icon.svg'
+import { ReactComponent as UniswapAppLogo } from 'assets/svg/uniswap_app_logo.svg'
+import { useAndroidGALaunchFlagEnabled } from 'featureFlags/flags/androidGALaunch'
 import { useScreenSize } from 'hooks/useScreenSize'
 import { useLocation } from 'react-router-dom'
 import { useHideBaseWalletBanner } from 'state/user/hooks'
@@ -23,6 +25,8 @@ export default function BaseWalletBanner() {
 
   const screenSize = useScreenSize()
 
+  const isAndroidGALaunched = useAndroidGALaunchFlagEnabled()
+
   if (isMobileSafari) return null
 
   return (
@@ -67,7 +71,7 @@ export default function BaseWalletBanner() {
                 })
               }
             >
-              <AppleLogo width={14} height={14} />
+              {isAndroidGALaunched ? <UniswapAppLogo width={14} height={14} /> : <AppleLogo width={14} height={14} />}
               <ThemedText.LabelSmall color="black" marginLeft="5px">
                 {!screenSize['xs'] ? <Trans>Download</Trans> : <Trans>Download app</Trans>}
               </ThemedText.LabelSmall>

src/components/FeatureFlagModal/FeatureFlagModal.tsx

@@ -3,6 +3,7 @@ import Column from 'components/Column'
 import { BaseVariant, FeatureFlag, featureFlagSettings, useUpdateConfig, useUpdateFlag } from 'featureFlags'
 import { DynamicConfigName } from 'featureFlags/dynamicConfig'
 import { useQuickRouteChains } from 'featureFlags/dynamicConfig/quickRouteChains'
+import { useAndroidGALaunchFlag } from 'featureFlags/flags/androidGALaunch'
 import { useCurrencyConversionFlag } from 'featureFlags/flags/currencyConversion'
 import { useFallbackProviderEnabledFlag } from 'featureFlags/flags/fallbackProvider'
 import { useFotAdjustmentsFlag } from 'featureFlags/flags/fotAdjustments'
@@ -304,6 +305,12 @@ export default function FeatureFlagModal() {
           featureFlag={FeatureFlag.progressIndicatorV2}
           label="Refreshed swap progress indicator"
         />
+        <FeatureFlagOption
+          variant={BaseVariant}
+          value={useAndroidGALaunchFlag()}
+          featureFlag={FeatureFlag.androidGALaunch}
+          label="Android Nov 14th GA launch"
+        />
         <FeatureFlagGroup name="Quick routes">
           <FeatureFlagOption
             variant={BaseVariant}

src/components/NavBar/MenuDropdown.css.ts

@@ -26,6 +26,7 @@ export const MenuRow = style([
   {
     lineHeight: '24px',
     textDecoration: 'none',
+    alignItems: 'flex-start',
   },
 ])
 

src/components/NavBar/MenuDropdown.tsx

 import { t, Trans } from '@lingui/macro'
 import { InterfaceElementName } from '@uniswap/analytics-events'
+import { ReactComponent as AppleLogo } from 'assets/svg/apple_logo.svg'
 import FeatureFlagModal from 'components/FeatureFlagModal/FeatureFlagModal'
 import { PrivacyPolicyModal } from 'components/PrivacyPolicy'
+import { useAndroidGALaunchFlagEnabled } from 'featureFlags/flags/androidGALaunch'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'
 import { Box } from 'nft/components/Box'
 import { Column, Row } from 'nft/components/Flex'
@@ -20,10 +22,11 @@ import { ReactNode, useReducer, useRef } from 'react'
 import { NavLink, NavLinkProps } from 'react-router-dom'
 import { useToggleModal } from 'state/application/hooks'
 import styled, { useTheme } from 'styled-components'
+import { ThemedText } from 'theme/components'
 import { isDevelopmentEnv, isStagingEnv } from 'utils/env'
 import { openDownloadApp } from 'utils/openDownloadApp'
 
-import { ReactComponent as AppleLogo } from '../../assets/svg/apple_logo.svg'
+import { ReactComponent as UniswapAppLogo } from '../../assets/svg/uniswap_app_logo.svg'
 import { ApplicationModal } from '../../state/application/reducer'
 import * as styles from './MenuDropdown.css'
 import { NavDropdown } from './NavDropdown'
@@ -129,6 +132,8 @@ export const MenuDropdown = () => {
   const ref = useRef<HTMLDivElement>(null)
   useOnClickOutside(ref, isOpen ? toggleOpen : undefined)
 
+  const isAndroidGALaunched = useAndroidGALaunchFlagEnabled()
+
   return (
     <>
       <Box position="relative" ref={ref} marginRight="4">
@@ -138,7 +143,7 @@ export const MenuDropdown = () => {
 
         {isOpen && (
           <NavDropdown top={{ sm: 'unset', lg: '56' }} bottom={{ sm: '50', lg: 'unset' }} right="0">
-            <Column gap="16">
+            <Column gap="8">
               <Column paddingX="8" gap="4">
                 <Box display={{ sm: 'none', lg: 'flex', xxl: 'none' }}>
                   <PrimaryMenuRow to="/pool" close={toggleOpen}>
@@ -150,22 +155,6 @@ export const MenuDropdown = () => {
                     </PrimaryMenuRow.Text>
                   </PrimaryMenuRow>
                 </Box>
-                <Box
-                  onClick={() =>
-                    openDownloadApp({
-                      element: InterfaceElementName.UNISWAP_WALLET_MODAL_DOWNLOAD_BUTTON,
-                    })
-                  }
-                >
-                  <PrimaryMenuRow close={toggleOpen}>
-                    <Icon>
-                      <AppleLogo width="24px" height="24px" fill={theme.neutral1} />
-                    </Icon>
-                    <PrimaryMenuRow.Text>
-                      <Trans>Download Uniswap Wallet</Trans>
-                    </PrimaryMenuRow.Text>
-                  </PrimaryMenuRow>
-                </Box>
                 <PrimaryMenuRow to="/vote" close={toggleOpen}>
                   <Icon>
                     <GovernanceIcon width={24} height={24} color={theme.neutral1} />
@@ -182,6 +171,40 @@ export const MenuDropdown = () => {
                     <Trans>View more analytics</Trans>
                   </PrimaryMenuRow.Text>
                 </PrimaryMenuRow>
+                <Box
+                  onClick={() =>
+                    openDownloadApp({
+                      element: InterfaceElementName.UNISWAP_WALLET_MODAL_DOWNLOAD_BUTTON,
+                    })
+                  }
+                >
+                  <PrimaryMenuRow close={toggleOpen}>
+                    {isAndroidGALaunched ? (
+                      <>
+                        <Icon>
+                          <UniswapAppLogo width="24px" height="24px" />
+                        </Icon>
+                        <div>
+                          <ThemedText.BodyPrimary>
+                            <Trans>Download Uniswap</Trans>
+                          </ThemedText.BodyPrimary>
+                          <ThemedText.LabelSmall>
+                            <Trans>Available on iOS and Android</Trans>
+                          </ThemedText.LabelSmall>
+                        </div>
+                      </>
+                    ) : (
+                      <>
+                        <Icon>
+                          <AppleLogo width="24px" height="24px" fill={theme.neutral1} />
+                        </Icon>
+                        <PrimaryMenuRow.Text>
+                          <Trans>Download Uniswap app</Trans>
+                        </PrimaryMenuRow.Text>
+                      </>
+                    )}
+                  </PrimaryMenuRow>
+                </Box>
               </Column>
               <Separator />
               <Box

src/featureFlags/flags/androidGALaunch.ts

+import { BaseVariant, FeatureFlag, useBaseFlag } from '../index'
+
+export function useAndroidGALaunchFlag(): BaseVariant {
+  return useBaseFlag(FeatureFlag.androidGALaunch)
+}
+
+// todo(kristiehuang): add statsig flag after staging goes out
+export function useAndroidGALaunchFlagEnabled(): boolean {
+  return useAndroidGALaunchFlag() === BaseVariant.Enabled
+}

src/featureFlags/index.tsx

@@ -23,6 +23,7 @@ export enum FeatureFlag {
   quickRouteMainnet = 'enable_quick_route_mainnet',
   progressIndicatorV2 = 'progress_indicator_v2',
   feesEnabled = 'fees_enabled',
+  androidGALaunch = 'android_ga_launch',
 }
 
 interface FeatureFlagsContextType {

src/pages/Landing/index.tsx

 import { Trans } from '@lingui/macro'
 import { BrowserEvent, InterfaceElementName, InterfacePageName, SharedEventName } from '@uniswap/analytics-events'
 import { Trace, TraceEvent } from 'analytics'
+import { ReactComponent as UniswapAppLogo } from 'assets/svg/uniswap_app_logo.svg'
 import { AboutFooter } from 'components/About/AboutFooter'
 import Card, { CardType } from 'components/About/Card'
 import { MAIN_CARDS, MORE_CARDS } from 'components/About/constants'
@@ -8,11 +9,11 @@ import ProtocolBanner from 'components/About/ProtocolBanner'
 import { useAccountDrawer } from 'components/AccountDrawer'
 import { BaseButton } from 'components/Button'
 import { AppleLogo } from 'components/Logo/AppleLogo'
+import { useAndroidGALaunchFlagEnabled } from 'featureFlags/flags/androidGALaunch'
 import { useDisableNFTRoutes } from 'hooks/useDisableNFTRoutes'
 import Swap from 'pages/Swap'
 import { parse } from 'qs'
 import { useEffect, useMemo, useRef } from 'react'
-import { ArrowDownCircle } from 'react-feather'
 import { Navigate, useLocation, useNavigate } from 'react-router-dom'
 import { Link as NativeLink } from 'react-router-dom'
 import { useAppSelector } from 'state/hooks'
@@ -116,6 +117,7 @@ const DownloadWalletLink = styled.a`
   line-height: 24px;
   font-weight: 535;
   text-align: center;
+  align-items: center;
 
   :hover {
     color: ${({ theme }) => theme.neutral3};
@@ -210,7 +212,7 @@ const LearnMoreContainer = styled.div`
   cursor: pointer;
   font-size: 20px;
   font-weight: 535;
-  margin: 36px 0;
+  margin: 18px 0 36px;
   display: flex;
   visibility: hidden;
   pointer-events: auto;
@@ -225,11 +227,6 @@ const LearnMoreContainer = styled.div`
   }
 `
 
-const LearnMoreArrow = styled(ArrowDownCircle)`
-  margin-left: 14px;
-  size: 20px;
-`
-
 const AboutContentContainer = styled.div<{ isDarkMode: boolean }>`
   display: flex;
   flex-direction: column;
@@ -318,12 +315,15 @@ export default function Landing() {
   const isDarkMode = useIsDarkMode()
   const cardsRef = useRef<HTMLDivElement>(null)
   const selectedWallet = useAppSelector((state) => state.user.selectedWallet)
+
   const shouldDisableNFTRoutes = useDisableNFTRoutes()
   const cards = useMemo(
     () => MAIN_CARDS.filter((card) => !(shouldDisableNFTRoutes && card.to.startsWith('/nft'))),
     [shouldDisableNFTRoutes]
   )
 
+  const isAndroidGALaunched = useAndroidGALaunchFlagEnabled()
+
   const [accountDrawerOpen] = useAccountDrawer()
   const navigate = useNavigate()
   useEffect(() => {
@@ -395,7 +395,6 @@ export default function Landing() {
             }}
           >
             <Trans>Learn more</Trans>
-            <LearnMoreArrow />
           </LearnMoreContainer>
 
           <DownloadWalletLink
@@ -405,8 +404,17 @@ export default function Landing() {
               appStoreParams: `ct=Uniswap-Home-Page&mt=8`,
             })}
           >
-            <AppleLogo width="20" height="20" />
-            Download the Uniswap Wallet for iOS
+            {isAndroidGALaunched ? (
+              <>
+                <UniswapAppLogo width="20" height="20" />
+                Download the Uniswap app
+              </>
+            ) : (
+              <>
+                <AppleLogo width="20" height="20" />
+                Download the Uniswap app for iOS
+              </>
+            )}
           </DownloadWalletLink>
         </ContentContainer>
         <AboutContentContainer isDarkMode={isDarkMode}>