feat(#564): Improve Liquidity Section

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

package.json

@@ -40,6 +40,7 @@
     "@soroban-react/xbull": "9.3.0",
     "@stellar/freighter-api": "1.7.1",
     "@stellar/stellar-sdk": "12.2.0",
+    "@tanstack/react-query": "^5.60.2",
     "@types/qs": "^6.9.7",
     "@types/react": "18.2.33",
     "@types/react-dom": "18.2.14",
@@ -73,7 +74,7 @@
     "react-window": "^1.8.9",
     "redux": "^4.2.1",
     "soroswap-router-sdk": "1.4.6",
-    "soroswap-ui": "^1.0.0",
+    "soroswap-ui": "^1.1.0",
     "swr": "^2.2.0",
     "typescript": "5.3.3",
     "use-resize-observer": "^9.1.0"
@@ -105,4 +106,4 @@
       "src"
     ]
   }
-}
+}

pages/_app.tsx

@@ -2,11 +2,24 @@ import type { AppProps } from 'next/app';
 import '../styles/globals.css';
 
 import Providers from 'components/Providers/Providers';
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchInterval: Infinity,
+      staleTime: Infinity,
+      refetchOnWindowFocus: false,
+    },
+  },
+});
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
+    <QueryClientProvider client={queryClient}>
     <Providers>
       <Component {...pageProps} />
     </Providers>
+    </QueryClientProvider>
   );
 }

pages/liquidity/add/index.tsx → pages/pools/add/index.tsx

@@ -12,7 +12,7 @@ export default function AddLiquidityPage() {
     if (!tokens) return;
 
     const xlm = tokens.find((token) => token.code === 'XLM');
-    if (xlm) router.push(`/liquidity/add/${xlm.contract}`);
+    if (xlm) router.push(`/pools/add/${xlm.contract}`);
   }, [tokens, router]);
 
   return (

pages/liquidity/index.tsx → pages/pools/index.tsx

@@ -18,13 +18,19 @@ import { useContext, useState } from 'react';
 import SEO from '../../src/components/SEO';
 import { DEFAULT_SLIPPAGE_INPUT_VALUE } from 'components/Settings/MaxSlippageSettings';
 
+import { useQueryPools } from '../../src/hooks/pools';
+import PoolsTable from '../../src/components/pools-table/pools-table'; 
+
 const PageWrapper = styled(AutoColumn)`
   position: relative;
-  background: ${({ theme }) => `linear-gradient(${theme.palette.customBackground.bg2}, ${theme.palette.customBackground.bg2
-    }) padding-box,
-              linear-gradient(150deg, rgba(136,102,221,1) 0%, rgba(${theme.palette.mode == 'dark' ? '33,29,50,1' : '255,255,255,1'
-    }) 35%, rgba(${theme.palette.mode == 'dark' ? '33,29,50,1' : '255,255,255,1'
-    }) 65%, rgba(136,102,221,1) 100%) border-box`};
+  background: ${({ theme }) => `linear-gradient(${theme.palette.customBackground.bg2}, ${
+    theme.palette.customBackground.bg2
+  }) padding-box,
+              linear-gradient(150deg, rgba(136,102,221,1) 0%, rgba(${
+                theme.palette.mode == 'dark' ? '33,29,50,1' : '255,255,255,1'
+              }) 35%, rgba(${
+                theme.palette.mode == 'dark' ? '33,29,50,1' : '255,255,255,1'
+              }) 65%, rgba(136,102,221,1) 100%) border-box`};
   border: 1px solid transparent;
   border-radius: 16px;
   padding: 32px;
@@ -76,6 +82,16 @@ const StatusWrapper = styled('div')`
   border-radius: 16px;
 `;
 
+const Container = styled('div')`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+  width: 100%;
+  max-width: 875px;
+  margin: 0 auto;
+`;
+
 export default function LiquidityPage() {
   const sorobanContext = useSorobanReact();
   const { address } = sorobanContext;
@@ -90,6 +106,7 @@ export default function LiquidityPage() {
   const isCreate = false;
 
   const { lpTokens, isLoading, mutate } = useGetLpTokens();
+  const { data: pools, isLoading: isLoadingPools } = useQueryPools(); 
 
   const [isModalOpen, setModalOpen] = useState<boolean>(false);
   const [selectedLP, setSelectedLP] = useState<LpTokensObj>();
@@ -101,7 +118,8 @@ export default function LiquidityPage() {
 
   return (
     <>
-      <SEO title="Liquidity - Soroswap" description="Soroswap Liquidity Pool" />
+    <Container>
+      <SEO title="Pools - Soroswap" description="Soroswap Liquidity Pool" />
       <PageWrapper>
         <div style={{ width: '100%' }}>
           <AutoRow style={{ justifyContent: 'space-between' }}>
@@ -154,18 +172,27 @@ export default function LiquidityPage() {
           </LPTokensContainer>
         )}
         {address ? (
-          <ButtonPrimary onClick={() => router.push('/liquidity/add')}>
+          <ButtonPrimary onClick={() => router.push('/pools/add')}>
             + Add Liquidity
           </ButtonPrimary>
         ) : (
           <WalletButton />
         )}
       </PageWrapper>
+
+      <div style={{ width: '100%' }}>
+        <AutoRow style={{ marginBottom: '16px' }}>
+          <SubHeader>All Pools</SubHeader>
+        </AutoRow>
+        <PoolsTable rows={pools || []} isLoading={isLoadingPools} />
+      </div>
+
       <LiquidityPoolInfoModal
         selectedLP={selectedLP}
         isOpen={isModalOpen}
         onDismiss={() => setModalOpen(false)}
       />
+      </Container>
     </>
   );
 }

src/components/Liquidity/Add/AddLiquidityComponent.tsx

@@ -271,7 +271,7 @@ export default function AddLiquidityComponent({
     handleAddLiquidity,
   ]);
 
-  const baseRoute = `/liquidity/add/`;
+  const baseRoute = `/pools/add/`;
 
   const handleCurrencyASelect = useCallback(
     (currencyA: TokenType) => {

src/components/Liquidity/LiquidityPoolInfoModal.tsx

@@ -37,12 +37,12 @@ export default function LiquidityPoolInfoModal({
   if (!selectedLP) return null;
 
   const handleAddClick = () => {
-    router.push(`/liquidity/add/${selectedLP.token_0?.contract}/${selectedLP.token_1?.contract}`);
+    router.push(`/pools/add/${selectedLP.token_0?.contract}/${selectedLP.token_1?.contract}`);
   };
 
   const handleRemoveClick = () => {
     router.push(
-      `/liquidity/remove/${selectedLP.token_0?.contract}/${selectedLP.token_1?.contract}`,
+      `/pools/remove/${selectedLP.token_0?.contract}/${selectedLP.token_1?.contract}`,
     );
   };