From 813a9e2430b723e4fb915406be01f19c83ca3c6d Mon Sep 17 00:00:00 2001 From: Alberto Gualis Date: Tue, 21 Jan 2025 14:51:54 +0100 Subject: [PATCH] refactor: extract duplicated code into lib (some liquidity pages and layouts) (#461) * refactor: extract duplicated code into RemoveLiquidityPage * refactor: extract AddLiquidityPage * refactor: extract PoolLayout * refactor: extract AddLiquidityLayout * refactor: extract PoolsPage shared page * show pool symbol or This --------- Co-authored-by: groninge --- .../add-liquidity/[[...txHash]]/layout.tsx | 50 +----------- .../[id]/add-liquidity/[[...txHash]]/page.tsx | 12 +-- .../pools/[chain]/[variant]/[id]/layout.tsx | 81 +++---------------- .../remove-liquidity/[[...txHash]]/page.tsx | 33 +------- .../app/(app)/pools/page.tsx | 53 ++---------- .../add-liquidity/[[...txHash]]/layout.tsx | 49 +---------- .../[id]/add-liquidity/[[...txHash]]/page.tsx | 12 +-- .../pools/[chain]/[variant]/[id]/layout.tsx | 81 +++---------------- .../remove-liquidity/[[...txHash]]/page.tsx | 33 +------- apps/frontend-v3/app/(app)/pools/page.tsx | 53 ++---------- .../lib/shared/layouts/AddLiquidityLayout.tsx | 57 +++++++++++++ packages/lib/shared/layouts/PoolLayout.tsx | 81 +++++++++++++++++++ .../lib/shared/pages/AddLiquidityPage.tsx | 13 +++ packages/lib/shared/pages/PoolsPage.tsx | 52 ++++++++++++ .../lib/shared/pages/RemoveLiquidityPage.tsx | 38 +++++++++ 15 files changed, 291 insertions(+), 407 deletions(-) create mode 100644 packages/lib/shared/layouts/AddLiquidityLayout.tsx create mode 100644 packages/lib/shared/layouts/PoolLayout.tsx create mode 100644 packages/lib/shared/pages/AddLiquidityPage.tsx create mode 100644 packages/lib/shared/pages/PoolsPage.tsx create mode 100644 packages/lib/shared/pages/RemoveLiquidityPage.tsx diff --git a/apps/beets-frontend-v3/app/(app)/pools/[chain]/[variant]/[id]/add-liquidity/[[...txHash]]/layout.tsx b/apps/beets-frontend-v3/app/(app)/pools/[chain]/[variant]/[id]/add-liquidity/[[...txHash]]/layout.tsx index b5f9d70e3..6ebc45150 100644 --- a/apps/beets-frontend-v3/app/(app)/pools/[chain]/[variant]/[id]/add-liquidity/[[...txHash]]/layout.tsx +++ b/apps/beets-frontend-v3/app/(app)/pools/[chain]/[variant]/[id]/add-liquidity/[[...txHash]]/layout.tsx @@ -1,56 +1,12 @@ 'use client' -import { isNotSupported, shouldBlockAddLiquidity } from '@repo/lib/modules/pool/pool.helpers' -import { usePool } from '@repo/lib/modules/pool/PoolProvider' -import { RelayerSignatureProvider } from '@repo/lib/modules/relayer/RelayerSignatureProvider' -import { TokenInputsValidationProvider } from '@repo/lib/modules/tokens/TokenInputsValidationProvider' -import { PriceImpactProvider } from '@repo/lib/modules/price-impact/PriceImpactProvider' -import { Alert } from '@chakra-ui/react' -import { TransactionStateProvider } from '@repo/lib/modules/transactions/transaction-steps/TransactionStateProvider' +import { AddLiquidityLayout } from '@repo/lib/shared/layouts/AddLiquidityLayout' import { PropsWithChildren } from 'react' -import { isHash } from 'viem' -import { usePoolRedirect } from '@repo/lib/modules/pool/pool.hooks' -import { DefaultPageContainer } from '@repo/lib/shared/components/containers/DefaultPageContainer' -import { AddLiquidityProvider } from '@repo/lib/modules/pool/actions/add-liquidity/AddLiquidityProvider' -import { Permit2SignatureProvider } from '@repo/lib/modules/tokens/approvals/permit2/Permit2SignatureProvider' -import { PROJECT_CONFIG } from '@repo/lib/config/getProjectConfig' type Props = PropsWithChildren<{ params: { txHash?: string[] } }> -export default function AddLiquidityLayout({ params: { txHash }, children }: Props) { - const { pool } = usePool() - const { redirectToPoolPage } = usePoolRedirect(pool) - - const maybeTxHash = txHash?.[0] || '' - const urlTxHash = isHash(maybeTxHash) ? maybeTxHash : undefined - - if (shouldBlockAddLiquidity(pool)) { - return redirectToPoolPage() - } - - if (isNotSupported(pool)) { - return ( - - {`This pool type is not currently supported in the ${PROJECT_CONFIG.projectName} UI`} - - ) - } - - return ( - - - - - - - {children} - - - - - - - ) +export default function AddLiquidityLayoutWrapper({ params: { txHash }, children }: Props) { + return {children} } diff --git a/apps/beets-frontend-v3/app/(app)/pools/[chain]/[variant]/[id]/add-liquidity/[[...txHash]]/page.tsx b/apps/beets-frontend-v3/app/(app)/pools/[chain]/[variant]/[id]/add-liquidity/[[...txHash]]/page.tsx index 4df8dcd51..1dffd350a 100644 --- a/apps/beets-frontend-v3/app/(app)/pools/[chain]/[variant]/[id]/add-liquidity/[[...txHash]]/page.tsx +++ b/apps/beets-frontend-v3/app/(app)/pools/[chain]/[variant]/[id]/add-liquidity/[[...txHash]]/page.tsx @@ -1,13 +1,7 @@ 'use client' -import { PoolActionsLayout } from '@repo/lib/modules/pool/actions/PoolActionsLayout' -import { AddLiquidityForm } from '@repo/lib/modules/pool/actions/add-liquidity/form/AddLiquidityForm' +import { AddLiquidityPage } from '@repo/lib/shared/pages/AddLiquidityPage' -export default function AddLiquidityPage() { - // ./layout.tsx defines UI and state that is shared by this page and the nested /add-liquidity/[txHash] receipt page - return ( - - - - ) +export default function AddLiquidityWrapper() { + return } diff --git a/apps/beets-frontend-v3/app/(app)/pools/[chain]/[variant]/[id]/layout.tsx b/apps/beets-frontend-v3/app/(app)/pools/[chain]/[variant]/[id]/layout.tsx index b6faecf7f..726712105 100644 --- a/apps/beets-frontend-v3/app/(app)/pools/[chain]/[variant]/[id]/layout.tsx +++ b/apps/beets-frontend-v3/app/(app)/pools/[chain]/[variant]/[id]/layout.tsx @@ -1,81 +1,20 @@ /* eslint-disable max-len */ import { FetchPoolProps } from '@repo/lib/modules/pool/pool.types' -import { ChainSlug, getChainSlug, getPoolTypeLabel } from '@repo/lib/modules/pool/pool.utils' -import { PropsWithChildren, Suspense } from 'react' -import { PoolDetailSkeleton } from '@repo/lib/modules/pool/PoolDetail/PoolDetailSkeleton' -import { getApolloServerClient } from '@repo/lib/shared/services/api/apollo-server.client' -import { GetPoolDocument } from '@repo/lib/shared/services/api/generated/graphql' -import { Metadata } from 'next' -import { PoolProvider } from '@repo/lib/modules/pool/PoolProvider' -import { arrayToSentence } from '@repo/lib/shared/utils/strings' -import { ensureError } from '@repo/lib/shared/utils/errors' -import { notFound } from 'next/navigation' -import { getUserReferenceTokens } from '@repo/lib/modules/pool/pool-tokens.utils' +import { ChainSlug } from '@repo/lib/modules/pool/pool.utils' +import { PoolLayout } from '@repo/lib/shared/layouts/PoolLayout' +import { PropsWithChildren } from 'react' -type Props = PropsWithChildren<{ +export type Props = PropsWithChildren<{ params: Omit & { chain: ChainSlug } }> -async function getPoolQuery(chain: ChainSlug, id: string) { - const _chain = getChainSlug(chain) - const variables = { id: id.toLowerCase(), chain: _chain } - - try { - const result = await getApolloServerClient().query({ - query: GetPoolDocument, - variables, - context: { - fetchOptions: { - next: { revalidate: 30 }, - }, - }, - }) - return { data: result.data, error: null } - } catch (error: unknown) { - return { data: null, error: ensureError(error) } - } -} - -export async function generateMetadata({ +export default async function PoolLayoutWrapper({ params: { id, chain, variant }, -}: Props): Promise { - const { data } = await getPoolQuery(chain, id) - - const pool = data?.pool - if (!pool) return {} - - const displayTokens = getUserReferenceTokens(pool) - - const poolTokenString = arrayToSentence(displayTokens.map(token => token.symbol)) - - return { - title: `Liquidity Pool (${variant}): ${pool.name}`, - description: `This is a Balancer ${variant} ${getPoolTypeLabel( - pool.type - )} liquidity pool which contains ${poolTokenString}.`, - } -} - -export default async function PoolLayout({ params: { id, chain, variant }, children }: Props) { - const _chain = getChainSlug(chain) - - const { data, error } = await getPoolQuery(chain, id) - - if (error) { - if (error?.message === 'Pool with id does not exist') { - notFound() - } - - throw new Error('Failed to fetch pool') - } else if (!data) { - throw new Error('Failed to fetch pool') - } - + children, +}: Props) { return ( - }> - - {children} - - + + {children} + ) } diff --git a/apps/beets-frontend-v3/app/(app)/pools/[chain]/[variant]/[id]/remove-liquidity/[[...txHash]]/page.tsx b/apps/beets-frontend-v3/app/(app)/pools/[chain]/[variant]/[id]/remove-liquidity/[[...txHash]]/page.tsx index 34c5f9e16..9bfeff80d 100644 --- a/apps/beets-frontend-v3/app/(app)/pools/[chain]/[variant]/[id]/remove-liquidity/[[...txHash]]/page.tsx +++ b/apps/beets-frontend-v3/app/(app)/pools/[chain]/[variant]/[id]/remove-liquidity/[[...txHash]]/page.tsx @@ -1,38 +1,11 @@ 'use client' -import { PoolActionsLayout } from '@repo/lib/modules/pool/actions/PoolActionsLayout' -import { RemoveLiquidityForm } from '@repo/lib/modules/pool/actions/remove-liquidity/form/RemoveLiquidityForm' -import { RemoveLiquidityProvider } from '@repo/lib/modules/pool/actions/remove-liquidity/RemoveLiquidityProvider' -import { RelayerSignatureProvider } from '@repo/lib/modules/relayer/RelayerSignatureProvider' -import { TransactionStateProvider } from '@repo/lib/modules/transactions/transaction-steps/TransactionStateProvider' -import { PriceImpactProvider } from '@repo/lib/modules/price-impact/PriceImpactProvider' -import { isHash } from 'viem' -import { DefaultPageContainer } from '@repo/lib/shared/components/containers/DefaultPageContainer' -import { PermitSignatureProvider } from '@repo/lib/modules/tokens/approvals/permit2/PermitSignatureProvider' +import { RemoveLiquidityPage } from '@repo/lib/shared/pages/RemoveLiquidityPage' type Props = { params: { txHash?: string[] } } -export default function RemoveLiquidityPage({ params: { txHash } }: Props) { - const maybeTxHash = txHash?.[0] || '' - const urlTxHash = isHash(maybeTxHash) ? maybeTxHash : undefined - - return ( - - - - - - - - - - - - - - - - ) +export default function RemoveLiquidityPageWrapper({ params: { txHash } }: Props) { + return } diff --git a/apps/beets-frontend-v3/app/(app)/pools/page.tsx b/apps/beets-frontend-v3/app/(app)/pools/page.tsx index 2549c3786..cfa23a67c 100644 --- a/apps/beets-frontend-v3/app/(app)/pools/page.tsx +++ b/apps/beets-frontend-v3/app/(app)/pools/page.tsx @@ -1,52 +1,11 @@ -import { PoolList } from '@repo/lib/modules/pool/PoolList/PoolList' -import { DefaultPageContainer } from '@repo/lib/shared/components/containers/DefaultPageContainer' -import FadeInOnView from '@repo/lib/shared/components/containers/FadeInOnView' -import { Box, Skeleton } from '@chakra-ui/react' -import { Suspense } from 'react' -// import { getApolloServerClient } from '@repo/lib/shared/services/api/apollo-server.client' -// import { GetFeaturedPoolsDocument } from '@repo/lib/shared/services/api/generated/graphql' -// import { FeaturedPools } from '@repo/lib/modules/featured-pools/FeaturedPools' -import { BeetsPromoBanner } from '@/lib/components/promos/BeetsPromoBanner' - -export default async function PoolsPage() { - // Featured pools set up - // const { supportedNetworks } = useProjectConfig() +import { PoolsPage } from '@repo/lib/shared/pages/PoolsPage' - // const featuredPoolsQuery = await getApolloServerClient().query({ - // query: GetFeaturedPoolsDocument, - // variables: { chains: supportedNetworks }, - // context: { - // fetchOptions: { - // next: { revalidate: 300 }, // 5 minutes - // }, - // }, - // }) - - // const featuredPools = featuredPoolsQuery.data.featuredPools || [] +import { BeetsPromoBanner } from '@/lib/components/promos/BeetsPromoBanner' +export default async function PoolsPageWrapper() { return ( - <> - - - - - - - - {/* - - - - */} - - - - - }> - - - - - + + + ) } diff --git a/apps/frontend-v3/app/(app)/pools/[chain]/[variant]/[id]/add-liquidity/[[...txHash]]/layout.tsx b/apps/frontend-v3/app/(app)/pools/[chain]/[variant]/[id]/add-liquidity/[[...txHash]]/layout.tsx index 198c7d58d..6ebc45150 100644 --- a/apps/frontend-v3/app/(app)/pools/[chain]/[variant]/[id]/add-liquidity/[[...txHash]]/layout.tsx +++ b/apps/frontend-v3/app/(app)/pools/[chain]/[variant]/[id]/add-liquidity/[[...txHash]]/layout.tsx @@ -1,55 +1,12 @@ 'use client' -import { isNotSupported, shouldBlockAddLiquidity } from '@repo/lib/modules/pool/pool.helpers' -import { usePool } from '@repo/lib/modules/pool/PoolProvider' -import { RelayerSignatureProvider } from '@repo/lib/modules/relayer/RelayerSignatureProvider' -import { TokenInputsValidationProvider } from '@repo/lib/modules/tokens/TokenInputsValidationProvider' -import { PriceImpactProvider } from '@repo/lib/modules/price-impact/PriceImpactProvider' -import { Alert } from '@chakra-ui/react' -import { TransactionStateProvider } from '@repo/lib/modules/transactions/transaction-steps/TransactionStateProvider' +import { AddLiquidityLayout } from '@repo/lib/shared/layouts/AddLiquidityLayout' import { PropsWithChildren } from 'react' -import { isHash } from 'viem' -import { usePoolRedirect } from '@repo/lib/modules/pool/pool.hooks' -import { DefaultPageContainer } from '@repo/lib/shared/components/containers/DefaultPageContainer' -import { AddLiquidityProvider } from '@repo/lib/modules/pool/actions/add-liquidity/AddLiquidityProvider' -import { Permit2SignatureProvider } from '@repo/lib/modules/tokens/approvals/permit2/Permit2SignatureProvider' type Props = PropsWithChildren<{ params: { txHash?: string[] } }> -export default function AddLiquidityLayout({ params: { txHash }, children }: Props) { - const { pool } = usePool() - const { redirectToPoolPage } = usePoolRedirect(pool) - - const maybeTxHash = txHash?.[0] || '' - const urlTxHash = isHash(maybeTxHash) ? maybeTxHash : undefined - - if (shouldBlockAddLiquidity(pool)) { - return redirectToPoolPage() - } - - if (isNotSupported(pool)) { - return ( - - This pool type is not currently supported in the Balancer V3 UI - - ) - } - - return ( - - - - - - - {children} - - - - - - - ) +export default function AddLiquidityLayoutWrapper({ params: { txHash }, children }: Props) { + return {children} } diff --git a/apps/frontend-v3/app/(app)/pools/[chain]/[variant]/[id]/add-liquidity/[[...txHash]]/page.tsx b/apps/frontend-v3/app/(app)/pools/[chain]/[variant]/[id]/add-liquidity/[[...txHash]]/page.tsx index 4df8dcd51..1dffd350a 100644 --- a/apps/frontend-v3/app/(app)/pools/[chain]/[variant]/[id]/add-liquidity/[[...txHash]]/page.tsx +++ b/apps/frontend-v3/app/(app)/pools/[chain]/[variant]/[id]/add-liquidity/[[...txHash]]/page.tsx @@ -1,13 +1,7 @@ 'use client' -import { PoolActionsLayout } from '@repo/lib/modules/pool/actions/PoolActionsLayout' -import { AddLiquidityForm } from '@repo/lib/modules/pool/actions/add-liquidity/form/AddLiquidityForm' +import { AddLiquidityPage } from '@repo/lib/shared/pages/AddLiquidityPage' -export default function AddLiquidityPage() { - // ./layout.tsx defines UI and state that is shared by this page and the nested /add-liquidity/[txHash] receipt page - return ( - - - - ) +export default function AddLiquidityWrapper() { + return } diff --git a/apps/frontend-v3/app/(app)/pools/[chain]/[variant]/[id]/layout.tsx b/apps/frontend-v3/app/(app)/pools/[chain]/[variant]/[id]/layout.tsx index 475db0fc3..726712105 100644 --- a/apps/frontend-v3/app/(app)/pools/[chain]/[variant]/[id]/layout.tsx +++ b/apps/frontend-v3/app/(app)/pools/[chain]/[variant]/[id]/layout.tsx @@ -1,81 +1,20 @@ /* eslint-disable max-len */ import { FetchPoolProps } from '@repo/lib/modules/pool/pool.types' -import { ChainSlug, getChainSlug, getPoolTypeLabel } from '@repo/lib/modules/pool/pool.utils' -import { PropsWithChildren, Suspense } from 'react' -import { PoolDetailSkeleton } from '@repo/lib/modules/pool/PoolDetail/PoolDetailSkeleton' -import { getApolloServerClient } from '@repo/lib/shared/services/api/apollo-server.client' -import { GetPoolDocument } from '@repo/lib/shared/services/api/generated/graphql' -import { Metadata } from 'next' -import { PoolProvider } from '@repo/lib/modules/pool/PoolProvider' -import { arrayToSentence } from '@repo/lib/shared/utils/strings' -import { ensureError } from '@repo/lib/shared/utils/errors' -import { notFound } from 'next/navigation' -import { getUserReferenceTokens } from '@repo/lib/modules/pool/pool-tokens.utils' +import { ChainSlug } from '@repo/lib/modules/pool/pool.utils' +import { PoolLayout } from '@repo/lib/shared/layouts/PoolLayout' +import { PropsWithChildren } from 'react' -type Props = PropsWithChildren<{ +export type Props = PropsWithChildren<{ params: Omit & { chain: ChainSlug } }> -async function getPoolQuery(chain: ChainSlug, id: string) { - const _chain = getChainSlug(chain) - const variables = { id: id.toLowerCase(), chain: _chain } - - try { - const result = await getApolloServerClient().query({ - query: GetPoolDocument, - variables, - context: { - fetchOptions: { - next: { revalidate: 30 }, - }, - }, - }) - return { data: result.data, error: null } - } catch (error: unknown) { - return { data: null, error: ensureError(error) } - } -} - -export async function generateMetadata({ +export default async function PoolLayoutWrapper({ params: { id, chain, variant }, -}: Props): Promise { - const { data } = await getPoolQuery(chain, id) - - const pool = data?.pool - if (!pool) return {} - - const displayTokens = getUserReferenceTokens(pool) - - const poolTokenString = arrayToSentence(displayTokens.map(token => token.symbol)) - - return { - title: `Liquidity Pool (${variant}): ${pool.name}`, - description: `${pool.symbol} is a Balancer ${variant} ${getPoolTypeLabel( - pool.type - )} liquidity pool which contains ${poolTokenString}.`, - } -} - -export default async function PoolLayout({ params: { id, chain, variant }, children }: Props) { - const _chain = getChainSlug(chain) - - const { data, error } = await getPoolQuery(chain, id) - - if (error) { - if (error?.message === 'Pool with id does not exist') { - notFound() - } - - throw new Error('Failed to fetch pool') - } else if (!data) { - throw new Error('Failed to fetch pool') - } - + children, +}: Props) { return ( - }> - - {children} - - + + {children} + ) } diff --git a/apps/frontend-v3/app/(app)/pools/[chain]/[variant]/[id]/remove-liquidity/[[...txHash]]/page.tsx b/apps/frontend-v3/app/(app)/pools/[chain]/[variant]/[id]/remove-liquidity/[[...txHash]]/page.tsx index 34c5f9e16..9bfeff80d 100644 --- a/apps/frontend-v3/app/(app)/pools/[chain]/[variant]/[id]/remove-liquidity/[[...txHash]]/page.tsx +++ b/apps/frontend-v3/app/(app)/pools/[chain]/[variant]/[id]/remove-liquidity/[[...txHash]]/page.tsx @@ -1,38 +1,11 @@ 'use client' -import { PoolActionsLayout } from '@repo/lib/modules/pool/actions/PoolActionsLayout' -import { RemoveLiquidityForm } from '@repo/lib/modules/pool/actions/remove-liquidity/form/RemoveLiquidityForm' -import { RemoveLiquidityProvider } from '@repo/lib/modules/pool/actions/remove-liquidity/RemoveLiquidityProvider' -import { RelayerSignatureProvider } from '@repo/lib/modules/relayer/RelayerSignatureProvider' -import { TransactionStateProvider } from '@repo/lib/modules/transactions/transaction-steps/TransactionStateProvider' -import { PriceImpactProvider } from '@repo/lib/modules/price-impact/PriceImpactProvider' -import { isHash } from 'viem' -import { DefaultPageContainer } from '@repo/lib/shared/components/containers/DefaultPageContainer' -import { PermitSignatureProvider } from '@repo/lib/modules/tokens/approvals/permit2/PermitSignatureProvider' +import { RemoveLiquidityPage } from '@repo/lib/shared/pages/RemoveLiquidityPage' type Props = { params: { txHash?: string[] } } -export default function RemoveLiquidityPage({ params: { txHash } }: Props) { - const maybeTxHash = txHash?.[0] || '' - const urlTxHash = isHash(maybeTxHash) ? maybeTxHash : undefined - - return ( - - - - - - - - - - - - - - - - ) +export default function RemoveLiquidityPageWrapper({ params: { txHash } }: Props) { + return } diff --git a/apps/frontend-v3/app/(app)/pools/page.tsx b/apps/frontend-v3/app/(app)/pools/page.tsx index 6c2c85182..2040ad575 100644 --- a/apps/frontend-v3/app/(app)/pools/page.tsx +++ b/apps/frontend-v3/app/(app)/pools/page.tsx @@ -1,52 +1,11 @@ -import { PoolList } from '@repo/lib/modules/pool/PoolList/PoolList' -import { DefaultPageContainer } from '@repo/lib/shared/components/containers/DefaultPageContainer' -import FadeInOnView from '@repo/lib/shared/components/containers/FadeInOnView' -import { Box, Skeleton } from '@chakra-ui/react' -import { Suspense } from 'react' -// import { getApolloServerClient } from '@repo/lib/shared/services/api/apollo-server.client' -// import { GetFeaturedPoolsDocument } from '@repo/lib/shared/services/api/generated/graphql' -// import { FeaturedPools } from '@repo/lib/modules/featured-pools/FeaturedPools' -import { BoostedPoolsPromoBanner } from '@repo/lib/shared/components/promos/BoostedPoolsPromoBanner' - -export default async function PoolsPage() { - // Featured pools set up - // const { supportedNetworks } = useProjectConfig() +import { PoolsPage } from '@repo/lib/shared/pages/PoolsPage' - // const featuredPoolsQuery = await getApolloServerClient().query({ - // query: GetFeaturedPoolsDocument, - // variables: { chains: supportedNetworks }, - // context: { - // fetchOptions: { - // next: { revalidate: 300 }, // 5 minutes - // }, - // }, - // }) - - // const featuredPools = featuredPoolsQuery.data.featuredPools || [] +import { BoostedPoolsPromoBanner } from '@repo/lib/shared/components/promos/BoostedPoolsPromoBanner' +export default async function PoolsPageWrapper() { return ( - <> - - - - - - - - {/* - - - - */} - - - - - }> - - - - - + + + ) } diff --git a/packages/lib/shared/layouts/AddLiquidityLayout.tsx b/packages/lib/shared/layouts/AddLiquidityLayout.tsx new file mode 100644 index 000000000..77b1732c5 --- /dev/null +++ b/packages/lib/shared/layouts/AddLiquidityLayout.tsx @@ -0,0 +1,57 @@ +'use client' + +import { isNotSupported, shouldBlockAddLiquidity } from '@repo/lib/modules/pool/pool.helpers' +import { usePool } from '@repo/lib/modules/pool/PoolProvider' +import { RelayerSignatureProvider } from '@repo/lib/modules/relayer/RelayerSignatureProvider' +import { TokenInputsValidationProvider } from '@repo/lib/modules/tokens/TokenInputsValidationProvider' +import { PriceImpactProvider } from '@repo/lib/modules/price-impact/PriceImpactProvider' +import { Alert } from '@chakra-ui/react' +import { TransactionStateProvider } from '@repo/lib/modules/transactions/transaction-steps/TransactionStateProvider' +import { PropsWithChildren } from 'react' +import { isHash } from 'viem' +import { usePoolRedirect } from '@repo/lib/modules/pool/pool.hooks' +import { DefaultPageContainer } from '@repo/lib/shared/components/containers/DefaultPageContainer' +import { AddLiquidityProvider } from '@repo/lib/modules/pool/actions/add-liquidity/AddLiquidityProvider' +import { Permit2SignatureProvider } from '@repo/lib/modules/tokens/approvals/permit2/Permit2SignatureProvider' +import { PROJECT_CONFIG } from '@repo/lib/config/getProjectConfig' + +type Props = PropsWithChildren<{ + txHash?: string[] +}> + +export function AddLiquidityLayout({ txHash, children }: Props) { + const { pool } = usePool() + const { redirectToPoolPage } = usePoolRedirect(pool) + + const maybeTxHash = txHash?.[0] || '' + const urlTxHash = isHash(maybeTxHash) ? maybeTxHash : undefined + + if (shouldBlockAddLiquidity(pool)) { + redirectToPoolPage() + return null + } + + if (isNotSupported(pool)) { + return ( + + {`This pool type is not currently supported in the ${PROJECT_CONFIG.projectName} UI`} + + ) + } + + return ( + + + + + + + {children} + + + + + + + ) +} diff --git a/packages/lib/shared/layouts/PoolLayout.tsx b/packages/lib/shared/layouts/PoolLayout.tsx new file mode 100644 index 000000000..5b9d3ac59 --- /dev/null +++ b/packages/lib/shared/layouts/PoolLayout.tsx @@ -0,0 +1,81 @@ +import { PoolVariant } from '@repo/lib/modules/pool/pool.types' +import { ChainSlug, getChainSlug, getPoolTypeLabel } from '@repo/lib/modules/pool/pool.utils' +import { PropsWithChildren, Suspense } from 'react' +import { PoolDetailSkeleton } from '@repo/lib/modules/pool/PoolDetail/PoolDetailSkeleton' +import { getApolloServerClient } from '@repo/lib/shared/services/api/apollo-server.client' +import { GetPoolDocument } from '@repo/lib/shared/services/api/generated/graphql' +import { Metadata } from 'next' +import { PoolProvider } from '@repo/lib/modules/pool/PoolProvider' +import { arrayToSentence } from '@repo/lib/shared/utils/strings' +import { ensureError } from '@repo/lib/shared/utils/errors' +import { notFound } from 'next/navigation' +import { getUserReferenceTokens } from '@repo/lib/modules/pool/pool-tokens.utils' +import { PROJECT_CONFIG } from '@repo/lib/config/getProjectConfig' + +export type Props = PropsWithChildren<{ + chain: ChainSlug + id: string + variant?: PoolVariant +}> + +async function getPoolQuery(chain: ChainSlug, id: string) { + const _chain = getChainSlug(chain) + const variables = { id: id.toLowerCase(), chain: _chain } + + try { + const result = await getApolloServerClient().query({ + query: GetPoolDocument, + variables, + context: { + fetchOptions: { + next: { revalidate: 30 }, + }, + }, + }) + return { data: result.data, error: null } + } catch (error: unknown) { + return { data: null, error: ensureError(error) } + } +} + +export async function generateMetadata({ id, chain, variant }: Props): Promise { + const { data } = await getPoolQuery(chain, id) + + const pool = data?.pool + if (!pool) return {} + + const displayTokens = getUserReferenceTokens(pool) + const poolTokenString = arrayToSentence(displayTokens.map(token => token.symbol)) + const poolSymbol = PROJECT_CONFIG.options.showPoolName ? 'This' : pool.symbol // pool name is already shown in the title so we don't need to show it twice + + return { + title: `Liquidity Pool (${variant}): ${pool.name}`, + description: `${poolSymbol} is a Balancer ${variant} ${getPoolTypeLabel( + pool.type + )} liquidity pool which contains ${poolTokenString}.`, + } +} + +export async function PoolLayout({ id, chain, variant, children }: Props) { + const _chain = getChainSlug(chain) + + const { data, error } = await getPoolQuery(chain, id) + + if (error) { + if (error?.message === 'Pool with id does not exist') { + notFound() + } + + throw new Error('Failed to fetch pool') + } else if (!data) { + throw new Error('Failed to fetch pool') + } + + return ( + }> + + {children} + + + ) +} diff --git a/packages/lib/shared/pages/AddLiquidityPage.tsx b/packages/lib/shared/pages/AddLiquidityPage.tsx new file mode 100644 index 000000000..c2e3051a0 --- /dev/null +++ b/packages/lib/shared/pages/AddLiquidityPage.tsx @@ -0,0 +1,13 @@ +'use client' + +import { PoolActionsLayout } from '@repo/lib/modules/pool/actions/PoolActionsLayout' +import { AddLiquidityForm } from '@repo/lib/modules/pool/actions/add-liquidity/form/AddLiquidityForm' + +export function AddLiquidityPage() { + // ./layout.tsx defines UI and state that is shared by this page and the nested /add-liquidity/[txHash] receipt page + return ( + + + + ) +} diff --git a/packages/lib/shared/pages/PoolsPage.tsx b/packages/lib/shared/pages/PoolsPage.tsx new file mode 100644 index 000000000..e8b675a1a --- /dev/null +++ b/packages/lib/shared/pages/PoolsPage.tsx @@ -0,0 +1,52 @@ +import { PoolList } from '@repo/lib/modules/pool/PoolList/PoolList' +import { DefaultPageContainer } from '@repo/lib/shared/components/containers/DefaultPageContainer' +import FadeInOnView from '@repo/lib/shared/components/containers/FadeInOnView' +import { Box, Skeleton } from '@chakra-ui/react' +import { PropsWithChildren, Suspense } from 'react' +// import { getApolloServerClient } from '@repo/lib/shared/services/api/apollo-server.client' +// import { GetFeaturedPoolsDocument } from '@repo/lib/shared/services/api/generated/graphql' +// import { FeaturedPools } from '@repo/lib/modules/featured-pools/FeaturedPools' + +export async function PoolsPage({ children }: PropsWithChildren) { + // Featured pools set up + // const { supportedNetworks } = useProjectConfig() + + // const featuredPoolsQuery = await getApolloServerClient().query({ + // query: GetFeaturedPoolsDocument, + // variables: { chains: supportedNetworks }, + // context: { + // fetchOptions: { + // next: { revalidate: 300 }, // 5 minutes + // }, + // }, + // }) + + // const featuredPools = featuredPoolsQuery.data.featuredPools || [] + + return ( + <> + + + + + {/* */} + {children} + + + {/* + + + + */} + + + + + }> + + + + + + ) +} diff --git a/packages/lib/shared/pages/RemoveLiquidityPage.tsx b/packages/lib/shared/pages/RemoveLiquidityPage.tsx new file mode 100644 index 000000000..21c377f74 --- /dev/null +++ b/packages/lib/shared/pages/RemoveLiquidityPage.tsx @@ -0,0 +1,38 @@ +'use client' + +import { PoolActionsLayout } from '@repo/lib/modules/pool/actions/PoolActionsLayout' +import { RemoveLiquidityForm } from '@repo/lib/modules/pool/actions/remove-liquidity/form/RemoveLiquidityForm' +import { RemoveLiquidityProvider } from '@repo/lib/modules/pool/actions/remove-liquidity/RemoveLiquidityProvider' +import { RelayerSignatureProvider } from '@repo/lib/modules/relayer/RelayerSignatureProvider' +import { TransactionStateProvider } from '@repo/lib/modules/transactions/transaction-steps/TransactionStateProvider' +import { PriceImpactProvider } from '@repo/lib/modules/price-impact/PriceImpactProvider' +import { isHash } from 'viem' +import { DefaultPageContainer } from '@repo/lib/shared/components/containers/DefaultPageContainer' +import { PermitSignatureProvider } from '@repo/lib/modules/tokens/approvals/permit2/PermitSignatureProvider' + +type Props = { + txHash?: string[] +} + +export function RemoveLiquidityPage({ txHash }: Props) { + const maybeTxHash = txHash?.[0] || '' + const urlTxHash = isHash(maybeTxHash) ? maybeTxHash : undefined + + return ( + + + + + + + + + + + + + + + + ) +}