Bumped sdk, update common tokens, added TIA and sTIA, fixed coingecko price

.github/workflows/deploy-prod.yml

@@ -7,6 +7,7 @@ on:
 jobs:
   upload:
     runs-on: ubuntu-latest
+    permissions: write-all
     steps:
       - name: Checkout
         uses: actions/checkout@v2

.github/workflows/deploy-staging.yml

@@ -7,6 +7,7 @@ on:
 jobs:
   upload:
     runs-on: ubuntu-latest
+    permissions: write-all
     steps:
       - name: Checkout
         uses: actions/checkout@v2

.github/workflows/preview.yml

@@ -22,6 +22,7 @@ jobs:
 
   upload:
     runs-on: ubuntu-latest
+    permissions: write-all
     steps:
       - name: Checkout
         uses: actions/checkout@v3

package.json

@@ -19,7 +19,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
-    "@invariant-labs/sdk-eclipse": "^0.0.22",
+    "@invariant-labs/sdk-eclipse": "^0.0.25",
     "@irys/web-upload": "^0.0.13",
     "@irys/web-upload-solana": "^0.1.6",
     "@metaplex-foundation/js": "^0.20.1",

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

@@ -128,7 +128,8 @@ export const Primary: Story = {
     setTokenAIndex: fn(),
     setTokenBIndex: fn(),
     tokenAIndex: 0,
-    tokenBIndex: 1
+    tokenBIndex: 1,
+    canNavigate: true
   },
   render: args => <PrimaryComponent {...args} />
 }

src/components/NewPosition/DepositSelector/DepositSelector.tsx

