From 6a4095f11d01abd75653523a74418fcbc5854df1 Mon Sep 17 00:00:00 2001
From: MGrgr <grkapran@gmail.com>
Date: Thu, 1 Feb 2024 02:34:00 +0300
Subject: [PATCH 01/14] feat: pool stats (store)

---
 .env.dev                           |   1 +
 .env.prod                          |   1 +
 .env.stage                         |   1 +
 src/components/pools/PoolsList.vue |   5 +-
 src/config/common.ts               |   1 +
 src/config/tokens.ts               |  13 ++-
 src/stores/index.ts                |   1 +
 src/stores/pools-state.ts          | 134 +++++++++++++++++++++++++++++
 src/stores/token.ts                |   3 +
 src/utils/index.ts                 |   1 +
 src/utils/pools-api.ts             |  58 +++++++++++++
 types/auto-imports.d.ts            |   1 +
 12 files changed, 217 insertions(+), 3 deletions(-)
 create mode 100644 src/stores/pools-state.ts
 create mode 100644 src/utils/pools-api.ts

diff --git a/.env.dev b/.env.dev
index 4995813..07235ec 100644
--- a/.env.dev
+++ b/.env.dev
@@ -1,2 +1,3 @@
 VITE_PASSWORD_PROTECT=345719
 VITE_ALBUS_APP_URL='https://dev.app.albus.finance'
+VITE_POOLS_API_URL='https://dev.app.albus.finance'
diff --git a/.env.prod b/.env.prod
index 3b506d1..9bf236e 100644
--- a/.env.prod
+++ b/.env.prod
@@ -2,3 +2,4 @@
 VITE_GTAG_ID=
 VITE_SENTRY_DSN=
 VITE_ALBUS_APP_URL='https://app.albus.finance'
+VITE_POOLS_API_URL='https://app.albus.finance'
diff --git a/.env.stage b/.env.stage
index b2c0908..b35cb0b 100644
--- a/.env.stage
+++ b/.env.stage
@@ -1,2 +1,3 @@
 VITE_PASSWORD_PROTECT=345719
 VITE_ALBUS_APP_URL='https://stage.app.albus.finance'
+VITE_POOLS_API_URL='https://stage.app.albus.finance'
diff --git a/src/components/pools/PoolsList.vue b/src/components/pools/PoolsList.vue
index 368c719..3c27a09 100644
--- a/src/components/pools/PoolsList.vue
+++ b/src/components/pools/PoolsList.vue
@@ -7,6 +7,9 @@ const onlyMyPools = ref(false)
 const swapStore = useSwapStore()
 const tokenSwapsAllFiltered = computed(() => swapStore.tokenSwapsAllFiltered.filter(p => !connected.value || !onlyMyPools.value || swapStore.userPoolsTokens[p.data.poolMint.toBase58()]))
 const { state } = swapStore
+
+const poolsStatsStore = usePoolsStatsStore()
+const poolDataLoading = computed(() => poolsStatsStore.poolsLoading)
 </script>
 
 <template>
@@ -15,7 +18,7 @@ const { state } = swapStore
     <q-toggle v-model="onlyMyPools" color="secondary" dense class="app-toggle" />
   </div>
   <div>
-    <q-inner-loading :showing="state?.loading" class="swap-loading" color="grey" />
+    <q-inner-loading :showing="state?.loading || poolDataLoading" class="swap-loading" color="grey" />
     <div class="row justify-center">
       <pools-list-item
         v-for="(pool, idx) in tokenSwapsAllFiltered"
diff --git a/src/config/common.ts b/src/config/common.ts
index 63bf171..f814b2f 100644
--- a/src/config/common.ts
+++ b/src/config/common.ts
@@ -4,6 +4,7 @@ export const TWITTER_URL = 'https://twitter.com/AlbusProtocol'
 export const DISCORD_URL = ''
 
 export const ALBUS_APP_URL = import.meta.env.VITE_ALBUS_APP_URL || (import.meta.env.DEV && 'https://dev.app.albus.finance') || 'https://app.albus.finance'
+export const POOLS_API_URL = import.meta.env.VITE_POOLS_API_URL || (import.meta.env.DEV && 'http://localhost:3000')
 
 export const RENT_FEE = 0.00203928
 export const MIN_TRANSFER_FEE = 0.00203928
diff --git a/src/config/tokens.ts b/src/config/tokens.ts
index 2d99bd8..8272756 100644
--- a/src/config/tokens.ts
+++ b/src/config/tokens.ts
@@ -95,14 +95,14 @@ export const TOKEN_C = {
   name: PoolTokenSymbol.TOKEN_C,
   image: usdtToken,
   decimals: 9,
-  mint: 'EkXuCiyaoToaK1VKFNrziSx9Nj171EJ2V7ksMtB6JKtW',
+  mint: '5snBnRp3ZaFZHyQqVFSCzCoCHRPrUuLVzUtTN8wdZM41',
 }
 
 export const TOKENS_DEV = [
   // TOKEN_A,
-  TOKEN_B,
   SOL_TOKEN,
   WRAPPED_SOL_TOKEN,
+  TOKEN_B,
   USDC_TOKEN_DEV,
   // USDT_TOKEN_DEV,
   // TOKEN_C,
@@ -114,3 +114,12 @@ export const TOKENS_MAIN = [
   USDC_TOKEN_MAIN,
   JSOL_TOKEN_MAIN,
 ]
+
+export const TOKENS_PRICE_NAME = {
+  'So11111111111111111111111111111111111111112': 'solana',
+  '7Q2afV64in6N6SeZsAAB81TJzwDoD6zpqmHkzi9Dcavn': 'jpool',
+  'EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v': 'usd-coin',
+  // devnet:
+  '6rdejLXbi2Ws2z3Ff1wRhRS9WqrXRDuM8YpSkiektRgw': 'jpool',
+  '4zMMC9srt5Ri5X14GAgXhaHii3GnPAEERYPJgZJDncDU': 'usd-coin',
+}
diff --git a/src/stores/index.ts b/src/stores/index.ts
index 63f3c5e..fbf5c0e 100644
--- a/src/stores/index.ts
+++ b/src/stores/index.ts
@@ -8,3 +8,4 @@ export * from './token'
 export * from './liquidity'
 export * from './liquidity-single'
 export * from './liquidity-withdraw'
+export * from './pools-state'
diff --git a/src/stores/pools-state.ts b/src/stores/pools-state.ts
new file mode 100644
index 0000000..5e537dc
--- /dev/null
+++ b/src/stores/pools-state.ts
@@ -0,0 +1,134 @@
+import { defineStore } from 'pinia'
+import { debounce } from 'lodash-es'
+import { type PoolData, type TxData, getCoinsPrice, getPoolsStats, getPoolsTransactions, lamportsToSol } from '@/utils'
+import { TOKENS_PRICE_NAME } from '@/config'
+
+export interface PoolStats {
+  tokenAMint: string
+  tokenBMint: string
+  amountTokenA: number
+  amountTokenB: number
+  tvl: number
+  volume24: number
+  fees24: number
+  apr24: number
+}
+
+export const usePoolsStatsStore = defineStore('pools-stats', () => {
+  const poolsData = ref<PoolData[]>([])
+  const poolsLoading = ref(true)
+  const txData = ref<TxData[]>([])
+  const txLoading = ref(true)
+  const priceData = ref<Record<string, number>>({})
+  const priceLoading = ref(true)
+  const poolsStats = ref<Record<string, PoolStats>>({})
+
+  const connectionStore = useConnectionStore()
+  const tokenStore = useTokenStore()
+  const swapStore = useSwapStore()
+  const swapPools = computed(() => swapStore.tokenSwapsAllFiltered)
+
+  const getPoolsData = debounce(async () => {
+    poolsLoading.value = true
+    try {
+      poolsData.value = await getPoolsStats()
+    } catch (e) {
+      console.error('get pools data: ', e)
+    } finally {
+      poolsLoading.value = false
+    }
+  }, 500)
+
+  watch(swapPools, getPoolsData, { immediate: true })
+
+  const getTxData = debounce(async () => {
+    txLoading.value = true
+    try {
+      txData.value = await getPoolsTransactions()
+    } catch (e) {
+      console.error('get tx data: ', e)
+    } finally {
+      txLoading.value = false
+    }
+  }, 500)
+
+  watch(() => connectionStore.cluster, getTxData, { immediate: true })
+  setInterval(getTxData, 60000)
+
+  const getPriceData = debounce(async () => {
+    priceLoading.value = true
+    try {
+      priceData.value = await getCoinsPrice()
+    } catch (e) {
+      console.error('get tx data: ', e)
+    } finally {
+      priceLoading.value = false
+    }
+  }, 500)
+
+  getPriceData()
+  setInterval(getPriceData, 60000)
+
+  watch([poolsData, txData, priceData], () => {
+    // console.log('[pools stats] start: ', new Date())
+    if (poolsLoading.value || txLoading.value || priceLoading.value) {
+      return
+    }
+    const list: Record<string, PoolStats> = swapPools.value.reduce((acc, cur) => {
+      acc[cur.pubkey.toBase58()] = {
+        tokenAMint: cur.data.tokenAMint.toBase58(),
+        tokenBMint: cur.data.tokenBMint.toBase58(),
+        amountTokenA: 0,
+        amountTokenB: 0,
+        tvl: 0,
+        volume24: 0,
+        fees24: 0,
+        apr24: 0,
+      }
+      return acc
+    }, {} as Record<string, PoolStats>)
+
+    poolsData.value?.forEach((p) => {
+      if (list[p.address]) {
+        list[p.address].amountTokenA = Number(p.tokenABalance)
+        list[p.address].amountTokenB = Number(p.tokenBBalance)
+      }
+    })
+
+    txData.value?.forEach((t) => {
+      if (list[t.poolAddress]) {
+        const tokenA = tokenStore.tokenByMint(list[t.poolAddress].tokenAMint)
+        const tokenB = tokenStore.tokenByMint(list[t.poolAddress].tokenBMint)
+        if (Number(t.amountTokenA) > 0) {
+          list[t.poolAddress].volume24 += lamportsToSol(Number(t.amountTokenA), tokenA?.decimals) * t.priceTokenA
+          list[t.poolAddress].fees24 += lamportsToSol(Number(t.feeTokenB), tokenB?.decimals) * t.priceTokenB
+        }
+        if (Number(t.amountTokenB) > 0) {
+          list[t.poolAddress].volume24 += lamportsToSol(Number(t.amountTokenB), tokenB?.decimals) * t.priceTokenB
+          list[t.poolAddress].fees24 += lamportsToSol(Number(t.feeTokenA), tokenA?.decimals) * t.priceTokenA
+        }
+      }
+    })
+
+    Object.keys(list).forEach((k) => {
+      const tokenA = tokenStore.tokenByMint(list[k].tokenAMint)
+      const tokenB = tokenStore.tokenByMint(list[k].tokenBMint)
+
+      list[k].tvl = (
+        lamportsToSol(list[k].amountTokenA, tokenA?.decimals) * (priceData.value[TOKENS_PRICE_NAME[list[k].tokenAMint]] ?? 0)
+        + lamportsToSol(list[k].amountTokenB, tokenB?.decimals) * (priceData.value[TOKENS_PRICE_NAME[list[k].tokenBMint]] ?? 0)
+      )
+
+      list[k].apr24 = list[k].fees24 / list[k].tvl * 365
+    })
+    // console.log('[pools stats] end: ', new Date())
+    console.log('[pools stats]: ', list)
+  })
+
+  return {
+    poolsLoading,
+    txLoading,
+    priceLoading,
+    poolsStats,
+  }
+})
diff --git a/src/stores/token.ts b/src/stores/token.ts
index 7b3519c..73dd34a 100644
--- a/src/stores/token.ts
+++ b/src/stores/token.ts
@@ -37,9 +37,12 @@ export const useTokenStore = defineStore('token', () => {
     }))
   })
 
+  const tokenByMint = (mint: string) => tokens.value.find(t => t.mint === mint)
+
   return {
     tokens,
     loading,
     getTokenList,
+    tokenByMint,
   }
 })
diff --git a/src/utils/index.ts b/src/utils/index.ts
index cc42fc7..9d106d3 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -5,3 +5,4 @@ export * from './common'
 export * from './connection'
 export * from './rpc'
 export * from './dialogs'
