From 4424fb07fd81792dea52eb31bf26409ed291501b Mon Sep 17 00:00:00 2001 From: totop716 Date: Tue, 25 Jul 2023 15:38:36 -0400 Subject: [PATCH] fix breakpoints --- components/Adshares/Adshares.tsx | 2 +- components/CustomTable/CustomTable.tsx | 6 +++--- components/FarmCard/FarmCard.tsx | 2 +- components/FarmCard/FarmCardDetails.tsx | 2 +- components/Header/index.tsx | 8 +++++--- components/PairsTable/PairsTable.tsx | 4 +++- components/PositionCard/PositionCard.tsx | 2 +- components/StakerEventCard/EternalFarmCard.tsx | 2 +- components/StakerMyStakes/FarmCard.tsx | 2 +- components/StakerMyStakes/FarmStakeButtons.tsx | 2 +- components/StakerMyStakes/GammaFarmCard.tsx | 2 +- components/StakerMyStakes/GammaFarmCardDetails.tsx | 2 +- components/StakerMyStakes/index.tsx | 2 +- components/SyrupCard/SyrupCard.tsx | 2 +- components/SyrupCard/SyrupCardDetails.tsx | 2 +- components/SyrupCard/SyrupTimerLabel.tsx | 2 +- components/TransactionsTable/TransactionsTable.tsx | 2 +- components/pages/analytics/AnalyticsHeader.tsx | 2 +- components/pages/dragons/DragonsSyrup.tsx | 2 +- components/pages/farms/FarmRewards.tsx | 2 +- components/pages/farms/FarmsList.tsx | 2 +- .../pages/farms/GammaFarmsPage/GammaFarmCard/index.tsx | 2 +- .../farms/GammaFarmsPage/GammaFarmCardDetails/index.tsx | 2 +- components/pages/farms/V3/Farms.tsx | 2 +- components/pages/swap/LiquidityPoolRow.tsx | 2 +- components/pages/swap/LiquidityPools.tsx | 2 +- components/pages/swap/SwapProTransactions.tsx | 2 +- pages/dragons/index.tsx | 2 +- pages/farm/[version]/index.tsx | 2 +- pages/pools/[version]/index.tsx | 2 +- pages/swap/index.tsx | 2 +- 31 files changed, 39 insertions(+), 35 deletions(-) diff --git a/components/Adshares/Adshares.tsx b/components/Adshares/Adshares.tsx index 9f662c294..ed1116777 100644 --- a/components/Adshares/Adshares.tsx +++ b/components/Adshares/Adshares.tsx @@ -3,7 +3,7 @@ import { useMediaQuery, useTheme } from '@mui/material'; const AdsSlider: React.FC = () => { const { breakpoints } = useTheme(); - const isMobile = useMediaQuery(breakpoints.down('xs')); + const isMobile = useMediaQuery(breakpoints.down('sm')); return (
diff --git a/components/CustomTable/CustomTable.tsx b/components/CustomTable/CustomTable.tsx index b519ce577..c1c820ddf 100644 --- a/components/CustomTable/CustomTable.tsx +++ b/components/CustomTable/CustomTable.tsx @@ -1,4 +1,4 @@ -import React, { ReactChild } from 'react'; +import React from 'react'; import { Box, useMediaQuery, @@ -18,7 +18,7 @@ export interface CustomTableProps { data: any; defaultOrderBy?: T; defaultOrder?: 'asc' | 'desc'; - mobileHTML: (item: any, index: number) => ReactChild; + mobileHTML: (item: any, index: number) => React.ReactNode; desktopHTML: ( item: any, index: number, @@ -39,7 +39,7 @@ const CustomTable: React.FC> = ({ desktopHTML, }) => { const theme = useTheme(); - const mobileWindowSize = useMediaQuery(theme.breakpoints.down('xs')); + const mobileWindowSize = useMediaQuery(theme.breakpoints.down('sm')); return ( diff --git a/components/FarmCard/FarmCard.tsx b/components/FarmCard/FarmCard.tsx index 0bcee374c..591b94ac9 100755 --- a/components/FarmCard/FarmCard.tsx +++ b/components/FarmCard/FarmCard.tsx @@ -25,7 +25,7 @@ const FarmCard: React.FC<{ }> = ({ stakingInfo, stakingAPY, isLPFarm }) => { const { t } = useTranslation(); const { breakpoints } = useTheme(); - const isMobile = useMediaQuery(breakpoints.down('xs')); + const isMobile = useMediaQuery(breakpoints.down('sm')); const [isExpandCard, setExpandCard] = useState(false); const lpStakingInfo = stakingInfo as StakingInfo; diff --git a/components/FarmCard/FarmCardDetails.tsx b/components/FarmCard/FarmCardDetails.tsx index 5cbaa4f07..c7d800bd3 100644 --- a/components/FarmCard/FarmCardDetails.tsx +++ b/components/FarmCard/FarmCardDetails.tsx @@ -42,7 +42,7 @@ const FarmCardDetails: React.FC<{ }> = ({ stakingInfo, stakingAPY, isLPFarm }) => { const { t } = useTranslation(); const { breakpoints } = useTheme(); - const isMobile = useMediaQuery(breakpoints.down('xs')); + const isMobile = useMediaQuery(breakpoints.down('sm')); const [stakeAmount, setStakeAmount] = useState(''); const [attemptStaking, setAttemptStaking] = useState(false); const [attemptUnstaking, setAttemptUnstaking] = useState(false); diff --git a/components/Header/index.tsx b/components/Header/index.tsx index cb9acf415..6b3ccfb4d 100644 --- a/components/Header/index.tsx +++ b/components/Header/index.tsx @@ -41,7 +41,9 @@ const newTransactionsFirst = (a: TransactionDetails, b: TransactionDetails) => { const Header: React.FC = () => { const { t } = useTranslation(); const router = useRouter(); - const { pathname } = router; + const routerPathArr = router.pathname.split('/'); + const pathname = + '/' + (routerPathArr.length > 1 ? router.pathname.split('/')[1] : ''); const { account } = useActiveWeb3React(); const isSupportedNetwork = useIsSupportedNetwork(); const { ENSName } = useENSName(account ?? undefined); @@ -61,8 +63,8 @@ const Header: React.FC = () => { const confirmed = sortedRecentTransactions .filter((tx: any) => tx.receipt) .map((tx: any) => tx.hash); - const tabletWindowSize = useMediaQuery(theme.breakpoints.down('sm')); - const mobileWindowSize = useMediaQuery(theme.breakpoints.down('xs')); + const tabletWindowSize = useMediaQuery(theme.breakpoints.down('md')); + const mobileWindowSize = useMediaQuery(theme.breakpoints.down('sm')); const toggleWalletModal = useWalletModalToggle(); const toggleNetworkSelectionModal = useNetworkSelectionModalToggle(); const deviceWidth = useDeviceWidth(); diff --git a/components/PairsTable/PairsTable.tsx b/components/PairsTable/PairsTable.tsx index 6f25ab000..ccf38f47e 100644 --- a/components/PairsTable/PairsTable.tsx +++ b/components/PairsTable/PairsTable.tsx @@ -357,7 +357,9 @@ const PairTable: React.FC = ({ const totalSpecificRows = [ { html: ( - {pair.isV3 ? 'V3' : 'V2'} + + {pair.isV3 ? 'V3' : 'V2'} + ), }, ]; diff --git a/components/PositionCard/PositionCard.tsx b/components/PositionCard/PositionCard.tsx index f2ed55948..aebd791e2 100755 --- a/components/PositionCard/PositionCard.tsx +++ b/components/PositionCard/PositionCard.tsx @@ -105,7 +105,7 @@ export const MinimalPositionCard: React.FC = ({

⭐️ - {' '} + {t('addLiquidityDesc')}

)} diff --git a/components/StakerEventCard/EternalFarmCard.tsx b/components/StakerEventCard/EternalFarmCard.tsx index 648685d03..99b79e138 100644 --- a/components/StakerEventCard/EternalFarmCard.tsx +++ b/components/StakerEventCard/EternalFarmCard.tsx @@ -102,7 +102,7 @@ export function EternalFarmCard({ : undefined; const { breakpoints } = useTheme(); - const isMobile = useMediaQuery(breakpoints.down('xs')); + const isMobile = useMediaQuery(breakpoints.down('sm')); return ( = ({ }) => { const { t } = useTranslation(); const { breakpoints } = useTheme(); - const isMobile = useMediaQuery(breakpoints.down('xs')); + const isMobile = useMediaQuery(breakpoints.down('sm')); const [expanded, setExpanded] = useState(false); const currency = unwrappedToken(syrup.token); diff --git a/components/SyrupCard/SyrupCardDetails.tsx b/components/SyrupCard/SyrupCardDetails.tsx index aca759f30..76b19e626 100755 --- a/components/SyrupCard/SyrupCardDetails.tsx +++ b/components/SyrupCard/SyrupCardDetails.tsx @@ -31,7 +31,7 @@ const SyrupCardDetails: React.FC<{ syrup: SyrupInfo; dQUICKAPY: string }> = ({ const syrupCurrency = unwrappedToken(syrup.token); const { breakpoints } = useTheme(); const { t } = useTranslation(); - const isMobile = useMediaQuery(breakpoints.down('xs')); + const isMobile = useMediaQuery(breakpoints.down('sm')); const [attemptingClaim, setAttemptingClaim] = useState(false); const [attemptingUnstake, setAttemptingUnstake] = useState(false); const [openStakeModal, setOpenStakeModal] = useState(false); diff --git a/components/SyrupCard/SyrupTimerLabel.tsx b/components/SyrupCard/SyrupTimerLabel.tsx index b7caf3439..bd10f2dc2 100644 --- a/components/SyrupCard/SyrupTimerLabel.tsx +++ b/components/SyrupCard/SyrupTimerLabel.tsx @@ -9,7 +9,7 @@ const SyrupTimerLabel: React.FC<{ exactEnd: number; isEnded: boolean }> = ({ const { t } = useTranslation(); const [currentTime, setCurrentTime] = useState(Math.floor(Date.now() / 1000)); const { breakpoints } = useTheme(); - const isMobile = useMediaQuery(breakpoints.down('xs')); + const isMobile = useMediaQuery(breakpoints.down('sm')); const MINUTE = 60; const HOUR = MINUTE * 60; diff --git a/components/TransactionsTable/TransactionsTable.tsx b/components/TransactionsTable/TransactionsTable.tsx index a2076e64d..723a1566f 100644 --- a/components/TransactionsTable/TransactionsTable.tsx +++ b/components/TransactionsTable/TransactionsTable.tsx @@ -87,7 +87,7 @@ const TransactionsTable: React.FC = ({ data }) => { ]; const { chainId } = useActiveWeb3React(); const { breakpoints } = useTheme(); - const isMobile = useMediaQuery(breakpoints.down('xs')); + const isMobile = useMediaQuery(breakpoints.down('sm')); const getTxString = (txn: any) => { const messageData = { token0Symbol: txn.pair.token1.symbol, diff --git a/components/pages/analytics/AnalyticsHeader.tsx b/components/pages/analytics/AnalyticsHeader.tsx index 3f06033b0..8155f4877 100755 --- a/components/pages/analytics/AnalyticsHeader.tsx +++ b/components/pages/analytics/AnalyticsHeader.tsx @@ -28,7 +28,7 @@ const AnalyticsHeader: React.FC = ({ const router = useRouter(); const { t } = useTranslation(); const { breakpoints } = useTheme(); - const isMobile = useMediaQuery(breakpoints.down('xs')); + const isMobile = useMediaQuery(breakpoints.down('sm')); const chainIdToUse = chainId ?? ChainId.MATIC; const config = getConfig(chainIdToUse); const v3 = config['v3']; diff --git a/components/pages/dragons/DragonsSyrup.tsx b/components/pages/dragons/DragonsSyrup.tsx index 67faddba3..d8051fb7e 100644 --- a/components/pages/dragons/DragonsSyrup.tsx +++ b/components/pages/dragons/DragonsSyrup.tsx @@ -37,7 +37,7 @@ const EARNED_COLUMN = 4; const DragonsSyrup: React.FC = () => { const { t } = useTranslation(); const { breakpoints } = useTheme(); - const isMobile = useMediaQuery(breakpoints.down('xs')); + const isMobile = useMediaQuery(breakpoints.down('sm')); const [isEndedSyrup, setIsEndedSyrup] = useState(false); const [pageIndex, setPageIndex] = useState(0); const [sortBy, setSortBy] = useState(0); diff --git a/components/pages/farms/FarmRewards.tsx b/components/pages/farms/FarmRewards.tsx index e3a15d866..c2deb5de2 100644 --- a/components/pages/farms/FarmRewards.tsx +++ b/components/pages/farms/FarmRewards.tsx @@ -19,7 +19,7 @@ const FarmRewards: React.FC<{ bulkPairs: any }> = ({ bulkPairs }) => { const { breakpoints } = useTheme(); const { chainId } = useActiveWeb3React(); const defaultChainId = chainId ?? ChainId.MATIC; - const isMobile = useMediaQuery(breakpoints.down('xs')); + const isMobile = useMediaQuery(breakpoints.down('sm')); const farmData = useUSDRewardsandFees( currentTab === GlobalConst.v2FarmTab.LPFARM, diff --git a/components/pages/farms/FarmsList.tsx b/components/pages/farms/FarmsList.tsx index e53d434d0..ec3039c88 100644 --- a/components/pages/farms/FarmsList.tsx +++ b/components/pages/farms/FarmsList.tsx @@ -67,7 +67,7 @@ const FarmsList: React.FC = ({ bulkPairs }) => { ? (router.query.sortBy as string) : POOL_COLUMN; - const isMobile = useMediaQuery(breakpoints.down('xs')); + const isMobile = useMediaQuery(breakpoints.down('sm')); const { chainId } = useActiveWeb3React(); const [pageIndex, setPageIndex] = useState(0); const [farmSearch, setFarmSearch] = useState(''); diff --git a/components/pages/farms/GammaFarmsPage/GammaFarmCard/index.tsx b/components/pages/farms/GammaFarmsPage/GammaFarmCard/index.tsx index f03dfa61c..493f9c6c5 100644 --- a/components/pages/farms/GammaFarmsPage/GammaFarmCard/index.tsx +++ b/components/pages/farms/GammaFarmsPage/GammaFarmCard/index.tsx @@ -23,7 +23,7 @@ const GammaFarmCard: React.FC<{ : []; const [showDetails, setShowDetails] = useState(false); const { breakpoints } = useTheme(); - const isMobile = useMediaQuery(breakpoints.down('xs')); + const isMobile = useMediaQuery(breakpoints.down('sm')); const farmAPR = rewardData && rewardData['apr'] ? Number(rewardData['apr']) : 0; diff --git a/components/pages/farms/GammaFarmsPage/GammaFarmCardDetails/index.tsx b/components/pages/farms/GammaFarmsPage/GammaFarmCardDetails/index.tsx index 483d6353c..d022af1cf 100644 --- a/components/pages/farms/GammaFarmsPage/GammaFarmCardDetails/index.tsx +++ b/components/pages/farms/GammaFarmsPage/GammaFarmCardDetails/index.tsx @@ -48,7 +48,7 @@ const GammaFarmCardDetails: React.FC<{ const [attemptUnstaking, setAttemptUnstaking] = useState(false); const [attemptClaiming, setAttemptClaiming] = useState(false); const { breakpoints } = useTheme(); - const isMobile = useMediaQuery(breakpoints.down('xs')); + const isMobile = useMediaQuery(breakpoints.down('sm')); const tokenMap = useSelectedTokenList(); diff --git a/components/pages/farms/V3/Farms.tsx b/components/pages/farms/V3/Farms.tsx index 94f4507b5..53ef49de4 100644 --- a/components/pages/farms/V3/Farms.tsx +++ b/components/pages/farms/V3/Farms.tsx @@ -23,7 +23,7 @@ export default function Farms() { ? (router.query.farmStatus as string) : 'active'; const { breakpoints } = useTheme(); - const isMobile = useMediaQuery(breakpoints.down('xs')); + const isMobile = useMediaQuery(breakpoints.down('sm')); const allGammaFarms = useMemo(() => { return chainId diff --git a/components/pages/swap/LiquidityPoolRow.tsx b/components/pages/swap/LiquidityPoolRow.tsx index ce9af43fe..fed59b07c 100644 --- a/components/pages/swap/LiquidityPoolRow.tsx +++ b/components/pages/swap/LiquidityPoolRow.tsx @@ -12,7 +12,7 @@ const LiquidityPoolRow: React.FC<{ }> = ({ pair }) => { const { breakpoints } = useTheme(); const daysCurrentYear = getDaysCurrentYear(); - const isMobile = useMediaQuery(breakpoints.down('xs')); + const isMobile = useMediaQuery(breakpoints.down('sm')); const isLg = useMediaQuery(breakpoints.only('lg')); const { t } = useTranslation(); diff --git a/components/pages/swap/LiquidityPools.tsx b/components/pages/swap/LiquidityPools.tsx index 6bc54c90c..8e5bf05f4 100644 --- a/components/pages/swap/LiquidityPools.tsx +++ b/components/pages/swap/LiquidityPools.tsx @@ -13,7 +13,7 @@ const LiquidityPools: React.FC<{ token2: Token; }> = ({ token1, token2 }) => { const { breakpoints } = useTheme(); - const isMobile = useMediaQuery(breakpoints.down('xs')); + const isMobile = useMediaQuery(breakpoints.down('sm')); const isLg = useMediaQuery(breakpoints.only('lg')); const [liquidityPoolClosed, setLiquidityPoolClosed] = useState(isMobile); diff --git a/components/pages/swap/SwapProTransactions.tsx b/components/pages/swap/SwapProTransactions.tsx index e8361eb39..49424d0f3 100644 --- a/components/pages/swap/SwapProTransactions.tsx +++ b/components/pages/swap/SwapProTransactions.tsx @@ -17,7 +17,7 @@ const SwapProTransactions: React.FC = ({ }) => { const { t } = useTranslation(); const theme = useTheme(); - const mobileWindowSize = useMediaQuery(theme.breakpoints.down('xs')); + const mobileWindowSize = useMediaQuery(theme.breakpoints.down('sm')); const { chainId } = useActiveWeb3React(); const [symbol1, setSymbol1] = useState(''); const [symbol2, setSymbol2] = useState(''); diff --git a/pages/dragons/index.tsx b/pages/dragons/index.tsx index 4ee86f84c..e71c30e7c 100755 --- a/pages/dragons/index.tsx +++ b/pages/dragons/index.tsx @@ -15,7 +15,7 @@ import { Adshares } from 'components'; const DragonPage = (_props: InferGetStaticPropsType) => { const { breakpoints } = useTheme(); - const isMobile = useMediaQuery(breakpoints.down('xs')); + const isMobile = useMediaQuery(breakpoints.down('sm')); const { t } = useTranslation(); //showing old dragons lair until we're ready to deploy diff --git a/pages/farm/[version]/index.tsx b/pages/farm/[version]/index.tsx index 789027e5a..32511e7bb 100755 --- a/pages/farm/[version]/index.tsx +++ b/pages/farm/[version]/index.tsx @@ -40,7 +40,7 @@ const FarmPage = (_props: InferGetStaticPropsType) => { const cntFarms = useDefaultCNTFarmList(chainIdToUse); const dualFarms = useDefaultDualFarmList(); const { breakpoints } = useTheme(); - const isMobile = useMediaQuery(breakpoints.down('xs')); + const isMobile = useMediaQuery(breakpoints.down('sm')); const OTHER_FARM_LINK = process.env.NEXT_PUBLIC_OTHER_LP_CREATE_A_FARM_LINK; const pairLists = useMemo(() => { diff --git a/pages/pools/[version]/index.tsx b/pages/pools/[version]/index.tsx index 5aa9b26e2..31edf604d 100755 --- a/pages/pools/[version]/index.tsx +++ b/pages/pools/[version]/index.tsx @@ -27,7 +27,7 @@ const PoolsPage = (_props: InferGetStaticPropsType) => { const v2 = config['v2']; const { breakpoints } = useTheme(); - const isMobile = useMediaQuery(breakpoints.down('xs')); + const isMobile = useMediaQuery(breakpoints.down('sm')); const helpURL = process.env.NEXT_PUBLIC_HELP_URL; const allGammaPairs = chainId ? GammaPairs[chainId] : {}; diff --git a/pages/swap/index.tsx b/pages/swap/index.tsx index a0676f7fa..3b6c333d2 100755 --- a/pages/swap/index.tsx +++ b/pages/swap/index.tsx @@ -31,7 +31,7 @@ const SwapPage = (_props: InferGetStaticPropsType) => { const token2 = wrappedCurrency(currencies[Field.OUTPUT], chainIdToUse); const { breakpoints } = useTheme(); - const isMobile = useMediaQuery(breakpoints.down('xs')); + const isMobile = useMediaQuery(breakpoints.down('sm')); const token1V3 = wrappedCurrencyV3(currenciesV3[Field.INPUT], chainIdToUse); const token2V3 = wrappedCurrencyV3(currenciesV3[Field.OUTPUT], chainIdToUse);