From fbc7e6403270e567a8b5aa80dad420d4617c53c7 Mon Sep 17 00:00:00 2001 From: Zach Pomerantz Date: Thu, 21 Sep 2023 19:38:17 -0700 Subject: [PATCH] chore: prohibit barrels (#7362) * chore: prohibit barrels * lint * lint * more lint * add motivation to eslint message --- .eslintrc.js | 7 + src/components/About/AboutFooter.tsx | 3 +- .../AccountDrawer/AuthenticatedHeader.tsx | 2 +- .../AccountDrawer/DownloadButton.tsx | 2 +- .../AccountDrawer/GitVersionRow.tsx | 2 +- .../MiniPortfolio/Activity/ActivityRow.tsx | 2 +- .../Activity/OffchainActivityModal.tsx | 2 +- .../MiniPortfolio/Activity/index.tsx | 2 +- .../MiniPortfolio/ExpandoRow.tsx | 2 +- .../MiniPortfolio/NFTs/NFTItem.tsx | 2 +- .../MiniPortfolio/Pools/index.tsx | 2 +- .../MiniPortfolio/Tokens/index.tsx | 2 +- .../AccountDrawer/MiniPortfolio/index.tsx | 3 +- src/components/AccountDrawer/SettingsMenu.tsx | 2 +- .../AccountDrawer/SettingsToggle.tsx | 2 +- src/components/AccountDrawer/SlideOutMenu.tsx | 2 +- .../AccountDrawer/UniwalletModal.tsx | 2 +- src/components/AccountDrawer/index.tsx | 3 +- src/components/AccountDrawer/shared.tsx | 3 +- src/components/AddressInputPanel/index.tsx | 2 +- src/components/AirdropModal/index.tsx | 4 +- .../Banner/BaseAnnouncementBanner/index.tsx | 2 +- .../Button/LoadingButtonSpinner.tsx | 2 +- src/components/Charts/PriceChart/index.tsx | 2 +- .../ConnectedAccountBlocked/index.tsx | 4 +- .../CurrencyInputPanel/FiatValue.tsx | 2 +- .../SwapCurrencyInputPanel.tsx | 2 +- src/components/CurrencyInputPanel/index.tsx | 2 +- src/components/ErrorBoundary/index.tsx | 2 +- src/components/FeeSelector/FeeOption.tsx | 2 +- .../FeeSelector/FeeTierPercentageBadge.tsx | 2 +- src/components/FeeSelector/index.tsx | 2 +- src/components/FiatOnrampModal/index.tsx | 2 +- .../InputStepCounter/InputStepCounter.tsx | 2 +- .../LiquidityChartRangeInput/index.tsx | 2 +- src/components/Logo/UniswapXBrandMark.tsx | 2 +- src/components/Menu/index.tsx | 2 +- src/components/ModalViews/index.tsx | 2 +- src/components/NavBar/SearchBarDropdown.tsx | 2 +- src/components/NavBar/SuggestionRow.tsx | 2 +- src/components/NavigationTabs/index.tsx | 2 +- src/components/NetworkAlert/NetworkAlert.tsx | 2 +- .../Polling/ChainConnectivityWarning.tsx | 3 +- src/components/Polling/index.tsx | 2 +- src/components/Popups/ClaimPopup.tsx | 2 +- src/components/Popups/PopupContent.tsx | 2 +- src/components/PositionCard/index.tsx | 2 +- src/components/PositionListItem/index.tsx | 3 +- src/components/PositionPreview/index.tsx | 2 +- src/components/PrivacyPolicy/index.tsx | 2 +- .../RangeSelector/PresetsButtons.tsx | 2 +- src/components/RouterLabel/index.tsx | 2 +- .../RoutingDiagram/RoutingDiagram.tsx | 2 +- .../SearchModal/CurrencyList/index.tsx | 2 +- src/components/SearchModal/CurrencySearch.tsx | 2 +- .../Settings/MaxSlippageSettings/index.tsx | 2 +- src/components/Settings/MenuButton/index.tsx | 2 +- .../RouterPreferenceSettings/index.tsx | 2 +- .../TransactionDeadlineSettings/index.tsx | 2 +- src/components/Settings/index.tsx | 2 +- src/components/SwitchLocaleLink/index.tsx | 2 +- .../TokenSafety/TokenSafetyMessage.tsx | 2 +- src/components/TokenSafety/index.tsx | 2 +- src/components/Tokens/TokenDetails/About.tsx | 2 +- .../Tokens/TokenDetails/AddressSection.tsx | 2 +- .../Tokens/TokenDetails/BalanceSummary.tsx | 2 +- .../TokenDetails/InvalidTokenDetails.tsx | 2 +- .../MobileBalanceSummaryFooter.tsx | 2 +- .../Tokens/TokenDetails/Resource.tsx | 2 +- .../Tokens/TokenDetails/ShareButton.tsx | 5 +- .../Tokens/TokenDetails/Skeleton.tsx | 2 +- .../Tokens/TokenDetails/StatsSection.tsx | 2 +- .../Tokens/TokenTable/NetworkFilter.tsx | 2 +- src/components/Tokens/TokenTable/TokenRow.tsx | 3 +- .../TransactionConfirmationModal/index.tsx | 4 +- src/components/V2Unsupported/index.tsx | 2 +- .../WalletModal/ConnectionErrorView.tsx | 2 +- .../WalletModal/PrivacyPolicyNotice.tsx | 2 +- src/components/WalletModal/index.tsx | 2 +- .../addLiquidity/OwnershipWarning.tsx | 2 +- src/components/claim/AddressClaimModal.tsx | 2 +- src/components/swap/AdvancedSwapDetails.tsx | 2 +- src/components/swap/ConfirmSwapModal.tsx | 2 +- src/components/swap/GasBreakdownTooltip.tsx | 2 +- src/components/swap/GasEstimateTooltip.tsx | 2 +- .../PendingModalContent/ErrorModalContent.tsx | 2 +- .../swap/PendingModalContent/TradeSummary.tsx | 2 +- .../swap/PendingModalContent/index.tsx | 2 +- src/components/swap/PriceImpactModal.tsx | 2 +- src/components/swap/PriceImpactWarning.tsx | 2 +- src/components/swap/SwapBuyFiatButton.tsx | 2 +- src/components/swap/SwapDetailsDropdown.tsx | 2 +- src/components/swap/SwapHeader.tsx | 2 +- src/components/swap/SwapModalFooter.tsx | 2 +- src/components/swap/SwapModalHeader.tsx | 2 +- src/components/swap/SwapModalHeaderAmount.tsx | 3 +- src/components/swap/SwapRoute.tsx | 2 +- src/components/swap/SwapSkeleton.tsx | 2 +- src/components/swap/TradePrice.tsx | 2 +- .../swap/UnsupportedCurrencyFooter.tsx | 2 +- src/components/vote/DelegateModal.tsx | 2 +- src/components/vote/ExecuteModal.tsx | 4 +- src/components/vote/ProposalEmptyState.tsx | 2 +- src/components/vote/QueueModal.tsx | 4 +- src/components/vote/VoteModal.tsx | 4 +- src/nft/components/bag/BagFooter.tsx | 2 +- src/nft/components/bag/BagHeader.tsx | 2 +- src/nft/components/card/containers.tsx | 3 +- src/nft/components/card/icons.tsx | 2 +- src/nft/components/card/media.tsx | 3 +- .../components/collection/ActivityCells.tsx | 2 +- .../components/collection/CollectionNfts.tsx | 2 +- .../components/collection/CollectionStats.tsx | 2 +- .../collection/MarketplaceSelect.tsx | 2 +- src/nft/components/collection/Sweep.tsx | 2 +- .../components/common/{Portal => }/Portal.tsx | 0 src/nft/components/common/Portal/index.ts | 1 - .../components/common/SortDropdown/index.ts | 2 - .../{SortDropdown.tsx => index.tsx} | 2 + .../components/details/AssetPriceDetails.tsx | 2 +- src/nft/components/explore/Cells/Cells.tsx | 2 +- src/nft/components/explore/Table.tsx | 2 +- .../explore/TrendingCollections.tsx | 2 +- src/nft/components/profile/list/Dropdown.tsx | 2 +- src/nft/components/profile/list/ListPage.tsx | 5 +- .../profile/list/MarketplaceRow.tsx | 3 +- .../list/Modal/BelowFloorWarningModal.tsx | 3 +- .../profile/list/Modal/ContentRow.tsx | 2 +- .../profile/list/Modal/ListModal.tsx | 3 +- .../profile/list/Modal/ListModalSection.tsx | 2 +- .../profile/list/Modal/SuccessScreen.tsx | 3 +- .../components/profile/list/NFTListRow.tsx | 3 +- .../profile/list/RoyaltyTooltip.tsx | 2 +- .../list/SelectMarketplacesDropdown.tsx | 2 +- src/nft/components/profile/list/utils.ts | 7 +- .../profile/view/EmptyWalletContent.tsx | 2 +- .../components/profile/view/FilterSidebar.tsx | 2 +- .../components/profile/view/ProfilePage.tsx | 2 +- src/nft/hooks/index.ts | 41 ++-- src/nft/hooks/useMarketplaceSelect.ts | 24 --- src/nft/hooks/useNFTSelect.ts | 52 ----- src/nft/hooks/useSelectAsset.ts | 37 ---- src/nft/hooks/useSweep.ts | 37 ---- src/nft/pages/collection/index.tsx | 2 +- src/nft/pages/profile/profile.tsx | 3 +- .../queries/genie/CollectionPreviewFetcher.ts | 32 --- src/nft/queries/genie/RouteFetcher.ts | 70 ------- src/nft/queries/genie/index.ts | 3 +- src/nft/queries/index.ts | 4 - src/nft/queries/looksRare/index.ts | 6 +- .../looksRare/looksRareRewardsFetcher.ts | 13 -- src/nft/queries/openSea/index.ts | 5 +- src/nft/queries/x2y2/index.ts | 2 +- src/nft/types/checkout/checkout.ts | 100 --------- src/nft/types/checkout/index.ts | 101 ++++++++- src/nft/types/collection/collection.ts | 106 ---------- src/nft/types/collection/index.ts | 69 ++++++- src/nft/types/common/common.ts | 195 ------------------ src/nft/types/common/index.ts | 130 +++++++++++- src/nft/types/discover/discover.ts | 82 -------- src/nft/types/discover/index.ts | 56 ++++- src/nft/types/index.ts | 31 ++- src/nft/types/navbar/index.ts | 1 - src/nft/types/navbar/navbar.ts | 5 - src/nft/types/sell/index.ts | 114 +++++++++- src/nft/types/sell/sell.ts | 113 ---------- src/nft/utils/asset.tsx | 14 +- src/nft/utils/buildSellObject.ts | 19 +- src/nft/utils/currency.ts | 7 +- src/nft/utils/index.ts | 49 +++-- src/nft/utils/listNfts.ts | 17 +- src/nft/utils/pooledAssets.ts | 2 +- src/nft/utils/updatedAssets.ts | 4 +- src/pages/AddLiquidity/index.tsx | 2 +- .../AddLiquidityV2/ConfirmAddModalBottom.tsx | 2 +- src/pages/AddLiquidityV2/PoolPriceBar.tsx | 2 +- src/pages/AddLiquidityV2/index.tsx | 2 +- .../CreateProposal/ProposalActionSelector.tsx | 2 +- .../ProposalSubmissionModal.tsx | 2 +- src/pages/CreateProposal/index.tsx | 2 +- src/pages/MigrateV2/MigrateV2Pair.tsx | 2 +- src/pages/MigrateV2/index.tsx | 2 +- src/pages/NotFound/index.tsx | 2 +- src/pages/Pool/CTACards.tsx | 5 +- src/pages/Pool/PositionPage.tsx | 2 +- src/pages/Pool/index.tsx | 2 +- src/pages/Pool/v2.tsx | 2 +- src/pages/PoolDetails/PoolDetailsHeader.tsx | 2 +- src/pages/PoolFinder/index.tsx | 4 +- src/pages/RemoveLiquidity/V3.tsx | 2 +- src/pages/RemoveLiquidity/index.tsx | 2 +- src/pages/Swap/TaxTooltipBody.tsx | 2 +- src/pages/Swap/UniswapXOptIn.tsx | 2 +- src/pages/Swap/index.tsx | 2 +- src/pages/Tokens/index.tsx | 2 +- src/pages/Vote/Landing.tsx | 2 +- src/pages/Vote/VotePage.tsx | 2 +- src/test-utils/render.tsx | 2 + src/theme/components/SegmentedControl.tsx | 2 +- src/theme/components/index.tsx | 58 +----- src/theme/index.tsx | 4 - src/utils/index.ts | 6 +- 202 files changed, 769 insertions(+), 1218 deletions(-) rename src/nft/components/common/{Portal => }/Portal.tsx (100%) delete mode 100644 src/nft/components/common/Portal/index.ts delete mode 100644 src/nft/components/common/SortDropdown/index.ts rename src/nft/components/common/SortDropdown/{SortDropdown.tsx => index.tsx} (99%) delete mode 100644 src/nft/hooks/useMarketplaceSelect.ts delete mode 100644 src/nft/hooks/useNFTSelect.ts delete mode 100644 src/nft/hooks/useSelectAsset.ts delete mode 100644 src/nft/hooks/useSweep.ts delete mode 100644 src/nft/queries/genie/CollectionPreviewFetcher.ts delete mode 100644 src/nft/queries/genie/RouteFetcher.ts delete mode 100644 src/nft/queries/index.ts delete mode 100644 src/nft/queries/looksRare/looksRareRewardsFetcher.ts delete mode 100644 src/nft/types/checkout/checkout.ts delete mode 100644 src/nft/types/collection/collection.ts delete mode 100644 src/nft/types/common/common.ts delete mode 100644 src/nft/types/discover/discover.ts delete mode 100644 src/nft/types/navbar/index.ts delete mode 100644 src/nft/types/navbar/navbar.ts delete mode 100644 src/nft/types/sell/sell.ts diff --git a/.eslintrc.js b/.eslintrc.js index 5939cc67a4..5089f33db5 100644 --- a/.eslintrc.js +++ b/.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.', + }, + ], }, }, { diff --git a/src/components/About/AboutFooter.tsx b/src/components/About/AboutFooter.tsx index 9cca8fc744..3d1cdae2a9 100644 --- a/src/components/About/AboutFooter.tsx +++ b/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' diff --git a/src/components/AccountDrawer/AuthenticatedHeader.tsx b/src/components/AccountDrawer/AuthenticatedHeader.tsx index d82cf1778e..3be3675cf3 100644 --- a/src/components/AccountDrawer/AuthenticatedHeader.tsx +++ b/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' diff --git a/src/components/AccountDrawer/DownloadButton.tsx b/src/components/AccountDrawer/DownloadButton.tsx index c01fb6d88d..cc7ff243f6 100644 --- a/src/components/AccountDrawer/DownloadButton.tsx +++ b/src/components/AccountDrawer/DownloadButton.tsx @@ -1,7 +1,7 @@ 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 }>` diff --git a/src/components/AccountDrawer/GitVersionRow.tsx b/src/components/AccountDrawer/GitVersionRow.tsx index a8cd258627..140bd539e3 100644 --- a/src/components/AccountDrawer/GitVersionRow.tsx +++ b/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%; diff --git a/src/components/AccountDrawer/MiniPortfolio/Activity/ActivityRow.tsx b/src/components/AccountDrawer/MiniPortfolio/Activity/ActivityRow.tsx index 39d45895cd..ed479980d1 100644 --- a/src/components/AccountDrawer/MiniPortfolio/Activity/ActivityRow.tsx +++ b/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' diff --git a/src/components/AccountDrawer/MiniPortfolio/Activity/OffchainActivityModal.tsx b/src/components/AccountDrawer/MiniPortfolio/Activity/OffchainActivityModal.tsx index bc7dd8566b..7d38f8cf6b 100644 --- a/src/components/AccountDrawer/MiniPortfolio/Activity/OffchainActivityModal.tsx +++ b/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 = { diff --git a/src/components/AccountDrawer/MiniPortfolio/Activity/index.tsx b/src/components/AccountDrawer/MiniPortfolio/Activity/index.tsx index 00b3a1b194..0bf8d54d93 100644 --- a/src/components/AccountDrawer/MiniPortfolio/Activity/index.tsx +++ b/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' diff --git a/src/components/AccountDrawer/MiniPortfolio/ExpandoRow.tsx b/src/components/AccountDrawer/MiniPortfolio/ExpandoRow.tsx index c6ea2cd3fb..3e1737b02e 100644 --- a/src/components/AccountDrawer/MiniPortfolio/ExpandoRow.tsx +++ b/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}; diff --git a/src/components/AccountDrawer/MiniPortfolio/NFTs/NFTItem.tsx b/src/components/AccountDrawer/MiniPortfolio/NFTs/NFTItem.tsx index 0af2c0fea0..c9a5658fe3 100644 --- a/src/components/AccountDrawer/MiniPortfolio/NFTs/NFTItem.tsx +++ b/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; diff --git a/src/components/AccountDrawer/MiniPortfolio/Pools/index.tsx b/src/components/AccountDrawer/MiniPortfolio/Pools/index.tsx index 5830b2c896..f47a018bc6 100644 --- a/src/components/AccountDrawer/MiniPortfolio/Pools/index.tsx +++ b/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' diff --git a/src/components/AccountDrawer/MiniPortfolio/Tokens/index.tsx b/src/components/AccountDrawer/MiniPortfolio/Tokens/index.tsx index c87b400f40..fab6e69a08 100644 --- a/src/components/AccountDrawer/MiniPortfolio/Tokens/index.tsx +++ b/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' diff --git a/src/components/AccountDrawer/MiniPortfolio/index.tsx b/src/components/AccountDrawer/MiniPortfolio/index.tsx index 8ca6ed512a..c875a1a4a6 100644 --- a/src/components/AccountDrawer/MiniPortfolio/index.tsx +++ b/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' diff --git a/src/components/AccountDrawer/SettingsMenu.tsx b/src/components/AccountDrawer/SettingsMenu.tsx index a804c958c0..f3acce8c64 100644 --- a/src/components/AccountDrawer/SettingsMenu.tsx +++ b/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' diff --git a/src/components/AccountDrawer/SettingsToggle.tsx b/src/components/AccountDrawer/SettingsToggle.tsx index d88a6a287a..1f3a1cdffa 100644 --- a/src/components/AccountDrawer/SettingsToggle.tsx +++ b/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%; diff --git a/src/components/AccountDrawer/SlideOutMenu.tsx b/src/components/AccountDrawer/SlideOutMenu.tsx index 8b41fcb17f..e8ce58bacd 100644 --- a/src/components/AccountDrawer/SlideOutMenu.tsx +++ b/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%; diff --git a/src/components/AccountDrawer/UniwalletModal.tsx b/src/components/AccountDrawer/UniwalletModal.tsx index 0bcb018664..c85484c40f 100644 --- a/src/components/AccountDrawer/UniwalletModal.tsx +++ b/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' diff --git a/src/components/AccountDrawer/index.tsx b/src/components/AccountDrawer/index.tsx index 67329b0ed2..e357444d03 100644 --- a/src/components/AccountDrawer/index.tsx +++ b/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' diff --git a/src/components/AccountDrawer/shared.tsx b/src/components/AccountDrawer/shared.tsx index 5ec69265f0..d28ecba0a1 100644 --- a/src/components/AccountDrawer/shared.tsx +++ b/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} diff --git a/src/components/AddressInputPanel/index.tsx b/src/components/AddressInputPanel/index.tsx index 596f89d071..52d65662c3 100644 --- a/src/components/AddressInputPanel/index.tsx +++ b/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' diff --git a/src/components/AirdropModal/index.tsx b/src/components/AirdropModal/index.tsx index b6c64dd8d5..20b76e7000 100644 --- a/src/components/AirdropModal/index.tsx +++ b/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' diff --git a/src/components/Banner/BaseAnnouncementBanner/index.tsx b/src/components/Banner/BaseAnnouncementBanner/index.tsx index c38e195d4d..5bee383ca4 100644 --- a/src/components/Banner/BaseAnnouncementBanner/index.tsx +++ b/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' diff --git a/src/components/Button/LoadingButtonSpinner.tsx b/src/components/Button/LoadingButtonSpinner.tsx index 7ad40ce5c8..9cb659d487 100644 --- a/src/components/Button/LoadingButtonSpinner.tsx +++ b/src/components/Button/LoadingButtonSpinner.tsx @@ -1,4 +1,4 @@ -import { SpinnerSVG } from 'theme' +import { SpinnerSVG } from 'theme/components' const ButtonLoadingSpinner = (props: React.ComponentPropsWithoutRef<'svg'>) => ( diff --git a/src/components/Charts/PriceChart/index.tsx b/src/components/Charts/PriceChart/index.tsx index cf13d654a0..ca5217563a 100644 --- a/src/components/Charts/PriceChart/index.tsx +++ b/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' diff --git a/src/components/ConnectedAccountBlocked/index.tsx b/src/components/ConnectedAccountBlocked/index.tsx index 25c99902a7..88f83204b9 100644 --- a/src/components/ConnectedAccountBlocked/index.tsx +++ b/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)` diff --git a/src/components/CurrencyInputPanel/FiatValue.tsx b/src/components/CurrencyInputPanel/FiatValue.tsx index c0897b0466..128d283b48 100644 --- a/src/components/CurrencyInputPanel/FiatValue.tsx +++ b/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' diff --git a/src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx b/src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx index 67c2e14af5..a9de21dc51 100644 --- a/src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx +++ b/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' diff --git a/src/components/CurrencyInputPanel/index.tsx b/src/components/CurrencyInputPanel/index.tsx index 028a7e58c8..72fbc435c4 100644 --- a/src/components/CurrencyInputPanel/index.tsx +++ b/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' diff --git a/src/components/ErrorBoundary/index.tsx b/src/components/ErrorBoundary/index.tsx index 5531e697ad..96f4f7d029 100644 --- a/src/components/ErrorBoundary/index.tsx +++ b/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` diff --git a/src/components/FeeSelector/FeeOption.tsx b/src/components/FeeSelector/FeeOption.tsx index ae745ea2e9..1b720438f9 100644 --- a/src/components/FeeSelector/FeeOption.tsx +++ b/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' diff --git a/src/components/FeeSelector/FeeTierPercentageBadge.tsx b/src/components/FeeSelector/FeeTierPercentageBadge.tsx index fcfd6330ce..611dec8a14 100644 --- a/src/components/FeeSelector/FeeTierPercentageBadge.tsx +++ b/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, diff --git a/src/components/FeeSelector/index.tsx b/src/components/FeeSelector/index.tsx index 2c44bf4819..1ef77a041f 100644 --- a/src/components/FeeSelector/index.tsx +++ b/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' diff --git a/src/components/FiatOnrampModal/index.tsx b/src/components/FiatOnrampModal/index.tsx index 0aa1e90be6..dc4c83443a 100644 --- a/src/components/FiatOnrampModal/index.tsx +++ b/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' diff --git a/src/components/InputStepCounter/InputStepCounter.tsx b/src/components/InputStepCounter/InputStepCounter.tsx index d2a5b4cd2d..1699491adf 100644 --- a/src/components/InputStepCounter/InputStepCounter.tsx +++ b/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' diff --git a/src/components/LiquidityChartRangeInput/index.tsx b/src/components/LiquidityChartRangeInput/index.tsx index 3e690afe5a..391f84ea75 100644 --- a/src/components/LiquidityChartRangeInput/index.tsx +++ b/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' diff --git a/src/components/Logo/UniswapXBrandMark.tsx b/src/components/Logo/UniswapXBrandMark.tsx index f0a4372109..94593f006b 100644 --- a/src/components/Logo/UniswapXBrandMark.tsx +++ b/src/components/Logo/UniswapXBrandMark.tsx @@ -1,5 +1,5 @@ import { Trans } from '@lingui/macro' -import { ThemedText } from 'theme' +import { ThemedText } from 'theme/components' import UniswapXRouterLabel, { UnswapXRouterLabelProps } from '../RouterLabel/UniswapXRouterLabel' diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx index 933c26768d..0164ab8c11 100644 --- a/src/components/Menu/index.tsx +++ b/src/components/Menu/index.tsx @@ -1,12 +1,12 @@ 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', diff --git a/src/components/ModalViews/index.tsx b/src/components/ModalViews/index.tsx index ae3e104ffe..5f4d8b87c4 100644 --- a/src/components/ModalViews/index.tsx +++ b/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' diff --git a/src/components/NavBar/SearchBarDropdown.tsx b/src/components/NavBar/SearchBarDropdown.tsx index eab9898c79..ec4d1eb2ed 100644 --- a/src/components/NavBar/SearchBarDropdown.tsx +++ b/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' diff --git a/src/components/NavBar/SuggestionRow.tsx b/src/components/NavBar/SuggestionRow.tsx index f2ea60f0df..2a74561006 100644 --- a/src/components/NavBar/SuggestionRow.tsx +++ b/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' diff --git a/src/components/NavigationTabs/index.tsx b/src/components/NavigationTabs/index.tsx index db2e4c42ec..e1bc2b05e0 100644 --- a/src/components/NavigationTabs/index.tsx +++ b/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' diff --git a/src/components/NetworkAlert/NetworkAlert.tsx b/src/components/NetworkAlert/NetworkAlert.tsx index 49c87ccfe0..e2a7cfe931 100644 --- a/src/components/NetworkAlert/NetworkAlert.tsx +++ b/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' diff --git a/src/components/Polling/ChainConnectivityWarning.tsx b/src/components/Polling/ChainConnectivityWarning.tsx index 44adec5f79..e70d488c1e 100644 --- a/src/components/Polling/ChainConnectivityWarning.tsx +++ b/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}; diff --git a/src/components/Polling/index.tsx b/src/components/Polling/index.tsx index c2bf980bdc..18c21d3f45 100644 --- a/src/components/Polling/index.tsx +++ b/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' diff --git a/src/components/Popups/ClaimPopup.tsx b/src/components/Popups/ClaimPopup.tsx index f48fd6886c..bbc1f3d01d 100644 --- a/src/components/Popups/ClaimPopup.tsx +++ b/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' diff --git a/src/components/Popups/PopupContent.tsx b/src/components/Popups/PopupContent.tsx index 8928eb44b4..43e8c27dd4 100644 --- a/src/components/Popups/PopupContent.tsx +++ b/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' diff --git a/src/components/PositionCard/index.tsx b/src/components/PositionCard/index.tsx index f4ddd5abe9..fcebdb0e95 100644 --- a/src/components/PositionCard/index.tsx +++ b/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' diff --git a/src/components/PositionListItem/index.tsx b/src/components/PositionListItem/index.tsx index f530182f92..e961e62595 100644 --- a/src/components/PositionListItem/index.tsx +++ b/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' diff --git a/src/components/PositionPreview/index.tsx b/src/components/PositionPreview/index.tsx index 0672741dab..c17cdcc457 100644 --- a/src/components/PositionPreview/index.tsx +++ b/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' diff --git a/src/components/PrivacyPolicy/index.tsx b/src/components/PrivacyPolicy/index.tsx index 7e46bd6278..38f342d6bd 100644 --- a/src/components/PrivacyPolicy/index.tsx +++ b/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' diff --git a/src/components/RangeSelector/PresetsButtons.tsx b/src/components/RangeSelector/PresetsButtons.tsx index 2c3fbc6f91..98a70c1fd2 100644 --- a/src/components/RangeSelector/PresetsButtons.tsx +++ b/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', diff --git a/src/components/RouterLabel/index.tsx b/src/components/RouterLabel/index.tsx index 66b1548dbe..4b4055c29f 100644 --- a/src/components/RouterLabel/index.tsx +++ b/src/components/RouterLabel/index.tsx @@ -1,6 +1,6 @@ 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' diff --git a/src/components/RoutingDiagram/RoutingDiagram.tsx b/src/components/RoutingDiagram/RoutingDiagram.tsx index 86289231bd..5813f98881 100644 --- a/src/components/RoutingDiagram/RoutingDiagram.tsx +++ b/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' diff --git a/src/components/SearchModal/CurrencyList/index.tsx b/src/components/SearchModal/CurrencyList/index.tsx index 0017229aee..6f5fa07888 100644 --- a/src/components/SearchModal/CurrencyList/index.tsx +++ b/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' diff --git a/src/components/SearchModal/CurrencySearch.tsx b/src/components/SearchModal/CurrencySearch.tsx index 8bd3dc5a4b..2df8773081 100644 --- a/src/components/SearchModal/CurrencySearch.tsx +++ b/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' diff --git a/src/components/Settings/MaxSlippageSettings/index.tsx b/src/components/Settings/MaxSlippageSettings/index.tsx index a088d67618..6710372d25 100644 --- a/src/components/Settings/MaxSlippageSettings/index.tsx +++ b/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' diff --git a/src/components/Settings/MenuButton/index.tsx b/src/components/Settings/MenuButton/index.tsx index c061e08307..aac9e54698 100644 --- a/src/components/Settings/MenuButton/index.tsx +++ b/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)` diff --git a/src/components/Settings/RouterPreferenceSettings/index.tsx b/src/components/Settings/RouterPreferenceSettings/index.tsx index c27418dc6c..86a57ee307 100644 --- a/src/components/Settings/RouterPreferenceSettings/index.tsx +++ b/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}; diff --git a/src/components/Settings/TransactionDeadlineSettings/index.tsx b/src/components/Settings/TransactionDeadlineSettings/index.tsx index c89747d83b..2ea9b658ba 100644 --- a/src/components/Settings/TransactionDeadlineSettings/index.tsx +++ b/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', diff --git a/src/components/Settings/index.tsx b/src/components/Settings/index.tsx index 26cccfb7e6..90339ed8af 100644 --- a/src/components/Settings/index.tsx +++ b/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' diff --git a/src/components/SwitchLocaleLink/index.tsx b/src/components/SwitchLocaleLink/index.tsx index db42136bd5..a8a8e5a849 100644 --- a/src/components/SwitchLocaleLink/index.tsx +++ b/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}; diff --git a/src/components/TokenSafety/TokenSafetyMessage.tsx b/src/components/TokenSafety/TokenSafetyMessage.tsx index f79caa7994..345927b666 100644 --- a/src/components/TokenSafety/TokenSafetyMessage.tsx +++ b/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%; diff --git a/src/components/TokenSafety/index.tsx b/src/components/TokenSafety/index.tsx index 80f172740b..e84b8de5e9 100644 --- a/src/components/TokenSafety/index.tsx +++ b/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` diff --git a/src/components/Tokens/TokenDetails/About.tsx b/src/components/Tokens/TokenDetails/About.tsx index 95ddd56d11..270afd4b09 100644 --- a/src/components/Tokens/TokenDetails/About.tsx +++ b/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' diff --git a/src/components/Tokens/TokenDetails/AddressSection.tsx b/src/components/Tokens/TokenDetails/AddressSection.tsx index 8d530d60a6..4614dd48cb 100644 --- a/src/components/Tokens/TokenDetails/AddressSection.tsx +++ b/src/components/Tokens/TokenDetails/AddressSection.tsx @@ -1,6 +1,6 @@ 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; diff --git a/src/components/Tokens/TokenDetails/BalanceSummary.tsx b/src/components/Tokens/TokenDetails/BalanceSummary.tsx index 8c33a8cf9b..649427aa58 100644 --- a/src/components/Tokens/TokenDetails/BalanceSummary.tsx +++ b/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` diff --git a/src/components/Tokens/TokenDetails/InvalidTokenDetails.tsx b/src/components/Tokens/TokenDetails/InvalidTokenDetails.tsx index 6962ecd10e..186d4c4fd1 100644 --- a/src/components/Tokens/TokenDetails/InvalidTokenDetails.tsx +++ b/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' diff --git a/src/components/Tokens/TokenDetails/MobileBalanceSummaryFooter.tsx b/src/components/Tokens/TokenDetails/MobileBalanceSummaryFooter.tsx index b216f63862..30a858719d 100644 --- a/src/components/Tokens/TokenDetails/MobileBalanceSummaryFooter.tsx +++ b/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` diff --git a/src/components/Tokens/TokenDetails/Resource.tsx b/src/components/Tokens/TokenDetails/Resource.tsx index f5960d9cb8..cbeb1141d4 100644 --- a/src/components/Tokens/TokenDetails/Resource.tsx +++ b/src/components/Tokens/TokenDetails/Resource.tsx @@ -1,6 +1,6 @@ import { darken } from 'polished' import styled from 'styled-components' -import { ExternalLink } from 'theme' +import { ExternalLink } from 'theme/components' const ResourceLink = styled(ExternalLink)` display: flex; diff --git a/src/components/Tokens/TokenDetails/ShareButton.tsx b/src/components/Tokens/TokenDetails/ShareButton.tsx index 8b62765e3a..eba7adc26d 100644 --- a/src/components/Tokens/TokenDetails/ShareButton.tsx +++ b/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 diff --git a/src/components/Tokens/TokenDetails/Skeleton.tsx b/src/components/Tokens/TokenDetails/Skeleton.tsx index ab15de58b6..e347f38287 100644 --- a/src/components/Tokens/TokenDetails/Skeleton.tsx +++ b/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' diff --git a/src/components/Tokens/TokenDetails/StatsSection.tsx b/src/components/Tokens/TokenDetails/StatsSection.tsx index 728f841949..f501076c2e 100644 --- a/src/components/Tokens/TokenDetails/StatsSection.tsx +++ b/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' diff --git a/src/components/Tokens/TokenTable/NetworkFilter.tsx b/src/components/Tokens/TokenTable/NetworkFilter.tsx index 63e2479fbd..502f2f9c93 100644 --- a/src/components/Tokens/TokenTable/NetworkFilter.tsx +++ b/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' diff --git a/src/components/Tokens/TokenTable/TokenRow.tsx b/src/components/Tokens/TokenTable/TokenRow.tsx index a478fb0410..d060a72100 100644 --- a/src/components/Tokens/TokenTable/TokenRow.tsx +++ b/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 { diff --git a/src/components/TransactionConfirmationModal/index.tsx b/src/components/TransactionConfirmationModal/index.tsx index e8b24e8a6e..073d136385 100644 --- a/src/components/TransactionConfirmationModal/index.tsx +++ b/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' diff --git a/src/components/V2Unsupported/index.tsx b/src/components/V2Unsupported/index.tsx index 914395428c..aa5280c2a9 100644 --- a/src/components/V2Unsupported/index.tsx +++ b/src/components/V2Unsupported/index.tsx @@ -1,7 +1,7 @@ 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}; diff --git a/src/components/WalletModal/ConnectionErrorView.tsx b/src/components/WalletModal/ConnectionErrorView.tsx index d34bfe466b..2ca2cbae49 100644 --- a/src/components/WalletModal/ConnectionErrorView.tsx +++ b/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` diff --git a/src/components/WalletModal/PrivacyPolicyNotice.tsx b/src/components/WalletModal/PrivacyPolicyNotice.tsx index fc7f77dfed..579024a133 100644 --- a/src/components/WalletModal/PrivacyPolicyNotice.tsx +++ b/src/components/WalletModal/PrivacyPolicyNotice.tsx @@ -1,6 +1,6 @@ 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; diff --git a/src/components/WalletModal/index.tsx b/src/components/WalletModal/index.tsx index baa2d5a8ec..a252a10a76 100644 --- a/src/components/WalletModal/index.tsx +++ b/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' diff --git a/src/components/addLiquidity/OwnershipWarning.tsx b/src/components/addLiquidity/OwnershipWarning.tsx index 5582005c4c..e573b15c48 100644 --- a/src/components/addLiquidity/OwnershipWarning.tsx +++ b/src/components/addLiquidity/OwnershipWarning.tsx @@ -1,7 +1,7 @@ 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}; diff --git a/src/components/claim/AddressClaimModal.tsx b/src/components/claim/AddressClaimModal.tsx index a8aae2e081..14f0011fe9 100644 --- a/src/components/claim/AddressClaimModal.tsx +++ b/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' diff --git a/src/components/swap/AdvancedSwapDetails.tsx b/src/components/swap/AdvancedSwapDetails.tsx index d0957b3426..942a5ccd17 100644 --- a/src/components/swap/AdvancedSwapDetails.tsx +++ b/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' diff --git a/src/components/swap/ConfirmSwapModal.tsx b/src/components/swap/ConfirmSwapModal.tsx index a2771e5ee7..c2721117f1 100644 --- a/src/components/swap/ConfirmSwapModal.tsx +++ b/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' diff --git a/src/components/swap/GasBreakdownTooltip.tsx b/src/components/swap/GasBreakdownTooltip.tsx index 0cad40a6b7..f6540a6c08 100644 --- a/src/components/swap/GasBreakdownTooltip.tsx +++ b/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)` diff --git a/src/components/swap/GasEstimateTooltip.tsx b/src/components/swap/GasEstimateTooltip.tsx index afb456e2c6..5a282a5f32 100644 --- a/src/components/swap/GasEstimateTooltip.tsx +++ b/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' diff --git a/src/components/swap/PendingModalContent/ErrorModalContent.tsx b/src/components/swap/PendingModalContent/ErrorModalContent.tsx index 53a8bb04ea..16307cdd06 100644 --- a/src/components/swap/PendingModalContent/ErrorModalContent.tsx +++ b/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 '.' diff --git a/src/components/swap/PendingModalContent/TradeSummary.tsx b/src/components/swap/PendingModalContent/TradeSummary.tsx index 5365cf85cd..abebc0487b 100644 --- a/src/components/swap/PendingModalContent/TradeSummary.tsx +++ b/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 }) { diff --git a/src/components/swap/PendingModalContent/index.tsx b/src/components/swap/PendingModalContent/index.tsx index 82d8df1d3b..6a113c8606 100644 --- a/src/components/swap/PendingModalContent/index.tsx +++ b/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' diff --git a/src/components/swap/PriceImpactModal.tsx b/src/components/swap/PriceImpactModal.tsx index 74e0948dd1..c164f9e8d3 100644 --- a/src/components/swap/PriceImpactModal.tsx +++ b/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' diff --git a/src/components/swap/PriceImpactWarning.tsx b/src/components/swap/PriceImpactWarning.tsx index f478635ea8..1cfb2e03a1 100644 --- a/src/components/swap/PriceImpactWarning.tsx +++ b/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' diff --git a/src/components/swap/SwapBuyFiatButton.tsx b/src/components/swap/SwapBuyFiatButton.tsx index 497b5922ca..e348cef565 100644 --- a/src/components/swap/SwapBuyFiatButton.tsx +++ b/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' diff --git a/src/components/swap/SwapDetailsDropdown.tsx b/src/components/swap/SwapDetailsDropdown.tsx index 82aeae2f38..7f9a9ddb0b 100644 --- a/src/components/swap/SwapDetailsDropdown.tsx +++ b/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' diff --git a/src/components/swap/SwapHeader.tsx b/src/components/swap/SwapHeader.tsx index 14d2d74197..28590edcaf 100644 --- a/src/components/swap/SwapHeader.tsx +++ b/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' diff --git a/src/components/swap/SwapModalFooter.tsx b/src/components/swap/SwapModalFooter.tsx index 317bdeb9d7..25184cf2cf 100644 --- a/src/components/swap/SwapModalFooter.tsx +++ b/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' diff --git a/src/components/swap/SwapModalHeader.tsx b/src/components/swap/SwapModalHeader.tsx index df4bef453d..40d3194f03 100644 --- a/src/components/swap/SwapModalHeader.tsx +++ b/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' diff --git a/src/components/swap/SwapModalHeaderAmount.tsx b/src/components/swap/SwapModalHeaderAmount.tsx index a968a67d5f..4d4cd0acfa 100644 --- a/src/components/swap/SwapModalHeaderAmount.tsx +++ b/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 }>` diff --git a/src/components/swap/SwapRoute.tsx b/src/components/swap/SwapRoute.tsx index 179b0554b6..cef1a8a023 100644 --- a/src/components/swap/SwapRoute.tsx +++ b/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' diff --git a/src/components/swap/SwapSkeleton.tsx b/src/components/swap/SwapSkeleton.tsx index 4566148e33..3938a966d0 100644 --- a/src/components/swap/SwapSkeleton.tsx +++ b/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' diff --git a/src/components/swap/TradePrice.tsx b/src/components/swap/TradePrice.tsx index 0c207da54e..780a120896 100644 --- a/src/components/swap/TradePrice.tsx +++ b/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 { diff --git a/src/components/swap/UnsupportedCurrencyFooter.tsx b/src/components/swap/UnsupportedCurrencyFooter.tsx index 546b88df8d..dc4cccc01c 100644 --- a/src/components/swap/UnsupportedCurrencyFooter.tsx +++ b/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' diff --git a/src/components/vote/DelegateModal.tsx b/src/components/vote/DelegateModal.tsx index add5e570bd..23d6e0d0f9 100644 --- a/src/components/vote/DelegateModal.tsx +++ b/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' diff --git a/src/components/vote/ExecuteModal.tsx b/src/components/vote/ExecuteModal.tsx index b534fa4b7a..337be1bddf 100644 --- a/src/components/vote/ExecuteModal.tsx +++ b/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' diff --git a/src/components/vote/ProposalEmptyState.tsx b/src/components/vote/ProposalEmptyState.tsx index f5100a2929..f1e4c4903f 100644 --- a/src/components/vote/ProposalEmptyState.tsx +++ b/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}; diff --git a/src/components/vote/QueueModal.tsx b/src/components/vote/QueueModal.tsx index e96c47217f..55a899bd18 100644 --- a/src/components/vote/QueueModal.tsx +++ b/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' diff --git a/src/components/vote/VoteModal.tsx b/src/components/vote/VoteModal.tsx index 8aa8401f36..77a9c7c412 100644 --- a/src/components/vote/VoteModal.tsx +++ b/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' diff --git a/src/nft/components/bag/BagFooter.tsx b/src/nft/components/bag/BagFooter.tsx index bcdaf65530..d29502ede5 100644 --- a/src/nft/components/bag/BagFooter.tsx +++ b/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' diff --git a/src/nft/components/bag/BagHeader.tsx b/src/nft/components/bag/BagHeader.tsx index d5cb79b584..ceb833d193 100644 --- a/src/nft/components/bag/BagHeader.tsx +++ b/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}; diff --git a/src/nft/components/card/containers.tsx b/src/nft/components/card/containers.tsx index 0f8a1de418..1479c385af 100644 --- a/src/nft/components/card/containers.tsx +++ b/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' diff --git a/src/nft/components/card/icons.tsx b/src/nft/components/card/icons.tsx index 8d3ff4a7ef..d1cb38dc36 100644 --- a/src/nft/components/card/icons.tsx +++ b/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; diff --git a/src/nft/components/card/media.tsx b/src/nft/components/card/media.tsx index 249a58b532..65ec63efa6 100644 --- a/src/nft/components/card/media.tsx +++ b/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; diff --git a/src/nft/components/collection/ActivityCells.tsx b/src/nft/components/collection/ActivityCells.tsx index f40eafce01..48f0557c2c 100644 --- a/src/nft/components/collection/ActivityCells.tsx +++ b/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' diff --git a/src/nft/components/collection/CollectionNfts.tsx b/src/nft/components/collection/CollectionNfts.tsx index f202e09a30..2d7ecb11f1 100644 --- a/src/nft/components/collection/CollectionNfts.tsx +++ b/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' diff --git a/src/nft/components/collection/CollectionStats.tsx b/src/nft/components/collection/CollectionStats.tsx index 681469594a..6a0e6d69a0 100644 --- a/src/nft/components/collection/CollectionStats.tsx +++ b/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' diff --git a/src/nft/components/collection/MarketplaceSelect.tsx b/src/nft/components/collection/MarketplaceSelect.tsx index f7cb94b8f7..b8eab41c56 100644 --- a/src/nft/components/collection/MarketplaceSelect.tsx +++ b/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' diff --git a/src/nft/components/collection/Sweep.tsx b/src/nft/components/collection/Sweep.tsx index 58e1eb59a7..c88c10efde 100644 --- a/src/nft/components/collection/Sweep.tsx +++ b/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; diff --git a/src/nft/components/common/Portal/Portal.tsx b/src/nft/components/common/Portal.tsx similarity index 100% rename from src/nft/components/common/Portal/Portal.tsx rename to src/nft/components/common/Portal.tsx diff --git a/src/nft/components/common/Portal/index.ts b/src/nft/components/common/Portal/index.ts deleted file mode 100644 index 737680d01d..0000000000 --- a/src/nft/components/common/Portal/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './Portal' diff --git a/src/nft/components/common/SortDropdown/index.ts b/src/nft/components/common/SortDropdown/index.ts deleted file mode 100644 index 51644fd964..0000000000 --- a/src/nft/components/common/SortDropdown/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './FilterSortDropdown' -export * from './SortDropdown' diff --git a/src/nft/components/common/SortDropdown/SortDropdown.tsx b/src/nft/components/common/SortDropdown/index.tsx similarity index 99% rename from src/nft/components/common/SortDropdown/SortDropdown.tsx rename to src/nft/components/common/SortDropdown/index.tsx index ce201563cd..d636f1693c 100644 --- a/src/nft/components/common/SortDropdown/SortDropdown.tsx +++ b/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, diff --git a/src/nft/components/details/AssetPriceDetails.tsx b/src/nft/components/details/AssetPriceDetails.tsx index 050b3ef9f1..6dc5ed21c4 100644 --- a/src/nft/components/details/AssetPriceDetails.tsx +++ b/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 diff --git a/src/nft/components/explore/Cells/Cells.tsx b/src/nft/components/explore/Cells/Cells.tsx index de1e3419c5..91c61ee814 100644 --- a/src/nft/components/explore/Cells/Cells.tsx +++ b/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' diff --git a/src/nft/components/explore/Table.tsx b/src/nft/components/explore/Table.tsx index 3cdb6aec9f..f72687f4d3 100644 --- a/src/nft/components/explore/Table.tsx +++ b/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' diff --git a/src/nft/components/explore/TrendingCollections.tsx b/src/nft/components/explore/TrendingCollections.tsx index 24a1c40da1..79becbef25 100644 --- a/src/nft/components/explore/TrendingCollections.tsx +++ b/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' diff --git a/src/nft/components/profile/list/Dropdown.tsx b/src/nft/components/profile/list/Dropdown.tsx index 40dc4e8859..83e052876c 100644 --- a/src/nft/components/profile/list/Dropdown.tsx +++ b/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; diff --git a/src/nft/components/profile/list/ListPage.tsx b/src/nft/components/profile/list/ListPage.tsx index 03086a94c0..2436a75d3f 100644 --- a/src/nft/components/profile/list/ListPage.tsx +++ b/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' diff --git a/src/nft/components/profile/list/MarketplaceRow.tsx b/src/nft/components/profile/list/MarketplaceRow.tsx index 98858cc93b..ab1b3e4598 100644 --- a/src/nft/components/profile/list/MarketplaceRow.tsx +++ b/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' diff --git a/src/nft/components/profile/list/Modal/BelowFloorWarningModal.tsx b/src/nft/components/profile/list/Modal/BelowFloorWarningModal.tsx index 5c8bd77255..e72377ad7d 100644 --- a/src/nft/components/profile/list/Modal/BelowFloorWarningModal.tsx +++ b/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)` diff --git a/src/nft/components/profile/list/Modal/ContentRow.tsx b/src/nft/components/profile/list/Modal/ContentRow.tsx index 239d5f370a..434a10bb7e 100644 --- a/src/nft/components/profile/list/Modal/ContentRow.tsx +++ b/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 }>` diff --git a/src/nft/components/profile/list/Modal/ListModal.tsx b/src/nft/components/profile/list/Modal/ListModal.tsx index 7ab67e2138..4975162bc5 100644 --- a/src/nft/components/profile/list/Modal/ListModal.tsx +++ b/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' diff --git a/src/nft/components/profile/list/Modal/ListModalSection.tsx b/src/nft/components/profile/list/Modal/ListModalSection.tsx index 6c8ba33fca..d388315cb9 100644 --- a/src/nft/components/profile/list/Modal/ListModalSection.tsx +++ b/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' diff --git a/src/nft/components/profile/list/Modal/SuccessScreen.tsx b/src/nft/components/profile/list/Modal/SuccessScreen.tsx index e2194a80be..0c0fc75cd4 100644 --- a/src/nft/components/profile/list/Modal/SuccessScreen.tsx +++ b/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' diff --git a/src/nft/components/profile/list/NFTListRow.tsx b/src/nft/components/profile/list/NFTListRow.tsx index 853d9e01cd..40d90921de 100644 --- a/src/nft/components/profile/list/NFTListRow.tsx +++ b/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' diff --git a/src/nft/components/profile/list/RoyaltyTooltip.tsx b/src/nft/components/profile/list/RoyaltyTooltip.tsx index e0e6b6a22c..d842e455af 100644 --- a/src/nft/components/profile/list/RoyaltyTooltip.tsx +++ b/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; diff --git a/src/nft/components/profile/list/SelectMarketplacesDropdown.tsx b/src/nft/components/profile/list/SelectMarketplacesDropdown.tsx index cb97ec8ebb..f5c842f610 100644 --- a/src/nft/components/profile/list/SelectMarketplacesDropdown.tsx +++ b/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)` diff --git a/src/nft/components/profile/list/utils.ts b/src/nft/components/profile/list/utils.ts index f55307f838..872d966438 100644 --- a/src/nft/components/profile/list/utils.ts +++ b/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' diff --git a/src/nft/components/profile/view/EmptyWalletContent.tsx b/src/nft/components/profile/view/EmptyWalletContent.tsx index 146d311b79..32b8e5e452 100644 --- a/src/nft/components/profile/view/EmptyWalletContent.tsx +++ b/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' diff --git a/src/nft/components/profile/view/FilterSidebar.tsx b/src/nft/components/profile/view/FilterSidebar.tsx index e8c2fbf829..b97f25b55f 100644 --- a/src/nft/components/profile/view/FilterSidebar.tsx +++ b/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' diff --git a/src/nft/components/profile/view/ProfilePage.tsx b/src/nft/components/profile/view/ProfilePage.tsx index 13c624dff7..aaf40f4cb7 100644 --- a/src/nft/components/profile/view/ProfilePage.tsx +++ b/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' diff --git a/src/nft/hooks/index.ts b/src/nft/hooks/index.ts index e763c89a84..fb60fd9e40 100644 --- a/src/nft/hooks/index.ts +++ b/src/nft/hooks/index.ts @@ -1,19 +1,22 @@ -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' diff --git a/src/nft/hooks/useMarketplaceSelect.ts b/src/nft/hooks/useMarketplaceSelect.ts deleted file mode 100644 index 1c73685c2d..0000000000 --- a/src/nft/hooks/useMarketplaceSelect.ts +++ /dev/null @@ -1,24 +0,0 @@ -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()( - 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' } - ) -) diff --git a/src/nft/hooks/useNFTSelect.ts b/src/nft/hooks/useNFTSelect.ts deleted file mode 100644 index 15f176ea60..0000000000 --- a/src/nft/hooks/useNFTSelect.ts +++ /dev/null @@ -1,52 +0,0 @@ -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()( - 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' } - ) -) diff --git a/src/nft/hooks/useSelectAsset.ts b/src/nft/hooks/useSelectAsset.ts deleted file mode 100644 index 235e1c8b73..0000000000 --- a/src/nft/hooks/useSelectAsset.ts +++ /dev/null @@ -1,37 +0,0 @@ -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()( - 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: [] })), - })) -) diff --git a/src/nft/hooks/useSweep.ts b/src/nft/hooks/useSweep.ts deleted file mode 100644 index 1d874f0e90..0000000000 --- a/src/nft/hooks/useSweep.ts +++ /dev/null @@ -1,37 +0,0 @@ -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()( - 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' } - ) -) diff --git a/src/nft/pages/collection/index.tsx b/src/nft/pages/collection/index.tsx index 758131da64..c82fae2ee1 100644 --- a/src/nft/pages/collection/index.tsx +++ b/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' diff --git a/src/nft/pages/profile/profile.tsx b/src/nft/pages/profile/profile.tsx index 54be475273..13d45bc9e8 100644 --- a/src/nft/pages/profile/profile.tsx +++ b/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' diff --git a/src/nft/queries/genie/CollectionPreviewFetcher.ts b/src/nft/queries/genie/CollectionPreviewFetcher.ts deleted file mode 100644 index 466082557d..0000000000 --- a/src/nft/queries/genie/CollectionPreviewFetcher.ts +++ /dev/null @@ -1,32 +0,0 @@ -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, - }, - ] -} diff --git a/src/nft/queries/genie/RouteFetcher.ts b/src/nft/queries/genie/RouteFetcher.ts deleted file mode 100644 index a540eb85c2..0000000000 --- a/src/nft/queries/genie/RouteFetcher.ts +++ /dev/null @@ -1,70 +0,0 @@ -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 => { - 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, - }, - } -} diff --git a/src/nft/queries/genie/index.ts b/src/nft/queries/genie/index.ts index fc4221fda1..ff16ef5bad 100644 --- a/src/nft/queries/genie/index.ts +++ b/src/nft/queries/genie/index.ts @@ -1,2 +1 @@ -export * from './CollectionPreviewFetcher' -export * from './RouteFetcher' +export { CollectionRewardsFetcher } from './GetAirdorpMerkle' diff --git a/src/nft/queries/index.ts b/src/nft/queries/index.ts deleted file mode 100644 index 0d6a08e506..0000000000 --- a/src/nft/queries/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export * from './genie' -export * from './looksRare' -export * from './openSea' -export * from './x2y2' diff --git a/src/nft/queries/looksRare/index.ts b/src/nft/queries/looksRare/index.ts index 9e63d1eb77..b6faa4634d 100644 --- a/src/nft/queries/looksRare/index.ts +++ b/src/nft/queries/looksRare/index.ts @@ -1,4 +1,2 @@ -export * from './constants' -export * from './createLooksRareOrder' -export * from './looksRareNonceFetcher' -export * from './looksRareRewardsFetcher' +export { createLooksRareOrder } from './createLooksRareOrder' +export { looksRareNonceFetcher } from './looksRareNonceFetcher' diff --git a/src/nft/queries/looksRare/looksRareRewardsFetcher.ts b/src/nft/queries/looksRare/looksRareRewardsFetcher.ts deleted file mode 100644 index 9acffc0086..0000000000 --- a/src/nft/queries/looksRare/looksRareRewardsFetcher.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { LooksRareRewardsData } from '../../types' - -const looksRareApiAddress = 'https://api.looksrare.org/api/v1' - -export const looksRareRewardsFetcher = async (address: any): Promise => { - 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 -} diff --git a/src/nft/queries/openSea/index.ts b/src/nft/queries/openSea/index.ts index 74c1babd0d..c058d8f3b4 100644 --- a/src/nft/queries/openSea/index.ts +++ b/src/nft/queries/openSea/index.ts @@ -1,3 +1,2 @@ -export * from './constants' -export * from './OSCollectionsFetcher' -export * from './PostOpenSeaSellOrder' +export { OSCollectionsFetcher } from './OSCollectionsFetcher' +export { PostOpenSeaSellOrder } from './PostOpenSeaSellOrder' diff --git a/src/nft/queries/x2y2/index.ts b/src/nft/queries/x2y2/index.ts index 8655c2e25a..1e3a85137d 100644 --- a/src/nft/queries/x2y2/index.ts +++ b/src/nft/queries/x2y2/index.ts @@ -27,7 +27,7 @@ export const newX2Y2Order = async (payload: OrderPayload): Promise => { } } -export const getOrderId = async (collectionAddress: string, tokenId: string): Promise => { +export const getX2Y2OrderId = async (collectionAddress: string, tokenId: string): Promise => { const url = `${process.env.REACT_APP_TEMP_API_URL}/nft/getX2Y2OrderId?collectionAddress=${collectionAddress}&tokenId=${tokenId}` const r = await fetch(url, { method: 'GET', diff --git a/src/nft/types/checkout/checkout.ts b/src/nft/types/checkout/checkout.ts deleted file mode 100644 index fcea3d64c2..0000000000 --- a/src/nft/types/checkout/checkout.ts +++ /dev/null @@ -1,100 +0,0 @@ -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', -} diff --git a/src/nft/types/checkout/index.ts b/src/nft/types/checkout/index.ts index 1b77a49458..d5ddb491c6 100644 --- a/src/nft/types/checkout/index.ts +++ b/src/nft/types/checkout/index.ts @@ -1 +1,100 @@ -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', +} diff --git a/src/nft/types/collection/collection.ts b/src/nft/types/collection/collection.ts deleted file mode 100644 index 2533f35815..0000000000 --- a/src/nft/types/collection/collection.ts +++ /dev/null @@ -1,106 +0,0 @@ -import { NftActivityType, NftStandard, OrderStatus } from 'graphql/data/__generated__/types-and-hooks' - -import { Markets, Rarity, TokenType } from '../common' -export interface AssetPayload { - filters: { - traits?: Record - address: string - currentEthPrice?: { - $gte?: number - $lte?: number - } - numTraits?: { traitCount: string }[] - name?: string - searchText?: string - notForSale?: boolean - tokenId?: string - } - fields?: Record - 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 -} diff --git a/src/nft/types/collection/index.ts b/src/nft/types/collection/index.ts index b9959d9f39..300cc0fbf8 100644 --- a/src/nft/types/collection/index.ts +++ b/src/nft/types/collection/index.ts @@ -1 +1,68 @@ -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 +} diff --git a/src/nft/types/common/common.ts b/src/nft/types/common/common.ts deleted file mode 100644 index 5514e7681c..0000000000 --- a/src/nft/types/common/common.ts +++ /dev/null @@ -1,195 +0,0 @@ -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 - 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', -} diff --git a/src/nft/types/common/index.ts b/src/nft/types/common/index.ts index 89a3196b12..5f275b27b3 100644 --- a/src/nft/types/common/index.ts +++ b/src/nft/types/common/index.ts @@ -1 +1,129 @@ -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 + 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', +} diff --git a/src/nft/types/discover/discover.ts b/src/nft/types/discover/discover.ts deleted file mode 100644 index 98cbe2103d..0000000000 --- a/src/nft/types/discover/discover.ts +++ /dev/null @@ -1,82 +0,0 @@ -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 -} diff --git a/src/nft/types/discover/index.ts b/src/nft/types/discover/index.ts index 840a50ae34..1c9a374879 100644 --- a/src/nft/types/discover/index.ts +++ b/src/nft/types/discover/index.ts @@ -1 +1,55 @@ -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 +} diff --git a/src/nft/types/index.ts b/src/nft/types/index.ts index b6ebd2dbfc..aed324032a 100644 --- a/src/nft/types/index.ts +++ b/src/nft/types/index.ts @@ -1,6 +1,25 @@ -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' diff --git a/src/nft/types/navbar/index.ts b/src/nft/types/navbar/index.ts deleted file mode 100644 index 06c22c60c5..0000000000 --- a/src/nft/types/navbar/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './navbar' diff --git a/src/nft/types/navbar/navbar.ts b/src/nft/types/navbar/navbar.ts deleted file mode 100644 index da6f063324..0000000000 --- a/src/nft/types/navbar/navbar.ts +++ /dev/null @@ -1,5 +0,0 @@ -export interface LooksRareRewardsData { - address: string - cumulativeLooksAmount: string - cumulativeLooksProof: string[] -} diff --git a/src/nft/types/sell/index.ts b/src/nft/types/sell/index.ts index 9e80fb7083..b9e9b7220f 100644 --- a/src/nft/types/sell/index.ts +++ b/src/nft/types/sell/index.ts @@ -1 +1,113 @@ -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 +} + +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 +} + +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, +} diff --git a/src/nft/types/sell/sell.ts b/src/nft/types/sell/sell.ts deleted file mode 100644 index b9e9b7220f..0000000000 --- a/src/nft/types/sell/sell.ts +++ /dev/null @@ -1,113 +0,0 @@ -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 -} - -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 -} - -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, -} diff --git a/src/nft/utils/asset.tsx b/src/nft/utils/asset.tsx index fff3555c79..6f98f3360b 100644 --- a/src/nft/utils/asset.tsx +++ b/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}` -} diff --git a/src/nft/utils/buildSellObject.ts b/src/nft/utils/buildSellObject.ts index b45dc6f9e4..d045ee0bde 100644 --- a/src/nft/utils/buildSellObject.ts +++ b/src/nft/utils/buildSellObject.ts @@ -1,29 +1,12 @@ 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 diff --git a/src/nft/utils/currency.ts b/src/nft/utils/currency.ts index 6be4569d53..7f3cc4ff1f 100644 --- a/src/nft/utils/currency.ts +++ b/src/nft/utils/currency.ts @@ -1,4 +1,4 @@ -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, diff --git a/src/nft/utils/index.ts b/src/nft/utils/index.ts index 4ab2fd147d..eefa461951 100644 --- a/src/nft/utils/index.ts +++ b/src/nft/utils/index.ts @@ -1,18 +1,31 @@ -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' diff --git a/src/nft/utils/listNfts.ts b/src/nft/utils/listNfts.ts index 37f66b4f59..754b5327d0 100644 --- a/src/nft/utils/listNfts.ts +++ b/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), diff --git a/src/nft/utils/pooledAssets.ts b/src/nft/utils/pooledAssets.ts index 5a8d9c923b..77c8d315f4 100644 --- a/src/nft/utils/pooledAssets.ts +++ b/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 diff --git a/src/nft/utils/updatedAssets.ts b/src/nft/utils/updatedAssets.ts index ca370bd2eb..fdecfd5ac9 100644 --- a/src/nft/utils/updatedAssets.ts +++ b/src/nft/utils/updatedAssets.ts @@ -1,12 +1,12 @@ 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 } diff --git a/src/pages/AddLiquidity/index.tsx b/src/pages/AddLiquidity/index.tsx index e46315b601..ec001cae1d 100644 --- a/src/pages/AddLiquidity/index.tsx +++ b/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' diff --git a/src/pages/AddLiquidityV2/ConfirmAddModalBottom.tsx b/src/pages/AddLiquidityV2/ConfirmAddModalBottom.tsx index ff809a8fe7..0c188a045a 100644 --- a/src/pages/AddLiquidityV2/ConfirmAddModalBottom.tsx +++ b/src/pages/AddLiquidityV2/ConfirmAddModalBottom.tsx @@ -1,12 +1,12 @@ 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, diff --git a/src/pages/AddLiquidityV2/PoolPriceBar.tsx b/src/pages/AddLiquidityV2/PoolPriceBar.tsx index 2167a8fd77..69246528e9 100644 --- a/src/pages/AddLiquidityV2/PoolPriceBar.tsx +++ b/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, diff --git a/src/pages/AddLiquidityV2/index.tsx b/src/pages/AddLiquidityV2/index.tsx index 9659d438b4..f880ac4497 100644 --- a/src/pages/AddLiquidityV2/index.tsx +++ b/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' diff --git a/src/pages/CreateProposal/ProposalActionSelector.tsx b/src/pages/CreateProposal/ProposalActionSelector.tsx index bd5433f230..9ea06f8e45 100644 --- a/src/pages/CreateProposal/ProposalActionSelector.tsx +++ b/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', diff --git a/src/pages/CreateProposal/ProposalSubmissionModal.tsx b/src/pages/CreateProposal/ProposalSubmissionModal.tsx index fa7d47cc5a..b1522bdc65 100644 --- a/src/pages/CreateProposal/ProposalSubmissionModal.tsx +++ b/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 = ({ diff --git a/src/pages/CreateProposal/index.tsx b/src/pages/CreateProposal/index.tsx index 031b1ced5b..2ac283542d 100644 --- a/src/pages/CreateProposal/index.tsx +++ b/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' diff --git a/src/pages/MigrateV2/MigrateV2Pair.tsx b/src/pages/MigrateV2/MigrateV2Pair.tsx index 52cdb457fb..456795c19f 100644 --- a/src/pages/MigrateV2/MigrateV2Pair.tsx +++ b/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' diff --git a/src/pages/MigrateV2/index.tsx b/src/pages/MigrateV2/index.tsx index 62342e85af..060d6492d3 100644 --- a/src/pages/MigrateV2/index.tsx +++ b/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 }) { diff --git a/src/pages/NotFound/index.tsx b/src/pages/NotFound/index.tsx index da8c701aa5..27b5851768 100644 --- a/src/pages/NotFound/index.tsx +++ b/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' diff --git a/src/pages/Pool/CTACards.tsx b/src/pages/Pool/CTACards.tsx index 3f6429cd39..eb0d5b5a2a 100644 --- a/src/pages/Pool/CTACards.tsx +++ b/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; diff --git a/src/pages/Pool/PositionPage.tsx b/src/pages/Pool/PositionPage.tsx index f5bbc55353..2f7254226e 100644 --- a/src/pages/Pool/PositionPage.tsx +++ b/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' diff --git a/src/pages/Pool/index.tsx b/src/pages/Pool/index.tsx index 4766f377af..0a1e4ff29a 100644 --- a/src/pages/Pool/index.tsx +++ b/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' diff --git a/src/pages/Pool/v2.tsx b/src/pages/Pool/v2.tsx index 33f68c62b5..6f5a85e0de 100644 --- a/src/pages/Pool/v2.tsx +++ b/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; diff --git a/src/pages/PoolDetails/PoolDetailsHeader.tsx b/src/pages/PoolDetails/PoolDetailsHeader.tsx index 861b3ef3eb..158134ad53 100644 --- a/src/pages/PoolDetails/PoolDetailsHeader.tsx +++ b/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' diff --git a/src/pages/PoolFinder/index.tsx b/src/pages/PoolFinder/index.tsx index 95af58ff9b..f6dbbb67c0 100644 --- a/src/pages/PoolFinder/index.tsx +++ b/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' diff --git a/src/pages/RemoveLiquidity/V3.tsx b/src/pages/RemoveLiquidity/V3.tsx index b005a304ab..eb7c3895ec 100644 --- a/src/pages/RemoveLiquidity/V3.tsx +++ b/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' diff --git a/src/pages/RemoveLiquidity/index.tsx b/src/pages/RemoveLiquidity/index.tsx index a160c82037..f4c0358562 100644 --- a/src/pages/RemoveLiquidity/index.tsx +++ b/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' diff --git a/src/pages/Swap/TaxTooltipBody.tsx b/src/pages/Swap/TaxTooltipBody.tsx index 207b1de038..7906d88803 100644 --- a/src/pages/Swap/TaxTooltipBody.tsx +++ b/src/pages/Swap/TaxTooltipBody.tsx @@ -1,6 +1,6 @@ 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%; diff --git a/src/pages/Swap/UniswapXOptIn.tsx b/src/pages/Swap/UniswapXOptIn.tsx index a96502540f..4d2b548a05 100644 --- a/src/pages/Swap/UniswapXOptIn.tsx +++ b/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 { diff --git a/src/pages/Swap/index.tsx b/src/pages/Swap/index.tsx index bda2feb3c4..6e408a9a04 100644 --- a/src/pages/Swap/index.tsx +++ b/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' diff --git a/src/pages/Tokens/index.tsx b/src/pages/Tokens/index.tsx index 0f169b38ee..91496edbf5 100644 --- a/src/pages/Tokens/index.tsx +++ b/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%; diff --git a/src/pages/Vote/Landing.tsx b/src/pages/Vote/Landing.tsx index 7038aa0710..4f259e61b0 100644 --- a/src/pages/Vote/Landing.tsx +++ b/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' diff --git a/src/pages/Vote/VotePage.tsx b/src/pages/Vote/VotePage.tsx index 44815af806..cbe079a415 100644 --- a/src/pages/Vote/VotePage.tsx +++ b/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' diff --git a/src/test-utils/render.tsx b/src/test-utils/render.tsx index 58feb5f976..3dfa36c65c 100644 --- a/src/test-utils/render.tsx +++ b/src/test-utils/render.tsx @@ -60,6 +60,8 @@ const customRenderHook = ( 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 } diff --git a/src/theme/components/SegmentedControl.tsx b/src/theme/components/SegmentedControl.tsx index dc9819b72e..48a520b864 100644 --- a/src/theme/components/SegmentedControl.tsx +++ b/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; diff --git a/src/theme/components/index.tsx b/src/theme/components/index.tsx index ce1b0b8172..0323f45380 100644 --- a/src/theme/components/index.tsx +++ b/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 } -export function ExternalLinkIcon({ - target = '_blank', - href, - rel = 'noopener noreferrer', - ...rest -}: Omit, 'as' | 'ref' | 'onClick'> & { href: string }) { - return ( - - - - ) -} - 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}; ` diff --git a/src/theme/index.tsx b/src/theme/index.tsx index 12120affdc..0243eeb4df 100644 --- a/src/theme/index.tsx +++ b/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, diff --git a/src/utils/index.ts b/src/utils/index.ts index 431ab57ff9..c828d6f2cb 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -1,3 +1,3 @@ -export * from './addresses' -export * from './escapeRegExp' -export * from './getContract' +export { isAddress, shortenAddress } from './addresses' +export { escapeRegExp } from './escapeRegExp' +export { getContract } from './getContract'