+export * from './pools-api'
diff --git a/src/utils/pools-api.ts b/src/utils/pools-api.ts
new file mode 100644
index 0000000..e1087f7
--- /dev/null
+++ b/src/utils/pools-api.ts
@@ -0,0 +1,58 @@
+import axios from 'axios'
+import { POOLS_API_URL } from '@/config'
+
+export interface PoolData {
+  id: number
+  address: string
+  swapAuthority: string
+  poolMint: string
+  tokenAMint: string
+  tokenBMint: string
+  poolFeeAccount: string
+  tokenA: string
+  tokenB: string
+  poolTokenSupply: string
+  tokenABalance: string
+  tokenBBalance: string
+  fees: {
+    hostFeeDenominator: number
+    hostFeeNumerator: number
+    ownerTradeFeeDenominator: number
+    ownerTradeFeeNumerator: number
+    ownerWithdrawFeeDenominator: number
+    ownerWithdrawFeeNumerator: number
+    tradeFeeDenominator: number
+    tradeFeeNumerator: number
+  }
+  cluster: string
+  updatedAt: string
+  createdAt: string
+  lastSignature: string
+}
+
+export interface TxData {
+  poolAddress: string
+  amountTokenA: string
+  amountTokenB: string
+  feeTokenA: string
+  feeTokenB: string
+  priceTokenA: number
+  priceTokenB: number
+  createdAt: string
+  type?: string
+}
+
+export async function getPoolsStats(): Promise<PoolData[]> {
+  const { data } = await axios.get(`${POOLS_API_URL}`)
+  return data
+}
+
+export async function getPoolsTransactions(): Promise<TxData[]> {
+  const { data } = await axios.get(`${POOLS_API_URL}/transactions?type=swap`)
+  return data
+}
+
+export async function getCoinsPrice(): Promise<Record<string, number>> {
+  const { data } = await axios.get(`${POOLS_API_URL}/coin-price`)
+  return data
+}
diff --git a/types/auto-imports.d.ts b/types/auto-imports.d.ts
index e43792a..bf81b45 100644
--- a/types/auto-imports.d.ts
+++ b/types/auto-imports.d.ts
@@ -235,6 +235,7 @@ declare global {
   const usePointer: typeof import('@vueuse/core')['usePointer']
   const usePointerLock: typeof import('@vueuse/core')['usePointerLock']
   const usePointerSwipe: typeof import('@vueuse/core')['usePointerSwipe']
+  const usePoolsStatsStore: typeof import('../src/stores/pools-state')['usePoolsStatsStore']
   const usePreferredColorScheme: typeof import('@vueuse/core')['usePreferredColorScheme']
   const usePreferredContrast: typeof import('@vueuse/core')['usePreferredContrast']
   const usePreferredDark: typeof import('@vueuse/core')['usePreferredDark']

From 5d31ccc2084eb678bd3e831960d281aa9a0da6af Mon Sep 17 00:00:00 2001
From: MGrgr <grkapran@gmail.com>
Date: Thu, 1 Feb 2024 15:46:09 +0300
Subject: [PATCH 02/14] fix: update menu

---
 src/App.vue                                  |  2 +-
 src/components/Menu/MobileMenu.vue           |  2 +-
 src/components/Sidebar/SidebarNavigation.vue | 12 ++++++------
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 18658ae..e83bafc 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -31,7 +31,7 @@ const route = useRoute()
 const router = useRouter()
 watch(route, () => {
   if (route.name === 'index' || route.name === 'all' || (route.name && !router.hasRoute(route.name))) {
-    router.push('/transfer')
+    router.push('/swap')
   }
 }, { immediate: true })
 </script>
diff --git a/src/components/Menu/MobileMenu.vue b/src/components/Menu/MobileMenu.vue
index de52226..4fceeeb 100644
--- a/src/components/Menu/MobileMenu.vue
+++ b/src/components/Menu/MobileMenu.vue
@@ -3,7 +3,7 @@ import { evaClose, evaMenu } from '@quasar/extras/eva-icons'
 
 const _route = useRoute()
 
-const routes = ['transfer', 'swap', 'liquidity', 'pools', 'about']
+const routes = ['swap', 'pools', 'liquidity', 'transfer', 'about']
 
 const isOpen = ref(false)
 
diff --git a/src/components/Sidebar/SidebarNavigation.vue b/src/components/Sidebar/SidebarNavigation.vue
index 79a8aac..95e88ff 100644
--- a/src/components/Sidebar/SidebarNavigation.vue
+++ b/src/components/Sidebar/SidebarNavigation.vue
@@ -6,21 +6,21 @@ import stakeIcon from '@/assets/img/icons/stake-icon.svg?raw'
 const router = useRoute()
 
 const routes = [
-  {
-    name: 'transfer',
-    icon: transferIcon,
-  },
   {
     name: 'swap',
     icon: swapIcon,
   },
+  {
+    name: 'pools',
+    icon: stakeIcon,
+  },
   {
     name: 'liquidity',
     icon: swapIcon,
   },
   {
-    name: 'pools',
-    icon: stakeIcon,
+    name: 'transfer',
+    icon: transferIcon,
   },
 ]
 

From d025d096fa6ca9dbd636fde006292e4043cbd484 Mon Sep 17 00:00:00 2001
From: MGrgr <grkapran@gmail.com>
Date: Thu, 1 Feb 2024 16:32:33 +0300
Subject: [PATCH 03/14] fix: update pool stats calculation

---
 src/stores/pools-state.ts | 46 ++++++++++++++++++++++++++++++++++-----
 1 file changed, 40 insertions(+), 6 deletions(-)

diff --git a/src/stores/pools-state.ts b/src/stores/pools-state.ts
index 5e537dc..30584da 100644
--- a/src/stores/pools-state.ts
+++ b/src/stores/pools-state.ts
@@ -3,7 +3,7 @@ import { debounce } from 'lodash-es'
 import { type PoolData, type TxData, getCoinsPrice, getPoolsStats, getPoolsTransactions, lamportsToSol } from '@/utils'
 import { TOKENS_PRICE_NAME } from '@/config'
 
-export interface PoolStats {
+interface PoolStats {
   tokenAMint: string
   tokenBMint: string
   amountTokenA: number
@@ -14,6 +14,12 @@ export interface PoolStats {
   apr24: number
 }
 
+interface PoolStatsTotal {
+  tvl: number
+  volume24: number
+  fees24: number
+}
+
 export const usePoolsStatsStore = defineStore('pools-stats', () => {
   const poolsData = ref<PoolData[]>([])
   const poolsLoading = ref(true)
@@ -22,6 +28,11 @@ export const usePoolsStatsStore = defineStore('pools-stats', () => {
   const priceData = ref<Record<string, number>>({})
   const priceLoading = ref(true)
   const poolsStats = ref<Record<string, PoolStats>>({})
+  const poolsStatsTotal = ref<PoolStatsTotal>({
+    tvl: 0,
+    volume24: 0,
+    fees24: 0,
+  })
 
   const connectionStore = useConnectionStore()
   const tokenStore = useTokenStore()
@@ -74,6 +85,11 @@ export const usePoolsStatsStore = defineStore('pools-stats', () => {
     if (poolsLoading.value || txLoading.value || priceLoading.value) {
       return
     }
+    const total: PoolStatsTotal = {
+      tvl: 0,
+      volume24: 0,
+      fees24: 0,
+    }
     const list: Record<string, PoolStats> = swapPools.value.reduce((acc, cur) => {
       acc[cur.pubkey.toBase58()] = {
         tokenAMint: cur.data.tokenAMint.toBase58(),
@@ -100,12 +116,25 @@ export const usePoolsStatsStore = defineStore('pools-stats', () => {
         const tokenA = tokenStore.tokenByMint(list[t.poolAddress].tokenAMint)
         const tokenB = tokenStore.tokenByMint(list[t.poolAddress].tokenBMint)
         if (Number(t.amountTokenA) > 0) {
-          list[t.poolAddress].volume24 += lamportsToSol(Number(t.amountTokenA), tokenA?.decimals) * t.priceTokenA
+          const volume = lamportsToSol(Number(t.amountTokenA), tokenA?.decimals) * t.priceTokenA
+          list[t.poolAddress].volume24 += volume
           list[t.poolAddress].fees24 += lamportsToSol(Number(t.feeTokenB), tokenB?.decimals) * t.priceTokenB
+          total.volume24 += volume
         }
         if (Number(t.amountTokenB) > 0) {
+          const volume = lamportsToSol(Number(t.amountTokenB), tokenB?.decimals) * t.priceTokenB
           list[t.poolAddress].volume24 += lamportsToSol(Number(t.amountTokenB), tokenB?.decimals) * t.priceTokenB
-          list[t.poolAddress].fees24 += lamportsToSol(Number(t.feeTokenA), tokenA?.decimals) * t.priceTokenA
+          total.volume24 += volume
+        }
+        if (Number(t.feeTokenA) > 0) {
+          const fee = lamportsToSol(Number(t.feeTokenA), tokenA?.decimals) * t.priceTokenA
+          list[t.poolAddress].fees24 += fee
+          total.fees24 += fee
+        }
+        if (Number(t.feeTokenB) > 0) {
+          const fee = lamportsToSol(Number(t.feeTokenB), tokenB?.decimals) * t.priceTokenB
+          list[t.poolAddress].fees24 += fee
+          total.fees24 += fee
         }
       }
     })
@@ -114,15 +143,19 @@ export const usePoolsStatsStore = defineStore('pools-stats', () => {
       const tokenA = tokenStore.tokenByMint(list[k].tokenAMint)
       const tokenB = tokenStore.tokenByMint(list[k].tokenBMint)
 
-      list[k].tvl = (
-        lamportsToSol(list[k].amountTokenA, tokenA?.decimals) * (priceData.value[TOKENS_PRICE_NAME[list[k].tokenAMint]] ?? 0)
+      const tvl = lamportsToSol(list[k].amountTokenA, tokenA?.decimals) * (priceData.value[TOKENS_PRICE_NAME[list[k].tokenAMint]] ?? 0)
         + lamportsToSol(list[k].amountTokenB, tokenB?.decimals) * (priceData.value[TOKENS_PRICE_NAME[list[k].tokenBMint]] ?? 0)
-      )
+      list[k].tvl = tvl
+      total.tvl += tvl
 
       list[k].apr24 = list[k].fees24 / list[k].tvl * 365
     })
+
+    poolsStats.value = list
+    poolsStatsTotal.value = total
     // console.log('[pools stats] end: ', new Date())
     console.log('[pools stats]: ', list)
+    console.log('[pools stats] total: ', total)
   })
 
   return {
@@ -130,5 +163,6 @@ export const usePoolsStatsStore = defineStore('pools-stats', () => {
     txLoading,
     priceLoading,
     poolsStats,
+    poolsStatsTotal,
   }
 })

From ab8baf94df220a6a55c2c49cedeaee442da81cbe Mon Sep 17 00:00:00 2001
From: MGrgr <grkapran@gmail.com>
Date: Thu, 1 Feb 2024 20:43:22 +0300
Subject: [PATCH 04/14] fix: tradings stats in pool cards

---
 src/assets/styles/components/_pool-card.scss | 14 ++++-
 src/components/pools/PoolsList.vue           |  7 ++-
 src/components/pools/PoolsListItem.vue       | 65 ++++++++++++++++----
 src/components/pools/PoolsTotal.vue          | 16 +++++
 src/stores/pools-state.ts                    |  5 +-
 src/stores/swap.ts                           |  7 ++-
 types/components.d.ts                        |  1 +
 7 files changed, 96 insertions(+), 19 deletions(-)
 create mode 100644 src/components/pools/PoolsTotal.vue

diff --git a/src/assets/styles/components/_pool-card.scss b/src/assets/styles/components/_pool-card.scss
index 58e2786..abe8ff9 100644
--- a/src/assets/styles/components/_pool-card.scss
+++ b/src/assets/styles/components/_pool-card.scss
@@ -12,7 +12,6 @@
     min-width: 316px;
   }
 
-
   &__head {
     font-size: 15px;
     font-weight: 500;
@@ -23,9 +22,14 @@
     text-overflow: ellipsis;
   }
 
+  &__body {
+    display: flex;
+    flex-direction: column;
+  }
+
   &__subtitle {
     font-weight: 500;
-    font-size: 16px;
+    font-size: 18px;
     text-transform: uppercase;
   }
 
@@ -33,8 +37,12 @@
     word-break: break-all;
   }
 
+  &__stats {
+    font-size: 15px;
+  }
+
   &__icons {
-    height: 36px;
+    height: 32px;
 
     img {
       height: 100%;
diff --git a/src/components/pools/PoolsList.vue b/src/components/pools/PoolsList.vue
index 3c27a09..25daff6 100644
--- a/src/components/pools/PoolsList.vue
+++ b/src/components/pools/PoolsList.vue
@@ -6,13 +6,16 @@ const onlyMyPools = ref(false)
 
 const swapStore = useSwapStore()
 const tokenSwapsAllFiltered = computed(() => swapStore.tokenSwapsAllFiltered.filter(p => !connected.value || !onlyMyPools.value || swapStore.userPoolsTokens[p.data.poolMint.toBase58()]))
+const userPoolsTokens = computed(() => swapStore.userPoolsTokens)
 const { state } = swapStore
 
 const poolsStatsStore = usePoolsStatsStore()
 const poolDataLoading = computed(() => poolsStatsStore.poolsLoading)
+const poolsStats = computed(() => poolsStatsStore.poolsStats)
 </script>
 
 <template>
+  <pools-total class="q-mb-sm" />
   <div v-if="connected" class="full-width app-description row items-center justify-start q-mb-md">
     <span class="q-mr-sm">My Liquidity</span>
     <q-toggle v-model="onlyMyPools" color="secondary" dense class="app-toggle" />
@@ -22,9 +25,11 @@ const poolDataLoading = computed(() => poolsStatsStore.poolsLoading)
     <div class="row justify-center">
       <pools-list-item
         v-for="(pool, idx) in tokenSwapsAllFiltered"
-        :key="pool.pubkey?.toBase58() ?? idx"
+        :key="pool.pubkey.toBase58() ?? idx"
         :pubkey="pool.pubkey"
         :data="pool.data"
+        :user-tokens="userPoolsTokens[pool.data.poolMint.toBase58()]"
+        :pool-stats="poolsStats[pool.pubkey.toBase58()]"
         class="q-mx-sm q-mb-md"
       />
       <div v-if="!state.loading && !tokenSwapsAllFiltered.length" class="text-h5">
diff --git a/src/components/pools/PoolsListItem.vue b/src/components/pools/PoolsListItem.vue
index 53a3ea2..bb2dad6 100644
--- a/src/components/pools/PoolsListItem.vue
+++ b/src/components/pools/PoolsListItem.vue
@@ -1,23 +1,28 @@
 <script setup lang="ts">
+import { useWallet } from 'solana-wallets-vue'
 import type { TokenSwap } from '@albus-finance/swap-sdk'
 import type { PublicKey } from '@solana/web3.js'
-import { formatPct } from '@/utils'
+import { formatBalance, formatPct } from '@/utils'
 import { shortenAddress } from '~/utils/web3'
+import type { PoolStats } from '@/stores'
 
 const props = defineProps({
   pubkey: Object as PropType<PublicKey>,
   data: Object as PropType<TokenSwap>,
+  poolStats: Object as PropType<PoolStats>,
+  userTokens: Number,
   useEmit: Boolean,
 })
 defineEmits(['selectPool'])
 
+const { connected } = useWallet()
 const tokenStore = useTokenStore()
 const tokens = computed(() => tokenStore.tokens)
 const tokenAData = computed(() => tokens.value.find(t => t.mint === props.data?.tokenAMint.toBase58()))
 const tokenBData = computed(() => tokens.value.find(t => t.mint === props.data?.tokenBMint.toBase58()))
 
-const userStore = useUserStore()
-const policyData = computed(() => userStore.servicePolicy.find(t => t.pubkey.toBase58() === props.data?.policy?.toBase58()))
+// const userStore = useUserStore()
+// const policyData = computed(() => userStore.servicePolicy.find(t => t.pubkey.toBase58() === props.data?.policy?.toBase58()))
 
 const swapStore = useSwapStore()
 const router = useRouter()
@@ -46,21 +51,51 @@ const dialog = ref(false)
 
 <template>
   <q-card v-if="pubkey && data && tokenAData && tokenBData" class="pool-card" @click="useEmit ? $emit('selectPool') : undefined">
-    <q-card-section class="pool-card__body">
-      <div class="pool-card__subtitle row justify-center items-center">
-        <span>{{ tokenAData?.symbol }} / {{ tokenBData?.symbol }}</span>
-        <span class="policy-info q-ml-md" @click="dialog = true">
+    <q-card-section class="pool-card__body full-height">
+      <div class="row">
+        <div class="pool-card__icons row justify-center q-mr-md">
+          <img v-if="tokenAData?.image" :src="tokenAData?.image" :alt="tokenAData?.symbol">
+          <img v-if="tokenBData?.image" :src="tokenBData?.image" :alt="tokenBData?.symbol">
+        </div>
+        <div class="pool-card__subtitle row justify-center items-center">
+          <span>{{ tokenAData?.symbol }} / {{ tokenBData?.symbol }}</span>
+        </div>
+        <span class="policy-info q-ml-auto" @click="dialog = true">
           i
         </span>
       </div>
-      <div class="pool-card__icons row justify-center q-mt-xs">
-        <img v-if="tokenAData?.image" :src="tokenAData?.image" :alt="tokenAData?.symbol">
-        <img v-if="tokenBData?.image" :src="tokenBData?.image" :alt="tokenBData?.symbol">
+
+      <div v-if="poolStats" class="row q-mt-sm q-mb-auto q-pt-xs pool-card__stats">
+        <div class="row col-6 q-mt-xs">
+          Liquidity:&nbsp;
+          <span :class="{ 'full-width': $q.screen.lt.sm }">${{ formatBalance(poolStats.tvl, 2) }}</span>
+        </div>
+        <div class="row col-6 q-mt-xs">
+          Volume 24h:&nbsp;
+          <span :class="{ 'full-width': $q.screen.lt.sm }">${{ formatBalance(poolStats.volume24, 2) }}</span>
+        </div>
+        <div class="row col-6 q-mt-xs">
+          Fees 24h:&nbsp;
+          <span :class="{ 'full-width': $q.screen.lt.sm }">${{ formatBalance(poolStats.fees24, 2) }}</span>
+        </div>
+        <div class="row col-6 q-mt-xs">
+          APR 24h:&nbsp;
+          <span :class="{ 'full-width': $q.screen.lt.sm }">{{ formatPct.format(poolStats.apr24) }}</span>
+        </div>
+        <div v-if="userTokens && connected" class="q-py-md" />
+        <div v-if="userTokens && connected" class="row col-6 q-mt-xs">
+          Your Liquidity:&nbsp;
+          <span :class="{ 'full-width': $q.screen.lt.sm }">${{ formatBalance(userTokens / poolStats.poolTokenSupply * poolStats.tvl, 2) }}</span>
+        </div>
+        <div v-if="userTokens && connected" class="row col-6 q-mt-xs">
+          Your share:&nbsp;
+          <span :class="{ 'full-width': $q.screen.lt.sm }">{{ formatPct.format(userTokens / poolStats.poolTokenSupply) }}</span>
+        </div>
       </div>
 
-      <div class="q-mt-md row justify-center">
+      <!-- <div class="q-mt-md row justify-center">
         <policy-card-view :required-policy="data.policy?.toBase58()" :required-policy-data="policyData?.data" />
-      </div>
+      </div> -->
 
       <div v-if="!useEmit" class="row q-mt-md">
         <div class="col">
@@ -114,9 +149,13 @@ const dialog = ref(false)
           </span>
         </div>
         <div class="row items-center q-mt-xs">
-          Pool fee:&nbsp;
+          Swap fee:&nbsp;
           <span class="pool-card__pubkey">{{ formatPct.format(swapFee) }}</span>
         </div>
+        <div class="row items-center q-mt-xs">
+          Withdraw fee:&nbsp;
+          <span class="pool-card__pubkey">{{ formatPct.format(fees.ownerWithdraw) }}</span>
+        </div>
       </q-card>
     </q-dialog>
   </q-card>
diff --git a/src/components/pools/PoolsTotal.vue b/src/components/pools/PoolsTotal.vue
new file mode 100644
index 0000000..f8e284a
--- /dev/null
+++ b/src/components/pools/PoolsTotal.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { formatBalance } from '@/utils'
+
+const poolsStatsStore = usePoolsStatsStore()
+const poolsStatsTotal = computed(() => poolsStatsStore.poolsStatsTotal)
+</script>
+
+<template>
+  <div class="full-width q-pl-md">
+    <q-inner-loading :showing="poolsStatsTotal.tvl === 0" class="swap-loading" color="grey" />
+    <div class="row justify-start text-subtitle1 q-pl-xs">
+      <span class="q-mr-md">TVL: ${{ formatBalance(poolsStatsTotal.tvl, 2) }}</span>
+      <span>Volume 24h: ${{ formatBalance(poolsStatsTotal.volume24, 2) }}</span>
+    </div>
+  </div>
+</template>
diff --git a/src/stores/pools-state.ts b/src/stores/pools-state.ts
index 30584da..1381165 100644
--- a/src/stores/pools-state.ts
+++ b/src/stores/pools-state.ts
@@ -3,11 +3,12 @@ import { debounce } from 'lodash-es'
 import { type PoolData, type TxData, getCoinsPrice, getPoolsStats, getPoolsTransactions, lamportsToSol } from '@/utils'
 import { TOKENS_PRICE_NAME } from '@/config'
 
-interface PoolStats {
+export interface PoolStats {
   tokenAMint: string
   tokenBMint: string
   amountTokenA: number
   amountTokenB: number
+  poolTokenSupply: number
   tvl: number
   volume24: number
   fees24: number
@@ -94,6 +95,7 @@ export const usePoolsStatsStore = defineStore('pools-stats', () => {
       acc[cur.pubkey.toBase58()] = {
         tokenAMint: cur.data.tokenAMint.toBase58(),
         tokenBMint: cur.data.tokenBMint.toBase58(),
+        poolTokenSupply: 0,
         amountTokenA: 0,
         amountTokenB: 0,
         tvl: 0,
@@ -108,6 +110,7 @@ export const usePoolsStatsStore = defineStore('pools-stats', () => {
       if (list[p.address]) {
         list[p.address].amountTokenA = Number(p.tokenABalance)
         list[p.address].amountTokenB = Number(p.tokenBBalance)
+        list[p.address].poolTokenSupply = Number(p.poolTokenSupply)
       }
     })
 
diff --git a/src/stores/swap.ts b/src/stores/swap.ts
index dd9e2db..55171ae 100644
--- a/src/stores/swap.ts
+++ b/src/stores/swap.ts
@@ -47,6 +47,7 @@ export enum SwapDirection {
 
 export const useSwapStore = defineStore('swap', () => {
   const connectionStore = useConnectionStore()
+  const tokenStore = useTokenStore()
   const userStore = useUserStore()
   const wallet = useAnchorWallet()
   const { publicKey } = useWallet()
@@ -200,7 +201,11 @@ export const useSwapStore = defineStore('swap', () => {
     () => userStore.servicePolicy,
   ], async () => {
     console.log('tokenSwapsAll: ', tokenSwapsAll.value)
-    tokenSwapsAllFiltered.value = tokenSwapsAll.value.filter(p => !!userStore.servicePolicy.find(sp => sp.pubkey.toBase58() === p.data.policy?.toBase58()))
+    tokenSwapsAllFiltered.value = tokenSwapsAll.value.filter(p => !!userStore.servicePolicy.find(sp =>
+      sp.pubkey.toBase58() === p.data.policy?.toBase58()
+      && !!tokenStore.tokenByMint(p.data.tokenAMint.toBase58())
+      && !!tokenStore.tokenByMint(p.data.tokenBMint.toBase58()),
+    ))
   }, { immediate: true })
 
   watch([
diff --git a/types/components.d.ts b/types/components.d.ts
index 6879d62..23b6a7d 100644
--- a/types/components.d.ts
+++ b/types/components.d.ts
@@ -37,6 +37,7 @@ declare module 'vue' {
     PolicyInfoView: typeof import('./../src/components/PolicyCard/PolicyInfoView.vue')['default']
     PoolsList: typeof import('./../src/components/pools/PoolsList.vue')['default']
     PoolsListItem: typeof import('./../src/components/pools/PoolsListItem.vue')['default']
+    PoolsTotal: typeof import('./../src/components/pools/PoolsTotal.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SelectPair: typeof import('./../src/components/liquidity/SelectPair.vue')['default']

From 8e95e71295d2d6ba433f160798ba4f7265b76cad Mon Sep 17 00:00:00 2001
From: MGrgr <grkapran@gmail.com>
Date: Thu, 1 Feb 2024 20:53:51 +0300
Subject: [PATCH 05/14] fix: pools page loader

---
 src/components/pools/PoolsTotal.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/pools/PoolsTotal.vue b/src/components/pools/PoolsTotal.vue
index f8e284a..beb038b 100644
--- a/src/components/pools/PoolsTotal.vue
+++ b/src/components/pools/PoolsTotal.vue
@@ -3,11 +3,18 @@ import { formatBalance } from '@/utils'
 
 const poolsStatsStore = usePoolsStatsStore()
 const poolsStatsTotal = computed(() => poolsStatsStore.poolsStatsTotal)
+const poolsLoading = computed(() => poolsStatsStore.poolsLoading)
+const txLoading = computed(() => poolsStatsStore.txLoading)
+const priceLoading = computed(() => poolsStatsStore.priceLoading)
 </script>
 
 <template>
   <div class="full-width q-pl-md">
-    <q-inner-loading :showing="poolsStatsTotal.tvl === 0" class="swap-loading" color="grey" />
+    <q-inner-loading
+      :showing="poolsStatsTotal.tvl === 0 && (poolsLoading || txLoading || priceLoading)"
+      class="swap-loading"
+      color="grey"
+    />
     <div class="row justify-start text-subtitle1 q-pl-xs">
       <span class="q-mr-md">TVL: ${{ formatBalance(poolsStatsTotal.tvl, 2) }}</span>
       <span>Volume 24h: ${{ formatBalance(poolsStatsTotal.volume24, 2) }}</span>

From 0f03d612ccb5ae87a2b8da7c4cbb6b09ae194380 Mon Sep 17 00:00:00 2001
From: MGrgr <grkapran@gmail.com>
Date: Fri, 2 Feb 2024 00:02:52 +0300
Subject: [PATCH 06/14] fix: rework dialogs

---
 src/components/PolicyCard/PolicyCardView.vue  | 22 ++---
 src/components/Swap/SwapCard.vue              | 36 ++++----
 src/components/liquidity/DepositBothCard.vue  | 37 +++++----
 src/components/liquidity/WithdrawBothCard.vue | 36 ++++----
 src/components/pools/PoolsListItem.vue        | 82 +++++++++----------
 src/stores/liquidity-withdraw.ts              |  5 --
 src/stores/liquidity.ts                       |  5 --
 src/stores/swap.ts                            |  5 --
 8 files changed, 109 insertions(+), 119 deletions(-)

diff --git a/src/components/PolicyCard/PolicyCardView.vue b/src/components/PolicyCard/PolicyCardView.vue
index 3c97938..27c3fe0 100644
--- a/src/components/PolicyCard/PolicyCardView.vue
+++ b/src/components/PolicyCard/PolicyCardView.vue
@@ -41,8 +41,18 @@ function getStatusLineColor() {
     </div>
     <div v-else class="row nowrap full-height">
       <div class="certificate-card__info row">
-        <div class="policy-info q-mr-sm" @click="dialog = true">
+        <div class="policy-info q-mr-sm">
           i
+          <q-menu v-model="dialog" :offset="[0, 20]" transition-duration="100" transition-show="fade" transition-hide="fade">
+            <policy-info-view
+              :required-policy-data="requiredPolicyData"
+              :certificate="certificate"
+              :certificate-valid="!!certificateValid"
+              :certificate-loading="certificateLoading"
+              :certificate-link="certificateLink"
+              @close-dialog="dialog = false"
+            />
+          </q-menu>
         </div>
         <div class="certificate-card__info__status column row justify-between">
           <div class="certificate-card__info__title">
@@ -70,15 +80,5 @@ function getStatusLineColor() {
         </a>
       </div>
     </div>
-    <q-dialog v-model="dialog" transition-duration="100" transition-show="fade" transition-hide="fade">
-      <policy-info-view
-        :required-policy-data="requiredPolicyData"
-        :certificate="certificate"
-        :certificate-valid="!!certificateValid"
-        :certificate-loading="certificateLoading"
-        :certificate-link="certificateLink"
-        @close-dialog="dialog = false"
-      />
-    </q-dialog>
   </q-card>
 </template>
diff --git a/src/components/Swap/SwapCard.vue b/src/components/Swap/SwapCard.vue
index 5a11275..5c8803d 100644
--- a/src/components/Swap/SwapCard.vue
+++ b/src/components/Swap/SwapCard.vue
@@ -6,7 +6,7 @@ import swapCircle from '@/assets/img/swap-circle.svg?raw'
 import { MIN_FEE, RENT_FEE, SOL_MINT, TRANSFER_FEE_CONST, type TokenData, WRAPPED_SOL_MINT } from '@/config'
 
 const swapStore = useSwapStore()
-const { state, loadingPoolTokens, changeDirection, openSlippage, closeSlippage, swapSubmit, loadPoolTokenAccounts } = swapStore
+const { state, loadingPoolTokens, changeDirection, closeSlippage, swapSubmit, loadPoolTokenAccounts } = swapStore
 const tokenSwap = computed(() => swapStore.tokenSwap)
 const { handleSearchToken, handleFilterToken, tokens } = useToken()
 handleFilterToken(SOL_MINT)
@@ -131,7 +131,24 @@ watch([() => state.from.amount, tokenSwap, balanceFrom], (a) => {
         <dl>
           <dt>Slippage Tolerance</dt>
           <dd>
-            <a href="#" @click="openSlippage">{{ formatPercent(state.slippage) }}</a>
+            <a href="#">
+              {{ formatPercent(state.slippage) }}
+              <q-menu v-model="state.slippageDialog" transition-duration="100" transition-show="fade" transition-hide="fade">
+                <q-card>
+                  <q-card-section>
+                    <q-btn-toggle
+                      v-model="state.slippage" spread no-caps unelevated :ripple="false" toggle-color="secondary"
+                      color="white" text-color="dark" :options="[
+                        { label: '0.1%', value: 0.001 },
+                        { label: '0.5%', value: 0.005 },
+                        { label: '1%', value: 0.01 },
+                        { label: '5%', value: 0.05 },
+                      ]" @update:model-value="closeSlippage"
+                    />
+                  </q-card-section>
+                </q-card>
+              </q-menu>
+            </a>
           </dd>
         </dl>
         <dl>
@@ -196,19 +213,4 @@ watch([() => state.from.amount, tokenSwap, balanceFrom], (a) => {
 
     <q-inner-loading :showing="state?.loading" class="swap-loading" color="grey" />
   </q-card>
-  <q-dialog v-model="state.slippageDialog" transition-duration="100" transition-show="fade" transition-hide="fade">
-    <q-card>
-      <q-card-section>
-        <q-btn-toggle
-          v-model="state.slippage" spread no-caps unelevated :ripple="false" toggle-color="secondary"
-          color="white" text-color="dark" :options="[
-            { label: '0.1%', value: 0.001 },
-            { label: '0.5%', value: 0.005 },
-            { label: '1%', value: 0.01 },
-            { label: '5%', value: 0.05 },
-          ]" @update:model-value="closeSlippage"
-        />
-      </q-card-section>
-    </q-card>
-  </q-dialog>
 </template>
diff --git a/src/components/liquidity/DepositBothCard.vue b/src/components/liquidity/DepositBothCard.vue
index a51698d..7243e2f 100644
--- a/src/components/liquidity/DepositBothCard.vue
+++ b/src/components/liquidity/DepositBothCard.vue
@@ -9,7 +9,7 @@ const tokenSwap = computed(() => swapStore.tokenSwap)
 const lpBalance = computed(() => (tokenSwap.value && swapStore.userPoolsTokens[tokenSwap.value.data.poolMint.toBase58()]) || 0)
 
 const liquidityStore = useLiquidityStore()
-const { state, depositBothTokens, calcRate, openSlippage, closeSlippage } = liquidityStore
+const { state, depositBothTokens, calcRate, closeSlippage } = liquidityStore
 
 const { handleSearchToken, handleFilterToken, tokens } = useToken()
 handleFilterToken(SOL_MINT)
@@ -162,7 +162,24 @@ watch([() => state.amountTokenA, balanceFrom, () => state.amountTokenB, balanceT
       <dl>
         <dt>Slippage Tolerance</dt>
         <dd>
-          <a href="#" @click="openSlippage">{{ formatPercent(state.slippage) }}</a>
+          <a href="#">
+            {{ formatPercent(state.slippage) }}
+            <q-menu v-model="state.slippageDialog" transition-duration="100" transition-show="fade" transition-hide="fade">
+              <q-card>
+                <q-card-section>
+                  <q-btn-toggle
+                    v-model="state.slippage" spread no-caps unelevated :ripple="false" toggle-color="secondary"
+                    color="white" text-color="dark" :options="[
+                      { label: '0.1%', value: 0.001 },
+                      { label: '0.5%', value: 0.005 },
+                      { label: '1%', value: 0.01 },
+                      { label: '5%', value: 0.05 },
+                    ]" @update:model-value="closeSlippage"
+                  />
+                </q-card-section>
+              </q-card>
+            </q-menu>
+          </a>
         </dd>
       </dl>
     </div>
@@ -212,20 +229,4 @@ watch([() => state.amountTokenA, balanceFrom, () => state.amountTokenB, balanceT
     </div>
     <q-inner-loading :showing="swapState?.loading" class="swap-loading" color="grey" />
   </q-card-section>
-
-  <q-dialog v-model="state.slippageDialog" transition-duration="100" transition-show="fade" transition-hide="fade">
-    <q-card>
-      <q-card-section>
-        <q-btn-toggle
-          v-model="state.slippage" spread no-caps unelevated :ripple="false" toggle-color="secondary"
-          color="white" text-color="dark" :options="[
-            { label: '0.1%', value: 0.001 },
-            { label: '0.5%', value: 0.005 },
-            { label: '1%', value: 0.01 },
-            { label: '5%', value: 0.05 },
-          ]" @update:model-value="closeSlippage"
-        />
-      </q-card-section>
-    </q-card>
-  </q-dialog>
 </template>
diff --git a/src/components/liquidity/WithdrawBothCard.vue b/src/components/liquidity/WithdrawBothCard.vue
index 8a737ac..6a6e18d 100644
--- a/src/components/liquidity/WithdrawBothCard.vue
+++ b/src/components/liquidity/WithdrawBothCard.vue
@@ -8,7 +8,7 @@ const { state: swapState, loadingPoolTokens, loadPoolTokenAccounts } = swapStore
 const tokenSwap = computed(() => swapStore.tokenSwap)
 
 const liquidityWithdrawStore = useLiquidityWithdrawStore()
-const { state, depositBothTokens, openSlippage, closeSlippage } = liquidityWithdrawStore
+const { state, depositBothTokens, closeSlippage } = liquidityWithdrawStore
 
 const balance = computed(() => (tokenSwap.value && swapStore.userPoolsTokens[tokenSwap.value.data.poolMint.toBase58()]) || 0)
 const poolBalanceA = computed(() => swapState.poolBalance[swapState.from.mint] ? lamportsToSol(swapState.poolBalance[swapState.from.mint], swapState.from.decimals) : 0)
@@ -83,7 +83,24 @@ watch([() => state.poolAmount, balance], () => {
       <dl>
         <dt>Slippage Tolerance</dt>
         <dd>
-          <a href="#" @click="openSlippage">{{ formatPercent(state.slippage) }}</a>
+          <a href="#">
+            {{ formatPercent(state.slippage) }}
+            <q-menu v-model="state.slippageDialog" transition-duration="100" transition-show="fade" transition-hide="fade">
+              <q-card>
+                <q-card-section>
+                  <q-btn-toggle
+                    v-model="state.slippage" spread no-caps unelevated :ripple="false" toggle-color="secondary"
+                    color="white" text-color="dark" :options="[
+                      { label: '0.1%', value: 0.001 },
+                      { label: '0.5%', value: 0.005 },
+                      { label: '1%', value: 0.01 },
+                      { label: '5%', value: 0.05 },
+                    ]" @update:model-value="closeSlippage"
+                  />
+                </q-card-section>
+              </q-card>
+            </q-menu>
+          </a>
         </dd>
       </dl>
       <dl>
@@ -138,19 +155,4 @@ watch([() => state.poolAmount, balance], () => {
 
     <q-inner-loading :showing="swapState?.loading" class="swap-loading" color="grey" />
   </q-card-section>
-  <q-dialog v-model="state.slippageDialog" transition-duration="100" transition-show="fade" transition-hide="fade">
-    <q-card>
-      <q-card-section>
-        <q-btn-toggle
-          v-model="state.slippage" spread no-caps unelevated :ripple="false" toggle-color="secondary"
-          color="white" text-color="dark" :options="[
-            { label: '0.1%', value: 0.001 },
-            { label: '0.5%', value: 0.005 },
-            { label: '1%', value: 0.01 },
-            { label: '5%', value: 0.05 },
-          ]" @update:model-value="closeSlippage"
-        />
-      </q-card-section>
-    </q-card>
-  </q-dialog>
 </template>
diff --git a/src/components/pools/PoolsListItem.vue b/src/components/pools/PoolsListItem.vue
index bb2dad6..ab3e024 100644
--- a/src/components/pools/PoolsListItem.vue
+++ b/src/components/pools/PoolsListItem.vue
@@ -60,8 +60,48 @@ const dialog = ref(false)
         <div class="pool-card__subtitle row justify-center items-center">
           <span>{{ tokenAData?.symbol }} / {{ tokenBData?.symbol }}</span>
         </div>
-        <span class="policy-info q-ml-auto" @click="dialog = true">
+        <span class="policy-info q-ml-auto">
           i
+          <q-menu v-model="dialog" transition-duration="100" transition-show="fade" transition-hide="fade">
+            <q-card class="q-pa-md">
+              <div class="row items-center">
+                Pool address:&nbsp;
+                <span>
+                  <span class="pool-card__pubkey monoscaped">{{ shortenAddress(pubkey.toBase58()) }}</span>
+                  <copy-to-clipboard :text="pubkey.toBase58()" />
+                </span>
+              </div>
+              <div class="row items-center">
+                Token A mint:&nbsp;
+                <span>
+                  <span class="pool-card__pubkey monoscaped">{{ shortenAddress(data.tokenAMint.toBase58()) }}</span>
+                  <copy-to-clipboard :text="data.tokenAMint.toBase58()" />
+                </span>
+              </div>
+              <div class="row items-center">
+                Token B mint:&nbsp;
+                <span>
+                  <span class="pool-card__pubkey monoscaped">{{ shortenAddress(data.tokenBMint.toBase58()) }}</span>
+                  <copy-to-clipboard :text="data.tokenBMint.toBase58()" />
+                </span>
+              </div>
+              <div class="row items-center">
+                LP token mint:&nbsp;
+                <span>
+                  <span class="pool-card__pubkey monoscaped">{{ shortenAddress(data.poolMint.toBase58()) }}</span>
+                  <copy-to-clipboard :text="data.poolMint.toBase58()" />
+                </span>
+              </div>
+              <div class="row items-center q-mt-xs">
+                Swap fee:&nbsp;
+                <span class="pool-card__pubkey">{{ formatPct.format(swapFee) }}</span>
+              </div>
+              <div class="row items-center q-mt-xs">
+                Withdraw fee:&nbsp;
+                <span class="pool-card__pubkey">{{ formatPct.format(fees.ownerWithdraw) }}</span>
+              </div>
+            </q-card>
+          </q-menu>
         </span>
       </div>
 
@@ -118,45 +158,5 @@ const dialog = ref(false)
         </div>
       </div>
     </q-card-section>
-    <q-dialog v-model="dialog" transition-duration="100" transition-show="fade" transition-hide="fade">
-      <q-card class="q-pa-md">
-        <div class="row items-center">
-          Pool address:&nbsp;
-          <span>
-            <span class="pool-card__pubkey monoscaped">{{ shortenAddress(pubkey.toBase58()) }}</span>
-            <copy-to-clipboard :text="pubkey.toBase58()" />
-          </span>
-        </div>
-        <div class="row items-center">
-          Token A mint:&nbsp;
-          <span>
-            <span class="pool-card__pubkey monoscaped">{{ shortenAddress(data.tokenAMint.toBase58()) }}</span>
-            <copy-to-clipboard :text="data.tokenAMint.toBase58()" />
-          </span>
-        </div>
-        <div class="row items-center">
-          Token B mint:&nbsp;
-          <span>
-            <span class="pool-card__pubkey monoscaped">{{ shortenAddress(data.tokenBMint.toBase58()) }}</span>
-            <copy-to-clipboard :text="data.tokenBMint.toBase58()" />
-          </span>
-        </div>
-        <div class="row items-center">
-          LP token mint:&nbsp;
-          <span>
-            <span class="pool-card__pubkey monoscaped">{{ shortenAddress(data.poolMint.toBase58()) }}</span>
-            <copy-to-clipboard :text="data.poolMint.toBase58()" />
-          </span>
-        </div>
-        <div class="row items-center q-mt-xs">
-          Swap fee:&nbsp;
-          <span class="pool-card__pubkey">{{ formatPct.format(swapFee) }}</span>
-        </div>
-        <div class="row items-center q-mt-xs">
-          Withdraw fee:&nbsp;
-          <span class="pool-card__pubkey">{{ formatPct.format(fees.ownerWithdraw) }}</span>
-        </div>
-      </q-card>
-    </q-dialog>
   </q-card>
 </template>
diff --git a/src/stores/liquidity-withdraw.ts b/src/stores/liquidity-withdraw.ts
index cf2802d..9807cd4 100644
--- a/src/stores/liquidity-withdraw.ts
+++ b/src/stores/liquidity-withdraw.ts
@@ -192,10 +192,6 @@ export const useLiquidityWithdrawStore = defineStore('liquidity-withdraw', () =>
     }
   }
 
-  function openSlippage() {
-    state.slippageDialog = true
-  }
-
   function closeSlippage() {
     state.slippageDialog = false
   }
@@ -203,7 +199,6 @@ export const useLiquidityWithdrawStore = defineStore('liquidity-withdraw', () =>
   return {
     state,
     closeSlippage,
-    openSlippage,
     depositBothTokens,
   }
 })
diff --git a/src/stores/liquidity.ts b/src/stores/liquidity.ts
index 2e2575f..f45142b 100644
--- a/src/stores/liquidity.ts
+++ b/src/stores/liquidity.ts
@@ -206,10 +206,6 @@ export const useLiquidityStore = defineStore('liquidity', () => {
     }
   }
 
-  function openSlippage() {
-    state.slippageDialog = true
-  }
-
   function closeSlippage() {
     state.slippageDialog = false
   }
@@ -218,7 +214,6 @@ export const useLiquidityStore = defineStore('liquidity', () => {
     state,
     calcRate,
     closeSlippage,
-    openSlippage,
     depositBothTokens,
   }
 })
diff --git a/src/stores/swap.ts b/src/stores/swap.ts
index 55171ae..55f345c 100644
--- a/src/stores/swap.ts
+++ b/src/stores/swap.ts
@@ -415,10 +415,6 @@ export const useSwapStore = defineStore('swap', () => {
     state.direction = state.direction === SwapDirection.ASC ? SwapDirection.DESC : SwapDirection.ASC
   }
 
-  function openSlippage() {
-    state.slippageDialog = true
-  }
-
   function closeSlippage() {
     state.slippageDialog = false
   }
@@ -484,7 +480,6 @@ export const useSwapStore = defineStore('swap', () => {
     loadPoolTokenAccounts,
     setTokenSwap,
     closeSlippage,
-    openSlippage,
     changeDirection,
     swapSubmit,
     getPoolFee,

From 12b3171d7f0d9a72cde377e13d31865413c4fcd7 Mon Sep 17 00:00:00 2001
From: MGrgr <grkapran@gmail.com>
Date: Fri, 2 Feb 2024 20:29:39 +0300
Subject: [PATCH 07/14] fix: differet policy for swap and liquidity

---
 package.json                                 |  2 +-
 pnpm-lock.yaml                               | 21 +++++++++---
 src/components/CreatePool/CreateSwapCard.vue | 34 ++++++++++++++++++--
 src/config/tokens.ts                         |  1 +
 src/hooks/create-swap-pool.ts                | 28 +++++++++++-----
 src/stores/swap.ts                           | 16 ++++++---
 src/stores/user.ts                           |  4 ---
 7 files changed, 80 insertions(+), 26 deletions(-)

diff --git a/package.json b/package.json
index 8e92f23..679d988 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
   },
   "dependencies": {
     "@albus-finance/sdk": "0.2.6",
-    "@albus-finance/swap-sdk": "0.1.5-next.1",
+    "@albus-finance/swap-sdk": "0.1.5-next.3",
     "@albus-finance/transfer-sdk": "0.2.4",
     "@coral-xyz/anchor": "^0.29.0",
     "@metaplex-foundation/beet": "^0.7.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7faded5..06c0646 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,8 +9,8 @@ dependencies:
     specifier: 0.2.6
     version: 0.2.6
   '@albus-finance/swap-sdk':
-    specifier: 0.1.5-next.1
-    version: 0.1.5-next.1
+    specifier: 0.1.5-next.3
+    version: 0.1.5-next.3
   '@albus-finance/transfer-sdk':
     specifier: 0.2.4
     version: 0.2.4
@@ -206,11 +206,11 @@ packages:
       - utf-8-validate
     dev: false
 
-  /@albus-finance/swap-sdk@0.1.5-next.1:
-    resolution: {integrity: sha512-OL4/olCOkoVPHB0RjyJHgwzw9IyLUUNvwdBNGWwsyb4QoAypB2TsZrVEY9Rejcqq1D/L4ES1aYKwFm7n/aXVjg==}
+  /@albus-finance/swap-sdk@0.1.5-next.3:
+    resolution: {integrity: sha512-HMiFs6GWYMldF2G9ncszuVoiwMFRJZHFH0T48z2L2gjvcYY+voLLtCUSmLcToibcwaNIhK/VCGfOLhwLsUWs8g==}
     dependencies:
       '@coral-xyz/anchor': 0.29.0
-      '@metaplex-foundation/beet': 0.7.1
+      '@metaplex-foundation/beet': 0.7.2
       '@solana/spl-token': 0.3.9(@solana/web3.js@1.87.6)
       '@solana/web3.js': 1.87.6
     transitivePeerDependencies:
@@ -1305,6 +1305,17 @@ packages:
       - supports-color
     dev: false
 
+  /@metaplex-foundation/beet@0.7.2:
+    resolution: {integrity: sha512-K+g3WhyFxKPc0xIvcIjNyV1eaTVJTiuaHZpig7Xx0MuYRMoJLLvhLTnUXhFdR5Tu2l2QSyKwfyXDgZlzhULqFg==}
+    dependencies:
+      ansicolors: 0.3.2
+      assert: 2.1.0
+      bn.js: 5.2.1
+      debug: 4.3.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /@metaplex-foundation/cusper@0.0.2:
     resolution: {integrity: sha512-S9RulC2fFCFOQraz61bij+5YCHhSO9llJegK8c8Y6731fSi6snUSQJdCUqYS8AIgR0TKbQvdvgSyIIdbDFZbBA==}
     dev: false
diff --git a/src/components/CreatePool/CreateSwapCard.vue b/src/components/CreatePool/CreateSwapCard.vue
index eb7ff2e..154f093 100644
--- a/src/components/CreatePool/CreateSwapCard.vue
+++ b/src/components/CreatePool/CreateSwapCard.vue
@@ -62,14 +62,42 @@ function setPoolMint() {
       </div>
 
       <div class="q-mt-md">
-        <div>Policy:</div>
+        <div>Swap policy:</div>
         <q-select
-          v-model="state.policy" option-disable="inactive" popup-content-class="transition-duration" outlined
+          v-model="state.swapPolicy" option-disable="inactive" popup-content-class="transition-duration" outlined
           :options="servicePolicy" dense :options-dense="false"
           option-value="mint" option-label="name"
         >
           <template #selected>
-            <select-policy-item v-if="state.policy" :key="state.policy.pubkey?.toBase58()" :policy="state.policy.pubkey" :policy-data="state.policy.data" />
+            <select-policy-item
+              v-if="state.swapPolicy"
+              :key="state.swapPolicy.pubkey?.toBase58()"
+              :policy="state.swapPolicy.pubkey"
+              :policy-data="state.swapPolicy.data"
+            />
+          </template>
+          <template #option="scope">
+            <q-item v-bind="scope.itemProps" class="token-select__token">
+              <select-policy-item :key="scope.opt.pubkey" :policy="scope.opt.pubkey" :policy-data="scope.opt.data" />
+            </q-item>
+          </template>
+        </q-select>
+      </div>
+
+      <div class="q-mt-md">
+        <div>Liqudity policy:</div>
+        <q-select
+          v-model="state.addLiquidityPolicy" option-disable="inactive" popup-content-class="transition-duration" outlined
+          :options="servicePolicy" dense :options-dense="false"
+          option-value="mint" option-label="name"
+        >
+          <template #selected>
+            <select-policy-item
+              v-if="state.addLiquidityPolicy"
+              :key="state.addLiquidityPolicy.pubkey?.toBase58()"
+              :policy="state.addLiquidityPolicy.pubkey"
+              :policy-data="state.addLiquidityPolicy.data"
+            />
           </template>
           <template #option="scope">
             <q-item v-bind="scope.itemProps" class="token-select__token">
diff --git a/src/config/tokens.ts b/src/config/tokens.ts
index 8272756..9eb8c06 100644
--- a/src/config/tokens.ts
+++ b/src/config/tokens.ts
@@ -122,4 +122,5 @@ export const TOKENS_PRICE_NAME = {
   // devnet:
   '6rdejLXbi2Ws2z3Ff1wRhRS9WqrXRDuM8YpSkiektRgw': 'jpool',
   '4zMMC9srt5Ri5X14GAgXhaHii3GnPAEERYPJgZJDncDU': 'usd-coin',
+  '5snBnRp3ZaFZHyQqVFSCzCoCHRPrUuLVzUtTN8wdZM41': 'usd-coin',
 }
diff --git a/src/hooks/create-swap-pool.ts b/src/hooks/create-swap-pool.ts
index 28f97d5..c32393a 100644
--- a/src/hooks/create-swap-pool.ts
+++ b/src/hooks/create-swap-pool.ts
@@ -18,7 +18,8 @@ export function useCreateSwap() {
   const state = reactive<CreateSwapState>({
     tokenA: undefined,
     tokenB: undefined,
-    policy: undefined,
+    swapPolicy: undefined,
+    addLiquidityPolicy: undefined,
     hostFeeNumerator: 0,
     hostFeeDenominator: 1000,
     tradeFeeNumerator: 0,
@@ -40,7 +41,7 @@ export function useCreateSwap() {
     name: '',
     symbol: '',
     metadataUrl: '',
-    isMutable: false,
+    isMutable: true,
   })
 
   async function generateSwapKeypair() {
@@ -240,10 +241,16 @@ export function useCreateSwap() {
         message: 'Select tokens',
       })
     }
-    if (!state.policy) {
+    if (!state.swapPolicy) {
       return notify({
         type: 'negative',
-        message: 'Select policy',
+        message: 'Select swap policy',
+      })
+    }
+    if (!state.addLiquidityPolicy) {
+      return notify({
+        type: 'negative',
+        message: 'Select liquidity policy',
       })
     }
     console.log('createTokenSwap: ', {
@@ -253,7 +260,8 @@ export function useCreateSwap() {
       destination: state.poolFeeAccount.toBase58(),
       tokenA: state.swapTokenA.toBase58(),
       tokenB: state.swapTokenB.toBase58(),
-      policy: state.policy.pubkey.toBase58(),
+      swapPolicy: state.swapPolicy.pubkey.toBase58(),
+      addLiquidityPolicy: state.addLiquidityPolicy.pubkey.toBase58(),
       curveType: CurveType.ConstantProduct,
       curveParameters: [],
       fees: {
@@ -277,7 +285,8 @@ export function useCreateSwap() {
         destination: state.poolFeeAccount,
         tokenA: state.swapTokenA,
         tokenB: state.swapTokenB,
-        policy: state.policy.pubkey,
+        swapPolicy: state.swapPolicy.pubkey,
+        addLiquidityPolicy: state.addLiquidityPolicy.pubkey,
         curveType: CurveType.ConstantProduct,
         curveParameters: [],
         fees: {
@@ -299,6 +308,7 @@ export function useCreateSwap() {
       console.log('[create swap] tokenSwap result = ', tokenSwapRes)
     } catch (e) {
       console.error(e)
+      console.error(e.logs)
       notify({
         type: 'negative',
         message: `${e}`,
@@ -317,7 +327,8 @@ export function useCreateSwap() {
     state.ownerTradeFeeDenominator = 1000
     state.ownerWithdrawFeeNumerator = 0
     state.ownerWithdrawFeeDenominator = 1000
-    state.policy = undefined
+    state.swapPolicy = undefined
+    state.addLiquidityPolicy = undefined
     state.tokenA = undefined
     state.tokenB = undefined
 
@@ -340,7 +351,8 @@ export function useCreateSwap() {
 interface CreateSwapState {
   tokenA: TokenData | undefined
   tokenB: TokenData | undefined
-  policy: PolicyItem | undefined
+  swapPolicy: PolicyItem | undefined
+  addLiquidityPolicy: PolicyItem | undefined
   hostFeeNumerator: number
   hostFeeDenominator: number
   tradeFeeNumerator: number
diff --git a/src/stores/swap.ts b/src/stores/swap.ts
index 55f345c..839d017 100644
--- a/src/stores/swap.ts
+++ b/src/stores/swap.ts
@@ -201,11 +201,12 @@ export const useSwapStore = defineStore('swap', () => {
     () => userStore.servicePolicy,
   ], async () => {
     console.log('tokenSwapsAll: ', tokenSwapsAll.value)
-    tokenSwapsAllFiltered.value = tokenSwapsAll.value.filter(p => !!userStore.servicePolicy.find(sp =>
-      sp.pubkey.toBase58() === p.data.policy?.toBase58()
+    tokenSwapsAllFiltered.value = tokenSwapsAll.value.filter(p =>
+      !!userStore.servicePolicy.find(sp => sp.pubkey.toBase58() === p.data.swapPolicy?.toBase58())
+      && !!userStore.servicePolicy.find(sp => sp.pubkey.toBase58() === p.data.addLiquidityPolicy?.toBase58())
       && !!tokenStore.tokenByMint(p.data.tokenAMint.toBase58())
       && !!tokenStore.tokenByMint(p.data.tokenBMint.toBase58()),
-    ))
+    )
   }, { immediate: true })
 
   watch([
@@ -226,7 +227,10 @@ export const useSwapStore = defineStore('swap', () => {
           /**
            * find if there is a pool for which the user already has a certificate
            */
-          const userHasPolicy = tokenSwaps.value.find(pool => userStore.state.certificates?.find(cert => cert.data?.policy.toBase58() === pool.data.policy?.toBase58()))
+          const userHasPolicy = tokenSwaps.value.find(pool => userStore.state.certificates?.find(cert =>
+            cert.data?.policy.toBase58() === pool.data.swapPolicy?.toBase58()
+            || cert.data?.policy.toBase58() === pool.data.addLiquidityPolicy?.toBase58(),
+          ))
           if (userHasPolicy) {
             tokenSwap.value = userHasPolicy
           }
@@ -239,6 +243,7 @@ export const useSwapStore = defineStore('swap', () => {
       tokenSwaps.value = []
       tokenSwap.value = undefined
       userStore.setContractPolicy('', 'swap')
+      userStore.setContractPolicy('', 'liquidity')
       state.poolBalance = {}
     }
   }, { immediate: true })
@@ -247,7 +252,8 @@ export const useSwapStore = defineStore('swap', () => {
     tokenSwap,
   ], async () => {
     console.log('Token SWAP: ', tokenSwap.value)
-    userStore.setContractPolicy(tokenSwap.value?.data.policy?.toBase58() ?? '', 'swap')
+    userStore.setContractPolicy(tokenSwap.value?.data.swapPolicy?.toBase58() ?? '', 'swap')
+    userStore.setContractPolicy(tokenSwap.value?.data.addLiquidityPolicy?.toBase58() ?? '', 'liquidity')
     if (tokenSwap.value) {
       loadPoolTokenAccounts()
       if (tokenSwap.value.data.tokenAMint.toBase58() === state.from.mint) {
diff --git a/src/stores/user.ts b/src/stores/user.ts
index 0932718..b400f83 100644
--- a/src/stores/user.ts
+++ b/src/stores/user.ts
@@ -44,10 +44,6 @@ export const useUserStore = defineStore('user', () => {
   })
   function setContractPolicy(policy: string, page?: string) {
     contractPolicy.value[page ?? route.name] = policy
-    // TODO: better solution
-    if (page === 'swap') {
-      setContractPolicy(policy, 'liquidity')
-    }
     console.log('[swap] policies = ', contractPolicy.value)
   }
 

From 74567c30ee2fd3f5967012a06ef0e44cb3d5c33c Mon Sep 17 00:00:00 2001
From: MGrgr <grkapran@gmail.com>
Date: Sat, 3 Feb 2024 01:22:32 +0300
Subject: [PATCH 08/14] fix: pool cards layout

---
 package.json                                 |   2 +-
 pnpm-lock.yaml                               |   8 +-
 src/assets/styles/_variables.scss            |   2 +-
 src/assets/styles/components/_pool-card.scss | 115 ++++++++++++++++---
 src/assets/styles/components/_sidebar.scss   |   4 +-
 src/assets/styles/components/_swap.scss      |   2 +-
 src/components/ClusterSelector.vue           |   2 +-
 src/components/pools/PoolsList.vue           |  16 +--
 src/components/pools/PoolsListItem.vue       | 101 +++++++++-------
 src/components/pools/PoolsTotal.vue          |  24 +++-
 src/config/tokens.ts                         |   2 +-
 src/utils/format.ts                          |   5 +
 12 files changed, 202 insertions(+), 81 deletions(-)

diff --git a/package.json b/package.json
index 679d988..ae04d2e 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
   },
   "dependencies": {
     "@albus-finance/sdk": "0.2.6",
-    "@albus-finance/swap-sdk": "0.1.5-next.3",
+    "@albus-finance/swap-sdk": "0.1.5-next.4",
     "@albus-finance/transfer-sdk": "0.2.4",
     "@coral-xyz/anchor": "^0.29.0",
     "@metaplex-foundation/beet": "^0.7.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 06c0646..37b0360 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,8 +9,8 @@ dependencies:
     specifier: 0.2.6
     version: 0.2.6
   '@albus-finance/swap-sdk':
-    specifier: 0.1.5-next.3
-    version: 0.1.5-next.3
+    specifier: 0.1.5-next.4
+    version: 0.1.5-next.4
   '@albus-finance/transfer-sdk':
     specifier: 0.2.4
     version: 0.2.4
@@ -206,8 +206,8 @@ packages:
       - utf-8-validate
     dev: false
 
-  /@albus-finance/swap-sdk@0.1.5-next.3:
-    resolution: {integrity: sha512-HMiFs6GWYMldF2G9ncszuVoiwMFRJZHFH0T48z2L2gjvcYY+voLLtCUSmLcToibcwaNIhK/VCGfOLhwLsUWs8g==}
+  /@albus-finance/swap-sdk@0.1.5-next.4:
+    resolution: {integrity: sha512-A0pZ4Pl3JYusxiItlfXbz3OxEpwf81IzmhJ8ie08xSUDKioeRDVyUGRAMAyPWmohTO15DpTGW8pZOnXUosflzA==}
     dependencies:
       '@coral-xyz/anchor': 0.29.0
       '@metaplex-foundation/beet': 0.7.2
diff --git a/src/assets/styles/_variables.scss b/src/assets/styles/_variables.scss
index 7f9b0ee..8e53af3 100644
--- a/src/assets/styles/_variables.scss
+++ b/src/assets/styles/_variables.scss
@@ -1,7 +1,7 @@
 // colors
 $primary: #23353d;
 $secondary: #455A64;
-$yellow: #ffd140;
+$warning: #ffd140;
 $negative: #DC3E38;
 $negative-light: #ea4b45;
 $positive: #007D48;
diff --git a/src/assets/styles/components/_pool-card.scss b/src/assets/styles/components/_pool-card.scss
index abe8ff9..c976b4c 100644
--- a/src/assets/styles/components/_pool-card.scss
+++ b/src/assets/styles/components/_pool-card.scss
@@ -4,45 +4,83 @@
   border: 1px solid #fff;
 
   @media(min-width: $breakpoint-md) {
-    min-width: 397px;
-    max-width: 397px;
+    min-width: calc(50% - 24px);
+    max-width: calc(50% - 24px);
   }
 
   @media(max-width: 389px) {
     min-width: 316px;
   }
 
-  &__head {
-    font-size: 15px;
-    font-weight: 500;
-    padding: 9px 20px;
-    background-color: $secondary;
-    color: #fff;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
   &__body {
     display: flex;
     flex-direction: column;
   }
 
-  &__subtitle {
+  &__income {
+    display: flex;
+    align-items: center;
+    background-color: #F9F9F9;
+    margin-right: -16px; 
+    margin-left: -16px; 
+    padding: 8px 24px;
+    .body--dark & {
+      background-color: $primary;
+    }
+  }
+
+  &__income &__label {
+    color: #000;
+    .body--dark & {
+      color: #fff;
+    }
+  }
+
+  &__apr-label {
+    font-size: 13px;
+    line-height: 15px;
+    color: $secondary;
     font-weight: 500;
-    font-size: 18px;
-    text-transform: uppercase;
+    .body--dark & {
+      color: #fff;
+    }
   }
 
-  &__pubkey {
-    word-break: break-all;
+  &__apr-amount {
+    color: #000;
+    font-size: 32px;
+    line-height: 34px;
+    font-weight: 500;
+    .body--dark & {
+      color: #fff;
+    }
   }
 
   &__stats {
     font-size: 15px;
   }
 
+  &__label {
+    font-size: 11px;
+    list-style: 13px;
+    color: $secondary;
+    .body--dark & {
+      color: #fff;
+    }
+  }
+
+  &__amount {
+    font-size: 19px;
+    line-height: 19px;
+    color: #000;
+    font-weight: 500;
+    .body--dark & {
+      color: #fff;
+    }
+  }
+
   &__icons {
-    height: 32px;
+    height: 46px;
 
     img {
       height: 100%;
@@ -50,11 +88,50 @@
     }
 
     :nth-child(2) {
-      margin-left: -8px;
+      margin-left: -14px;
     }
   }
+  
+  &__subtitle {
+    font-weight: 500;
+    font-size: 23px;
+    text-transform: uppercase;
+  }
+
+  &__pubkey {
+    word-break: break-all;
+  }
 
   body.body--dark & {
     border: 1px solid #ffffff42;
   }
+
+  .policy-info {
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    font-size: 16px;
+  }
+}
+
+.pools-total {
+  display: flex;
+  flex-direction: column;
+  background-color: $primary;
+  border-radius: 6px;
+  padding: 13px 24px;
+  font-weight: 500;
+  min-width: 181px;
+  .body--dark & {
+    background-color: $secondary;
+  }
+  &__name {
+    text-transform: uppercase;
+    color: #E1E1E1;
+    font-size: 13px;
+  }
+  &__value {
+    font-size: 25px;
+    color: #fff;
+  }
 }
diff --git a/src/assets/styles/components/_sidebar.scss b/src/assets/styles/components/_sidebar.scss
index 4c8859e..ce018b0 100644
--- a/src/assets/styles/components/_sidebar.scss
+++ b/src/assets/styles/components/_sidebar.scss
@@ -158,7 +158,7 @@ aside {
           font-weight: 300;
           font-size: 12px;
           line-height: 14px;
-          color: $yellow;
+          color: $warning;
         }
       }
     }
@@ -287,7 +287,7 @@ aside {
   }
 
   .active-route {
-    background: $yellow !important;
+    background: $warning !important;
 
     span {
       color: $primary;
diff --git a/src/assets/styles/components/_swap.scss b/src/assets/styles/components/_swap.scss
index 6122bab..e56784c 100644
--- a/src/assets/styles/components/_swap.scss
+++ b/src/assets/styles/components/_swap.scss
@@ -1,7 +1,7 @@
 $swap-min-height: 392px;
 $swap-card-border-color: #fff;
 $swap-info-border-color: $light-gray-middle;
-$swap-base-color: $yellow !default;
+$swap-base-color: $warning !default;
 $swap-header-color: $swap-base-color !default;
 $swap-btn-color: $swap-base-color !default;
 $swap-shadow: 0 4px 4px rgba(0, 0, 0, 0.25) !default;
diff --git a/src/components/ClusterSelector.vue b/src/components/ClusterSelector.vue
index a68ce27..7a4f74b 100644
--- a/src/components/ClusterSelector.vue
+++ b/src/components/ClusterSelector.vue
@@ -29,7 +29,7 @@ function select(e: Endpoint) {
     :label="endpoint.cluster"
     :model-value="false"
     auto-close
-    color="yellow"
+    color="warning"
     text-color="black"
     rounded
     unelevated
diff --git a/src/components/pools/PoolsList.vue b/src/components/pools/PoolsList.vue
index 25daff6..867586c 100644
--- a/src/components/pools/PoolsList.vue
+++ b/src/components/pools/PoolsList.vue
@@ -15,14 +15,16 @@ const poolsStats = computed(() => poolsStatsStore.poolsStats)
 </script>
 
 <template>
-  <pools-total class="q-mb-sm" />
-  <div v-if="connected" class="full-width app-description row items-center justify-start q-mb-md">
-    <span class="q-mr-sm">My Liquidity</span>
-    <q-toggle v-model="onlyMyPools" color="secondary" dense class="app-toggle" />
+  <div v-if="connected" class="full-width row items-center justify-start q-px-lg">
+    <pools-total class="q-mb-md" />
+    <div v-if="connected" class="q-mb-md q-ml-auto">
+      <span class="q-mr-sm">My Liquidity</span>
+      <q-toggle v-model="onlyMyPools" color="secondary" dense class="app-toggle" />
+    </div>
   </div>
-  <div>
+  <div class="full-width">
     <q-inner-loading :showing="state?.loading || poolDataLoading" class="swap-loading" color="grey" />
-    <div class="row justify-center">
+    <div class="row justify-center q-pl-lg">
       <pools-list-item
         v-for="(pool, idx) in tokenSwapsAllFiltered"
         :key="pool.pubkey.toBase58() ?? idx"
@@ -30,7 +32,7 @@ const poolsStats = computed(() => poolsStatsStore.poolsStats)
         :data="pool.data"
         :user-tokens="userPoolsTokens[pool.data.poolMint.toBase58()]"
         :pool-stats="poolsStats[pool.pubkey.toBase58()]"
-        class="q-mx-sm q-mb-md"
+        class="q-mr-lg q-mb-lg"
       />
       <div v-if="!state.loading && !tokenSwapsAllFiltered.length" class="text-h5">
         Pools not found
diff --git a/src/components/pools/PoolsListItem.vue b/src/components/pools/PoolsListItem.vue
index ab3e024..d47823e 100644
--- a/src/components/pools/PoolsListItem.vue
+++ b/src/components/pools/PoolsListItem.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { useWallet } from 'solana-wallets-vue'
 import type { TokenSwap } from '@albus-finance/swap-sdk'
 import type { PublicKey } from '@solana/web3.js'
-import { formatBalance, formatPct } from '@/utils'
+import { formatPct, formatUsd } from '@/utils'
 import { shortenAddress } from '~/utils/web3'
 import type { PoolStats } from '@/stores'
 
@@ -15,7 +14,6 @@ const props = defineProps({
 })
 defineEmits(['selectPool'])
 
-const { connected } = useWallet()
 const tokenStore = useTokenStore()
 const tokens = computed(() => tokenStore.tokens)
 const tokenAData = computed(() => tokens.value.find(t => t.mint === props.data?.tokenAMint.toBase58()))
@@ -39,12 +37,8 @@ async function swapAction(liquidity = false) {
   }
 }
 
-const fees = computed(() => {
-  return props.data ? swapStore.getPoolFee(props.data) : {}
-})
-
-// @ts-expect-error valid params
-const swapFee = computed(() => fees.value.ownerTrade + fees.value.trade)
+const fees = computed(() => props.data && swapStore.getPoolFee(props.data))
+const swapFee = computed(() => fees.value && (fees.value.ownerTrade + fees.value.trade))
 
 const dialog = ref(false)
 </script>
@@ -53,12 +47,12 @@ const dialog = ref(false)
   <q-card v-if="pubkey && data && tokenAData && tokenBData" class="pool-card" @click="useEmit ? $emit('selectPool') : undefined">
     <q-card-section class="pool-card__body full-height">
       <div class="row">
-        <div class="pool-card__icons row justify-center q-mr-md">
+        <div class="pool-card__icons row justify-center q-mr-md q-ml-sm">
           <img v-if="tokenAData?.image" :src="tokenAData?.image" :alt="tokenAData?.symbol">
           <img v-if="tokenBData?.image" :src="tokenBData?.image" :alt="tokenBData?.symbol">
         </div>
         <div class="pool-card__subtitle row justify-center items-center">
-          <span>{{ tokenAData?.symbol }} / {{ tokenBData?.symbol }}</span>
+          <span>{{ tokenAData?.symbol }}/{{ tokenBData?.symbol }}</span>
         </div>
         <span class="policy-info q-ml-auto">
           i
@@ -92,11 +86,11 @@ const dialog = ref(false)
                   <copy-to-clipboard :text="data.poolMint.toBase58()" />
                 </span>
               </div>
-              <div class="row items-center q-mt-xs">
+              <div v-if="swapFee" class="row items-center q-mt-xs">
                 Swap fee:&nbsp;
                 <span class="pool-card__pubkey">{{ formatPct.format(swapFee) }}</span>
               </div>
-              <div class="row items-center q-mt-xs">
+              <div v-if="fees" class="row items-center q-mt-xs">
                 Withdraw fee:&nbsp;
                 <span class="pool-card__pubkey">{{ formatPct.format(fees.ownerWithdraw) }}</span>
               </div>
@@ -105,31 +99,59 @@ const dialog = ref(false)
         </span>
       </div>
 
-      <div v-if="poolStats" class="row q-mt-sm q-mb-auto q-pt-xs pool-card__stats">
-        <div class="row col-6 q-mt-xs">
-          Liquidity:&nbsp;
-          <span :class="{ 'full-width': $q.screen.lt.sm }">${{ formatBalance(poolStats.tvl, 2) }}</span>
-        </div>
-        <div class="row col-6 q-mt-xs">
-          Volume 24h:&nbsp;
-          <span :class="{ 'full-width': $q.screen.lt.sm }">${{ formatBalance(poolStats.volume24, 2) }}</span>
+      <div class="pool-card__income q-mt-md">
+        <div>
+          <div class="pool-card__apr-label">
+            APR 24H
+          </div>
+          <div class="pool-card__apr-amount">
+            {{ poolStats ? `${formatPct.format(poolStats.apr24)}` : '---' }}
+          </div>
         </div>
-        <div class="row col-6 q-mt-xs">
-          Fees 24h:&nbsp;
-          <span :class="{ 'full-width': $q.screen.lt.sm }">${{ formatBalance(poolStats.fees24, 2) }}</span>
+        <div class="row q-ml-auto">
+          <div class="q-mr-md">
+            <div class="pool-card__label">
+              My Liquidity
+            </div>
+            <div class="pool-card__amount">
+              {{ poolStats && userTokens ? `$${formatUsd.format(userTokens / poolStats.poolTokenSupply * poolStats.tvl)}` : '---' }}
+            </div>
+          </div>
+          <div>
+            <div class="pool-card__label">
+              My Share
+            </div>
+            <div class="pool-card__amount">
+              {{ poolStats && userTokens ? `${formatPct.format(userTokens / poolStats.poolTokenSupply)}` : '---' }}
+            </div>
+          </div>
         </div>
-        <div class="row col-6 q-mt-xs">
-          APR 24h:&nbsp;
-          <span :class="{ 'full-width': $q.screen.lt.sm }">{{ formatPct.format(poolStats.apr24) }}</span>
+      </div>
+
+      <div class="row q-mt-sm q-mb-auto q-pt-xs pool-card__stats">
+        <div class="col-4 q-mt-xs text-center">
+          <div class="pool-card__label">
+            Volume 24H
+          </div>
+          <div class="pool-card__amount">
+            {{ poolStats ? `$${formatUsd.format(poolStats.volume24)}` : '---' }}
+          </div>
         </div>
-        <div v-if="userTokens && connected" class="q-py-md" />
-        <div v-if="userTokens && connected" class="row col-6 q-mt-xs">
-          Your Liquidity:&nbsp;
-          <span :class="{ 'full-width': $q.screen.lt.sm }">${{ formatBalance(userTokens / poolStats.poolTokenSupply * poolStats.tvl, 2) }}</span>
+        <div class="col-4 q-mt-xs text-center">
+          <div class="pool-card__label">
+            Liquidity
+          </div>
+          <div class="pool-card__amount">
+            {{ poolStats ? `$${formatUsd.format(poolStats.tvl)}` : '---' }}
+          </div>
         </div>
-        <div v-if="userTokens && connected" class="row col-6 q-mt-xs">
-          Your share:&nbsp;
-          <span :class="{ 'full-width': $q.screen.lt.sm }">{{ formatPct.format(userTokens / poolStats.poolTokenSupply) }}</span>
+        <div class="col-4 q-mt-xs text-center">
+          <div class="pool-card__label">
+            Fees 24H
+          </div>
+          <div class="pool-card__amount">
+            {{ poolStats ? `$${formatUsd.format(poolStats.fees24)}` : '---' }}
+          </div>
         </div>
       </div>
 
@@ -139,18 +161,19 @@ const dialog = ref(false)
 
       <div v-if="!useEmit" class="row q-mt-md">
         <div class="col">
-          <q-btn-group spread>
+          <q-btn-group spread unelevated square style="height: 56px">
             <q-btn
               label="ADD LIQUIDITY"
-              color="warning"
-              text-color="#282828"
+              color="primary"
+              text-color="white"
               target="_blank"
+              class="q-mr-md"
               @click="swapAction(true)"
             />
             <q-btn
               label="SWAP"
-              color="primary"
-              text-color="white"
+              color="warning"
+              text-color="black"
               target="_blank"
               @click="swapAction(false)"
             />
diff --git a/src/components/pools/PoolsTotal.vue b/src/components/pools/PoolsTotal.vue
index beb038b..46cbf0a 100644
--- a/src/components/pools/PoolsTotal.vue
+++ b/src/components/pools/PoolsTotal.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { formatBalance } from '@/utils'
+import { formatUsd } from '@/utils'
 
 const poolsStatsStore = usePoolsStatsStore()
 const poolsStatsTotal = computed(() => poolsStatsStore.poolsStatsTotal)
@@ -9,15 +9,29 @@ const priceLoading = computed(() => poolsStatsStore.priceLoading)
 </script>
 
 <template>
-  <div class="full-width q-pl-md">
+  <div>
     <q-inner-loading
       :showing="poolsStatsTotal.tvl === 0 && (poolsLoading || txLoading || priceLoading)"
       class="swap-loading"
       color="grey"
     />
-    <div class="row justify-start text-subtitle1 q-pl-xs">
-      <span class="q-mr-md">TVL: ${{ formatBalance(poolsStatsTotal.tvl, 2) }}</span>
-      <span>Volume 24h: ${{ formatBalance(poolsStatsTotal.volume24, 2) }}</span>
+    <div class="row justify-start">
+      <div class="pools-total q-mr-md q-mb-md">
+        <div class="pools-total__name">
+          Total value locked
+        </div>
+        <div class="pools-total__value">
+          ${{ formatUsd.format(poolsStatsTotal.tvl) }}
+        </div>
+      </div>
+      <div class="pools-total q-mb-md">
+        <div class="pools-total__name">
+          Volume 24h
+        </div>
+        <div class="pools-total__value">
+          ${{ formatUsd.format(poolsStatsTotal.volume24) }}
+        </div>
+      </div>
     </div>
   </div>
 </template>
diff --git a/src/config/tokens.ts b/src/config/tokens.ts
index 9eb8c06..69352c3 100644
--- a/src/config/tokens.ts
+++ b/src/config/tokens.ts
@@ -105,7 +105,7 @@ export const TOKENS_DEV = [
   TOKEN_B,
   USDC_TOKEN_DEV,
   // USDT_TOKEN_DEV,
-  // TOKEN_C,
+  TOKEN_C,
 ]
 
 export const TOKENS_MAIN = [
diff --git a/src/utils/format.ts b/src/utils/format.ts
index 114a947..ebd9602 100644
--- a/src/utils/format.ts
+++ b/src/utils/format.ts
@@ -10,6 +10,11 @@ export const formatPct = new Intl.NumberFormat('en-US', {
   maximumFractionDigits: 2,
 })
 
+export const formatUsd = new Intl.NumberFormat('en-US', {
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2,
+})
+
 export function formatDate(date: Date) {
   return new Intl.DateTimeFormat().format(date)
 }

From de7fd27281e5349810ba5bb2283a36903f9ef103 Mon Sep 17 00:00:00 2001
From: MGrgr <grkapran@gmail.com>
Date: Sat, 3 Feb 2024 02:06:29 +0300
Subject: [PATCH 09/14] fix: update copy icon

---
 src/components/CopyToClipboard.vue | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/components/CopyToClipboard.vue b/src/components/CopyToClipboard.vue
index f2255d8..c6035c6 100644
--- a/src/components/CopyToClipboard.vue
+++ b/src/components/CopyToClipboard.vue
@@ -26,20 +26,19 @@ export default defineComponent({
 <template>
   <q-btn flat round dense>
     <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
       fill="none"
-      height="24"
-      stroke="currentColor"
-      viewBox="0 0 24 24"
-      width="24"
       xmlns="http://www.w3.org/2000/svg"
       @click="copy"
     >
-      <path
-        d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
-      />
+      <g id="Group 3731">
+        <g id="Group 3646">
+          <path id="Vector" d="M14.2856 3.46362H2.14284C0.959381 3.46362 0 4.39401 0 5.54171V17.3175C0 18.4652 0.959381 19.3956 2.14284 19.3956H14.2856C15.469 19.3956 16.4284 18.4652 16.4284 17.3175V5.54171C16.4284 4.39401 15.469 3.46362 14.2856 3.46362Z" :fill="$q.dark.isActive ? '#fff' : '#455A64'" />
+          <path id="Vector_2" d="M17.8571 1.34184e-09H5.00008C3.82302 -4.05863e-05 2.86628 0.92069 2.85724 2.06214C2.85724 2.0677 2.85724 2.07253 2.85724 2.07809H14.2857C16.2572 2.08036 17.8548 3.62967 17.8571 5.54155V16.6247C17.8629 16.6247 17.8678 16.6247 17.8736 16.6247C19.0506 16.6159 20 15.6881 20 14.5466V2.07809C20 0.930391 19.0406 1.34184e-09 17.8571 1.34184e-09Z" :fill="$q.dark.isActive ? '#fff' : '#455A64'" />
+        </g>
+      </g>
     </svg>
     <q-tooltip anchor="top middle" self="bottom middle" :offset="[10, 10]">
       Copy to clipboard

From e14319d401806e80e4a06fb28df0ef7c05aac8b7 Mon Sep 17 00:00:00 2001
From: MGrgr <grkapran@gmail.com>
Date: Sat, 3 Feb 2024 02:06:41 +0300
Subject: [PATCH 10/14] fix: update pools layout

---
 src/assets/styles/components/_pool-card.scss |  68 +++++++++++-
 src/components/pools/PoolsListItem.vue       | 109 +++++++++++--------
 2 files changed, 133 insertions(+), 44 deletions(-)

diff --git a/src/assets/styles/components/_pool-card.scss b/src/assets/styles/components/_pool-card.scss
index c976b4c..ffc206c 100644
--- a/src/assets/styles/components/_pool-card.scss
+++ b/src/assets/styles/components/_pool-card.scss
@@ -27,6 +27,22 @@
     .body--dark & {
       background-color: $primary;
     }
+
+    &__user {
+      @media(max-width: $breakpoint-xs) {
+        justify-content: flex-end;
+      }
+      .pool-card__label {
+        @media(max-width: $breakpoint-xs) {
+          text-align: right;
+        }
+      }
+      > div:first-child {
+        @media(max-width: $breakpoint-xs) {
+          margin-bottom: 4px;
+        }
+      }
+    }
   }
 
   &__income &__label {
@@ -58,11 +74,27 @@
 
   &__stats {
     font-size: 15px;
+    display: flex;
+
+    &__item {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      padding: 0 8px;
+      margin: 0 auto;
+    }
+
+    &__delimiter {
+      height: 38px;
+      width: 1px;
+      margin: 0 auto;
+      background-color: #A4A4A4;
+    }
   }
 
   &__label {
     font-size: 11px;
-    list-style: 13px;
+    line-height: 13px;
     color: $secondary;
     .body--dark & {
       color: #fff;
@@ -91,6 +123,13 @@
       margin-left: -14px;
     }
   }
+
+  &__actions {
+    height: 56px;
+    .q-btn__content {
+      font-size: 17px;
+    }
+  }
   
   &__subtitle {
     font-weight: 500;
@@ -100,6 +139,12 @@
 
   &__pubkey {
     word-break: break-all;
+    font-size: 16px;
+    color: #000;
+    font-family: Courier;
+    .body--dark & {
+      color: #fff;
+    }
   }
 
   body.body--dark & {
@@ -135,3 +180,24 @@
     color: #fff;
   }
 }
+
+.pool-info {
+  width: 390px;
+  max-width: 80vw;
+
+  &__delimiter {
+    height: 38px;
+    width: 1px;
+    margin: 0 16px;
+    background-color: #A4A4A4;
+  }
+  &__fees {
+    padding-bottom: 10px;
+    border-bottom: 1px solid #A4A4A4;
+  }
+  &__addresses {
+    .pool-card__label {
+      margin-bottom: -8px;
+    }
+  }
+}
diff --git a/src/components/pools/PoolsListItem.vue b/src/components/pools/PoolsListItem.vue
index d47823e..0420992 100644
--- a/src/components/pools/PoolsListItem.vue
+++ b/src/components/pools/PoolsListItem.vue
@@ -57,42 +57,63 @@ const dialog = ref(false)
         <span class="policy-info q-ml-auto">
           i
           <q-menu v-model="dialog" transition-duration="100" transition-show="fade" transition-hide="fade">
-            <q-card class="q-pa-md">
-              <div class="row items-center">
-                Pool address:&nbsp;
-                <span>
-                  <span class="pool-card__pubkey monoscaped">{{ shortenAddress(pubkey.toBase58()) }}</span>
-                  <copy-to-clipboard :text="pubkey.toBase58()" />
-                </span>
+            <q-card class="pool-info q-pa-md">
+              <div class="pool-info__fees row items-center">
+                <div>
+                  <div class="pool-card__label">
+                    Swap fee
+                  </div>
+                  <div v-if="swapFee" class="pool-card__amount">
+                    {{ formatPct.format(swapFee) }}
+                  </div>
+                </div>
+                <div class="pool-info__delimiter" />
+                <div>
+                  <div class="pool-card__label">
+                    Withdraw fee
+                  </div>
+                  <div v-if="fees" class="pool-card__amount">
+                    {{ formatPct.format(fees.ownerWithdraw) }}
+                  </div>
+                </div>
               </div>
-              <div class="row items-center">
-                Token A mint:&nbsp;
-                <span>
-                  <span class="pool-card__pubkey monoscaped">{{ shortenAddress(data.tokenAMint.toBase58()) }}</span>
-                  <copy-to-clipboard :text="data.tokenAMint.toBase58()" />
-                </span>
-              </div>
-              <div class="row items-center">
-                Token B mint:&nbsp;
-                <span>
-                  <span class="pool-card__pubkey monoscaped">{{ shortenAddress(data.tokenBMint.toBase58()) }}</span>
-                  <copy-to-clipboard :text="data.tokenBMint.toBase58()" />
-                </span>
-              </div>
-              <div class="row items-center">
-                LP token mint:&nbsp;
-                <span>
-                  <span class="pool-card__pubkey monoscaped">{{ shortenAddress(data.poolMint.toBase58()) }}</span>
-                  <copy-to-clipboard :text="data.poolMint.toBase58()" />
-                </span>
-              </div>
-              <div v-if="swapFee" class="row items-center q-mt-xs">
-                Swap fee:&nbsp;
-                <span class="pool-card__pubkey">{{ formatPct.format(swapFee) }}</span>
-              </div>
-              <div v-if="fees" class="row items-center q-mt-xs">
-                Withdraw fee:&nbsp;
-                <span class="pool-card__pubkey">{{ formatPct.format(fees.ownerWithdraw) }}</span>
+              <div class="pool-info__addresses">
+                <div class="column justify-center items-between q-mt-md">
+                  <div class="pool-card__label">
+                    Pool address
+                  </div>
+                  <div class="row justify-between items-center">
+                    <span class="pool-card__pubkey monoscaped">{{ shortenAddress(pubkey.toBase58(), 14) }}</span>
+                    <copy-to-clipboard :text="pubkey.toBase58()" />
+                  </div>
+                </div>
+                <div class="column justify-center items-between">
+                  <div class="pool-card__label">
+                    Token A mint
+                  </div>
+                  <div class="row justify-between items-center">
+                    <span class="pool-card__pubkey monoscaped">{{ shortenAddress(data.tokenAMint.toBase58(), 14) }}</span>
+                    <copy-to-clipboard :text="data.tokenAMint.toBase58()" />
+                  </div>
+                </div>
+                <div class="column justify-center items-between">
+                  <div class="pool-card__label">
+                    Token B mint
+                  </div>
+                  <div class="row justify-between items-center">
+                    <span class="pool-card__pubkey monoscaped">{{ shortenAddress(data.tokenBMint.toBase58(), 14) }}</span>
+                    <copy-to-clipboard :text="data.tokenBMint.toBase58()" />
+                  </div>
+                </div>
+                <div class="column justify-center items-between">
+                  <div class="pool-card__label">
+                    LP token mint
+                  </div>
+                  <div class="row justify-between items-center">
+                    <span class="pool-card__pubkey monoscaped">{{ shortenAddress(data.poolMint.toBase58(), 14) }}</span>
+                    <copy-to-clipboard :text="data.poolMint.toBase58()" />
+                  </div>
+                </div>
               </div>
             </q-card>
           </q-menu>
@@ -108,8 +129,8 @@ const dialog = ref(false)
             {{ poolStats ? `${formatPct.format(poolStats.apr24)}` : '---' }}
           </div>
         </div>
-        <div class="row q-ml-auto">
-          <div class="q-mr-md">
+        <div class="pool-card__income__user row q-ml-auto">
+          <div>
             <div class="pool-card__label">
               My Liquidity
             </div>
@@ -117,7 +138,7 @@ const dialog = ref(false)
               {{ poolStats && userTokens ? `$${formatUsd.format(userTokens / poolStats.poolTokenSupply * poolStats.tvl)}` : '---' }}
             </div>
           </div>
-          <div>
+          <div class="q-ml-md">
             <div class="pool-card__label">
               My Share
             </div>
@@ -128,8 +149,8 @@ const dialog = ref(false)
         </div>
       </div>
 
-      <div class="row q-mt-sm q-mb-auto q-pt-xs pool-card__stats">
-        <div class="col-4 q-mt-xs text-center">
+      <div class="pool-card__stats q-mt-sm q-mb-auto q-pt-xs">
+        <div class="pool-card__stats__item q-mt-xs text-center">
           <div class="pool-card__label">
             Volume 24H
           </div>
@@ -137,7 +158,8 @@ const dialog = ref(false)
             {{ poolStats ? `$${formatUsd.format(poolStats.volume24)}` : '---' }}
           </div>
         </div>
-        <div class="col-4 q-mt-xs text-center">
+        <div class="pool-card__stats__delimiter" />
+        <div class="pool-card__stats__item q-mt-xs text-center">
           <div class="pool-card__label">
             Liquidity
           </div>
@@ -145,7 +167,8 @@ const dialog = ref(false)
             {{ poolStats ? `$${formatUsd.format(poolStats.tvl)}` : '---' }}
           </div>
         </div>
-        <div class="col-4 q-mt-xs text-center">
+        <div class="pool-card__stats__delimiter" />
+        <div class="pool-card__stats__item q-mt-xs text-center">
           <div class="pool-card__label">
             Fees 24H
           </div>
@@ -161,7 +184,7 @@ const dialog = ref(false)
 
       <div v-if="!useEmit" class="row q-mt-md">
         <div class="col">
-          <q-btn-group spread unelevated square style="height: 56px">
+          <q-btn-group spread unelevated square class="pool-card__actions">
             <q-btn
               label="ADD LIQUIDITY"
               color="primary"

From 7e87f8979a39c44678d1163cef9a1e0d6a55646d Mon Sep 17 00:00:00 2001
From: MGrgr <grkapran@gmail.com>
Date: Mon, 5 Feb 2024 15:30:09 +0300
Subject: [PATCH 11/14] fix: proof request for liquidity

---
 src/stores/liquidity-single.ts   | 1 +
 src/stores/liquidity-withdraw.ts | 1 +
 src/stores/liquidity.ts          | 3 ++-
 src/stores/swap.ts               | 1 +
 4 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/stores/liquidity-single.ts b/src/stores/liquidity-single.ts
index 666a004..72c4fb1 100644
--- a/src/stores/liquidity-single.ts
+++ b/src/stores/liquidity-single.ts
@@ -76,6 +76,7 @@ export const useLiquiditySingleStore = defineStore('liquidity-single', () => {
       })
     } catch (e) {
       console.log(e)
+      console.error(e.logs)
       if (!`${e}`.includes('User rejected the request')) {
         notify({
           type: 'negative',
diff --git a/src/stores/liquidity-withdraw.ts b/src/stores/liquidity-withdraw.ts
index 9807cd4..38fbacf 100644
--- a/src/stores/liquidity-withdraw.ts
+++ b/src/stores/liquidity-withdraw.ts
@@ -181,6 +181,7 @@ export const useLiquidityWithdrawStore = defineStore('liquidity-withdraw', () =>
       reload()
     } catch (e) {
       console.log(e)
+      console.error(e.logs)
       if (!`${e}`.includes('User rejected the request')) {
         notify({
           type: 'negative',
diff --git a/src/stores/liquidity.ts b/src/stores/liquidity.ts
index f45142b..8ec75e1 100644
--- a/src/stores/liquidity.ts
+++ b/src/stores/liquidity.ts
@@ -164,7 +164,7 @@ export const useLiquidityStore = defineStore('liquidity', () => {
       console.log('poolTokenAmount = ', state.poolAmount)
 
       const signature = await swapClient.value.depositAllTokenTypes({
-        // proofRequest: userStore.certificate?.pubkey,
+        proofRequest: userStore.certificate?.pubkey,
         // authority,
         tokenSwap: tokenSwap.value.pubkey,
         poolMint: tokenSwap.value.data.poolMint,
@@ -195,6 +195,7 @@ export const useLiquidityStore = defineStore('liquidity', () => {
       reload()
     } catch (e) {
       console.log(e)
+      console.error(e.logs)
       if (!`${e}`.includes('User rejected the request')) {
         notify({
           type: 'negative',
diff --git a/src/stores/swap.ts b/src/stores/swap.ts
index 839d017..67fd55e 100644
--- a/src/stores/swap.ts
+++ b/src/stores/swap.ts
@@ -402,6 +402,7 @@ export const useSwapStore = defineStore('swap', () => {
       reload()
     } catch (e) {
       console.log(e)
+      console.error(e.logs)
       if (!`${e}`.includes('User rejected the request')) {
         notify({
           type: 'negative',

From 5f8fdf9f7c65b28197bf5855172c366c439104f3 Mon Sep 17 00:00:00 2001
From: MGrgr <grkapran@gmail.com>
Date: Tue, 6 Feb 2024 01:12:19 +0300
Subject: [PATCH 12/14] fix: dev backend

---
 .env.dev             | 2 +-
 src/config/common.ts | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/.env.dev b/.env.dev
index 07235ec..98210ca 100644
--- a/.env.dev
+++ b/.env.dev
@@ -1,3 +1,3 @@
 VITE_PASSWORD_PROTECT=345719
 VITE_ALBUS_APP_URL='https://dev.app.albus.finance'
-VITE_POOLS_API_URL='https://dev.app.albus.finance'
+VITE_POOLS_API_URL='http://49.13.124.83:3004'
diff --git a/src/config/common.ts b/src/config/common.ts
index f814b2f..f8d0187 100644
--- a/src/config/common.ts
+++ b/src/config/common.ts
@@ -4,8 +4,9 @@ export const TWITTER_URL = 'https://twitter.com/AlbusProtocol'
 export const DISCORD_URL = ''
 
 export const ALBUS_APP_URL = import.meta.env.VITE_ALBUS_APP_URL || (import.meta.env.DEV && 'https://dev.app.albus.finance') || 'https://app.albus.finance'
-export const POOLS_API_URL = import.meta.env.VITE_POOLS_API_URL || (import.meta.env.DEV && 'http://localhost:3000')
-
+// export const POOLS_API_URL = import.meta.env.VITE_POOLS_API_URL || (import.meta.env.DEV && 'http://localhost:3000')
+export const POOLS_API_URL = import.meta.env.VITE_POOLS_API_URL || (import.meta.env.DEV && 'http://49.13.124.83:3004')
+console.log('POOLS_API_URL = ', POOLS_API_URL)
 export const RENT_FEE = 0.00203928
 export const MIN_TRANSFER_FEE = 0.00203928
 // TODO: where from 0.0000016

From e1fe486f7cfb0a7a55d24c7d4d479b99ce46b2dd Mon Sep 17 00:00:00 2001
From: MGrgr <grkapran@gmail.com>
Date: Tue, 6 Feb 2024 18:49:48 +0300
Subject: [PATCH 13/14] fix: pools api

---
 .env.dev                               |  1 -
 .env.prod                              |  1 -
 .env.stage                             |  1 -
 src/components/pools/PoolsListItem.vue |  6 +++---
 src/config/common.ts                   |  6 +++---
 src/config/tokens.ts                   |  2 +-
 src/utils/pools-api.ts                 | 22 +++++++++++++++-------
 7 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/.env.dev b/.env.dev
index 98210ca..4995813 100644
--- a/.env.dev
+++ b/.env.dev
@@ -1,3 +1,2 @@
 VITE_PASSWORD_PROTECT=345719
 VITE_ALBUS_APP_URL='https://dev.app.albus.finance'
-VITE_POOLS_API_URL='http://49.13.124.83:3004'
diff --git a/.env.prod b/.env.prod
index 9bf236e..3b506d1 100644
--- a/.env.prod
+++ b/.env.prod
@@ -2,4 +2,3 @@
 VITE_GTAG_ID=
 VITE_SENTRY_DSN=
 VITE_ALBUS_APP_URL='https://app.albus.finance'
-VITE_POOLS_API_URL='https://app.albus.finance'
diff --git a/.env.stage b/.env.stage
index b35cb0b..b2c0908 100644
--- a/.env.stage
+++ b/.env.stage
@@ -1,3 +1,2 @@
 VITE_PASSWORD_PROTECT=345719
 VITE_ALBUS_APP_URL='https://stage.app.albus.finance'
-VITE_POOLS_API_URL='https://stage.app.albus.finance'
diff --git a/src/components/pools/PoolsListItem.vue b/src/components/pools/PoolsListItem.vue
index 0420992..5ef3cc8 100644
--- a/src/components/pools/PoolsListItem.vue
+++ b/src/components/pools/PoolsListItem.vue
@@ -126,7 +126,7 @@ const dialog = ref(false)
             APR 24H
           </div>
           <div class="pool-card__apr-amount">
-            {{ poolStats ? `${formatPct.format(poolStats.apr24)}` : '---' }}
+            {{ poolStats && !Number.isNaN(poolStats.apr24) ? `${formatPct.format(poolStats.apr24)}` : '---' }}
           </div>
         </div>
         <div class="pool-card__income__user row q-ml-auto">
@@ -135,7 +135,7 @@ const dialog = ref(false)
               My Liquidity
             </div>
             <div class="pool-card__amount">
-              {{ poolStats && userTokens ? `$${formatUsd.format(userTokens / poolStats.poolTokenSupply * poolStats.tvl)}` : '---' }}
+              {{ poolStats && !Number.isNaN(poolStats.poolTokenSupply) && userTokens ? `$${formatUsd.format(userTokens / poolStats.poolTokenSupply * poolStats.tvl)}` : '---' }}
             </div>
           </div>
           <div class="q-ml-md">
@@ -143,7 +143,7 @@ const dialog = ref(false)
               My Share
             </div>
             <div class="pool-card__amount">
-              {{ poolStats && userTokens ? `${formatPct.format(userTokens / poolStats.poolTokenSupply)}` : '---' }}
+              {{ poolStats && !Number.isNaN(poolStats.poolTokenSupply) && userTokens ? `${formatPct.format(userTokens / poolStats.poolTokenSupply)}` : '---' }}
             </div>
           </div>
         </div>
diff --git a/src/config/common.ts b/src/config/common.ts
index f8d0187..fe77678 100644
--- a/src/config/common.ts
+++ b/src/config/common.ts
@@ -4,9 +4,9 @@ export const TWITTER_URL = 'https://twitter.com/AlbusProtocol'
 export const DISCORD_URL = ''
 
 export const ALBUS_APP_URL = import.meta.env.VITE_ALBUS_APP_URL || (import.meta.env.DEV && 'https://dev.app.albus.finance') || 'https://app.albus.finance'
-// export const POOLS_API_URL = import.meta.env.VITE_POOLS_API_URL || (import.meta.env.DEV && 'http://localhost:3000')
-export const POOLS_API_URL = import.meta.env.VITE_POOLS_API_URL || (import.meta.env.DEV && 'http://49.13.124.83:3004')
-console.log('POOLS_API_URL = ', POOLS_API_URL)
+export const DEV_POOLS_API_URL = 'https://api.dev.defi.albus.finance'
+export const MAIN_POOLS_API_URL = 'https://api.defi.albus.finance'
+
 export const RENT_FEE = 0.00203928
 export const MIN_TRANSFER_FEE = 0.00203928
 // TODO: where from 0.0000016
diff --git a/src/config/tokens.ts b/src/config/tokens.ts
index 69352c3..9eb8c06 100644
--- a/src/config/tokens.ts
+++ b/src/config/tokens.ts
@@ -105,7 +105,7 @@ export const TOKENS_DEV = [
   TOKEN_B,
   USDC_TOKEN_DEV,
   // USDT_TOKEN_DEV,
-  TOKEN_C,
+  // TOKEN_C,
 ]
 
 export const TOKENS_MAIN = [
diff --git a/src/utils/pools-api.ts b/src/utils/pools-api.ts
index e1087f7..26ee17b 100644
--- a/src/utils/pools-api.ts
+++ b/src/utils/pools-api.ts
@@ -1,5 +1,6 @@
 import axios from 'axios'
-import { POOLS_API_URL } from '@/config'
+import type { Cluster } from '@solana/web3.js'
+import { DEV_POOLS_API_URL, MAIN_POOLS_API_URL } from '@/config'
 
 export interface PoolData {
   id: number
@@ -42,17 +43,24 @@ export interface TxData {
   type?: string
 }
 
-export async function getPoolsStats(): Promise<PoolData[]> {
-  const { data } = await axios.get(`${POOLS_API_URL}`)
+export async function getPoolsStats(cluster: Cluster): Promise<PoolData[]> {
+  const { data } = await axios.get(`${getApiUrl(cluster)}`)
   return data
 }
 
-export async function getPoolsTransactions(): Promise<TxData[]> {
-  const { data } = await axios.get(`${POOLS_API_URL}/transactions?type=swap`)
+export async function getPoolsTransactions(cluster: Cluster): Promise<TxData[]> {
+  const { data } = await axios.get(`${getApiUrl(cluster)}/transactions?type=swap`)
   return data
 }
 
-export async function getCoinsPrice(): Promise<Record<string, number>> {
-  const { data } = await axios.get(`${POOLS_API_URL}/coin-price`)
+export async function getCoinsPrice(cluster: Cluster): Promise<Record<string, number>> {
+  const { data } = await axios.get(`${getApiUrl(cluster)}/coin-price`)
   return data
 }
+
+function getApiUrl(cluster: Cluster) {
+  if (cluster === 'mainnet-beta') {
+    return MAIN_POOLS_API_URL
+  }
+  return DEV_POOLS_API_URL
+}

From 157b90d7f9b464c188533376d30c78498bc3620f Mon Sep 17 00:00:00 2001
From: MGrgr <grkapran@gmail.com>
Date: Wed, 7 Feb 2024 15:46:03 +0300
Subject: [PATCH 14/14] fix: dev rpc

---
 src/config/connection.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/config/connection.ts b/src/config/connection.ts
index cf9dc1c..10f31ea 100644
--- a/src/config/connection.ts
+++ b/src/config/connection.ts
@@ -24,7 +24,7 @@ if (ENVIRONMENT === 'dev' || isDev) {
     id: 'devnet',
     name: 'DevNet',
     cluster: 'devnet',
-    url: 'https://polished-damp-dust.solana-devnet.quiknode.pro/e3fdb5a9915e3c3c47709465b4b5fa9f0153b674',
+    url: 'https://jody-hlb1qh-fast-devnet.helius-rpc.com/',
   })
 }