Merge pull request #812 from invariant-labs/plot-refactor

fix positioning of plot markers and add last global buy and sell pric…
invariant-labs · Dec 17, 2024 · a02cdf2 · a02cdf2
2 parents 0af0e55 + e3efbcf
commit a02cdf2
Show file tree

Hide file tree

Showing 9 changed files with 83 additions and 13 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/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/static/theme/index.ts b/src/static/theme/index.ts
@@ -87,7 +87,9 @@ export const colors = {
     yellow: '#EFD063',
     blue: '#43BBFF',
     transparentBcg: 'rgba(1, 5, 20, 0.25)',
-    bodyBackground: '#141b2d'
+    bodyBackground: '#141b2d',
+    plotGreen: '#9DD46D',
+    plotRed: '#FB555F'
   }
 }
 

diff --git a/src/utils/utils.ts b/src/utils/utils.ts
@@ -949,6 +949,10 @@ interface RawJupApiResponse {
       id: string
       price: string
       extraInfo?: {
+        lastSwappedPrice: {
+          lastJupiterSellPrice: string
+          lastJupiterBuyPrice: string
+        }
         quotedPrice: {
           buyPrice: string
           sellPrice: string
@@ -974,6 +978,8 @@ export interface TokenPriceData {
   price: number
   buyPrice: number
   sellPrice: number
+  lastBuyPrice?: number
+  lastSellPrice?: number
 }
 
 export const getCoingeckoPricesData = async (
@@ -1032,7 +1038,9 @@ export const getJupPricesData = async (ids: string[]): Promise<Record<string, To
     acc[id] = {
       price: Number(price),
       buyPrice: Number(extraInfo?.quotedPrice.buyPrice ?? 0),
-      sellPrice: Number(extraInfo?.quotedPrice.sellPrice ?? 0)
+      sellPrice: Number(extraInfo?.quotedPrice.sellPrice ?? 0),
+      lastBuyPrice: Number(extraInfo?.lastSwappedPrice.lastJupiterBuyPrice ?? 0),
+      lastSellPrice: Number(extraInfo?.lastSwappedPrice.lastJupiterSellPrice ?? 0)
     }
     return acc
   }, {})
@@ -1334,7 +1342,13 @@ export const getJupTokenPrice = async (id: string): Promise<TokenPriceData> => {
     return {
       price: Number(response.data.data[id].price),
       buyPrice: Number(response.data.data[id].extraInfo?.quotedPrice.buyPrice ?? 0),
-      sellPrice: Number(response.data.data[id].extraInfo?.quotedPrice.sellPrice ?? 0)
+      sellPrice: Number(response.data.data[id].extraInfo?.quotedPrice.sellPrice ?? 0),
+      lastBuyPrice: Number(
+        response.data.data[id].extraInfo?.lastSwappedPrice.lastJupiterBuyPrice ?? 0
+      ),
+      lastSellPrice: Number(
+        response.data.data[id].extraInfo?.lastSwappedPrice.lastJupiterSellPrice ?? 0
+      )
     }
   } catch (error) {
     return {
-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 @@