From 3cffc4459d1889dbb9e991c82fc33c3e8e45165f Mon Sep 17 00:00:00 2001
From: zielvna <zielvna@gmail.com>
Date: Mon, 16 Dec 2024 16:20:19 +0100
Subject: [PATCH 1/9] fix positioning of plot markers and add last global buy
 and sell price markers

---
 .../RangeSelector/RangeSelector.tsx           |  4 +
 .../NewPosition/RangeSelector/style.ts        | 14 ++++
 .../PriceRangePlot/PriceRangePlot.tsx         | 78 ++++++++++++++++++-
 src/static/theme/index.ts                     |  4 +-
 src/utils/utils.ts                            | 18 ++++-
 5 files changed, 113 insertions(+), 5 deletions(-)

diff --git a/src/components/NewPosition/RangeSelector/RangeSelector.tsx b/src/components/NewPosition/RangeSelector/RangeSelector.tsx
index cb77be19..db8ac17a 100644
--- 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
index 89715ebc..eb7f4b07 100644
--- 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
index 7af8a966..cc34a5a5 100644
--- 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
index d8a3835a..53d3b9c8 100644
--- 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
index b349e0ea..3784eaf4 100644
--- 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 {

From 489b909dd068c6fa3bf3873cdd6f3202b18db513 Mon Sep 17 00:00:00 2001
From: zielvna <zielvna@gmail.com>
Date: Mon, 16 Dec 2024 16:34:20 +0100
Subject: [PATCH 2/9] fix active liquidity button position

---
 src/components/NewPosition/RangeSelector/style.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/NewPosition/RangeSelector/style.ts b/src/components/NewPosition/RangeSelector/style.ts
index eb7f4b07..d1676bb8 100644
--- 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: {

From 3559ad65de85b5aa5a643fdb49bdc1b491b02a54 Mon Sep 17 00:00:00 2001
From: zielvna <zielvna@gmail.com>
Date: Mon, 16 Dec 2024 16:35:08 +0100
Subject: [PATCH 3/9] remove unnecessary console logs

---
 .../PriceRangePlot/PriceRangePlot.tsx          | 18 ------------------
 1 file changed, 18 deletions(-)

diff --git a/src/components/PriceRangePlot/PriceRangePlot.tsx b/src/components/PriceRangePlot/PriceRangePlot.tsx
index cc34a5a5..05f53662 100644
--- a/src/components/PriceRangePlot/PriceRangePlot.tsx
+++ b/src/components/PriceRangePlot/PriceRangePlot.tsx
@@ -392,24 +392,6 @@ export const PriceRangePlot: React.FC<IPriceRangePlot> = ({
     )
   }
 
-  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' ||

From 3b51ade30bc65dd329efb5dff3a562e2bd3ff25e Mon Sep 17 00:00:00 2001
From: zielvna <zielvna@gmail.com>
Date: Tue, 17 Dec 2024 10:41:16 +0100
Subject: [PATCH 4/9] remove popular pools

---
 src/store/consts/static.ts | 40 +++++++++++++++++++-------------------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/store/consts/static.ts b/src/store/consts/static.ts
index 5bacf5a6..3ca20fc8 100644
--- a/src/store/consts/static.ts
+++ b/src/store/consts/static.ts
@@ -514,26 +514,26 @@ export const getPopularPools = (network: NetworkType) => {
   switch (network) {
     case NetworkType.Mainnet:
       return [
-        {
-          tokenX: 'EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v',
-          tokenY: 'So11111111111111111111111111111111111111112',
-          fee: '0.02'
-        },
-        {
-          tokenX: 'EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v',
-          tokenY: 'Es9vMFrzaCERmJfrF4H2FYD4KCoNkY11McCe8BenwNYB',
-          fee: '0.01'
-        },
-        {
-          tokenX: '27G8MtK7VtTcCHkpASjSDdkWWYfoqT6ggEuKidVJidD4',
-          tokenY: 'So11111111111111111111111111111111111111112',
-          fee: '0.01'
-        },
-        {
-          tokenX: 'EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v',
-          tokenY: 'So11111111111111111111111111111111111111112',
-          fee: '0.01'
-        }
+        // {
+        //   tokenX: 'EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v',
+        //   tokenY: 'So11111111111111111111111111111111111111112',
+        //   fee: '0.02'
+        // },
+        // {
+        //   tokenX: 'EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v',
+        //   tokenY: 'Es9vMFrzaCERmJfrF4H2FYD4KCoNkY11McCe8BenwNYB',
+        //   fee: '0.01'
+        // },
+        // {
+        //   tokenX: '27G8MtK7VtTcCHkpASjSDdkWWYfoqT6ggEuKidVJidD4',
+        //   tokenY: 'So11111111111111111111111111111111111111112',
+        //   fee: '0.01'
+        // },
+        // {
+        //   tokenX: 'EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v',
+        //   tokenY: 'So11111111111111111111111111111111111111112',
+        //   fee: '0.01'
+        // }
       ]
     default:
       return []

From ab66c6be7b3ef261565fe84133906abd10063f0c Mon Sep 17 00:00:00 2001
From: zielvna <zielvna@gmail.com>
Date: Tue, 17 Dec 2024 11:41:17 +0100
Subject: [PATCH 5/9] refactor plot

---
 .../RangeSelector/RangeSelector.tsx           |  1 -
 .../PriceRangePlot/PriceRangePlot.tsx         | 58 +------------------
 2 files changed, 1 insertion(+), 58 deletions(-)

diff --git a/src/components/NewPosition/RangeSelector/RangeSelector.tsx b/src/components/NewPosition/RangeSelector/RangeSelector.tsx
index db8ac17a..c28ed25c 100644
--- a/src/components/NewPosition/RangeSelector/RangeSelector.tsx
+++ b/src/components/NewPosition/RangeSelector/RangeSelector.tsx
@@ -461,7 +461,6 @@ 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
diff --git a/src/components/PriceRangePlot/PriceRangePlot.tsx b/src/components/PriceRangePlot/PriceRangePlot.tsx
index 05f53662..2e61166c 100644
--- a/src/components/PriceRangePlot/PriceRangePlot.tsx
+++ b/src/components/PriceRangePlot/PriceRangePlot.tsx
@@ -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>
     )
   }
@@ -360,60 +360,6 @@ 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} />
-      </svg>
-    )
-  }
-
-  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>
-    )
-  }
-
-  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>
     )
