From ae721e0beb9121e79b4811a6749954a945f424e7 Mon Sep 17 00:00:00 2001 From: iamoskvin Date: Fri, 10 May 2024 22:00:42 +0300 Subject: [PATCH] split page files --- src/pages/Pool/PositionDetails.tsx | 115 ++++++++++ src/pages/Pool/index.tsx | 324 +---------------------------- src/pages/Pool/styled.tsx | 228 +++++++++++++++++++- src/pages/PoolDetails/index.tsx | 123 +---------- 4 files changed, 348 insertions(+), 442 deletions(-) create mode 100644 src/pages/Pool/PositionDetails.tsx diff --git a/src/pages/Pool/PositionDetails.tsx b/src/pages/Pool/PositionDetails.tsx new file mode 100644 index 00000000..48c52707 --- /dev/null +++ b/src/pages/Pool/PositionDetails.tsx @@ -0,0 +1,115 @@ +import { Trans } from '@lingui/macro' +import { useAccountDetails } from "hooks/starknet-react" +import { useV3PositionsFromTokenId } from "hooks/useV3Positions" +import { useMemo } from "react" +import { useUserHideClosedPositions } from "state/user/hooks" +import { FlattenedPositions } from 'hooks/useV3Positions' +import styled, { css, useTheme } from 'styled-components' +import { ButtonPrimary, ButtonText } from "components/Button" +import { PositionsLoadingPlaceholder } from "." +import { ThemedText } from 'theme/components' +import { Inbox } from 'react-feather' +import PositionList from 'components/PositionList' + +const ErrorContainer = styled.div` + align-items: center; + display: flex; + flex-direction: column; + justify-content: center; + margin: auto; + min-height: 25vh; + @media (max-width: ${({ theme }) => `${theme.breakpoint.md}px`}) { + padding: 0px 52px; + } + + @media (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) { + padding: 0px 52px; + } +` + +const IconStyle = css` + width: 48px; + height: 48px; + margin-bottom: 0.5rem; +` + +const InboxIcon = styled(Inbox)` + ${IconStyle} +` + + +export function PositionDetails(props: any) { + const { address } = useAccountDetails() + const { tokenIds, showConnectAWallet, toggleWalletDrawer, token0, token1, fee } = props + const [userHideClosedPositions, setUserHideClosedPositions] = useUserHideClosedPositions() + const { positions, loading: positionsLoading } = useV3PositionsFromTokenId(tokenIds, address) + let filteredPositions = positions + if (token0 && token1) { + filteredPositions = positions?.filter(pos => { + //@ts-ignore + if (pos?.token0.toString(16) === token0.slice(2) && pos?.token1.toString(16) === token1.slice(2) && pos?.fee === fee) { + return true + } + //@ts-ignore + if (pos?.token0.toString(16) === token1.slice(2) && pos?.token1.toString(16) === token0.slice(2) && pos?.fee === fee) { + return true + } + return false + }) + } + const theme = useTheme() + const [openPositions, closedPositions] = filteredPositions?.reduce<[FlattenedPositions[], FlattenedPositions[]]>( + (acc, p) => { + acc[!parseInt(p.liquidity.toString()) ? 1 : 0].push(p) + return acc + }, + [[], []] + ) ?? [[], []] + + const userSelectedPositionSet = useMemo( + () => [...openPositions, ...(userHideClosedPositions ? [] : closedPositions)], + [closedPositions, openPositions, userHideClosedPositions] + ) + + return ( + <> + <> + {positionsLoading ? ( + + ) : userSelectedPositionSet && userSelectedPositionSet.length > 0 ? ( + + ) : ( + + + +
+ Your active liquidity positions will appear here. +
+ + {!showConnectAWallet && closedPositions.length > 0 && ( + setUserHideClosedPositions(!userHideClosedPositions)} + > + Show closed positions + + )} + {showConnectAWallet && ( + + Connect wallet + + )} + + )} + + {/* {userSelectedPositionSet.length ? null : } */} + + ) +} \ No newline at end of file diff --git a/src/pages/Pool/index.tsx b/src/pages/Pool/index.tsx index 1c0c0428..e7cfa697 100644 --- a/src/pages/Pool/index.tsx +++ b/src/pages/Pool/index.tsx @@ -1,23 +1,17 @@ import { Trans } from '@lingui/macro' import { useAccountDetails } from 'hooks/starknet-react' import { useEffect, useMemo, useState } from 'react' -import { AlertTriangle, BookOpen, ChevronDown, ChevronsRight, Inbox, Layers } from 'react-feather' -import Switch from 'react-switch' import { Link } from 'react-router-dom' import styled, { css, useTheme } from 'styled-components' -import { Box as RebassBox } from 'rebass' import { useToggleAccountDrawer } from 'components/AccountDrawer' -import { ButtonGray, ButtonPrimary, ButtonText } from 'components/Button' import { AutoColumn } from 'components/Column' -import PositionList from 'components/PositionList' import Row, { AutoRow, RowBetween, RowFixed } from 'components/Row' import { SwitchLocaleLink } from 'components/SwitchLocaleLink' import { isSupportedChain } from 'constants/chains' // import { useFilterPossiblyMaliciousPositions } from 'hooks/useFilterPossiblyMaliciousPositions' -import { FlattenedPositions, useTokenIds, useV3PositionsFromTokenId } from 'hooks/useV3Positions' -import { useUserHideClosedPositions } from 'state/user/hooks' +import { useTokenIds } from 'hooks/useV3Positions' import { ThemedText } from 'theme/components' -import { LoadingRows } from './styled' +import { ButtonRow, ErrorContainer, LoadingRows, MainContentWrapper, NetworkIcon, OnlyRewardedSwitcher, OnlyRewardedSwitcherContainer, OnlyRewardedSwitcherLabel, PageHeader, PageWrapper, Panel, PanelTopLight, PanelWrapper, ResponsiveButtonPrimary, ResponsiveButtonTabs, TitleRow } from './styled' import { getAllPools } from 'api/PoolsData' import Pools from 'components/Pools' import { formattedNum, formattedPercent, get2DayPercentChange, getPercentChange } from 'utils/dashboard' @@ -28,242 +22,9 @@ import { ETH_ADDRESS } from 'constants/tokens' import { getClient } from 'apollo/client' import { ChainId } from '@vnaysn/jediswap-sdk-core' import { useDefaultActiveTokens } from 'hooks/Tokens' +import { PositionDetails } from './PositionDetails' -const PageWrapper = styled(AutoColumn)` - padding: 0px 8px 0px; - max-width: 1020px; - width: 100%; - - @media (max-width: ${({ theme }) => `${theme.breakpoint.md}px`}) { - padding-top: 20px; - } -` -const TitleRow = styled(RowBetween)` - color: ${({ theme }) => theme.neutral2}; - @media (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) { - flex-wrap: wrap; - gap: 12px; - width: 100%; - padding-left: 12px; - } -` - -const PositionsText = styled.div` - color: ${({ theme }) => theme.jediWhite}; - font-family: DM Sans; - font-size: 20px; - font-style: normal; - font-weight: 500; - line-height: 100%; /* 20px */ -` -const ButtonRow = styled(AutoRow)`` - -const ErrorContainer = styled.div` - align-items: center; - display: flex; - flex-direction: column; - justify-content: center; - margin: auto; - min-height: 25vh; - @media (max-width: ${({ theme }) => `${theme.breakpoint.md}px`}) { - padding: 0px 52px; - } - - @media (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) { - padding: 0px 52px; - } -` - -const IconStyle = css` - width: 48px; - height: 48px; - margin-bottom: 0.5rem; -` - -const NetworkIcon = styled(AlertTriangle)` - ${IconStyle} -` - -const InboxIcon = styled(Inbox)` - ${IconStyle} -` - -const ResponsiveButtonPrimary = styled(ButtonPrimary)` - font-family: 'DM Sans'; - border-radius: 8px; - font-size: 16px; - padding: 6px 8px; - width: 175px; - margin-left: auto; - height: 38px; - @media (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) { - width: 132px; - } -` - -const ResponsiveButtonTabs = styled(ButtonPrimary) <{ secondary: boolean; active: boolean }>` - font-family: 'DM Sans'; - border-radius: 4px; - font-size: 16px; - padding: 6px 8px; - background: ${({ theme, active }) => (!active ? 'transparent' : theme.jediWhite)}; - box-shadow: 0px 3.079px 13.856px 0px rgba(154, 146, 210, 0.3) inset, - 0px 0.77px 30.791px 0px rgba(227, 222, 255, 0.2) inset; - color: ${({ theme, active }) => (!active ? theme.jediWhite : theme.jediPink)}; - width: 121px; - margin-left: 0; - height: 38px; - &:hover { - background: ${({ theme, active }) => (!active ? 'transparent' : theme.jediWhite)}; - color: ${({ theme, active }) => (!active ? theme.jediWhite : theme.jediPink)}; - } - &:active { - background: ${({ theme, active }) => (!active ? 'transparent' : theme.jediWhite)}; - color: ${({ theme, active }) => (!active ? theme.jediWhite : theme.jediPink)}; - } - &:focus { - background: ${({ theme, active }) => (!active ? 'transparent' : theme.jediWhite)}; - color: ${({ theme, active }) => (!active ? theme.jediWhite : theme.jediPink)}; - } - @media (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) { - width: 50%; - margin-bottom: 10px; - } -` - -const MainContentWrapper = styled.main<{ isWalletConnected?: boolean; filteredPositions?: any }>` - background-color: ${({ theme, isWalletConnected, filteredPositions }) => - isWalletConnected && filteredPositions ? 'rgba(196, 196, 196, 0.01)' : 'transparent'}; - border-radius: 8px; - box-shadow: ${({ isWalletConnected, filteredPositions }) => - isWalletConnected && filteredPositions - ? `0px 0.76977px 30.79088px 0px rgba(227, 222, 255, 0.2) inset, - 0px 3.07909px 13.8559px 0px rgba(154, 146, 210, 0.3) inset, - 0px 75.43767px 76.9772px -36.94907px rgba(202, 172, 255, 0.3) inset, - 0px -63.12132px 52.3445px -49.26542px rgba(96, 68, 144, 0.3) inset` - : ''}; - @media (max-width: ${({ theme }) => `${theme.breakpoint.md}px`}) { - } -` - -const PositionWrapper = styled.div`` -const PanelWrapper = styled.div` - display: flex; - gap: 12px; - width: 100%; - align-items: start; - @media screen and (max-width: 1024px) { - flex-direction: column; - } -` -const panelPseudo = css` - :after { - content: ''; - position: absolute; - left: 0; - right: 0; - height: 10px; - } - - @media only screen and (min-width: 40em) { - :after { - content: unset; - } - } -` - -const Panel = styled(RebassBox) <{ - hover?: boolean - background?: boolean - area?: boolean - grouped?: boolean - rounded?: boolean - last?: boolean -}>` - position: relative; - // background-color: ${({ theme }) => theme.advancedBG}; - border-radius: 8px; - padding: 1.25rem; - width: 100%; - height: 100%; - overflow: hidden; - display: flex; - flex-direction: column; - justify-content: flex-start; - background: rgba(196, 196, 196, 0.01); - box-shadow: 0px 0.77px 30.791px 0px rgba(227, 222, 255, 0.2) inset, - 0px 3.079px 13.856px 0px rgba(154, 146, 210, 0.3) inset, - 0px 75.438px 76.977px -36.949px rgba(202, 172, 255, 0.3) inset, - 0px -63.121px 52.345px -49.265px rgba(96, 68, 144, 0.3) inset; - - :hover { - cursor: ${({ hover }) => hover && 'pointer'}; - border: ${({ hover, theme }) => hover && '1px solid' + theme.bg5}; - } - - ${(props) => props.background && `background-color: ${props.theme.advancedBG};`} - - ${(props) => (props.area ? `grid-area: ${props.area};` : null)} - - ${(props) => - props.grouped && - css` - @media only screen and (min-width: 40em) { - &:first-of-type { - border-radius: 20px 20px 0 0; - } - &:last-of-type { - border-radius: 0 0 20px 20px; - } - } - `} - - ${(props) => - props.rounded && - css` - border-radius: 8px; - @media only screen and (min-width: 40em) { - border-radius: 10px; - } - `}; - - ${(props) => !props.last && panelPseudo} -` -const PanelTopLight = styled(Panel)` - box-shadow: 0px 0.77px 30.791px 0px rgba(227, 222, 255, 0.2) inset, - 0px 3.079px 13.856px 0px rgba(154, 146, 210, 0.3) inset, - 0px 75.438px 76.977px -36.949px rgba(202, 172, 255, 0.3) inset, - 0px -63.121px 52.345px -49.265px rgba(96, 68, 144, 0.3) inset, 0px 5.388px 8.467px -3.079px #fff inset, - 0px 30.021px 43.107px -27.712px rgba(255, 255, 255, 0.5) inset; -` - -const PageHeader = styled.div` - color: ${({ theme }) => theme.jediWhite}; - font-family: "Avenir LT Std"; - font-size: 24px; - font-weight: 750; - margin-bottom: 20px; -` - -const OnlyRewardedSwitcherContainer = styled.div` -display: flex; -align-items: center; -gap: 16px; -margin: 15px 0; -` - -const OnlyRewardedSwitcherLabel = styled.div` -font-family: Avenir LT Std; -font-size: 18px; -font-weight: 750; -line-height: 18px; -text-align: left; -` - -const OnlyRewardedSwitcher = styled(Switch)`` - - -function PositionsLoadingPlaceholder() { +export function PositionsLoadingPlaceholder() { return (
@@ -314,82 +75,6 @@ function WrongNetworkCard() { ) } -export function PositionDetails(props: any) { - const { address } = useAccountDetails() - const { tokenIds, showConnectAWallet, toggleWalletDrawer, token0, token1, fee } = props - const [userHideClosedPositions, setUserHideClosedPositions] = useUserHideClosedPositions() - const { positions, loading: positionsLoading } = useV3PositionsFromTokenId(tokenIds, address) - let filteredPositions = positions - if (token0 && token1) { - filteredPositions = positions?.filter(pos => { - //@ts-ignore - if (pos?.token0.toString(16) === token0.slice(2) && pos?.token1.toString(16) === token1.slice(2) && pos?.fee === fee) { - return true - } - //@ts-ignore - if (pos?.token0.toString(16) === token1.slice(2) && pos?.token1.toString(16) === token0.slice(2) && pos?.fee === fee) { - return true - } - return false - }) - } - const theme = useTheme() - const [openPositions, closedPositions] = filteredPositions?.reduce<[FlattenedPositions[], FlattenedPositions[]]>( - (acc, p) => { - acc[!parseInt(p.liquidity.toString()) ? 1 : 0].push(p) - return acc - }, - [[], []] - ) ?? [[], []] - - const userSelectedPositionSet = useMemo( - () => [...openPositions, ...(userHideClosedPositions ? [] : closedPositions)], - [closedPositions, openPositions, userHideClosedPositions] - ) - - return ( - <> - <> - {positionsLoading ? ( - - ) : userSelectedPositionSet && userSelectedPositionSet.length > 0 ? ( - - ) : ( - - - -
- Your active liquidity positions will appear here. -
- - {!showConnectAWallet && closedPositions.length > 0 && ( - setUserHideClosedPositions(!userHideClosedPositions)} - > - Show closed positions - - )} - {showConnectAWallet && ( - - Connect wallet - - )} - - )} - - {/* {userSelectedPositionSet.length ? null : } */} - - ) -} - export default function Pool() { const [poolsData, setpoolsData] = useState([]) const { address, chainId } = useAccountDetails() @@ -567,7 +252,6 @@ export default function Pool() { - {/* My Positions */} setShowMyPositions(false)} style={{fontSize: "0.875rem"}}> Top Pools diff --git a/src/pages/Pool/styled.tsx b/src/pages/Pool/styled.tsx index ff6571dd..7a430056 100644 --- a/src/pages/Pool/styled.tsx +++ b/src/pages/Pool/styled.tsx @@ -1,7 +1,13 @@ import { Text } from 'rebass'; -import styled from 'styled-components'; +import styled, { css } from 'styled-components'; +import { Box as RebassBox } from 'rebass' +import Switch from 'react-switch' import { LoadingRows as BaseLoadingRows } from 'components/Loader/styled'; +import { AutoColumn } from 'components/Column'; +import { AutoRow, RowBetween } from 'components/Row'; +import { AlertTriangle } from 'react-feather'; +import { ButtonPrimary } from 'components/Button'; export const Wrapper = styled.div` position: relative; @@ -73,3 +79,223 @@ export const LoadingRows = styled(BaseLoadingRows)` margin-bottom: 2em; } `; + +export const PageWrapper = styled(AutoColumn)` + padding: 0px 8px 0px; + max-width: 1020px; + width: 100%; + + @media (max-width: ${({ theme }) => `${theme.breakpoint.md}px`}) { + padding-top: 20px; + } +` + +export const TitleRow = styled(RowBetween)` + color: ${({ theme }) => theme.neutral2}; + @media (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) { + flex-wrap: wrap; + gap: 12px; + width: 100%; + padding-left: 12px; + } +` + +export const ButtonRow = styled(AutoRow)`` + +export const ErrorContainer = styled.div` + align-items: center; + display: flex; + flex-direction: column; + justify-content: center; + margin: auto; + min-height: 25vh; + @media (max-width: ${({ theme }) => `${theme.breakpoint.md}px`}) { + padding: 0px 52px; + } + + @media (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) { + padding: 0px 52px; + } +` + +const IconStyle = css` + width: 48px; + height: 48px; + margin-bottom: 0.5rem; +` + +export const NetworkIcon = styled(AlertTriangle)` + ${IconStyle} +` + +export const ResponsiveButtonPrimary = styled(ButtonPrimary)` + font-family: 'DM Sans'; + border-radius: 8px; + font-size: 16px; + padding: 6px 8px; + width: 175px; + margin-left: auto; + height: 38px; + @media (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) { + width: 132px; + } +` + +export const ResponsiveButtonTabs = styled(ButtonPrimary) <{ secondary: boolean; active: boolean }>` + font-family: 'DM Sans'; + border-radius: 4px; + font-size: 16px; + padding: 6px 8px; + background: ${({ theme, active }) => (!active ? 'transparent' : theme.jediWhite)}; + box-shadow: 0px 3.079px 13.856px 0px rgba(154, 146, 210, 0.3) inset, + 0px 0.77px 30.791px 0px rgba(227, 222, 255, 0.2) inset; + color: ${({ theme, active }) => (!active ? theme.jediWhite : theme.jediPink)}; + width: 121px; + margin-left: 0; + height: 38px; + &:hover { + background: ${({ theme, active }) => (!active ? 'transparent' : theme.jediWhite)}; + color: ${({ theme, active }) => (!active ? theme.jediWhite : theme.jediPink)}; + } + &:active { + background: ${({ theme, active }) => (!active ? 'transparent' : theme.jediWhite)}; + color: ${({ theme, active }) => (!active ? theme.jediWhite : theme.jediPink)}; + } + &:focus { + background: ${({ theme, active }) => (!active ? 'transparent' : theme.jediWhite)}; + color: ${({ theme, active }) => (!active ? theme.jediWhite : theme.jediPink)}; + } + @media (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) { + width: 50%; + margin-bottom: 10px; + } +` +export const MainContentWrapper = styled.main<{ isWalletConnected?: boolean; filteredPositions?: any }>` + background-color: ${({ theme, isWalletConnected, filteredPositions }) => + isWalletConnected && filteredPositions ? 'rgba(196, 196, 196, 0.01)' : 'transparent'}; + border-radius: 8px; + box-shadow: ${({ isWalletConnected, filteredPositions }) => + isWalletConnected && filteredPositions + ? `0px 0.76977px 30.79088px 0px rgba(227, 222, 255, 0.2) inset, + 0px 3.07909px 13.8559px 0px rgba(154, 146, 210, 0.3) inset, + 0px 75.43767px 76.9772px -36.94907px rgba(202, 172, 255, 0.3) inset, + 0px -63.12132px 52.3445px -49.26542px rgba(96, 68, 144, 0.3) inset` + : ''}; + @media (max-width: ${({ theme }) => `${theme.breakpoint.md}px`}) { + } +` + +export const PanelWrapper = styled.div` + display: flex; + gap: 12px; + width: 100%; + align-items: start; + @media screen and (max-width: 1024px) { + flex-direction: column; + } +` +const panelPseudo = css` + :after { + content: ''; + position: absolute; + left: 0; + right: 0; + height: 10px; + } + + @media only screen and (min-width: 40em) { + :after { + content: unset; + } + } +` + +export const Panel = styled(RebassBox) <{ + hover?: boolean + background?: boolean + area?: boolean + grouped?: boolean + rounded?: boolean + last?: boolean +}>` + position: relative; + // background-color: ${({ theme }) => theme.advancedBG}; + border-radius: 8px; + padding: 1.25rem; + width: 100%; + height: 100%; + overflow: hidden; + display: flex; + flex-direction: column; + justify-content: flex-start; + background: rgba(196, 196, 196, 0.01); + box-shadow: 0px 0.77px 30.791px 0px rgba(227, 222, 255, 0.2) inset, + 0px 3.079px 13.856px 0px rgba(154, 146, 210, 0.3) inset, + 0px 75.438px 76.977px -36.949px rgba(202, 172, 255, 0.3) inset, + 0px -63.121px 52.345px -49.265px rgba(96, 68, 144, 0.3) inset; + + :hover { + cursor: ${({ hover }) => hover && 'pointer'}; + border: ${({ hover, theme }) => hover && '1px solid' + theme.bg5}; + } + + ${(props) => props.background && `background-color: ${props.theme.advancedBG};`} + + ${(props) => (props.area ? `grid-area: ${props.area};` : null)} + + ${(props) => + props.grouped && + css` + @media only screen and (min-width: 40em) { + &:first-of-type { + border-radius: 20px 20px 0 0; + } + &:last-of-type { + border-radius: 0 0 20px 20px; + } + } + `} + + ${(props) => + props.rounded && + css` + border-radius: 8px; + @media only screen and (min-width: 40em) { + border-radius: 10px; + } + `}; + + ${(props) => !props.last && panelPseudo} +` +export const PanelTopLight = styled(Panel)` + box-shadow: 0px 0.77px 30.791px 0px rgba(227, 222, 255, 0.2) inset, + 0px 3.079px 13.856px 0px rgba(154, 146, 210, 0.3) inset, + 0px 75.438px 76.977px -36.949px rgba(202, 172, 255, 0.3) inset, + 0px -63.121px 52.345px -49.265px rgba(96, 68, 144, 0.3) inset, 0px 5.388px 8.467px -3.079px #fff inset, + 0px 30.021px 43.107px -27.712px rgba(255, 255, 255, 0.5) inset; +` + +export const PageHeader = styled.div` + color: ${({ theme }) => theme.jediWhite}; + font-family: "Avenir LT Std"; + font-size: 24px; + font-weight: 750; + margin-bottom: 20px; +` + +export const OnlyRewardedSwitcherContainer = styled.div` +display: flex; +align-items: center; +gap: 16px; +margin: 15px 0; +` + +export const OnlyRewardedSwitcherLabel = styled.div` +font-family: Avenir LT Std; +font-size: 18px; +font-weight: 750; +line-height: 18px; +text-align: left; +` + +export const OnlyRewardedSwitcher = styled(Switch)`` \ No newline at end of file diff --git a/src/pages/PoolDetails/index.tsx b/src/pages/PoolDetails/index.tsx index 0ff80f5d..4274c5ce 100644 --- a/src/pages/PoolDetails/index.tsx +++ b/src/pages/PoolDetails/index.tsx @@ -1,5 +1,4 @@ import styled, { css, useTheme } from 'styled-components' -import { Box as RebassBox } from 'rebass' import { useEffect, useMemo, useState } from 'react' import { Link, useParams } from 'react-router-dom' import { validateAndParseAddress } from 'starknet' @@ -15,119 +14,13 @@ import DoubleTokenLogo from '../../components/DoubleLogo' import FeeBadge from 'components/FeeBadge' import { ButtonGray, ButtonPrimary, ButtonText } from 'components/Button' import CurrencyLogo from 'components/Logo/CurrencyLogo' -import { PositionDetails } from 'pages/Pool' +import { PositionDetails } from '../Pool/PositionDetails' import { useToggleAccountDrawer } from 'components/AccountDrawer' import { getClient } from 'apollo/client' import { ChainId } from '@vnaysn/jediswap-sdk-core' import { useTokenIds } from 'hooks/useV3Positions' +import { PageWrapper, PanelWrapper, PanelTopLight, ResponsiveButtonPrimary } from 'pages/Pool/styled' -const PageWrapper = styled(AutoColumn)` - padding: 0px 8px 0px; - max-width: 1020px; - width: 100%; - - @media (max-width: ${({ theme }) => `${theme.breakpoint.md}px`}) { - padding-top: 20px; - } -` - -const PanelWrapper = styled.div` - display: flex; - gap: 12px; - width: 100%; - align-items: start; - @media screen and (max-width: 1024px) { - flex-direction: column; - } -` -const panelPseudo = css` - :after { - content: ''; - position: absolute; - left: 0; - right: 0; - height: 10px; - } - - @media only screen and (min-width: 40em) { - :after { - content: unset; - } - } -` - -const Panel = styled(RebassBox) <{ - hover?: boolean - background?: boolean - area?: boolean - grouped?: boolean - rounded?: boolean - last?: boolean -}>` - position: relative; - // background-color: ${({ theme }) => theme.advancedBG}; - border-radius: 8px; - padding: 1.25rem; - width: 100%; - height: 100%; - overflow: hidden; - display: flex; - flex-direction: column; - justify-content: flex-start; - background: rgba(196, 196, 196, 0.01); - box-shadow: 0px 0.77px 30.791px 0px rgba(227, 222, 255, 0.2) inset, - 0px 3.079px 13.856px 0px rgba(154, 146, 210, 0.3) inset, - 0px 75.438px 76.977px -36.949px rgba(202, 172, 255, 0.3) inset, - 0px -63.121px 52.345px -49.265px rgba(96, 68, 144, 0.3) inset; - - :hover { - cursor: ${({ hover }) => hover && 'pointer'}; - border: ${({ hover, theme }) => hover && '1px solid' + theme.bg5}; - } - - ${(props) => props.background && `background-color: ${props.theme.advancedBG};`} - - ${(props) => (props.area ? `grid-area: ${props.area};` : null)} - - ${(props) => - props.grouped && - css` - @media only screen and (min-width: 40em) { - &:first-of-type { - border-radius: 20px 20px 0 0; - } - &:last-of-type { - border-radius: 0 0 20px 20px; - } - } - `} - - ${(props) => - props.rounded && - css` - border-radius: 8px; - @media only screen and (min-width: 40em) { - border-radius: 10px; - } - `}; - - ${(props) => !props.last && panelPseudo} -` -const PanelTopLight = styled(Panel)` - box-shadow: 0px 0.77px 30.791px 0px rgba(227, 222, 255, 0.2) inset, - 0px 3.079px 13.856px 0px rgba(154, 146, 210, 0.3) inset, - 0px 75.438px 76.977px -36.949px rgba(202, 172, 255, 0.3) inset, - 0px -63.121px 52.345px -49.265px rgba(96, 68, 144, 0.3) inset, 0px 5.388px 8.467px -3.079px #fff inset, - 0px 30.021px 43.107px -27.712px rgba(255, 255, 255, 0.5) inset; -` - -const PageHeader = styled.div` - color: ${({ theme }) => theme.jediWhite}; - font-family: "Avenir LT Std"; - font-size: 24px; - font-weight: 750; - margin-bottom: 20px; -` const ResponsiveButtonTabs = styled(ButtonPrimary) <{ secondary: boolean; active: boolean }>` font-family: 'DM Sans'; border-radius: 4px; @@ -164,18 +57,6 @@ const FixedPanel = styled.div` background: rgba(255, 255, 255, 0.1); cursor: pointer; ` -const ResponsiveButtonPrimary = styled(ButtonPrimary)` - font-family: 'DM Sans'; - border-radius: 8px; - font-size: 16px; - padding: 6px 8px; - width: 175px; - margin-left: auto; - height: 38px; - @media (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) { - width: 132px; - } -` export default function PoolDetails() { const { poolId } = useParams<{ poolId?: string }>()