Update staging

src/App.tsx

@@ -6,6 +6,9 @@ import SnackbarProvider from '@components/Snackbar'
 import { theme } from '@static/theme'
 import { ThemeProvider } from '@mui/material/styles'
 import Notifier from '@containers/Notifier'
+import { filterConsoleMessages, messagesToHide } from './hideErrors'
+
+filterConsoleMessages(messagesToHide)
 
 function App() {
   return (

src/components/Inputs/ExchangeAmountInput/ExchangeAmountInput.tsx

@@ -34,6 +34,7 @@ interface IProps {
   isBalanceLoading: boolean
   showMaxButton: boolean
   showBlur: boolean
+  hiddenUnknownTokens: boolean
 }
 
 export const AmountInput: React.FC<IProps> = ({
@@ -60,7 +61,8 @@ export const AmountInput: React.FC<IProps> = ({
   priceLoading = false,
   isBalanceLoading,
   showMaxButton = true,
-  showBlur
+  showBlur,
+  hiddenUnknownTokens
 }) => {
   const hideBalance = balance === '- -' || !balance || hideBalances
   const { classes } = useStyles({ walletDisconnected: hideBalance })
@@ -121,6 +123,7 @@ export const AmountInput: React.FC<IProps> = ({
           commonTokens={commonTokens}
           initialHideUnknownTokensValue={initialHideUnknownTokensValue}
           onHideUnknownTokensChange={onHideUnknownTokensChange}
+          hiddenUnknownTokens={hiddenUnknownTokens}
         />
         {showBlur ? (
           <div className={classes.blur}></div>

src/components/Inputs/Select/Select.stories.tsx

@@ -55,6 +55,7 @@ export const Primary: Story = {
     initialHideUnknownTokensValue: false,
     tokens: tokens,
     onHideUnknownTokensChange: fn(),
-    centered: false
+    centered: false,
+    hiddenUnknownTokens: false
   }
 }

src/components/Inputs/Select/Select.tsx

@@ -21,6 +21,7 @@ export interface ISelectModal {
   commonTokens: string[]
   initialHideUnknownTokensValue: boolean
   onHideUnknownTokensChange: (val: boolean) => void
+  hiddenUnknownTokens: boolean
 }
 
 export const Select: React.FC<ISelectModal> = ({
@@ -35,7 +36,8 @@ export const Select: React.FC<ISelectModal> = ({
   sliceName = false,
   commonTokens,
   initialHideUnknownTokensValue,
-  onHideUnknownTokensChange
+  onHideUnknownTokensChange,
+  hiddenUnknownTokens
 }) => {
   const { classes } = useStyles()
   const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null)
@@ -99,6 +101,7 @@ export const Select: React.FC<ISelectModal> = ({
         commonTokens={commonTokens}
         initialHideUnknownTokensValue={initialHideUnknownTokensValue}
         onHideUnknownTokensChange={onHideUnknownTokensChange}
+        hiddenUnknownTokens={hiddenUnknownTokens}
       />
     </>
   )

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

@@ -50,6 +50,7 @@ export const Primary: Story = {
     handleAddToken: fn(),
     initialHideUnknownTokensValue: false,
     onHideUnknownTokensChange: fn(),
-    tokens: tokens
+    tokens: tokens,
+    hiddenUnknownTokens: false
   }
 }

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

@@ -36,6 +36,7 @@ export interface ISelectTokenModal {
   handleAddToken: (address: string) => void
   initialHideUnknownTokensValue: boolean
   onHideUnknownTokensChange: (val: boolean) => void
+  hiddenUnknownTokens: boolean
 }
 
 interface IScroll {
@@ -66,7 +67,8 @@ export const SelectTokenModal: React.FC<ISelectTokenModal> = ({
   hideBalances = false,
   handleAddToken,
   initialHideUnknownTokensValue,
-  onHideUnknownTokensChange
+  onHideUnknownTokensChange,
+  hiddenUnknownTokens
 }) => {
   const { classes } = useStyles()
   const isXs = useMediaQuery(theme.breakpoints.down('sm'))
@@ -78,6 +80,10 @@ export const SelectTokenModal: React.FC<ISelectTokenModal> = ({
   const outerRef = useRef<HTMLElement>(null)
   const inputRef = useRef<HTMLInputElement>(null)
 
+  useEffect(() => {
+    setHideUnknown(hiddenUnknownTokens)
+  }, [hiddenUnknownTokens])
+
   const commonTokensList = useMemo(() => {
     const commonTokensList: SwapToken[] = []
 

src/components/Modals/Slippage/Slippage.stories.tsx

@@ -16,7 +16,6 @@ type Story = StoryObj<typeof meta>
 export const Primary: Story = {
   args: {
     anchorEl: null,
-    defaultSlippage: '0,5',
     handleClose: fn(),
     initialSlippage: '0,5',
     setSlippage: fn(),

src/components/Modals/Slippage/Slippage.tsx

@@ -8,7 +8,6 @@ interface Props {
   setSlippage: (slippage: string) => void
   handleClose: () => void
   anchorEl: HTMLButtonElement | null
-  defaultSlippage: string
   initialSlippage: string
   infoText?: string
   headerText?: string
@@ -19,7 +18,6 @@ const Slippage: React.FC<Props> = ({
   setSlippage,
   handleClose,
   anchorEl,
-  defaultSlippage,
   initialSlippage,
   infoText,
   headerText
@@ -128,7 +126,10 @@ const Slippage: React.FC<Props> = ({
                 className={classNames(classes.slippagePercentageButton, {
                   [classes.slippagePercentageButtonActive]: index === tierIndex
                 })}
-                onClick={() => setTieredSlippage(index)}>
+                onClick={() => {
+                  setTieredSlippage(index)
+                  handleClose()
+                }}>
                 {tier}%
               </Button>
             ))}
@@ -137,40 +138,30 @@ const Slippage: React.FC<Props> = ({
             <Input
               disableUnderline
               placeholder='0.00'
-              className={classes.detailsInfoForm}
+              className={classNames(
+                classes.detailsInfoForm,
+                tierIndex === -1 && classes.activeForm
+              )}
               type={'text'}
               value={slippTolerance}
               onChange={e => {
                 allowOnlyDigitsAndTrimUnnecessaryZeros(e)
                 checkSlippage(e)
-                setTierIndex(-1)
               }}
               ref={inputRef}
-              onBlur={() => {
-                setSlippTolerance(Number(slippTolerance).toFixed(2))
-                setSlippage(String(Number(slippTolerance).toFixed(2)))
-              }}
               startAdornment='Custom'
               endAdornment={
                 <>
                   %
                   <button
                     className={classes.detailsInfoBtn}
                     onClick={() => {
-                      const tierIndex = slippageTiers.findIndex(
-                        tier => String(Number(tier).toFixed(2)) === defaultSlippage
-                      )
-                      setTierIndex(tierIndex)
-
-                      if (tierIndex !== -1) {
-                        setSlippTolerance('')
-                      } else {
-                        setSlippTolerance(defaultSlippage)
-                      }
-
-                      setSlippage(defaultSlippage)
+                      setSlippTolerance(Number(slippTolerance).toFixed(2))
+                      setSlippage(String(Number(slippTolerance).toFixed(2)))
+                      setTierIndex(-1)
+                      handleClose()
                     }}>
-                    Auto
+                    Save
                   </button>
                 </>
               }

src/components/Modals/Slippage/style.ts

@@ -63,6 +63,9 @@ export const useStyles = makeStyles()(() => {
         outline: 'none'
       }
     },
+    activeForm: {
+      outline: `1px solid ${colors.invariant.light}`
+    },
     innerInput: {
       paddingBlock: 0,
       textAlign: 'right'

src/components/NewPosition/DepositSelector/DepositSelector.tsx

@@ -100,6 +100,8 @@ export const DepositSelector: React.FC<IDepositSelector> = ({
   const [tokenA, setTokenA] = useState<string | null>(null)
   const [tokenB, setTokenB] = useState<string | null>(null)
 
+  const [hideUnknownTokens, setHideUnknownTokens] = useState<boolean>(initialHideUnknownTokensValue)
+
   const [isLoaded, setIsLoaded] = useState<boolean>(false)
 
   useEffect(() => {
@@ -225,7 +227,11 @@ export const DepositSelector: React.FC<IDepositSelector> = ({
               sliceName
               commonTokens={commonTokens}
               initialHideUnknownTokensValue={initialHideUnknownTokensValue}
-              onHideUnknownTokensChange={onHideUnknownTokensChange}
+              onHideUnknownTokensChange={e => {
+                onHideUnknownTokensChange(e)
+                setHideUnknownTokens(e)
+              }}
+              hiddenUnknownTokens={hideUnknownTokens}
             />
           </Grid>
 
@@ -266,7 +272,11 @@ export const DepositSelector: React.FC<IDepositSelector> = ({
               sliceName
               commonTokens={commonTokens}
               initialHideUnknownTokensValue={initialHideUnknownTokensValue}
-              onHideUnknownTokensChange={onHideUnknownTokensChange}
+              onHideUnknownTokensChange={e => {
+                onHideUnknownTokensChange(e)
+                setHideUnknownTokens(e)
+              }}
+              hiddenUnknownTokens={hideUnknownTokens}
             />
           </Grid>
         </Grid>

src/components/NewPosition/NewPosition.tsx

@@ -7,12 +7,7 @@ import { PERCENTAGE_DENOMINATOR } from '@invariant-labs/a0-sdk/target/consts'
 import { Box, Button, Grid, Hidden, Typography } from '@mui/material'
 import backIcon from '@static/svg/back-arrow.svg'
 import settingIcon from '@static/svg/settings.svg'
-import {
-  ALL_FEE_TIERS_DATA,
-  DEFAULT_NEW_POSITION_SLIPPAGE,
-  PositionTokenBlock,
-  REFRESHER_INTERVAL
-} from '@store/consts/static'
+import { ALL_FEE_TIERS_DATA, PositionTokenBlock, REFRESHER_INTERVAL } from '@store/consts/static'
 import {
   calcPriceBySqrtPrice,
   calculateConcentrationRange,
@@ -545,7 +540,6 @@ export const NewPosition: React.FC<INewPosition> = ({
         setSlippage={setSlippage}
         handleClose={handleCloseSettings}
         anchorEl={anchorEl}
-        defaultSlippage={DEFAULT_NEW_POSITION_SLIPPAGE}
         initialSlippage={initialSlippage}
         infoText='Slippage tolerance is a pricing difference between the price at the confirmation time and the actual price of the transaction users are willing to accept when initializing position.'
         headerText='Position Settings'

src/components/PositionDetails/SinglePositionInfo/SinglePositionInfo.tsx

@@ -88,11 +88,9 @@ const SinglePositionInfo: React.FC<IProp> = ({
             alt={xToY ? tokenY.name : tokenX.name}
           />
           <Grid className={classes.namesGrid}>
-            <Typography className={classes.name}>{xToY ? tokenX.name : tokenY.name}</Typography>
-            <Typography id='pause' className={classes.name}>
-              -
+            <Typography className={classes.name}>
+              {xToY ? tokenX.name : tokenY.name} - {xToY ? tokenY.name : tokenX.name}
             </Typography>
-            <Typography className={classes.name}>{xToY ? tokenY.name : tokenX.name}</Typography>
           </Grid>
           <Grid className={classes.rangeGrid}>
             <Tooltip

src/components/PositionDetails/SinglePositionInfo/style.ts

@@ -23,8 +23,8 @@ export const useStyles = makeStyles()((theme: Theme) => ({
   },
   arrowIcon: {
     width: 32,
-    marginRight: 8,
-    marginLeft: 8,
+    marginRight: 4,
+    marginLeft: 4,
     height: 32,
     borderRadius: '100%',
     padding: 4,
@@ -56,7 +56,7 @@ export const useStyles = makeStyles()((theme: Theme) => ({
   rangeGrid: {
     display: 'flex',
     flexDirection: 'row',
-    paddingRight: 10
+    paddingRight: 4
   },
   header: {
     display: 'flex',
@@ -77,10 +77,11 @@ export const useStyles = makeStyles()((theme: Theme) => ({
     }
   },
   feeText: {
-    marginLeft: 12,
-    minWidth: 90,
+    marginLeft: 8,
+    paddingInline: 6,
+    minWidth: 66,
 
-    [theme.breakpoints.down('sm')]: {
+    [theme.breakpoints.down('md')]: {
       minWidth: 84
     }
   },
@@ -93,7 +94,7 @@ export const useStyles = makeStyles()((theme: Theme) => ({
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
-    paddingLeft: 8,
+    paddingLeft: 4,
     '& #pause': {
       padding: ' 0px 3px'
     },
@@ -105,8 +106,8 @@ export const useStyles = makeStyles()((theme: Theme) => ({
   name: {
     ...typography.heading3,
     color: colors.invariant.text,
-    lineHeight: '28px',
-
+    textWrap: 'nowrap',
+    fontSize: 22,
     [theme.breakpoints.down('sm')]: {
       ...typography.heading4
     }
@@ -251,11 +252,12 @@ export const useStyles = makeStyles()((theme: Theme) => ({
     color: colors.invariant.dark,
     background: colors.invariant.greenLinearGradientOpacity,
     height: 36,
-    width: 116,
+    width: 110,
     textTransform: 'none',
     transition: '300ms',
     paddingInline: 0,
     borderRadius: 12,
+    textWrap: 'nowrap',
     ...typography.body1,
 
     '&:hover': {