From 7904d83d3775813d52431632c62a78c923b11e7c Mon Sep 17 00:00:00 2001
From: Alberto Gualis <agualis@gmail.com>
Date: Wed, 16 Oct 2024 17:48:44 +0200
Subject: [PATCH 01/11] feat: swap from pool

---
 .../[chain]/[variant]/[id]/stake/page.tsx     |  1 -
 .../[id]/swap/[[...txHash]]/page.tsx          | 44 ++++++++++++
 .../app/(app)/swap/[[...slug]]/layout.tsx     | 32 ++-------
 .../PoolHeader/PoolAdvancedOptions.tsx        | 70 +++++++++++++++++++
 .../pool/PoolDetail/PoolHeader/PoolHeader.tsx | 23 +++---
 packages/lib/modules/swap/PoolSwapCard.tsx    | 29 ++++++++
 packages/lib/modules/swap/SwapForm.tsx        | 64 +++++++++++------
 packages/lib/modules/swap/SwapLayout.tsx      | 39 +++++++++++
 packages/lib/modules/swap/SwapProvider.tsx    | 10 +++
 packages/lib/modules/swap/modal/SwapModal.tsx |  9 ++-
 packages/lib/modules/swap/useIsPoolSwap.tsx   |  6 ++
 .../modules/tokens/NativeAssetSelectModal.tsx |  4 +-
 .../CompactTokenSelectList.tsx}               | 10 +--
 .../CompactTokenSelectModal.tsx               | 64 +++++++++++++++++
 .../lib/shared/components/icons/SwapIcon.tsx  | 48 +++++++++++++
 15 files changed, 387 insertions(+), 66 deletions(-)
 create mode 100644 apps/frontend-v3/app/(app)/pools/[chain]/[variant]/[id]/swap/[[...txHash]]/page.tsx
 create mode 100644 packages/lib/modules/pool/PoolDetail/PoolHeader/PoolAdvancedOptions.tsx
 create mode 100644 packages/lib/modules/swap/PoolSwapCard.tsx
 create mode 100644 packages/lib/modules/swap/SwapLayout.tsx
 create mode 100644 packages/lib/modules/swap/useIsPoolSwap.tsx
 rename packages/lib/modules/tokens/{NativeAssetSelectList.tsx => TokenSelectModal/TokenSelectList/CompactTokenSelectList.tsx} (88%)
 create mode 100644 packages/lib/modules/tokens/TokenSelectModal/TokenSelectList/CompactTokenSelectModal.tsx
 create mode 100644 packages/lib/shared/components/icons/SwapIcon.tsx

diff --git a/apps/frontend-v3/app/(app)/pools/[chain]/[variant]/[id]/stake/page.tsx b/apps/frontend-v3/app/(app)/pools/[chain]/[variant]/[id]/stake/page.tsx
index 29cc70532..cbb41e245 100644
--- a/apps/frontend-v3/app/(app)/pools/[chain]/[variant]/[id]/stake/page.tsx
+++ b/apps/frontend-v3/app/(app)/pools/[chain]/[variant]/[id]/stake/page.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 
 import { PoolActionsLayout } from '@repo/lib/modules/pool/actions/PoolActionsLayout'
diff --git a/apps/frontend-v3/app/(app)/pools/[chain]/[variant]/[id]/swap/[[...txHash]]/page.tsx b/apps/frontend-v3/app/(app)/pools/[chain]/[variant]/[id]/swap/[[...txHash]]/page.tsx
new file mode 100644
index 000000000..40530854d
--- /dev/null
+++ b/apps/frontend-v3/app/(app)/pools/[chain]/[variant]/[id]/swap/[[...txHash]]/page.tsx
@@ -0,0 +1,44 @@
+'use client'
+
+import { PoolActionsLayout } from '@repo/lib/modules/pool/actions/PoolActionsLayout'
+import { getPoolTokens } from '@repo/lib/modules/pool/pool.helpers'
+import { usePoolRedirect } from '@repo/lib/modules/pool/pool.hooks'
+import { chainToSlugMap } from '@repo/lib/modules/pool/pool.utils'
+import { usePool } from '@repo/lib/modules/pool/PoolProvider'
+import { SwapForm } from '@repo/lib/modules/swap/SwapForm'
+import SwapLayout from '@repo/lib/modules/swap/SwapLayout'
+import { PathParams } from '@repo/lib/modules/swap/SwapProvider'
+import { useTokens } from '@repo/lib/modules/tokens/TokensProvider'
+import { Hash } from 'viem'
+
+type Props = {
+  params: { txHash?: string[] }
+}
+// Page for swapping from a pool page
+export default function PoolSwapPage({ params: { txHash } }: Props) {
+  const { getToken } = useTokens()
+  const { pool, isLoading } = usePool()
+  const { redirectToPoolPage } = usePoolRedirect(pool)
+
+  const poolTokens = getPoolTokens(pool, getToken)
+
+  const maybeTxHash = (txHash?.[0] as Hash) || undefined
+
+  const pathParams: PathParams = {
+    chain: chainToSlugMap[pool.chain],
+    tokenIn: poolTokens[0].address,
+    tokenOut: poolTokens[1].address,
+    poolTokens,
+    urlTxHash: maybeTxHash,
+  }
+
+  return (
+    <PoolActionsLayout>
+      {isLoading ? null : (
+        <SwapLayout pathParams={pathParams}>
+          <SwapForm redirectToPoolPage={redirectToPoolPage} />
+        </SwapLayout>
+      )}
+    </PoolActionsLayout>
+  )
+}
diff --git a/apps/frontend-v3/app/(app)/swap/[[...slug]]/layout.tsx b/apps/frontend-v3/app/(app)/swap/[[...slug]]/layout.tsx
index 7f4cf9ffc..fe3219541 100644
--- a/apps/frontend-v3/app/(app)/swap/[[...slug]]/layout.tsx
+++ b/apps/frontend-v3/app/(app)/swap/[[...slug]]/layout.tsx
@@ -1,44 +1,20 @@
 'use client'
 
-import { ChainSlug, slugToChainMap } from '@repo/lib/modules/pool/pool.utils'
-import { SwapProvider } from '@repo/lib/modules/swap/SwapProvider'
-import { TokenBalancesProvider } from '@repo/lib/modules/tokens/TokenBalancesProvider'
-import { TokenInputsValidationProvider } from '@repo/lib/modules/tokens/TokenInputsValidationProvider'
-import { useTokens } from '@repo/lib/modules/tokens/TokensProvider'
-import { TransactionStateProvider } from '@repo/lib/modules/transactions/transaction-steps/TransactionStateProvider'
-import { GqlChain } from '@repo/lib/shared/services/api/generated/graphql'
 import { PropsWithChildren } from 'react'
-import { PriceImpactProvider } from '@repo/lib/modules/price-impact/PriceImpactProvider'
-import { DefaultPageContainer } from '@repo/lib/shared/components/containers/DefaultPageContainer'
 import { getSwapPathParams } from '@repo/lib/modules/swap/getSwapPathParams'
-import { RelayerSignatureProvider } from '@repo/lib/modules/relayer/RelayerSignatureProvider'
+import SwapLayout from '../../../../../../packages/lib/modules/swap/SwapLayout'
+import { DefaultPageContainer } from '@repo/lib/shared/components/containers/DefaultPageContainer'
 
 type Props = PropsWithChildren<{
   params: { slug?: string[] }
 }>
 
