Commit af800799 authored by Jack Short's avatar Jack Short Committed by GitHub

feat: remove buy button and landing terminology for uk (#7386)

* feat: remove buy button and landing terminology for uk

* removing tarballs

* mocked setup

* setting compliance to gb

* turning back on defaults

* cache for user

* moving to hook and grid sizing

* fixing tests

* comments

* landinage page cards

* cypress test

* removing extra store
parent c7a8e9e5
...@@ -27,7 +27,10 @@ beforeEach(() => { ...@@ -27,7 +27,10 @@ beforeEach(() => {
server_upload_time: Date.now(), server_upload_time: Date.now(),
payload_size_bytes: byteSize, payload_size_bytes: byteSize,
events_ingested: req.body.events.length, events_ingested: req.body.events.length,
}) }),
{
'origin-country': 'US',
}
) )
}).intercept('https://*.sentry.io', { statusCode: 200 }) }).intercept('https://*.sentry.io', { statusCode: 200 })
......
...@@ -52,3 +52,8 @@ export const sendAnalyticsEvent: typeof sendAnalyticsTraceEvent = (event, proper ...@@ -52,3 +52,8 @@ export const sendAnalyticsEvent: typeof sendAnalyticsTraceEvent = (event, proper
sendAnalyticsTraceEvent(event, properties) sendAnalyticsTraceEvent(event, properties)
} }
} }
// This is only used for initial page load so we can get the user's country
export const sendInitializationEvent: typeof sendAnalyticsTraceEvent = (event, properties) => {
sendAnalyticsTraceEvent(event, properties)
}
...@@ -14,6 +14,7 @@ import Tooltip from 'components/Tooltip' ...@@ -14,6 +14,7 @@ import Tooltip from 'components/Tooltip'
import { getConnection } from 'connection' import { getConnection } from 'connection'
import { useDisableNFTRoutes } from 'hooks/useDisableNFTRoutes' import { useDisableNFTRoutes } from 'hooks/useDisableNFTRoutes'
import useENSName from 'hooks/useENSName' import useENSName from 'hooks/useENSName'
import { useIsNotOriginCountry } from 'hooks/useIsNotOriginCountry'
import { useProfilePageState, useSellAsset, useWalletCollections } from 'nft/hooks' import { useProfilePageState, useSellAsset, useWalletCollections } from 'nft/hooks'
import { useIsNftClaimAvailable } from 'nft/hooks/useIsNftClaimAvailable' import { useIsNftClaimAvailable } from 'nft/hooks/useIsNftClaimAvailable'
import { ProfilePageStateType } from 'nft/types' import { ProfilePageStateType } from 'nft/types'
...@@ -159,6 +160,7 @@ export default function AuthenticatedHeader({ account, openSettings }: { account ...@@ -159,6 +160,7 @@ export default function AuthenticatedHeader({ account, openSettings }: { account
const resetSellAssets = useSellAsset((state) => state.reset) const resetSellAssets = useSellAsset((state) => state.reset)
const clearCollectionFilters = useWalletCollections((state) => state.clearCollectionFilters) const clearCollectionFilters = useWalletCollections((state) => state.clearCollectionFilters)
const isClaimAvailable = useIsNftClaimAvailable((state) => state.isClaimAvailable) const isClaimAvailable = useIsNftClaimAvailable((state) => state.isClaimAvailable)
const shouldShowBuyFiatButton = useIsNotOriginCountry('GB')
const { formatNumber } = useFormatter() const { formatNumber } = useFormatter()
const shouldDisableNFTRoutes = useDisableNFTRoutes() const shouldDisableNFTRoutes = useDisableNFTRoutes()
...@@ -304,26 +306,28 @@ export default function AuthenticatedHeader({ account, openSettings }: { account ...@@ -304,26 +306,28 @@ export default function AuthenticatedHeader({ account, openSettings }: { account
<Trans>View and sell NFTs</Trans> <Trans>View and sell NFTs</Trans>
</HeaderButton> </HeaderButton>
)} )}
<HeaderButton {shouldShowBuyFiatButton && (
size={ButtonSize.medium} <HeaderButton
emphasis={ButtonEmphasis.highSoft} size={ButtonSize.medium}
onClick={handleBuyCryptoClick} emphasis={ButtonEmphasis.highSoft}
disabled={disableBuyCryptoButton} onClick={handleBuyCryptoClick}
data-testid="wallet-buy-crypto" disabled={disableBuyCryptoButton}
> data-testid="wallet-buy-crypto"
{error ? ( >
<ThemedText.BodyPrimary>{error}</ThemedText.BodyPrimary> {error ? (
) : ( <ThemedText.BodyPrimary>{error}</ThemedText.BodyPrimary>
<> ) : (
{fiatOnrampAvailabilityLoading ? ( <>
<StyledLoadingButtonSpinner /> {fiatOnrampAvailabilityLoading ? (
) : ( <StyledLoadingButtonSpinner />
<CreditCard height="20px" width="20px" /> ) : (
)}{' '} <CreditCard height="20px" width="20px" />
<Trans>Buy crypto</Trans> )}{' '}
</> <Trans>Buy crypto</Trans>
)} </>
</HeaderButton> )}
</HeaderButton>
)}
{Boolean(!fiatOnrampAvailable && fiatOnrampAvailabilityChecked) && ( {Boolean(!fiatOnrampAvailable && fiatOnrampAvailabilityChecked) && (
<FiatOnrampNotAvailableText marginTop="8px"> <FiatOnrampNotAvailableText marginTop="8px">
<Trans>Not available in your region</Trans> <Trans>Not available in your region</Trans>
......
import userEvent from '@testing-library/user-event' import userEvent from '@testing-library/user-event'
import { useWeb3React } from '@web3-react/core' import { useWeb3React } from '@web3-react/core'
import { useAccountDrawer } from 'components/AccountDrawer' import { useAccountDrawer } from 'components/AccountDrawer'
import store from 'state'
import { setOriginCountry } from 'state/user/reducer'
import { mocked } from 'test-utils/mocked' import { mocked } from 'test-utils/mocked'
import { act, fireEvent, render, screen } from 'test-utils/render' import { act, fireEvent, render, screen } from 'test-utils/render'
...@@ -45,6 +47,7 @@ describe('SwapBuyFiatButton.tsx', () => { ...@@ -45,6 +47,7 @@ describe('SwapBuyFiatButton.tsx', () => {
let useOpenModal: jest.Mock<any, any> let useOpenModal: jest.Mock<any, any>
beforeAll(() => { beforeAll(() => {
store.dispatch(setOriginCountry('US'))
toggleWalletDrawer = jest.fn() toggleWalletDrawer = jest.fn()
useOpenModal = jest.fn() useOpenModal = jest.fn()
}) })
......
...@@ -5,9 +5,11 @@ import { TraceEvent } from 'analytics' ...@@ -5,9 +5,11 @@ import { TraceEvent } from 'analytics'
import { useAccountDrawer } from 'components/AccountDrawer' import { useAccountDrawer } from 'components/AccountDrawer'
import { ButtonText } from 'components/Button' import { ButtonText } from 'components/Button'
import { MouseoverTooltip } from 'components/Tooltip' import { MouseoverTooltip } from 'components/Tooltip'
import { useIsNotOriginCountry } from 'hooks/useIsNotOriginCountry'
import { useCallback, useEffect, useState } from 'react' import { useCallback, useEffect, useState } from 'react'
import styled from 'styled-components' import styled from 'styled-components'
import { ExternalLink } from 'theme/components' import { ExternalLink } from 'theme/components'
import { textFadeIn } from 'theme/styles'
import { useFiatOnrampAvailability, useOpenModal } from '../../state/application/hooks' import { useFiatOnrampAvailability, useOpenModal } from '../../state/application/hooks'
import { ApplicationModal } from '../../state/application/reducer' import { ApplicationModal } from '../../state/application/reducer'
...@@ -25,6 +27,7 @@ enum BuyFiatFlowState { ...@@ -25,6 +27,7 @@ enum BuyFiatFlowState {
} }
const StyledTextButton = styled(ButtonText)` const StyledTextButton = styled(ButtonText)`
${textFadeIn}
color: ${({ theme }) => theme.neutral2}; color: ${({ theme }) => theme.neutral2};
gap: 4px; gap: 4px;
font-weight: 485; font-weight: 485;
...@@ -39,6 +42,7 @@ const StyledTextButton = styled(ButtonText)` ...@@ -39,6 +42,7 @@ const StyledTextButton = styled(ButtonText)`
export default function SwapBuyFiatButton() { export default function SwapBuyFiatButton() {
const { account } = useWeb3React() const { account } = useWeb3React()
const openFiatOnRampModal = useOpenModal(ApplicationModal.FIAT_ONRAMP) const openFiatOnRampModal = useOpenModal(ApplicationModal.FIAT_ONRAMP)
const shouldShowBuyFiatButton = useIsNotOriginCountry('GB')
const [checkFiatRegionAvailability, setCheckFiatRegionAvailability] = useState(false) const [checkFiatRegionAvailability, setCheckFiatRegionAvailability] = useState(false)
const { const {
available: fiatOnrampAvailable, available: fiatOnrampAvailable,
...@@ -97,6 +101,10 @@ export default function SwapBuyFiatButton() { ...@@ -97,6 +101,10 @@ export default function SwapBuyFiatButton() {
const fiatOnRampsUnavailableTooltipDisabled = const fiatOnRampsUnavailableTooltipDisabled =
!fiatOnrampAvailabilityChecked || (fiatOnrampAvailabilityChecked && fiatOnrampAvailable) !fiatOnrampAvailabilityChecked || (fiatOnrampAvailabilityChecked && fiatOnrampAvailable)
if (!shouldShowBuyFiatButton) {
return null
}
return ( return (
<MouseoverTooltip <MouseoverTooltip
text={ text={
......
...@@ -117,6 +117,8 @@ exports[`SwapBuyFiatButton.tsx matches base snapshot 1`] = ` ...@@ -117,6 +117,8 @@ exports[`SwapBuyFiatButton.tsx matches base snapshot 1`] = `
} }
.c4 { .c4 {
-webkit-animation: iAjNNh 125ms ease-in;
animation: iAjNNh 125ms ease-in;
color: #7D7D7D; color: #7D7D7D;
gap: 4px; gap: 4px;
font-weight: 485; font-weight: 485;
......
import { useAppSelector } from 'state/hooks'
import { AppState } from 'state/reducer'
export function useIsNotOriginCountry(country: string) {
const originCountry = useAppSelector((state: AppState) => state.user.originCountry)
return Boolean(originCountry) && originCountry !== country
}
import { CustomUserProperties, getBrowser, SharedEventName } from '@uniswap/analytics-events' import { CustomUserProperties, getBrowser, SharedEventName } from '@uniswap/analytics-events'
import { useWeb3React } from '@web3-react/core' import { useWeb3React } from '@web3-react/core'
import { getDeviceId, sendAnalyticsEvent, Trace, user } from 'analytics' import { getDeviceId, sendAnalyticsEvent, sendInitializationEvent, Trace, user } from 'analytics'
import ErrorBoundary from 'components/ErrorBoundary' import ErrorBoundary from 'components/ErrorBoundary'
import Loader from 'components/Icons/LoadingSpinner' import Loader from 'components/Icons/LoadingSpinner'
import NavBar, { PageTabs } from 'components/NavBar' import NavBar, { PageTabs } from 'components/NavBar'
...@@ -149,7 +149,7 @@ export default function App() { ...@@ -149,7 +149,7 @@ export default function App() {
const serviceWorkerProperty = isServiceWorkerInstalled ? (isServiceWorkerHit ? 'hit' : 'miss') : 'uninstalled' const serviceWorkerProperty = isServiceWorkerInstalled ? (isServiceWorkerHit ? 'hit' : 'miss') : 'uninstalled'
const pageLoadProperties = { service_worker: serviceWorkerProperty } const pageLoadProperties = { service_worker: serviceWorkerProperty }
sendAnalyticsEvent(SharedEventName.APP_LOADED, pageLoadProperties) sendInitializationEvent(SharedEventName.APP_LOADED, pageLoadProperties)
const sendWebVital = const sendWebVital =
(metric: string) => (metric: string) =>
({ delta }: Metric) => ({ delta }: Metric) =>
......
...@@ -1152,6 +1152,8 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1152,6 +1152,8 @@ exports[`disable nft on landing page does not render nft information and card 1`
} }
.c18 { .c18 {
-webkit-animation: iAjNNh 125ms ease-in;
animation: iAjNNh 125ms ease-in;
color: #7D7D7D; color: #7D7D7D;
gap: 4px; gap: 4px;
font-weight: 485; font-weight: 485;
...@@ -1345,6 +1347,26 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1345,6 +1347,26 @@ exports[`disable nft on landing page does not render nft information and card 1`
pointer-events: auto; pointer-events: auto;
} }
.c64 {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
gap: 8px;
margin-top: 24px;
color: #7D7D7D;
-webkit-text-decoration: none;
text-decoration: none;
font-size: 16px;
line-height: 24px;
font-weight: 535;
text-align: center;
}
.c64:hover {
color: #CECECE;
}
.c55 { .c55 {
color: transparent; color: transparent;
font-size: 36px; font-size: 36px;
...@@ -1355,6 +1377,8 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1355,6 +1377,8 @@ exports[`disable nft on landing page does not render nft information and card 1`
background: linear-gradient(10deg,rgba(255,79,184,1) 0%,rgba(255,159,251,1) 100%); background: linear-gradient(10deg,rgba(255,79,184,1) 0%,rgba(255,159,251,1) 100%);
background-clip: text; background-clip: text;
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-animation: iAjNNh 125ms ease-in;
animation: iAjNNh 125ms ease-in;
} }
.c57 { .c57 {
...@@ -1376,6 +1400,8 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1376,6 +1400,8 @@ exports[`disable nft on landing page does not render nft information and card 1`
-webkit-justify-content: center; -webkit-justify-content: center;
-ms-flex-pack: center; -ms-flex-pack: center;
justify-content: center; justify-content: center;
-webkit-animation: iAjNNh 125ms ease-in;
animation: iAjNNh 125ms ease-in;
} }
.c59 { .c59 {
...@@ -1521,26 +1547,6 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1521,26 +1547,6 @@ exports[`disable nft on landing page does not render nft information and card 1`
width: 100%; width: 100%;
} }
.c64 {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
gap: 8px;
margin-top: 24px;
color: #7D7D7D;
-webkit-text-decoration: none;
text-decoration: none;
font-size: 16px;
line-height: 24px;
font-weight: 535;
text-align: center;
}
.c64:hover {
color: #CECECE;
}
@media screen and (min-width:1024px) { @media screen and (min-width:1024px) {
.c84 { .c84 {
-webkit-flex-direction: row; -webkit-flex-direction: row;
...@@ -3780,6 +3786,8 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3780,6 +3786,8 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
} }
.c18 { .c18 {
-webkit-animation: iAjNNh 125ms ease-in;
animation: iAjNNh 125ms ease-in;
color: #7D7D7D; color: #7D7D7D;
gap: 4px; gap: 4px;
font-weight: 485; font-weight: 485;
...@@ -3973,6 +3981,26 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3973,6 +3981,26 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
pointer-events: auto; pointer-events: auto;
} }
.c64 {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
gap: 8px;
margin-top: 24px;
color: #7D7D7D;
-webkit-text-decoration: none;
text-decoration: none;
font-size: 16px;
line-height: 24px;
font-weight: 535;
text-align: center;
}
.c64:hover {
color: #CECECE;
}
.c55 { .c55 {
color: transparent; color: transparent;
font-size: 36px; font-size: 36px;
...@@ -3983,6 +4011,8 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3983,6 +4011,8 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
background: linear-gradient(10deg,rgba(255,79,184,1) 0%,rgba(255,159,251,1) 100%); background: linear-gradient(10deg,rgba(255,79,184,1) 0%,rgba(255,159,251,1) 100%);
background-clip: text; background-clip: text;
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-animation: iAjNNh 125ms ease-in;
animation: iAjNNh 125ms ease-in;
} }
.c57 { .c57 {
...@@ -4004,6 +4034,8 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4004,6 +4034,8 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
-webkit-justify-content: center; -webkit-justify-content: center;
-ms-flex-pack: center; -ms-flex-pack: center;
justify-content: center; justify-content: center;
-webkit-animation: iAjNNh 125ms ease-in;
animation: iAjNNh 125ms ease-in;
} }
.c59 { .c59 {
...@@ -4149,26 +4181,6 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4149,26 +4181,6 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
width: 100%; width: 100%;
} }
.c64 {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
gap: 8px;
margin-top: 24px;
color: #7D7D7D;
-webkit-text-decoration: none;
text-decoration: none;
font-size: 16px;
line-height: 24px;
font-weight: 535;
text-align: center;
}
.c64:hover {
color: #CECECE;
}
@media screen and (min-width:1024px) { @media screen and (min-width:1024px) {
.c85 { .c85 {
-webkit-flex-direction: row; -webkit-flex-direction: row;
......
import { useDisableNFTRoutes } from 'hooks/useDisableNFTRoutes' import { useDisableNFTRoutes } from 'hooks/useDisableNFTRoutes'
import store from 'state'
import { setOriginCountry } from 'state/user/reducer'
import { mocked } from 'test-utils/mocked' import { mocked } from 'test-utils/mocked'
import { render } from 'test-utils/render' import { render } from 'test-utils/render'
...@@ -7,6 +9,10 @@ import Landing from '.' ...@@ -7,6 +9,10 @@ import Landing from '.'
jest.mock('hooks/useDisableNFTRoutes') jest.mock('hooks/useDisableNFTRoutes')
describe('disable nft on landing page', () => { describe('disable nft on landing page', () => {
beforeAll(() => {
store.dispatch(setOriginCountry('US'))
})
it('renders nft information and card', () => { it('renders nft information and card', () => {
mocked(useDisableNFTRoutes).mockReturnValue(false) mocked(useDisableNFTRoutes).mockReturnValue(false)
const { container } = render(<Landing />) const { container } = render(<Landing />)
......
...@@ -16,10 +16,11 @@ import { ArrowDownCircle } from 'react-feather' ...@@ -16,10 +16,11 @@ import { ArrowDownCircle } from 'react-feather'
import { Navigate, useLocation, useNavigate } from 'react-router-dom' import { Navigate, useLocation, useNavigate } from 'react-router-dom'
import { Link as NativeLink } from 'react-router-dom' import { Link as NativeLink } from 'react-router-dom'
import { useAppSelector } from 'state/hooks' import { useAppSelector } from 'state/hooks'
import { AppState } from 'state/reducer'
import styled, { css } from 'styled-components' import styled, { css } from 'styled-components'
import { BREAKPOINTS } from 'theme' import { BREAKPOINTS } from 'theme'
import { useIsDarkMode } from 'theme/components/ThemeToggle' import { useIsDarkMode } from 'theme/components/ThemeToggle'
import { TRANSITION_DURATIONS } from 'theme/styles' import { textFadeIn, TRANSITION_DURATIONS } from 'theme/styles'
import { Z_INDEX } from 'theme/zIndex' import { Z_INDEX } from 'theme/zIndex'
import { getDownloadAppLinkProps } from 'utils/openDownloadApp' import { getDownloadAppLinkProps } from 'utils/openDownloadApp'
...@@ -106,7 +107,23 @@ const ContentContainer = styled.div<{ isDarkMode: boolean }>` ...@@ -106,7 +107,23 @@ const ContentContainer = styled.div<{ isDarkMode: boolean }>`
} }
` `
const TitleText = styled.h1<{ 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; color: transparent;
font-size: 36px; font-size: 36px;
line-height: 44px; line-height: 44px;
...@@ -124,6 +141,13 @@ const TitleText = styled.h1<{ isDarkMode: boolean }>` ...@@ -124,6 +141,13 @@ const TitleText = styled.h1<{ isDarkMode: boolean }>`
background-clip: text; background-clip: text;
-webkit-background-clip: text; -webkit-background-clip: text;
${({ $visible }) =>
$visible
? css`
${textFadeIn}
`
: 'opacity: 0;'}
@media screen and (min-width: ${BREAKPOINTS.sm}px) { @media screen and (min-width: ${BREAKPOINTS.sm}px) {
font-size: 48px; font-size: 48px;
line-height: 56px; line-height: 56px;
...@@ -150,9 +174,16 @@ const SubText = styled.div` ...@@ -150,9 +174,16 @@ const SubText = styled.div`
} }
` `
const SubTextContainer = styled.div` const SubTextContainer = styled.div<{ $visible: boolean }>`
display: flex; display: flex;
justify-content: center; justify-content: center;
${({ $visible }) =>
$visible
? css`
${textFadeIn}
`
: 'opacity: 0;'}
` `
const LandingButton = styled(BaseButton)` const LandingButton = styled(BaseButton)`
...@@ -303,9 +334,36 @@ export default function Landing() { ...@@ -303,9 +334,36 @@ export default function Landing() {
const cardsRef = useRef<HTMLDivElement>(null) const cardsRef = useRef<HTMLDivElement>(null)
const selectedWallet = useAppSelector((state) => state.user.selectedWallet) const selectedWallet = useAppSelector((state) => state.user.selectedWallet)
const shouldDisableNFTRoutes = useDisableNFTRoutes() const shouldDisableNFTRoutes = useDisableNFTRoutes()
const cards = useMemo( const originCountry = useAppSelector((state: AppState) => state.user.originCountry)
() => MAIN_CARDS.filter((card) => !(shouldDisableNFTRoutes && card.to.startsWith('/nft'))), const renderUkSpecificText = Boolean(originCountry) && originCountry === 'GB'
[shouldDisableNFTRoutes] const cards = useMemo(() => {
const mainCards = MAIN_CARDS.filter(
(card) =>
!(shouldDisableNFTRoutes && card.to.startsWith('/nft')) && !(card.to.startsWith('/swap') && !originCountry)
)
mainCards.forEach((card) => {
if (card.to.startsWith('/swap') && renderUkSpecificText) {
card.description = 'Explore tokens on Ethereum, Polygon, Optimism and more '
card.cta = 'Discover Tokens'
}
})
return mainCards
}, [originCountry, renderUkSpecificText, shouldDisableNFTRoutes])
const extraCards = useMemo(
() =>
MORE_CARDS.filter(
(card) =>
!(
card.to.startsWith(
'https://support.uniswap.org/hc/en-us/articles/11306574799117-How-to-use-Moon-Pay-on-the-Uniswap-web-app-'
) &&
(!originCountry || renderUkSpecificText)
)
),
[originCountry, renderUkSpecificText]
) )
const [accountDrawerOpen] = useAccountDrawer() const [accountDrawerOpen] = useAccountDrawer()
...@@ -320,6 +378,35 @@ export default function Landing() { ...@@ -320,6 +378,35 @@ export default function Landing() {
const location = useLocation() const location = useLocation()
const queryParams = parse(location.search, { ignoreQueryPrefix: true }) const queryParams = parse(location.search, { ignoreQueryPrefix: true })
const titles = useMemo(() => {
if (!originCountry) {
return {
header: null,
subHeader: null,
}
}
if (renderUkSpecificText) {
return {
header: <Trans>Go direct to DeFi with Uniswap</Trans>,
subHeader: <Trans>Swap and explore tokens and NFTs</Trans>,
}
}
if (shouldDisableNFTRoutes) {
return {
header: <Trans>Trade crypto with confidence</Trans>,
subHeader: <Trans>Buy, sell, and explore tokens</Trans>,
}
}
return {
header: <Trans>Trade crypto and NFTs with confidence</Trans>,
subHeader: <Trans>Buy, sell, and explore tokens and NFTs</Trans>,
}
}, [originCountry, renderUkSpecificText, shouldDisableNFTRoutes])
if (selectedWallet && !queryParams.intro) { if (selectedWallet && !queryParams.intro) {
return <Navigate to={{ ...location, pathname: '/swap' }} replace /> return <Navigate to={{ ...location, pathname: '/swap' }} replace />
} }
...@@ -343,21 +430,11 @@ export default function Landing() { ...@@ -343,21 +430,11 @@ export default function Landing() {
<Glow /> <Glow />
</GlowContainer> </GlowContainer>
<ContentContainer isDarkMode={isDarkMode}> <ContentContainer isDarkMode={isDarkMode}>
<TitleText isDarkMode={isDarkMode}> <TitleText isDarkMode={isDarkMode} $visible={!!originCountry}>
{shouldDisableNFTRoutes ? ( {titles.header}
<Trans>Trade crypto with confidence</Trans>
) : (
<Trans>Trade crypto and NFTs with confidence</Trans>
)}
</TitleText> </TitleText>
<SubTextContainer> <SubTextContainer $visible={!!originCountry}>
<SubText> <SubText>{titles.subHeader}</SubText>
{shouldDisableNFTRoutes ? (
<Trans>Buy, sell, and explore tokens</Trans>
) : (
<Trans>Buy, sell, and explore tokens and NFTs</Trans>
)}
</SubText>
</SubTextContainer> </SubTextContainer>
<ActionsContainer> <ActionsContainer>
<TraceEvent <TraceEvent
...@@ -402,8 +479,8 @@ export default function Landing() { ...@@ -402,8 +479,8 @@ export default function Landing() {
/> />
))} ))}
</CardGrid> </CardGrid>
<CardGrid cols={3}> <CardGrid cols={extraCards.length}>
{MORE_CARDS.map(({ darkIcon, lightIcon, ...card }) => ( {extraCards.map(({ darkIcon, lightIcon, ...card }) => (
<Card {...card} icon={isDarkMode ? darkIcon : lightIcon} key={card.title} type={CardType.Secondary} /> <Card {...card} icon={isDarkMode ? darkIcon : lightIcon} key={card.title} type={CardType.Secondary} />
))} ))}
</CardGrid> </CardGrid>
...@@ -414,19 +491,3 @@ export default function Landing() { ...@@ -414,19 +491,3 @@ export default function Landing() {
</Trace> </Trace>
) )
} }
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};
}
`
...@@ -91,6 +91,7 @@ interface ExpectedUserState { ...@@ -91,6 +91,7 @@ interface ExpectedUserState {
showSurveyPopup?: boolean showSurveyPopup?: boolean
disabledUniswapX?: boolean disabledUniswapX?: boolean
optedOutOfUniswapX?: boolean optedOutOfUniswapX?: boolean
originCountry?: string
} }
assert<Equals<UserState, ExpectedUserState>>() assert<Equals<UserState, ExpectedUserState>>()
......
...@@ -54,6 +54,8 @@ export interface UserState { ...@@ -54,6 +54,8 @@ export interface UserState {
optedOutOfUniswapX?: boolean optedOutOfUniswapX?: boolean
// undefined means has not gone through A/B split yet // undefined means has not gone through A/B split yet
showSurveyPopup?: boolean showSurveyPopup?: boolean
originCountry?: string
} }
function pairKey(token0Address: string, token1Address: string) { function pairKey(token0Address: string, token1Address: string) {
...@@ -73,6 +75,7 @@ export const initialState: UserState = { ...@@ -73,6 +75,7 @@ export const initialState: UserState = {
timestamp: currentTimestamp(), timestamp: currentTimestamp(),
hideBaseWalletBanner: false, hideBaseWalletBanner: false,
showSurveyPopup: undefined, showSurveyPopup: undefined,
originCountry: undefined,
} }
const userSlice = createSlice({ const userSlice = createSlice({
...@@ -133,12 +136,16 @@ const userSlice = createSlice({ ...@@ -133,12 +136,16 @@ const userSlice = createSlice({
} }
state.timestamp = currentTimestamp() state.timestamp = currentTimestamp()
}, },
setOriginCountry(state, { payload: country }) {
state.originCountry = country
},
}, },
}) })
export const { export const {
addSerializedPair, addSerializedPair,
addSerializedToken, addSerializedToken,
setOriginCountry,
updateSelectedWallet, updateSelectedWallet,
updateHideClosedPositions, updateHideClosedPositions,
updateUserRouterPreference, updateUserRouterPreference,
......
...@@ -2,8 +2,10 @@ import * as Sentry from '@sentry/react' ...@@ -2,8 +2,10 @@ import * as Sentry from '@sentry/react'
import { BrowserTracing } from '@sentry/tracing' import { BrowserTracing } from '@sentry/tracing'
import { SharedEventName } from '@uniswap/analytics-events' import { SharedEventName } from '@uniswap/analytics-events'
import { initializeAnalytics, OriginApplication } from 'analytics' import { initializeAnalytics, OriginApplication } from 'analytics'
import { isDevelopmentEnv, isSentryEnabled } from 'utils/env' import store from 'state'
import { getEnvName, isProductionEnv } from 'utils/env' import { setOriginCountry } from 'state/user/reducer'
import { isDevelopmentEnv, isProductionEnv, isSentryEnabled } from 'utils/env'
import { getEnvName } from 'utils/env'
import { v4 as uuidv4 } from 'uuid' import { v4 as uuidv4 } from 'uuid'
import { beforeSend } from './errors' import { beforeSend } from './errors'
...@@ -45,4 +47,5 @@ initializeAnalytics(AMPLITUDE_DUMMY_KEY, OriginApplication.INTERFACE, { ...@@ -45,4 +47,5 @@ initializeAnalytics(AMPLITUDE_DUMMY_KEY, OriginApplication.INTERFACE, {
commitHash: process.env.REACT_APP_GIT_COMMIT_HASH, commitHash: process.env.REACT_APP_GIT_COMMIT_HASH,
isProductionEnv: isProductionEnv(), isProductionEnv: isProductionEnv(),
debug: isDevelopmentEnv(), debug: isDevelopmentEnv(),
reportOriginCountry: (country: string) => store.dispatch(setOriginCountry(country)),
}) })
...@@ -6050,10 +6050,10 @@ ...@@ -6050,10 +6050,10 @@
resolved "https://registry.yarnpkg.com/@uniswap/analytics-events/-/analytics-events-2.24.0.tgz#c81d0c24da4f052b7f6b2663ff42bfa787be91b5" resolved "https://registry.yarnpkg.com/@uniswap/analytics-events/-/analytics-events-2.24.0.tgz#c81d0c24da4f052b7f6b2663ff42bfa787be91b5"
integrity sha512-MhX9L95Y7i28a3KxRFJnpmNxNHAgownBVPyhT+mu4PnCXiPEuSovml+uJr277tysKSqxRYqLnCeAw4LocTBIfg== integrity sha512-MhX9L95Y7i28a3KxRFJnpmNxNHAgownBVPyhT+mu4PnCXiPEuSovml+uJr277tysKSqxRYqLnCeAw4LocTBIfg==
"@uniswap/analytics@^1.4.0": "@uniswap/analytics@1.5.0":
version "1.4.0" version "1.5.0"
resolved "https://registry.npmjs.org/@uniswap/analytics/-/analytics-1.4.0.tgz#ef2a76d4eae5dd0de09d763840b1edae9466314b" resolved "https://registry.yarnpkg.com/@uniswap/analytics/-/analytics-1.5.0.tgz#44e9febf773778c74516896c2555d6f95b2c6d62"
integrity sha512-906YmEwRF2FCtn/R0EsVMZCkMy+LE74HGVw9jeXbnh6MEQvu0i7yMfTroMJEu0f9KVmmXr3xDWT+ZA0/OmnDdQ== integrity sha512-4Hj7uMlU8j/FbKoXxMFmx2pClgOywq+dKy26gwP7696m5GPY2ZFH14XvBrg/ZMJ/Q5tm6nlMDvtxV6xMUK8ung==
dependencies: dependencies:
"@amplitude/analytics-browser" "^1.5.8" "@amplitude/analytics-browser" "^1.5.8"
react "^18.2.0" react "^18.2.0"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment