Update staging

package.json

@@ -17,7 +17,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
-    "@invariant-labs/a0-sdk": "^0.2.20",
+    "@invariant-labs/a0-sdk": "^0.2.24",
     "@mui/icons-material": "^5.15.15",
     "@mui/material": "^5.15.15",
     "@nightlylabs/wallet-selector-polkadot": "^0.2.5",

src/components/NewPosition/DepositSelector/DepositSelector.stories.tsx

@@ -115,7 +115,8 @@ export const Primary: Story = {
     isBalanceLoading: false,
     isGetLiquidityError: false,
     ticksLoading: false,
-    network: Network.Testnet
+    network: Network.Testnet,
+    azeroBalance: 20000000000000 as any
   },
   render: args => <PrimaryComponent {...args} />
 }

src/components/NewPosition/DepositSelector/DepositSelector.tsx

@@ -3,7 +3,7 @@ import DepositAmountInput from '@components/Inputs/DepositAmountInput/DepositAmo
 import Select from '@components/Inputs/Select/Select'
 import { Grid, Typography } from '@mui/material'
 import SwapList from '@static/svg/swap-list.svg'
-import { ALL_FEE_TIERS_DATA } from '@store/consts/static'
+import { ALL_FEE_TIERS_DATA, POOL_SAFE_TRANSACTION_FEE } from '@store/consts/static'
 import {
   convertBalanceToBigint,
   getScaleFromString,
@@ -63,6 +63,7 @@ export interface IDepositSelector {
   isGetLiquidityError: boolean
   ticksLoading: boolean
   network: Network
+  azeroBalance: bigint
 }
 
 export const DepositSelector: React.FC<IDepositSelector> = ({
@@ -96,7 +97,8 @@ export const DepositSelector: React.FC<IDepositSelector> = ({
   isBalanceLoading,
   isGetLiquidityError,
   ticksLoading,
-  network
+  network,
+  azeroBalance
 }) => {
   const { classes } = useStyles()
 
@@ -120,27 +122,28 @@ export const DepositSelector: React.FC<IDepositSelector> = ({
   const [isLoaded, setIsLoaded] = useState<boolean>(false)
 
   useEffect(() => {
-    if (isLoaded || Object.keys(tokens).length === 0 || ALL_FEE_TIERS_DATA.length === 0) {
-      return
+    if (!isLoaded || Object.keys(tokens).length !== 0 || ALL_FEE_TIERS_DATA.length !== 0) {
+      const tokenAFromPath =
+        tokens[tickerToAddress(network, initialTokenFrom)]?.assetAddress || null
+      const tokenBFromPath = tokens[tickerToAddress(network, initialTokenTo)]?.assetAddress || null
+      let feeTierIndexFromPath = 0
+
+      const parsedFee = parsePathFeeToFeeString(initialFee)
+
+      ALL_FEE_TIERS_DATA.forEach((feeTierData, index) => {
+        if (feeTierData.tier.fee.toString() === parsedFee) {
+          feeTierIndexFromPath = index
+        }
+      })
+
+      setTokenA(tokenAFromPath)
+      setTokenB(tokenBFromPath)
+      setPositionTokens(tokenAFromPath, tokenBFromPath, feeTierIndexFromPath)
+
+      setIsLoaded(true)
+    } else {
+      setIsLoaded(false)
     }
-
-    const tokenAFromPath = tokens[tickerToAddress(network, initialTokenFrom)]?.assetAddress || null
-    const tokenBFromPath = tokens[tickerToAddress(network, initialTokenTo)]?.assetAddress || null
-    let feeTierIndexFromPath = 0
-
-    const parsedFee = parsePathFeeToFeeString(initialFee)
-
-    ALL_FEE_TIERS_DATA.forEach((feeTierData, index) => {
-      if (feeTierData.tier.fee.toString() === parsedFee) {
-        feeTierIndexFromPath = index
-      }
-    })
-
-    setTokenA(tokenAFromPath)
-    setTokenB(tokenBFromPath)
-    setPositionTokens(tokenAFromPath, tokenBFromPath, feeTierIndexFromPath)
-
-    setIsLoaded(true)
   }, [Object.keys(tokens).length])
 
   const getButtonMessage = useCallback(() => {
@@ -178,6 +181,10 @@ export const DepositSelector: React.FC<IDepositSelector> = ({
       return `Not enough ${tokens[tokenB].symbol}`
     }
 
+    if (azeroBalance < POOL_SAFE_TRANSACTION_FEE) {
+      return `Insufficient AZERO`
+    }
+
     if (
       (!tokenAInputState.blocked && +tokenAInputState.value === 0) ||
       (!tokenBInputState.blocked && +tokenBInputState.value === 0)
@@ -380,21 +387,43 @@ export const DepositSelector: React.FC<IDepositSelector> = ({
           isBalanceLoading={isBalanceLoading}
         />
       </Grid>
-
-      <AnimatedButton
-        className={classNames(
-          classes.addButton,
-          progress === 'none' ? classes.hoverButton : undefined
-        )}
-        onClick={() => {
-          if (progress === 'none') {
-            onAddLiquidity()
-          }
-        }}
-        disabled={getButtonMessage() !== 'Add Position'}
-        content={getButtonMessage()}
-        progress={progress}
-      />
+      {getButtonMessage() === 'Insufficient AZERO' ? (
+        <TooltipHover
+          text='More AZERO is required to cover the transaction fee. Obtain more AZERO to complete this transaction.'
+          top={-10}>
+          <div>
+            <AnimatedButton
+              className={classNames(
+                classes.addButton,
+                progress === 'none' ? classes.hoverButton : undefined
+              )}
+              onClick={() => {
+                if (progress === 'none') {
+                  onAddLiquidity()
+                }
+              }}
+              disabled={getButtonMessage() !== 'Add Position'}
+              content={getButtonMessage()}
+              progress={progress}
+            />
+          </div>
+        </TooltipHover>
+      ) : (
+        <AnimatedButton
+          className={classNames(
+            classes.addButton,
+            progress === 'none' ? classes.hoverButton : undefined
+          )}
+          onClick={() => {
+            if (progress === 'none') {
+              onAddLiquidity()
+            }
+          }}
+          disabled={getButtonMessage() !== 'Add Position'}
+          content={getButtonMessage()}
+          progress={progress}
+        />
+      )}
     </Grid>
   )
 }

src/components/NewPosition/DepositSelector/style.ts

@@ -6,8 +6,7 @@ export const useStyles = makeStyles()(theme => {
     wrapper: {
       borderRadius: 10,
       backgroundColor: colors.invariant.component,
-      padding: 24,
-      paddingTop: 16,
+      padding: '16px 24px 16px 24px',
       flex: '1 1 0%',
 
       [theme.breakpoints.down('sm')]: {

src/components/NewPosition/NewPosition.stories.tsx

@@ -76,7 +76,8 @@ export const Primary: Story = {
     onlyUserPositions: false,
     setOnlyUserPositions: fn(),
     network: Network.Testnet,
-    isLoadingTokens: false
+    isLoadingTokens: false,
+    azeroBalance: 20000000000000 as any
   },
   render: () => {
     return (
@@ -137,6 +138,7 @@ export const Primary: Story = {
         setOnlyUserPositions={fn()}
         network={Network.Testnet}
         isLoadingTokens={false}
+        azeroBalance={20000000000000n}
       />
     )
   }

src/components/NewPosition/NewPosition.tsx

@@ -105,6 +105,7 @@ export interface INewPosition {
   setOnlyUserPositions: (val: boolean) => void
   network: Network
   isLoadingTokens: boolean
+  azeroBalance: bigint
 }
 
 export const NewPosition: React.FC<INewPosition> = ({
@@ -158,7 +159,8 @@ export const NewPosition: React.FC<INewPosition> = ({
   onlyUserPositions,
   setOnlyUserPositions,
   network,
-  isLoadingTokens
+  isLoadingTokens,
+  azeroBalance
 }) => {
   const { classes } = useStyles()
   const navigate = useNavigate()
@@ -682,6 +684,7 @@ export const NewPosition: React.FC<INewPosition> = ({
           isGetLiquidityError={isGetLiquidityError}
           ticksLoading={ticksLoading}
           network={network}
+          azeroBalance={azeroBalance}
         />
         <Hidden mdUp>
           <Grid container justifyContent='end' mb={2}>

src/components/PositionsList/PositionsList.tsx

@@ -108,7 +108,9 @@ export const PositionsList: React.FC<IProps> = ({
         <Grid className={classes.searchRoot}>
           <Grid className={classes.titleBar}>
             <Typography className={classes.title}>Your Positions</Typography>
-            <Typography className={classes.positionsNumber}>{String(length)}</Typography>
+            <TooltipHover text='Total number of your positions'>
+              <Typography className={classes.positionsNumber}>{String(length)}</Typography>
+            </TooltipHover>
           </Grid>
           <Grid className={classes.searchWrapper}>
             <InputBase

src/components/Refresher/Refresher.tsx

@@ -1,5 +1,6 @@
 import { createRef, useEffect, useState } from 'react'
 import { useStyles } from './style'
+import { Box } from '@mui/material'
 
 type Props = {
   currentIndex: number
@@ -30,21 +31,23 @@ export const Refresher = ({ currentIndex, maxIndex, onClick }: Props) => {
   }, [circleRef, currentIndex, maxIndex])
 
   return (
-    <svg className={classes.ring} width='20' height='20' onClick={onClick}>
-      <circle stroke='#3A466B' strokeWidth='2' fill='transparent' r='8' cx='10' cy='10' />
-      <circle
-        className={classes.innerCircle}
-        strokeDasharray='0'
-        strokeDashoffset='0'
-        stroke='#EF84F5'
-        strokeWidth='2'
-        fill='transparent'
-        r='8'
-        cx='10'
-        cy='10'
-        ref={circleRef}
-      />
-    </svg>
+    <Box width={20} height={20}>
+      <svg className={classes.ring} width='20' height='20' onClick={onClick}>
+        <circle stroke='#3A466B' strokeWidth='2' fill='transparent' r='8' cx='10' cy='10' />
+        <circle
+          className={classes.innerCircle}
+          strokeDasharray='0'
+          strokeDashoffset='0'
+          stroke='#EF84F5'
+          strokeWidth='2'
+          fill='transparent'
+          r='8'
+          cx='10'
+          cy='10'
+          ref={circleRef}
+        />
+      </svg>
+    </Box>
   )
 }
 

src/components/Stats/TokenListItem/TokenListItem.tsx

@@ -14,7 +14,7 @@ interface IProps {
   name?: string
   symbol?: string
   price?: number
-  priceChange?: number
+  // priceChange?: number
   volume?: number
   TVL?: number
   sortType?: SortTypeTokenList
@@ -29,15 +29,15 @@ const TokenListItem: React.FC<IProps> = ({
   name = 'Bitcoin',
   symbol = 'BTCIcon',
   price = 0,
-  priceChange = 0,
+  // priceChange = 0,
   volume = 0,
   TVL = 0,
   sortType,
   onSort,
   hideBottomLine = false
 }) => {
   const { classes } = useStyles()
-  const isNegative = priceChange < 0
+  // const isNegative = priceChange < 0
 
   const isXDown = useMediaQuery(theme.breakpoints.down('sm'))
   const hideName = useMediaQuery(theme.breakpoints.down('xs'))
@@ -58,11 +58,11 @@ const TokenListItem: React.FC<IProps> = ({
             </Typography>
           </Grid>
           <Typography>{`~$${formatNumbers()(price.toString())}${showPrefix(price)}`}</Typography>
-          {!hideName && (
+          {/* {!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>
         </Grid>
@@ -108,7 +108,7 @@ const TokenListItem: React.FC<IProps> = ({
               <ArrowDropDownIcon className={classes.icon} />
             ) : null}
           </Typography>
-          {!hideName && (
+          {/* {!hideName && (
             <Typography
               style={{ cursor: 'pointer' }}
               onClick={() => {
@@ -125,7 +125,7 @@ const TokenListItem: React.FC<IProps> = ({
                 <ArrowDropDownIcon className={classes.icon} />
               ) : null}
             </Typography>
-          )}
+          )} */}
           <Typography
             style={{ cursor: 'pointer' }}
             onClick={() => {

src/components/Stats/TokenListItem/style.ts

@@ -5,7 +5,7 @@ import { makeStyles } from 'tss-react/mui'
 export const useStyles = makeStyles()((theme: Theme) => ({
   container: {
     display: 'grid',
-    gridTemplateColumns: '5% 35% 15% 15% 15% 15%',
+    gridTemplateColumns: '5% 35% 20% 20% 20%',
     padding: '18px 0 ',
     backgroundColor: colors.invariant.component,
     borderBottom: `1px solid ${colors.invariant.light}`,

src/components/Stats/TokensList/TokensList.tsx

@@ -11,7 +11,6 @@ export interface ITokensListData {
   name: string
   symbol: string
   price: number
-  priceChange: number
   volume: number
   TVL: number
 }
@@ -45,10 +44,10 @@ const TokensList: React.FC<ITokensList> = ({ data }) => {
         return data.sort((a, b) => a.price - b.price)
       case SortTypeTokenList.PRICE_DESC:
         return data.sort((a, b) => b.price - a.price)
-      case SortTypeTokenList.CHANGE_ASC:
-        return data.sort((a, b) => a.priceChange - b.priceChange)
-      case SortTypeTokenList.CHANGE_DESC:
-        return data.sort((a, b) => b.priceChange - a.priceChange)
+      // case SortTypeTokenList.CHANGE_ASC:
+      //   return data.sort((a, b) => a.priceChange - b.priceChange)
+      // case SortTypeTokenList.CHANGE_DESC:
+      //   return data.sort((a, b) => b.priceChange - a.priceChange)
       case SortTypeTokenList.VOLUME_ASC:
         return data.sort((a, b) => (a.volume === b.volume ? a.TVL - b.TVL : a.volume - b.volume))
       case SortTypeTokenList.VOLUME_DESC:
@@ -96,7 +95,7 @@ const TokensList: React.FC<ITokensList> = ({ data }) => {
             name={token.name}
             symbol={token.symbol}
             price={token.price}
-            priceChange={token.priceChange}
+            // priceChange={token.priceChange}
             volume={token.volume}
             TVL={token.TVL}
             hideBottomLine={pages === 1 && index + 1 === data.length}

src/components/Swap/Swap.stories.tsx

@@ -67,7 +67,8 @@ export const Primary: Story = {
     },
     simulateSwap: fn(),
     copyTokenAddressHandler: fn(),
-    network: Network.Testnet
+    network: Network.Testnet,
+    azeroBalance: 20000000000000 as any
   },
   render: args => {
     return (