chore: prohibit barrels (#7362)

* chore: prohibit barrels

* lint

* lint

* more lint

* add motivation to eslint message

.eslintrc.js

@@ -70,6 +70,13 @@ module.exports = {
             ],
           },
         ],
+        'no-restricted-syntax': [
+          'error',
+          {
+            selector: ':matches(ExportAllDeclaration)',
+            message: 'Barrel exports bloat the bundle size by preventing tree-shaking.',
+          },
+        ],
       },
     },
     {

src/components/About/AboutFooter.tsx

@@ -2,7 +2,8 @@ import { BrowserEvent, InterfaceElementName, SharedEventName } from '@uniswap/an
 import { TraceEvent } from 'analytics'
 import { useDisableNFTRoutes } from 'hooks/useDisableNFTRoutes'
 import styled from 'styled-components'
-import { BREAKPOINTS, ExternalLink, StyledRouterLink } from 'theme'
+import { BREAKPOINTS } from 'theme'
+import { ExternalLink, StyledRouterLink } from 'theme/components'
 import { useIsDarkMode } from 'theme/components/ThemeToggle'
 
 import { DiscordIcon, GithubIcon, TwitterIcon } from './Icons'

src/components/AccountDrawer/AuthenticatedHeader.tsx

@@ -23,7 +23,7 @@ import { useNavigate } from 'react-router-dom'
 import { useAppDispatch } from 'state/hooks'
 import { updateSelectedWallet } from 'state/user/reducer'
 import styled from 'styled-components'
-import { CopyHelper, ExternalLink, ThemedText } from 'theme'
+import { CopyHelper, ExternalLink, ThemedText } from 'theme/components'
 import { shortenAddress } from 'utils'
 import { NumberType, useFormatter } from 'utils/formatNumbers'
 

src/components/AccountDrawer/DownloadButton.tsx

 import { InterfaceElementName } from '@uniswap/analytics-events'
 import { PropsWithChildren, useCallback } from 'react'
 import styled from 'styled-components'
-import { ClickableStyle } from 'theme'
+import { ClickableStyle } from 'theme/components'
 import { openDownloadApp } from 'utils/openDownloadApp'
 
 const StyledButton = styled.button<{ padded?: boolean; branded?: boolean }>`

src/components/AccountDrawer/GitVersionRow.tsx

@@ -2,7 +2,7 @@ import { Trans } from '@lingui/macro'
 import Tooltip from 'components/Tooltip'
 import useCopyClipboard from 'hooks/useCopyClipboard'
 import styled from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 
 const Container = styled.div`
   width: 100%;

src/components/AccountDrawer/MiniPortfolio/Activity/ActivityRow.tsx

@@ -8,7 +8,7 @@ import { TransactionStatus } from 'graphql/data/__generated__/types-and-hooks'
 import useENSName from 'hooks/useENSName'
 import { useCallback } from 'react'
 import styled from 'styled-components'
-import { EllipsisStyle, ThemedText } from 'theme'
+import { EllipsisStyle, ThemedText } from 'theme/components'
 import { shortenAddress } from 'utils'
 import { ExplorerDataType, getExplorerLink } from 'utils/getExplorerLink'
 

src/components/AccountDrawer/MiniPortfolio/Activity/OffchainActivityModal.tsx

@@ -17,7 +17,7 @@ import { InterfaceTrade } from 'state/routing/types'
 import { useOrder } from 'state/signatures/hooks'
 import { UniswapXOrderDetails } from 'state/signatures/types'
 import styled from 'styled-components'
-import { ExternalLink, ThemedText } from 'theme'
+import { ExternalLink, ThemedText } from 'theme/components'
 import { ExplorerDataType, getExplorerLink } from 'utils/getExplorerLink'
 
 type SelectedOrderInfo = {

src/components/AccountDrawer/MiniPortfolio/Activity/index.tsx

@@ -6,7 +6,7 @@ import { atom, useAtom } from 'jotai'
 import { EmptyWalletModule } from 'nft/components/profile/view/EmptyWalletContent'
 import { useEffect, useMemo } from 'react'
 import styled from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 
 import { PortfolioSkeleton, PortfolioTabWrapper } from '../PortfolioRow'
 import { ActivityRow } from './ActivityRow'

src/components/AccountDrawer/MiniPortfolio/ExpandoRow.tsx

@@ -4,7 +4,7 @@ import Row from 'components/Row'
 import { PropsWithChildren } from 'react'
 import { ChevronDown } from 'react-feather'
 import styled from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 
 const ExpandIcon = styled(ChevronDown)<{ $expanded: boolean }>`
   color: ${({ theme }) => theme.neutral2};

src/components/AccountDrawer/MiniPortfolio/NFTs/NFTItem.tsx

@@ -11,7 +11,7 @@ import { WalletAsset } from 'nft/types'
 import { floorFormatter } from 'nft/utils'
 import { useNavigate } from 'react-router-dom'
 import styled from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 
 const FloorPrice = styled(Row)`
   opacity: 0;

src/components/AccountDrawer/MiniPortfolio/Pools/index.tsx

@@ -12,7 +12,7 @@ import { EmptyWalletModule } from 'nft/components/profile/view/EmptyWalletConten
 import { useCallback, useMemo, useReducer } from 'react'
 import { useNavigate } from 'react-router-dom'
 import styled from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 import { NumberType, useFormatter } from 'utils/formatNumbers'
 
 import { ExpandoRow } from '../ExpandoRow'

src/components/AccountDrawer/MiniPortfolio/Tokens/index.tsx

@@ -10,7 +10,7 @@ import { EmptyWalletModule } from 'nft/components/profile/view/EmptyWalletConten
 import { useCallback, useMemo, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import styled from 'styled-components'
-import { EllipsisStyle, ThemedText } from 'theme'
+import { EllipsisStyle, ThemedText } from 'theme/components'
 import { NumberType, useFormatter } from 'utils/formatNumbers'
 import { splitHiddenTokens } from 'utils/splitHiddenTokens'
 

src/components/AccountDrawer/MiniPortfolio/index.tsx

@@ -8,7 +8,8 @@ import { useDisableNFTRoutes } from 'hooks/useDisableNFTRoutes'
 import { useIsNftPage } from 'hooks/useIsNftPage'
 import { useEffect, useState } from 'react'
 import styled, { useTheme } from 'styled-components'
-import { BREAKPOINTS, ThemedText } from 'theme'
+import { BREAKPOINTS } from 'theme'
+import { ThemedText } from 'theme/components'
 
 import { ActivityTab } from './Activity'
 import { usePendingActivity } from './Activity/hooks'

src/components/AccountDrawer/SettingsMenu.tsx

@@ -8,7 +8,7 @@ import { useActiveLocale } from 'hooks/useActiveLocale'
 import { ReactNode } from 'react'
 import { ChevronRight } from 'react-feather'
 import styled from 'styled-components'
-import { ClickableStyle, ThemedText } from 'theme'
+import { ClickableStyle, ThemedText } from 'theme/components'
 import ThemeToggle from 'theme/components/ThemeToggle'
 
 import { AnalyticsToggle } from './AnalyticsToggle'

src/components/AccountDrawer/SettingsToggle.tsx

@@ -2,7 +2,7 @@ import Column from 'components/Column'
 import Row from 'components/Row'
 import Toggle from 'components/Toggle'
 import styled from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 
 const StyledColumn = styled(Column)`
   width: 100%;

src/components/AccountDrawer/SlideOutMenu.tsx

@@ -2,7 +2,7 @@ import Column from 'components/Column'
 import { ScrollBarStyles } from 'components/Common'
 import { ArrowLeft } from 'react-feather'
 import styled from 'styled-components'
-import { ClickableStyle, ThemedText } from 'theme'
+import { ClickableStyle, ThemedText } from 'theme/components'
 
 const Menu = styled(Column)`
   width: 100%;

src/components/AccountDrawer/UniwalletModal.tsx

@@ -12,7 +12,7 @@ import { UniwalletConnect as UniwalletConnectV2 } from 'connection/WalletConnect
 import { QRCodeSVG } from 'qrcode.react'
 import { useEffect, useState } from 'react'
 import styled, { useTheme } from 'styled-components'
-import { CloseIcon, ThemedText } from 'theme'
+import { CloseIcon, ThemedText } from 'theme/components'
 import { isIOS } from 'utils/userAgent'
 
 import uniPng from '../../assets/images/uniwallet_modal_icon.png'

src/components/AccountDrawer/index.tsx

@@ -10,7 +10,8 @@ import { useCallback, useEffect, useRef, useState } from 'react'
 import { ChevronsRight } from 'react-feather'
 import { useGesture } from 'react-use-gesture'
 import styled from 'styled-components'
-import { BREAKPOINTS, ClickableStyle } from 'theme'
+import { BREAKPOINTS } from 'theme'
+import { ClickableStyle } from 'theme/components'
 import { Z_INDEX } from 'theme/zIndex'
 import { isMobile } from 'utils/userAgent'
 

src/components/AccountDrawer/shared.tsx

@@ -5,7 +5,8 @@ import { Check } from 'react-feather'
 import type { To } from 'react-router-dom'
 import { Link } from 'react-router-dom'
 import styled, { useTheme } from 'styled-components'
-import { BREAKPOINTS, ClickableStyle, ThemedText } from 'theme'
+import { BREAKPOINTS } from 'theme'
+import { ClickableStyle, ThemedText } from 'theme/components'
 
 const InternalLinkMenuItem = styled(Link)`
   ${ClickableStyle}

src/components/AddressInputPanel/index.tsx

@@ -4,10 +4,10 @@ import { t } from '@lingui/macro'
 import { useWeb3React } from '@web3-react/core'
 import { ChangeEvent, ReactNode, useCallback } from 'react'
 import styled, { useTheme } from 'styled-components'
+import { ExternalLink, ThemedText } from 'theme/components'
 import { flexColumnNoWrap } from 'theme/styles'
 
 import useENS from '../../hooks/useENS'
-import { ExternalLink, ThemedText } from '../../theme'
 import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
 import { AutoColumn } from '../Column'
 import { RowBetween } from '../Row'

src/components/AirdropModal/index.tsx

@@ -10,14 +10,14 @@ import Loader from 'components/Icons/LoadingSpinner'
 import { useContract } from 'hooks/useContract'
 import { ChevronRightIcon } from 'nft/components/icons'
 import { useIsNftClaimAvailable } from 'nft/hooks/useIsNftClaimAvailable'
-import { CollectionRewardsFetcher } from 'nft/queries/genie/GetAirdorpMerkle'
+import { CollectionRewardsFetcher } from 'nft/queries/genie'
 import { Airdrop, Rewards } from 'nft/types/airdrop'
 import { useEffect, useState } from 'react'
 import { AlertTriangle } from 'react-feather'
 import { useModalIsOpen, useToggleModal } from 'state/application/hooks'
 import { ApplicationModal } from 'state/application/reducer'
 import styled from 'styled-components'
-import { CloseIcon, ThemedText } from 'theme'
+import { CloseIcon, ThemedText } from 'theme/components'
 
 import Modal from '../Modal'
 

src/components/Banner/BaseAnnouncementBanner/index.tsx

@@ -7,7 +7,7 @@ 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'
+import { ThemedText } from 'theme/components'
 import { openDownloadApp, openWalletMicrosite } from 'utils/openDownloadApp'
 import { isIOS, isMobileSafari } from 'utils/userAgent'
 

src/components/Button/LoadingButtonSpinner.tsx

-import { SpinnerSVG } from 'theme'
+import { SpinnerSVG } from 'theme/components'
 
 const ButtonLoadingSpinner = (props: React.ComponentPropsWithoutRef<'svg'>) => (
   <SpinnerSVG width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" {...props}>

src/components/Charts/PriceChart/index.tsx

@@ -16,7 +16,7 @@ import { useActiveLocale } from 'hooks/useActiveLocale'
 import { ReactNode, useCallback, useEffect, useMemo, useState } from 'react'
 import { Info } from 'react-feather'
 import styled, { useTheme } from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 import { textFadeIn } from 'theme/styles'
 import { useFormatter } from 'utils/formatNumbers'
 

src/components/ConnectedAccountBlocked/index.tsx

@@ -2,9 +2,9 @@ import { Trans } from '@lingui/macro'
 import Column from 'components/Column'
 import { BlockedIcon } from 'components/TokenSafety/TokenSafetyIcon'
 import styled, { useTheme } from 'styled-components'
-import { ExternalLink, ThemedText } from 'theme'
+import { ExternalLink, ThemedText } from 'theme/components'
+import { CopyHelper } from 'theme/components'
 
-import { CopyHelper } from '../../theme'
 import Modal from '../Modal'
 
 const ContentWrapper = styled(Column)`

src/components/CurrencyInputPanel/FiatValue.tsx

@@ -5,7 +5,7 @@ import { LoadingBubble } from 'components/Tokens/loading'
 import { MouseoverTooltip } from 'components/Tooltip'
 import { useMemo } from 'react'
 import styled from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 import { NumberType, useFormatter } from 'utils/formatNumbers'
 import { warningSeverity } from 'utils/prices'
 

src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx

@@ -15,12 +15,12 @@ import { darken } from 'polished'
 import { forwardRef, ReactNode, useCallback, useEffect, useState } from 'react'
 import { Lock } from 'react-feather'
 import styled, { useTheme } from 'styled-components'
+import { ThemedText } from 'theme/components'
 import { flexColumnNoWrap, flexRowNoWrap } from 'theme/styles'
 import { NumberType, useFormatter } from 'utils/formatNumbers'
 
 import { ReactComponent as DropDown } from '../../assets/images/dropdown.svg'
 import { useCurrencyBalance } from '../../state/connection/hooks'
-import { ThemedText } from '../../theme'
 import { ButtonGray } from '../Button'
 import DoubleCurrencyLogo from '../DoubleLogo'
 import { Input as NumericalInput } from '../NumericalInput'

src/components/CurrencyInputPanel/index.tsx

@@ -10,12 +10,12 @@ import { isSupportedChain } from 'constants/chains'
 import { darken } from 'polished'
 import { ReactNode, useCallback, useState } from 'react'
 import styled, { useTheme } from 'styled-components'
+import { ThemedText } from 'theme/components'
 import { flexColumnNoWrap, flexRowNoWrap } from 'theme/styles'
 import { formatCurrencyAmount } from 'utils/formatCurrencyAmount'
 
 import { ReactComponent as DropDown } from '../../assets/images/dropdown.svg'
 import { useCurrencyBalance } from '../../state/connection/hooks'
-import { ThemedText } from '../../theme'
 import { ButtonGray } from '../Button'
 import DoubleCurrencyLogo from '../DoubleLogo'
 import CurrencyLogo from '../Logo/CurrencyLogo'

src/components/ErrorBoundary/index.tsx

@@ -7,9 +7,9 @@ import { useIsMobile } from 'nft/hooks'
 import React, { PropsWithChildren, useState } from 'react'
 import { Copy } from 'react-feather'
 import styled from 'styled-components'
+import { CopyToClipboard, ExternalLink, ThemedText } from 'theme/components'
 import { isSentryEnabled } from 'utils/env'
 
-import { CopyToClipboard, ExternalLink, ThemedText } from '../../theme'
 import { Column } from '../Column'
 
 const FallbackWrapper = styled.div`

src/components/FeeSelector/FeeOption.tsx

@@ -6,7 +6,7 @@ import { useFeeTierDistribution } from 'hooks/useFeeTierDistribution'
 import { PoolState } from 'hooks/usePools'
 import React from 'react'
 import styled from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 
 import { FeeTierPercentageBadge } from './FeeTierPercentageBadge'
 import { FEE_AMOUNT_DETAIL } from './shared'

src/components/FeeSelector/FeeTierPercentageBadge.tsx

@@ -4,7 +4,7 @@ import Badge from 'components/Badge'
 import { useFeeTierDistribution } from 'hooks/useFeeTierDistribution'
 import { PoolState } from 'hooks/usePools'
 import React from 'react'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 
 export function FeeTierPercentageBadge({
   feeAmount,

src/components/FeeSelector/index.tsx

@@ -15,7 +15,7 @@ import { DynamicSection } from 'pages/AddLiquidity/styled'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Box } from 'rebass'
 import styled, { keyframes } from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 
 import { FeeOption } from './FeeOption'
 import { FeeTierPercentageBadge } from './FeeTierPercentageBadge'

src/components/FiatOnrampModal/index.tsx

@@ -5,7 +5,7 @@ import { useHref } from 'react-router-dom'
 import { useCloseModal, useModalIsOpen } from 'state/application/hooks'
 import { ApplicationModal } from 'state/application/reducer'
 import styled, { useTheme } from 'styled-components'
-import { CustomLightSpinner, ThemedText } from 'theme'
+import { CustomLightSpinner, ThemedText } from 'theme/components'
 import { useIsDarkMode } from 'theme/components/ThemeToggle'
 
 import Circle from '../../assets/images/blue-loader.svg'

src/components/InputStepCounter/InputStepCounter.tsx

@@ -6,7 +6,7 @@ import { AutoColumn } from 'components/Column'
 import { ReactNode, useCallback, useEffect, useState } from 'react'
 import { Minus, Plus } from 'react-feather'
 import styled, { keyframes } from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 
 import { Input as NumericalInput } from '../NumericalInput'
 

src/components/LiquidityChartRangeInput/index.tsx

@@ -11,8 +11,8 @@ import { BarChart2, CloudOff, Inbox } from 'react-feather'
 import { batch } from 'react-redux'
 import { Bound } from 'state/mint/v3/actions'
 import styled, { useTheme } from 'styled-components'
+import { ThemedText } from 'theme/components'
 
-import { ThemedText } from '../../theme'
 import { Chart } from './Chart'
 import { useDensityChartData } from './hooks'
 import { ZoomLevels } from './types'

src/components/Logo/UniswapXBrandMark.tsx

 import { Trans } from '@lingui/macro'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 
 import UniswapXRouterLabel, { UnswapXRouterLabelProps } from '../RouterLabel/UniswapXRouterLabel'
 

src/components/Menu/index.tsx

 import { FunctionComponent, PropsWithChildren, useRef } from 'react'
 import { Link } from 'react-router-dom'
 import styled, { css } from 'styled-components'
+import { ExternalLink } from 'theme/components'
 
 import { ReactComponent as MenuIcon } from '../../assets/images/menu.svg'
 import { useOnClickOutside } from '../../hooks/useOnClickOutside'
 import { useModalIsOpen, useToggleModal } from '../../state/application/hooks'
 import { ApplicationModal } from '../../state/application/reducer'
-import { ExternalLink } from '../../theme'
 
 export enum FlyoutAlignment {
   LEFT = 'LEFT',

src/components/ModalViews/index.tsx

@@ -2,9 +2,9 @@ import { Trans } from '@lingui/macro'
 import { useWeb3React } from '@web3-react/core'
 import { ArrowUpCircle } from 'react-feather'
 import styled, { useTheme } from 'styled-components'
+import { CloseIcon, CustomLightSpinner, ThemedText } from 'theme/components'
 
 import Circle from '../../assets/images/blue-loader.svg'
-import { CloseIcon, CustomLightSpinner, ThemedText } from '../../theme'
 import { ExternalLink } from '../../theme/components'
 import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
 import { AutoColumn, ColumnCenter } from '../Column'

src/components/NavBar/SearchBarDropdown.tsx

@@ -20,7 +20,7 @@ import { GenieCollection, TrendingCollection } from 'nft/types'
 import { useEffect, useMemo, useState } from 'react'
 import { useLocation } from 'react-router-dom'
 import styled from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 
 import { ClockIcon, TrendingArrow } from '../../nft/components/icons'
 import { SuspendConditionally } from '../Suspense/SuspendConditionally'

src/components/NavBar/SuggestionRow.tsx

@@ -17,7 +17,7 @@ import { putCommas } from 'nft/utils/putCommas'
 import { useCallback, useEffect, useState } from 'react'
 import { Link, useNavigate } from 'react-router-dom'
 import styled from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 import { useFormatter } from 'utils/formatNumbers'
 
 import { DeltaArrow, DeltaText } from '../Tokens/TokenDetails/Delta'

src/components/NavigationTabs/index.tsx

@@ -7,7 +7,7 @@ import { useAppDispatch } from 'state/hooks'
 import { resetMintState } from 'state/mint/actions'
 import { resetMintState as resetMintV3State } from 'state/mint/v3/actions'
 import styled, { useTheme } from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 import { flexRowNoWrap } from 'theme/styles'
 
 import { RowBetween } from '../Row'

src/components/NetworkAlert/NetworkAlert.tsx

@@ -4,8 +4,8 @@ import { useWeb3React } from '@web3-react/core'
 import { getChainInfo } from 'constants/chainInfo'
 import { ArrowUpRight } from 'react-feather'
 import styled from 'styled-components'
-import { ExternalLink, HideSmall } from 'theme'
 import { colors } from 'theme/colors'
+import { ExternalLink, HideSmall } from 'theme/components'
 import { useDarkModeManager } from 'theme/components/ThemeToggle'
 
 import Column from '../Column'

src/components/Polling/ChainConnectivityWarning.tsx

@@ -4,7 +4,8 @@ import { useWeb3React } from '@web3-react/core'
 import { getChainInfoOrDefault, L2ChainInfo } from 'constants/chainInfo'
 import { AlertTriangle } from 'react-feather'
 import styled from 'styled-components'
-import { ExternalLink, MEDIA_WIDTHS } from 'theme'
+import { MEDIA_WIDTHS } from 'theme'
+import { ExternalLink } from 'theme/components'
 
 const BodyRow = styled.div`
   color: ${({ theme }) => theme.neutral1};

src/components/Polling/index.tsx

@@ -10,7 +10,7 @@ import useBlockNumber from 'lib/hooks/useBlockNumber'
 import ms from 'ms'
 import { useEffect, useMemo, useState } from 'react'
 import styled, { keyframes } from 'styled-components'
-import { ExternalLink, ThemedText } from 'theme'
+import { ExternalLink, ThemedText } from 'theme/components'
 import { ExplorerDataType, getExplorerLink } from 'utils/getExplorerLink'
 
 import { MouseoverTooltip } from '../Tooltip'

src/components/Popups/ClaimPopup.tsx

@@ -4,6 +4,7 @@ import { useWeb3React } from '@web3-react/core'
 import { useCallback, useEffect } from 'react'
 import { Heart, X } from 'react-feather'
 import styled, { keyframes } from 'styled-components'
+import { ThemedText } from 'theme/components'
 
 import tokenLogo from '../../assets/images/token-logo.png'
 import {
@@ -14,7 +15,6 @@ import {
 } from '../../state/application/hooks'
 import { ApplicationModal } from '../../state/application/reducer'
 import { useUserHasAvailableClaim, useUserUnclaimedAmount } from '../../state/claim/hooks'
-import { ThemedText } from '../../theme'
 import { ButtonPrimary } from '../Button'
 import { AutoColumn } from '../Column'
 import { CardBGImage, CardNoise } from '../earn/styled'

src/components/Popups/PopupContent.tsx

@@ -16,7 +16,7 @@ import { X } from 'react-feather'
 import { useOrder } from 'state/signatures/hooks'
 import { useTransaction } from 'state/transactions/hooks'
 import styled from 'styled-components'
-import { EllipsisStyle, ThemedText } from 'theme'
+import { EllipsisStyle, ThemedText } from 'theme/components'
 import { useFormatter } from 'utils/formatNumbers'
 import { ExplorerDataType, getExplorerLink } from 'utils/getExplorerLink'
 

src/components/PositionCard/index.tsx

@@ -9,12 +9,12 @@ import { ChevronDown, ChevronUp } from 'react-feather'
 import { Link } from 'react-router-dom'
 import { Text } from 'rebass'
 import styled from 'styled-components'
+import { ExternalLink, ThemedText } from 'theme/components'
 
 import { BIG_INT_ZERO } from '../../constants/misc'
 import { useColor } from '../../hooks/useColor'
 import { useTotalSupply } from '../../hooks/useTotalSupply'
 import { useTokenBalance } from '../../state/connection/hooks'
-import { ExternalLink, ThemedText } from '../../theme'
 import { currencyId } from '../../utils/currencyId'
 import { unwrappedToken } from '../../utils/unwrappedToken'
 import { ButtonEmpty, ButtonPrimary, ButtonSecondary } from '../Button'

src/components/PositionListItem/index.tsx

@@ -14,7 +14,8 @@ import { useMemo } from 'react'
 import { Link } from 'react-router-dom'
 import { Bound } from 'state/mint/v3/actions'
 import styled from 'styled-components'
-import { HideSmall, MEDIA_WIDTHS, SmallOnly, ThemedText } from 'theme'
+import { MEDIA_WIDTHS } from 'theme'
+import { HideSmall, SmallOnly, ThemedText } from 'theme/components'
 import { useFormatter } from 'utils/formatNumbers'
 import { unwrappedToken } from 'utils/unwrappedToken'
 

src/components/PositionPreview/index.tsx

@@ -13,7 +13,7 @@ import JSBI from 'jsbi'
 import { ReactNode, useCallback, useState } from 'react'
 import { Bound } from 'state/mint/v3/actions'
 import { useTheme } from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 import { useFormatter } from 'utils/formatNumbers'
 import { unwrappedToken } from 'utils/unwrappedToken'
 

src/components/PrivacyPolicy/index.tsx

@@ -6,7 +6,7 @@ import Row, { AutoRow, RowBetween } from 'components/Row'
 import { useEffect, useRef } from 'react'
 import { ArrowDown, Info, X } from 'react-feather'
 import styled from 'styled-components'
-import { ExternalLink, ThemedText } from 'theme'
+import { ExternalLink, ThemedText } from 'theme/components'
 import { isMobile } from 'utils/userAgent'
 
 import { useModalIsOpen, useTogglePrivacyPolicy } from '../../state/application/hooks'

src/components/RangeSelector/PresetsButtons.tsx

@@ -2,7 +2,7 @@ import { Trans } from '@lingui/macro'
 import { ButtonOutlined } from 'components/Button'
 import { AutoRow } from 'components/Row'
 import styled from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 
 const Button = styled(ButtonOutlined).attrs(() => ({
   padding: '6px',

src/components/RouterLabel/index.tsx

 import { InterfaceTrade, QuoteMethod } from 'state/routing/types'
 import { isUniswapXTrade } from 'state/routing/utils'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 
 import UniswapXRouterLabel from './UniswapXRouterLabel'
 

src/components/RoutingDiagram/RoutingDiagram.tsx

@@ -9,7 +9,7 @@ import Row, { AutoRow } from 'components/Row'
 import { useTokenInfoFromActiveList } from 'hooks/useTokenInfoFromActiveList'
 import { Box } from 'rebass'
 import styled from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 import { Z_INDEX } from 'theme/zIndex'
 import { RoutingDiagramEntry } from 'utils/getRoutingDiagramEntries'
 

src/components/SearchModal/CurrencyList/index.tsx

@@ -12,10 +12,10 @@ import { Check } from 'react-feather'
 import { FixedSizeList } from 'react-window'
 import { Text } from 'rebass'
 import styled from 'styled-components'
+import { ThemedText } from 'theme/components'
 
 import { useIsUserAddedToken } from '../../../hooks/Tokens'
 import { WrappedTokenInfo } from '../../../state/lists/wrappedTokenInfo'
-import { ThemedText } from '../../../theme'
 import Column, { AutoColumn } from '../../Column'
 import CurrencyLogo from '../../Logo/CurrencyLogo'
 import Row, { RowFixed } from '../../Row'

src/components/SearchModal/CurrencySearch.tsx

@@ -17,10 +17,10 @@ import AutoSizer from 'react-virtualized-auto-sizer'
 import { FixedSizeList } from 'react-window'
 import { Text } from 'rebass'
 import styled, { useTheme } from 'styled-components'
+import { CloseIcon, ThemedText } from 'theme/components'
 import { UserAddedToken } from 'types/tokens'
 
 import { useDefaultActiveTokens, useIsUserAddedToken, useSearchInactiveTokenLists, useToken } from '../../hooks/Tokens'
-import { CloseIcon, ThemedText } from '../../theme'
 import { isAddress } from '../../utils'
 import Column from '../Column'
 import Row, { RowBetween } from '../Row'

src/components/Settings/MaxSlippageSettings/index.tsx

@@ -7,7 +7,7 @@ import React, { useState } from 'react'
 import { useUserSlippageTolerance } from 'state/user/hooks'
 import { SlippageTolerance } from 'state/user/types'
 import styled from 'styled-components'
-import { CautionTriangle, ThemedText } from 'theme'
+import { CautionTriangle, ThemedText } from 'theme/components'
 
 import { Input, InputContainer } from '../Input'
 

src/components/Settings/MenuButton/index.tsx

@@ -4,7 +4,7 @@ import Row from 'components/Row'
 import { useUserSlippageTolerance } from 'state/user/hooks'
 import { SlippageTolerance } from 'state/user/types'
 import styled from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 import validateUserSlippageTolerance, { SlippageValidationResult } from 'utils/validateUserSlippageTolerance'
 
 const Icon = styled(Settings)`

src/components/Settings/RouterPreferenceSettings/index.tsx

@@ -11,7 +11,7 @@ import { RouterPreference } from 'state/routing/types'
 import { useRouterPreference, useUserDisabledUniswapX } from 'state/user/hooks'
 import { updateDisabledUniswapX } from 'state/user/reducer'
 import styled from 'styled-components'
-import { Divider, ExternalLink, ThemedText } from 'theme'
+import { Divider, ExternalLink, ThemedText } from 'theme/components'
 
 const InlineLink = styled(ThemedText.BodySmall)`
   color: ${({ theme }) => theme.accent1};

src/components/Settings/TransactionDeadlineSettings/index.tsx

@@ -7,7 +7,7 @@ import { DEFAULT_DEADLINE_FROM_NOW } from 'constants/misc'
 import ms from 'ms'
 import React, { useState } from 'react'
 import { useUserTransactionTTL } from 'state/user/hooks'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 
 enum DeadlineError {
   InvalidInput = 'InvalidInput',

src/components/Settings/index.tsx

@@ -17,7 +17,7 @@ import { ApplicationModal } from 'state/application/reducer'
 import { InterfaceTrade } from 'state/routing/types'
 import { isUniswapXTrade } from 'state/routing/utils'
 import styled from 'styled-components'
-import { Divider, ThemedText } from 'theme'
+import { Divider, ThemedText } from 'theme/components'
 import { Z_INDEX } from 'theme/zIndex'
 
 import MaxSlippageSettings from './MaxSlippageSettings'

src/components/SwitchLocaleLink/index.tsx

@@ -2,10 +2,10 @@ import { Trans } from '@lingui/macro'
 import { useLocationLinkProps } from 'hooks/useLocationLinkProps'
 import { useMemo } from 'react'
 import styled from 'styled-components'
+import { StyledInternalLink, ThemedText } from 'theme/components'
 
 import { DEFAULT_LOCALE, LOCALE_LABEL, SupportedLocale } from '../../constants/locales'
 import { navigatorLocale, useActiveLocale } from '../../hooks/useActiveLocale'
-import { StyledInternalLink, ThemedText } from '../../theme'
 
 const Container = styled(ThemedText.DeprecatedSmall)`
   opacity: ${({ theme }) => theme.opacity.hover};

src/components/TokenSafety/TokenSafetyMessage.tsx

@@ -4,7 +4,7 @@ import { useTokenWarningColor, useTokenWarningTextColor } from 'hooks/useTokenWa
 import { AlertTriangle, Slash } from 'react-feather'
 import { Text } from 'rebass'
 import styled from 'styled-components'
-import { ExternalLink } from 'theme'
+import { ExternalLink } from 'theme/components'
 
 const Label = styled.div<{ color: string; backgroundColor: string }>`
   width: 100%;

src/components/TokenSafety/index.tsx

@@ -17,7 +17,7 @@ import { ExternalLink as LinkIconFeather } from 'react-feather'
 import { Text } from 'rebass'
 import { useAddUserToken } from 'state/user/hooks'
 import styled from 'styled-components'
-import { ButtonText, CopyLinkIcon, ExternalLink } from 'theme'
+import { ButtonText, CopyLinkIcon, ExternalLink } from 'theme/components'
 import { ExplorerDataType, getExplorerLink } from 'utils/getExplorerLink'
 
 const Wrapper = styled.div`

src/components/Tokens/TokenDetails/About.tsx

@@ -4,7 +4,7 @@ import { getChainInfo } from 'constants/chainInfo'
 import { darken } from 'polished'
 import { useState } from 'react'
 import styled from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 import { textFadeIn } from 'theme/styles'
 
 import Resource from './Resource'

src/components/Tokens/TokenDetails/AddressSection.tsx

 import { Trans } from '@lingui/macro'
 import styled from 'styled-components'
-import { CopyContractAddress, ThemedText } from 'theme'
+import { CopyContractAddress, ThemedText } from 'theme/components'
 
 const ContractAddressSection = styled.div`
   display: flex;

src/components/Tokens/TokenDetails/BalanceSummary.tsx

@@ -7,7 +7,7 @@ import { asSupportedChain } from 'constants/chains'
 import { useStablecoinValue } from 'hooks/useStablecoinPrice'
 import useCurrencyBalance from 'lib/hooks/useCurrencyBalance'
 import styled, { useTheme } from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 import { NumberType, useFormatter } from 'utils/formatNumbers'
 
 const BalancesCard = styled.div`

src/components/Tokens/TokenDetails/InvalidTokenDetails.tsx

@@ -6,7 +6,7 @@ import { getChainInfo } from 'constants/chainInfo'
 import useSelectChain from 'hooks/useSelectChain'
 import { useNavigate } from 'react-router-dom'
 import styled from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 
 import { ReactComponent as EyeIcon } from '../../../assets/svg/eye.svg'
 

src/components/Tokens/TokenDetails/MobileBalanceSummaryFooter.tsx

@@ -6,7 +6,7 @@ import { CHAIN_ID_TO_BACKEND_NAME } from 'graphql/data/util'
 import { useStablecoinValue } from 'hooks/useStablecoinPrice'
 import useCurrencyBalance from 'lib/hooks/useCurrencyBalance'
 import styled from 'styled-components'
-import { StyledInternalLink } from 'theme'
+import { StyledInternalLink } from 'theme/components'
 import { NumberType, useFormatter } from 'utils/formatNumbers'
 
 const Wrapper = styled.div`

src/components/Tokens/TokenDetails/Resource.tsx

 import { darken } from 'polished'
 import styled from 'styled-components'
-import { ExternalLink } from 'theme'
+import { ExternalLink } from 'theme/components'
 
 const ResourceLink = styled(ExternalLink)`
   display: flex;

src/components/Tokens/TokenDetails/ShareButton.tsx

@@ -10,13 +10,12 @@ import { Link, Twitter } from 'react-feather'
 import { useModalIsOpen, useToggleModal } from 'state/application/hooks'
 import { ApplicationModal } from 'state/application/reducer'
 import styled, { useTheme } from 'styled-components'
-import { ClickableStyle, CopyHelperRefType } from 'theme'
 import { colors } from 'theme/colors'
+import { ClickableStyle, CopyHelperRefType } from 'theme/components'
+import { CopyHelper } from 'theme/components'
 import { opacify } from 'theme/utils'
 import { Z_INDEX } from 'theme/zIndex'
 
-import { CopyHelper } from '../../../theme'
-
 const TWITTER_WIDTH = 560
 const TWITTER_HEIGHT = 480
 

src/components/Tokens/TokenDetails/Skeleton.tsx

@@ -2,7 +2,7 @@ import { SwapSkeleton } from 'components/swap/SwapSkeleton'
 import { ArrowLeft } from 'react-feather'
 import { useParams } from 'react-router-dom'
 import styled, { useTheme } from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 import { textFadeIn } from 'theme/styles'
 
 import { LoadingBubble } from '../loading'

src/components/Tokens/TokenDetails/StatsSection.tsx

@@ -4,7 +4,7 @@ import { MouseoverTooltip } from 'components/Tooltip'
 import { getChainInfo } from 'constants/chainInfo'
 import { ReactNode } from 'react'
 import styled from 'styled-components'
-import { ExternalLink, ThemedText } from 'theme'
+import { ExternalLink, ThemedText } from 'theme/components'
 import { textFadeIn } from 'theme/styles'
 import { NumberType, useFormatter } from 'utils/formatNumbers'
 

src/components/Tokens/TokenTable/NetworkFilter.tsx

@@ -13,7 +13,7 @@ import { useNavigate, useParams } from 'react-router-dom'
 import { useModalIsOpen, useToggleModal } from 'state/application/hooks'
 import { ApplicationModal } from 'state/application/reducer'
 import styled, { css, useTheme } from 'styled-components'
-import { EllipsisStyle } from 'theme'
+import { EllipsisStyle } from 'theme/components'
 
 import FilterOption from './FilterOption'
 

src/components/Tokens/TokenTable/TokenRow.tsx

@@ -15,7 +15,8 @@ import { ForwardedRef, forwardRef } from 'react'
 import { CSSProperties, ReactNode } from 'react'
 import { Link, useParams } from 'react-router-dom'
 import styled, { css, useTheme } from 'styled-components'
-import { BREAKPOINTS, ClickableStyle } from 'theme'
+import { BREAKPOINTS } from 'theme'
+import { ClickableStyle } from 'theme/components'
 import { NumberType, useFormatter } from 'utils/formatNumbers'
 
 import {

src/components/TransactionConfirmationModal/index.tsx

@@ -9,12 +9,12 @@ import { ReactNode, useCallback, useState } from 'react'
 import { AlertCircle, ArrowUpCircle, CheckCircle } from 'react-feather'
 import { useIsTransactionConfirmed, useTransaction } from 'state/transactions/hooks'
 import styled, { useTheme } from 'styled-components'
+import { ExternalLink, ThemedText } from 'theme/components'
+import { CloseIcon, CustomLightSpinner } from 'theme/components'
 import { isL2ChainId } from 'utils/chains'
 import { ExplorerDataType, getExplorerLink } from 'utils/getExplorerLink'
 
 import Circle from '../../assets/images/blue-loader.svg'
-import { ExternalLink, ThemedText } from '../../theme'
-import { CloseIcon, CustomLightSpinner } from '../../theme'
 import { TransactionSummary } from '../AccountDetails/TransactionSummary'
 import { ButtonLight, ButtonPrimary } from '../Button'
 import { AutoColumn, ColumnCenter } from '../Column'

src/components/V2Unsupported/index.tsx

 import { Trans } from '@lingui/macro'
 import { AutoColumn } from 'components/Column'
 import styled from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 
 const TextWrapper = styled.div`
   border: 1px solid ${({ theme }) => theme.neutral3};

src/components/WalletModal/ConnectionErrorView.tsx

@@ -4,7 +4,7 @@ import { ButtonEmpty, ButtonPrimary } from 'components/Button'
 import { ActivationStatus, useActivationState } from 'connection/activate'
 import { AlertTriangle } from 'react-feather'
 import styled from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 import { flexColumnNoWrap } from 'theme/styles'
 
 const Wrapper = styled.div`

src/components/WalletModal/PrivacyPolicyNotice.tsx

 import { Trans } from '@lingui/macro'
 import styled from 'styled-components'
-import { ExternalLink, ThemedText } from 'theme'
+import { ExternalLink, ThemedText } from 'theme/components'
 
 const StyledLink = styled(ExternalLink)`
   font-weight: 535;

src/components/WalletModal/index.tsx

@@ -8,7 +8,7 @@ import { ActivationStatus, useActivationState } from 'connection/activate'
 import { isSupportedChain } from 'constants/chains'
 import { useEffect } from 'react'
 import styled from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 import { flexColumnNoWrap } from 'theme/styles'
 
 import ConnectionErrorView from './ConnectionErrorView'

src/components/addLiquidity/OwnershipWarning.tsx

 import { Trans } from '@lingui/macro'
 import { AlertTriangle } from 'react-feather'
 import styled from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 
 const ExplainerText = styled.div`
   color: ${({ theme }) => theme.neutral2};

src/components/claim/AddressClaimModal.tsx

@@ -5,6 +5,7 @@ import { useWeb3React } from '@web3-react/core'
 import { useState } from 'react'
 import { Text } from 'rebass'
 import styled from 'styled-components'
+import { CloseIcon, CustomLightSpinner, ExternalLink, ThemedText, UniTokenAnimated } from 'theme/components'
 import { shortenAddress } from 'utils'
 
 import Circle from '../../assets/images/blue-loader.svg'
@@ -12,7 +13,6 @@ import tokenLogo from '../../assets/images/token-logo.png'
 import useENS from '../../hooks/useENS'
 import { useClaimCallback, useUserHasAvailableClaim, useUserUnclaimedAmount } from '../../state/claim/hooks'
 import { useIsTransactionPending } from '../../state/transactions/hooks'
-import { CloseIcon, CustomLightSpinner, ExternalLink, ThemedText, UniTokenAnimated } from '../../theme'
 import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
 import AddressInputPanel from '../AddressInputPanel'
 import { ButtonPrimary } from '../Button'

src/components/swap/AdvancedSwapDetails.tsx

@@ -9,9 +9,9 @@ import { ZERO_PERCENT } from 'constants/misc'
 import useNativeCurrency from 'lib/hooks/useNativeCurrency'
 import { ClassicTrade, InterfaceTrade } from 'state/routing/types'
 import { getTransactionCount, isClassicTrade } from 'state/routing/utils'
+import { ExternalLink, Separator, ThemedText } from 'theme/components'
 import { NumberType, useFormatter } from 'utils/formatNumbers'
 
-import { ExternalLink, Separator, ThemedText } from '../../theme'
 import Column from '../Column'
 import RouterLabel from '../RouterLabel'
 import { RowBetween, RowFixed } from '../Row'

src/components/swap/ConfirmSwapModal.tsx

@@ -25,7 +25,7 @@ import { InterfaceTrade, TradeFillType } from 'state/routing/types'
 import { Field } from 'state/swap/actions'
 import { useIsTransactionConfirmed, useSwapTransactionStatus } from 'state/transactions/hooks'
 import styled from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 import invariant from 'tiny-invariant'
 import { isL2ChainId } from 'utils/chains'
 import { NumberType, useFormatter } from 'utils/formatNumbers'

src/components/swap/GasBreakdownTooltip.tsx

@@ -6,7 +6,7 @@ import { ReactNode } from 'react'
 import { InterfaceTrade } from 'state/routing/types'
 import { isClassicTrade, isUniswapXTrade } from 'state/routing/utils'
 import styled from 'styled-components'
-import { Divider, ExternalLink, ThemedText } from 'theme'
+import { Divider, ExternalLink, ThemedText } from 'theme/components'
 import { NumberType, useFormatter } from 'utils/formatNumbers'
 
 const Container = styled(AutoColumn)`

src/components/swap/GasEstimateTooltip.tsx

@@ -10,7 +10,7 @@ import { SUPPORTED_GAS_ESTIMATE_CHAIN_IDS } from 'constants/chains'
 import { InterfaceTrade } from 'state/routing/types'
 import { isUniswapXTrade } from 'state/routing/utils'
 import styled from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 import { NumberType, useFormatter } from 'utils/formatNumbers'
 
 import { GasBreakdownTooltip } from './GasBreakdownTooltip'

src/components/swap/PendingModalContent/ErrorModalContent.tsx

@@ -5,7 +5,7 @@ import QuestionHelper from 'components/QuestionHelper'
 import Row from 'components/Row'
 import { AlertTriangle } from 'react-feather'
 import { useTheme } from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 
 import { PendingModalContainer } from '.'
 

src/components/swap/PendingModalContent/TradeSummary.tsx

@@ -3,7 +3,7 @@ import Row from 'components/Row'
 import { ArrowRight } from 'react-feather'
 import { InterfaceTrade } from 'state/routing/types'
 import { useTheme } from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 import { useFormatter } from 'utils/formatNumbers'
 
 export function TradeSummary({ trade }: { trade: Pick<InterfaceTrade, 'inputAmount' | 'postTaxOutputAmount'> }) {

src/components/swap/PendingModalContent/index.tsx

@@ -15,7 +15,7 @@ import { useOrder } from 'state/signatures/hooks'
 import { UniswapXOrderDetails } from 'state/signatures/types'
 import { useIsTransactionConfirmed, useSwapTransactionStatus } from 'state/transactions/hooks'
 import styled, { css, keyframes } from 'styled-components'
-import { ExternalLink } from 'theme'
+import { ExternalLink } from 'theme/components'
 import { ThemedText } from 'theme/components/text'
 import { getExplorerLink } from 'utils/getExplorerLink'
 import { ExplorerDataType } from 'utils/getExplorerLink'

src/components/swap/PriceImpactModal.tsx

@@ -5,7 +5,7 @@ import { ColumnCenter } from 'components/Column'
 import Row from 'components/Row'
 import { AlertTriangle } from 'react-feather'
 import styled from 'styled-components'
-import { CloseIcon, ThemedText } from 'theme'
+import { CloseIcon, ThemedText } from 'theme/components'
 import { useFormatter } from 'utils/formatNumbers'
 
 import Modal from '../Modal'

src/components/swap/PriceImpactWarning.tsx

@@ -2,10 +2,10 @@ import { Trans } from '@lingui/macro'
 import { Percent } from '@uniswap/sdk-core'
 import { OutlineCard } from 'components/Card'
 import styled, { useTheme } from 'styled-components'
+import { ThemedText } from 'theme/components'
 import { opacify } from 'theme/utils'
 import { useFormatter } from 'utils/formatNumbers'
 
-import { ThemedText } from '../../theme'
 import { AutoColumn } from '../Column'
 import { RowBetween, RowFixed } from '../Row'
 import { MouseoverTooltip } from '../Tooltip'

src/components/swap/SwapBuyFiatButton.tsx

@@ -7,7 +7,7 @@ import { ButtonText } from 'components/Button'
 import { MouseoverTooltip } from 'components/Tooltip'
 import { useCallback, useEffect, useState } from 'react'
 import styled from 'styled-components'
-import { ExternalLink } from 'theme'
+import { ExternalLink } from 'theme/components'
 
 import { useFiatOnrampAvailability, useOpenModal } from '../../state/application/hooks'
 import { ApplicationModal } from '../../state/application/reducer'

src/components/swap/SwapDetailsDropdown.tsx

@@ -11,7 +11,7 @@ import { useState } from 'react'
 import { ChevronDown } from 'react-feather'
 import { InterfaceTrade } from 'state/routing/types'
 import styled, { keyframes, useTheme } from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 
 import { AdvancedSwapDetails } from './AdvancedSwapDetails'
 import GasEstimateTooltip from './GasEstimateTooltip'

src/components/swap/SwapHeader.tsx

@@ -2,7 +2,7 @@ import { Trans } from '@lingui/macro'
 import { Percent } from '@uniswap/sdk-core'
 import { InterfaceTrade } from 'state/routing/types'
 import styled from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 
 import { RowBetween, RowFixed } from '../Row'
 import SettingsTab from '../Settings'

src/components/swap/SwapModalFooter.tsx

@@ -15,7 +15,7 @@ import { ClassicTrade, InterfaceTrade, RouterPreference } from 'state/routing/ty
 import { getTransactionCount, isClassicTrade } from 'state/routing/utils'
 import { useRouterPreference, useUserSlippageTolerance } from 'state/user/hooks'
 import styled, { DefaultTheme, useTheme } from 'styled-components'
-import { ExternalLink, ThemedText } from 'theme'
+import { ExternalLink, ThemedText } from 'theme/components'
 import { FormatterRule, NumberType, SIX_SIG_FIGS_NO_COMMAS, useFormatter } from 'utils/formatNumbers'
 import getRoutingDiagramEntries from 'utils/getRoutingDiagramEntries'
 import { formatSwapButtonClickEventProperties } from 'utils/loggingFormatters'

src/components/swap/SwapModalHeader.tsx

@@ -5,7 +5,7 @@ import { useUSDPrice } from 'hooks/useUSDPrice'
 import { InterfaceTrade } from 'state/routing/types'
 import { Field } from 'state/swap/actions'
 import styled from 'styled-components'
-import { Divider, ThemedText } from 'theme'
+import { Divider, ThemedText } from 'theme/components'
 
 import { SwapModalHeaderAmount } from './SwapModalHeaderAmount'
 

src/components/swap/SwapModalHeaderAmount.tsx

@@ -8,7 +8,8 @@ import { PropsWithChildren, ReactNode } from 'react'
 import { TextProps } from 'rebass'
 import { Field } from 'state/swap/actions'
 import styled from 'styled-components'
-import { BREAKPOINTS, ThemedText } from 'theme'
+import { BREAKPOINTS } from 'theme'
+import { ThemedText } from 'theme/components'
 import { NumberType, useFormatter } from 'utils/formatNumbers'
 
 export const Label = styled(ThemedText.BodySmall)<{ cursor?: string }>`

src/components/swap/SwapRoute.tsx

@@ -6,7 +6,7 @@ import RoutingDiagram from 'components/RoutingDiagram/RoutingDiagram'
 import { SUPPORTED_GAS_ESTIMATE_CHAIN_IDS } from 'constants/chains'
 import useAutoRouterSupported from 'hooks/useAutoRouterSupported'
 import { ClassicTrade } from 'state/routing/types'
-import { Separator, ThemedText } from 'theme'
+import { Separator, ThemedText } from 'theme/components'
 import getRoutingDiagramEntries from 'utils/getRoutingDiagramEntries'
 
 import RouterLabel from '../RouterLabel'

src/components/swap/SwapSkeleton.tsx

@@ -2,7 +2,7 @@ import { Trans } from '@lingui/macro'
 import { ArrowContainer } from 'pages/Swap'
 import { ArrowDown } from 'react-feather'
 import styled, { useTheme } from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 
 import { ArrowWrapper } from './styled'
 

src/components/swap/TradePrice.tsx

@@ -4,7 +4,7 @@ import { useUSDPrice } from 'hooks/useUSDPrice'
 import tryParseCurrencyAmount from 'lib/utils/tryParseCurrencyAmount'
 import { useCallback, useMemo, useState } from 'react'
 import styled from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 import { NumberType, useFormatter } from 'utils/formatNumbers'
 
 interface TradePriceProps {

src/components/swap/UnsupportedCurrencyFooter.tsx

@@ -9,7 +9,7 @@ import Modal from 'components/Modal'
 import { AutoRow, RowBetween } from 'components/Row'
 import { useState } from 'react'
 import styled from 'styled-components'
-import { CloseIcon, ExternalLink, ThemedText } from 'theme'
+import { CloseIcon, ExternalLink, ThemedText } from 'theme/components'
 import { Z_INDEX } from 'theme/zIndex'
 
 import { useUnsupportedTokens } from '../../hooks/Tokens'

src/components/vote/DelegateModal.tsx

@@ -4,13 +4,13 @@ import { useWeb3React } from '@web3-react/core'
 import { ReactNode, useState } from 'react'
 import { X } from 'react-feather'
 import styled from 'styled-components'
+import { ThemedText } from 'theme/components'
 import { formatCurrencyAmount } from 'utils/formatCurrencyAmount'
 
 import { UNI } from '../../constants/tokens'
 import useENS from '../../hooks/useENS'
 import { useTokenBalance } from '../../state/connection/hooks'
 import { useDelegateCallback } from '../../state/governance/hooks'
-import { ThemedText } from '../../theme'
 import AddressInputPanel from '../AddressInputPanel'
 import { ButtonPrimary } from '../Button'
 import { AutoColumn } from '../Column'

src/components/vote/ExecuteModal.tsx

@@ -3,11 +3,11 @@ import { useWeb3React } from '@web3-react/core'
 import { useState } from 'react'
 import { ArrowUpCircle, X } from 'react-feather'
 import styled, { useTheme } from 'styled-components'
+import { CustomLightSpinner, ThemedText } from 'theme/components'
+import { ExternalLink } from 'theme/components'
 
 import Circle from '../../assets/images/blue-loader.svg'
 import { useExecuteCallback } from '../../state/governance/hooks'
-import { CustomLightSpinner, ThemedText } from '../../theme'
-import { ExternalLink } from '../../theme'
 import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
 import { ButtonPrimary } from '../Button'
 import { AutoColumn, ColumnCenter } from '../Column'

src/components/vote/ProposalEmptyState.tsx

@@ -2,7 +2,7 @@ import { Trans } from '@lingui/macro'
 import { ChainId } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
 import styled from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 
 const EmptyProposals = styled.div`
   border: 1px solid ${({ theme }) => theme.neutral2};

src/components/vote/QueueModal.tsx

@@ -3,11 +3,11 @@ import { useWeb3React } from '@web3-react/core'
 import { useState } from 'react'
 import { ArrowUpCircle, X } from 'react-feather'
 import styled, { useTheme } from 'styled-components'
+import { CustomLightSpinner, ThemedText } from 'theme/components'
+import { ExternalLink } from 'theme/components'
 
 import Circle from '../../assets/images/blue-loader.svg'
 import { useQueueCallback } from '../../state/governance/hooks'
-import { CustomLightSpinner, ThemedText } from '../../theme'
-import { ExternalLink } from '../../theme'
 import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
 import { ButtonPrimary } from '../Button'
 import { AutoColumn, ColumnCenter } from '../Column'

src/components/vote/VoteModal.tsx

@@ -3,13 +3,13 @@ import { useWeb3React } from '@web3-react/core'
 import { useState } from 'react'
 import { ArrowUpCircle, X } from 'react-feather'
 import styled, { useTheme } from 'styled-components'
+import { CustomLightSpinner, ThemedText } from 'theme/components'
+import { ExternalLink } from 'theme/components'
 import { formatCurrencyAmount } from 'utils/formatCurrencyAmount'
 
 import Circle from '../../assets/images/blue-loader.svg'
 import { useUserVotes, useVoteCallback } from '../../state/governance/hooks'
 import { VoteOption } from '../../state/governance/types'
-import { CustomLightSpinner, ThemedText } from '../../theme'
-import { ExternalLink } from '../../theme'
 import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
 import { ButtonPrimary } from '../Button'
 import { AutoColumn, ColumnCenter } from '../Column'

src/nft/components/bag/BagFooter.tsx

@@ -36,7 +36,7 @@ import { PropsWithChildren, useEffect, useMemo, useState } from 'react'
 import { AlertTriangle, ChevronDown } from 'react-feather'
 import { InterfaceTrade, TradeFillType, TradeState } from 'state/routing/types'
 import styled, { useTheme } from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 
 import { BuyButtonStateData, BuyButtonStates, getBuyButtonStateData } from './ButtonStates'
 

src/nft/components/bag/BagHeader.tsx

@@ -3,7 +3,7 @@ import { OpacityHoverState } from 'components/Common'
 import { BagCloseIcon } from 'nft/components/icons'
 import { useMemo } from 'react'
 import styled from 'styled-components'
-import { ButtonText, ThemedText } from 'theme'
+import { ButtonText, ThemedText } from 'theme/components'
 
 const ClearButton = styled(ButtonText)`
   color: ${({ theme }) => theme.neutral2};

src/nft/components/card/containers.tsx

@@ -4,7 +4,8 @@ import { StyledImage } from 'nft/components/card/media'
 import { ReactNode } from 'react'
 import { Link } from 'react-router-dom'
 import styled from 'styled-components'
-import { BREAKPOINTS, ThemedText } from 'theme'
+import { BREAKPOINTS } from 'theme'
+import { ThemedText } from 'theme/components'
 
 const BORDER_RADIUS = '12'
 

src/nft/components/card/icons.tsx

@@ -8,7 +8,7 @@ import { Markets } from 'nft/types'
 import { putCommas } from 'nft/utils'
 import { AlertTriangle, Check, Tag } from 'react-feather'
 import styled from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 
 const StyledMarketplaceContainer = styled.div<{ isText?: boolean }>`
   position: absolute;

src/nft/components/card/media.tsx

@@ -5,8 +5,9 @@ import { UniformAspectRatio, UniformAspectRatios } from 'nft/types'
 import { ReactNode, useEffect, useRef, useState } from 'react'
 import { Pause, Play } from 'react-feather'
 import styled from 'styled-components'
-import { BREAKPOINTS, ThemedText } from 'theme'
+import { BREAKPOINTS } from 'theme'
 import { colors } from 'theme/colors'
+import { ThemedText } from 'theme/components'
 
 const StyledImageContainer = styled.div<{ isDisabled?: boolean }>`
   position: relative;

src/nft/components/collection/ActivityCells.tsx

@@ -31,7 +31,7 @@ import { getTimeDifference } from 'nft/utils/date'
 import { putCommas } from 'nft/utils/putCommas'
 import { MouseEvent, ReactNode, useMemo, useState } from 'react'
 import styled from 'styled-components'
-import { ExternalLink } from 'theme'
+import { ExternalLink } from 'theme/components'
 import { shortenAddress } from 'utils'
 import { ExplorerDataType, getExplorerLink } from 'utils/getExplorerLink'
 

src/nft/components/collection/CollectionNfts.tsx

@@ -53,7 +53,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import InfiniteScroll from 'react-infinite-scroll-component'
 import { useLocation } from 'react-router-dom'
 import styled, { css } from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 
 import { LoadingAssets } from './CollectionAssetLoading'
 import { MARKETPLACE_ITEMS } from './MarketplaceSelect'

src/nft/components/collection/CollectionStats.tsx

@@ -12,7 +12,7 @@ import { floorFormatter, quantityFormatter, roundWholePercentage, volumeFormatte
 import { ReactNode, useEffect, useReducer, useRef, useState } from 'react'
 import ReactMarkdown from 'react-markdown'
 import styled, { css } from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 
 import { DiscordIcon, EllipsisIcon, ExternalIcon, InstagramIcon, TwitterIcon, VerifiedIcon, XMarkIcon } from '../icons'
 import * as styles from './CollectionStats.css'

src/nft/components/collection/MarketplaceSelect.tsx

@@ -11,7 +11,7 @@ import { TraitPosition, useTraitsOpen } from 'nft/hooks/useTraitsOpen'
 import { getMarketplaceIcon } from 'nft/utils'
 import { FormEvent, useEffect, useMemo, useReducer, useState } from 'react'
 import styled from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 
 import { Checkbox } from '../layout/Checkbox'
 

src/nft/components/collection/Sweep.tsx

@@ -10,7 +10,7 @@ import { calcPoolPrice, formatWeiToDecimal, isInSameSudoSwapPool } from 'nft/uti
 import { default as Slider } from 'rc-slider'
 import { useEffect, useMemo, useReducer, useState } from 'react'
 import styled, { useTheme } from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 
 const SweepContainer = styled.div`
   display: flex;

src/nft/components/common/Portal/index.ts

-export * from './Portal'

src/nft/components/common/SortDropdown/index.ts

-export * from './FilterSortDropdown'
-export * from './SortDropdown'

src/nft/components/common/SortDropdown/SortDropdown.tsx → src/nft/components/common/SortDropdown/index.tsx

@@ -11,6 +11,8 @@ import { useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState } fro
 
 import * as styles from './SortDropdown.css'
 
+export { FilterSortDropdown } from './FilterSortDropdown'
+
 export const SortDropdown = ({
   dropDownOptions,
   inFilters,

src/nft/components/details/AssetPriceDetails.tsx

@@ -17,7 +17,7 @@ import {
 import { useMemo } from 'react'
 import { Link, useNavigate } from 'react-router-dom'
 import styled, { css, useTheme } from 'styled-components'
-import { ExternalLink, ThemedText } from 'theme'
+import { ExternalLink, ThemedText } from 'theme/components'
 import { shortenAddress } from 'utils/addresses'
 
 const TWITTER_WIDTH = 560

src/nft/components/explore/Cells/Cells.tsx

@@ -6,7 +6,7 @@ import { Denomination } from 'nft/types'
 import { ethNumberStandardFormatter, volumeFormatter } from 'nft/utils'
 import { ReactNode } from 'react'
 import styled from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 
 import * as styles from './Cells.css'
 

src/nft/components/explore/Table.tsx

@@ -10,7 +10,7 @@ import { useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { Column, ColumnInstance, HeaderGroup, IdType, useSortBy, useTable } from 'react-table'
 import styled, { useTheme } from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 
 import { Box } from '../../components/Box'
 import { CollectionTableColumn } from '../../types'

src/nft/components/explore/TrendingCollections.tsx

@@ -5,7 +5,7 @@ import { useNativeUsdPrice } from 'nft/hooks'
 import { CollectionTableColumn, Denomination, TimePeriod, VolumeType } from 'nft/types'
 import { useMemo, useState } from 'react'
 import styled from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 
 import CollectionTable from './CollectionTable'
 

src/nft/components/profile/list/Dropdown.tsx

@@ -3,7 +3,7 @@ import Row from 'components/Row'
 import { DropDownOption } from 'nft/types'
 import { Check } from 'react-feather'
 import styled, { useTheme } from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 
 const DropdownWrapper = styled(Column)<{ $width: number }>`
   gap: 4px;

src/nft/components/profile/list/ListPage.tsx

@@ -16,14 +16,15 @@ import {
 } from 'nft/components/profile/list/utils'
 import { useIsMobile, useNFTList, useProfilePageState, useSellAsset } from 'nft/hooks'
 import { LIST_PAGE_MARGIN, LIST_PAGE_MARGIN_MOBILE } from 'nft/pages/profile/shared'
-import { looksRareNonceFetcher } from 'nft/queries'
+import { looksRareNonceFetcher } from 'nft/queries/looksRare'
 import { ProfilePageStateType } from 'nft/types'
 import { formatEth } from 'nft/utils'
 import { ListingMarkets } from 'nft/utils/listNfts'
 import { useEffect, useMemo, useReducer, useState } from 'react'
 import { ArrowLeft } from 'react-feather'
 import styled from 'styled-components'
-import { BREAKPOINTS, ThemedText } from 'theme'
+import { BREAKPOINTS } from 'theme'
+import { ThemedText } from 'theme/components'
 import { Z_INDEX } from 'theme/zIndex'
 import { NumberType, useFormatter } from 'utils/formatNumbers'
 

src/nft/components/profile/list/MarketplaceRow.tsx

@@ -11,7 +11,8 @@ import { getMarketplaceIcon } from 'nft/utils'
 import { formatEth, formatUsdPrice } from 'nft/utils/currency'
 import { Dispatch, DispatchWithoutAction, useCallback, useEffect, useMemo, useReducer, useState } from 'react'
 import styled from 'styled-components'
-import { BREAKPOINTS, ThemedText } from 'theme'
+import { BREAKPOINTS } from 'theme'
+import { ThemedText } from 'theme/components'
 
 import { PriceTextInput } from './PriceTextInput'
 import { RoyaltyTooltip } from './RoyaltyTooltip'

src/nft/components/profile/list/Modal/BelowFloorWarningModal.tsx

@@ -7,7 +7,8 @@ import { Listing, WalletAsset } from 'nft/types'
 import React from 'react'
 import { AlertTriangle, X } from 'react-feather'
 import styled, { useTheme } from 'styled-components'
-import { BREAKPOINTS, ThemedText } from 'theme'
+import { BREAKPOINTS } from 'theme'
+import { ThemedText } from 'theme/components'
 import { Z_INDEX } from 'theme/zIndex'
 
 const ModalWrapper = styled(Column)`

src/nft/components/profile/list/Modal/ContentRow.tsx

@@ -8,7 +8,7 @@ import { getMarketplaceIcon } from 'nft/utils'
 import { useEffect, useRef } from 'react'
 import { Check, XOctagon } from 'react-feather'
 import styled, { css, useTheme } from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 import { opacify } from 'theme/utils'
 
 const ContentColumn = styled(Column)<{ failed: boolean }>`

src/nft/components/profile/list/Modal/ListModal.tsx

@@ -13,7 +13,8 @@ import { ListingStatus } from 'nft/types'
 import { useCallback, useEffect, useMemo, useReducer } from 'react'
 import { X } from 'react-feather'
 import styled from 'styled-components'
-import { BREAKPOINTS, ThemedText } from 'theme'
+import { BREAKPOINTS } from 'theme'
+import { ThemedText } from 'theme/components'
 import { Z_INDEX } from 'theme/zIndex'
 import { NumberType, useFormatter } from 'utils/formatNumbers'
 

src/nft/components/profile/list/Modal/ListModalSection.tsx

@@ -9,8 +9,8 @@ import { AssetRow, CollectionRow, ListingRow, ListingStatus } from 'nft/types'
 import { useMemo } from 'react'
 import { Info } from 'react-feather'
 import styled, { useTheme } from 'styled-components'
-import { ThemedText } from 'theme'
 import { colors } from 'theme/colors'
+import { ThemedText } from 'theme/components'
 import { TRANSITION_DURATIONS } from 'theme/styles'
 
 import { ContentRow } from './ContentRow'

src/nft/components/profile/list/Modal/SuccessScreen.tsx

@@ -12,7 +12,8 @@ import { formatEth, generateTweetForList, pluralize } from 'nft/utils'
 import { useMemo } from 'react'
 import { Twitter, X } from 'react-feather'
 import styled, { css, useTheme } from 'styled-components'
-import { BREAKPOINTS, ThemedText } from 'theme'
+import { BREAKPOINTS } from 'theme'
+import { ThemedText } from 'theme/components'
 import { NumberType, useFormatter } from 'utils/formatNumbers'
 
 import { TitleRow } from '../shared'

src/nft/components/profile/list/NFTListRow.tsx

@@ -6,7 +6,8 @@ import { ListingMarket, WalletAsset } from 'nft/types'
 import { Dispatch, useEffect, useReducer, useState } from 'react'
 import { Trash2 } from 'react-feather'
 import styled, { css, useTheme } from 'styled-components'
-import { BREAKPOINTS, ThemedText } from 'theme'
+import { BREAKPOINTS } from 'theme'
+import { ThemedText } from 'theme/components'
 
 import { MarketplaceRow } from './MarketplaceRow'
 import { SetPriceMethod } from './shared'

src/nft/components/profile/list/RoyaltyTooltip.tsx

@@ -5,7 +5,7 @@ import { getRoyalty } from 'nft/components/profile/list/utils'
 import { ListingMarket, WalletAsset } from 'nft/types'
 import { formatEth, getMarketplaceIcon } from 'nft/utils'
 import styled, { css } from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 
 const FeeWrap = styled(Row)`
   margin-bottom: 4px;

src/nft/components/profile/list/SelectMarketplacesDropdown.tsx

@@ -10,7 +10,7 @@ import { getMarketplaceIcon } from 'nft/utils'
 import { ListingMarkets } from 'nft/utils/listNfts'
 import { Dispatch, FormEvent, useMemo, useReducer, useRef } from 'react'
 import styled from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 import { Z_INDEX } from 'theme/zIndex'
 
 const MarketplaceRowWrapper = styled(Row)`

src/nft/components/profile/list/utils.ts

@@ -7,10 +7,9 @@ import { useNFTList, useSellAsset } from 'nft/hooks'
 import {
   LOOKSRARE_MARKETPLACE_CONTRACT_721,
   LOOKSRARE_MARKETPLACE_CONTRACT_1155,
-  X2Y2_TRANSFER_CONTRACT_721,
-  X2Y2_TRANSFER_CONTRACT_1155,
-} from 'nft/queries'
-import { OPENSEA_CROSS_CHAIN_CONDUIT } from 'nft/queries/openSea'
+} from 'nft/queries/looksRare/constants'
+import { OPENSEA_CROSS_CHAIN_CONDUIT } from 'nft/queries/openSea/constants'
+import { X2Y2_TRANSFER_CONTRACT_721, X2Y2_TRANSFER_CONTRACT_1155 } from 'nft/queries/x2y2'
 import { CollectionRow, Listing, ListingMarket, ListingRow, ListingStatus, WalletAsset } from 'nft/types'
 import { approveCollection, LOOKS_RARE_CREATOR_BASIS_POINTS, signListing } from 'nft/utils/listNfts'
 import { Dispatch, useEffect } from 'react'

src/nft/components/profile/view/EmptyWalletContent.tsx

@@ -3,7 +3,7 @@ import { headlineMedium } from 'nft/css/common.css'
 import { useCallback } from 'react'
 import { useNavigate } from 'react-router-dom'
 import styled from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 
 import { EmptyActivityIcon, EmptyNftsIcon, EmptyPoolsIcon, EmptyTokensIcon } from './icons'
 

src/nft/components/profile/view/FilterSidebar.tsx

@@ -26,7 +26,7 @@ import AutoSizer from 'react-virtualized-auto-sizer'
 import { FixedSizeList, ListOnItemsRenderedProps } from 'react-window'
 import InfiniteLoader from 'react-window-infinite-loader'
 import styled from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 import { TRANSITION_DURATIONS } from 'theme/styles'
 import noop from 'utils/noop'
 

src/nft/components/profile/view/ProfilePage.tsx

@@ -17,7 +17,7 @@ import {
   useWalletCollections,
 } from 'nft/hooks'
 import { ScreenBreakpointsPaddings } from 'nft/pages/collection/index.css'
-import { OSCollectionsFetcher } from 'nft/queries'
+import { OSCollectionsFetcher } from 'nft/queries/openSea'
 import { WalletCollection } from 'nft/types'
 import { Dispatch, SetStateAction, Suspense, useCallback, useEffect, useMemo, useState } from 'react'
 import InfiniteScroll from 'react-infinite-scroll-component'

src/nft/hooks/index.ts

-export * from './useBag'
-export * from './useCollectionFilters'
-export * from './useFiltersExpanded'
-export * from './useIsCollectionLoading'
-export * from './useIsMobile'
-export * from './useIsTablet'
-export * from './useMarketplaceSelect'
-export * from './useNFTList'
-export * from './useNFTSelect'
-export * from './useProfilePageState'
-export * from './useSelectAsset'
-export * from './useSellAsset'
-export * from './useSendTransaction'
-export * from './useSubscribeScrollState'
-export * from './useSweep'
-export * from './useTransactionResponse'
-export * from './useUsdPrice'
-export * from './useWalletBalance'
-export * from './useWalletCollections'
+export { useBag } from './useBag'
+export type { CollectionFilters, Trait } from './useCollectionFilters'
+export {
+  initialCollectionFilterState,
+  SortBy,
+  SortByPointers,
+  SortByQueries,
+  useCollectionFilters,
+} from './useCollectionFilters'
+export { useFiltersExpanded } from './useFiltersExpanded'
+export { useIsCollectionLoading } from './useIsCollectionLoading'
+export { useIsMobile } from './useIsMobile'
+export { useIsTablet } from './useIsTablet'
+export { useNFTList } from './useNFTList'
+export { useProfilePageState } from './useProfilePageState'
+export { useSellAsset } from './useSellAsset'
+export { useSendTransaction } from './useSendTransaction'
+export { useSubscribeScrollState } from './useSubscribeScrollState'
+export { useTransactionResponse } from './useTransactionResponse'
+export { useNativeUsdPrice, useUsdPriceofNftAsset } from './useUsdPrice'
+export { useWalletBalance } from './useWalletBalance'
+export { useWalletCollections } from './useWalletCollections'

src/nft/hooks/useMarketplaceSelect.ts

-import { create } from 'zustand'
-import { devtools } from 'zustand/middleware'
-
-export type MarketplaceOption = { name: string; icon: string }
-
-interface State {
-  options: MarketplaceOption[]
-  select: (o: MarketplaceOption) => void
-}
-
-export const useMarketplaceSelect = create<State>()(
-  devtools(
-    (set) => ({
-      options: [],
-      select: (option) =>
-        set(({ options }) => {
-          if (options.find((o) => option.name === o.name))
-            return { options: options.filter((x) => x.name !== option.name) }
-          else return { options: [...options, option] }
-        }),
-    }),
-    { name: 'useMarketplaceSelect' }
-  )
-)

src/nft/hooks/useNFTSelect.ts

-import { create } from 'zustand'
-import { devtools } from 'zustand/middleware'
-
-import { OpenSeaAsset } from '../types'
-
-interface SelectNFTState {
-  /**
-   * NFTs selected by a user
-   */
-  selectedNFTs: (OpenSeaAsset & { price?: number })[]
-
-  selectNFT: (nft: OpenSeaAsset & { price?: number }) => void
-  reset: () => void
-  setUniversalPrice: (price: number) => void
-  toggleUniversalPrice: (v: boolean) => void
-  setSingleNFTPrice: (id: number, price: number) => void
-  isUniversalPrice: boolean
-}
-
-export const useNFTSelect = create<SelectNFTState>()(
-  devtools(
-    (set) => ({
-      selectedNFTs: [],
-      isUniversalPrice: false,
-      selectNFT: (nft) =>
-        set(({ selectedNFTs }) => {
-          if (selectedNFTs.length === 0) return { selectedNFTs: [nft] }
-          else if (selectedNFTs.some((x) => x.id === nft.id))
-            return { selectedNFTs: selectedNFTs.filter((n) => n.id !== nft.id) }
-          else return { selectedNFTs: [...selectedNFTs, nft] }
-        }),
-      reset: () => set(() => ({ selectedNFTs: [] })),
-      toggleUniversalPrice: (v) => set(() => ({ isUniversalPrice: v })),
-      setUniversalPrice: (price) =>
-        set(({ selectedNFTs }) => {
-          return {
-            selectedNFTs: selectedNFTs.map((n) => ({ ...n, price })),
-            isUniversalPrice: true,
-          }
-        }),
-      setSingleNFTPrice: (id, price) =>
-        set(({ selectedNFTs }) => {
-          const found = selectedNFTs.find((i) => i.id === id)
-
-          return {
-            selectedNFTs: [...selectedNFTs.filter((n) => n.id !== id), { ...found, price }],
-          }
-        }),
-    }),
-    { name: 'useNFTSelect' }
-  )
-)

src/nft/hooks/useSelectAsset.ts

-import { v4 as uuidv4 } from 'uuid'
-import { create } from 'zustand'
-import { devtools } from 'zustand/middleware'
-
-import { GenieAsset } from '../types'
-
-interface SelectAssetState {
-  selectedAssets: GenieAsset[]
-  selectAsset: (asset: GenieAsset) => void
-  removeAsset: (asset: GenieAsset) => void
-  reset: () => void
-}
-
-export const useSelectAsset = create<SelectAssetState>()(
-  devtools((set) => ({
-    selectedAssets: [],
-    selectAsset: (asset) =>
-      set(({ selectedAssets }) => {
-        const assetWithId = { id: uuidv4(), ...asset }
-        if (selectedAssets.length === 0) return { selectedAssets: [assetWithId] }
-        else return { selectedAssets: [...selectedAssets, assetWithId] }
-      }),
-    removeAsset: (asset) => {
-      set(({ selectedAssets }) => {
-        if (selectedAssets.length === 0) return { selectedAssets: [] }
-        else selectedAssets.find((x) => x.tokenId === asset.tokenId && x.address === asset.address)
-        const assetsCopy = [...selectedAssets]
-        assetsCopy.splice(
-          selectedAssets.findIndex((n) => n.tokenId === asset.tokenId && n.address === asset.address),
-          1
-        )
-        return { selectedAssets: assetsCopy }
-      })
-    },
-    reset: () => set(() => ({ selectedAssets: [] })),
-  }))
-)

src/nft/hooks/useSweep.ts

-import { create } from 'zustand'
-import { devtools, persist } from 'zustand/middleware'
-
-import { GenieAsset } from '../types'
-
-interface SweepState {
-  sweepAssets: GenieAsset[]
-  setSweepAssets: (assets: GenieAsset[]) => void
-  removeSweepAsset: (asset: GenieAsset) => void
-  reset: () => void
-}
-
-export const useSweep = create<SweepState>()(
-  persist(
-    devtools((set) => ({
-      sweepAssets: [],
-      setSweepAssets: (assets) =>
-        set(() => {
-          return { sweepAssets: assets }
-        }),
-      removeSweepAsset: (asset) => {
-        set(({ sweepAssets }) => {
-          if (sweepAssets.length === 0) return { sweepAssets: [] }
-          else sweepAssets.find((x) => x.tokenId === asset.tokenId && x.address === asset.address)
-          const assetsCopy = [...sweepAssets]
-          assetsCopy.splice(
-            sweepAssets.findIndex((n) => n.tokenId === asset.tokenId && n.address === asset.address),
-            1
-          )
-          return { sweepAssets: assetsCopy }
-        })
-      },
-      reset: () => set(() => ({ sweepAssets: [] })),
-    })),
-    { name: 'useSweep' }
-  )
-)

src/nft/pages/collection/index.tsx

@@ -20,7 +20,7 @@ import { Suspense, useEffect } from 'react'
 import { useLocation, useNavigate, useParams } from 'react-router-dom'
 import { animated, easings, useSpring } from 'react-spring'
 import styled from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 import { TRANSITION_DURATIONS } from 'theme/styles'
 import { Z_INDEX } from 'theme/zIndex'
 

src/nft/pages/profile/profile.tsx

@@ -12,7 +12,8 @@ import { useBag, useProfilePageState, useSellAsset, useWalletCollections } from
 import { ProfilePageStateType } from 'nft/types'
 import { Suspense, useEffect, useRef } from 'react'
 import styled from 'styled-components'
-import { BREAKPOINTS, ThemedText } from 'theme'
+import { BREAKPOINTS } from 'theme'
+import { ThemedText } from 'theme/components'
 
 import { LIST_PAGE_MARGIN, LIST_PAGE_MARGIN_MOBILE } from './shared'
 

src/nft/queries/genie/CollectionPreviewFetcher.ts

-export const CollectionPreviewFetcher = async (
-  address: string
-): Promise<
-  [
-    {
-      name: string
-      bannerImageUrl?: string
-    }
-  ]
-> => {
-  const url = `${process.env.REACT_APP_TEMP_API_URL}/nft/collectionPreview?address=${address}`
-
-  const controller = new AbortController()
-
-  const timeoutId = setTimeout(() => controller.abort(), 3000)
-
-  const r = await fetch(url, {
-    method: 'GET',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-  })
-  clearInterval(timeoutId)
-  const data = await r.json()
-
-  return [
-    {
-      name: data.data.collectionName,
-      bannerImageUrl: data.data.bannerImageUrl,
-    },
-  ]
-}

src/nft/queries/genie/RouteFetcher.ts

-import { NftStandard } from 'graphql/data/__generated__/types-and-hooks'
-import { GenieAsset, RouteResponse } from 'nft/types'
-
-export const fetchRoute = async ({
-  toSell,
-  toBuy,
-  senderAddress,
-}: {
-  toSell: any
-  toBuy: any
-  senderAddress: string
-}): Promise<RouteResponse> => {
-  const url = `${process.env.REACT_APP_TEMP_API_URL}/nft/route`
-  const payload = {
-    sell: [...toSell].map((x) => buildRouteItem(x)),
-    buy: [...toBuy].filter((x) => x.tokenType !== 'Dust').map((x) => buildRouteItem(x)),
-    sender: senderAddress,
-  }
-
-  const r = await fetch(url, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify(payload),
-  })
-  const data = await r.json()
-
-  return data
-}
-
-type ApiPriceInfo = {
-  basePrice: string
-  baseAsset: string
-  ETHPrice: string
-}
-
-type RouteItem = {
-  id?: string
-  symbol?: string
-  name: string
-  decimals: number
-  address: string
-  priceInfo: ApiPriceInfo
-  tokenType?: NftStandard
-  tokenId: string
-  amount: number
-  marketplace?: string
-  collectionName?: string
-}
-
-const buildRouteItem = (item: GenieAsset): RouteItem => {
-  return {
-    id: item.id,
-    symbol: item.priceInfo.baseAsset,
-    name: item.name ?? '',
-    decimals: parseFloat(item.priceInfo.baseDecimals),
-    address: item.address,
-    tokenType: item.tokenType,
-    tokenId: item.tokenId,
-    marketplace: item.marketplace,
-    collectionName: item.collectionName,
-    amount: 1,
-    priceInfo: {
-      basePrice: item.priceInfo.basePrice,
-      baseAsset: item.priceInfo.baseAsset,
-      ETHPrice: item.priceInfo.ETHPrice,
-    },
-  }
-}

src/nft/queries/genie/index.ts

-export * from './CollectionPreviewFetcher'
-export * from './RouteFetcher'
+export { CollectionRewardsFetcher } from './GetAirdorpMerkle'

src/nft/queries/index.ts

-export * from './genie'
-export * from './looksRare'
-export * from './openSea'
-export * from './x2y2'

src/nft/queries/looksRare/index.ts

-export * from './constants'
-export * from './createLooksRareOrder'
-export * from './looksRareNonceFetcher'
-export * from './looksRareRewardsFetcher'
+export { createLooksRareOrder } from './createLooksRareOrder'
+export { looksRareNonceFetcher } from './looksRareNonceFetcher'

src/nft/queries/looksRare/looksRareRewardsFetcher.ts

-import { LooksRareRewardsData } from '../../types'
-
-const looksRareApiAddress = 'https://api.looksrare.org/api/v1'
-
-export const looksRareRewardsFetcher = async (address: any): Promise<LooksRareRewardsData | string> => {
-  const res = await fetch(`${looksRareApiAddress}/rewards?address=${address}`)
-
-  if (res.status !== 200) throw new Error(`LooksRare rewards API errored with status ${res.statusText}`)
-
-  const json = await res.json()
-
-  return json.data
-}

src/nft/queries/openSea/index.ts

-export * from './constants'
-export * from './OSCollectionsFetcher'
-export * from './PostOpenSeaSellOrder'
+export { OSCollectionsFetcher } from './OSCollectionsFetcher'
+export { PostOpenSeaSellOrder } from './PostOpenSeaSellOrder'

src/nft/queries/x2y2/index.ts

@@ -27,7 +27,7 @@ export const newX2Y2Order = async (payload: OrderPayload): Promise<boolean> => {
   }
 }
 
-export const getOrderId = async (collectionAddress: string, tokenId: string): Promise<number | undefined> => {
+export const getX2Y2OrderId = async (collectionAddress: string, tokenId: string): Promise<number | undefined> => {
   const url = `${process.env.REACT_APP_TEMP_API_URL}/nft/getX2Y2OrderId?collectionAddress=${collectionAddress}&tokenId=${tokenId}`
   const r = await fetch(url, {
     method: 'GET',

src/nft/types/checkout/checkout.ts

-import { ContractReceipt } from '@ethersproject/contracts'
-
-import { GenieAsset, Markets, PriceInfo, TokenType } from '../common'
-
-export interface UpdatedGenieAsset extends GenieAsset {
-  updatedPriceInfo?: PriceInfo
-  isUnavailable?: boolean
-  orderSource?: 'api' | 'stored' | string
-}
-
-export enum RoutingActions {
-  Buy = 'Buy',
-  Sell = 'Sell',
-  Swap = 'Swap',
-}
-
-export type SellItem = {
-  id?: string
-  symbol?: string
-  name: string
-  decimals: number
-  address: string
-  priceInfo: PriceInfo
-  tokenType: TokenType
-  tokenId: string
-  amount: string // convert to BigNumber
-  marketplace?: Markets
-}
-
-export type BuyItem = {
-  id?: string
-  symbol?: string
-  name?: string
-  decimals: number
-  address: string
-  priceInfo: PriceInfo
-  tokenType: TokenType
-  tokenId: string
-  amount: string // convert to BigNumber
-  marketplace: Markets
-  collectionName?: string
-  orderSource?: 'api' | 'stored' | string
-}
-
-export type RoutingItem = {
-  action: RoutingActions
-  marketplace: string
-  amountIn: string
-  assetIn: SellItem | PriceInfo
-  amountOut: string
-  assetOut: BuyItem | PriceInfo
-}
-
-export interface RouteResponse {
-  valueToSend?: string
-  route: RoutingItem[]
-  data: any
-  to: any
-}
-
-export interface TxResponse {
-  nftsPurchased: UpdatedGenieAsset[]
-  nftsNotPurchased: UpdatedGenieAsset[]
-  txReceipt: ContractReceipt
-}
-
-export enum TxStateType {
-  Success = 'Success',
-  Denied = 'Denied',
-  Invalid = 'Invalid',
-  Failed = 'Failed',
-  New = 'New',
-  Signing = 'Signing',
-  Confirming = 'Confirming',
-}
-
-export enum BagItemStatus {
-  ADDED_TO_BAG = 'Added to bag',
-  REVIEWED = 'Reviewed',
-  REVIEWING_PRICE_CHANGE = 'REVIEWING_PRICE_CHANGE',
-  UNAVAILABLE = 'UNAVAILABLE',
-}
-
-export type BagItem = {
-  asset: UpdatedGenieAsset
-  status: BagItemStatus
-  inSweep?: boolean
-}
-
-export enum BagStatus {
-  ADDING_TO_BAG = 'Adding to bag',
-  FETCHING_ROUTE = 'Fetching route',
-  IN_REVIEW = 'In review',
-  WARNING = 'Warning',
-  CONFIRM_REVIEW = 'Confirming review',
-  FETCHING_FINAL_ROUTE = 'Fetching final route',
-  CONFIRMING_IN_WALLET = 'Confirming in wallet',
-  PROCESSING_TRANSACTION = 'Processing',
-  CONFIRM_QUOTE = 'Confirm quote',
-}

src/nft/types/checkout/index.ts

-export * from './checkout'
+import { ContractReceipt } from '@ethersproject/contracts'
+
+import { GenieAsset, Markets, PriceInfo, TokenType } from '../common'
+
+export interface UpdatedGenieAsset extends GenieAsset {
+  updatedPriceInfo?: PriceInfo
+  isUnavailable?: boolean
+  orderSource?: 'api' | 'stored' | string
+}
+
+export enum RoutingActions {
+  Buy = 'Buy',
+  Sell = 'Sell',
+  Swap = 'Swap',
+}
+
+type SellItem = {
+  id?: string
+  symbol?: string
+  name: string
+  decimals: number
+  address: string
+  priceInfo: PriceInfo
+  tokenType: TokenType
+  tokenId: string
+  amount: string // convert to BigNumber
+  marketplace?: Markets
+}
+
+export type BuyItem = {
+  id?: string
+  symbol?: string
+  name?: string
+  decimals: number
+  address: string
+  priceInfo: PriceInfo
+  tokenType: TokenType
+  tokenId: string
+  amount: string // convert to BigNumber
+  marketplace: Markets
+  collectionName?: string
+  orderSource?: 'api' | 'stored' | string
+}
+
+export type RoutingItem = {
+  action: RoutingActions
+  marketplace: string
+  amountIn: string
+  assetIn: SellItem | PriceInfo
+  amountOut: string
+  assetOut: BuyItem | PriceInfo
+}
+
+export interface RouteResponse {
+  valueToSend?: string
+  route: RoutingItem[]
+  data: any
+  to: any
+}
+
+export interface TxResponse {
+  nftsPurchased: UpdatedGenieAsset[]
+  nftsNotPurchased: UpdatedGenieAsset[]
+  txReceipt: ContractReceipt
+}
+
+export enum TxStateType {
+  Success = 'Success',
+  Denied = 'Denied',
+  Invalid = 'Invalid',
+  Failed = 'Failed',
+  New = 'New',
+  Signing = 'Signing',
+  Confirming = 'Confirming',
+}
+
+export enum BagItemStatus {
+  ADDED_TO_BAG = 'Added to bag',
+  REVIEWED = 'Reviewed',
+  REVIEWING_PRICE_CHANGE = 'REVIEWING_PRICE_CHANGE',
+  UNAVAILABLE = 'UNAVAILABLE',
+}
+
+export type BagItem = {
+  asset: UpdatedGenieAsset
+  status: BagItemStatus
+  inSweep?: boolean
+}
+
+export enum BagStatus {
+  ADDING_TO_BAG = 'Adding to bag',
+  FETCHING_ROUTE = 'Fetching route',
+  IN_REVIEW = 'In review',
+  WARNING = 'Warning',
+  CONFIRM_REVIEW = 'Confirming review',
+  FETCHING_FINAL_ROUTE = 'Fetching final route',
+  CONFIRMING_IN_WALLET = 'Confirming in wallet',
+  PROCESSING_TRANSACTION = 'Processing',
+  CONFIRM_QUOTE = 'Confirm quote',
+}

src/nft/types/collection/collection.ts

-import { NftActivityType, NftStandard, OrderStatus } from 'graphql/data/__generated__/types-and-hooks'
-
-import { Markets, Rarity, TokenType } from '../common'
-export interface AssetPayload {
-  filters: {
-    traits?: Record<string, string[]>
-    address: string
-    currentEthPrice?: {
-      $gte?: number
-      $lte?: number
-    }
-    numTraits?: { traitCount: string }[]
-    name?: string
-    searchText?: string
-    notForSale?: boolean
-    tokenId?: string
-  }
-  fields?: Record<string, number>
-  limit: number
-  offset?: number
-  sort?: CollectionSort
-  markets?: string[]
-}
-
-export interface CollectionInfoForAsset {
-  collectionDescription?: string | null
-  collectionImageUrl?: string
-  collectionName?: string
-  isVerified?: boolean
-  totalSupply?: number
-  discordUrl?: string
-  twitterUrl?: string
-  externalUrl?: string
-}
-
-export type CollectionSort = Record<
-  string,
-  'asc' | 'desc' | 1 | -1 | { $gte?: string | number; $lte?: string | number } | string | number
->
-
-export enum UniformAspectRatios {
-  unset,
-  square,
-}
-
-export type UniformAspectRatio = UniformAspectRatios | number
-
-export enum ActivityEventType {
-  Listing = 'LISTING',
-  Sale = 'SALE',
-  CancelListing = 'CANCEL_LISTING',
-  Transfer = 'TRANSFER',
-}
-
-export enum ActivityEventTypeDisplay {
-  'LISTING' = 'Listed',
-  'SALE' = 'Sold',
-  'TRANSFER' = 'Transferred',
-  'CANCEL_LISTING' = 'Cancellation',
-}
-
-export interface ActivityFilter {
-  collectionAddress?: string
-  eventTypes?: ActivityEventType[]
-  marketplaces?: Markets[]
-  token_id?: string
-}
-
-export interface ActivityEventResponse {
-  events: ActivityEvent[]
-  cursor?: string
-}
-
-export interface TokenRarity {
-  rank: number
-  score: number
-  source: string
-}
-
-export interface TokenMetadata {
-  name?: string
-  imageUrl?: string
-  smallImageUrl?: string
-  metadataUrl?: string
-  rarity?: TokenRarity | Rarity
-  suspiciousFlag?: boolean
-  standard?: TokenType | NftStandard
-}
-
-// TODO when deprecating activity query, remove all outdated types (former in optional fields)
-export interface ActivityEvent {
-  collectionAddress?: string
-  tokenId?: string
-  tokenMetadata?: TokenMetadata
-  eventType?: NftActivityType
-  marketplace?: Markets | string
-  fromAddress?: string
-  toAddress?: string
-  transactionHash?: string
-  orderStatus?: OrderStatus
-  price?: string
-  symbol?: string
-  quantity?: number
-  url?: string
-  eventTimestamp?: number
-}

src/nft/types/collection/index.ts

-export * from './collection'
+import { NftActivityType, NftStandard, OrderStatus } from 'graphql/data/__generated__/types-and-hooks'
+
+import { Markets, Rarity, TokenType } from '../common'
+export interface CollectionInfoForAsset {
+  collectionDescription?: string | null
+  collectionImageUrl?: string
+  collectionName?: string
+  isVerified?: boolean
+  totalSupply?: number
+  discordUrl?: string
+  twitterUrl?: string
+  externalUrl?: string
+}
+
+export enum UniformAspectRatios {
+  unset,
+  square,
+}
+
+export type UniformAspectRatio = UniformAspectRatios | number
+
+export enum ActivityEventType {
+  Listing = 'LISTING',
+  Sale = 'SALE',
+  CancelListing = 'CANCEL_LISTING',
+  Transfer = 'TRANSFER',
+}
+
+export enum ActivityEventTypeDisplay {
+  'LISTING' = 'Listed',
+  'SALE' = 'Sold',
+  'TRANSFER' = 'Transferred',
+  'CANCEL_LISTING' = 'Cancellation',
+}
+
+export interface TokenRarity {
+  rank: number
+  score: number
+  source: string
+}
+
+export interface TokenMetadata {
+  name?: string
+  imageUrl?: string
+  smallImageUrl?: string
+  metadataUrl?: string
+  rarity?: TokenRarity | Rarity
+  suspiciousFlag?: boolean
+  standard?: TokenType | NftStandard
+}
+
+// TODO when deprecating activity query, remove all outdated types (former in optional fields)
+export interface ActivityEvent {
+  collectionAddress?: string
+  tokenId?: string
+  tokenMetadata?: TokenMetadata
+  eventType?: NftActivityType
+  marketplace?: Markets | string
+  fromAddress?: string
+  toAddress?: string
+  transactionHash?: string
+  orderStatus?: OrderStatus
+  price?: string
+  symbol?: string
+  quantity?: number
+  url?: string
+  eventTimestamp?: number
+}

src/nft/types/common/common.ts

-import { MediaType, NftMarketplace, NftStandard } from 'graphql/data/__generated__/types-and-hooks'
-import { SortBy } from 'nft/hooks'
-
-import { SellOrder } from '../sell'
-
-export interface OpenSeaCollection {
-  name: string
-  slug: string
-  image_url: string
-  description: string
-  external_url: string
-  featured: boolean
-  hidden: boolean
-  safelist_request_status: string
-  is_subject_to_whitelist: boolean
-  large_image_url: string
-  only_proxied_transfers: boolean
-  payout_address: string
-}
-
-export interface OpenSeaAsset {
-  id?: number
-  image_url?: string
-  image_preview_url?: string
-  name?: string
-  token_id?: string
-  last_sale?: {
-    total_price: string
-  }
-  asset_contract?: {
-    address: string
-    schema_name: 'ERC1155' | 'ERC721' | string
-    asset_contract_type: string
-    created_date: string
-    name: string
-    symbol: string
-    description: string
-    external_link: string
-    image_url: string
-    default_to_fiat: boolean
-    only_proxied_transfers: boolean
-    payout_address: string
-  }
-  collection?: OpenSeaCollection
-}
-
-export enum TokenType {
-  ERC20 = 'ERC20',
-  ERC721 = 'ERC721',
-  ERC1155 = 'ERC1155',
-  Dust = 'Dust',
-  Cryptopunk = 'Cryptopunk',
-}
-
-export interface PriceInfo {
-  ETHPrice: string
-  USDPrice?: string
-  baseAsset: string
-  baseDecimals: string
-  basePrice: string
-}
-
-export interface AssetSellOrder {
-  ammFeePercent: number
-  ethReserves: number
-  tokenReserves: number
-}
-
-export interface Rarity {
-  primaryProvider: string
-  providers?: { provider: string; rank?: number; url?: string; score?: number }[]
-}
-
-export interface Trait {
-  trait_type: string
-  trait_value: string
-  display_type?: any
-  max_value?: any
-  trait_count?: number
-  order?: any
-}
-
-export interface Offer {
-  createdAt: number
-  endAt?: number
-  id: string
-  maker: string
-  marketplace: NftMarketplace
-  marketplaceUrl: string
-  price: {
-    currency?: string
-    value: number
-  }
-  quantity?: number
-}
-
-export interface GenieAsset {
-  id?: string // This would be a random id created and assigned by front end
-  address: string
-  notForSale?: boolean
-  collectionName?: string
-  collectionSymbol?: string
-  imageUrl?: string
-  animationUrl?: string
-  mediaType?: MediaType
-  marketplace?: Markets
-  name?: string
-  priceInfo: PriceInfo
-  susFlag?: boolean
-  sellorders?: SellOrder[]
-  smallImageUrl?: string
-  tokenId: string
-  tokenType?: NftStandard
-  totalCount?: number // The totalCount from the query to /assets
-  collectionIsVerified?: boolean
-  rarity?: Rarity
-  ownerAddress?: string
-  metadataUrl?: string
-  creator: {
-    address?: string
-    profile_img_url?: string
-  }
-  traits?: Trait[]
-}
-
-export interface GenieCollection {
-  address: string
-  isVerified?: boolean
-  name?: string
-  description?: string
-  standard?: string
-  bannerImageUrl?: string
-  stats?: {
-    num_owners?: number
-    floor_price?: number
-    one_day_volume?: number
-    one_day_change?: number
-    one_day_floor_change?: number
-    banner_image_url?: string
-    total_supply?: number
-    total_listings?: number
-    total_volume?: number
-  }
-  traits?: Record<string, Trait[]>
-  marketplaceCount?: { marketplace: string; count: number; floorPrice: number }[]
-  imageUrl: string
-  twitterUrl?: string
-  instagram?: string
-  discordUrl?: string
-  externalUrl?: string
-  rarityVerified?: boolean
-  isFoundation?: boolean
-}
-
-export enum Markets {
-  LooksRare = 'looksrare',
-  X2Y2 = 'x2y2',
-  NFT20 = 'nft20',
-  NFTX = 'nftx',
-  Opensea = 'opensea',
-  Rarible = 'rarible',
-  Sudoswap = 'sudoswap',
-  Cryptopunks = 'cryptopunks',
-  Gem = 'gem',
-  Foundation = 'foundation',
-  Zora = 'zora',
-  Blur = 'blur',
-  Ensvision = 'ensvision',
-}
-
-export const isPooledMarket = (market?: Markets): boolean => {
-  if (!market) return false
-  return market === Markets.NFTX || market === Markets.NFT20 || market === Markets.Sudoswap
-}
-
-export enum ToolTipType {
-  pool,
-  sus,
-}
-
-// index starts at 1 for boolean reasons
-export interface DropDownOption {
-  displayText: string
-  onClick: () => void
-  reverseIndex?: number
-  reverseOnClick?: () => void
-  sortBy?: SortBy
-  isSelected?: boolean
-}
-
-export enum DetailsOrigin {
-  COLLECTION = 'collection',
-  PROFILE = 'profile',
-  EXPLORE = 'explore',
-}

src/nft/types/common/index.ts

-export * from './common'
+import { MediaType, NftStandard } from 'graphql/data/__generated__/types-and-hooks'
+import { SortBy } from 'nft/hooks'
+
+import { SellOrder } from '../sell'
+
+export enum TokenType {
+  ERC20 = 'ERC20',
+  ERC721 = 'ERC721',
+  ERC1155 = 'ERC1155',
+  Dust = 'Dust',
+  Cryptopunk = 'Cryptopunk',
+}
+
+export interface PriceInfo {
+  ETHPrice: string
+  USDPrice?: string
+  baseAsset: string
+  baseDecimals: string
+  basePrice: string
+}
+
+export interface Rarity {
+  primaryProvider: string
+  providers?: { provider: string; rank?: number; url?: string; score?: number }[]
+}
+
+export interface Trait {
+  trait_type: string
+  trait_value: string
+  display_type?: any
+  max_value?: any
+  trait_count?: number
+  order?: any
+}
+
+export interface GenieAsset {
+  id?: string // This would be a random id created and assigned by front end
+  address: string
+  notForSale?: boolean
+  collectionName?: string
+  collectionSymbol?: string
+  imageUrl?: string
+  animationUrl?: string
+  mediaType?: MediaType
+  marketplace?: Markets
+  name?: string
+  priceInfo: PriceInfo
+  susFlag?: boolean
+  sellorders?: SellOrder[]
+  smallImageUrl?: string
+  tokenId: string
+  tokenType?: NftStandard
+  totalCount?: number // The totalCount from the query to /assets
+  collectionIsVerified?: boolean
+  rarity?: Rarity
+  ownerAddress?: string
+  metadataUrl?: string
+  creator: {
+    address?: string
+    profile_img_url?: string
+  }
+  traits?: Trait[]
+}
+
+export interface GenieCollection {
+  address: string
+  isVerified?: boolean
+  name?: string
+  description?: string
+  standard?: string
+  bannerImageUrl?: string
+  stats?: {
+    num_owners?: number
+    floor_price?: number
+    one_day_volume?: number
+    one_day_change?: number
+    one_day_floor_change?: number
+    banner_image_url?: string
+    total_supply?: number
+    total_listings?: number
+    total_volume?: number
+  }
+  traits?: Record<string, Trait[]>
+  marketplaceCount?: { marketplace: string; count: number; floorPrice: number }[]
+  imageUrl: string
+  twitterUrl?: string
+  instagram?: string
+  discordUrl?: string
+  externalUrl?: string
+  rarityVerified?: boolean
+  isFoundation?: boolean
+}
+
+export enum Markets {
+  LooksRare = 'looksrare',
+  X2Y2 = 'x2y2',
+  NFT20 = 'nft20',
+  NFTX = 'nftx',
+  Opensea = 'opensea',
+  Rarible = 'rarible',
+  Sudoswap = 'sudoswap',
+  Cryptopunks = 'cryptopunks',
+  Gem = 'gem',
+  Foundation = 'foundation',
+  Zora = 'zora',
+  Blur = 'blur',
+  Ensvision = 'ensvision',
+}
+
+export const isPooledMarket = (market?: Markets): boolean => {
+  if (!market) return false
+  return market === Markets.NFTX || market === Markets.NFT20 || market === Markets.Sudoswap
+}
+
+// index starts at 1 for boolean reasons
+export interface DropDownOption {
+  displayText: string
+  onClick: () => void
+  reverseIndex?: number
+  reverseOnClick?: () => void
+  sortBy?: SortBy
+  isSelected?: boolean
+}
+
+export enum DetailsOrigin {
+  COLLECTION = 'collection',
+  PROFILE = 'profile',
+  EXPLORE = 'explore',
+}

src/nft/types/discover/discover.ts

-export enum TimePeriod {
-  OneDay = 'ONE_DAY',
-  SevenDays = 'SEVEN_DAYS',
-  ThirtyDays = 'THIRTY_DAYS',
-  AllTime = 'ALL_TIME',
-}
-
-export type VolumeType = 'nft' | 'eth'
-export interface TransactionsResponse {
-  __v: number
-  _id: string
-  bannerImage: string
-  blockNumber: string
-  blockTimestamp: string
-  collections: [string]
-  createdAt: string
-  ethValue: number
-  from_address: string
-  gas: string
-  gasPrice: string
-  hash: string
-  isVerified: boolean
-  nftCount: number
-  profileImage: string
-  receiptContractAddress: string | null
-  receiptCumulatioveGasUsed: string
-  receiptGasUsed: string
-  receiptStatus: string
-  sweep: boolean
-  timestamp: string
-  to_address: string
-  updatedAt: string
-  usdValue: number
-  title: string
-}
-
-export interface TrendingCollection {
-  name?: string
-  address?: string
-  imageUrl?: string
-  bannerImageUrl?: string
-  isVerified?: boolean
-  volume?: number
-  volumeChange?: number
-  floor?: number
-  floorChange?: number
-  marketCap?: number
-  percentListed?: number
-  owners?: number
-  totalSupply?: number
-  sales?: number
-}
-
-export enum Denomination {
-  ETH = 'ETH',
-  USD = 'USD',
-}
-
-export interface CollectionTableColumn {
-  collection: {
-    name?: string
-    address?: string
-    logo?: string
-    isVerified?: boolean
-  }
-  volume: {
-    value?: number
-    change?: number
-    type?: VolumeType
-  }
-  floor: {
-    value?: number
-    change?: number
-  }
-  owners: {
-    value?: number
-  }
-  sales?: number
-  totalSupply?: number
-  denomination: Denomination
-  usdPrice?: number
-}

src/nft/types/discover/index.ts

-export * from './discover'
+export enum TimePeriod {
+  OneDay = 'ONE_DAY',
+  SevenDays = 'SEVEN_DAYS',
+  ThirtyDays = 'THIRTY_DAYS',
+  AllTime = 'ALL_TIME',
+}
+
+export type VolumeType = 'nft' | 'eth'
+
+export interface TrendingCollection {
+  name?: string
+  address?: string
+  imageUrl?: string
+  bannerImageUrl?: string
+  isVerified?: boolean
+  volume?: number
+  volumeChange?: number
+  floor?: number
+  floorChange?: number
+  marketCap?: number
+  percentListed?: number
+  owners?: number
+  totalSupply?: number
+  sales?: number
+}
+
+export enum Denomination {
+  ETH = 'ETH',
+  USD = 'USD',
+}
+
+export interface CollectionTableColumn {
+  collection: {
+    name?: string
+    address?: string
+    logo?: string
+    isVerified?: boolean
+  }
+  volume: {
+    value?: number
+    change?: number
+    type?: VolumeType
+  }
+  floor: {
+    value?: number
+    change?: number
+  }
+  owners: {
+    value?: number
+  }
+  sales?: number
+  totalSupply?: number
+  denomination: Denomination
+  usdPrice?: number
+}

src/nft/types/index.ts

-export * from './checkout'
-export * from './collection'
-export * from './common'
-export * from './discover'
-export * from './navbar'
-export * from './sell'
+export type { BagItem, BuyItem, RouteResponse, RoutingItem, TxResponse, UpdatedGenieAsset } from './checkout'
+export { BagItemStatus, BagStatus, RoutingActions, TxStateType } from './checkout'
+export type {
+  ActivityEvent,
+  CollectionInfoForAsset,
+  TokenMetadata,
+  TokenRarity,
+  UniformAspectRatio,
+} from './collection'
+export { ActivityEventType, ActivityEventTypeDisplay, UniformAspectRatios } from './collection'
+export type { DropDownOption, GenieAsset, GenieCollection, PriceInfo, Rarity, Trait } from './common'
+export { DetailsOrigin, isPooledMarket, Markets, TokenType } from './common'
+export type { CollectionTableColumn, TrendingCollection, VolumeType } from './discover'
+export { Denomination, TimePeriod } from './discover'
+export type {
+  AssetRow,
+  CollectionRow,
+  Listing,
+  ListingMarket,
+  ListingRow,
+  SellOrder,
+  WalletAsset,
+  WalletCollection,
+} from './sell'
+export { ListingStatus, ProfilePageStateType } from './sell'

src/nft/types/navbar/index.ts

-export * from './navbar'

src/nft/types/navbar/navbar.ts

-export interface LooksRareRewardsData {
-  address: string
-  cumulativeLooksAmount: string
-  cumulativeLooksProof: string[]
-}

src/nft/types/sell/index.ts

-export * from './sell'
+import { NftMarketplace, NftStandard, OrderStatus, OrderType } from 'graphql/data/__generated__/types-and-hooks'
+
+import { GenieCollection, PriceInfo } from '../common'
+
+export interface ListingMarket {
+  name: string
+  fee: number
+}
+
+export interface SellOrder {
+  address: string
+  createdAt: number
+  endAt?: number
+  id: string
+  maker: string
+  marketplace: NftMarketplace
+  marketplaceUrl: string
+  orderHash?: string
+  price: {
+    currency?: string
+    value: number
+  }
+  quantity: number
+  startAt: number
+  status: OrderStatus
+  tokenId?: string
+  type: OrderType
+  protocolParameters: Record<string, unknown>
+}
+
+export interface Listing {
+  price?: number
+  marketplace: ListingMarket
+  overrideFloorPrice?: boolean
+}
+
+export interface WalletAsset {
+  id?: string
+  imageUrl?: string
+  smallImageUrl?: string
+  notForSale: boolean
+  animationUrl?: string
+  susFlag?: boolean
+  priceInfo?: PriceInfo
+  name?: string
+  tokenId?: string
+  asset_contract: {
+    address?: string
+    name?: string
+    description?: string
+    image_url?: string
+    payout_address?: string
+    tokenType?: NftStandard
+  }
+  collection?: GenieCollection
+  collectionIsVerified?: boolean
+  lastPrice?: number
+  floorPrice?: number
+  basisPoints?: number
+  listing_date?: string
+  date_acquired?: string
+  sellOrders?: SellOrder[]
+  floor_sell_order_price?: number
+  // Used for creating new listings
+  expirationTime?: number
+  marketAgnosticPrice?: number
+  newListings?: Listing[]
+  marketplaces?: ListingMarket[]
+}
+
+export interface WalletCollection {
+  address: string
+  name: string
+  image: string
+  floorPrice: number
+  count: number
+}
+
+export enum ListingStatus {
+  APPROVED = 'Approved',
+  CONTINUE = 'Continue',
+  DEFINED = 'Defined',
+  FAILED = 'Failed',
+  PAUSED = 'Paused',
+  PENDING = 'Pending',
+  REJECTED = 'Rejected',
+  SIGNING = 'Signing',
+}
+
+export interface AssetRow {
+  image?: string
+  name?: string
+  status: ListingStatus
+  marketplace: ListingMarket
+  callback?: () => Promise<void>
+}
+
+export interface ListingRow extends AssetRow {
+  asset: WalletAsset
+  price?: number
+}
+
+export interface CollectionRow extends AssetRow {
+  collectionAddress?: string
+  isVerified?: boolean
+  nftStandard?: NftStandard
+}
+
+// Creating this as an enum and not boolean as we will likely have a success screen state to show
+export enum ProfilePageStateType {
+  VIEWING,
+  LISTING,
+}

src/nft/types/sell/sell.ts

-import { NftMarketplace, NftStandard, OrderStatus, OrderType } from 'graphql/data/__generated__/types-and-hooks'
-
-import { GenieCollection, PriceInfo } from '../common'
-
-export interface ListingMarket {
-  name: string
-  fee: number
-}
-
-export interface SellOrder {
-  address: string
-  createdAt: number
-  endAt?: number
-  id: string
-  maker: string
-  marketplace: NftMarketplace
-  marketplaceUrl: string
-  orderHash?: string
-  price: {
-    currency?: string
-    value: number
-  }
-  quantity: number
-  startAt: number
-  status: OrderStatus
-  tokenId?: string
-  type: OrderType
-  protocolParameters: Record<string, unknown>
-}
-
-export interface Listing {
-  price?: number
-  marketplace: ListingMarket
-  overrideFloorPrice?: boolean
-}
-
-export interface WalletAsset {
-  id?: string
-  imageUrl?: string
-  smallImageUrl?: string
-  notForSale: boolean
-  animationUrl?: string
-  susFlag?: boolean
-  priceInfo?: PriceInfo
-  name?: string
-  tokenId?: string
-  asset_contract: {
-    address?: string
-    name?: string
-    description?: string
-    image_url?: string
-    payout_address?: string
-    tokenType?: NftStandard
-  }
-  collection?: GenieCollection
-  collectionIsVerified?: boolean
-  lastPrice?: number
-  floorPrice?: number
-  basisPoints?: number
-  listing_date?: string
-  date_acquired?: string
-  sellOrders?: SellOrder[]
-  floor_sell_order_price?: number
-  // Used for creating new listings
-  expirationTime?: number
-  marketAgnosticPrice?: number
-  newListings?: Listing[]
-  marketplaces?: ListingMarket[]
-}
-
-export interface WalletCollection {
-  address: string
-  name: string
-  image: string
-  floorPrice: number
-  count: number
-}
-
-export enum ListingStatus {
-  APPROVED = 'Approved',
-  CONTINUE = 'Continue',
-  DEFINED = 'Defined',
-  FAILED = 'Failed',
-  PAUSED = 'Paused',
-  PENDING = 'Pending',
-  REJECTED = 'Rejected',
-  SIGNING = 'Signing',
-}
-
-export interface AssetRow {
-  image?: string
-  name?: string
-  status: ListingStatus
-  marketplace: ListingMarket
-  callback?: () => Promise<void>
-}
-
-export interface ListingRow extends AssetRow {
-  asset: WalletAsset
-  price?: number
-}
-
-export interface CollectionRow extends AssetRow {
-  collectionAddress?: string
-  isVerified?: boolean
-  nftStandard?: NftStandard
-}
-
-// Creating this as an enum and not boolean as we will likely have a success screen state to show
-export enum ProfilePageStateType {
-  VIEWING,
-  LISTING,
-}

src/nft/utils/asset.tsx

@@ -13,8 +13,7 @@ import {
   SquareSudoSwapMarketplaceIcon,
   SquareZoraMarketplaceIcon,
 } from 'nft/components/icons'
-import { DetailsOrigin, GenieAsset, Listing, Markets, Trait, UpdatedGenieAsset, WalletAsset } from 'nft/types'
-import qs from 'qs'
+import { DetailsOrigin, GenieAsset, Listing, Markets, UpdatedGenieAsset, WalletAsset } from 'nft/types'
 import { v4 as uuidv4 } from 'uuid'
 
 export function getRarityStatus(
@@ -125,14 +124,3 @@ export const generateTweetForList = (assets: WalletAsset[]): string => {
           .join(', ')} \n\nMarketplaces: ${assets[0].marketplaces?.map((market) => market.name).join(', ')}`
   return `https://twitter.com/intent/tweet?text=${encodeURIComponent(tweetText)}`
 }
-
-export function getLinkForTrait(trait: Trait, collectionAddress: string): string {
-  const params = qs.stringify(
-    { traits: [`("${trait.trait_type}","${trait.trait_value}")`] },
-    {
-      arrayFormat: 'comma',
-    }
-  )
-
-  return `/nfts/collection/${collectionAddress}?${params}`
-}

src/nft/utils/buildSellObject.ts

 import { NftMarketplace, NftTradeInput, TokenAmountInput } from 'graphql/data/__generated__/types-and-hooks'
 import { BagItem, BagItemStatus, UpdatedGenieAsset } from 'nft/types'
 
-export const buildSellObject = (amount: string) => {
-  return {
-    address: '0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee',
-    amount,
-    decimals: 18,
-    name: 'Ethereum',
-    priceInfo: {
-      baseAsset: 'ETH',
-      basePrice: amount,
-      ETHPrice: amount,
-    },
-    symbol: 'ETH',
-    tokenId: 'ETH',
-    tokenType: 'ERC20',
-  }
-}
-
 export const buildNftTradeInputFromBagItems = (itemsInBag: BagItem[]): NftTradeInput[] => {
   const assetsToBuy = itemsInBag.filter((item) => item.status !== BagItemStatus.UNAVAILABLE).map((item) => item.asset)
   return buildNftTradeInput(assetsToBuy)
 }
 
-export const buildNftTradeInput = (assets: UpdatedGenieAsset[]): NftTradeInput[] => {
+const buildNftTradeInput = (assets: UpdatedGenieAsset[]): NftTradeInput[] => {
   return assets.flatMap((asset) => {
     const { id, address, marketplace, priceInfo, tokenId, tokenType } = asset
 

src/nft/utils/currency.ts

-import { formatEther, parseEther } from '@ethersproject/units'
+import { formatEther } from '@ethersproject/units'
 
 export const formatUsdPrice = (price: number) => {
   if (price > 1000000) {
@@ -38,11 +38,6 @@ export const formatEthPrice = (price: string | undefined) => {
   )
 }
 
-// Stringify the `price` anyway because the `price` is being passed as any in some places
-export const numberToWei = (amount: number) => {
-  return parseEther(amount.toString())
-}
-
 export const ethNumberStandardFormatter = (
   amount: string | number | undefined,
   includeDollarSign = false,

src/nft/utils/index.ts

-export * from './asset'
-export * from './blocklist'
-export * from './buildActivityAsset'
-export * from './buildSellObject'
-export * from './carousel'
-export * from './collection'
-export * from './currency'
-export * from './formatEventProperties'
-export * from './isAudio'
-export * from './isVideo'
-export * from './listNfts'
-export * from './numbers'
-export * from './pooledAssets'
-export * from './putCommas'
-export * from './roundAndPluralize'
-export * from './time'
-export * from './transactionResponse'
-export * from './updatedAssets'
+export {
+  generateTweetForAsset,
+  generateTweetForList,
+  generateTweetForPurchase,
+  getAssetHref,
+  getMarketplaceIcon,
+  getRarityStatus,
+} from './asset'
+export { blocklistedCollections } from './blocklist'
+export { buildNftTradeInputFromBagItems } from './buildSellObject'
+export { calculateCardIndex, calculateFirstCardIndex, calculateRank } from './carousel'
+export { isInSameMarketplaceCollection, isInSameSudoSwapPool } from './collection'
+export {
+  ethNumberStandardFormatter,
+  formatEth,
+  formatEthPrice,
+  formatUsdPrice,
+  formatUSDPriceWithCommas,
+  formatWeiToDecimal,
+  wrapScientificNotation,
+} from './currency'
+export { formatAssetEventProperties } from './formatEventProperties'
+export { isAudio } from './isAudio'
+export { isVideo } from './isVideo'
+export { floorFormatter, volumeFormatter } from './numbers'
+export { calcAvgGroupPoolPrice, calcPoolPrice, recalculateBagUsingPooledAssets } from './pooledAssets'
+export { putCommas } from './putCommas'
+export { pluralize, roundAndPluralize } from './roundAndPluralize'
+export { timeLeft } from './time'
+export { getSuccessfulImageSize, parseTransactionResponse } from './transactionResponse'
+export { getTotalNftValue } from './updatedAssets'

src/nft/utils/listNfts.ts

@@ -9,23 +9,20 @@ import { ItemType } from '@opensea/seaport-js/lib/constants'
 import { ConsiderationInputItem } from '@opensea/seaport-js/lib/types'
 import { ZERO_ADDRESS } from 'constants/misc'
 import { NftStandard } from 'graphql/data/__generated__/types-and-hooks'
+import { createLooksRareOrder } from 'nft/queries/looksRare'
+import { LOOKSRARE_MARKETPLACE_CONTRACT_721 } from 'nft/queries/looksRare/constants'
+import { PostOpenSeaSellOrder } from 'nft/queries/openSea'
 import {
   OPENSEA_DEFAULT_CROSS_CHAIN_CONDUIT_KEY,
   OPENSEA_FEE_ADDRESS,
   OPENSEA_KEY_TO_CONDUIT,
   OPENSEA_SEAPORT_V1_5_CONTRACT,
-} from 'nft/queries/openSea'
+} from 'nft/queries/openSea/constants'
+import { INVERSE_BASIS_POINTS } from 'nft/queries/openSea/constants'
+import { getX2Y2OrderId, newX2Y2Order } from 'nft/queries/x2y2'
 
 import ERC721 from '../../abis/erc721.json'
 import ERC1155 from '../../abis/erc1155.json'
-import {
-  createLooksRareOrder,
-  getOrderId,
-  LOOKSRARE_MARKETPLACE_CONTRACT_721,
-  newX2Y2Order,
-  PostOpenSeaSellOrder,
-} from '../queries'
-import { INVERSE_BASIS_POINTS } from '../queries/openSea'
 import { ListingMarket, ListingStatus, WalletAsset } from '../types'
 import { createSellOrder, encodeOrder, OfferItem, OrderPayload, signOrderData } from './x2y2'
 
@@ -247,7 +244,7 @@ export async function signListing(
       }
       const order = createSellOrder(signerAddress, asset.expirationTime, [orderItem], asset.asset_contract.tokenType)
       try {
-        const prevOrderId = await getOrderId(asset.asset_contract.address, asset.tokenId)
+        const prevOrderId = await getX2Y2OrderId(asset.asset_contract.address, asset.tokenId)
         await signOrderData(provider, order)
         const payload: OrderPayload = {
           order: encodeOrder(order),

src/nft/utils/pooledAssets.ts

@@ -77,7 +77,7 @@ const calcSudoSwapXykBondingCurve = (
   return currentPrice
 }
 
-export const calcSudoSwapPrice = (asset: GenieAsset, position = 0): string | undefined => {
+const calcSudoSwapPrice = (asset: GenieAsset, position = 0): string | undefined => {
   if (!asset.sellorders) return undefined
 
   const sudoSwapParameters = asset.sellorders[0].protocolParameters

src/nft/utils/updatedAssets.ts

 import { BigNumber } from '@ethersproject/bignumber'
 import { UpdatedGenieAsset } from 'nft/types'
 
-export const updatedAssetPriceDifference = (asset: UpdatedGenieAsset) => {
+const updatedAssetPriceDifference = (asset: UpdatedGenieAsset) => {
   if (!asset.updatedPriceInfo) return BigNumber.from(0)
   return BigNumber.from(asset.updatedPriceInfo.ETHPrice).sub(BigNumber.from(asset.priceInfo.ETHPrice))
 }
 
-export const sortUpdatedAssets = (x: UpdatedGenieAsset, y: UpdatedGenieAsset) => {
+const sortUpdatedAssets = (x: UpdatedGenieAsset, y: UpdatedGenieAsset) => {
   return updatedAssetPriceDifference(x).gt(updatedAssetPriceDifference(y)) ? -1 : 1
 }
 

src/pages/AddLiquidity/index.tsx

@@ -25,6 +25,7 @@ import {
   useV3MintState,
 } from 'state/mint/v3/hooks'
 import styled, { useTheme } from 'styled-components'
+import { ThemedText } from 'theme/components'
 import { addressesAreEquivalent } from 'utils/addressesAreEquivalent'
 import { WrongChainError } from 'utils/errors'
 
@@ -58,7 +59,6 @@ import { Bound, Field } from '../../state/mint/v3/actions'
 import { useTransactionAdder } from '../../state/transactions/hooks'
 import { TransactionInfo, TransactionType } from '../../state/transactions/types'
 import { useUserSlippageToleranceWithDefault } from '../../state/user/hooks'
-import { ThemedText } from '../../theme'
 import approveAmountCalldata from '../../utils/approveAmountCalldata'
 import { calculateGasMargin } from '../../utils/calculateGasMargin'
 import { currencyId } from '../../utils/currencyId'

src/pages/AddLiquidityV2/ConfirmAddModalBottom.tsx

 import { Trans } from '@lingui/macro'
 import { Currency, CurrencyAmount, Fraction, Percent } from '@uniswap/sdk-core'
 import { Text } from 'rebass'
+import { ThemedText } from 'theme/components'
 
 import { ButtonPrimary } from '../../components/Button'
 import CurrencyLogo from '../../components/Logo/CurrencyLogo'
 import { RowBetween, RowFixed } from '../../components/Row'
 import { Field } from '../../state/mint/actions'
-import { ThemedText } from '../../theme'
 
 export function ConfirmAddModalBottom({
   noLiquidity,

src/pages/AddLiquidityV2/PoolPriceBar.tsx

@@ -2,12 +2,12 @@ import { Trans } from '@lingui/macro'
 import { Currency, Percent, Price } from '@uniswap/sdk-core'
 import { Text } from 'rebass'
 import { useTheme } from 'styled-components'
+import { ThemedText } from 'theme/components'
 
 import { AutoColumn } from '../../components/Column'
 import { AutoRow } from '../../components/Row'
 import { ONE_BIPS } from '../../constants/misc'
 import { Field } from '../../state/mint/actions'
-import { ThemedText } from '../../theme'
 
 export function PoolPriceBar({
   currencies,

src/pages/AddLiquidityV2/index.tsx

@@ -15,6 +15,7 @@ import { Plus } from 'react-feather'
 import { useLocation, useNavigate, useParams } from 'react-router-dom'
 import { Text } from 'rebass'
 import styled, { useTheme } from 'styled-components'
+import { ThemedText } from 'theme/components'
 
 import { ButtonError, ButtonLight, ButtonPrimary } from '../../components/Button'
 import { BlueCard, LightCard } from '../../components/Card'
@@ -38,7 +39,6 @@ import { useDerivedMintInfo, useMintActionHandlers, useMintState } from '../../s
 import { useTransactionAdder } from '../../state/transactions/hooks'
 import { TransactionInfo, TransactionType } from '../../state/transactions/types'
 import { useUserSlippageToleranceWithDefault } from '../../state/user/hooks'
-import { ThemedText } from '../../theme'
 import { calculateGasMargin } from '../../utils/calculateGasMargin'
 import { calculateSlippageAmount } from '../../utils/calculateSlippageAmount'
 import { currencyId } from '../../utils/currencyId'

src/pages/CreateProposal/ProposalActionSelector.tsx

@@ -7,7 +7,7 @@ import { MenuItem, PaddedColumn, Separator } from 'components/SearchModal/styled
 import React, { useCallback } from 'react'
 import { Text } from 'rebass'
 import styled from 'styled-components'
-import { CloseIcon } from 'theme'
+import { CloseIcon } from 'theme/components'
 
 export enum ProposalAction {
   TRANSFER_TOKEN = 'Transfer Token',

src/pages/CreateProposal/ProposalSubmissionModal.tsx

@@ -6,7 +6,7 @@ import { LoadingView, SubmittedView } from 'components/ModalViews'
 import { Link } from 'react-router-dom'
 import { Text } from 'rebass'
 import { useTheme } from 'styled-components'
-import { ExternalLink, ThemedText } from 'theme'
+import { ExternalLink, ThemedText } from 'theme/components'
 import { ExplorerDataType, getExplorerLink } from 'utils/getExplorerLink'
 
 export const ProposalSubmissionModal = ({

src/pages/CreateProposal/index.tsx

@@ -24,7 +24,7 @@ import {
   useUserVotes,
 } from 'state/governance/hooks'
 import styled from 'styled-components'
-import { ExternalLink, ThemedText } from 'theme'
+import { ExternalLink, ThemedText } from 'theme/components'
 
 import { LATEST_GOVERNOR_INDEX } from '../../constants/governance'
 import { UNI } from '../../constants/tokens'

src/pages/MigrateV2/MigrateV2Pair.tsx

@@ -48,7 +48,7 @@ import useIsArgentWallet from '../../hooks/useIsArgentWallet'
 import { useTotalSupply } from '../../hooks/useTotalSupply'
 import { useTokenBalance } from '../../state/connection/hooks'
 import { TransactionType } from '../../state/transactions/types'
-import { BackArrowLink, ExternalLink, ThemedText } from '../../theme'
+import { BackArrowLink, ExternalLink, ThemedText } from '../../theme/components'
 import { isAddress } from '../../utils'
 import { calculateGasMargin } from '../../utils/calculateGasMargin'
 import { currencyId } from '../../utils/currencyId'

src/pages/MigrateV2/index.tsx

@@ -13,6 +13,7 @@ import { PairState, useV2Pairs } from 'hooks/useV2Pairs'
 import { ReactNode, useMemo } from 'react'
 import { Text } from 'rebass'
 import { useTheme } from 'styled-components'
+import { BackArrowLink, StyledInternalLink, ThemedText } from 'theme/components'
 
 import { LightCard } from '../../components/Card'
 import { AutoColumn } from '../../components/Column'
@@ -21,7 +22,6 @@ import { AutoRow } from '../../components/Row'
 import { Dots } from '../../components/swap/styled'
 import { useTokenBalancesWithLoadingIndicator } from '../../state/connection/hooks'
 import { toV2LiquidityToken, useTrackedTokenPairs } from '../../state/user/hooks'
-import { BackArrowLink, StyledInternalLink, ThemedText } from '../../theme'
 import { BodyWrapper } from '../AppBody'
 
 function EmptyState({ message }: { message: ReactNode }) {

src/pages/NotFound/index.tsx

@@ -5,7 +5,7 @@ import { SmallButtonPrimary } from 'components/Button'
 import { useIsMobile } from 'nft/hooks'
 import { Link } from 'react-router-dom'
 import styled from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 import { useIsDarkMode } from 'theme/components/ThemeToggle'
 
 import darkImage from '../../assets/images/404-page-dark.png'

src/pages/Pool/CTACards.tsx

@@ -3,9 +3,8 @@ import { useWeb3React } from '@web3-react/core'
 import { AutoColumn } from 'components/Column'
 import { getChainInfoOrDefault } from 'constants/chainInfo'
 import styled from 'styled-components'
-import { ThemedText } from 'theme'
-
-import { ExternalLink } from '../../theme'
+import { ThemedText } from 'theme/components'
+import { ExternalLink } from 'theme/components'
 
 const CTASection = styled.section`
   display: grid;

src/pages/Pool/PositionPage.tsx

@@ -33,7 +33,7 @@ import { Link, useParams } from 'react-router-dom'
 import { Bound } from 'state/mint/v3/actions'
 import { useIsTransactionPending, useTransactionAdder } from 'state/transactions/hooks'
 import styled, { useTheme } from 'styled-components'
-import { ExternalLink, HideExtraSmall, HideSmall, StyledRouterLink, ThemedText } from 'theme'
+import { ExternalLink, HideExtraSmall, HideSmall, StyledRouterLink, ThemedText } from 'theme/components'
 import { currencyId } from 'utils/currencyId'
 import { WrongChainError } from 'utils/errors'
 import { formatCurrencyAmount } from 'utils/formatCurrencyAmount'

src/pages/Pool/index.tsx

@@ -18,7 +18,7 @@ import { AlertTriangle, BookOpen, ChevronDown, ChevronsRight, Inbox, Layers } fr
 import { Link } from 'react-router-dom'
 import { useUserHideClosedPositions } from 'state/user/hooks'
 import styled, { css, useTheme } from 'styled-components'
-import { HideSmall, ThemedText } from 'theme'
+import { HideSmall, ThemedText } from 'theme/components'
 import { PositionDetails } from 'types/position'
 
 import CTACards from './CTACards'

src/pages/Pool/v2.tsx

@@ -11,6 +11,7 @@ import { ChevronsRight } from 'react-feather'
 import { Link } from 'react-router-dom'
 import { Text } from 'rebass'
 import styled, { useTheme } from 'styled-components'
+import { ExternalLink, HideSmall, ThemedText } from 'theme/components'
 
 import { ButtonOutlined, ButtonPrimary, ButtonSecondary } from '../../components/Button'
 import Card from '../../components/Card'
@@ -25,7 +26,6 @@ import { useV2Pairs } from '../../hooks/useV2Pairs'
 import { useTokenBalancesWithLoadingIndicator } from '../../state/connection/hooks'
 import { useStakingInfo } from '../../state/stake/hooks'
 import { toV2LiquidityToken, useTrackedTokenPairs } from '../../state/user/hooks'
-import { ExternalLink, HideSmall, ThemedText } from '../../theme'
 
 const PageWrapper = styled(AutoColumn)`
   max-width: 640px;

src/pages/PoolDetails/PoolDetailsHeader.tsx

@@ -10,7 +10,7 @@ import useTokenLogoSource from 'hooks/useAssetLogoSource'
 import React from 'react'
 import { Link } from 'react-router-dom'
 import styled from 'styled-components'
-import { ClickableStyle, ThemedText } from 'theme'
+import { ClickableStyle, ThemedText } from 'theme/components'
 import { shortenAddress } from 'utils'
 
 import { ReversedArrowsIcon } from './icons'

src/pages/PoolFinder/index.tsx

@@ -10,6 +10,8 @@ import { useCallback, useEffect, useState } from 'react'
 import { Plus } from 'react-feather'
 import { useLocation } from 'react-router'
 import { Text } from 'rebass'
+import { StyledInternalLink } from 'theme/components'
+import { ThemedText } from 'theme/components'
 
 import { ButtonDropdownLight } from '../../components/Button'
 import { LightCard } from '../../components/Card'
@@ -25,8 +27,6 @@ import { nativeOnChain } from '../../constants/tokens'
 import { PairState, useV2Pair } from '../../hooks/useV2Pairs'
 import { useTokenBalance } from '../../state/connection/hooks'
 import { usePairAdder } from '../../state/user/hooks'
-import { StyledInternalLink } from '../../theme'
-import { ThemedText } from '../../theme'
 import { currencyId } from '../../utils/currencyId'
 import AppBody from '../AppBody'
 import { Dots } from '../Pool/styled'

src/pages/RemoveLiquidity/V3.tsx

@@ -33,7 +33,7 @@ import { useBurnV3ActionHandlers, useBurnV3State, useDerivedV3BurnInfo } from 's
 import { useTransactionAdder } from 'state/transactions/hooks'
 import { useUserSlippageToleranceWithDefault } from 'state/user/hooks'
 import { useTheme } from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 import { WrongChainError } from 'utils/errors'
 
 import TransactionConfirmationModal, { ConfirmationModalContent } from '../../components/TransactionConfirmationModal'

src/pages/RemoveLiquidity/index.tsx

@@ -17,6 +17,7 @@ import { ArrowDown, Plus } from 'react-feather'
 import { useNavigate, useParams } from 'react-router-dom'
 import { Text } from 'rebass'
 import { useTheme } from 'styled-components'
+import { StyledInternalLink, ThemedText } from 'theme/components'
 
 import { ButtonConfirmed, ButtonError, ButtonLight, ButtonPrimary } from '../../components/Button'
 import { BlueCard, LightCard } from '../../components/Card'
@@ -41,7 +42,6 @@ import { useBurnActionHandlers, useBurnState, useDerivedBurnInfo } from '../../s
 import { useTransactionAdder } from '../../state/transactions/hooks'
 import { TransactionType } from '../../state/transactions/types'
 import { useUserSlippageToleranceWithDefault } from '../../state/user/hooks'
-import { StyledInternalLink, ThemedText } from '../../theme'
 import { calculateGasMargin } from '../../utils/calculateGasMargin'
 import { calculateSlippageAmount } from '../../utils/calculateSlippageAmount'
 import { currencyId } from '../../utils/currencyId'

src/pages/Swap/TaxTooltipBody.tsx

 import { Trans } from '@lingui/macro'
 import styled from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 
 const Divider = styled.div`
   width: 100%;

src/pages/Swap/UniswapXOptIn.tsx

@@ -25,7 +25,7 @@ import { SwapInfo } from 'state/swap/hooks'
 import { useRouterPreference, useUserDisabledUniswapX } from 'state/user/hooks'
 import { updateDisabledUniswapX } from 'state/user/reducer'
 import styled from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 
 export const UniswapXOptIn = (props: { swapInfo: SwapInfo; isSmall: boolean }) => {
   const {

src/pages/Swap/index.tsx

@@ -55,7 +55,7 @@ import { Field, forceExactInput, replaceSwapState } from 'state/swap/actions'
 import { useDefaultsFromURLSearch, useDerivedSwapInfo, useSwapActionHandlers } from 'state/swap/hooks'
 import swapReducer, { initialState as initialSwapState, SwapState } from 'state/swap/reducer'
 import styled, { useTheme } from 'styled-components'
-import { LinkStyledButton, ThemedText } from 'theme'
+import { LinkStyledButton, ThemedText } from 'theme/components'
 import { maybeLogFirstSwapAction } from 'tracing/swapFlowLoggers'
 import { computeFiatValuePriceImpact } from 'utils/computeFiatValuePriceImpact'
 import { NumberType, useFormatter } from 'utils/formatNumbers'

src/pages/Tokens/index.tsx

@@ -12,7 +12,7 @@ import { useResetAtom } from 'jotai/utils'
 import { useEffect } from 'react'
 import { useLocation } from 'react-router-dom'
 import styled from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 
 const ExploreContainer = styled.div`
   width: 100%;

src/pages/Vote/Landing.tsx

@@ -24,7 +24,7 @@ import { useTokenBalance } from 'state/connection/hooks'
 import { ProposalData, ProposalState } from 'state/governance/hooks'
 import { useAllProposalData, useUserDelegatee, useUserVotes } from 'state/governance/hooks'
 import styled, { useTheme } from 'styled-components'
-import { ExternalLink, ThemedText } from 'theme'
+import { ExternalLink, ThemedText } from 'theme/components'
 import { shortenAddress } from 'utils'
 import { ExplorerDataType, getExplorerLink } from 'utils/getExplorerLink'
 

src/pages/Vote/VotePage.tsx

@@ -16,6 +16,7 @@ import { ArrowLeft } from 'react-feather'
 import ReactMarkdown from 'react-markdown'
 import { useParams } from 'react-router-dom'
 import styled from 'styled-components'
+import { ExternalLink, StyledInternalLink, ThemedText } from 'theme/components'
 
 import { ButtonPrimary } from '../../components/Button'
 import { GrayCard } from '../../components/Card'
@@ -50,7 +51,6 @@ import {
   useUserVotesAsOfBlock,
 } from '../../state/governance/hooks'
 import { VoteOption } from '../../state/governance/types'
-import { ExternalLink, StyledInternalLink, ThemedText } from '../../theme'
 import { isAddress } from '../../utils'
 import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
 import { ProposalStatus } from './styled'

src/test-utils/render.tsx

@@ -60,6 +60,8 @@ const customRenderHook = <Result, Props>(
   return renderHook(hook, { ...options, wrapper: WithProviders })
 }
 
+// Testing utils may export *.
+// eslint-disable-next-line no-restricted-syntax
 export * from '@testing-library/react'
 export { customRender as render }
 export { customRenderHook as renderHook }

src/theme/components/SegmentedControl.tsx

@@ -2,7 +2,7 @@ import Row, { AutoRow } from 'components/Row'
 import { PropsWithChildren } from 'react'
 import { Icon } from 'react-feather'
 import styled, { css } from 'styled-components'
-import { ThemedText } from 'theme'
+import { ThemedText } from 'theme/components'
 
 const SegmentWrapper = styled(AutoRow)<{ active?: boolean }>`
   display: flex;

src/theme/components/index.tsx

@@ -12,15 +12,7 @@ import React, {
   useRef,
   useState,
 } from 'react'
-import {
-  AlertTriangle,
-  ArrowLeft,
-  CheckCircle,
-  Copy,
-  ExternalLink as ExternalLinkIconFeather,
-  Icon,
-  X,
-} from 'react-feather'
+import { AlertTriangle, ArrowLeft, CheckCircle, Copy, Icon, X } from 'react-feather'
 import { Link } from 'react-router-dom'
 import styled, { css, keyframes } from 'styled-components'
 import { Z_INDEX } from 'theme/zIndex'
@@ -30,25 +22,13 @@ import { anonymizeLink } from '../../utils/anonymizeLink'
 
 // TODO: Break this file into a components folder
 
+export { ThemedText } from './text'
+
 export const CloseIcon = styled(X)<{ onClick: () => void }>`
   color: ${({ theme }) => theme.neutral1};
   cursor: pointer;
 `
 
-// for wrapper react feather icons
-export const IconWrapper = styled.div<{ stroke?: string; size?: string; marginRight?: string; marginLeft?: string }>`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: ${({ size }) => size ?? '20px'};
-  height: ${({ size }) => size ?? '20px'};
-  margin-right: ${({ marginRight }) => marginRight ?? 0};
-  margin-left: ${({ marginLeft }) => marginLeft ?? 0};
-  & > * {
-    stroke: ${({ theme, stroke }) => stroke ?? theme.accent1};
-  }
-`
-
 // A button that triggers some onClick result, but looks like a link.
 export const LinkStyledButton = styled.button<{ disabled?: boolean }>`
   border: none;
@@ -113,7 +93,7 @@ export const ClickableStyle = css`
   }
 `
 
-export const LinkStyle = css`
+const LinkStyle = css`
   color: ${({ theme }) => theme.accent1};
   stroke: ${({ theme }) => theme.accent1};
   font-weight: 500;
@@ -125,24 +105,12 @@ export const StyledInternalLink = styled(Link)`
   ${LinkStyle}
 `
 
-const LinkIconWrapper = styled.a`
-  align-items: center;
-  justify-content: center;
-  display: flex;
-`
-
 const IconStyle = css`
   height: 16px;
   width: 18px;
   margin-left: 10px;
 `
 
-const LinkIcon = styled(ExternalLinkIconFeather)`
-  ${IconStyle}
-  ${ClickableStyle}
-  ${LinkStyle}
-`
-
 const CopyIcon = styled(Copy)`
   ${IconStyle}
   ${ClickableStyle}
@@ -203,19 +171,6 @@ export function ExternalLink({
   return <StyledLink target={target} rel={rel} href={href} onClick={handleClickExternalLink} {...rest} />
 }
 
-export function ExternalLinkIcon({
-  target = '_blank',
-  href,
-  rel = 'noopener noreferrer',
-  ...rest
-}: Omit<HTMLProps<HTMLAnchorElement>, 'as' | 'ref' | 'onClick'> & { href: string }) {
-  return (
-    <LinkIconWrapper target={target} rel={rel} href={href} onClick={handleClickExternalLink} {...rest}>
-      <LinkIcon />
-    </LinkIconWrapper>
-  )
-}
-
 const TOOLTIP_WIDTH = 60
 
 const ToolTipWrapper = styled.div<{ isCopyContractTooltip?: boolean; tooltipX?: number }>`
@@ -512,11 +467,6 @@ export const Separator = styled.div`
   background-color: ${({ theme }) => theme.surface3};
 `
 
-export const GlowEffect = styled.div`
-  border-radius: 32px;
-  box-shadow: ${({ theme }) => theme.deprecated_networkDefaultShadow};
-`
-
 export const CautionTriangle = styled(AlertTriangle)`
   color: ${({ theme }) => theme.deprecated_accentWarning};
 `

src/theme/index.tsx

@@ -7,10 +7,6 @@ import { navDimensions } from '../nft/css/sprinkles.css'
 import { darkTheme, lightTheme } from './colors'
 import { darkDeprecatedTheme, lightDeprecatedTheme } from './deprecatedColors'
 
-// todo - remove and replace imports with a new path
-export * from './components'
-export * from './components/text'
-
 export const MEDIA_WIDTHS = {
   deprecated_upToExtraSmall: 500,
   deprecated_upToSmall: 720,

src/utils/index.ts

-export * from './addresses'
-export * from './escapeRegExp'
-export * from './getContract'
+export { isAddress, shortenAddress } from './addresses'
+export { escapeRegExp } from './escapeRegExp'
+export { getContract } from './getContract'