From 048607080c7d5c2c2b5f2386e735392801621526 Mon Sep 17 00:00:00 2001 From: Jordan Frankfurt Date: Mon, 27 Mar 2023 21:54:39 -0400 Subject: [PATCH] feat: add query param to disable the nft sections of the app (#6225) * feat: add queryparam to disable the nft sections of the app * fix * include mini portfolio * add comments explaining nft disable atom usage and suggesting future work * add subtitle exception to landing page and correct the bool * update comment * comment syntax nits --- src/components/NavBar/index.tsx | 12 ++- .../WalletDropdown/AuthenticatedHeader.tsx | 22 ++-- .../WalletDropdown/MiniPortfolio/index.tsx | 36 ++++--- src/pages/App.tsx | 102 +++++++++++------- src/pages/Landing/index.tsx | 20 +++- src/state/application/atoms.ts | 14 +++ 6 files changed, 137 insertions(+), 69 deletions(-) create mode 100644 src/state/application/atoms.ts diff --git a/src/components/NavBar/index.tsx b/src/components/NavBar/index.tsx index 21dc71b4d6..bbdbd14aca 100644 --- a/src/components/NavBar/index.tsx +++ b/src/components/NavBar/index.tsx @@ -6,6 +6,7 @@ import { useMGTMMicrositeEnabled } from 'featureFlags/flags/mgtm' import { chainIdToBackendName } from 'graphql/data/util' import { useIsNftPage } from 'hooks/useIsNftPage' import { useIsPoolsPage } from 'hooks/useIsPoolsPage' +import { useAtomValue } from 'jotai/utils' import { Box } from 'nft/components/Box' import { Row } from 'nft/components/Flex' import { UniIcon } from 'nft/components/icons' @@ -13,6 +14,7 @@ import { useProfilePageState } from 'nft/hooks' import { ProfilePageStateType } from 'nft/types' import { ReactNode } from 'react' import { NavLink, NavLinkProps, useLocation, useNavigate } from 'react-router-dom' +import { shouldDisableNFTRoutesAtom } from 'state/application/atoms' import styled from 'styled-components/macro' import { Bag } from './Bag' @@ -60,6 +62,8 @@ export const PageTabs = () => { const isNftPage = useIsNftPage() const micrositeEnabled = useMGTMMicrositeEnabled() + const shouldDisableNFTRoutes = useAtomValue(shouldDisableNFTRoutesAtom) + return ( <> @@ -68,9 +72,11 @@ export const PageTabs = () => { Tokens - - NFTs - + {!shouldDisableNFTRoutes && ( + + NFTs + + )} Pools diff --git a/src/components/WalletDropdown/AuthenticatedHeader.tsx b/src/components/WalletDropdown/AuthenticatedHeader.tsx index a934fe3609..66296c546e 100644 --- a/src/components/WalletDropdown/AuthenticatedHeader.tsx +++ b/src/components/WalletDropdown/AuthenticatedHeader.tsx @@ -12,12 +12,14 @@ import { formatDelta } from 'components/Tokens/TokenDetails/PriceChart' import Tooltip from 'components/Tooltip' import { useGetConnection } from 'connection' import { usePortfolioBalancesQuery } from 'graphql/data/__generated__/types-and-hooks' +import { useAtomValue } from 'jotai/utils' import { useProfilePageState, useSellAsset, useWalletCollections } from 'nft/hooks' import { useIsNftClaimAvailable } from 'nft/hooks/useIsNftClaimAvailable' import { ProfilePageStateType } from 'nft/types' import { useCallback, useState } from 'react' import { ArrowDownRight, ArrowUpRight, Copy, CreditCard, IconProps, Info, Power, Settings } from 'react-feather' import { useNavigate } from 'react-router-dom' +import { shouldDisableNFTRoutesAtom } from 'state/application/atoms' import { useAppDispatch } from 'state/hooks' import { updateSelectedWallet } from 'state/user/reducer' import styled, { useTheme } from 'styled-components/macro' @@ -166,6 +168,8 @@ export default function AuthenticatedHeader({ account, openSettings }: { account const clearCollectionFilters = useWalletCollections((state) => state.clearCollectionFilters) const isClaimAvailable = useIsNftClaimAvailable((state) => state.isClaimAvailable) + const shouldDisableNFTRoutes = useAtomValue(shouldDisableNFTRoutesAtom) + const unclaimedAmount: CurrencyAmount | undefined = useUserUnclaimedAmount(account) const isUnclaimed = useUserHasAvailableClaim(account) const getConnection = useGetConnection() @@ -302,14 +306,16 @@ export default function AuthenticatedHeader({ account, openSettings }: { account )} - - View and sell NFTs - + {!shouldDisableNFTRoutes && ( + + View and sell NFTs + + )} {Boolean(!fiatOnrampAvailable && fiatOnrampAvailabilityChecked) && ( Not available in your region diff --git a/src/components/WalletDropdown/MiniPortfolio/index.tsx b/src/components/WalletDropdown/MiniPortfolio/index.tsx index cb9e58f45d..bfe28dc404 100644 --- a/src/components/WalletDropdown/MiniPortfolio/index.tsx +++ b/src/components/WalletDropdown/MiniPortfolio/index.tsx @@ -5,7 +5,9 @@ import Column from 'components/Column' import { AutoRow } from 'components/Row' import { useMiniPortfolioEnabled } from 'featureFlags/flags/miniPortfolio' import { useIsNftPage } from 'hooks/useIsNftPage' +import { useAtomValue } from 'jotai/utils' import { useState } from 'react' +import { shouldDisableNFTRoutesAtom } from 'state/application/atoms' import styled from 'styled-components/macro' import { ThemedText } from 'theme' @@ -75,27 +77,31 @@ const Pages: Array = [ function MiniPortfolio({ account }: { account: string }) { const isNftPage = useIsNftPage() const [currentPage, setCurrentPage] = useState(isNftPage ? 1 : 0) + const shouldDisableNFTRoutes = useAtomValue(shouldDisableNFTRoutesAtom) const Page = Pages[currentPage].component return ( diff --git a/src/pages/App.tsx b/src/pages/App.tsx index d56097b0cd..43c3d841f3 100644 --- a/src/pages/App.tsx +++ b/src/pages/App.tsx @@ -6,9 +6,11 @@ import TopLevelModals from 'components/TopLevelModals' import { useFeatureFlagsIsLoaded } from 'featureFlags' import { useMGTMMicrositeEnabled } from 'featureFlags/flags/mgtm' import ApeModeQueryParamReader from 'hooks/useApeModeQueryParamReader' +import { useAtom } from 'jotai' import { useBag } from 'nft/hooks/useBag' import { lazy, Suspense, useEffect, useMemo, useState } from 'react' -import { Navigate, Route, Routes, useLocation } from 'react-router-dom' +import { Navigate, Route, Routes, useLocation, useSearchParams } from 'react-router-dom' +import { shouldDisableNFTRoutesAtom } from 'state/application/atoms' import { StatsigProvider, StatsigUser } from 'statsig-react' import styled from 'styled-components/macro' import { SpinnerSVG } from 'theme/components' @@ -132,6 +134,7 @@ const LazyLoadSpinner = () => ( export default function App() { const isLoaded = useFeatureFlagsIsLoaded() + const [shouldDisableNFTRoutes, setShouldDisableNFTRoutes] = useAtom(shouldDisableNFTRoutesAtom) const { pathname } = useLocation() const currentPage = getCurrentPageFromLocation(pathname) @@ -146,6 +149,15 @@ export default function App() { setScrolledState(false) }, [pathname]) + const [searchParams] = useSearchParams() + useEffect(() => { + if (searchParams.get('disableNFTs') === 'true') { + setShouldDisableNFTRoutes(true) + } else if (searchParams.get('disableNFTs') === 'false') { + setShouldDisableNFTRoutes(false) + } + }, [searchParams, setShouldDisableNFTRoutes]) + useEffect(() => { // User properties *must* be set before sending corresponding event properties, // so that the event contains the correct and up-to-date user properties. @@ -271,46 +283,54 @@ export default function App() { } /> } /> - - - - } - /> - - - - } - /> - - - - } - /> - - - - } - /> - - - - } - /> + {!shouldDisableNFTRoutes && ( + <> + + + + } + /> + + + + + } + /> + + + + + } + /> + + + + + } + /> + + + + + } + /> + + )} } /> } /> diff --git a/src/pages/Landing/index.tsx b/src/pages/Landing/index.tsx index 04e3dc5e6c..f32f345fa6 100644 --- a/src/pages/Landing/index.tsx +++ b/src/pages/Landing/index.tsx @@ -7,12 +7,14 @@ import { MAIN_CARDS, MORE_CARDS } from 'components/About/constants' import ProtocolBanner from 'components/About/ProtocolBanner' import { BaseButton } from 'components/Button' import { useSwapWidgetEnabled } from 'featureFlags/flags/swapWidget' +import { useAtomValue } from 'jotai/utils' import Swap from 'pages/Swap' import { parse } from 'qs' import { useEffect, useRef, useState } from 'react' import { ArrowDownCircle } from 'react-feather' import { useLocation, useNavigate } from 'react-router-dom' import { Link as NativeLink } from 'react-router-dom' +import { shouldDisableNFTRoutesAtom } from 'state/application/atoms' import { useAppSelector } from 'state/hooks' import styled, { css } from 'styled-components/macro' import { BREAKPOINTS } from 'theme' @@ -316,6 +318,8 @@ export default function Landing() { } }, [navigate, selectedWallet, queryParams.intro]) + const shouldDisableNFTRoutes = useAtomValue(shouldDisableNFTRoutesAtom) + return ( {showContent && ( @@ -342,9 +346,21 @@ export default function Landing() { - Trade crypto & NFTs with confidence + + {shouldDisableNFTRoutes ? ( + Trade crypto with confidence + ) : ( + Trade crypto and NFTs with confidence + )} + - Buy, sell, and explore tokens and NFTs + + {shouldDisableNFTRoutes ? ( + Buy, sell, and explore tokens + ) : ( + Buy, sell, and explore tokens and NFTs + )} + sessionStorage) + +export const shouldDisableNFTRoutesAtom = atomWithStorage('shouldDisableNFTRoutes', false, storage)