@@ -84,6 +84,7 @@ export interface IDepositSelector {
   tokenBIndex: number | null
   setTokenAIndex: (index: number | null) => void
   setTokenBIndex: (index: number | null) => void
+  canNavigate: boolean
 }
 
 export const DepositSelector: React.FC<IDepositSelector> = ({
@@ -121,7 +122,8 @@ export const DepositSelector: React.FC<IDepositSelector> = ({
   walletStatus,
   onConnectWallet,
   onDisconnectWallet,
-  ethBalance
+  ethBalance,
+  canNavigate
 }) => {
   const { classes } = useStyles()
 
@@ -185,6 +187,29 @@ export const DepositSelector: React.FC<IDepositSelector> = ({
     setIsLoaded(true)
   }, [tokens, initialTokenFrom, initialTokenTo, initialFee])
 
+  const [wasRunTokenA, setWasRunTokenA] = useState(false)
+  const [wasRunTokenB, setWasRunTokenB] = useState(false)
+
+  useEffect(() => {
+    if (canNavigate) {
+      const tokenAIndex = tokens.findIndex(
+        token => token.assetAddress.toString() === tickerToAddress(network, initialTokenFrom)
+      )
+      if (!wasRunTokenA && tokenAIndex !== -1) {
+        setTokenAIndex(tokenAIndex)
+        setWasRunTokenA(true)
+      }
+
+      const tokenBIndex = tokens.findIndex(
+        token => token.assetAddress.toString() === tickerToAddress(network, initialTokenTo)
+      )
+      if (!wasRunTokenB && tokenBIndex !== -1) {
+        setTokenBIndex(tokenBIndex)
+        setWasRunTokenB(true)
+      }
+    }
+  }, [wasRunTokenA, wasRunTokenB, canNavigate, tokens.length])
+
   const getButtonMessage = useCallback(() => {
     if (tokenAIndex === null || tokenBIndex === null) {
       return 'Select tokens'

src/components/NewPosition/NewPosition.stories.tsx

@@ -110,7 +110,8 @@ export const Primary: Story = {
     walletStatus: Status.Initialized,
     onConnectWallet: () => {},
     onDisconnectWallet: () => {},
-    poolAddress: ''
+    poolAddress: '',
+    canNavigate: true
   },
   render: () => {
     return (
@@ -171,6 +172,7 @@ export const Primary: Story = {
         onConnectWallet={() => {}}
         onDisconnectWallet={() => {}}
         poolAddress=''
+        canNavigate={true}
       />
     )
   }

src/components/NewPosition/NewPosition.tsx

@@ -119,6 +119,7 @@ export interface INewPosition {
   walletStatus: Status
   onConnectWallet: () => void
   onDisconnectWallet: () => void
+  canNavigate: boolean
 }
 
 export const NewPosition: React.FC<INewPosition> = ({
@@ -174,7 +175,8 @@ export const NewPosition: React.FC<INewPosition> = ({
   ethBalance,
   walletStatus,
   onConnectWallet,
-  onDisconnectWallet
+  onDisconnectWallet,
+  canNavigate
 }) => {
   const { classes } = useStyles()
   const navigate = useNavigate()
@@ -431,20 +433,21 @@ export const NewPosition: React.FC<INewPosition> = ({
   }
 
   const updatePath = (index1: number | null, index2: number | null, fee: number) => {
-    const parsedFee = parseFeeToPathFee(+ALL_FEE_TIERS_DATA[fee].tier.fee)
-
-    if (index1 != null && index2 != null) {
-      const token1Symbol = addressToTicker(network, tokens[index1].assetAddress.toString())
-      const token2Symbol = addressToTicker(network, tokens[index2].assetAddress.toString())
-      navigate(`/newPosition/${token1Symbol}/${token2Symbol}/${parsedFee}`, { replace: true })
-    } else if (index1 != null) {
-      const tokenSymbol = addressToTicker(network, tokens[index1].assetAddress.toString())
-      navigate(`/newPosition/${tokenSymbol}/${parsedFee}`, { replace: true })
-    } else if (index2 != null) {
-      const tokenSymbol = addressToTicker(network, tokens[index2].assetAddress.toString())
-      navigate(`/newPosition/${tokenSymbol}/${parsedFee}`, { replace: true })
-    } else if (fee != null) {
-      navigate(`/newPosition/${parsedFee}`, { replace: true })
+    if (canNavigate) {
+      const parsedFee = parseFeeToPathFee(+ALL_FEE_TIERS_DATA[fee].tier.fee)
+      if (index1 != null && index2 != null) {
+        const token1Symbol = addressToTicker(network, tokens[index1].assetAddress.toString())
+        const token2Symbol = addressToTicker(network, tokens[index2].assetAddress.toString())
+        navigate(`/newPosition/${token1Symbol}/${token2Symbol}/${parsedFee}`, { replace: true })
+      } else if (index1 != null) {
+        const tokenSymbol = addressToTicker(network, tokens[index1].assetAddress.toString())
+        navigate(`/newPosition/${tokenSymbol}/${parsedFee}`, { replace: true })
+      } else if (index2 != null) {
+        const tokenSymbol = addressToTicker(network, tokens[index2].assetAddress.toString())
+        navigate(`/newPosition/${tokenSymbol}/${parsedFee}`, { replace: true })
+      } else if (fee != null) {
+        navigate(`/newPosition/${parsedFee}`, { replace: true })
+      }
     }
   }
 
@@ -703,6 +706,7 @@ export const NewPosition: React.FC<INewPosition> = ({
           walletStatus={walletStatus}
           onConnectWallet={onConnectWallet}
           onDisconnectWallet={onDisconnectWallet}
+          canNavigate={canNavigate}
         />
         <Hidden mdUp>
           <Grid container justifyContent='end' mb={2}>

src/components/Stats/PoolList/PoolList.tsx

@@ -15,6 +15,8 @@ interface PoolListInterface {
     volume: number
     TVL: number
     fee: number
+    addressFrom: string
+    addressTo: string
     apy: number
     apyData: {
       fees: number
@@ -79,7 +81,12 @@ const PoolList: React.FC<PoolListInterface> = ({ data, network }) => {
 
   return (
     <Grid container direction='column' classes={{ root: classes.container }}>
-      <PoolListItem displayType='header' onSort={setSortType} sortType={sortType} />
+      <PoolListItem
+        displayType='header'
+        onSort={setSortType}
+        sortType={sortType}
+        network={network}
+      />
       {paginator(page).map((element, index) => (
         <PoolListItem
           displayType='token'
@@ -95,8 +102,8 @@ const PoolList: React.FC<PoolListInterface> = ({ data, network }) => {
           hideBottomLine={pages === 1 && index + 1 === data.length}
           apyData={element.apyData}
           key={index}
-          // addressFrom={element.addressFrom}
-          // addressTo={element.addressTo}
+          addressFrom={element.addressFrom}
+          addressTo={element.addressTo}
           network={network}
           isUnknownFrom={element.isUnknownFrom}
           isUnknownTo={element.isUnknownTo}

src/components/Stats/PoolListItem/PoolListItem.tsx

@@ -8,9 +8,10 @@ import { useNavigate } from 'react-router-dom'
 import icons from '@static/icons'
 import { NetworkType, SortTypePoolList } from '@store/consts/static'
 import { TooltipHover } from '@components/TooltipHover/TooltipHover'
-import { parseFeeToPathFee } from '@utils/utils'
+import { addressToTicker, parseFeeToPathFee } from '@utils/utils'
 import { DECIMAL } from '@invariant-labs/sdk-eclipse/lib/utils'
 import { formatNumber } from '@utils/utils'
+import { shortenAddress } from '@utils/uiUtils'
 
 interface IProps {
   TVL?: number
@@ -27,7 +28,7 @@ interface IProps {
   hideBottomLine?: boolean
   addressFrom?: string
   addressTo?: string
-  network?: NetworkType
+  network: NetworkType
   apy?: number
   apyData?: {
     fees: number
@@ -51,9 +52,9 @@ const PoolListItem: React.FC<IProps> = ({
   sortType,
   onSort,
   hideBottomLine = false,
-  // addressFrom,
-  // addressTo,
-  // network
+  addressFrom,
+  addressTo,
+  network,
   // apy = 0,
   // apyData = {
   //   fees: 0,
@@ -70,12 +71,16 @@ const PoolListItem: React.FC<IProps> = ({
 
   const handleOpenPosition = () => {
     navigate(
-      `/newPosition/${symbolFrom ?? ''}/${symbolTo ?? ''}/${parseFeeToPathFee(Math.round(fee * 10 ** (DECIMAL - 2)))}`
+      `/newPosition/${addressToTicker(network, addressFrom ?? '')}/${addressToTicker(network, addressTo ?? '')}/${parseFeeToPathFee(Math.round(fee * 10 ** (DECIMAL - 2)))}`,
+      { state: { referer: 'stats' } }
     )
   }
 
   const handleOpenSwap = () => {
-    navigate(`/exchange/${symbolFrom ?? ''}/${symbolTo ?? ''}`)
+    navigate(
+      `/exchange/${addressToTicker(network, addressFrom ?? '')}/${addressToTicker(network, addressTo ?? '')}`,
+      { state: { referer: 'stats' } }
+    )
   }
 
   return (
@@ -101,7 +106,7 @@ const PoolListItem: React.FC<IProps> = ({
             )}
             <Grid className={classes.symbolsContainer}>
               <Typography>
-                {symbolFrom}/{symbolTo}
+                {shortenAddress(symbolFrom ?? '')}/{shortenAddress(symbolTo ?? '')}
               </Typography>
             </Grid>
           </Grid>

src/components/Stats/PoolListItem/Stats.PoolListItem.stories.tsx

@@ -4,7 +4,7 @@ import PoolListItem from './PoolListItem'
 import { store } from '@store/index'
 import { Provider } from 'react-redux'
 import { fn } from '@storybook/test'
-import { SortTypePoolList } from '@store/consts/static'
+import { NetworkType, SortTypePoolList } from '@store/consts/static'
 
 const meta = {
   title: 'Stats/PoolListItem',
@@ -29,7 +29,8 @@ export const Header: Story = {
   args: {
     displayType: 'header',
     onSort: fn(),
-    sortType: SortTypePoolList.TVL_DESC
+    sortType: SortTypePoolList.TVL_DESC,
+    network: NetworkType.Mainnet
   }
 }
 
@@ -46,6 +47,7 @@ export const Token: Story = {
     fee: 0.3,
     volume: 1000000000,
     TVL: 500000000,
-    hideBottomLine: false
+    hideBottomLine: false,
+    network: NetworkType.Mainnet
   }
 }

src/components/Stats/TokenListItem/TokenListItem.tsx

@@ -7,6 +7,7 @@ import { Box, Grid, Typography, useMediaQuery } from '@mui/material'
 import { formatNumber } from '@utils/utils'
 import { SortTypeTokenList } from '@store/consts/static'
 import icons from '@static/icons'
+import { shortenAddress } from '@utils/uiUtils'
 
 interface IProps {
   displayType: string
@@ -61,8 +62,10 @@ const TokenListItem: React.FC<IProps> = ({
               </Box>
             )}
             <Typography>
-              {hideName ? symbol : name}
-              {!hideName && <span className={classes.tokenSymbol}>{` (${symbol})`}</span>}
+              {hideName ? shortenAddress(symbol) : name}
+              {!hideName && (
+                <span className={classes.tokenSymbol}>{` (${shortenAddress(symbol)})`}</span>
+              )}
             </Typography>
           </Grid>
           <Typography>{`~$${formatNumber(price)}`}</Typography>

src/components/Swap/Swap.stories.tsx

@@ -105,7 +105,8 @@ export const Primary: Story = {
     unwrapWETH: fn(),
     wrappedETHAccountExist: true,
     deleteTimeoutError: fn(),
-    isTimeoutError: false
+    isTimeoutError: false,
+    canNavigate: true
   },
   render: args => {
     return <Swap {...args} />