@@ -631,8 +577,6 @@ export const PriceRangePlot: React.FC<IPriceRangePlot> = ({
           globalPriceLayer,
           buyPriceLayer,
           sellPriceLayer,
-          lastBuyPriceLayer,
-          lastSellPriceLayer,
           currentLayer,
           volumeRangeLayer,
           brushLayer,

From 68d4d63329971012f99018c175b8f38f6e1cb226 Mon Sep 17 00:00:00 2001
From: zielvna <zielvna@gmail.com>
Date: Tue, 17 Dec 2024 12:45:07 +0100
Subject: [PATCH 6/9] add buy and sell markers to plot on position details page

---
 .../PositionDetails/PositionDetails.tsx         |  2 ++
 .../SinglePositionPlot/SinglePositionPlot.tsx   | 17 +++++++++++++----
 .../PositionDetails/SinglePositionPlot/style.ts | 15 +++++++++++++++
 3 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/src/components/PositionDetails/PositionDetails.tsx b/src/components/PositionDetails/PositionDetails.tsx
index d5a155fd..2d4f4d8d 100644
--- 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.tsx b/src/components/PositionDetails/SinglePositionPlot/SinglePositionPlot.tsx
index 15fcd726..f06cfaf4 100644
--- 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
index 00f12b82..7862c47f 100644
--- 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
   }
 }))
 

From e3efbcf988e45ae9efe66e711c22c6736047ef0d Mon Sep 17 00:00:00 2001
From: zielvna <zielvna@gmail.com>
Date: Tue, 17 Dec 2024 12:46:59 +0100
Subject: [PATCH 7/9] fix build

---
 .../SinglePositionPlot.stories.tsx                   | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/PositionDetails/SinglePositionPlot/SinglePositionPlot.stories.tsx b/src/components/PositionDetails/SinglePositionPlot/SinglePositionPlot.stories.tsx
