✨Feature: Pools page

cypress/component/liquidity.test.tsx

@@ -1,7 +1,7 @@
 import '../../styles/globals.css';
 import MockRouter from '../utils/router';
 import Providers from 'components/Providers/Providers';
-import AddLiquidityComponent from 'components/Liquidity/Add/AddLiquidityComponent';
+import AddLiquidityComponent from 'components/Pools/Add/AddLiquidityComponent';
 import { mockedFreighterConnector, sleep, testnetXLM } from '../utils/utils';
 import { useApiTokens } from 'hooks/tokens/useApiTokens';
 

cypress/e2e/flows.test.ts

@@ -253,9 +253,9 @@ describe('Navigation flow', () => {
     cy.visit('/');
     cy.get('[data-testid="navbar__container"]').click();
     // cy.wait(1500);
-    cy.contains('Liquidity').click();
+    cy.contains('Pools').click();
     // cy.wait(3000);
-    cy.contains('List of your liquidity positions');
+    cy.contains('Liquidity pools');
   });
   it('should navigate to bridge', () => {
     cy.visit('/');

package.json

@@ -73,7 +73,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"

pages/liquidity/add/[...tokens].tsx → pages/pools/add/[...tokens].tsx

@@ -1,5 +1,5 @@
 import { useSorobanReact } from '@soroban-react/core';
-import AddLiquidityComponent from 'components/Liquidity/Add/AddLiquidityComponent';
+import AddLiquidityComponent from 'components/Pools/Add/AddLiquidityComponent';
 import SEO from 'components/SEO';
 import { xlmTokenList } from 'constants/xlmToken';
 import { useRouter } from 'next/router';

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

@@ -1,4 +1,4 @@
-import AddLiquidityComponent from 'components/Liquidity/Add/AddLiquidityComponent';
+import AddLiquidityComponent from 'components/Pools/Add/AddLiquidityComponent';
 import SEO from 'components/SEO';
 import { useApiTokens } from 'hooks/tokens/useApiTokens';
 import { useRouter } from 'next/router';
@@ -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

@@ -3,8 +3,8 @@ import { useSorobanReact } from '@soroban-react/core';
 import { ButtonPrimary } from 'components/Buttons/Button';
 import { WalletButton } from 'components/Buttons/WalletButton';
 import { AutoColumn } from 'components/Column';
-import LiquidityPoolInfoModal from 'components/Liquidity/LiquidityPoolInfoModal';
-import { LPPercentage } from 'components/Liquidity/styleds';
+import LiquidityPoolInfoModal from 'components/Pools/LiquidityPoolInfoModal';
+import { LPPercentage } from 'components/Pools/styleds';
 import CurrencyLogo from 'components/Logo/CurrencyLogo';
 import { Dots } from 'components/Pool/styleds';
 import { AutoRow } from 'components/Row';
@@ -18,6 +18,9 @@ import { useContext, useState } from 'react';
 import SEO from '../../src/components/SEO';
 import { DEFAULT_SLIPPAGE_INPUT_VALUE } from 'components/Settings/MaxSlippageSettings';
 
+import { PoolsTable } from 'components/Pools/PoolsTable';
+
+
 const PageWrapper = styled(AutoColumn)`
   position: relative;
   background: ${({ theme }) => `linear-gradient(${theme.palette.customBackground.bg2}, ${theme.palette.customBackground.bg2
@@ -29,8 +32,8 @@ const PageWrapper = styled(AutoColumn)`
   border-radius: 16px;
   padding: 32px;
   transition: transform 250ms ease;
-  max-width: 875px;
-  width: 100%;
+  max-width: 99vw;
+  width: 95vw;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -76,6 +79,7 @@ const StatusWrapper = styled('div')`
   border-radius: 16px;
 `;
 
+
 export default function LiquidityPage() {
   const sorobanContext = useSorobanReact();
   const { address } = sorobanContext;
@@ -102,15 +106,19 @@ export default function LiquidityPage() {
   return (
     <>
       <SEO title="Liquidity - Soroswap" description="Soroswap Liquidity Pool" />
-      <PageWrapper>
+      <PageWrapper style={{ width: '99vw' }}>
         <div style={{ width: '100%' }}>
           <AutoRow style={{ justifyContent: 'space-between' }}>
-            <SubHeader>Your liquidity</SubHeader>
-            <SettingsTab autoSlippage={DEFAULT_SLIPPAGE_INPUT_VALUE} />
+            <SubHeader>Liquidity Pools</SubHeader>
+            {address ? (
+              <ButtonPrimary style={{ width: 200 }} onClick={() => router.push('/pools/add')}>
+                + Add Liquidity
+              </ButtonPrimary>
+            ) : (
+              <WalletButton style={{ width: 200 }} />
+            )}
           </AutoRow>
-          <div>
-            <BodySmall>List of your liquidity positions</BodySmall>
-          </div>
+          <PoolsTable />
         </div>
         {!address ? (
           <LPTokensContainer>
@@ -128,6 +136,13 @@ export default function LiquidityPage() {
           </LPTokensContainer>
         ) : lpTokens && lpTokens?.length > 0 ? (
           <LPTokensContainer>
+                <AutoRow style={{ justifyContent: 'space-between' }} mt={4}>
+                  <SubHeader>Your liquidity</SubHeader>
+                  <SettingsTab autoSlippage={DEFAULT_SLIPPAGE_INPUT_VALUE} />
+                </AutoRow>
+                <div>
+                  <BodySmall>List of your liquidity positions</BodySmall>
+                </div>
             {lpTokens.map((obj: any, index: number) => (
               <LPCard onClick={() => handleLPClick(obj)} key={index}>
                 <AutoRow gap={'2px'}>
@@ -154,7 +169,7 @@ export default function LiquidityPage() {
           </LPTokensContainer>
         )}
         {address ? (
-          <ButtonPrimary onClick={() => router.push('/liquidity/add')}>
+          <ButtonPrimary onClick={() => router.push('/pools/add')}>
             + Add Liquidity
           </ButtonPrimary>
         ) : (

pages/liquidity/remove/[...tokens].tsx → pages/pools/remove/[...tokens].tsx

@@ -1,4 +1,4 @@
-import RemoveLiquidityComponent from "components/Liquidity/Remove/RemoveLiquidityComponent";
+import RemoveLiquidityComponent from "components/Pools/Remove/RemoveLiquidityComponent";
 import SEO from "components/SEO";
 
 export default function MintPage() {

src/components/Bridge/BridgeConfirmModal.tsx

@@ -14,8 +14,8 @@ import { ButtonPrimary } from 'components/Buttons/Button';
 import { CloseButton } from 'components/Buttons/CloseButton';
 import { AutoColumn } from 'components/Column';
 import CopyTxHash from 'components/CopyTxHash/CopyTxHash';
-import { DetailRowValue } from 'components/Liquidity/Add/AddModalFooter';
-import { Label } from 'components/Liquidity/Add/AddModalHeader';
+import { DetailRowValue } from 'components/Pools/Add/AddModalFooter';
+import { Label } from 'components/Pools/Add/AddModalHeader';
 import {
   AnimatedEntranceConfirmationIcon,
   LoadingIndicatorOverlay,

src/components/Liquidity/Add/AddLiquidityComponent.tsx → src/components/Pools/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/AddRemoveHeader.tsx → src/components/Pools/AddRemoveHeader.tsx

@@ -87,7 +87,7 @@ export function AddRemoveTabs({
     <Tabs>
       <RowBetween style={{ padding: '1rem 1rem 0 1rem' }}>
         <StyledHistoryLink
-          href={'/liquidity'}
+          href={'/pools'}
           // onClick={() => {
           //   if (adding) {
           //     // not 100% sure both of these are needed

src/components/Liquidity/LiquidityPoolInfoModal.tsx → src/components/Pools/LiquidityPoolInfoModal.tsx

@@ -12,7 +12,7 @@ import { formatTokenAmount } from 'helpers/format';
 import { useRouter } from 'next/router';
 import { LPPercentage } from './styleds';
 
-const ContentWrapper = styled('div')<{ isMobile: boolean }>`
+const ContentWrapper = styled('div') <{ isMobile: boolean }>`
   display: flex;
   flex-direction: column;
   gap: 24px;
@@ -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}`,
     );
   };