Update staging

package.json

@@ -18,7 +18,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
-    "@invariant-labs/a0-sdk": "^0.2.29",
+    "@invariant-labs/a0-sdk": "^0.2.32",
     "@mui/icons-material": "^5.15.15",
     "@mui/material": "^5.15.15",
     "@nightlylabs/wallet-selector-polkadot": "^0.2.6",

src/components/Stats/Liquidity/Liquidity.tsx

@@ -6,7 +6,7 @@ import { colors, typography } from '@static/theme'
 import { useStyles } from './style'
 import { TimeData } from '@store/reducers/stats'
 import { Grid, Typography } from '@mui/material'
-import { formatNumber, formatNumbers, showPrefix } from '@utils/utils'
+import { formatNumber } from '@utils/utils'
 
 interface LiquidityInterface {
   liquidityPercent: number
@@ -31,8 +31,7 @@ const Liquidity: React.FC<LiquidityInterface> = ({
         <Typography className={classes.liquidityHeader}>Liquidity</Typography>
         <Grid className={classes.volumePercentHeader}>
           <Typography className={classes.volumeLiquidityHeader}>
-            ${formatNumbers()(liquidityVolume.toString())}
-            {showPrefix(liquidityVolume)}
+            ${formatNumber(liquidityVolume)}
           </Typography>
           <Grid className={classes.volumeStatusContainer}>
             <Grid

src/components/Stats/PoolListItem/PoolListItem.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { theme } from '@static/theme'
 import { useStyles } from './style'
 import { Box, Grid, Typography, useMediaQuery } from '@mui/material'
-import { addressToTicker, formatNumbers, parseFeeToPathFee, showPrefix } from '@utils/utils'
+import { addressToTicker, formatNumber, parseFeeToPathFee } from '@utils/utils'
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'
 import ArrowDropUpIcon from '@mui/icons-material/ArrowDropUp'
 import { useNavigate } from 'react-router-dom'
@@ -62,7 +62,7 @@ const PoolListItem: React.FC<IProps> = ({
   const { classes } = useStyles()
 
   const navigate = useNavigate()
-  const isXs = useMediaQuery(theme.breakpoints.down('xs'))
+  const isSm = useMediaQuery(theme.breakpoints.down('sm'))
 
   const handleOpenPosition = () => {
     navigate(
@@ -82,9 +82,9 @@ const PoolListItem: React.FC<IProps> = ({
           container
           classes={{ container: classes.container }}
           style={hideBottomLine ? { border: 'none' } : undefined}>
-          {!isXs ? <Typography>{tokenIndex}</Typography> : null}
+          {!isSm ? <Typography>{tokenIndex}</Typography> : null}
           <Grid className={classes.imageContainer}>
-            {!isXs && (
+            {!isSm && (
               <Box className={classes.iconsWrapper}>
                 <img src={iconFrom} alt='Token from' />
                 <img src={iconTo} alt='Token to' />
@@ -96,7 +96,7 @@ const PoolListItem: React.FC<IProps> = ({
               </Typography>
             </Grid>
           </Grid>
-          {/* {!isXs ? (
+          {/* {!isSm ? (
             <Typography>
               {`${apy > 1000 ? '>1000' : apy.toFixed(2)}%`}
               <Tooltip
@@ -137,24 +137,26 @@ const PoolListItem: React.FC<IProps> = ({
             </Typography>
           ) : null} */}
           <Typography>{fee}%</Typography>
-          <Typography>{`$${formatNumbers()(volume.toString())}${showPrefix(volume)}`}</Typography>
-          <Typography>{`$${formatNumbers()(TVL.toString())}${showPrefix(TVL)}`}</Typography>
-          <Box className={classes.action}>
-            <TooltipHover text='Exchange'>
-              <button className={classes.actionButton} onClick={handleOpenSwap}>
-                <img width={32} height={32} src={icons.horizontalSwapIcon} alt={'Exchange'} />
-              </button>
-            </TooltipHover>
-            <TooltipHover text='Add position'>
-              <button className={classes.actionButton} onClick={handleOpenPosition}>
-                <img width={32} height={32} src={icons.plusIcon} alt={'Open'} />
-              </button>
-            </TooltipHover>
-          </Box>
+          <Typography>{`$${formatNumber(volume)}`}</Typography>
+          <Typography>{`$${formatNumber(TVL)}`}</Typography>
+          {!isSm && (
+            <Box className={classes.action}>
+              <TooltipHover text='Exchange'>
+                <button className={classes.actionButton} onClick={handleOpenSwap}>
+                  <img width={32} height={32} src={icons.horizontalSwapIcon} alt={'Exchange'} />
+                </button>
+              </TooltipHover>
+              <TooltipHover text='Add position'>
+                <button className={classes.actionButton} onClick={handleOpenPosition}>
+                  <img width={32} height={32} src={icons.plusIcon} alt={'Open'} />
+                </button>
+              </TooltipHover>
+            </Box>
+          )}
         </Grid>
       ) : (
         <Grid container classes={{ container: classes.container, root: classes.header }}>
-          {!isXs && (
+          {!isSm && (
             <Typography style={{ lineHeight: '11px' }}>
               N<sup>o</sup>
             </Typography>
@@ -241,7 +243,7 @@ const PoolListItem: React.FC<IProps> = ({
               <ArrowDropDownIcon className={classes.icon} />
             ) : null}
           </Typography>
-          <Typography align='right'>Action</Typography>
+          {!isSm && <Typography align='right'>Action</Typography>}
         </Grid>
       )}
     </Grid>

src/components/Stats/PoolListItem/style.ts

@@ -23,13 +23,12 @@ export const useStyles = makeStyles()(() => ({
     },
 
     [theme.breakpoints.down('sm')]: {
+      gridTemplateColumns: '32.5% 17.5% 35% 15% ',
+
       '& p': {
+        justifyContent: 'flex-start',
         ...typography.caption1
       }
-    },
-
-    [theme.breakpoints.down('xs')]: {
-      gridTemplateColumns: '28% 15% 30% 25%'
     }
   },
 
@@ -72,8 +71,9 @@ export const useStyles = makeStyles()(() => ({
       display: 'block'
     },
 
-    [theme.breakpoints.down('xs')]: {
-      marginLeft: 0
+    [theme.breakpoints.down('sm')]: {
+      marginLeft: 0,
+      justifyContent: 'flex-start'
     }
   },
   icon: {

src/components/Stats/TokenListItem/TokenListItem.tsx

@@ -4,7 +4,7 @@ import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'
 import ArrowDropUpIcon from '@mui/icons-material/ArrowDropUp'
 import { useStyles } from './style'
 import { Grid, Typography, useMediaQuery } from '@mui/material'
-import { formatNumbers, showPrefix } from '@utils/utils'
+import { formatNumber } from '@utils/utils'
 import { SortTypeTokenList } from '@store/consts/static'
 
 interface IProps {
@@ -39,7 +39,7 @@ const TokenListItem: React.FC<IProps> = ({
   const { classes } = useStyles()
   // const isNegative = priceChange < 0
 
-  const isXDown = useMediaQuery(theme.breakpoints.down('sm'))
+  const isSm = useMediaQuery(theme.breakpoints.down('sm'))
   const hideName = useMediaQuery(theme.breakpoints.down('xs'))
 
   return (
@@ -49,29 +49,30 @@ const TokenListItem: React.FC<IProps> = ({
           container
           classes={{ container: classes.container, root: classes.tokenList }}
           style={hideBottomLine ? { border: 'none' } : undefined}>
-          {!hideName && <Typography component='p'>{itemNumber}</Typography>}
+          {!hideName && !isSm && <Typography component='p'>{itemNumber}</Typography>}
           <Grid className={classes.tokenName}>
-            {!isXDown && <img src={icon} alt='Token icon'></img>}
+            {!isSm && <img src={icon} alt='Token icon'></img>}
             <Typography>
               {hideName ? symbol : name}
               {!hideName && <span className={classes.tokenSymbol}>{` (${symbol})`}</span>}
             </Typography>
           </Grid>
-          <Typography>{`~$${formatNumbers()(price.toString())}${showPrefix(price)}`}</Typography>
+          <Typography>{`~$${formatNumber(price)}`}</Typography>
+
           {/* {!hideName && (
             <Typography style={{ color: isNegative ? colors.invariant.Error : colors.green.main }}>
               {isNegative ? `${priceChange.toFixed(2)}%` : `+${priceChange.toFixed(2)}%`}
             </Typography>
           )} */}
-          <Typography>{`$${formatNumbers()(volume.toString())}${showPrefix(volume)}`}</Typography>
-          <Typography>{`$${formatNumbers()(TVL.toString())}${showPrefix(TVL)}`}</Typography>
+          <Typography>{`$${formatNumber(volume)}`}</Typography>
+          <Typography>{`$${formatNumber(TVL)}`}</Typography>
         </Grid>
       ) : (
         <Grid
           container
           style={{ color: colors.invariant.textGrey, fontWeight: 400 }}
           classes={{ container: classes.container, root: classes.header }}>
-          {!hideName && (
+          {!hideName && !isSm && (
             <Typography style={{ lineHeight: '12px' }}>
               N<sup>o</sup>
             </Typography>

src/components/Stats/TokenListItem/style.ts

@@ -12,14 +12,10 @@ export const useStyles = makeStyles()((theme: Theme) => ({
     whiteSpace: 'nowrap',
 
     [theme.breakpoints.down('sm')]: {
-      gridTemplateColumns: '5% 35% 15% 17.5% 16.5% 15%',
+      gridTemplateColumns: '30% 22.5% 32.5% 15%',
       '& p': {
-        ...typography.caption2
+        ...typography.caption1
       }
-    },
-
-    [theme.breakpoints.down('xs')]: {
-      gridTemplateColumns: '15% 25% 35% 25%'
     }
   },
 

src/components/Stats/Volume/Volume.tsx

@@ -7,7 +7,7 @@ import { useStyles } from './style'
 import { TimeData } from '@store/reducers/stats'
 import { Grid, Typography, useMediaQuery } from '@mui/material'
 import { Box } from '@mui/system'
-import { formatNumber, formatNumbers, showPrefix } from '@utils/utils'
+import { formatNumber } from '@utils/utils'
 
 interface StatsInterface {
   percentVolume: number
@@ -38,10 +38,7 @@ const Volume: React.FC<StatsInterface> = ({ percentVolume, volume, data, classNa
       <Box className={classes.volumeContainer}>
         <Typography className={classes.volumeHeader}>Volume</Typography>
         <div className={classes.volumePercentContainer}>
-          <Typography className={classes.volumePercentHeader}>
-            ${formatNumbers()(volume.toString())}
-            {showPrefix(volume)}
-          </Typography>
+          <Typography className={classes.volumePercentHeader}>${formatNumber(volume)}</Typography>
           <Box className={classes.volumeStatusContainer}>
             <Box
               className={classNames(

src/components/Stats/volumeBar/VolumeBar.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames'
 import { theme } from '@static/theme'
 import { useStyles } from './style'
 import { Box, Grid, Typography, useMediaQuery } from '@mui/material'
-import { formatNumbers, showPrefix } from '@utils/utils'
+import { formatNumber } from '@utils/utils'
 
 interface Iprops {
   percentVolume: number
@@ -30,10 +30,7 @@ const VolumeBar: React.FC<Iprops> = ({
     <Grid container classes={{ container: classes.container }}>
       <Box className={classes.tokenName}>
         <Typography className={classes.tokenHeader}>Volume 24H:</Typography>
-        <Typography className={classes.tokenContent}>
-          ${formatNumbers()(volume.toString())}
-          {showPrefix(volume)}
-        </Typography>
+        <Typography className={classes.tokenContent}>${formatNumber(volume)}</Typography>
         {!isXDown && (
           <Typography
             className={classNames(
@@ -48,10 +45,7 @@ const VolumeBar: React.FC<Iprops> = ({
       </Box>
       <Box className={classes.tokenName}>
         <Typography className={classes.tokenHeader}>TVL 24H:</Typography>
-        <Typography className={classes.tokenContent}>
-          ${formatNumbers()(tvlVolume.toString())}
-          {showPrefix(tvlVolume)}
-        </Typography>
+        <Typography className={classes.tokenContent}>${formatNumber(tvlVolume)}</Typography>
         {!isXDown && (
           <Typography
             className={classNames(
@@ -64,10 +58,7 @@ const VolumeBar: React.FC<Iprops> = ({
       </Box>
       <Box className={classes.tokenName}>
         <Typography className={classes.tokenHeader}>Fees 24H:</Typography>
-        <Typography className={classes.tokenContent}>
-          ${formatNumbers()(feesVolume.toString())}
-          {showPrefix(feesVolume)}
-        </Typography>
+        <Typography className={classes.tokenContent}>${formatNumber(feesVolume)}</Typography>
         {!isXDown && (
           <Typography
             className={classNames(

src/components/Swap/Swap.tsx

@@ -11,6 +11,7 @@ import settingIcon from '@static/svg/settings.svg'
 import SwapArrows from '@static/svg/swap-arrows.svg'
 import {
   DEFAULT_TOKEN_DECIMAL,
+  MAX,
   REFRESHER_INTERVAL,
   SWAP_SAFE_TRANSACTION_FEE
 } from '@store/consts/static'
@@ -353,7 +354,7 @@ export const Swap: React.FC<ISwap> = ({
     if (
       tokenFrom !== null &&
       convertBalanceToBigint(amountFrom, Number(tokens[tokenFrom]?.decimals ?? 0n)) !== 0n &&
-      isError(SwapError.Unknown)
+      (amountFrom.replace('.', '') == MAX.toString() || amountTo === '')
     ) {
       return 'Not enough liquidity'
     }

src/containers/NewPositionWrapper/NewPositionWrapper.tsx

@@ -10,7 +10,7 @@ import { PERCENTAGE_SCALE } from '@invariant-labs/a0-sdk/target/consts'
 import {
   ALL_FEE_TIERS_DATA,
   DEFAULT_NEW_POSITION_SLIPPAGE,
-  U128MAX,
+  MAX,
   bestTiers,
   commonTokensForNetworks
 } from '@store/consts/static'
@@ -461,7 +461,7 @@ export const NewPositionWrapper: React.FC<IProps> = ({
       }
     } catch (error) {
       setIsGetLiquidityError(true)
-      return printBigint(U128MAX, tokens[tokenA].decimals)
+      return printBigint(MAX, tokens[tokenA].decimals)
     }
 
     try {
@@ -480,7 +480,7 @@ export const NewPositionWrapper: React.FC<IProps> = ({
       return tokenXAmount
     } catch (error) {
       setIsGetLiquidityError(true)
-      return printBigint(U128MAX, tokens[tokenB].decimals)
+      return printBigint(MAX, tokens[tokenB].decimals)
     }
 
     return BigInt(0)

src/store/consts/static.ts

@@ -248,7 +248,7 @@ export const ALL_FEE_TIERS_DATA = FEE_TIERS.map((tier, index) => ({
   primaryIndex: index
 }))
 
-export const U128MAX = 2n ** 128n - 1n
+export const MAX = 2n ** 128n - 1n
 
 export const SWAP_SAFE_TRANSACTION_FEE = BigInt(Math.ceil(0.1 * 10 ** 12))
 export const POOL_SAFE_TRANSACTION_FEE = BigInt(Math.ceil(0.2 * 10 ** 12))

src/store/sagas/positions.ts

@@ -12,7 +12,7 @@ import {
   POOL_SAFE_TRANSACTION_FEE,
   POSITIONS_PER_QUERY,
   PSP22_APPROVE_OPTIONS,
-  U128MAX,
+  MAX,
   WAZERO_DEPOSIT_OPTIONS
 } from '@store/consts/static'
 import {
@@ -56,7 +56,7 @@ export function getWithdrawAllWAZEROTxs(
 ): SubmittableExtrinsic[] {
   const txs: SubmittableExtrinsic[] = []
 
-  const approveTx = psp22.approveTx(invariantAddress, U128MAX, wazeroAddress, PSP22_APPROVE_OPTIONS)
+  const approveTx = psp22.approveTx(invariantAddress, MAX, wazeroAddress, PSP22_APPROVE_OPTIONS)
   txs.push(approveTx)
 
   const unwrapTx = invariant.withdrawAllWAZEROTx(wazeroAddress, INVARIANT_WITHDRAW_ALL_WAZERO)

src/store/sagas/swap.ts

@@ -16,7 +16,7 @@ import {
   INVARIANT_SWAP_OPTIONS,
   PSP22_APPROVE_OPTIONS,
   SWAP_SAFE_TRANSACTION_FEE,
-  U128MAX,
+  MAX,
   WAZERO_DEPOSIT_OPTIONS,
   WAZERO_WITHDRAW_OPTIONS
 } from '@store/consts/static'
@@ -279,7 +279,7 @@ export function* handleGetSimulateResult(action: PayloadAction<Simulate>) {
     }
 
     let poolKey = null
-    let amountOut = byAmountIn ? 0n : U128MAX
+    let amountOut = byAmountIn ? 0n : MAX
     let insufficientLiquidityAmountOut = 0n
     let priceImpact = 0
     let targetSqrtPrice = 0n