fix positioning of plot markers and add last global buy and sell pric…

…e markers
invariant-labs · Dec 16, 2024 · 3cffc44 · 3cffc44
1 parent 06e00c2
commit 3cffc44
Show file tree

Hide file tree

Showing 5 changed files with 113 additions and 5 deletions.
diff --git a/src/components/NewPosition/RangeSelector/RangeSelector.tsx b/src/components/NewPosition/RangeSelector/RangeSelector.tsx
@@ -462,6 +462,10 @@ export const RangeSelector: React.FC<IRangeSelector> = ({
               <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
@@ -241,6 +241,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/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}>
@@ -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}>
@@ -365,6 +365,78 @@ export const PriceRangePlot: React.FC<IPriceRangePlot> = ({
     )
   }
 
+  const lastBuyPriceLayer: Layer = ({ innerWidth, innerHeight }) => {
+    if (
+      typeof tokenAPriceData === 'undefined' ||
+      typeof tokenBPriceData === 'undefined' ||
+      !tokenAPriceData.lastBuyPrice
+    ) {
+      return null
+    }
+
+    const unitLen = innerWidth / (plotMax - plotMin)
+    return (
+      <svg
+        x={(tokenAPriceData.lastBuyPrice / tokenBPriceData.price - plotMin) * unitLen - 20}
+        y={0}
+        width={60}
+        height={innerHeight}>
+        <defs>
+          <filter id='shadow' x='-10' y='-9' width='20' height={innerHeight}>
+            <feGaussianBlur in='SourceGraphic' stdDeviation='8' />
+          </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.invariant.plotGreen} />
+      </svg>
+    )
+  }
+
+  console.log(tokenAPriceData, tokenBPriceData)
+
+  if (
+    tokenAPriceData &&
+    tokenAPriceData.lastBuyPrice &&
+    tokenAPriceData.lastSellPrice &&
+    tokenBPriceData
+  ) {
+    console.log(
+      tokenAPriceData.lastSellPrice,
+      tokenBPriceData.price,
+      tokenAPriceData.lastSellPrice / tokenBPriceData.price,
+      tokenAPriceData.lastBuyPrice / tokenBPriceData.price,
+      tokenAPriceData.buyPrice / tokenBPriceData.price,
+      tokenAPriceData.sellPrice / tokenBPriceData.price
+    )
+  }
+
+  const lastSellPriceLayer: Layer = ({ innerWidth, innerHeight }) => {
+    if (
+      typeof tokenAPriceData === 'undefined' ||
+      typeof tokenBPriceData === 'undefined' ||
+      !tokenAPriceData.lastSellPrice
+    ) {
+      return null
+    }
+
+    const unitLen = innerWidth / (plotMax - plotMin)
+    return (
+      <svg
+        x={(tokenAPriceData.lastSellPrice / tokenBPriceData.price - plotMin) * unitLen - 20}
+        y={0}
+        width={60}
+        height={innerHeight}>
+        <defs>
+          <filter id='shadow' x='-10' y='-9' width='20' height={innerHeight}>
+            <feGaussianBlur in='SourceGraphic' stdDeviation='8' />
+          </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.invariant.plotRed} />
+      </svg>
+    )
+  }
+
   const volumeRangeLayer: Layer = ({ innerWidth, innerHeight }) => {
     if (typeof volumeRange === 'undefined') {
       return null
@@ -577,6 +649,8 @@ export const PriceRangePlot: React.FC<IPriceRangePlot> = ({
           globalPriceLayer,
           buyPriceLayer,
           sellPriceLayer,
+          lastBuyPriceLayer,
+          lastSellPriceLayer,
           currentLayer,
           volumeRangeLayer,
           brushLayer,

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 {