diff --git a/src/components/AccountDrawer/DownloadButton.tsx b/src/components/AccountDrawer/DownloadButton.tsx deleted file mode 100644 index d833ffff717..00000000000 --- a/src/components/AccountDrawer/DownloadButton.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { PropsWithChildren, useCallback } from 'react' -import styled from 'styled-components' -import { ClickableStyle } from 'theme/components' -import { openDownloadApp } from 'utils/openDownloadApp' - -const StyledButton = styled.button<{ padded?: boolean; branded?: boolean }>` - ${ClickableStyle} - width: 100%; - display: flex; - justify-content: center; - flex-direction: row; - gap: 6px; - padding: 8px 24px; - border: none; - white-space: nowrap; - background: ${({ theme, branded }) => (branded ? theme.accent1 : theme.surface3)}; - border-radius: 12px; - - font-weight: 535; - font-size: 14px; - line-height: 16px; - color: ${({ theme, branded }) => (branded ? theme.deprecated_accentTextLightPrimary : theme.neutral1)}; -` - -function BaseButton({ onClick, branded, children }: PropsWithChildren<{ onClick?: () => void; branded?: boolean }>) { - return ( - - {children} - - ) -} - -// 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 onButtonClick = useCallback(() => { - // handles any actions required by the parent, i.e. cancelling wallet connection attempt or dismissing an ad - onClick?.() - openDownloadApp() - }, [onClick]) - - return ( - - {text} - - ) -} diff --git a/src/components/AccountDrawer/UniwalletModal.tsx b/src/components/AccountDrawer/UniwalletModal.tsx deleted file mode 100644 index f7165a7c8b8..00000000000 --- a/src/components/AccountDrawer/UniwalletModal.tsx +++ /dev/null @@ -1,116 +0,0 @@ -import { Trans } from '@lingui/macro' -import { WalletConnect as WalletConnectv2 } from '@web3-react/walletconnect-v2' -import Column, { AutoColumn } from 'components/Column' -import Modal from 'components/Modal' -import { RowBetween } from 'components/Row' -import { uniwalletWCV2ConnectConnection } from 'connection' -import { ActivationStatus, useActivationState } from 'connection/activate' -import { ConnectionType } from 'connection/types' -import { UniwalletConnect as UniwalletConnectV2 } from 'connection/WalletConnectV2' -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 uniPng from '../../assets/images/uniwallet_modal_icon.png' -import { DownloadButton } from './DownloadButton' - -const UniwalletConnectWrapper = styled(RowBetween)` - display: flex; - flex-direction: column; - padding: 20px 16px 16px; -` -const HeaderRow = styled(RowBetween)` - display: flex; -` -const QRCodeWrapper = styled(RowBetween)` - aspect-ratio: 1; - border-radius: 12px; - background-color: ${({ theme }) => theme.white}; - margin: 24px 32px 20px; - padding: 10px; -` -const Divider = styled.div` - border-bottom: 1px solid ${({ theme }) => theme.surface3}; - width: 100%; -` - -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 open = - !isIOS && - activationState.status === ActivationStatus.PENDING && - activationState.connection.type === ConnectionType.UNISWAP_WALLET_V2 && - !!uri - - useEffect(() => { - const connectorV2 = uniwalletWCV2ConnectConnection.connector as WalletConnectv2 - connectorV2.events.addListener(UniwalletConnectV2.UNI_URI_AVAILABLE, (uri: string) => { - uri && setUri(uri) - }) - }, []) - - const theme = useTheme() - return ( - - - - - Scan with Uniswap Wallet - - - - - {uri && ( - - )} - - - - - - ) -} - -const InfoSectionWrapper = styled(RowBetween)` - display: flex; - flex-direction: row; - padding-top: 20px; - gap: 20px; -` - -function InfoSection() { - return ( - - - - Don't have Uniswap Wallet? - - - - 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 deleted file mode 100644 index 98d231be33f..00000000000 --- a/src/components/Banner/BaseAnnouncementBanner/index.tsx +++ /dev/null @@ -1,90 +0,0 @@ -import { Trans } from '@lingui/macro' -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 { useScreenSize } from 'hooks/useScreenSize' -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 { BannerButton, BaseBackgroundImage, ButtonRow, PopupContainer, StyledXButton } from './styled' - -export default function BaseWalletBanner() { - const { chainId } = useWeb3React() - const [hideBaseWalletBanner, toggleHideBaseWalletBanner] = useHideBaseWalletBanner() - const location = useLocation() - const isLandingScreen = location.search === '?intro=true' || location.pathname === '/' - - const shouldDisplay = Boolean(!hideBaseWalletBanner && !isLandingScreen && chainId === ChainId.BASE) - - const screenSize = useScreenSize() - - if (isMobileSafari) return null - - return ( - - { - // prevent click from bubbling to UI on the page underneath, i.e. clicking a token row - e.preventDefault() - e.stopPropagation() - toggleHideBaseWalletBanner() - }} - /> - - - - - - Swap on{' '} - - - {' '} - BASE in the Uniswap wallet - - - - - {isIOS ? ( - <> - - openDownloadApp({ - appStoreParams: 'pt=123625782&ct=base-app-banner&mt=8', - }) - } - > - - - {!screenSize['xs'] ? Download : Download app} - - - - openWalletMicrosite()}> - - Learn more - - - - ) : ( - openWalletMicrosite()}> - - Learn more - - - )} - - - ) -} diff --git a/src/components/Banner/BaseAnnouncementBanner/styled.tsx b/src/components/Banner/BaseAnnouncementBanner/styled.tsx deleted file mode 100644 index b96cf72bedd..00000000000 --- a/src/components/Banner/BaseAnnouncementBanner/styled.tsx +++ /dev/null @@ -1,84 +0,0 @@ -import walletBannerPhoneImageSrc from 'assets/images/wallet_banner_phone_image.png' -import { BaseButton } from 'components/Button' -import { OpacityHoverState } from 'components/Common' -import Row from 'components/Row' -import { X } from 'react-feather' -import styled from 'styled-components' -import { Z_INDEX } from 'theme/zIndex' - -export const PopupContainer = styled.div<{ show: boolean }>` - display: flex; - flex-direction: column; - justify-content: space-between; - - ${({ show }) => !show && 'display: none'}; - - background: url(${walletBannerPhoneImageSrc}); - background-repeat: no-repeat; - background-position: top 18px right 15px; - background-size: 166px; - - :hover { - background-size: 170px; - } - transition: background-size ${({ theme }) => theme.transition.duration.medium} - ${({ theme }) => theme.transition.timing.inOut}; - - background-color: ${({ theme }) => theme.chain_84531}; - color: ${({ theme }) => theme.neutral1}; - position: fixed; - z-index: ${Z_INDEX.sticky}; - - padding: 24px 16px 16px; - - border-radius: 20px; - bottom: 20px; - right: 20px; - width: 390px; - height: 164px; - - border: 1px solid ${({ theme }) => theme.surface3}; - - box-shadow: ${({ theme }) => theme.deprecated_deepShadow}; - - @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.md}px`}) { - bottom: 62px; - } - - @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) { - background-position: top 32px right -10px; - width: unset; - right: 10px; - left: 10px; - height: 144px; - } - - user-select: none; -` - -export const BaseBackgroundImage = styled.img` - position: absolute; - top: 0; - left: 0; - height: 138px; - width: 138px; -` -export const ButtonRow = styled(Row)` - gap: 16px; -` -export const StyledXButton = styled(X)` - cursor: pointer; - position: absolute; - top: 21px; - right: 17px; - - color: ${({ theme }) => theme.white}; - ${OpacityHoverState}; -` - -export const BannerButton = styled(BaseButton)` - height: 40px; - border-radius: 16px; - padding: 10px; - ${OpacityHoverState}; -` diff --git a/src/components/Logo/AppleLogo.tsx b/src/components/Logo/AppleLogo.tsx deleted file mode 100644 index 18316bbe8c4..00000000000 --- a/src/components/Logo/AppleLogo.tsx +++ /dev/null @@ -1,8 +0,0 @@ -export const AppleLogo = (props: React.SVGProps) => ( - - - -) diff --git a/src/components/NavBar/MenuDropdown.tsx b/src/components/NavBar/MenuDropdown.tsx index 1167ca03acd..71e6fb6bd53 100644 --- a/src/components/NavBar/MenuDropdown.tsx +++ b/src/components/NavBar/MenuDropdown.tsx @@ -19,9 +19,7 @@ import { NavLink, NavLinkProps } from 'react-router-dom' import { useToggleModal } from 'state/application/hooks' import styled, { useTheme } from 'styled-components' import { isDevelopmentEnv, isStagingEnv } from 'utils/env' -import { openDownloadApp } from 'utils/openDownloadApp' -import { ReactComponent as AppleLogo } from '../../assets/svg/apple_logo.svg' import { ApplicationModal } from '../../state/application/reducer' import * as styles from './MenuDropdown.css' import { NavDropdown } from './NavDropdown' @@ -147,16 +145,6 @@ export const MenuDropdown = () => { - openDownloadApp()}> - - - - - - Download Uniswap Wallet - - - diff --git a/src/components/TopLevelModals/index.tsx b/src/components/TopLevelModals/index.tsx index cdf45402544..b5474782ead 100644 --- a/src/components/TopLevelModals/index.tsx +++ b/src/components/TopLevelModals/index.tsx @@ -1,8 +1,6 @@ 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 AddressClaimModal from 'components/claim/AddressClaimModal' import ConnectedAccountBlocked from 'components/ConnectedAccountBlocked' import FiatOnrampModal from 'components/FiatOnrampModal' @@ -29,8 +27,6 @@ export default function TopLevelModals() { - - diff --git a/src/pages/App.tsx b/src/pages/App.tsx index e882caae0cf..c4306b696fa 100644 --- a/src/pages/App.tsx +++ b/src/pages/App.tsx @@ -6,7 +6,7 @@ import { UK_BANNER_HEIGHT, UK_BANNER_HEIGHT_MD, UK_BANNER_HEIGHT_SM, UkBanner } import { useFeatureFlagsIsLoaded } from 'featureFlags' import { useAtom } from 'jotai' import { useBag } from 'nft/hooks/useBag' -import { lazy, Suspense, useEffect, useLayoutEffect, useMemo, useState } from 'react' +import { lazy, Suspense, useEffect, useMemo, useState } from 'react' import { Navigate, Route, Routes, useLocation, useSearchParams } from 'react-router-dom' import { shouldDisableNFTRoutesAtom } from 'state/application/atoms' import { useAppSelector } from 'state/hooks' @@ -18,7 +18,6 @@ import { flexRowNoWrap } from 'theme/styles' import { Z_INDEX } from 'theme/zIndex' import { STATSIG_DUMMY_KEY } from 'tracing' import { getEnvName } from 'utils/env' -import { getDownloadAppLink } from 'utils/openDownloadApp' import { RouteDefinition, routes, useRouterConfig } from './RouteDefinitions' @@ -128,18 +127,6 @@ export default function App() { [account] ) - // redirect address to landing pages until implemented - const shouldRedirectToAppInstall = pathname?.startsWith('/address/') - useLayoutEffect(() => { - if (shouldRedirectToAppInstall) { - window.location.href = getDownloadAppLink() - } - }, [shouldRedirectToAppInstall]) - - if (shouldRedirectToAppInstall) { - return null - } - const blockedPaths = document.querySelector('meta[property="x:blocked-paths"]')?.getAttribute('content')?.split(',') const shouldBlockPath = blockedPaths?.includes(pathname) ?? false if (shouldBlockPath && pathname !== '/swap') { diff --git a/src/pages/Landing/index.ios.test.tsx b/src/pages/Landing/index.ios.test.tsx deleted file mode 100644 index b76276d4dbc..00000000000 --- a/src/pages/Landing/index.ios.test.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { render } from 'test-utils/render' - -import Landing from '.' - -jest.mock('utils/userAgent', () => { - return { - isIOS: true, - } -}) - -it('renders ios microsite link', () => { - const { container } = render() - expect(container.innerHTML.includes(`https://apps.apple.com/app/apple-store/id6443944476`)).toBeTruthy() -}) diff --git a/src/pages/Landing/index.nonios.test.tsx b/src/pages/Landing/index.nonios.test.tsx deleted file mode 100644 index 2914f084b88..00000000000 --- a/src/pages/Landing/index.nonios.test.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { render } from 'test-utils/render' - -import Landing from '.' - -jest.mock('utils/userAgent', () => { - return { - isIOS: false, - } -}) - -it('renders non-ios microsite link', () => { - const { container } = render() - expect(container.innerHTML.includes(`https://wallet.uniswap.org/?utm_source=home_page`)).toBeTruthy() -}) diff --git a/src/pages/Landing/index.tsx b/src/pages/Landing/index.tsx index 9f65e00328e..144a9158263 100644 --- a/src/pages/Landing/index.tsx +++ b/src/pages/Landing/index.tsx @@ -5,7 +5,6 @@ import { MAIN_CARDS, MORE_CARDS } from 'components/About/constants' import ProtocolBanner from 'components/About/ProtocolBanner' import { useAccountDrawer } from 'components/AccountDrawer' import { BaseButton } from 'components/Button' -import { AppleLogo } from 'components/Logo/AppleLogo' import { useDisableNFTRoutes } from 'hooks/useDisableNFTRoutes' import Swap from 'pages/Swap' import { parse } from 'qs' @@ -20,7 +19,6 @@ import { BREAKPOINTS } from 'theme' import { useIsDarkMode } from 'theme/components/ThemeToggle' import { textFadeIn, TRANSITION_DURATIONS } from 'theme/styles' import { Z_INDEX } from 'theme/zIndex' -import { getDownloadAppLinkProps } from 'utils/openDownloadApp' const PageContainer = styled.div` position: absolute; @@ -105,22 +103,6 @@ const ContentContainer = styled.div<{ isDarkMode: boolean }>` } ` -const DownloadWalletLink = styled.a` - display: inline-flex; - gap: 8px; - margin-top: 24px; - color: ${({ theme }) => theme.neutral2}; - text-decoration: none; - font-size: 16px; - line-height: 24px; - font-weight: 535; - text-align: center; - - :hover { - color: ${({ theme }) => theme.neutral3}; - } -` - const TitleText = styled.h1<{ isDarkMode: boolean; $visible: boolean }>` color: transparent; font-size: 36px; @@ -442,17 +424,6 @@ export default function Landing() { Learn more - - - - Download the Uniswap Wallet for iOS - diff --git a/src/state/user/hooks.tsx b/src/state/user/hooks.tsx index 793e0f1bd77..78d3eed146b 100644 --- a/src/state/user/hooks.tsx +++ b/src/state/user/hooks.tsx @@ -15,7 +15,6 @@ import { useDefaultActiveTokens } from '../../hooks/Tokens' import { addSerializedPair, addSerializedToken, - updateHideBaseWalletBanner, updateHideClosedPositions, updateUserDeadline, updateUserLocale, @@ -206,17 +205,6 @@ export function usePairAdder(): (pair: Pair) => void { ) } -export function useHideBaseWalletBanner(): [boolean, () => void] { - const dispatch = useAppDispatch() - const hideBaseWalletBanner = useAppSelector((state) => state.user.hideBaseWalletBanner) - - const toggleHideBaseWalletBanner = useCallback(() => { - dispatch(updateHideBaseWalletBanner({ hideBaseWalletBanner: true })) - }, [dispatch]) - - return [hideBaseWalletBanner, toggleHideBaseWalletBanner] -} - export function useUserDisabledUniswapX(): boolean { return useAppSelector((state) => state.user.disabledUniswapX) ?? false } diff --git a/src/utils/openDownloadApp.ts b/src/utils/openDownloadApp.ts deleted file mode 100644 index c68d6d1a14f..00000000000 --- a/src/utils/openDownloadApp.ts +++ /dev/null @@ -1,63 +0,0 @@ -import { isIOS } from 'utils/userAgent' - -const APP_STORE_LINK = 'https://apps.apple.com/app/apple-store/id6443944476' -const MICROSITE_LINK = 'https://wallet.uniswap.org/' - -type OpenDownloadAppOptions = { - appStoreParams?: string - microSiteParams?: string -} - -const defaultDownloadAppOptions = { - appStoreParams: `pt=123625782&ct=In-App-Banners&mt=8`, -} - -/** - * Note: openDownloadApp and getDownloadAppLink are equivalent functions, the first just runs imperatively - * and adds an analytics event, where the other only returns a link. Typically you'll use both: - * - * openDownloadApp(options)} /> - * - * This way with JS disabled and when hovering the you see and nav to the full href properly, - * but with JS on it will send the analytics event before navigating to the href. - * - * I've added a helper `getDownloadAppLinkProps` that unifies this behavior into one thing. - */ - -export function openDownloadApp(options: OpenDownloadAppOptions = defaultDownloadAppOptions) { - if (isIOS) { - openAppStore({ urlParamString: options?.appStoreParams }) - } else { - openWalletMicrosite({ urlParamString: options?.microSiteParams }) - } -} - -// if you need this by itself can add export, not used externally for now -export const getDownloadAppLink = (options: OpenDownloadAppOptions = defaultDownloadAppOptions) => - isIOS - ? linkWithParams(APP_STORE_LINK, options?.appStoreParams) - : linkWithParams(MICROSITE_LINK, options?.microSiteParams) - -export const getDownloadAppLinkProps = (options: OpenDownloadAppOptions = defaultDownloadAppOptions) => { - return { - href: getDownloadAppLink(options), - onClick(e: { preventDefault: () => void }) { - e.preventDefault() - openDownloadApp(options) - }, - } -} - -type AnalyticsLinkOptions = { - urlParamString?: string -} - -const openAppStore = (options?: AnalyticsLinkOptions) => { - window.open(linkWithParams(APP_STORE_LINK, options?.urlParamString), /* target = */ 'uniswap_wallet_appstore') -} - -export const openWalletMicrosite = (options?: AnalyticsLinkOptions) => { - window.open(linkWithParams(MICROSITE_LINK, options?.urlParamString), /* target = */ 'uniswap_wallet_microsite') -} - -const linkWithParams = (link: string, params?: string) => link + (params ? `?${params}` : '') diff --git a/src/utils/userAgent.ts b/src/utils/userAgent.ts index 5b40ab76685..d5b8b8f1ad2 100644 --- a/src/utils/userAgent.ts +++ b/src/utils/userAgent.ts @@ -8,5 +8,3 @@ export const isMobile = type === 'mobile' || type === 'tablet' const platform = parser.getOS().name export const isIOS = platform === 'iOS' export const isNonIOSPhone = !isIOS && type === 'mobile' - -export const isMobileSafari = isMobile && isIOS && name?.toLowerCase().includes('safari')