index ddae5bc4..af355a48 100644
--- 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 (

From 7e5a31e4abf15d00f44f413362367b94e778cfeb Mon Sep 17 00:00:00 2001
From: zielvna <zielvna@gmail.com>
Date: Tue, 17 Dec 2024 12:50:25 +0100
Subject: [PATCH 8/9] fix typescript issues

---
 src/store/consts/static.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/store/consts/static.ts b/src/store/consts/static.ts
index 3ca20fc8..161c54f5 100644
--- a/src/store/consts/static.ts
+++ b/src/store/consts/static.ts
@@ -510,7 +510,13 @@ export const walletNames = {
 
 export const defaultImages: string[] = [Dog1, Dog2, Cat1, Cat2]
 
-export const getPopularPools = (network: NetworkType) => {
+type Pool = {
+  tokenX: string
+  tokenY: string
+  fee: string
+}
+
+export const getPopularPools = (network: NetworkType): Pool[] => {
   switch (network) {
     case NetworkType.Mainnet:
       return [

From e644555bcf06753564fabf942cb015a0fa8314f5 Mon Sep 17 00:00:00 2001
From: zielvna <zielvna@gmail.com>
Date: Tue, 17 Dec 2024 16:14:42 +0100
Subject: [PATCH 9/9] fix various bugs

---
 .../PopularPools/Card/StatsLabel/style.ts     |   2 +-
 src/components/Stats/PoolList/PoolList.tsx    | 112 +++++++++---------
 .../Stats/PoolListItem/PoolListItem.tsx       |  58 +++++----
 src/components/Stats/PoolListItem/style.ts    |  23 ++--
 .../Stats/TokenListItem/TokenListItem.tsx     |  44 +++----
 src/components/Stats/TokenListItem/style.ts   |  19 ++-
 src/containers/WrappedStats/styles.ts         |   6 +-
 src/pages/ListPage/styles.ts                  |  10 +-
 src/store/consts/static.ts                    |   4 +-
 9 files changed, 147 insertions(+), 131 deletions(-)

diff --git a/src/components/PopularPools/Card/StatsLabel/style.ts b/src/components/PopularPools/Card/StatsLabel/style.ts
index 4ea119b9..1d86366d 100644
--- 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/Stats/PoolList/PoolList.tsx b/src/components/Stats/PoolList/PoolList.tsx
index 0c496b46..56b976f3 100644
--- 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
diff --git a/src/components/Stats/PoolListItem/PoolListItem.tsx b/src/components/Stats/PoolListItem/PoolListItem.tsx
index 4008addb..3859b6a9 100644
--- a/src/components/Stats/PoolListItem/PoolListItem.tsx
+++ b/src/components/Stats/PoolListItem/PoolListItem.tsx
@@ -69,7 +69,7 @@ const PoolListItem: React.FC<IProps> = ({
   const { classes } = useStyles()
 
   const navigate = useNavigate()
-  const isSm = useMediaQuery(theme.breakpoints.down('sm'))
+  const isSmd = useMediaQuery('(max-width:780px)')
   const isMd = useMediaQuery(theme.breakpoints.down('md'))
 
   const handleOpenPosition = () => {
@@ -124,32 +124,30 @@ const PoolListItem: React.FC<IProps> = ({
           style={hideBottomLine ? { border: 'none' } : undefined}>
           {!isMd ? <Typography>{tokenIndex}</Typography> : null}
           <Grid className={classes.imageContainer}>
-            {!isSm && (
-              <Box className={classes.iconsWrapper}>
-                <Box className={classes.iconContainer}>
-                  <img
-                    className={classes.tokenIcon}
-                    src={iconFrom}
-                    alt='Token from'
-                    onError={e => {
-                      e.currentTarget.src = icons.unknownToken
-                    }}
-                  />
-                  {isUnknownFrom && <img className={classes.warningIcon} src={icons.warningIcon} />}
-                </Box>
-                <Box className={classes.iconContainer}>
-                  <img
-                    className={classes.tokenIcon}
-                    src={iconTo}
-                    alt='Token to'
-                    onError={e => {
-                      e.currentTarget.src = icons.unknownToken
-                    }}
-                  />
-                  {isUnknownTo && <img className={classes.warningIcon} src={icons.warningIcon} />}
-                </Box>
+            <Box className={classes.iconsWrapper}>
+              <Box className={classes.iconContainer}>
+                <img
+                  className={classes.tokenIcon}
+                  src={iconFrom}
+                  alt='Token from'
+                  onError={e => {
+                    e.currentTarget.src = icons.unknownToken
+                  }}
+                />
+                {isUnknownFrom && <img className={classes.warningIcon} src={icons.warningIcon} />}
+              </Box>
+              <Box className={classes.iconContainer}>
+                <img
+                  className={classes.tokenIcon}
+                  src={iconTo}
+                  alt='Token to'
+                  onError={e => {
+                    e.currentTarget.src = icons.unknownToken
+                  }}
+                />
+                {isUnknownTo && <img className={classes.warningIcon} src={icons.warningIcon} />}
               </Box>
-            )}
+            </Box>
             <Grid className={classes.symbolsContainer}>
               <Typography>
                 {shortenAddress(symbolFrom ?? '')}/{shortenAddress(symbolTo ?? '')}
@@ -162,7 +160,7 @@ const PoolListItem: React.FC<IProps> = ({
               </TooltipHover>
             </Grid>
           </Grid>
-          {!isSm ? (
+          {!isSmd ? (
             <Typography className={classes.row}>
               {`${apr > 1000 ? '>1000%' : apr === 0 ? '-' : apr.toFixed(2) + '%'}`}
               <span
@@ -174,7 +172,7 @@ const PoolListItem: React.FC<IProps> = ({
           <Typography>{fee}%</Typography>
           <Typography>{`$${formatNumber(volume)}`}</Typography>
           <Typography>{`$${formatNumber(TVL)}`}</Typography>
-          {!isSm && (
+          {!isMd && (
             <Box className={classes.action}>
               <TooltipHover text='Exchange'>
                 <button className={classes.actionButton} onClick={handleOpenSwap}>
@@ -225,7 +223,7 @@ const PoolListItem: React.FC<IProps> = ({
               <ArrowDropDownIcon className={classes.icon} />
             ) : null}
           </Typography>
-          {!isSm ? (
+          {!isSmd ? (
             <Typography
               className={classes.row}
               style={{ cursor: 'pointer' }}
@@ -292,7 +290,7 @@ const PoolListItem: React.FC<IProps> = ({
               <ArrowDropDownIcon className={classes.icon} />
             ) : null}
           </Typography>
-          {!isSm && <Typography align='right'>Action</Typography>}
+          {!isMd && <Typography align='right'>Action</Typography>}
         </Grid>
       )}
     </Grid>
diff --git a/src/components/Stats/PoolListItem/style.ts b/src/components/Stats/PoolListItem/style.ts
index 44900fb1..8a28df12 100644
--- a/src/components/Stats/PoolListItem/style.ts
+++ b/src/components/Stats/PoolListItem/style.ts
@@ -5,12 +5,11 @@ export const useStyles = makeStyles()(() => ({
   container: {
     color: colors.white.main,
     display: 'grid',
-    gridTemplateColumns: '5% auto 15% 15% 15%  12.5% 120px',
+    gridTemplateColumns: '30px auto 160px 80px 140px 100px 120px',
     padding: '18px 0',
     backgroundColor: colors.invariant.component,
     borderBottom: `1px solid ${colors.invariant.light}`,
     whiteSpace: 'nowrap',
-    maxWidth: '100%',
 
     '& p': {
       ...typography.heading4,
@@ -23,11 +22,15 @@ export const useStyles = makeStyles()(() => ({
     },
 
     [theme.breakpoints.down('md')]: {
-      gridTemplateColumns: 'auto 15% 15% 15%  12.5%120px'
+      gridTemplateColumns: 'auto 140px 100px 80px 120px'
+    },
+
+    '@media (max-width: 780px)': {
+      gridTemplateColumns: 'auto 100px 140px 80px'
     },
 
     [theme.breakpoints.down('sm')]: {
-      gridTemplateColumns: '32.5% 17.5% 35% 15% ',
+      gridTemplateColumns: 'auto 80px 80px 60px',
 
       '& p': {
         justifyContent: 'flex-start',
@@ -141,16 +144,16 @@ export const useStyles = makeStyles()(() => ({
     }
   },
   iconContainer: {
-    minWidth: 28,
-    maxWidth: 28,
-    height: 28,
+    minWidth: 24,
+    maxWidth: 24,
+    height: 24,
     marginRight: 3,
     position: 'relative'
   },
   tokenIcon: {
-    minWidth: 28,
-    maxWidth: 28,
-    height: 28,
+    minWidth: 24,
+    maxWidth: 24,
+    height: 24,
     marginRight: 3,
     borderRadius: '50%'
   },
diff --git a/src/components/Stats/TokenListItem/TokenListItem.tsx b/src/components/Stats/TokenListItem/TokenListItem.tsx
index 37e7a214..75050efd 100644
--- a/src/components/Stats/TokenListItem/TokenListItem.tsx
+++ b/src/components/Stats/TokenListItem/TokenListItem.tsx
@@ -52,7 +52,7 @@ const TokenListItem: React.FC<IProps> = ({
   // const isNegative = priceChange < 0
 
   const isSm = useMediaQuery(theme.breakpoints.down('sm'))
-  const hideName = useMediaQuery(theme.breakpoints.down('xs'))
+  const isMd = useMediaQuery(theme.breakpoints.down('md'))
 
   const networkUrl = useMemo(() => {
     switch (network) {
@@ -81,6 +81,8 @@ const TokenListItem: React.FC<IProps> = ({
       })
   }
 
+  console.log(isSm)
+
   return (
     <Grid>
       {displayType === 'tokens' ? (
@@ -88,24 +90,26 @@ const TokenListItem: React.FC<IProps> = ({
           container
           classes={{ container: classes.container, root: classes.tokenList }}
           style={hideBottomLine ? { border: 'none' } : undefined}>
-          {!hideName && !isSm && <Typography component='p'>{itemNumber}</Typography>}
+          {!isMd && <Typography component='p'>{itemNumber}</Typography>}
           <Grid className={classes.tokenName}>
-            {!isSm && (
-              <Box className={classes.imageContainer}>
-                <img
-                  className={classes.tokenIcon}
-                  src={icon}
-                  alt='Token icon'
-                  onError={e => {
-                    e.currentTarget.src = icons.unknownToken
-                  }}></img>
-                {isUnknown && <img className={classes.warningIcon} src={icons.warningIcon} />}
-              </Box>
-            )}
+            <Box className={classes.imageContainer}>
+              <img
+                className={classes.tokenIcon}
+                src={icon}
+                alt='Token icon'
+                onError={e => {
+                  e.currentTarget.src = icons.unknownToken
+                }}></img>
+              {isUnknown && <img className={classes.warningIcon} src={icons.warningIcon} />}
+            </Box>
             <Typography>
-              {hideName ? shortenAddress(symbol) : name}
-              {!hideName && (
-                <span className={classes.tokenSymbol}>{` (${shortenAddress(symbol)})`}</span>
+              {!isMd ? (
+                <>
+                  <span className={classes.tokenName}>{name}</span>
+                  <span className={classes.tokenSymbol}>({shortenAddress(symbol)})</span>
+                </>
+              ) : (
+                shortenAddress(symbol)
               )}
             </Typography>
             <TooltipHover text='Copy token address'>
@@ -124,7 +128,7 @@ const TokenListItem: React.FC<IProps> = ({
           )} */}
           <Typography>{`$${formatNumber(volume)}`}</Typography>
           <Typography>{`$${formatNumber(TVL)}`}</Typography>
-          {!isSm && (
+          {!isMd && (
             <Box className={classes.action}>
               <TooltipHover text='Open in explorer'>
                 <button
@@ -147,7 +151,7 @@ const TokenListItem: React.FC<IProps> = ({
           container
           style={{ color: colors.invariant.textGrey, fontWeight: 400 }}
           classes={{ container: classes.container, root: classes.header }}>
-          {!hideName && !isSm && (
+          {!isMd && (
             <Typography style={{ lineHeight: '12px' }}>
               N<sup>o</sup>
             </Typography>
@@ -234,7 +238,7 @@ const TokenListItem: React.FC<IProps> = ({
               <ArrowDropDownIcon className={classes.icon} />
             ) : null}
           </Typography>
-          {!isSm && <Typography align='right'>Action</Typography>}
+          {!isMd && <Typography align='right'>Action</Typography>}
         </Grid>
       )}
     </Grid>
diff --git a/src/components/Stats/TokenListItem/style.ts b/src/components/Stats/TokenListItem/style.ts
index 6aa62e84..0053c715 100644
--- a/src/components/Stats/TokenListItem/style.ts
+++ b/src/components/Stats/TokenListItem/style.ts
@@ -5,14 +5,29 @@ import { makeStyles } from 'tss-react/mui'
 export const useStyles = makeStyles()((theme: Theme) => ({
   container: {
     display: 'grid',
-    gridTemplateColumns: '5% 35% 17.5% auto 12.5% 60px',
+    gridTemplateColumns: '30px auto 140px 140px 100px 60px',
     padding: '18px 0 ',
     backgroundColor: colors.invariant.component,
     borderBottom: `1px solid ${colors.invariant.light}`,
     whiteSpace: 'nowrap',
 
+    '& p': {
+      ...typography.heading4,
+      display: 'flex',
+      justifyContent: 'flex-start',
+      alignItems: 'center'
+    },
+    '& p:last-child': {
+      justifyContent: 'flex-end'
+    },
+
+    [theme.breakpoints.down('md')]: {
+      gridTemplateColumns: 'auto 140px 80px 120px'
+    },
+
     [theme.breakpoints.down('sm')]: {
-      gridTemplateColumns: '30% 22.5% 32.5% 15%',
+      gridTemplateColumns: 'auto 100px 80px 60px',
+
       '& p': {
         ...typography.caption1
       }
diff --git a/src/containers/WrappedStats/styles.ts b/src/containers/WrappedStats/styles.ts
index eb8c0d53..7d176e12 100644
--- a/src/containers/WrappedStats/styles.ts
+++ b/src/containers/WrappedStats/styles.ts
@@ -9,7 +9,8 @@ export const useStyles = makeStyles()((theme: Theme) => ({
   },
   subheader: {
     ...typography.heading4,
-    color: colors.white.main
+    color: colors.white.main,
+    marginBottom: 24
   },
   plotsRow: {
     marginBottom: 24,
@@ -44,7 +45,8 @@ export const useStyles = makeStyles()((theme: Theme) => ({
     }
   },
   searchBar: {
-    width: 221,
+    width: '100%',
+    maxWidth: 221,
     height: 32,
     padding: '7px 12px',
     borderRadius: 10,
diff --git a/src/pages/ListPage/styles.ts b/src/pages/ListPage/styles.ts
index d061c0ae..c5aad6e3 100644
--- a/src/pages/ListPage/styles.ts
+++ b/src/pages/ListPage/styles.ts
@@ -8,17 +8,9 @@ const useStyles = makeStyles()(theme => {
       alignItems: 'flex-start',
       backgroundColor: 'transparent',
       marginTop: 45,
-      paddingInline: 94,
+      paddingInline: 40,
       minHeight: '70vh',
 
-      [theme.breakpoints.down('lg')]: {
-        paddingInline: 80
-      },
-
-      [theme.breakpoints.down('md')]: {
-        paddingInline: 90
-      },
-
       [theme.breakpoints.down('sm')]: {
         paddingInline: 8
       }
diff --git a/src/store/consts/static.ts b/src/store/consts/static.ts
index 161c54f5..085a9d8f 100644
--- a/src/store/consts/static.ts
+++ b/src/store/consts/static.ts
@@ -453,9 +453,9 @@ export const DEFAULT_NEW_POSITION_SLIPPAGE = '1.00'
 
 export const CHAINS = [
   { name: Chain.Solana, address: 'https://invariant.app/swap' },
-  { name: Chain.AlephZero, address: 'https://azero.invariant.app/exchange' },
+  // { name: Chain.AlephZero, address: 'https://azero.invariant.app/exchange' },
   { name: Chain.Eclipse, address: 'https://eclipse.invariant.app/exchange' },
-  { name: Chain.Vara, address: 'https://vara.invariant.app/exchange' },
+  // { name: Chain.Vara, address: 'https://vara.invariant.app/exchange' },
   { name: Chain.Alephium, address: 'https://alph.invariant.app/exchange' }
 ]