fix: banner issue on mobile

pancakeswap · Nov 13, 2024 · 89d1a1a · 89d1a1a
1 parent 9ab5cba
commit 89d1a1a
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 71 deletions.
diff --git a/apps/web/src/pages/swap/twap.tsx b/apps/web/src/pages/swap/twap.tsx
@@ -1,7 +1,16 @@
 import dynamic from 'next/dynamic'
 import { CHAIN_IDS } from 'utils/wagmi'
+import Page from 'views/Page'
 import SwapLayout from 'views/Swap/SwapLayout'
 
+const Layout: React.FC<React.PropsWithChildren> = ({ children }) => {
+  return (
+    <Page showExternalLink={false} showHelpLink={false}>
+      {children}
+    </Page>
+  )
+}
+
 const TwapAndLimitSwap = dynamic(() => import('views/Swap/Twap/TwapSwap'), { ssr: false })
 
 const TwapPage = () => (
@@ -12,5 +21,6 @@ const TwapPage = () => (
 
 TwapPage.chains = CHAIN_IDS
 TwapPage.screen = true
+TwapPage.Layout = Layout
 
 export default TwapPage
diff --git a/apps/web/src/views/Swap/Twap/TwapSwap.tsx b/apps/web/src/views/Swap/Twap/TwapSwap.tsx
@@ -9,7 +9,6 @@ import { useRouter } from 'next/router'
 import { useContext, useEffect, useState } from 'react'
 import { Field } from 'state/swap/actions'
 import { useDefaultsFromURLSearch, useSingleTokenSwapInfo, useSwapState } from 'state/swap/hooks'
-import Page from '../../Page'
 import PriceChartContainer from '../components/Chart/PriceChartContainer'
 // import { SwapSelection } from '../components/SwapSelection'
 import { SwapSelection } from '../../SwapSimplify/V4Swap/SwapSelectionTab'
@@ -21,7 +20,7 @@ import { OrderHistory, TWAPPanel } from './Twap'
 export default function TwapAndLimitSwap({ limit }: { limit?: boolean }) {
   const { query } = useRouter()
   const { t } = useTranslation()
-  const { isDesktop } = useMatchBreakpoints()
+  const { isDesktop, isMobile } = useMatchBreakpoints()
   const { isChartExpanded, isChartDisplayed, setIsChartDisplayed, setIsChartExpanded, isChartSupported } =
     useContext(SwapFeaturesContext)
   const [isSwapHotTokenDisplay, setIsSwapHotTokenDisplay] = useSwapHotTokenDisplay()
@@ -61,77 +60,77 @@ export default function TwapAndLimitSwap({ limit }: { limit?: boolean }) {
   useDefaultsFromURLSearch()
 
   return (
-    <Page
-      removePadding={isChartExpanded}
-      hideFooterOnDesktop={isChartExpanded}
-      showHelpLink={false}
-      showExternalLink={false}
+    <Flex
+      width={['328px', '100%']}
+      height={isMobile ? 'auto' : '100%'}
+      justifyContent="center"
+      position="relative"
+      alignItems="flex-start"
+      mb={isMobile ? '16px' : '0'}
     >
-      <Flex width={['328px', '100%']} height="100%" justifyContent="center" position="relative" alignItems="flex-start">
-        {isDesktop && (
-          <Flex width={isChartExpanded ? '100%' : '50%'} maxWidth="928px" flexDirection="column" style={{ gap: 20 }}>
-            {isChartSupported && (
-              <PriceChartContainer
-                inputCurrencyId={inputCurrencyId}
-                inputCurrency={currencies[Field.INPUT]}
-                outputCurrencyId={outputCurrencyId}
-                outputCurrency={currencies[Field.OUTPUT]}
-                isChartExpanded={isChartExpanded}
-                setIsChartExpanded={setIsChartExpanded}
-                isChartDisplayed={isChartDisplayed}
-                currentSwapPrice={singleTokenPrice}
-                isFullWidthContainer
-              />
-            )}
-            <OrderHistory />
-          </Flex>
-        )}
-        {!isDesktop && isChartSupported && (
-          <BottomDrawer
-            content={
-              <PriceChartContainer
-                inputCurrencyId={inputCurrencyId}
-                inputCurrency={currencies[Field.INPUT]}
-                outputCurrencyId={outputCurrencyId}
-                outputCurrency={currencies[Field.OUTPUT]}
-                isChartExpanded={isChartExpanded}
-                setIsChartExpanded={setIsChartExpanded}
-                isChartDisplayed={isChartDisplayed}
-                currentSwapPrice={singleTokenPrice}
-                isFullWidthContainer
-                isMobile
-              />
-            }
-            isOpen={isChartDisplayed}
-            setIsOpen={(isOpen) => setIsChartDisplayed?.(isOpen)}
-          />
-        )}
-        <Flex flexDirection="column">
-          <StyledSwapContainer $isChartExpanded={isChartExpanded}>
-            <StyledInputCurrencyWrapper mt={isChartExpanded ? '24px' : '0'}>
-              <SwapSelection swapType={limit ? SwapType.LIMIT : SwapType.TWAP} style={{ marginBottom: 16 }} />
-              <AppBody>
-                <TWAPPanel limit={limit} />
-              </AppBody>
-              <Flex flexDirection={!isDesktop ? 'column-reverse' : 'column'}>
-                {limit && (
-                  <AutoRow gap="4px" justifyContent="center">
-                    <Text fontSize="14px" color="textSubtle">
-                      {t('Orders missing? Check out:')}
-                    </Text>
-                    <Link href="/limit-orders" passHref prefetch={false}>
-                      <StyledLink fontSize="14px" color="primary">
-                        {t('Limit V2 (deprecated)')}
-                      </StyledLink>
-                    </Link>
-                  </AutoRow>
-                )}
-                {!isDesktop && <OrderHistory />}
-              </Flex>
-            </StyledInputCurrencyWrapper>
-          </StyledSwapContainer>
+      {isDesktop && (
+        <Flex width={isChartExpanded ? '100%' : '50%'} maxWidth="928px" flexDirection="column" style={{ gap: 20 }}>
+          {isChartSupported && (
+            <PriceChartContainer
+              inputCurrencyId={inputCurrencyId}
+              inputCurrency={currencies[Field.INPUT]}
+              outputCurrencyId={outputCurrencyId}
+              outputCurrency={currencies[Field.OUTPUT]}
+              isChartExpanded={isChartExpanded}
+              setIsChartExpanded={setIsChartExpanded}
+              isChartDisplayed={isChartDisplayed}
+              currentSwapPrice={singleTokenPrice}
+              isFullWidthContainer
+            />
+          )}
+          <OrderHistory />
         </Flex>
+      )}
+      {!isDesktop && isChartSupported && (
+        <BottomDrawer
+          content={
+            <PriceChartContainer
+              inputCurrencyId={inputCurrencyId}
+              inputCurrency={currencies[Field.INPUT]}
+              outputCurrencyId={outputCurrencyId}
+              outputCurrency={currencies[Field.OUTPUT]}
+              isChartExpanded={isChartExpanded}
+              setIsChartExpanded={setIsChartExpanded}
+              isChartDisplayed={isChartDisplayed}
+              currentSwapPrice={singleTokenPrice}
+              isFullWidthContainer
+              isMobile
+            />
+          }
+          isOpen={isChartDisplayed}
+          setIsOpen={(isOpen) => setIsChartDisplayed?.(isOpen)}
+        />
+      )}
+      <Flex flexDirection="column">
+        <StyledSwapContainer $isChartExpanded={isChartExpanded}>
+          <StyledInputCurrencyWrapper mt={isChartExpanded ? '24px' : '0'}>
+            <SwapSelection swapType={limit ? SwapType.LIMIT : SwapType.TWAP} style={{ marginBottom: 16 }} />
+            <AppBody>
+              <TWAPPanel limit={limit} />
+            </AppBody>
+            <Flex flexDirection={!isDesktop ? 'column-reverse' : 'column'}>
+              {limit && (
+                <AutoRow gap="4px" justifyContent="center">
+                  <Text fontSize="14px" color="textSubtle">
+                    {t('Orders missing? Check out:')}
+                  </Text>
+                  <Link href="/limit-orders" passHref prefetch={false}>
+                    <StyledLink fontSize="14px" color="primary">
+                      {t('Limit V2 (deprecated)')}
+                    </StyledLink>
+                  </Link>
+                </AutoRow>
+              )}
+              {!isDesktop && <OrderHistory />}
+            </Flex>
+          </StyledInputCurrencyWrapper>
+        </StyledSwapContainer>
       </Flex>
-    </Page>
+    </Flex>
   )
 }