-export default function SwapLayout({ params: { slug }, children }: Props) {
+export default function Layout({ params: { slug }, children }: Props) {
   const pathParams = getSwapPathParams(slug)
 
-  const { getTokensByChain } = useTokens()
-  const initChain = pathParams.chain
-    ? slugToChainMap[pathParams.chain as ChainSlug]
-    : GqlChain.Mainnet
-  const initTokens = getTokensByChain(initChain)
-
   return (
     <DefaultPageContainer minH="100vh">
-      <TransactionStateProvider>
-        <RelayerSignatureProvider>
-          <TokenInputsValidationProvider>
-            <TokenBalancesProvider initTokens={initTokens}>
-              <PriceImpactProvider>
-                <SwapProvider pathParams={{ ...pathParams }}>{children}</SwapProvider>
-              </PriceImpactProvider>
-            </TokenBalancesProvider>
-          </TokenInputsValidationProvider>
-        </RelayerSignatureProvider>
-      </TransactionStateProvider>
+      <SwapLayout pathParams={pathParams}> {children} </SwapLayout>
     </DefaultPageContainer>
   )
 }
diff --git a/packages/lib/modules/pool/PoolDetail/PoolHeader/PoolAdvancedOptions.tsx b/packages/lib/modules/pool/PoolDetail/PoolHeader/PoolAdvancedOptions.tsx
new file mode 100644
index 000000000..adb92fd39
--- /dev/null
+++ b/packages/lib/modules/pool/PoolDetail/PoolHeader/PoolAdvancedOptions.tsx
@@ -0,0 +1,70 @@
+'use client'
+
+import {
+  Box,
+  Button,
+  HStack,
+  Link,
+  Popover,
+  PopoverArrow,
+  PopoverBody,
+  PopoverCloseButton,
+  PopoverContent,
+  PopoverTrigger,
+  VStack,
+} from '@chakra-ui/react'
+import { SwapIcon } from '@repo/lib/shared/components/icons/SwapIcon'
+import { staggeredFadeInUp } from '@repo/lib/shared/utils/animations'
+import { AnimatePresence, motion } from 'framer-motion'
+import NextLink from 'next/link'
+import { usePathname } from 'next/navigation'
+import { useState } from 'react'
+import { MoreVertical } from 'react-feather'
+
+export function PoolAdvancedOptions() {
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false)
+  const pathname = usePathname()
+
+  return (
+    <Popover
+      isOpen={isPopoverOpen}
+      onOpen={() => setIsPopoverOpen(true)}
+      onClose={() => setIsPopoverOpen(false)}
+      placement="bottom-end"
+    >
+      <PopoverTrigger>
+        <Button variant="tertiary" size="lg" color="grayText">
+          {<MoreVertical size={16} />}
+        </Button>
+      </PopoverTrigger >
+      <Box zIndex="popover" shadow="2xl" width="max">
+        <PopoverContent>
+          <PopoverArrow bg="background.level3" />
+          <PopoverCloseButton top="sm" />
+          <PopoverBody p="lg">
+            <AnimatePresence>
+              {isPopoverOpen && (
+                <VStack
+                  align="start"
+                  spacing="xxs"
+                  as={motion.div}
+                  initial="hidden"
+                  animate="show"
+                  exit="exit"
+                  variants={staggeredFadeInUp}
+                >
+                  <HStack>
+                    <SwapIcon size={24} />
+                    <Link as={NextLink} href={`${pathname}/swap`} prefetch={true} variant="nav">
+                      Swap tokens directly via this pool
+                    </Link>
+                  </HStack>
+                </VStack>
+              )}
+            </AnimatePresence>
+          </PopoverBody>
+        </PopoverContent>
+      </Box>
+    </Popover>
+  )
+}
diff --git a/packages/lib/modules/pool/PoolDetail/PoolHeader/PoolHeader.tsx b/packages/lib/modules/pool/PoolDetail/PoolHeader/PoolHeader.tsx
index 37c7571a5..18369650f 100644
--- a/packages/lib/modules/pool/PoolDetail/PoolHeader/PoolHeader.tsx
+++ b/packages/lib/modules/pool/PoolDetail/PoolHeader/PoolHeader.tsx
@@ -1,4 +1,4 @@
-import { Stack, Button, VStack, useDisclosure } from '@chakra-ui/react'
+import { Stack, Button, VStack, useDisclosure, HStack } from '@chakra-ui/react'
 import { usePathname, useRouter } from 'next/navigation'
 import PoolMetaBadges from './PoolMetaBadges'
 
@@ -13,6 +13,7 @@ import {
 } from '@repo/lib/shared/components/modals/PartnerRedirectModal'
 import { useState } from 'react'
 import { getXavePoolLink } from '../../pool.utils'
