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/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`,
             })}
           >
+            {isAndroidGALaunched ? (
+              <>
+                <UniswapAppLogo width="20" height="20" />
+                Download the Uniswap app
+              </>
+            ) : (
+              <>
                 <AppleLogo width="20" height="20" />
-            Download the Uniswap Wallet for iOS
+                Download the Uniswap app for iOS
+              </>
+            )}
           </DownloadWalletLink>
         </ContentContainer>
         <AboutContentContainer isDarkMode={isDarkMode}>