Merge pull request #818 from invariant-labs/dev

Update staging env
invariant-labs · Dec 18, 2024 · 4cc9424 · 4cc9424
2 parents f14f3e3 + 3f2d80b
commit 4cc9424
Show file tree

Hide file tree

Showing 18 changed files with 257 additions and 165 deletions.
diff --git a/src/components/NewPosition/RangeSelector/RangeSelector.tsx b/src/components/NewPosition/RangeSelector/RangeSelector.tsx
@@ -461,7 +461,10 @@ export const RangeSelector: React.FC<IRangeSelector> = ({
             <Grid container flexDirection='column'>
               <Typography className={classes.currentPrice}>Current price</Typography>
               <Typography className={classes.globalPrice}>Global price</Typography>
-              <Typography className={classes.buySellPrice}>Buy/sell price</Typography>
+              <Typography className={classes.lastGlobalBuyPrice}>Last global buy price</Typography>
+              <Typography className={classes.lastGlobalSellPrice}>
+                Last global sell price
+              </Typography>
             </Grid>
           </Grid>
         </Grid>

diff --git a/src/components/NewPosition/RangeSelector/style.ts b/src/components/NewPosition/RangeSelector/style.ts
@@ -165,6 +165,7 @@ const useStyles = makeStyles()(theme => {
       display: 'flex',
       flexDirection: 'row',
       alignItems: 'center',
+      justifyContent: 'flex-end',
       cursor: 'default'
     },
     activeLiquidityIcon: {
@@ -241,6 +242,20 @@ const useStyles = makeStyles()(theme => {
       ...typography.caption2,
       textAlign: 'right',
       marginLeft: 4
+    },
+    lastGlobalBuyPrice: {
+      display: 'inline-block',
+      color: colors.invariant.plotGreen,
+      ...typography.caption2,
+      textAlign: 'right',
+      marginLeft: 4
+    },
+    lastGlobalSellPrice: {
+      display: 'inline-block',
+      color: colors.invariant.plotRed,
+      ...typography.caption2,
+      textAlign: 'right',
+      marginLeft: 4
     }
   }
 })

diff --git a/src/components/PopularPools/Card/StatsLabel/style.ts b/src/components/PopularPools/Card/StatsLabel/style.ts
@@ -20,7 +20,7 @@ export const useStyles = makeStyles()(() => ({
     ...typography.caption4,
     color: colors.invariant.green,
     textShadow: '0px 0px 5px rgba(46, 224, 154, 1)',
-    fontWeight: 700,
+    fontWeight: 500,
     fontSize: 20
   }
 }))
diff --git a/src/components/PositionDetails/PositionDetails.tsx b/src/components/PositionDetails/PositionDetails.tsx
@@ -311,6 +311,8 @@ const PositionDetails: React.FC<IProps> = ({
                   }
             }
             globalPrice={globalPrice}
+            tokenAPriceData={xToY ? tokenXPriceData : tokenYPriceData}
+            tokenBPriceData={xToY ? tokenYPriceData : tokenXPriceData}
           />
         </Grid>
       </Grid>

diff --git a/src/components/PositionDetails/SinglePositionPlot/SinglePositionPlot.stories.tsx b/src/components/PositionDetails/SinglePositionPlot/SinglePositionPlot.stories.tsx
@@ -49,7 +49,17 @@ export const Primary: Story = {
       decimal: 12
     },
     xToY: true,
-    hasTicksError: false
+    hasTicksError: false,
+    tokenAPriceData: {
+      price: 100000,
+      buyPrice: 105000,
+      sellPrice: 95000
+    },
+    tokenBPriceData: {
+      price: 4000,
+      buyPrice: 4100,
+      sellPrice: 3900
+    }
   },
   render: args => {
     return (

diff --git a/src/components/PositionDetails/SinglePositionPlot/SinglePositionPlot.tsx b/src/components/PositionDetails/SinglePositionPlot/SinglePositionPlot.tsx
@@ -7,7 +7,8 @@ import {
   calcPriceByTickIndex,
   calcTicksAmountInRange,
   numberToString,
-  spacingMultiplicityGte
+  spacingMultiplicityGte,
+  TokenPriceData
 } from '@utils/utils'
 import { PlotTickData } from '@store/reducers/positions'
 import React, { useEffect, useState } from 'react'
@@ -35,6 +36,8 @@ export interface ISinglePositionPlot {
     min: number
     max: number
   }
+  tokenAPriceData: TokenPriceData | undefined
+  tokenBPriceData: TokenPriceData | undefined
 }
 
 const SinglePositionPlot: React.FC<ISinglePositionPlot> = ({
@@ -53,7 +56,9 @@ const SinglePositionPlot: React.FC<ISinglePositionPlot> = ({
   xToY,
   hasTicksError,
   reloadHandler,
-  volumeRange
+  volumeRange,
+  tokenAPriceData,
+  tokenBPriceData
 }) => {
   const { classes } = useStyles()
 
@@ -185,8 +190,10 @@ const SinglePositionPlot: React.FC<ISinglePositionPlot> = ({
             </Typography>
           </Tooltip>
           <Grid container flexDirection='column'>
-            <Typography className={classes.currentPrice}>Current price ━━━</Typography>
-            <Typography className={classes.globalPrice}>Global price ━━━</Typography>
+            <Typography className={classes.currentPrice}>Current price</Typography>
+            <Typography className={classes.globalPrice}>Global price</Typography>
+            <Typography className={classes.lastGlobalBuyPrice}>Last global buy price</Typography>
+            <Typography className={classes.lastGlobalSellPrice}>Last global sell price</Typography>
           </Grid>
         </Grid>
       </Grid>
@@ -212,6 +219,8 @@ const SinglePositionPlot: React.FC<ISinglePositionPlot> = ({
           reloadHandler={reloadHandler}
           volumeRange={volumeRange}
           globalPrice={globalPrice}
+          tokenAPriceData={tokenAPriceData}
+          tokenBPriceData={tokenBPriceData}
         />
       </Grid>
       <Grid className={classes.minMaxInfo}>

diff --git a/src/components/PositionDetails/SinglePositionPlot/style.ts b/src/components/PositionDetails/SinglePositionPlot/style.ts
@@ -91,6 +91,7 @@ export const useStyles = makeStyles()((theme: Theme) => ({
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
+    justifyContent: 'flex-end',
     cursor: 'default'
   },
   activeLiquidityIcon: {
@@ -151,6 +152,20 @@ export const useStyles = makeStyles()((theme: Theme) => ({
     ...typography.caption2,
     textAlign: 'right',
     marginLeft: 4
+  },
+  lastGlobalBuyPrice: {
+    display: 'inline-block',
+    color: colors.invariant.plotGreen,
+    ...typography.caption2,
+    textAlign: 'right',
+    marginLeft: 4
+  },
+  lastGlobalSellPrice: {
+    display: 'inline-block',
+    color: colors.invariant.plotRed,
+    ...typography.caption2,
+    textAlign: 'right',
+    marginLeft: 4
   }
 }))
 

diff --git a/src/components/PriceRangePlot/PriceRangePlot.tsx b/src/components/PriceRangePlot/PriceRangePlot.tsx
@@ -327,7 +327,7 @@ export const PriceRangePlot: React.FC<IPriceRangePlot> = ({
     const unitLen = innerWidth / (plotMax - plotMin)
     return (
       <svg
-        x={(tokenAPriceData.buyPrice / tokenBPriceData.price - plotMin) * unitLen}
+        x={(tokenAPriceData.buyPrice / tokenBPriceData.price - plotMin) * unitLen - 20}
         y={0}
         width={60}
         height={innerHeight}>
@@ -337,7 +337,7 @@ export const PriceRangePlot: React.FC<IPriceRangePlot> = ({
           </filter>
         </defs>
         <rect x={14} y={20} width='16' height={innerHeight} filter='url(#shadow)' opacity='0.3' />
-        <rect x={19} y={20} width='3' height={innerHeight} fill={colors.white.main} />
+        <rect x={19} y={20} width='3' height={innerHeight} fill={colors.invariant.plotGreen} />
       </svg>
     )
   }
@@ -350,7 +350,7 @@ export const PriceRangePlot: React.FC<IPriceRangePlot> = ({
     const unitLen = innerWidth / (plotMax - plotMin)
     return (
       <svg
-        x={(tokenAPriceData.sellPrice / tokenBPriceData.price - plotMin) * unitLen}
+        x={(tokenAPriceData.sellPrice / tokenBPriceData.price - plotMin) * unitLen - 20}
         y={0}
         width={60}
         height={innerHeight}>
@@ -360,7 +360,7 @@ export const PriceRangePlot: React.FC<IPriceRangePlot> = ({
           </filter>
         </defs>
         <rect x={14} y={20} width='16' height={innerHeight} filter='url(#shadow)' opacity='0.3' />
-        <rect x={19} y={20} width='3' height={innerHeight} fill={colors.white.main} />
+        <rect x={19} y={20} width='3' height={innerHeight} fill={colors.invariant.plotRed} />
       </svg>
     )
   }

diff --git a/src/components/Stats/PoolList/PoolList.tsx b/src/components/Stats/PoolList/PoolList.tsx
@@ -131,61 +131,63 @@ const PoolList: React.FC<PoolListInterface> = ({
   const pages = Math.ceil(data.length / 10)
 
   return (
-    <div className={classNames({ [classes.loadingOverlay]: isLoading })}>
-      <Grid container direction='column' classes={{ root: classes.container }}>
-        <>
-          <PoolListItem
-            displayType='header'
-            onSort={setSortType}
-            sortType={sortType}
-            network={network}
-          />
-          {data.length > 0 || isLoading ? (
-            paginator(page).map((element, index) => (
-              <PoolListItem
-                displayType='token'
-                tokenIndex={index + 1 + (page - 1) * 10}
-                symbolFrom={element.symbolFrom}
-                symbolTo={element.symbolTo}
-                iconFrom={element.iconFrom}
-                iconTo={element.iconTo}
-                volume={element.volume}
-                TVL={element.TVL}
-                // lockedX={element.lockedX}
-                // lockedY={element.lockedY}
-                // liquidityX={element.liquidityX}
-                // liquidityY={element.liquidityY}
-                // isLocked={element.lockedX > 0 || element.lockedY > 0}
-                fee={element.fee}
-                apy={element.apy}
-                hideBottomLine={pages === 1 && index + 1 === data.length}
-                apyData={element.apyData}
-                key={index}
-                addressFrom={element.addressFrom}
-                addressTo={element.addressTo}
-                network={network}
-                isUnknownFrom={element.isUnknownFrom}
-                isUnknownTo={element.isUnknownTo}
-                poolAddress={element.poolAddress}
-                copyAddressHandler={copyAddressHandler}
-              />
-            ))
-          ) : (
-            <NotFoundPlaceholder title='No pools found...' />
-          )}
-          {pages > 1 ? (
-            <Grid className={classes.pagination}>
-              <PaginationList
-                pages={pages}
-                defaultPage={1}
-                handleChangePage={handleChangePagination}
-                variant='flex-end'
-              />
-            </Grid>
-          ) : null}
-        </>
-      </Grid>
-    </div>
+    <Grid
+      container
+      direction='column'
+      classes={{ root: classes.container }}
+      className={classNames({ [classes.loadingOverlay]: isLoading })}>
+      <>
+        <PoolListItem
+          displayType='header'
+          onSort={setSortType}
+          sortType={sortType}
+          network={network}
+        />
+        {data.length > 0 || isLoading ? (
+          paginator(page).map((element, index) => (
+            <PoolListItem
+              displayType='token'
+              tokenIndex={index + 1 + (page - 1) * 10}
+              symbolFrom={element.symbolFrom}
+              symbolTo={element.symbolTo}
+              iconFrom={element.iconFrom}
+              iconTo={element.iconTo}
+              volume={element.volume}
+              TVL={element.TVL}
+              // lockedX={element.lockedX}
+              // lockedY={element.lockedY}
+              // liquidityX={element.liquidityX}
+              // liquidityY={element.liquidityY}
+              // isLocked={element.lockedX > 0 || element.lockedY > 0}
+              fee={element.fee}
+              apy={element.apy}
+              hideBottomLine={pages === 1 && index + 1 === data.length}
+              apyData={element.apyData}
+              key={index}
+              addressFrom={element.addressFrom}
+              addressTo={element.addressTo}
+              network={network}
+              isUnknownFrom={element.isUnknownFrom}
+              isUnknownTo={element.isUnknownTo}
+              poolAddress={element.poolAddress}
+              copyAddressHandler={copyAddressHandler}
+            />
+          ))
+        ) : (
+          <NotFoundPlaceholder title='No pools found...' />
+        )}
+        {pages > 1 ? (
+          <Grid className={classes.pagination}>
+            <PaginationList
+              pages={pages}
+              defaultPage={1}
+              handleChangePage={handleChangePagination}
+              variant='flex-end'
+            />
+          </Grid>
+        ) : null}
+      </>
+    </Grid>
   )
 }
 export default PoolList
-Original file line number
+Diff line change
@@ Expand Up / @@ -311,6 +311,8 @@ const PositionDetails: React.FC<IProps> = ({ @@
                       }
                 }
                 globalPrice={globalPrice}
+                tokenAPriceData={xToY ? tokenXPriceData : tokenYPriceData}
+                tokenBPriceData={xToY ? tokenYPriceData : tokenXPriceData}
               />
             </Grid>
           </Grid>
@@ Expand Down @@