Merge pull request #175 from jediswaplabs/debug-router

adding warning banner on the interface

src/components/NavBar/WarningBanner.tsx

@@ -0,0 +1,64 @@
+import { t, Trans } from '@lingui/macro'
+import { useOpenModal } from 'state/application/hooks'
+import { ApplicationModal } from 'state/application/reducer'
+import styled from 'styled-components'
+import { ButtonText, ThemedText } from 'theme/components'
+import { Z_INDEX } from 'theme/zIndex'
+
+export const UK_BANNER_HEIGHT = 65
+export const UK_BANNER_HEIGHT_MD = 113
+export const UK_BANNER_HEIGHT_SM = 137
+
+const BannerWrapper = styled.div`
+  position: relative;
+  display: flex;
+  background-color: #ff3257;
+  padding: 20px;
+  border-bottom: 1px solid ${({ theme }) => theme.surface3};
+  z-index: ${Z_INDEX.fixed};
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+
+  @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.md}px`}) {
+    flex-direction: column;
+  }
+`
+
+const BannerTextWrapper = styled(ThemedText.BodySecondary)`
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: white;
+  width: 100%;
+  text-align: center;
+
+  @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.md}px`}) {
+    @supports (-webkit-line-clamp: 2) {
+      white-space: initial;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+    }
+  }
+
+  @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) {
+    @supports (-webkit-line-clamp: 3) {
+      white-space: initial;
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+    }
+  }
+`
+
+export const bannerText =
+  'Warning: Deposit liquidity is currently paused in v2. No swap will route through v2 pools. We recommend you remove the liquidity from Jediswap v2.'
+
+export function WarningBanner() {
+  return (
+    <BannerWrapper>
+      <BannerTextWrapper lineHeight="24px">{bannerText}</BannerTextWrapper>
+    </BannerWrapper>
+  )
+}

src/pages/AddLiquidity/index.tsx

@@ -101,12 +101,10 @@ function AddLiquidity() {
   }>()
   const { address: account, chainId } = useAccountDetails()
   const theme = useTheme()
-  const trace = useTrace()
-
   const toggleWalletDrawer = useToggleAccountDrawer() // toggle wallet when disconnected
-  const addTransaction = useTransactionAdder()
   const positionManager = useV3NFTPositionManagerContract()
   const parsedTokenId = tokenId ? parseInt(tokenId) : undefined
+
   // check for existing position if tokenId in url
   const { position: existingPositionDetails, loading: positionLoading } = useV3PosFromTokenId(parsedTokenId)
   const hasExistingPosition = !!existingPositionDetails && !positionLoading
@@ -124,6 +122,9 @@ function AddLiquidity() {
   // mint state
   const { independentField, typedValue, startPriceTypedValue } = useV3MintState()
 
+  const [showWarning, setShowWarning] = useState(true)
+  const [mintCallData, setMintCallData] = useState<Call[]>([])
+
   const {
     pool,
     ticks,
@@ -157,8 +158,6 @@ function AddLiquidity() {
   const { onFieldAInput, onFieldBInput, onLeftRangeInput, onRightRangeInput, onStartPriceInput } =
     useV3MintActionHandlers(noLiquidity)
 
-  const [mintCallData, setMintCallData] = useState<Call[]>([])
-
   const { writeAsync, data: txData } = useContractWrite({
     calls: mintCallData,
   })
@@ -504,10 +503,12 @@ function AddLiquidity() {
           onClick={() => {
             setShowConfirm(true)
           }}
-          disabled={!isValid}
+          disabled={!isValid || showWarning}
           error={!isValid && !!parsedAmounts[Field.CURRENCY_A] && !!parsedAmounts[Field.CURRENCY_B]}
         >
-          <Text fontWeight={535}>{errorMessage ? errorMessage : <Trans>Preview</Trans>}</Text>
+          <Text fontWeight={535}>
+            {showWarning ? 'Add liquidity is paused' : errorMessage ? errorMessage : <Trans>Preview</Trans>}
+          </Text>
         </ButtonError>
       </AutoColumn>
     )

src/pages/App.tsx

@@ -18,6 +18,12 @@ import { flexRowNoWrap } from 'theme/styles'
 import { Z_INDEX } from 'theme/zIndex'
 import { RouteDefinition, routes, useRouterConfig } from './RouteDefinitions'
 import useFetchAllPairsCallback from 'hooks/useFetchAllPairs'
+import {
+  UK_BANNER_HEIGHT,
+  UK_BANNER_HEIGHT_MD,
+  UK_BANNER_HEIGHT_SM,
+  WarningBanner,
+} from 'components/NavBar/WarningBanner'
 // import Footer from 'components/Footer'
 
 const BodyWrapper = styled.div<{ bannerIsVisible?: boolean }>`
@@ -61,27 +67,31 @@ const MobileBottomBar = styled.div`
   }
 `
 
-const HeaderWrapper = styled.div<{ transparent?: boolean; bannerIsVisible?: boolean; scrollY: number }>`
+const HeaderWrapper = styled.div<{
+  transparent?: boolean
+  bannerIsVisible?: boolean
+  scrollY: number
+}>`
   ${flexRowNoWrap};
   background-color: transparent;
   border-bottom: ${({ theme }) => `1px solid ${theme.surface3}`};
   backdrop-filter: ${({ theme, transparent }) => (!transparent ? 'blur(38px)' : 'none')};
   width: 100%;
   justify-content: space-between;
   position: fixed;
-  top: 0;
+  top: ${({ bannerIsVisible }) => (bannerIsVisible ? Math.max(UK_BANNER_HEIGHT - scrollY, 0) : 0)}px;
   z-index: ${Z_INDEX.dropdown};
   transition-property: background-color;
   transition-duration: ${({ theme }) => theme.transition.duration.fast};
   transition-timing-function: linear;
   font-family: 'Avenir LT Std';
 
   @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.md}px`}) {
-    top: 0;
+    top: ${({ bannerIsVisible }) => (bannerIsVisible ? Math.max(UK_BANNER_HEIGHT_MD - scrollY, 0) : 0)}px;
   }
 
   @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) {
-    top: 0;
+    top: ${({ bannerIsVisible }) => (bannerIsVisible ? Math.max(UK_BANNER_HEIGHT_SM - scrollY, 0) : 0)}px;
   }
 `
 
@@ -93,6 +103,7 @@ export default function App() {
   const { pathname } = location
 
   const [scrollY, setScrollY] = useState(0)
+  const [showWarning, setShowWarning] = useState(true)
   const scrolledState = scrollY > 0
   const routerConfig = useRouterConfig()
 
@@ -117,7 +128,8 @@ export default function App() {
 
   return (
     <ErrorBoundary>
-      <HeaderWrapper scrollY={scrollY} transparent={isHeaderTransparent}>
+      {showWarning && <WarningBanner />}
+      <HeaderWrapper scrollY={scrollY} transparent={isHeaderTransparent} bannerIsVisible={showWarning}>
         <NavBar />
       </HeaderWrapper>
       <BodyWrapper>

src/pages/RemoveLiquidity/V3.tsx

@@ -77,6 +77,7 @@ function Remove({ tokenId }: { tokenId: number }) {
 
   // flag for receiving WETH
   const [receiveWETH, setReceiveWETH] = useState(false)
+  const [showWarning, setShowWarning] = useState(false)
   const nativeCurrency = useNativeCurrency(chainId)
   const nativeWrappedSymbol = nativeCurrency.wrapped.symbol
 
@@ -420,10 +421,16 @@ function Remove({ tokenId }: { tokenId: number }) {
                 <AutoColumn gap="md" style={{ flex: '1' }}>
                   <ButtonConfirmed
                     confirmed={false}
-                    disabled={removed || percent === 0 || !liquidityValue0}
+                    disabled={removed || percent === 0 || !liquidityValue0 || showWarning}
                     onClick={() => setShowConfirm(true)}
                   >
-                    {removed ? <Trans>Closed</Trans> : error ?? <Trans>Remove</Trans>}
+                    {showWarning ? (
+                      'Remove liquidity is paused'
+                    ) : removed ? (
+                      <Trans>Closed</Trans>
+                    ) : (
+                      error ?? <Trans>Remove</Trans>
+                    )}
                   </ButtonConfirmed>
                 </AutoColumn>
               </div>