Merge branch 'main' into 167-show-usd-value-for-tokens-in-swap-page-a…

…nd-lp-page

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jediswap/interface",
-  "version": "5.1.0",
+  "version": "5.3.0",
   "description": "Jediswap Interface",
   "homepage": ".",
   "scripts": {

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/components/Settings/TransactionDeadlineSettings/index.tsx

@@ -3,7 +3,7 @@ import Expand from 'components/Expand'
 import QuestionHelper from 'components/QuestionHelper'
 import Row from 'components/Row'
 import { Input, InputContainer } from 'components/Settings/Input'
-import { DEFAULT_DEADLINE_FROM_NOW } from 'constants/misc'
+import {DEFAULT_DEADLINE_FROM_NOW, MAX_DEADLINE_TIME_IN_SECONDS, MIN_DEADLINE_TIME_IN_SECONDS} from 'constants/misc'
 import ms from 'ms'
 import React, { useState } from 'react'
 import { useUserTransactionTTL } from 'state/user/hooks'
@@ -13,7 +13,6 @@ enum DeadlineError {
   InvalidInput = 'InvalidInput',
 }
 
-const THREE_DAYS_IN_SECONDS = ms(`3d`) / 1000
 const NUMBERS_ONLY = /^[0-9\b]+$/
 
 export default function TransactionDeadlineSettings() {
@@ -39,15 +38,15 @@ export default function TransactionDeadlineSettings() {
     setDeadlineError(false)
 
     // If the input is empty, set the deadline to the default
-    if (value.length === 0) {
+    if (!value.length) {
       setDeadline(DEFAULT_DEADLINE_FROM_NOW)
       return
     }
 
     // Parse user input and set the deadline if valid, error otherwise
     try {
       const parsed: number = Number.parseInt(value) * 60
-      if (parsed === 0 || parsed > THREE_DAYS_IN_SECONDS) {
+      if (parsed < MIN_DEADLINE_TIME_IN_SECONDS || parsed > MAX_DEADLINE_TIME_IN_SECONDS) {
         setDeadlineError(DeadlineError.InvalidInput)
       } else {
         setDeadline(parsed)
@@ -64,9 +63,9 @@ export default function TransactionDeadlineSettings() {
       testId="transaction-deadline-settings"
       header={
         <Row width="auto">
-          <ThemedText.BodySecondary>
+          <ThemedText.BodyPrimary>
             <Trans>Transaction deadline</Trans>
-          </ThemedText.BodySecondary>
+          </ThemedText.BodyPrimary>
           <QuestionHelper
             text={<Trans>Your transaction will revert if it is pending for more than this period of time.</Trans>}
           />

src/components/Settings/index.tsx

@@ -129,6 +129,7 @@ export default function SettingsTab({
       <AnimatedDropdown open={!isUniswapXTrade(trade)}>
         <ExpandColumn>
           <MaxSlippageSettings autoSlippage={autoSlippage} />
+          <TransactionDeadlineSettings />
         </ExpandColumn>
       </AnimatedDropdown>
     ),

src/components/Web3Status/index.tsx

@@ -21,6 +21,7 @@ import { BaseButton, ButtonSecondary, ButtonSize, ThemeButton } from '../Button'
 import { RowBetween } from '../Row'
 import { useStarkName } from '@starknet-react/core'
 import { ChainId } from '@vnaysn/jediswap-sdk-core'
+import StarknetIcon from 'assets/svg/starknet.svg'
 
 const FULL_BORDER_RADIUS = 9999
 
@@ -50,7 +51,7 @@ const Web3StatusConnected = styled(Web3StatusGeneric)<{
 }>`
   font-family: 'Avenir LT Std';
   background-color: ${({ theme }) => theme.surface5};
-  border: none;
+  border: 1px solid transparent;
   color: ${({ theme }) => theme.white};
   padding: 10px 24px;
 `
@@ -75,7 +76,7 @@ const NetworkContainer = styled.div`
 const NetworkSelected = styled(Web3StatusGeneric)<{}>`
   font-family: 'Avenir LT Std';
   background-color: ${({ theme }) => theme.jediNavyBlue};
-  border: none;
+  border: 1px solid transparent;
   color: ${({ theme }) => theme.white};
   margin-right: 16px;
   padding: 10px 24px;
@@ -122,7 +123,10 @@ function Web3StatusInner() {
     return (
       <NetworkContainer>
         <NetworkSelected data-testid="web3-status-connected" onClick={handleWalletDropdownClick}>
-          <Text>Starknet {chainId === ChainId.MAINNET ? 'Mainnet' : 'Goerli'}</Text>
+          <IconWrapper size={20}>
+            <img src={StarknetIcon} alt="Starknet" />
+          </IconWrapper>
+          <Text>{chainId === ChainId.MAINNET ? 'Mainnet' : 'Goerli'}</Text>
         </NetworkSelected>
         <Web3StatusConnected data-testid="web3-status-connected" onClick={handleWalletDropdownClick}>
           <StatusIcon account={address} connection={connector} size={40} />

src/constants/misc.ts

@@ -1,18 +1,21 @@
 import { Percent } from '@vnaysn/jediswap-sdk-core'
 import JSBI from 'jsbi'
+import ms from "ms";
 
 export const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000'
 
 // TODO(WEB-1984): Convert the deadline to minutes and remove unecessary conversions from
 // seconds to minutes in the codebase.
-// 10 minutes, denominated in seconds
-export const DEFAULT_DEADLINE_FROM_NOW = 60 * 10
-export const L2_DEADLINE_FROM_NOW = 60 * 5
+// 60 minutes, denominated in seconds
+export const DEFAULT_DEADLINE_FROM_NOW = 5 * 60
 
 // transaction popup dismissal amounts
 export const DEFAULT_TXN_DISMISS_MS = 10000
 export const L2_TXN_DISMISS_MS = 5000
 
+export const MAX_DEADLINE_TIME_IN_SECONDS = ms(`3d`) / 1000
+export const MIN_DEADLINE_TIME_IN_SECONDS = ms(`5m`) / 1000
+
 export const BIG_INT_ZERO = JSBI.BigInt(0)
 
 export const BIPS_BASE = 10_000

src/hooks/useTransactionDeadline.ts

@@ -1,36 +1,15 @@
 import { BigNumber } from '@ethersproject/bignumber'
 import { useAccountDetails } from 'hooks/starknet-react'
-import { L2_DEADLINE_FROM_NOW } from 'constants/misc'
 import { useMemo } from 'react'
 import { useAppSelector } from 'state/hooks'
-import { useBlock, useContractRead } from '@starknet-react/core'
-import MultiContractABI from 'contracts/multicall/abi.json'
-import { MULTICALL_NETWORKS } from 'contracts/multicall'
-import { DEFAULT_CHAIN_ID } from 'constants/tokens'
 
 // combines the block timestamp with the user setting to give the deadline that should be used for any submitted transaction
 export default function useTransactionDeadline(): BigNumber | undefined {
   const { chainId } = useAccountDetails()
   const ttl = useAppSelector((state) => state.user.userDeadline)
-  const blockTimestamp = useCurrentBlockTimestamp()
+  const currentTimestamp = BigNumber.from(Math.round(Number(new Date()) / 1000).toString())
   return useMemo(() => {
-    if (blockTimestamp && ttl) return BigNumber.from(blockTimestamp).add(ttl)
+    if (currentTimestamp && ttl) return BigNumber.from(currentTimestamp).add(ttl)
     return undefined
-  }, [blockTimestamp, chainId, ttl])
-}
-
-const useCurrentBlockTimestamp = () => {
-  const { chainId } = useAccountDetails()
-  const { data: blockTimeStamp } = useContractRead({
-    functionName: 'get_current_block_timestamp',
-    args: [],
-    abi: MultiContractABI,
-    address: MULTICALL_NETWORKS[chainId ?? DEFAULT_CHAIN_ID],
-    watch: true,
-  })
-
-  if (!blockTimeStamp) return undefined
-  const { block_timestamp } = blockTimeStamp as any
-
-  return BigNumber.from(block_timestamp.toString())
+  }, [currentTimestamp, chainId, ttl])
 }

src/pages/AddLiquidity/index.tsx

@@ -105,12 +105,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
@@ -128,6 +126,9 @@ function AddLiquidity() {
   // mint state
   const { independentField, typedValue, startPriceTypedValue } = useV3MintState()
 
+  const [showWarning, setShowWarning] = useState(true)
+  const [mintCallData, setMintCallData] = useState<Call[]>([])
+
   const {
     pool,
     ticks,
@@ -161,8 +162,6 @@ function AddLiquidity() {
   const { onFieldAInput, onFieldBInput, onLeftRangeInput, onRightRangeInput, onStartPriceInput } =
     useV3MintActionHandlers(noLiquidity)
 
-  const [mintCallData, setMintCallData] = useState<Call[]>([])
-
   const { writeAsync, data: txData } = useContractWrite({
     calls: mintCallData,
   })
@@ -563,10 +562,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>