Merge pull request #257 from invariant-labs/dev

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.11",
+    "@invariant-labs/a0-sdk": "^0.2.15",
     "@mui/icons-material": "^5.15.15",
     "@mui/material": "^5.15.15",
     "@nightlylabs/wallet-selector-polkadot": "^0.2.5",

src/components/Modals/Slippage/Slippage.tsx

@@ -118,7 +118,7 @@ const Slippage: React.FC<Props> = ({
         <Grid container className={classes.detailsWrapper}>
           <Grid container justifyContent='space-between' style={{ marginBottom: 6 }}>
             <Typography component='h2'>{headerText ?? 'Exchange Settings'}</Typography>
-            <Button className={classes.selectTokenClose} onClick={handleClose} />
+            <Button className={classes.selectTokenClose} onClick={handleClose} aria-label='Close' />
           </Grid>
           <Typography className={classes.label}>Slippage tolerance</Typography>
           <Grid container gap='9px'>

src/components/NewPosition/NewPosition.tsx

@@ -513,7 +513,7 @@ export const NewPosition: React.FC<INewPosition> = ({
           ) : null}
           <Grid className={classes.optionsWrapper}>
             <Hidden mdDown>
-              {poolKey !== '' && (
+              {tokenAIndex !== null && tokenBIndex !== null && (
                 <ConcentrationTypeSwitch
                   onSwitch={val => {
                     if (val) {

src/components/NewPosition/RangeSelector/RangeSelector.tsx

@@ -377,7 +377,7 @@ export const RangeSelector: React.FC<IRangeSelector> = ({
           ? cachedConcentrationArray.length - 1
           : concentrationIndex
       setConcentrationIndex(index)
-      console.log('test')
+
       const { leftRange, rightRange } = calculateConcentrationRange(
         tickSpacing,
         cachedConcentrationArray[index],

src/components/NewPosition/style.ts

@@ -106,7 +106,9 @@ const useStyles = makeStyles()(theme => {
       }
     },
     switch: {
-      transition: 'opacity 500ms'
+      transition: 'opacity 500ms',
+      display: 'flex',
+      justifyContent: 'flex-end'
     },
     titleContainer: {
       maxWidth: 464,
@@ -122,7 +124,9 @@ const useStyles = makeStyles()(theme => {
     },
     optionsWrapper: {
       display: 'flex',
-      alignItems: 'center'
+      alignItems: 'center',
+      flex: 1,
+      justifyContent: 'flex-end'
     }
   }
 })

src/components/PositionDetails/SinglePositionInfo/SinglePositionInfo.tsx

@@ -75,8 +75,8 @@ const SinglePositionInfo: React.FC<IProp> = ({
           />
           <img
             className={classes.arrowIcon}
-            src={icons.ArrowIcon}
-            alt={'Arrow'}
+            src={icons.swapListIcon}
+            alt='Reverse tokens'
             onClick={swapHandler}
           />
           <img

src/components/PositionDetails/SinglePositionInfo/style.ts

@@ -22,10 +22,10 @@ export const useStyles = makeStyles()((theme: Theme) => ({
     }
   },
   arrowIcon: {
-    width: 22,
+    width: 32,
     marginRight: 8,
     marginLeft: 8,
-    height: 22,
+    height: 32,
     borderRadius: '100%',
     padding: 4,
 
@@ -36,8 +36,7 @@ export const useStyles = makeStyles()((theme: Theme) => ({
     },
     '&:hover': {
       cursor: 'pointer',
-      background: 'rgba(255, 255, 255, 0.15)',
-      filter: 'brightness(1.2)',
+      filter: 'brightness(2)',
       '@media (hover: none)': {
         filter: 'none'
       }

src/components/Swap/Swap.tsx

@@ -245,10 +245,6 @@ export const Swap: React.FC<ISwap> = ({
     return () => clearTimeout(timeout)
   }, [refresherTime, tokenFromIndex, tokenToIndex])
 
-  useEffect(() => {
-    updateEstimatedAmount()
-  }, [tokenToIndex, tokenFromIndex, pools.length])
-
   useEffect(() => {
     if (inputRef !== inputTarget.DEFAULT) {
       const temp: string = amountFrom
@@ -302,13 +298,6 @@ export const Swap: React.FC<ISwap> = ({
     return !!swapPool
   }
 
-  const updateEstimatedAmount = () => {
-    if (tokenFromIndex !== null && tokenToIndex !== null) {
-      const amount = getAmountOut(tokens[tokenToIndex])
-      setAmountTo(+amount === 0 ? '' : trimLeadingZeros(amount))
-    }
-  }
-
   const isError = (error: SwapError): boolean => {
     if (simulateResult.errors) {
       return simulateResult.errors.some(err => err === error)
@@ -440,6 +429,11 @@ export const Swap: React.FC<ISwap> = ({
 
   useEffect(() => {
     setRefresherTime(REFRESHER_INTERVAL)
+
+    if (tokenFromIndex === tokenToIndex) {
+      setAmountFrom('')
+      setAmountTo('')
+    }
   }, [tokenFromIndex, tokenToIndex])
 
   return (
@@ -517,9 +511,7 @@ export const Swap: React.FC<ISwap> = ({
             tokens={tokens}
             current={tokenFromIndex !== null ? tokens[tokenFromIndex] : null}
             onSelect={setTokenFromIndex}
-            disabled={
-              tokenFromIndex === null || tokenToIndex === null || tokenFromIndex === tokenToIndex
-            }
+            disabled={tokenFromIndex === tokenToIndex || tokenFromIndex === null}
             hideBalances={walletStatus !== Status.Initialized}
             handleAddToken={handleAddToken}
             commonTokens={commonTokens}
@@ -603,9 +595,7 @@ export const Swap: React.FC<ISwap> = ({
             tokens={tokens}
             current={tokenToIndex !== null ? tokens[tokenToIndex] : null}
             onSelect={setTokenToIndex}
-            disabled={
-              tokenFromIndex === null || tokenToIndex === null || tokenFromIndex === tokenToIndex
-            }
+            disabled={tokenFromIndex === tokenToIndex || tokenToIndex === null}
             hideBalances={walletStatus !== Status.Initialized}
             handleAddToken={handleAddToken}
             commonTokens={commonTokens}

src/static/icons.ts

@@ -28,6 +28,7 @@ import copyAddress from './svg/copy-address.svg'
 import emptyIcon from './svg/empty.svg'
 import plusIcon from './svg/plus.svg'
 import horizontalSwapIcon from './svg/horizontalSwapArrows.svg'
+import swapListIcon from './svg/swap-list.svg'
 
 const icons: { [key: string]: string } = {
   clear: clearIcon,
@@ -59,7 +60,8 @@ const icons: { [key: string]: string } = {
   copyAddress: copyAddress,
   empty: emptyIcon,
   plusIcon: plusIcon,
-  horizontalSwapIcon: horizontalSwapIcon
+  horizontalSwapIcon: horizontalSwapIcon,
+  swapListIcon: swapListIcon
 }
 
 export default icons

src/store/consts/static.ts

@@ -278,7 +278,8 @@ export const EMPTY_POSITION: Position = {
   feeGrowthInsideY: 0n,
   lastBlockNumber: 0n,
   tokensOwedX: 0n,
-  tokensOwedY: 0n
+  tokensOwedY: 0n,
+  createdAt: 0n
 }
 
 export const POSITIONS_PER_QUERY =

src/store/sagas/pools.ts

@@ -49,8 +49,6 @@ export function* fetchPoolsDataForList(action: PayloadAction<ListPoolsRequest>)
   yield* put(actions.addTokens(unknownTokensData))
   yield* put(actions.updateTokenBalances(knownTokenBalances))
 
-  console.log(yield* select(tokens))
-
   yield* put(actions.addPoolsForList({ data: pools, listType: action.payload.listType }))
 }
 

src/store/sagas/positions.ts

@@ -652,7 +652,6 @@ export function* handleGetPositionsListPage(
   }
 
   if (!length || refresh) {
-    console.log('call', index)
     const result = yield* call(
       [invariant, invariant.getPositions],
       walletAddress,
@@ -681,7 +680,6 @@ export function* handleGetPositionsListPage(
 
   if (!isPageLoaded || refresh) {
     if (length && !refresh) {
-      console.log('call', index)
       const result = yield* call(
         [invariant, invariant.getPositions],
         walletAddress,

src/store/selectors/positions.ts

@@ -61,10 +61,8 @@ export const positionsWithPoolsData = createSelector(
       const tokenY = tokens.find(token => token.assetAddress === position.poolKey.tokenY)
 
       if (!tokenX) {
-        console.log(`Token ${position.poolKey.tokenX} not found for position`)
         continue
       } else if (!tokenY) {
-        console.log(`Token ${position.poolKey.tokenY} not found for position`)
         continue
       }