feat: add android announcement banner

src/components/AccountDrawer/UniwalletModal.tsx

@@ -111,11 +111,11 @@ function InfoSection() {
     <InfoSectionWrapper>
       <AutoColumn gap="4px">
         <ThemedText.SubHeaderSmall color="neutral1">
-          <Trans>Don&apos;t have Uniswap Wallet?</Trans>
+          <Trans>Don&apos;t have a Uniswap wallet?</Trans>
         </ThemedText.SubHeaderSmall>
         <ThemedText.BodySmall color="neutral2">
           {isAndroidGALaunched ? (
-            <Trans>Get the Uniswap app on iOS and Android to safely store and swap tokens.</Trans>
+            <Trans>Safely store and swap tokens with the Uniswap app. Available on iOS and Android.</Trans>
           ) : (
             <Trans>
               Download in the App Store to safely store your tokens and NFTs, swap tokens, and connect to crypto apps.

src/components/Banner/AndroidAnnouncementBanner/index.tsx

@@ -0,0 +1,72 @@
+import { Trans } from '@lingui/macro'
+import { InterfaceElementName } from '@uniswap/analytics-events'
+import { useAndroidGALaunchFlagEnabled } from 'featureFlags/flags/androidGALaunch'
+import { useScreenSize } from 'hooks/useScreenSize'
+import { useLocation } from 'react-router-dom'
+import { useHideAndroidAnnouncementBanner } from 'state/user/hooks'
+import { ThemedText } from 'theme/components'
+import { useIsDarkMode } from 'theme/components/ThemeToggle'
+import { openDownloadApp } from 'utils/openDownloadApp'
+import { isMobileSafari } from 'utils/userAgent'
+
+import androidAnnouncementBannerQR from '../../../assets/images/androidAnnouncementBannerQR.png'
+import darkAndroidThumbnail from '../../../assets/images/AndroidWallet-Thumbnail-Dark.png'
+import lightAndroidThumbnail from '../../../assets/images/AndroidWallet-Thumbnail-Light.png'
+import {
+  Container,
+  DownloadButton,
+  PopupContainer,
+  StyledQrCode,
+  StyledXButton,
+  TextContainer,
+  Thumbnail,
+} from './styled'
+
+export default function AndroidAnnouncementBanner() {
+  const [hideAndroidAnnouncementBanner, toggleHideAndroidAnnouncementBanner] = useHideAndroidAnnouncementBanner()
+  const location = useLocation()
+  const isLandingScreen = location.search === '?intro=true' || location.pathname === '/'
+  const screenSize = useScreenSize()
+
+  const shouldDisplay = Boolean(!hideAndroidAnnouncementBanner && !isLandingScreen)
+  const isDarkMode = useIsDarkMode()
+
+  const isAndroidGALaunched = useAndroidGALaunchFlagEnabled()
+  const onClick = () =>
+    openDownloadApp({
+      element: InterfaceElementName.UNISWAP_WALLET_BANNER_DOWNLOAD_BUTTON,
+      isAndroidGALaunched,
+    })
+
+  if (!isAndroidGALaunched || isMobileSafari) return null
+
+  return (
+    <PopupContainer show={shouldDisplay}>
+      <Container>
+        <Thumbnail src={isDarkMode ? darkAndroidThumbnail : lightAndroidThumbnail} alt="Android app thumbnail" />
+        <TextContainer onClick={!screenSize['xs'] ? onClick : undefined}>
+          <ThemedText.BodySmall lineHeight="20px">
+            <Trans>Uniswap on Android</Trans>
+          </ThemedText.BodySmall>
+          <ThemedText.LabelMicro>
+            <Trans>Available now - download from the Google Play Store today</Trans>
+          </ThemedText.LabelMicro>
+          <DownloadButton onClick={onClick}>
+            <Trans>Download now</Trans>
+          </DownloadButton>
+        </TextContainer>
+        <StyledQrCode src={androidAnnouncementBannerQR} alt="App OneLink QR code" />
+        <StyledXButton
+          data-testid="uniswap-wallet-banner"
+          size={24}
+          onClick={(e) => {
+            // prevent click from bubbling to UI on the page underneath, i.e. clicking a token row
+            e.preventDefault()
+            e.stopPropagation()
+            toggleHideAndroidAnnouncementBanner()
+          }}
+        />
+      </Container>
+    </PopupContainer>
+  )
+}

src/components/Banner/AndroidAnnouncementBanner/styled.tsx

@@ -0,0 +1,92 @@
+import { ButtonText } from 'components/Button'
+import { OpacityHoverState } from 'components/Common'
+import { X } from 'react-feather'
+import styled from 'styled-components'
+import { BREAKPOINTS } from 'theme'
+import { Z_INDEX } from 'theme/zIndex'
+
+export const PopupContainer = styled.div<{ show: boolean }>`
+  ${({ show }) => !show && 'display: none'};
+  background-color: ${({ theme }) => theme.surface2};
+  color: ${({ theme }) => theme.neutral1};
+  position: fixed;
+  z-index: ${Z_INDEX.sticky};
+  user-select: none;
+  border-radius: 20px;
+  bottom: 40px;
+  right: 20px;
+  width: 360px;
+  height: 92px;
+  border: 1.3px solid ${({ theme }) => theme.surface3};
+
+  @media only screen and (max-width: ${BREAKPOINTS.md}px) {
+    bottom: 62px;
+  }
+
+  @media only screen and (max-width: ${BREAKPOINTS.xs}px) {
+    width: unset;
+    right: 10px;
+    left: 10px;
+  }
+`
+export const StyledXButton = styled(X)`
+  cursor: pointer;
+  position: absolute;
+  top: -30px;
+  right: 0px;
+  padding: 4px;
+  border-radius: 50%;
+
+  background-color: ${({ theme }) => theme.surface5};
+  color: ${({ theme }) => theme.neutral2};
+  ${OpacityHoverState};
+
+  @media only screen and (max-width: ${BREAKPOINTS.xs}px) {
+    top: 8px;
+    right: 8px;
+  }
+`
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  height: 100%;
+  overflow: hidden;
+  border-radius: 20px;
+  gap: 16px;
+`
+export const Thumbnail = styled.img`
+  width: 82px;
+`
+export const TextContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+  color: ${({ theme }) => theme.neutral2};
+  padding: 10px 0px 10px;
+  line-height: 16px;
+
+  @media only screen and (max-width: ${BREAKPOINTS.xs}px) {
+    width: 220px;
+  }
+`
+export const StyledQrCode = styled.img`
+  padding: 2px;
+  border-radius: 8px;
+  width: 64px;
+  height: 64px;
+  background-color: ${({ theme }) => theme.white};
+  margin-right: 16px;
+
+  @media only screen and (max-width: ${BREAKPOINTS.xs}px) {
+    display: none;
+  }
+`
+export const DownloadButton = styled(ButtonText)`
+  line-height: 16px;
+  font-size: 14px;
+  color: ${({ theme }) => theme.accent1};
+`

src/components/TopLevelModals/index.tsx

@@ -2,7 +2,7 @@ import { useWeb3React } from '@web3-react/core'
 import { OffchainActivityModal } from 'components/AccountDrawer/MiniPortfolio/Activity/OffchainActivityModal'
 import UniwalletModal from 'components/AccountDrawer/UniwalletModal'
 import AirdropModal from 'components/AirdropModal'
-import BaseAnnouncementBanner from 'components/Banner/BaseAnnouncementBanner'
+import AndroidAnnouncementBanner from 'components/Banner/AndroidAnnouncementBanner'
 import AddressClaimModal from 'components/claim/AddressClaimModal'
 import ConnectedAccountBlocked from 'components/ConnectedAccountBlocked'
 import FiatOnrampModal from 'components/FiatOnrampModal'
@@ -30,7 +30,7 @@ export default function TopLevelModals() {
       <ConnectedAccountBlocked account={account} isOpen={accountBlocked} />
       <Bag />
       <UniwalletModal />
-      <BaseAnnouncementBanner />
+      <AndroidAnnouncementBanner />
       <OffchainActivityModal />
       <TransactionCompleteModal />
       <AirdropModal />