invariant-labs · wojciech-cichocki · Jun 6, 2025 · Jun 6, 2025
diff --git a/src/common/FilterSearch/Helpers/TokenOption.tsx b/src/common/FilterSearch/Helpers/TokenOption.tsx
@@ -32,15 +32,15 @@ export const TokenOption: React.FC<{
           <Box className={classes.symbolAndAddress}>
             <Typography className={classes.tokenLabel}>{shortenAddress(option.symbol)}</Typography>
             <Box className={classes.tokenAddress}>
-              <Typography className={classes.truncatedAddress}>
-                {shortenAddress(option.address)}
-              </Typography>
               <a
                 className={classes.addressLink}
                 href={`https://explorer.sonic.game/address/${option.address.toString()}${networkUrl}`}
                 target='_blank'
                 rel='noopener noreferrer'
                 onClick={event => event.stopPropagation()}>
+                <Typography className={classes.truncatedAddress}>
+                  {shortenAddress(option.address)}
+                </Typography>
                 <img className={classes.newTabIcon} src={newTabIcon} alt='Token address' />
               </a>
             </Box>

diff --git a/src/common/Pagination/InputPagination/style.tsx b/src/common/Pagination/InputPagination/style.tsx
@@ -119,7 +119,7 @@ export const useStyles = makeStyles<{
     fontWeight: 700,
     borderRadius: 4,
     appearance: 'textfield !important' as 'textfield',
-    border: `3px solid ${colors.invariant.green}`,
+    border: `3px solid ${colors.invariant.light}`,
     '&::-webkit-inner-spin-button, &::-webkit-outer-spin-button': {
       WebkitAppearance: 'none',
       margin: 0

diff --git a/src/common/Popover/CustomPopover.tsx b/src/common/Popover/CustomPopover.tsx
@@ -0,0 +1,113 @@
+import { Popover, Box, PopoverProps } from '@mui/material'
+import { useState } from 'react'
+import useStyles from './style'
+import GradientBorder from '@common/GradientBorder/GradientBorder'
+
+interface CustomPopoverProps {
+  children: React.ReactElement
+  content: React.ReactNode
+  top?: number | string
+  left?: number | string
+  right?: number | string
+  bottom?: number | string
+  fullSpan?: boolean
+  gradient?: boolean
+  increasePadding?: boolean
+  maxWidth?: string | number
+  centerOnScreen?: boolean
+  textAlign?: 'left' | 'center' | 'right'
+  popoverProps?: Partial<PopoverProps>
+}
+export const CustomPopover = ({
+  children,
+  content,
+  top,
+  left,
+  right,
+  bottom,
+  fullSpan = false,
+  gradient = false,
+  increasePadding = false,
+  maxWidth,
+  centerOnScreen = false,
+  textAlign = 'left',
+  ...props
+}: CustomPopoverProps) => {
+  const { classes } = useStyles({
+    top,
+    left,
+    right,
+    bottom,
+    fullSpan,
+    increasePadding,
+    maxWidth
+  })
+
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
+  const [open, setOpen] = useState(false)
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    event.stopPropagation()
+    if (centerOnScreen) {
+      setOpen(prev => !prev)
+    } else {
+      setAnchorEl(prev => (prev ? null : event.currentTarget))
+      setOpen(prev => !prev)
+    }
+  }
+
+  const handleClose = () => {
+    setOpen(false)
+    setAnchorEl(null)
+  }
+
+  return (
+    <>
+      <span onClick={handleClick} className={classes.tooltipSpan}>
+        {children}
+      </span>
+
+      <Popover
+        open={open}
+        anchorEl={centerOnScreen ? null : anchorEl}
+        onClose={handleClose}
+        anchorReference={centerOnScreen ? 'anchorPosition' : 'anchorEl'}
+        anchorPosition={
+          centerOnScreen
+            ? {
+                top: window.innerHeight / 2,
+                left: window.innerWidth / 2
+              }
+            : undefined
+        }
+        anchorOrigin={{
+          vertical: 'center',
+          horizontal: 'center'
+        }}
+        transformOrigin={{
+          vertical: 'center',
+          horizontal: 'left'
+        }}
+        slotProps={{
+          paper: {
+            className: classes.popover
+          }
+        }}
+        {...props}>
+        <Box maxWidth={'calc(100vw - 16px)'}>
+          <GradientBorder borderRadius={12} borderWidth={1}>
+            <Box
+              textAlign={textAlign}
+              className={classes.contentBox}
+              onClick={e => {
+                e.stopPropagation()
+                setOpen(false)
+              }}>
+              {content}
+            </Box>
+          </GradientBorder>
+        </Box>
+      </Popover>
+    </>
+  )
+}
diff --git a/src/common/Popover/style.ts b/src/common/Popover/style.ts
@@ -0,0 +1,39 @@
+import { makeStyles } from 'tss-react/mui'
+import { colors } from '@static/theme'
+
+const useStyles = makeStyles<{
+  top?: number | string
+  left?: number | string
+  right?: number | string
+  bottom?: number | string
+  fullSpan?: boolean
+  increasePadding?: boolean
+  maxWidth?: string | number
+}>()((_theme, { top, left, right, bottom, fullSpan, increasePadding, maxWidth }) => ({
+  popover: {
+    minWidth: 'fit-content',
+    background: 'none',
+    top: top ? top : 'auto',
+    left: left ? left : 'auto',
+    right: right ? right : 'auto',
+    bottom: bottom ? bottom : 'auto',
+    padding: 0,
+    margin: 8
+  },
+  contentBox: {
+    padding: increasePadding ? '16px 24px' : '8px 12px',
+    background: colors.invariant.component,
+    overflow: 'hidden',
+    borderRadius: 12,
+    pointerEvents: 'auto',
+    maxWidth: maxWidth || 'none'
+  },
+  tooltipSpan: {
+    width: fullSpan ? '100%' : 'auto',
+    display: 'inline-flex',
+    margin: 0,
+    padding: 0
+  }
+}))
+
+export default useStyles
diff --git a/src/common/TooltipHover/style.ts b/src/common/TooltipHover/style.ts
@@ -16,7 +16,6 @@ const useStyles = makeStyles<{
     borderRadius: 12,
     background: colors.invariant.component,
     ...typography.body2,
-    color: colors.invariant.textGrey,
     padding: increasePadding ? '16px 24px' : '8px 12px',
     top: top ? top : 'auto',
     left: left ? left : 'auto',
@@ -44,7 +43,6 @@ const useStyles = makeStyles<{
     borderRadius: 14,
     background: colors.invariant.component,
     ...typography.body2,
-    color: colors.invariant.textGrey,
     top: top ? top : 0,
     left: left ? left : 'auto',
     right: right ? right : 'auto',

diff --git a/src/components/Inputs/RangeInput/RangeInput.tsx b/src/components/Inputs/RangeInput/RangeInput.tsx
@@ -4,9 +4,8 @@ import RemoveIcon from '@mui/icons-material/Remove'
 import useStyles from './style'
 import { colors } from '@static/theme'
 import { Button, Grid, Input, Typography } from '@mui/material'
-import { formatNumbers } from '@utils/utils'
 import AnimatedNumber from '@common/AnimatedNumber/AnimatedNumber'
-import { FormatNumberThreshold } from '@store/consts/types'
+import { formatNumberWithSuffix } from '@utils/utils'
 
 export interface IRangeInput {
   label: string
@@ -85,36 +84,6 @@ export const RangeInput: React.FC<IRangeInput> = ({
     }
   }
 
-  const percentageThresholds: FormatNumberThreshold[] = [
-    {
-      value: 10,
-      decimals: 2
-    },
-    {
-      value: 1000,
-      decimals: 2
-    },
-    {
-      value: 10000,
-      decimals: 2
-    },
-    {
-      value: 1000000,
-      decimals: 2,
-      divider: 1000
-    },
-    {
-      value: 1000000000,
-      decimals: 2,
-      divider: 1000000
-    },
-    {
-      value: Infinity,
-      decimals: 2,
-      divider: 1000000000
-    }
-  ]
-
   return (
     <Grid className={className} style={style} container direction='column' alignItems='center'>
       <Grid className={classes.data} container>
@@ -161,7 +130,13 @@ export const RangeInput: React.FC<IRangeInput> = ({
           {percentDiff ? (
             <AnimatedNumber
               value={percentDiff}
-              format={e => formatNumbers(percentageThresholds)(e.toString())}
+              format={e =>
+                formatNumberWithSuffix(e.toString(), {
+                  decimalsAfterDot: 2,
+                  noSubNumbers: true,
+                  alternativeConfig: true
+                })
+              }
               duration={300}
             />
           ) : (

diff --git a/src/components/Inputs/SimpleInput/SimpleInput.tsx b/src/components/Inputs/SimpleInput/SimpleInput.tsx
@@ -97,7 +97,11 @@ export const SimpleInput: React.FC<IProps> = ({
               onClick={() => {
                 setValue(formatterFunction(suggestedPrice.toString()))
               }}>
-              <p className={classes.suggestedPriceText}>Suggested price</p>
+              <p className={classes.suggestedPriceText}>
+                {value?.toString() === formatterFunction(suggestedPrice.toString())
+                  ? 'Existing price applied'
+                  : 'Use existing price'}
+              </p>
             </Button>
           </TooltipHover>
         ) : null

diff --git a/src/components/Inputs/SimpleInput/style.ts b/src/components/Inputs/SimpleInput/style.ts
@@ -20,7 +20,7 @@ export const useStyles = makeStyles()(() => ({
   suggestedPriceText: {
     width: 148,
     fontSize: 14,
-    lineHeight: 0.8
+    lineHeight: 1
   }
 }))
 

diff --git a/src/components/LiquidityPoolList/LiquidityPoolList.tsx b/src/components/LiquidityPoolList/LiquidityPoolList.tsx
@@ -96,7 +96,7 @@ const LiquidityPoolList: React.FC<PoolListInterface> = ({
   interval
 }) => {
   const [page, setPage] = React.useState(1)
-  const [sortType, setSortType] = React.useState(SortTypePoolList.VOLUME_DESC)
+  const [sortType, setSortType] = React.useState(SortTypePoolList.FEE_24_DESC)
   const navigate = useNavigate()
   const [initialDataLength, setInitialDataLength] = useState(initialLength)
   const isCenterAligment = useMediaQuery(theme.breakpoints.down(1280))

diff --git a/src/components/Modals/ConnectWallet/ConnectWallet.tsx b/src/components/Modals/ConnectWallet/ConnectWallet.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import useStyles from './style'
 import { Grid, Popover, Typography } from '@mui/material'
 import { copyAddressIcon, disconnectIcon, walletIcon } from '@static/icons'
+import useIsMobile from '@store/hooks/isMobile'
 
 export interface IConnectWalletModal {
   open: boolean
@@ -20,6 +21,7 @@ export const ConnectWallet: React.FC<IConnectWalletModal> = ({
   callChangeWallet = () => {}
 }) => {
   const { classes } = useStyles()
+  const isMobile = useIsMobile(true)
 
   return (
     <Popover
@@ -40,10 +42,12 @@ export const ConnectWallet: React.FC<IConnectWalletModal> = ({
           <img src={copyAddressIcon} className={classes.icon} alt='Copy address icon' />
           <Typography className={classes.name}>Copy address</Typography>
         </Grid>
-        <Grid item className={classes.listItem} onClick={callChangeWallet}>
-          <img src={walletIcon} className={classes.icon} alt='Change wallet icon' />
-          <Typography className={classes.name}>Change wallet</Typography>
-        </Grid>
+        {!isMobile && (
+          <Grid item className={classes.listItem} onClick={callChangeWallet}>
+            <img src={walletIcon} className={classes.icon} alt='Change wallet icon' />
+            <Typography className={classes.name}>Change wallet</Typography>
+          </Grid>
+        )}
         <Grid item className={classes.listItem} onClick={callDisconect}>
           <img src={disconnectIcon} className={classes.icon} alt='Disconnect icon' />
           <Typography className={classes.name}>Disconnect</Typography>

diff --git a/src/components/Modals/LockStatsPopover/style.ts b/src/components/Modals/LockStatsPopover/style.ts
@@ -14,7 +14,7 @@ const useStyles = makeStyles()((theme: Theme) => {
       display: 'flex',
       alignItems: 'center',
       [theme.breakpoints.down('sm')]: {
-        width: 300
+        width: 'auto'
       }
     },
     leftWrapper: {