fix some of console errors and warnings

index.html

@@ -65,7 +65,7 @@
         dataLayer.push(arguments)
       }
       gtag('js', new Date())
-      gtag('config', 'G-TEFDYYTWP3')
+      gtag('config', 'G-TEFDYYTWP3', { cookie_flags: 'SameSite=None;Secure' })
     </script> -->
 
     <link rel="canonical" href="https://eclipse.invariant.app/" />

src/components/FarmsList/StakeTile/StakeTile.tsx

@@ -46,23 +46,31 @@ export const StakeTile: React.FC<IProps> = ({
   const [progress, setProgress] = useState<ProgressState>('none')
 
   useEffect(() => {
+    let timeout1: number
+    let timeout2: number
+
     if (typeof stakeStatus === 'undefined') {
       return
     }
 
     if (!stakeStatus.inProgress && progress === 'progress') {
       setProgress(stakeStatus.success ? 'approvedWithSuccess' : 'approvedWithFail')
 
-      setTimeout(() => {
+      timeout1 = setTimeout(() => {
         setProgress(stakeStatus.success ? 'success' : 'failed')
       }, 1500)
 
-      setTimeout(() => {
+      timeout2 = setTimeout(() => {
         setProgress('none')
       }, 3000)
     } else if (stakeStatus.inProgress && progress !== 'progress') {
       setProgress('progress')
     }
+
+    return () => {
+      if (timeout1) clearTimeout(timeout1)
+      if (timeout2) clearTimeout(timeout2)
+    }
   }, [stakeStatus])
 
   const data = xToY

src/components/Inputs/DepositAmountInput/DepositAmountInput.tsx

@@ -237,7 +237,7 @@ export const DepositAmountInput: React.FC<IProps> = ({
                     tooltip: classes.tooltip
                   }}>
                   <Typography className={classes.noData}>
-                    <div className={classes.noDataIcon}>?</div>No data
+                    <span className={classes.noDataIcon}>?</span>No data
                   </Typography>
                 </Tooltip>
               )

src/components/Inputs/RangeInput/style.ts

@@ -84,11 +84,11 @@ const useStyles = makeStyles((theme: Theme) => ({
     borderRadius: 10,
     flex: '1 1 0%',
 
-    '& $input': {
+    '& input': {
       textAlign: 'center'
     },
 
-    '& $input:disabled': {
+    '& input:disabled': {
       color: colors.white.main
     },
 

src/components/Modals/SelectModals/SelectTokenModal/SelectTokenModal.tsx

@@ -273,6 +273,7 @@ export const SelectTokenModal: React.FC<ISelectTokenModal> = ({
                 return (
                   <Grid
                     className={classes.tokenItem}
+                    container
                     style={{
                       ...style,
                       width: '90%',

src/components/NewPosition/RangeSelector/RangeSelector.tsx

@@ -14,7 +14,11 @@ import { MIN_TICK } from '@invariant-labs/sdk-eclipse'
 import { MAX_TICK } from '@invariant-labs/sdk-eclipse/src'
 import PlotTypeSwitch from '@components/PlotTypeSwitch/PlotTypeSwitch'
 import ConcentrationSlider from '../ConcentrationSlider/ConcentrationSlider'
-import { getConcentrationArray, getMaxTick, getMinTick } from '@invariant-labs/sdk-eclipse/lib/utils'
+import {
+  getConcentrationArray,
+  getMaxTick,
+  getMinTick
+} from '@invariant-labs/sdk-eclipse/lib/utils'
 import loader from '@static/gif/loader.gif'
 import useStyles from './style'
 import activeLiquidity from '@static/svg/activeLiquidity.svg'
@@ -343,7 +347,7 @@ export const RangeSelector: React.FC<IRangeSelector> = ({
               tooltip: classes.liquidityTooltip
             }}>
             <Typography className={classes.activeLiquidity}>
-              Active liquidity <div className={classes.activeLiquidityIcon}>i</div>
+              Active liquidity <span className={classes.activeLiquidityIcon}>i</span>
             </Typography>
           </Tooltip>
           <Typography className={classes.currentPrice}>Current price</Typography>

src/components/PositionDetails/SinglePositionPlot/SinglePositionPlot.tsx

@@ -151,7 +151,7 @@ const SinglePositionPlot: React.FC<ISinglePositionPlot> = ({
               tooltip: classes.liquidityTooltip
             }}>
             <Typography className={classes.activeLiquidity}>
-              Active liquidity <div className={classes.activeLiquidityIcon}>i</div>
+              Active liquidity <span className={classes.activeLiquidityIcon}>i</span>
             </Typography>
           </Tooltip>
           <Typography className={classes.currentPrice}>Current price</Typography>

src/components/PriceRangePlot/Brush/svgHandles.tsx

@@ -42,7 +42,7 @@ export const MinText: React.FC<Pick<ISVGHandle, 'x' | 'textColor'>> = ({ x, text
   </svg>
 )
 
-export const LeftHandle: React.FC<Pick<ISVGHandle, 'height' | 'fill'>> = ({ height, fill }) => (
+export const LeftHandle: React.FC<Pick<ISVGHandle, 'height' | 'fill'>> = ({ height = 0, fill }) => (
   <>
     <path d={`M36 ${height}V0`} stroke={fill} strokeWidth='2' />
     <path d='M0 4C0 1.79086 1.79086 0 4 0H37V20H4C1.79086 20 0 18.2091 0 16V4Z' fill={fill} />
@@ -51,7 +51,10 @@ export const LeftHandle: React.FC<Pick<ISVGHandle, 'height' | 'fill'>> = ({ heig
   </>
 )
 
-export const RightHandle: React.FC<Pick<ISVGHandle, 'height' | 'fill'>> = ({ height, fill }) => (
+export const RightHandle: React.FC<Pick<ISVGHandle, 'height' | 'fill'>> = ({
+  height = 0,
+  fill
+}) => (
   <>
     <path d={`M1 ${height}V0`} stroke={fill} strokeWidth='2' />
     <path d='M37 4C37 1.79086 35.2091 0 33 0H0V20H33C35.2091 20 37 18.2091 37 16V4Z' fill={fill} />

src/components/PriceRangePlot/PriceRangePlot.tsx

@@ -351,8 +351,8 @@ export const PriceRangePlot: React.FC<IPriceRangePlot> = ({
         <text
           x='50%'
           y='50%'
-          dominant-baseline='middle'
-          text-anchor='middle'
+          dominantBaseline='middle'
+          textAnchor='middle'
           className={classes.loadingText}>
           Loading liquidity data...
         </text>
@@ -435,15 +435,15 @@ export const PriceRangePlot: React.FC<IPriceRangePlot> = ({
         data={[
           {
             id: 'less than range',
-            data: currentLessThanRange
+            data: currentLessThanRange.length ? currentLessThanRange : [{ x: plotMin, y: 0 }]
           },
           {
             id: 'range',
             data: currentRange
           },
           {
             id: 'greater than range',
-            data: currentGreaterThanRange
+            data: currentGreaterThanRange.length ? currentGreaterThanRange : [{ x: plotMax, y: 0 }]
           }
         ]}
         curve={isDiscrete ? (isXtoY ? 'stepAfter' : 'stepBefore') : 'basis'}

src/components/Stats/PoolListItem/PoolListItem.tsx

@@ -119,7 +119,7 @@ const PoolListItem: React.FC<IProps> = ({
                 classes={{
                   tooltip: classes.liquidityTooltip
                 }}>
-                <div className={classes.activeLiquidityIcon}>i</div>
+                <span className={classes.activeLiquidityIcon}>i</span>
               </Tooltip>
             </Typography>
           ) : null}

src/components/Swap/Swap.tsx

@@ -423,9 +423,17 @@ export const Swap: React.FC<ISwap> = ({
     setDetailsOpen(!detailsOpen)
   }
 
-  React.useEffect(() => {
+  useEffect(() => {
+    let timeoutId: number
+
     if (lockAnimation) {
-      setTimeout(() => setLockAnimation(false), 500)
+      timeoutId = setTimeout(() => setLockAnimation(false), 500)
+    }
+
+    return () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId)
+      }
     }
   }, [lockAnimation])
 

src/containers/NewPositionWrapper/NewPositionWrapper.tsx

@@ -84,6 +84,9 @@ export const NewPositionWrapper: React.FC<IProps> = ({
   }, [poolIndex])
 
   useEffect(() => {
+    let timeoutId1: number
+    let timeoutId2: number
+
     if (!inProgress && progress === 'progress') {
       setProgress(success ? 'approvedWithSuccess' : 'approvedWithFail')
 
@@ -99,14 +102,19 @@ export const NewPositionWrapper: React.FC<IProps> = ({
         )
       }
 
-      setTimeout(() => {
+      timeoutId1 = setTimeout(() => {
         setProgress(success ? 'success' : 'failed')
       }, 1500)
 
-      setTimeout(() => {
+      timeoutId2 = setTimeout(() => {
         setProgress('none')
       }, 3000)
     }
+
+    return () => {
+      clearTimeout(timeoutId1)
+      clearTimeout(timeoutId2)
+    }
   }, [success, inProgress])
 
   const isXtoY = useMemo(() => {

src/containers/WrappedSwap/WrappedSwap.tsx

@@ -47,19 +47,27 @@ export const WrappedSwap = () => {
   const [progress, setProgress] = useState<ProgressState>('none')
   const [tokenFrom, setTokenFrom] = useState<PublicKey | null>(null)
   const [tokenTo, setTokenTo] = useState<PublicKey | null>(null)
-
   useEffect(() => {
+    let timeoutId1: number
+    let timeoutId2: number
+
     if (!inProgress && progress === 'progress') {
       setProgress(success ? 'approvedWithSuccess' : 'approvedWithFail')
 
-      setTimeout(() => {
+      timeoutId1 = setTimeout(() => {
         setProgress(success ? 'success' : 'failed')
       }, 1500)
 
-      setTimeout(() => {
+      timeoutId2 = setTimeout(() => {
         setProgress('none')
       }, 3000)
     }
+
+    // Cleanup function
+    return () => {
+      clearTimeout(timeoutId1)
+      clearTimeout(timeoutId2)
+    }
   }, [success, inProgress])
 
   useEffect(() => {

src/web3/connection.ts

@@ -68,7 +68,7 @@ const getCurrentSolanaConnection = (): Connection | null => {
 
 export {
   getSolanaConnection,
-  EclipseNetworks as EclipseNetworks,
+  EclipseNetworks,
   getCurrentSolanaConnection,
   // networkTypetoStakerNetwork,
   networkTypetoProgramNetwork