+import { PoolAdvancedOptions } from './PoolAdvancedOptions'
 
 export function PoolHeader() {
   const pathname = usePathname()
@@ -55,14 +56,18 @@ export function PoolHeader() {
         <PoolMetaBadges />
         <Stack spacing="md" direction={{ base: 'column', md: 'row' }}>
           <PoolCategories />
-          <Button
-            onClick={handleClick}
-            variant="primary"
-            size="lg"
-            isDisabled={isAddLiquidityBlocked}
-          >
-            Add liquidity
-          </Button>
+          <HStack spacing="sm">
+
+            <Button
+              onClick={handleClick}
+              variant="primary"
+              size="lg"
+              isDisabled={isAddLiquidityBlocked}
+            >
+              Add liquidity
+            </Button>
+            <PoolAdvancedOptions />
+          </HStack>
           <PartnerRedirectModal
             partner={redirectPartner}
             redirectUrl={redirectPartnerUrl}
diff --git a/packages/lib/modules/swap/PoolSwapCard.tsx b/packages/lib/modules/swap/PoolSwapCard.tsx
new file mode 100644
index 000000000..422526243
--- /dev/null
+++ b/packages/lib/modules/swap/PoolSwapCard.tsx
@@ -0,0 +1,29 @@
+import { VStack, Card, HStack, Text } from '@chakra-ui/react'
+import { BalAlert } from '@repo/lib/shared/components/alerts/BalAlert'
+import { BalAlertContent } from '@repo/lib/shared/components/alerts/BalAlertContent'
+import { NetworkIcon } from '@repo/lib/shared/components/icons/NetworkIcon'
+import { usePool } from '../pool/PoolProvider'
+
+export function PoolSwapCard() {
+  const { pool } = usePool()
+  return (
+    <VStack>
+      <BalAlert
+        status="warning"
+        content={
+          <BalAlertContent
+            title="Direct single pool swap (expert option)"
+            description="This swap routes through a single pool only. Better rates are usually available through the standard swap UI."
+            forceColumnMode
+          />
+        }
+      />
+      <Card h="full">
+        <HStack>
+          <NetworkIcon chain={pool.chain} size={6} />
+          <Text>{pool.name} (swap route)</Text>
+        </HStack>
+      </Card>
+    </VStack>
+  )
+}
diff --git a/packages/lib/modules/swap/SwapForm.tsx b/packages/lib/modules/swap/SwapForm.tsx
index 4a0d526f7..bb4372fd3 100644
--- a/packages/lib/modules/swap/SwapForm.tsx
+++ b/packages/lib/modules/swap/SwapForm.tsx
@@ -38,8 +38,14 @@ import { useUserAccount } from '../web3/UserAccountProvider'
 import { ConnectWallet } from '../web3/ConnectWallet'
 import { SafeAppAlert } from '@repo/lib/shared/components/alerts/SafeAppAlert'
 import { useTokens } from '../tokens/TokensProvider'
+import { useIsPoolSwap } from './useIsPoolSwap'
+import { CompactTokenSelectModal } from '../tokens/TokenSelectModal/TokenSelectList/CompactTokenSelectModal'
+import { PoolSwapCard } from './PoolSwapCard'
 
-export function SwapForm() {
+type Props = {
+  redirectToPoolPage?: () => void // Only used for pool swaps
+}
+export function SwapForm({ redirectToPoolPage }: Props) {
   const {
     tokenIn,
     tokenOut,
@@ -72,6 +78,7 @@ export function SwapForm() {
   const isMounted = useIsMounted()
   const { isConnected } = useUserAccount()
   const { startTokenPricePolling } = useTokens()
+  const isPoolSwap = useIsPoolSwap()
 
   const isLoadingSwaps = simulationQuery.isLoading
   const isLoading = isLoadingSwaps || !isMounted
@@ -107,8 +114,9 @@ export function SwapForm() {
 
     if (swapTxHash) {
       resetSwapAmounts()
-      replaceUrlPath()
       transactionSteps.resetTransactionSteps()
+      if (isPoolSwap) return redirectToPoolPage?.()
+      replaceUrlPath()
     }
   }
 
@@ -124,7 +132,7 @@ export function SwapForm() {
       >
         <Card rounded="xl">
           <CardHeader as={HStack} w="full" justify="space-between" zIndex={11}>
-            <span>{capitalize(swapAction)}</span>
+            <span>{isPoolSwap ? 'Single pool swap' : capitalize(swapAction)}</span>
             <HStack>
               <Tooltip label={copiedDeepLink ? 'Copied!' : 'Copy swap link'}>
                 <Button variant="tertiary" size="sm" color="grayText" onClick={copyDeepLink}>
@@ -137,14 +145,17 @@ export function SwapForm() {
           </CardHeader>
           <CardBody as={VStack} align="start">
             <VStack spacing="md" w="full">
+              {isPoolSwap && <PoolSwapCard />}
               <SafeAppAlert />
-              <ChainSelect
-                value={selectedChain}
-                onChange={newValue => {
-                  setSelectedChain(newValue as GqlChain)
-                  setTokenInAmount('')
-                }}
-              />
+              {!isPoolSwap && (
+                <ChainSelect
+                  value={selectedChain}
+                  onChange={newValue => {
+                    setSelectedChain(newValue as GqlChain)
+                    setTokenInAmount('')
+                  }}
+                />
+              )}
               <VStack w="full">
                 <TokenInput
                   ref={finalRefTokenIn}
@@ -235,16 +246,29 @@ export function SwapForm() {
           </CardFooter>
         </Card>
       </Center>
-      <TokenSelectModal
-        finalFocusRef={tokenSelectKey === 'tokenIn' ? finalRefTokenIn : finalRefTokenOut}
-        chain={selectedChain}
-        tokens={tokens}
-        currentToken={tokenSelectKey === 'tokenIn' ? tokenIn.address : tokenOut.address}
-        isOpen={tokenSelectDisclosure.isOpen}
-        onOpen={tokenSelectDisclosure.onOpen}
-        onClose={tokenSelectDisclosure.onClose}
-        onTokenSelect={handleTokenSelect}
-      />
+      {isPoolSwap ? (
+        <CompactTokenSelectModal
+          finalFocusRef={tokenSelectKey === 'tokenIn' ? finalRefTokenIn : finalRefTokenOut}
+          chain={selectedChain}
+          tokens={tokens}
+          isOpen={tokenSelectDisclosure.isOpen}
+          onOpen={tokenSelectDisclosure.onOpen}
+          onClose={tokenSelectDisclosure.onClose}
+          onTokenSelect={handleTokenSelect}
+        />
+      ) : (
+        <TokenSelectModal
+          finalFocusRef={tokenSelectKey === 'tokenIn' ? finalRefTokenIn : finalRefTokenOut}
+          chain={selectedChain}
+          tokens={tokens}
+          currentToken={tokenSelectKey === 'tokenIn' ? tokenIn.address : tokenOut.address}
+          isOpen={tokenSelectDisclosure.isOpen}
+          onOpen={tokenSelectDisclosure.onOpen}
+          onClose={tokenSelectDisclosure.onClose}
+          onTokenSelect={handleTokenSelect}
+        />
+      )}
+
       <SwapPreviewModal
         finalFocusRef={nextBtn}
         isOpen={previewModalDisclosure.isOpen}
diff --git a/packages/lib/modules/swap/SwapLayout.tsx b/packages/lib/modules/swap/SwapLayout.tsx
new file mode 100644
index 000000000..2915e37ef
--- /dev/null
+++ b/packages/lib/modules/swap/SwapLayout.tsx
@@ -0,0 +1,39 @@
+'use client'
+
+import { ChainSlug, slugToChainMap } from '@repo/lib/modules/pool/pool.utils'
+import { PriceImpactProvider } from '@repo/lib/modules/price-impact/PriceImpactProvider'
+import { RelayerSignatureProvider } from '@repo/lib/modules/relayer/RelayerSignatureProvider'
+import { PathParams, SwapProvider } from '@repo/lib/modules/swap/SwapProvider'
+import { TokenBalancesProvider } from '@repo/lib/modules/tokens/TokenBalancesProvider'
+import { TokenInputsValidationProvider } from '@repo/lib/modules/tokens/TokenInputsValidationProvider'
+import { useTokens } from '@repo/lib/modules/tokens/TokensProvider'
+import { TransactionStateProvider } from '@repo/lib/modules/transactions/transaction-steps/TransactionStateProvider'
+import { GqlChain } from '@repo/lib/shared/services/api/generated/graphql'
+import { PropsWithChildren } from 'react'
+
+type Props = PropsWithChildren<{
+  pathParams: PathParams
+}>
+
+// Layout shared by standard swap page (/swap) and pool swap page (/poolid/swap)
+export default function SwapLayout({ pathParams, children }: Props) {
+  const { getTokensByChain } = useTokens()
+  const initChain = pathParams.chain
+    ? slugToChainMap[pathParams.chain as ChainSlug]
+    : GqlChain.Mainnet
+  const initTokens = pathParams.poolTokens || getTokensByChain(initChain)
+
+  return (
+    <TransactionStateProvider>
+      <RelayerSignatureProvider>
+        <TokenInputsValidationProvider>
+          <TokenBalancesProvider initTokens={initTokens}>
+            <PriceImpactProvider>
+              <SwapProvider pathParams={{ ...pathParams }}>{children}</SwapProvider>
+            </PriceImpactProvider>
+          </TokenBalancesProvider>
+        </TokenInputsValidationProvider>
+      </RelayerSignatureProvider>
+    </TransactionStateProvider>
+  )
+}
diff --git a/packages/lib/modules/swap/SwapProvider.tsx b/packages/lib/modules/swap/SwapProvider.tsx
index df1f0c6da..fdea9b79e 100644
--- a/packages/lib/modules/swap/SwapProvider.tsx
+++ b/packages/lib/modules/swap/SwapProvider.tsx
@@ -48,6 +48,7 @@ import { usePriceImpact } from '../price-impact/PriceImpactProvider'
 import { calcMarketPriceImpact } from '../price-impact/price-impact.utils'
 import { isAuraBalSwap } from './swap.helpers'
 import { AuraBalSwapHandler } from './handlers/AuraBalSwap.handler'
+import { useIsPoolSwap } from './useIsPoolSwap'
 
 export type UseSwapResponse = ReturnType<typeof _useSwap>
 export const SwapContext = createContext<UseSwapResponse | null>(null)
@@ -60,6 +61,8 @@ export type PathParams = {
   amountOut?: string
   // When urlTxHash is present the rest of the params above are not used
   urlTxHash?: Hash
+  // Only used by pool swap
+  poolTokens?: GqlToken[]
 }
 
 function selectSwapHandler(
@@ -83,6 +86,7 @@ function selectSwapHandler(
 }
 
 export function _useSwap({ urlTxHash, ...pathParams }: PathParams) {
+  const isPoolSwap = useIsPoolSwap()
   const swapStateVar = useMakeVarPersisted<SwapState>(
     {
       tokenIn: {
@@ -335,6 +339,7 @@ export function _useSwap({ urlTxHash, ...pathParams }: PathParams) {
   }
 
   function replaceUrlPath() {
+    if (isPoolSwap) return // Avoid redirection when the swap is within a pool page
     const { selectedChain, tokenIn, tokenOut, swapType } = swapState
     const { popularTokens } = networkConfig.tokens
     const chainSlug = chainToSlugMap[selectedChain]
@@ -467,6 +472,10 @@ export function _useSwap({ urlTxHash, ...pathParams }: PathParams) {
     setInitialTokenOut(tokenOut)
     setInitialAmounts(amountIn, amountOut)
 
+    if (isPoolSwap) {
+      setTokens(pathParams.poolTokens!)
+    }
+
     if (!swapState.tokenIn.address && !swapState.tokenOut.address) setDefaultTokens()
   }, [])
 
@@ -509,6 +518,7 @@ export function _useSwap({ urlTxHash, ...pathParams }: PathParams) {
 
   // Update selecteable tokens when the chain changes
   useEffect(() => {
+    if (isPoolSwap) return
     setTokens(getTokensByChain(swapState.selectedChain))
   }, [swapState.selectedChain])
 
diff --git a/packages/lib/modules/swap/modal/SwapModal.tsx b/packages/lib/modules/swap/modal/SwapModal.tsx
index 27db8d0cd..ca9837117 100644
--- a/packages/lib/modules/swap/modal/SwapModal.tsx
+++ b/packages/lib/modules/swap/modal/SwapModal.tsx
@@ -20,6 +20,7 @@ import { SwapSummary } from './SwapSummary'
 import { useSwapReceipt } from '../../transactions/transaction-steps/receipts/receipt.hooks'
 import { useUserAccount } from '../../web3/UserAccountProvider'
 import { useTokens } from '../../tokens/TokensProvider'
+import { useIsPoolSwap } from '../useIsPoolSwap'
 
 type Props = {
   isOpen: boolean
@@ -34,6 +35,7 @@ export function SwapPreviewModal({
   finalFocusRef,
   ...rest
 }: Props & Omit<ModalProps, 'children'>) {
+  const isPoolSwap = useIsPoolSwap()
   const { isDesktop } = useBreakpoints()
   const initialFocusRef = useRef(null)
   const { userAddress } = useUserAccount()
@@ -59,7 +61,10 @@ export function SwapPreviewModal({
 
   useEffect(() => {
     if (!isWrap && swapTxHash && !window.location.pathname.includes(swapTxHash)) {
-      window.history.pushState({}, '', `/swap/${chainToSlugMap[selectedChain]}/${swapTxHash}`)
+      const url = isPoolSwap
+        ? `${window.location.pathname}/${swapTxHash}`
+        : `/swap/${chainToSlugMap[selectedChain]}/${swapTxHash}`
+      window.history.pushState({}, '', url)
     }
   }, [swapTxHash])
 
@@ -102,7 +107,7 @@ export function SwapPreviewModal({
         <ActionModalFooter
           isSuccess={!!swapTxHash && !swapReceipt.isLoading}
           currentStep={transactionSteps.currentStep}
-          returnLabel="Swap again"
+          returnLabel={isPoolSwap ? 'Return to pool' : 'Swap again'}
           returnAction={onClose}
           urlTxHash={urlTxHash}
         />
diff --git a/packages/lib/modules/swap/useIsPoolSwap.tsx b/packages/lib/modules/swap/useIsPoolSwap.tsx
new file mode 100644
index 000000000..503dfb002
--- /dev/null
+++ b/packages/lib/modules/swap/useIsPoolSwap.tsx
@@ -0,0 +1,6 @@
+import { usePathname } from 'next/navigation'
+
+export function useIsPoolSwap() {
+  const pathname = usePathname()
+  return pathname.includes('/pools') && pathname.includes('/swap')
+}
diff --git a/packages/lib/modules/tokens/NativeAssetSelectModal.tsx b/packages/lib/modules/tokens/NativeAssetSelectModal.tsx
index 14da04194..991075074 100644
--- a/packages/lib/modules/tokens/NativeAssetSelectModal.tsx
+++ b/packages/lib/modules/tokens/NativeAssetSelectModal.tsx
@@ -13,7 +13,7 @@ import {
 } from '@chakra-ui/react'
 import { RefObject } from 'react'
 import { GqlChain, GqlToken } from '@repo/lib/shared/services/api/generated/graphql'
-import { NativeAssetSelectList } from './NativeAssetSelectList'
+import { CompactTokenSelectList } from './TokenSelectModal/TokenSelectList/CompactTokenSelectList'
 
 type Props = {
   chain: GqlChain
@@ -54,7 +54,7 @@ export function NativeAssetSelectModal({
         <ModalBody p={0}>
           <VStack w="full" align="start" spacing="md">
             <Box px="md" w="full">
-              <NativeAssetSelectList tokens={nativeAssets} onTokenSelect={closeOnSelect} />
+              <CompactTokenSelectList tokens={nativeAssets} onTokenSelect={closeOnSelect} />
             </Box>
           </VStack>
         </ModalBody>
diff --git a/packages/lib/modules/tokens/NativeAssetSelectList.tsx b/packages/lib/modules/tokens/TokenSelectModal/TokenSelectList/CompactTokenSelectList.tsx
similarity index 88%
rename from packages/lib/modules/tokens/NativeAssetSelectList.tsx
rename to packages/lib/modules/tokens/TokenSelectModal/TokenSelectList/CompactTokenSelectList.tsx
index 2c05be3f3..2f1154d21 100644
--- a/packages/lib/modules/tokens/NativeAssetSelectList.tsx
+++ b/packages/lib/modules/tokens/TokenSelectModal/TokenSelectList/CompactTokenSelectList.tsx
@@ -1,20 +1,20 @@
 'use client'
 
 import { Box, BoxProps, Center, Text } from '@chakra-ui/react'
-import { TokenSelectListRow } from './TokenSelectModal/TokenSelectList/TokenSelectListRow'
 import { GqlToken } from '@repo/lib/shared/services/api/generated/graphql'
-import { useTokenBalances } from './TokenBalancesProvider'
 import { useUserAccount } from '@repo/lib/modules/web3/UserAccountProvider'
 import { useState } from 'react'
 import { useHotkeys } from 'react-hotkeys-hook'
 import { Virtuoso } from 'react-virtuoso'
+import { useTokenBalances } from '../../TokenBalancesProvider'
+import { TokenSelectListRow } from './TokenSelectListRow'
 
 type Props = {
   tokens: GqlToken[]
   onTokenSelect: (token: GqlToken) => void
 }
 
-export function NativeAssetSelectList({ tokens, onTokenSelect, ...rest }: Props & BoxProps) {
+export function CompactTokenSelectList({ tokens, onTokenSelect, ...rest }: Props & BoxProps) {
   const [activeIndex, setActiveIndex] = useState(0)
   const { balanceFor, isBalancesLoading } = useTokenBalances()
   const { isConnected } = useUserAccount()
@@ -40,6 +40,8 @@ export function NativeAssetSelectList({ tokens, onTokenSelect, ...rest }: Props
     return `${token.address}:${token.chain}:${index}`
   }
 
+  const style = { height: `${tokens.length * 75}px` }
+
   return (
     <Box {...rest}>
       {tokens.length === 0 ? (
@@ -50,7 +52,7 @@ export function NativeAssetSelectList({ tokens, onTokenSelect, ...rest }: Props
         </Center>
       ) : (
         <Virtuoso
-          style={{ height: '150px' }}
+          style={style}
           data={tokens}
           itemContent={index => {
             const token = tokens[index]
diff --git a/packages/lib/modules/tokens/TokenSelectModal/TokenSelectList/CompactTokenSelectModal.tsx b/packages/lib/modules/tokens/TokenSelectModal/TokenSelectList/CompactTokenSelectModal.tsx
new file mode 100644
index 000000000..fa73a5a23
--- /dev/null
+++ b/packages/lib/modules/tokens/TokenSelectModal/TokenSelectList/CompactTokenSelectModal.tsx
@@ -0,0 +1,64 @@
+'use client'
+
+import {
+  Box,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
+  ModalProps,
+  VStack,
+} from '@chakra-ui/react'
+import { RefObject } from 'react'
+import { GqlChain, GqlToken } from '@repo/lib/shared/services/api/generated/graphql'
+import { CompactTokenSelectList } from './CompactTokenSelectList'
+
+type Props = {
+  chain: GqlChain
+  isOpen: boolean
+  onClose(): void
+  onOpen(): void
+  finalFocusRef?: RefObject<HTMLInputElement>
+  onTokenSelect: (token: GqlToken) => void
+  tokens: GqlToken[]
+}
+
+export function CompactTokenSelectModal({
+  isOpen,
+  onClose,
+  finalFocusRef,
+  onTokenSelect,
+  tokens,
+  ...rest
+}: Props & Omit<ModalProps, 'children'>) {
+  function closeOnSelect(token: GqlToken) {
+    onClose()
+    onTokenSelect(token)
+  }
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      finalFocusRef={finalFocusRef}
+      isCentered
+      preserveScrollBarGap
+      {...rest}
+    >
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader color="font.primary">Select a token</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody p={0}>
+          <VStack w="full" align="start" spacing="md">
+            <Box px="md" w="full">
+              <CompactTokenSelectList tokens={tokens} onTokenSelect={closeOnSelect} />
+            </Box>
+          </VStack>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  )
+}
diff --git a/packages/lib/shared/components/icons/SwapIcon.tsx b/packages/lib/shared/components/icons/SwapIcon.tsx
new file mode 100644
index 000000000..5fa8b4148
--- /dev/null
+++ b/packages/lib/shared/components/icons/SwapIcon.tsx
@@ -0,0 +1,48 @@
+/* eslint-disable max-len */
+export function SwapIcon({ size = 24 }: { size?: number }) {
+  return (
+    <svg
+      viewBox="0 0 25 25"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+    >
+      <g clip-path="url(#clip0_1_5255)">
+        <path
+          d="M3.5 17.499H8.5L10.17 15.113M13.83 9.88602L15.5 7.49902H21.5"
+          stroke="#A0AEC0"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M18.5 4.49902L21.5 7.49902L18.5 10.499"
+          stroke="#A0AEC0"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M3.5 7.49902H8.5L15.5 17.499H21.5"
+          stroke="#A0AEC0"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M18.5 20.501L21.5 17.501L18.5 14.501"
+          stroke="#A0AEC0"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_1_5255">
+          <rect width="24" height="24" fill="white" transform="translate(0.5 0.5)" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}

From cfb77e5fe3084ab61066f0e9e08138bd00460ba3 Mon Sep 17 00:00:00 2001
From: Alberto Gualis <agualis@gmail.com>
Date: Wed, 16 Oct 2024 18:08:24 +0200
Subject: [PATCH 02/11] fix: swap icon

---
 packages/lib/modules/swap/SwapProvider.tsx    |  4 ---
 .../lib/shared/components/icons/SwapIcon.tsx  | 26 +++++++++----------
 2 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/packages/lib/modules/swap/SwapProvider.tsx b/packages/lib/modules/swap/SwapProvider.tsx
index fdea9b79e..fb1e40db2 100644
--- a/packages/lib/modules/swap/SwapProvider.tsx
+++ b/packages/lib/modules/swap/SwapProvider.tsx
@@ -472,10 +472,6 @@ export function _useSwap({ urlTxHash, ...pathParams }: PathParams) {
     setInitialTokenOut(tokenOut)
     setInitialAmounts(amountIn, amountOut)
 
-    if (isPoolSwap) {
-      setTokens(pathParams.poolTokens!)
-    }
-
     if (!swapState.tokenIn.address && !swapState.tokenOut.address) setDefaultTokens()
   }, [])
 
diff --git a/packages/lib/shared/components/icons/SwapIcon.tsx b/packages/lib/shared/components/icons/SwapIcon.tsx
index 5fa8b4148..e22790885 100644
--- a/packages/lib/shared/components/icons/SwapIcon.tsx
+++ b/packages/lib/shared/components/icons/SwapIcon.tsx
@@ -8,34 +8,34 @@ export function SwapIcon({ size = 24 }: { size?: number }) {
       width={size}
       height={size}
     >
-      <g clip-path="url(#clip0_1_5255)">
+      <g clipPath="url(#clip0_1_5255)">
         <path
           d="M3.5 17.499H8.5L10.17 15.113M13.83 9.88602L15.5 7.49902H21.5"
           stroke="#A0AEC0"
-          stroke-width="1.5"
-          stroke-linecap="round"
-          stroke-linejoin="round"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
         />
         <path
           d="M18.5 4.49902L21.5 7.49902L18.5 10.499"
           stroke="#A0AEC0"
-          stroke-width="1.5"
-          stroke-linecap="round"
-          stroke-linejoin="round"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
         />
         <path
           d="M3.5 7.49902H8.5L15.5 17.499H21.5"
           stroke="#A0AEC0"
-          stroke-width="1.5"
-          stroke-linecap="round"
-          stroke-linejoin="round"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
         />
         <path
           d="M18.5 20.501L21.5 17.501L18.5 14.501"
           stroke="#A0AEC0"
-          stroke-width="1.5"
-          stroke-linecap="round"
-          stroke-linejoin="round"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
         />
       </g>
       <defs>

From c20fdc96a94c048c3d60f0d42dda44bd79298c9e Mon Sep 17 00:00:00 2001
From: Alberto Gualis <agualis@gmail.com>
Date: Wed, 16 Oct 2024 18:19:37 +0200
Subject: [PATCH 03/11] fix: remove .vscode/settings.json from git cache

---
 .vscode/settings.json | 7 -------
 1 file changed, 7 deletions(-)
 delete mode 100644 .vscode/settings.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
deleted file mode 100644
index 44a73ec3a..000000000
--- a/.vscode/settings.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "eslint.workingDirectories": [
-    {
-      "mode": "auto"
-    }
-  ]
-}

From 8eef8650bfdd0aee5cb0a6e25c7940e384862f78 Mon Sep 17 00:00:00 2001
From: Alberto Gualis <agualis@gmail.com>
Date: Thu, 17 Oct 2024 12:15:48 +0200
Subject: [PATCH 04/11] chore: full width add liquidity button for mobile

---
 packages/lib/modules/pool/PoolDetail/PoolHeader/PoolHeader.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/lib/modules/pool/PoolDetail/PoolHeader/PoolHeader.tsx b/packages/lib/modules/pool/PoolDetail/PoolHeader/PoolHeader.tsx
index 18369650f..68fd6b2f0 100644
--- a/packages/lib/modules/pool/PoolDetail/PoolHeader/PoolHeader.tsx
+++ b/packages/lib/modules/pool/PoolDetail/PoolHeader/PoolHeader.tsx
@@ -57,12 +57,12 @@ export function PoolHeader() {
         <Stack spacing="md" direction={{ base: 'column', md: 'row' }}>
           <PoolCategories />
           <HStack spacing="sm">
-
             <Button
               onClick={handleClick}
               variant="primary"
               size="lg"
               isDisabled={isAddLiquidityBlocked}
+              w="full"
             >
               Add liquidity
             </Button>

From d7a1c7599a3b3788b090a74ae4689910a46ccda2 Mon Sep 17 00:00:00 2001
From: Alberto Gualis <agualis@gmail.com>
Date: Thu, 17 Oct 2024 12:24:54 +0200
Subject: [PATCH 05/11] chore: switch tokens in 2 tokens pool swap selection

---
 packages/lib/modules/swap/SwapForm.tsx | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/packages/lib/modules/swap/SwapForm.tsx b/packages/lib/modules/swap/SwapForm.tsx
index bb4372fd3..e413eaa88 100644
--- a/packages/lib/modules/swap/SwapForm.tsx
+++ b/packages/lib/modules/swap/SwapForm.tsx
@@ -41,6 +41,7 @@ import { useTokens } from '../tokens/TokensProvider'
 import { useIsPoolSwap } from './useIsPoolSwap'
 import { CompactTokenSelectModal } from '../tokens/TokenSelectModal/TokenSelectList/CompactTokenSelectModal'
 import { PoolSwapCard } from './PoolSwapCard'
+import { isSameAddress } from '@repo/lib/shared/utils/addresses'
 
 type Props = {
   redirectToPoolPage?: () => void // Only used for pool swaps
@@ -101,6 +102,22 @@ export function SwapForm({ redirectToPoolPage }: Props) {
     }
   }
 
+  function handleTokenSelectForPoolSwap(token: GqlToken) {
+    if (
+      tokens.length === 2 &&
+      tokenSelectKey === 'tokenIn' &&
+      isSameAddress(token.address, tokenOut.address)
+    )
+      return switchTokens()
+    if (
+      tokens.length === 2 &&
+      tokenSelectKey === 'tokenOut' &&
+      isSameAddress(token.address, tokenIn.address)
+    )
+      return switchTokens()
+    handleTokenSelect(token)
+  }
+
   function openTokenSelectModal(tokenSelectKey: 'tokenIn' | 'tokenOut') {
     setTokenSelectKey(tokenSelectKey)
     tokenSelectDisclosure.onOpen()
@@ -254,7 +271,7 @@ export function SwapForm({ redirectToPoolPage }: Props) {
           isOpen={tokenSelectDisclosure.isOpen}
           onOpen={tokenSelectDisclosure.onOpen}
           onClose={tokenSelectDisclosure.onClose}
-          onTokenSelect={handleTokenSelect}
+          onTokenSelect={handleTokenSelectForPoolSwap}
         />
       ) : (
         <TokenSelectModal

From dad2c9d4fefe1267a0c94018d9dfaf5bb6630535 Mon Sep 17 00:00:00 2001
From: Alberto Gualis <agualis@gmail.com>
Date: Thu, 17 Oct 2024 21:10:14 +0200
Subject: [PATCH 06/11] chore: refactor isPoolSwap

---
 .../app/(app)/swap/[[...slug]]/layout.tsx     |  7 ++++--
 .../app/(app)/swap/[[...slug]]/layout.tsx     |  7 +++++-
 packages/lib/modules/swap/SwapForm.tsx        | 10 ++++----
 packages/lib/modules/swap/SwapLayout.tsx      | 15 ++++++------
 packages/lib/modules/swap/SwapProvider.tsx    | 23 +++++++++++--------
 packages/lib/modules/swap/modal/SwapModal.tsx |  8 +++----
 ...useIsPoolSwap.tsx => useIsPoolSwapUrl.tsx} |  2 +-
 7 files changed, 43 insertions(+), 29 deletions(-)
 rename packages/lib/modules/swap/{useIsPoolSwap.tsx => useIsPoolSwapUrl.tsx} (80%)

diff --git a/apps/beets-frontend-v3/app/(app)/swap/[[...slug]]/layout.tsx b/apps/beets-frontend-v3/app/(app)/swap/[[...slug]]/layout.tsx
index 7f4cf9ffc..649842406 100644
--- a/apps/beets-frontend-v3/app/(app)/swap/[[...slug]]/layout.tsx
+++ b/apps/beets-frontend-v3/app/(app)/swap/[[...slug]]/layout.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { ChainSlug, slugToChainMap } from '@repo/lib/modules/pool/pool.utils'
-import { SwapProvider } from '@repo/lib/modules/swap/SwapProvider'
+import { SwapProps, SwapProvider } from '@repo/lib/modules/swap/SwapProvider'
 import { TokenBalancesProvider } from '@repo/lib/modules/tokens/TokenBalancesProvider'
 import { TokenInputsValidationProvider } from '@repo/lib/modules/tokens/TokenInputsValidationProvider'
 import { useTokens } from '@repo/lib/modules/tokens/TokensProvider'
@@ -25,6 +25,9 @@ export default function SwapLayout({ params: { slug }, children }: Props) {
     ? slugToChainMap[pathParams.chain as ChainSlug]
     : GqlChain.Mainnet
   const initTokens = getTokensByChain(initChain)
+  const props: SwapProps = {
+    pathParams,
+  }
 
   return (
     <DefaultPageContainer minH="100vh">
@@ -33,7 +36,7 @@ export default function SwapLayout({ params: { slug }, children }: Props) {
           <TokenInputsValidationProvider>
             <TokenBalancesProvider initTokens={initTokens}>
               <PriceImpactProvider>
-                <SwapProvider pathParams={{ ...pathParams }}>{children}</SwapProvider>
+                <SwapProvider params={props}>{children}</SwapProvider>
               </PriceImpactProvider>
             </TokenBalancesProvider>
           </TokenInputsValidationProvider>
diff --git a/apps/frontend-v3/app/(app)/swap/[[...slug]]/layout.tsx b/apps/frontend-v3/app/(app)/swap/[[...slug]]/layout.tsx
index fe3219541..d04737907 100644
--- a/apps/frontend-v3/app/(app)/swap/[[...slug]]/layout.tsx
+++ b/apps/frontend-v3/app/(app)/swap/[[...slug]]/layout.tsx
@@ -4,6 +4,7 @@ import { PropsWithChildren } from 'react'
 import { getSwapPathParams } from '@repo/lib/modules/swap/getSwapPathParams'
 import SwapLayout from '../../../../../../packages/lib/modules/swap/SwapLayout'
 import { DefaultPageContainer } from '@repo/lib/shared/components/containers/DefaultPageContainer'
+import { SwapProps } from '@repo/lib/modules/swap/SwapProvider'
 
 type Props = PropsWithChildren<{
   params: { slug?: string[] }
@@ -11,10 +12,14 @@ type Props = PropsWithChildren<{
 
 export default function Layout({ params: { slug }, children }: Props) {
   const pathParams = getSwapPathParams(slug)
+  const swapProps: SwapProps = {
+    pathParams,
+    isPoolSwap: true,
+  }
 
   return (
     <DefaultPageContainer minH="100vh">
-      <SwapLayout pathParams={pathParams}> {children} </SwapLayout>
+      <SwapLayout props={swapProps}> {children} </SwapLayout>
     </DefaultPageContainer>
   )
 }
diff --git a/packages/lib/modules/swap/SwapForm.tsx b/packages/lib/modules/swap/SwapForm.tsx
index e413eaa88..7416fb605 100644
--- a/packages/lib/modules/swap/SwapForm.tsx
+++ b/packages/lib/modules/swap/SwapForm.tsx
@@ -38,15 +38,18 @@ import { useUserAccount } from '../web3/UserAccountProvider'
 import { ConnectWallet } from '../web3/ConnectWallet'
 import { SafeAppAlert } from '@repo/lib/shared/components/alerts/SafeAppAlert'
 import { useTokens } from '../tokens/TokensProvider'
-import { useIsPoolSwap } from './useIsPoolSwap'
+import { useIsPoolSwapUrl } from './useIsPoolSwapUrl'
 import { CompactTokenSelectModal } from '../tokens/TokenSelectModal/TokenSelectList/CompactTokenSelectModal'
 import { PoolSwapCard } from './PoolSwapCard'
 import { isSameAddress } from '@repo/lib/shared/utils/addresses'
 
 type Props = {
+  isPoolSwap?: boolean
   redirectToPoolPage?: () => void // Only used for pool swaps
 }
-export function SwapForm({ redirectToPoolPage }: Props) {
+export function SwapForm({ redirectToPoolPage, isPoolSwap = false }: Props) {
+  const isPoolSwapUrl = useIsPoolSwapUrl()
+
   const {
     tokenIn,
     tokenOut,
@@ -79,7 +82,6 @@ export function SwapForm({ redirectToPoolPage }: Props) {
   const isMounted = useIsMounted()
   const { isConnected } = useUserAccount()
   const { startTokenPricePolling } = useTokens()
-  const isPoolSwap = useIsPoolSwap()
 
   const isLoadingSwaps = simulationQuery.isLoading
   const isLoading = isLoadingSwaps || !isMounted
@@ -132,7 +134,7 @@ export function SwapForm({ redirectToPoolPage }: Props) {
     if (swapTxHash) {
       resetSwapAmounts()
       transactionSteps.resetTransactionSteps()
-      if (isPoolSwap) return redirectToPoolPage?.()
+      if (isPoolSwapUrl) return redirectToPoolPage?.()
       replaceUrlPath()
     }
   }
diff --git a/packages/lib/modules/swap/SwapLayout.tsx b/packages/lib/modules/swap/SwapLayout.tsx
index 2915e37ef..f11749bf7 100644
--- a/packages/lib/modules/swap/SwapLayout.tsx
+++ b/packages/lib/modules/swap/SwapLayout.tsx
@@ -3,7 +3,7 @@
 import { ChainSlug, slugToChainMap } from '@repo/lib/modules/pool/pool.utils'
 import { PriceImpactProvider } from '@repo/lib/modules/price-impact/PriceImpactProvider'
 import { RelayerSignatureProvider } from '@repo/lib/modules/relayer/RelayerSignatureProvider'
-import { PathParams, SwapProvider } from '@repo/lib/modules/swap/SwapProvider'
+import { SwapProps, SwapProvider } from '@repo/lib/modules/swap/SwapProvider'
 import { TokenBalancesProvider } from '@repo/lib/modules/tokens/TokenBalancesProvider'
 import { TokenInputsValidationProvider } from '@repo/lib/modules/tokens/TokenInputsValidationProvider'
 import { useTokens } from '@repo/lib/modules/tokens/TokensProvider'
@@ -12,16 +12,15 @@ import { GqlChain } from '@repo/lib/shared/services/api/generated/graphql'
 import { PropsWithChildren } from 'react'
 
 type Props = PropsWithChildren<{
-  pathParams: PathParams
+  props: SwapProps
 }>
 
 // Layout shared by standard swap page (/swap) and pool swap page (/poolid/swap)
-export default function SwapLayout({ pathParams, children }: Props) {
+export default function SwapLayout({ props, children }: Props) {
+  const chain = props.pathParams.chain
   const { getTokensByChain } = useTokens()
-  const initChain = pathParams.chain
-    ? slugToChainMap[pathParams.chain as ChainSlug]
-    : GqlChain.Mainnet
-  const initTokens = pathParams.poolTokens || getTokensByChain(initChain)
+  const initChain = chain ? slugToChainMap[chain as ChainSlug] : GqlChain.Mainnet
+  const initTokens = props.poolTokens || getTokensByChain(initChain)
 
   return (
     <TransactionStateProvider>
@@ -29,7 +28,7 @@ export default function SwapLayout({ pathParams, children }: Props) {
         <TokenInputsValidationProvider>
           <TokenBalancesProvider initTokens={initTokens}>
             <PriceImpactProvider>
-              <SwapProvider pathParams={{ ...pathParams }}>{children}</SwapProvider>
+              <SwapProvider params={props}>{children}</SwapProvider>
             </PriceImpactProvider>
           </TokenBalancesProvider>
         </TokenInputsValidationProvider>
diff --git a/packages/lib/modules/swap/SwapProvider.tsx b/packages/lib/modules/swap/SwapProvider.tsx
index fb1e40db2..b1c542519 100644
--- a/packages/lib/modules/swap/SwapProvider.tsx
+++ b/packages/lib/modules/swap/SwapProvider.tsx
@@ -48,7 +48,7 @@ import { usePriceImpact } from '../price-impact/PriceImpactProvider'
 import { calcMarketPriceImpact } from '../price-impact/price-impact.utils'
 import { isAuraBalSwap } from './swap.helpers'
 import { AuraBalSwapHandler } from './handlers/AuraBalSwap.handler'
-import { useIsPoolSwap } from './useIsPoolSwap'
+import { useIsPoolSwapUrl } from './useIsPoolSwapUrl'
 
 export type UseSwapResponse = ReturnType<typeof _useSwap>
 export const SwapContext = createContext<UseSwapResponse | null>(null)
@@ -61,8 +61,6 @@ export type PathParams = {
   amountOut?: string
   // When urlTxHash is present the rest of the params above are not used
   urlTxHash?: Hash
-  // Only used by pool swap
-  poolTokens?: GqlToken[]
 }
 
 function selectSwapHandler(
@@ -85,8 +83,15 @@ function selectSwapHandler(
   return new DefaultSwapHandler(apolloClient)
 }
 
-export function _useSwap({ urlTxHash, ...pathParams }: PathParams) {
-  const isPoolSwap = useIsPoolSwap()
+export type SwapProps = {
+  pathParams: PathParams
+  isPoolSwap?: boolean
+  // Only used by pool swap
+  poolTokens?: GqlToken[]
+}
+export function _useSwap({ isPoolSwap = false, pathParams }: SwapProps) {
+  const urlTxHash = pathParams.urlTxHash
+  const isPoolSwapUrl = useIsPoolSwapUrl()
   const swapStateVar = useMakeVarPersisted<SwapState>(
     {
       tokenIn: {
@@ -339,7 +344,7 @@ export function _useSwap({ urlTxHash, ...pathParams }: PathParams) {
   }
 
   function replaceUrlPath() {
-    if (isPoolSwap) return // Avoid redirection when the swap is within a pool page
+    if (isPoolSwapUrl) return // Avoid redirection when the swap is within a pool page
     const { selectedChain, tokenIn, tokenOut, swapType } = swapState
     const { popularTokens } = networkConfig.tokens
     const chainSlug = chainToSlugMap[selectedChain]
@@ -581,11 +586,11 @@ export function _useSwap({ urlTxHash, ...pathParams }: PathParams) {
 }
 
 type Props = PropsWithChildren<{
-  pathParams: PathParams
+  params: SwapProps
 }>
 
-export function SwapProvider({ pathParams, children }: Props) {
-  const hook = _useSwap(pathParams)
+export function SwapProvider({ params, children }: Props) {
+  const hook = _useSwap(params)
   return <SwapContext.Provider value={hook}>{children}</SwapContext.Provider>
 }
 
diff --git a/packages/lib/modules/swap/modal/SwapModal.tsx b/packages/lib/modules/swap/modal/SwapModal.tsx
index ca9837117..d01d81c76 100644
--- a/packages/lib/modules/swap/modal/SwapModal.tsx
+++ b/packages/lib/modules/swap/modal/SwapModal.tsx
@@ -20,7 +20,7 @@ import { SwapSummary } from './SwapSummary'
 import { useSwapReceipt } from '../../transactions/transaction-steps/receipts/receipt.hooks'
 import { useUserAccount } from '../../web3/UserAccountProvider'
 import { useTokens } from '../../tokens/TokensProvider'
-import { useIsPoolSwap } from '../useIsPoolSwap'
+import { useIsPoolSwapUrl } from '../useIsPoolSwapUrl'
 
 type Props = {
   isOpen: boolean
@@ -35,7 +35,7 @@ export function SwapPreviewModal({
   finalFocusRef,
   ...rest
 }: Props & Omit<ModalProps, 'children'>) {
-  const isPoolSwap = useIsPoolSwap()
+  const isPoolSwapUrl = useIsPoolSwapUrl()
   const { isDesktop } = useBreakpoints()
   const initialFocusRef = useRef(null)
   const { userAddress } = useUserAccount()
@@ -61,7 +61,7 @@ export function SwapPreviewModal({
 
   useEffect(() => {
     if (!isWrap && swapTxHash && !window.location.pathname.includes(swapTxHash)) {
-      const url = isPoolSwap
+      const url = isPoolSwapUrl
         ? `${window.location.pathname}/${swapTxHash}`
         : `/swap/${chainToSlugMap[selectedChain]}/${swapTxHash}`
       window.history.pushState({}, '', url)
@@ -107,7 +107,7 @@ export function SwapPreviewModal({
         <ActionModalFooter
           isSuccess={!!swapTxHash && !swapReceipt.isLoading}
           currentStep={transactionSteps.currentStep}
-          returnLabel={isPoolSwap ? 'Return to pool' : 'Swap again'}
+          returnLabel={isPoolSwapUrl ? 'Return to pool' : 'Swap again'}
           returnAction={onClose}
           urlTxHash={urlTxHash}
         />
diff --git a/packages/lib/modules/swap/useIsPoolSwap.tsx b/packages/lib/modules/swap/useIsPoolSwapUrl.tsx
similarity index 80%
rename from packages/lib/modules/swap/useIsPoolSwap.tsx
rename to packages/lib/modules/swap/useIsPoolSwapUrl.tsx
index 503dfb002..0fa1b870b 100644
--- a/packages/lib/modules/swap/useIsPoolSwap.tsx
+++ b/packages/lib/modules/swap/useIsPoolSwapUrl.tsx
@@ -1,6 +1,6 @@
 import { usePathname } from 'next/navigation'
 
-export function useIsPoolSwap() {
+export function useIsPoolSwapUrl() {
   const pathname = usePathname()
   return pathname.includes('/pools') && pathname.includes('/swap')
 }

From 167ab046b9aea1387030be0fc5661882a6e60115 Mon Sep 17 00:00:00 2001
From: Alberto Gualis <agualis@gmail.com>
Date: Thu, 17 Oct 2024 21:27:20 +0200
Subject: [PATCH 07/11] chore: refactor swap provider props

---
 .../beets-frontend-v3/app/(app)/swap/[[...slug]]/layout.tsx | 4 ++--
 .../[chain]/[variant]/[id]/swap/[[...txHash]]/page.tsx      | 6 +++---
 apps/frontend-v3/app/(app)/swap/[[...slug]]/layout.tsx      | 5 ++---
 packages/lib/modules/swap/SwapLayout.tsx                    | 4 ++--
 packages/lib/modules/swap/SwapProvider.tsx                  | 6 +++---
 5 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/apps/beets-frontend-v3/app/(app)/swap/[[...slug]]/layout.tsx b/apps/beets-frontend-v3/app/(app)/swap/[[...slug]]/layout.tsx
index 649842406..573d6f529 100644
--- a/apps/beets-frontend-v3/app/(app)/swap/[[...slug]]/layout.tsx
+++ b/apps/beets-frontend-v3/app/(app)/swap/[[...slug]]/layout.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { ChainSlug, slugToChainMap } from '@repo/lib/modules/pool/pool.utils'
-import { SwapProps, SwapProvider } from '@repo/lib/modules/swap/SwapProvider'
+import { SwapProviderProps, SwapProvider } from '@repo/lib/modules/swap/SwapProvider'
 import { TokenBalancesProvider } from '@repo/lib/modules/tokens/TokenBalancesProvider'
 import { TokenInputsValidationProvider } from '@repo/lib/modules/tokens/TokenInputsValidationProvider'
 import { useTokens } from '@repo/lib/modules/tokens/TokensProvider'
@@ -25,7 +25,7 @@ export default function SwapLayout({ params: { slug }, children }: Props) {
     ? slugToChainMap[pathParams.chain as ChainSlug]
     : GqlChain.Mainnet
   const initTokens = getTokensByChain(initChain)
-  const props: SwapProps = {
+  const props: SwapProviderProps = {
     pathParams,
   }
 
diff --git a/apps/frontend-v3/app/(app)/pools/[chain]/[variant]/[id]/swap/[[...txHash]]/page.tsx b/apps/frontend-v3/app/(app)/pools/[chain]/[variant]/[id]/swap/[[...txHash]]/page.tsx
index 40530854d..adedf1f6d 100644
--- a/apps/frontend-v3/app/(app)/pools/[chain]/[variant]/[id]/swap/[[...txHash]]/page.tsx
+++ b/apps/frontend-v3/app/(app)/pools/[chain]/[variant]/[id]/swap/[[...txHash]]/page.tsx
@@ -7,7 +7,7 @@ import { chainToSlugMap } from '@repo/lib/modules/pool/pool.utils'
 import { usePool } from '@repo/lib/modules/pool/PoolProvider'
 import { SwapForm } from '@repo/lib/modules/swap/SwapForm'
 import SwapLayout from '@repo/lib/modules/swap/SwapLayout'
-import { PathParams } from '@repo/lib/modules/swap/SwapProvider'
+import { PathParams, SwapProviderProps } from '@repo/lib/modules/swap/SwapProvider'
 import { useTokens } from '@repo/lib/modules/tokens/TokensProvider'
 import { Hash } from 'viem'
 
@@ -28,14 +28,14 @@ export default function PoolSwapPage({ params: { txHash } }: Props) {
     chain: chainToSlugMap[pool.chain],
     tokenIn: poolTokens[0].address,
     tokenOut: poolTokens[1].address,
-    poolTokens,
     urlTxHash: maybeTxHash,
   }
+  const props: SwapProviderProps = { pathParams, isPoolSwap: true, poolTokens }
 
   return (
     <PoolActionsLayout>
       {isLoading ? null : (
-        <SwapLayout pathParams={pathParams}>
+        <SwapLayout props={props}>
           <SwapForm redirectToPoolPage={redirectToPoolPage} />
         </SwapLayout>
       )}
diff --git a/apps/frontend-v3/app/(app)/swap/[[...slug]]/layout.tsx b/apps/frontend-v3/app/(app)/swap/[[...slug]]/layout.tsx
index d04737907..27c3157ad 100644
--- a/apps/frontend-v3/app/(app)/swap/[[...slug]]/layout.tsx
+++ b/apps/frontend-v3/app/(app)/swap/[[...slug]]/layout.tsx
@@ -4,7 +4,7 @@ import { PropsWithChildren } from 'react'
 import { getSwapPathParams } from '@repo/lib/modules/swap/getSwapPathParams'
 import SwapLayout from '../../../../../../packages/lib/modules/swap/SwapLayout'
 import { DefaultPageContainer } from '@repo/lib/shared/components/containers/DefaultPageContainer'
-import { SwapProps } from '@repo/lib/modules/swap/SwapProvider'
+import { SwapProviderProps } from '@repo/lib/modules/swap/SwapProvider'
 
 type Props = PropsWithChildren<{
   params: { slug?: string[] }
@@ -12,9 +12,8 @@ type Props = PropsWithChildren<{
 
 export default function Layout({ params: { slug }, children }: Props) {
   const pathParams = getSwapPathParams(slug)
-  const swapProps: SwapProps = {
+  const swapProps: SwapProviderProps = {
     pathParams,
-    isPoolSwap: true,
   }
 
   return (
diff --git a/packages/lib/modules/swap/SwapLayout.tsx b/packages/lib/modules/swap/SwapLayout.tsx
index f11749bf7..530d16a62 100644
--- a/packages/lib/modules/swap/SwapLayout.tsx
+++ b/packages/lib/modules/swap/SwapLayout.tsx
@@ -3,7 +3,7 @@
 import { ChainSlug, slugToChainMap } from '@repo/lib/modules/pool/pool.utils'
 import { PriceImpactProvider } from '@repo/lib/modules/price-impact/PriceImpactProvider'
 import { RelayerSignatureProvider } from '@repo/lib/modules/relayer/RelayerSignatureProvider'
-import { SwapProps, SwapProvider } from '@repo/lib/modules/swap/SwapProvider'
+import { SwapProviderProps, SwapProvider } from '@repo/lib/modules/swap/SwapProvider'
 import { TokenBalancesProvider } from '@repo/lib/modules/tokens/TokenBalancesProvider'
 import { TokenInputsValidationProvider } from '@repo/lib/modules/tokens/TokenInputsValidationProvider'
 import { useTokens } from '@repo/lib/modules/tokens/TokensProvider'
@@ -12,7 +12,7 @@ import { GqlChain } from '@repo/lib/shared/services/api/generated/graphql'
 import { PropsWithChildren } from 'react'
 
 type Props = PropsWithChildren<{
-  props: SwapProps
+  props: SwapProviderProps
 }>
 
 // Layout shared by standard swap page (/swap) and pool swap page (/poolid/swap)
diff --git a/packages/lib/modules/swap/SwapProvider.tsx b/packages/lib/modules/swap/SwapProvider.tsx
index b1c542519..7e7826d52 100644
--- a/packages/lib/modules/swap/SwapProvider.tsx
+++ b/packages/lib/modules/swap/SwapProvider.tsx
@@ -83,13 +83,13 @@ function selectSwapHandler(
   return new DefaultSwapHandler(apolloClient)
 }
 
-export type SwapProps = {
+export type SwapProviderProps = {
   pathParams: PathParams
   isPoolSwap?: boolean
   // Only used by pool swap
   poolTokens?: GqlToken[]
 }
-export function _useSwap({ isPoolSwap = false, pathParams }: SwapProps) {
+export function _useSwap({ isPoolSwap = false, pathParams }: SwapProviderProps) {
   const urlTxHash = pathParams.urlTxHash
   const isPoolSwapUrl = useIsPoolSwapUrl()
   const swapStateVar = useMakeVarPersisted<SwapState>(
@@ -586,7 +586,7 @@ export function _useSwap({ isPoolSwap = false, pathParams }: SwapProps) {
 }
 
 type Props = PropsWithChildren<{
-  params: SwapProps
+  params: SwapProviderProps
 }>
 
 export function SwapProvider({ params, children }: Props) {

From 264dcb4de2a635ea9c5cd517a9a18affbde2ff1f Mon Sep 17 00:00:00 2001
From: Alberto Gualis <agualis@gmail.com>
Date: Thu, 17 Oct 2024 22:04:36 +0200
Subject: [PATCH 08/11] chore: expose isPoolSwap from provider

---
 packages/lib/modules/swap/SwapForm.tsx     | 4 ++--
 packages/lib/modules/swap/SwapProvider.tsx | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/lib/modules/swap/SwapForm.tsx b/packages/lib/modules/swap/SwapForm.tsx
index 7416fb605..e8b660a13 100644
--- a/packages/lib/modules/swap/SwapForm.tsx
+++ b/packages/lib/modules/swap/SwapForm.tsx
@@ -44,10 +44,9 @@ import { PoolSwapCard } from './PoolSwapCard'
 import { isSameAddress } from '@repo/lib/shared/utils/addresses'
 
 type Props = {
-  isPoolSwap?: boolean
   redirectToPoolPage?: () => void // Only used for pool swaps
 }
-export function SwapForm({ redirectToPoolPage, isPoolSwap = false }: Props) {
+export function SwapForm({ redirectToPoolPage }: Props) {
   const isPoolSwapUrl = useIsPoolSwapUrl()
 
   const {
@@ -63,6 +62,7 @@ export function SwapForm({ redirectToPoolPage, isPoolSwap = false }: Props) {
     swapAction,
     swapTxHash,
     transactionSteps,
+    isPoolSwap,
     setSelectedChain,
     setTokenInAmount,
     setTokenOutAmount,
diff --git a/packages/lib/modules/swap/SwapProvider.tsx b/packages/lib/modules/swap/SwapProvider.tsx
index 7e7826d52..cd6c1473d 100644
--- a/packages/lib/modules/swap/SwapProvider.tsx
+++ b/packages/lib/modules/swap/SwapProvider.tsx
@@ -572,6 +572,7 @@ export function _useSwap({ isPoolSwap = false, pathParams }: SwapProviderProps)
     hasQuoteContext,
     isWrap,
     swapTxConfirmed,
+    isPoolSwap,
     replaceUrlPath,
     resetSwapAmounts,
     setTokenSelectKey,

From f2e80e04383d52fc1634906b466058b9b610e10f Mon Sep 17 00:00:00 2001
From: Alberto Gualis <agualis@gmail.com>
Date: Fri, 18 Oct 2024 16:17:07 +0200
Subject: [PATCH 09/11] chore: hide PoolAdvanced options

---
 .../lib/modules/pool/PoolDetail/PoolHeader/PoolHeader.tsx   | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/lib/modules/pool/PoolDetail/PoolHeader/PoolHeader.tsx b/packages/lib/modules/pool/PoolDetail/PoolHeader/PoolHeader.tsx
index 68fd6b2f0..4bb40667b 100644
--- a/packages/lib/modules/pool/PoolDetail/PoolHeader/PoolHeader.tsx
+++ b/packages/lib/modules/pool/PoolDetail/PoolHeader/PoolHeader.tsx
@@ -13,7 +13,7 @@ import {
 } from '@repo/lib/shared/components/modals/PartnerRedirectModal'
 import { useState } from 'react'
 import { getXavePoolLink } from '../../pool.utils'
-import { PoolAdvancedOptions } from './PoolAdvancedOptions'
+// import { PoolAdvancedOptions } from './PoolAdvancedOptions'
 
 export function PoolHeader() {
   const pathname = usePathname()
@@ -66,7 +66,11 @@ export function PoolHeader() {
             >
               Add liquidity
             </Button>
+
+            {/*
+            Will be enabled when pool swaps handler is implemented:
             <PoolAdvancedOptions />
+            */}
           </HStack>
           <PartnerRedirectModal
             partner={redirectPartner}

From 85091fee5324b1b176a2bf29c3188669aab64a33 Mon Sep 17 00:00:00 2001
From: Alberto Gualis <agualis@gmail.com>
Date: Fri, 18 Oct 2024 16:20:49 +0200
Subject: [PATCH 10/11] chore: recover settings.json

---
 .vscode/settings.json | 10 ++++++++++
 1 file changed, 10 insertions(+)
 create mode 100644 .vscode/settings.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 000000000..793f23e53
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,10 @@
+{
+  "eslint.workingDirectories": [
+    {
+      "mode": "auto"
+    }
+  ],
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
+}
\ No newline at end of file

From 0c1f8e63d116905a6cf0b39246b3460799ec3b67 Mon Sep 17 00:00:00 2001
From: Alberto Gualis <agualis@gmail.com>
Date: Fri, 18 Oct 2024 16:21:33 +0200
Subject: [PATCH 11/11] chore: add new line

---
 .vscode/settings.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 793f23e53..ea1afb54e 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -7,4 +7,4 @@
   "[typescriptreact]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   }
-}
\ No newline at end of file
+}