Merge pull request #163 from invariant-labs/dev

Update staging env

index.html

@@ -69,9 +69,6 @@
 
     <link rel="canonical" href="https://invariant.app/" />
     <link rel="manifest" href="/manifest.json" />
-    <meta
-      http-equiv="Content-Security-Policy"
-      content="script-src 'self' 'wasm-unsafe-eval' https://www.googletagmanager.com; object-src 'none';" />
 
     <style>
       html {

src/components/NewPosition/NewPosition.tsx

@@ -429,9 +429,9 @@ export const NewPosition: React.FC<INewPosition> = ({
 
   useEffect(() => {
     const timeout = setTimeout(() => {
-      if (refresherTime > 0 && poolKey !== '') {
+      if (refresherTime > 0 && isCurrentPoolExisting) {
         setRefresherTime(refresherTime - 1)
-      } else {
+      } else if (isCurrentPoolExisting) {
         onRefresh()
         setRefresherTime(REFRESHER_INTERVAL)
       }

src/components/PositionsList/PositionsList.stories.tsx

@@ -96,6 +96,7 @@ export const Primary: Story = {
     searchSetValue: () => {},
     handleRefresh: () => {},
     initialPage: 1,
-    setLastPage: () => {}
+    setLastPage: () => {},
+    pageChanged: () => {}
   }
 }

src/components/PositionsList/PositionsList.tsx

@@ -22,6 +22,7 @@ interface IProps {
   searchValue: string
   searchSetValue: (value: string) => void
   handleRefresh: () => void
+  pageChanged: (page: number) => void
 }
 
 export const PositionsList: React.FC<IProps> = ({
@@ -35,7 +36,8 @@ export const PositionsList: React.FC<IProps> = ({
   itemsPerPage,
   searchValue,
   searchSetValue,
-  handleRefresh
+  handleRefresh,
+  pageChanged
 }) => {
   const { classes } = useStyles()
   const navigate = useNavigate()
@@ -77,6 +79,10 @@ export const PositionsList: React.FC<IProps> = ({
     handleChangePagination(initialPage)
   }, [initialPage])
 
+  useEffect(() => {
+    pageChanged(page)
+  }, [page])
+
   return (
     <Grid container direction='column' className={classes.root}>
       <Grid

src/containers/NewPositionWrapper/NewPositionWrapper.tsx

@@ -30,8 +30,7 @@ import {
   isLoadingTicksAndTickMaps,
   poolKeys,
   pools,
-  poolsArraySortedByFees,
-  isLoadingPoolKeys
+  poolsArraySortedByFees
 } from '@store/selectors/pools'
 import { initPosition, plotTicks, shouldNotUpdateRange } from '@store/selectors/positions'
 import { address, balanceLoading, status, swapTokens } from '@store/selectors/wallet'
@@ -60,7 +59,6 @@ export const NewPositionWrapper: React.FC<IProps> = ({
   const poolsData = useSelector(pools)
   const loadingTicksAndTickMaps = useSelector(isLoadingTicksAndTickMaps)
   const isBalanceLoading = useSelector(balanceLoading)
-  const loadingPoolKeys = useSelector(isLoadingPoolKeys)
   const shouldNotUpdatePriceRange = useSelector(shouldNotUpdateRange)
 
   const { success, inProgress } = useSelector(initPosition)
@@ -196,8 +194,8 @@ export const NewPositionWrapper: React.FC<IProps> = ({
       return false
     }
 
-    return isFetchingNewPool || loadingPoolKeys
-  }, [isFetchingNewPool, poolKey, loadingPoolKeys])
+    return isFetchingNewPool
+  }, [isFetchingNewPool, poolKey])
 
   useEffect(() => {
     if (initialLoader && !isWaitingForNewPool) {

src/containers/WrappedPositionsList/WrappedPositionsList.tsx

@@ -2,12 +2,17 @@ import { PositionsList } from '@components/PositionsList/PositionsList'
 import { calculateTokenAmounts } from '@invariant-labs/a0-sdk'
 import { PERCENTAGE_SCALE } from '@invariant-labs/a0-sdk/target/consts'
 import { POSITIONS_PER_PAGE } from '@store/consts/static'
-import { calcYPerXPriceByTickIndex, printBigint } from '@store/consts/utils'
+import {
+  calcYPerXPriceByTickIndex,
+  positionListPageToQueryPage,
+  printBigint
+} from '@store/consts/utils'
 import { actions } from '@store/reducers/positions'
 import { Status } from '@store/reducers/wallet'
 import {
   isLoadingPositionsList,
   lastPageSelector,
+  positionsList,
   positionsWithPoolsData
 } from '@store/selectors/positions'
 import { address, status } from '@store/selectors/wallet'
@@ -24,6 +29,7 @@ export const WrappedPositionsList: React.FC = () => {
   const walletStatus = useSelector(status)
   const navigate = useNavigate()
   const dispatch = useDispatch()
+  const { loadedPages, length } = useSelector(positionsList)
 
   const [value, setValue] = useState<string>('')
 
@@ -46,7 +52,9 @@ export const WrappedPositionsList: React.FC = () => {
   }, [list])
 
   const handleRefresh = () => {
-    dispatch(actions.getPositionsList())
+    dispatch(
+      actions.getPositionsListPage({ index: positionListPageToQueryPage(lastPage), refresh: true })
+    )
   }
 
   const data = list
@@ -124,6 +132,12 @@ export const WrappedPositionsList: React.FC = () => {
       )
     })
 
+  useEffect(() => {
+    if (walletStatus === Status.Initialized && walletAddress && !loadedPages[0] && !length) {
+      dispatch(actions.getPositionsListPage({ index: 0, refresh: false }))
+    }
+  }, [walletStatus, loadedPages])
+
   return (
     <PositionsList
       initialPage={lastPage}
@@ -142,6 +156,19 @@ export const WrappedPositionsList: React.FC = () => {
         onConnect: openWalletSelectorModal,
         descCustomText: 'You have no positions.'
       }}
+      pageChanged={page => {
+        const index = positionListPageToQueryPage(page)
+
+        if (
+          walletStatus === Status.Initialized &&
+          walletAddress &&
+          !loadedPages[index] &&
+          length &&
+          index != -1
+        ) {
+          dispatch(actions.getPositionsListPage({ index, refresh: false }))
+        }
+      }}
     />
   )
 }

src/pages/RootPage.tsx

@@ -6,18 +6,18 @@ import FooterWrapper from '@containers/FooterWrapper'
 import HeaderWrapper from '@containers/HeaderWrapper/HeaderWrapper'
 import { Grid } from '@mui/material'
 import { Status, actions as alephZeroConnectionActions } from '@store/reducers/connection'
-import { actions } from '@store/reducers/positions'
-import { Status as WalletStatus } from '@store/reducers/wallet'
+// import { actions } from '@store/reducers/positions'
+// import { Status as WalletStatus } from '@store/reducers/wallet'
 import { status as connectionStatus } from '@store/selectors/connection'
-import { address, status } from '@store/selectors/wallet'
+// import { address, status } from '@store/selectors/wallet'
 import { toBlur } from '@utils/uiUtils'
 import useStyles from './style'
 
 const RootPage: React.FC = React.memo(() => {
   const dispatch = useDispatch()
   const signerStatus = useSelector(connectionStatus)
-  const walletStatus = useSelector(status)
-  const walletAddress = useSelector(address)
+  // const walletAddress = useSelector(address)
+  // const walletStatus = useSelector(status)
 
   const navigate = useNavigate()
   const location = useLocation()
@@ -38,19 +38,19 @@ const RootPage: React.FC = React.memo(() => {
     initConnection()
   }, [initConnection])
 
-  const fetchPositionsList = useCallback(() => {
-    if (
-      signerStatus === Status.Initialized &&
-      walletStatus === WalletStatus.Initialized &&
-      walletAddress
-    ) {
-      dispatch(actions.getPositionsList())
-    }
-  }, [dispatch, signerStatus, walletStatus, walletAddress])
+  // const fetchPositionsList = useCallback(() => {
+  //   if (
+  //     signerStatus === Status.Initialized &&
+  //     walletStatus === WalletStatus.Initialized &&
+  //     walletAddress
+  //   ) {
+  //     dispatch(actions.getPositionsList())
+  //   }
+  // }, [dispatch, signerStatus, walletStatus, walletAddress])
 
-  useEffect(() => {
-    fetchPositionsList()
-  }, [fetchPositionsList])
+  // useEffect(() => {
+  //   fetchPositionsList()
+  // }, [fetchPositionsList])
 
   return (
     <>

src/store/consts/utils.ts

@@ -39,6 +39,7 @@ import {
   FAUCET_DEPLOYER_MNEMONIC,
   FormatConfig,
   LIQUIDITY_PLOT_DECIMAL,
+  POSITIONS_PER_PAGE,
   PositionTokenBlock,
   STABLECOIN_ADDRESSES,
   USDC,
@@ -58,6 +59,7 @@ import {
   Token,
   TokenPriceData
 } from './types'
+import { POSITIONS_PER_QUERY } from '@store/sagas/positions'
 
 export const createLoaderKey = () => (new Date().getMilliseconds() + Math.random()).toString()
 
@@ -1015,3 +1017,7 @@ export function testnetBestTiersCreator() {
 
   return bestTiers
 }
+
+export const positionListPageToQueryPage = (page: number): number => {
+  return Math.ceil((page * POSITIONS_PER_PAGE) / POSITIONS_PER_QUERY) - 1
+}

src/store/reducers/positions.ts

@@ -3,6 +3,8 @@ import { PayloadAction, createSlice } from '@reduxjs/toolkit'
 import { PayloadType } from '@store/consts/types'
 
 export interface PositionsListStore {
+  length: bigint
+  loadedPages: Record<number, boolean>
   list: Position[]
   loading: boolean
 }
@@ -87,6 +89,8 @@ export const defaultState: IPositionsStore = {
     loading: false
   },
   positionsList: {
+    length: 0n,
+    loadedPages: {},
     list: [],
     loading: true
   },
@@ -142,10 +146,40 @@ const positionsSlice = createSlice({
       state.positionsList.loading = false
       return state
     },
-    getPositionsList(state) {
+    getPositionsListPage(state, _action: PayloadAction<{ index: number; refresh: boolean }>) {
       state.positionsList.loading = true
       return state
     },
+    setPositionsListLength(state, action: PayloadAction<bigint>) {
+      state.positionsList.length = action.payload
+      return state
+    },
+    setPositionsListLoadedStatus(
+      state,
+      action: PayloadAction<{ indexes: number[]; isLoaded: boolean }>
+    ) {
+      const { indexes, isLoaded } = action.payload
+
+      for (const index of indexes) {
+        state.positionsList.loadedPages[index] = isLoaded
+      }
+
+      return state
+    },
+    removePosition(state, action: PayloadAction<bigint>) {
+      if (Number(action.payload) !== state.positionsList.list.length - 1) {
+        state.positionsList.list[Number(action.payload)] =
+          state.positionsList.list[state.positionsList.list.length - 1]
+      }
+
+      state.positionsList.list.pop()
+
+      return state
+    },
+    addPosition(state, action: PayloadAction<Position>) {
+      state.positionsList.list.push(action.payload)
+      return state
+    },
     getSinglePosition(state, _action: PayloadAction<bigint>) {
       return state
     },

src/store/sagas/pools.ts

@@ -281,6 +281,43 @@ export function* fetchTicksAndTickMaps(action: PayloadAction<FetchTicksAndTickMa
   }
 }
 
+export function* fetchTokens(poolsWithPoolKeys: PoolWithPoolKey[]) {
+  const walletAddress = yield* select(address)
+  const connection = yield* call(getConnection)
+  const network = yield* select(networkType)
+  const allTokens = yield* select(tokens)
+
+  const unknownTokens = new Set(
+    poolsWithPoolKeys.flatMap(({ poolKey: { tokenX, tokenY } }) =>
+      [tokenX, tokenY].filter(token => !allTokens[token])
+    )
+  )
+  const knownTokens = new Set(
+    poolsWithPoolKeys.flatMap(({ poolKey: { tokenX, tokenY } }) =>
+      [tokenX, tokenY].filter(token => allTokens[token])
+    )
+  )
+
+  const unknownTokensData = yield* call(
+    getTokenDataByAddresses,
+    [...unknownTokens],
+    connection,
+    network,
+    walletAddress
+  )
+  const knownTokenBalances = yield* call(
+    getTokenBalances,
+    [...knownTokens],
+    connection,
+    network,
+    walletAddress
+  )
+
+  yield* put(walletActions.getBalances(Object.keys(unknownTokensData)))
+  yield* put(actions.addTokens(unknownTokensData))
+  yield* put(actions.updateTokenBalances(knownTokenBalances))
+}
+
 export function* getPoolsDataForListHandler(): Generator {
   yield* takeEvery(actions.getPoolsDataForList, fetchPoolsDataForList)
 }