-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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 <[email protected]>
- Loading branch information
1 parent
997d62d
commit 813a9e2
Showing
15 changed files
with
291 additions
and
407 deletions.
There are no files selected for viewing
50 changes: 3 additions & 47 deletions
50
...frontend-v3/app/(app)/pools/[chain]/[variant]/[id]/add-liquidity/[[...txHash]]/layout.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <Alert minW="50%" status="info" w="fit-content"> | ||
| {`This pool type is not currently supported in the ${PROJECT_CONFIG.projectName} UI`} | ||
| </Alert> | ||
| ) | ||
| } | ||
|
|
||
| return ( | ||
| <DefaultPageContainer> | ||
| <TransactionStateProvider> | ||
| <RelayerSignatureProvider> | ||
| <Permit2SignatureProvider> | ||
| <TokenInputsValidationProvider> | ||
| <AddLiquidityProvider urlTxHash={urlTxHash}> | ||
| <PriceImpactProvider>{children}</PriceImpactProvider> | ||
| </AddLiquidityProvider> | ||
| </TokenInputsValidationProvider> | ||
| </Permit2SignatureProvider> | ||
| </RelayerSignatureProvider> | ||
| </TransactionStateProvider> | ||
| </DefaultPageContainer> | ||
| ) | ||
| export default function AddLiquidityLayoutWrapper({ params: { txHash }, children }: Props) { | ||
| return <AddLiquidityLayout txHash={txHash}>{children}</AddLiquidityLayout> | ||
| } |
12 changes: 3 additions & 9 deletions
12
...s-frontend-v3/app/(app)/pools/[chain]/[variant]/[id]/add-liquidity/[[...txHash]]/page.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <PoolActionsLayout> | ||
| <AddLiquidityForm /> | ||
| </PoolActionsLayout> | ||
| ) | ||
| export default function AddLiquidityWrapper() { | ||
| return <AddLiquidityPage /> | ||
| } |
81 changes: 10 additions & 71 deletions
81
apps/beets-frontend-v3/app/(app)/pools/[chain]/[variant]/[id]/layout.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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<FetchPoolProps, 'chain'> & { 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<Metadata> { | ||
| 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 ( | ||
| <Suspense fallback={<PoolDetailSkeleton />}> | ||
| <PoolProvider chain={_chain} data={data} id={id} variant={variant}> | ||
| {children} | ||
| </PoolProvider> | ||
| </Suspense> | ||
| <PoolLayout chain={chain} id={id} variant={variant}> | ||
| {children} | ||
| </PoolLayout> | ||
| ) | ||
| } |
33 changes: 3 additions & 30 deletions
33
...rontend-v3/app/(app)/pools/[chain]/[variant]/[id]/remove-liquidity/[[...txHash]]/page.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <DefaultPageContainer> | ||
| <TransactionStateProvider> | ||
| <RelayerSignatureProvider> | ||
| <PermitSignatureProvider> | ||
| <RemoveLiquidityProvider urlTxHash={urlTxHash}> | ||
| <PoolActionsLayout> | ||
| <PriceImpactProvider> | ||
| <RemoveLiquidityForm /> | ||
| </PriceImpactProvider> | ||
| </PoolActionsLayout> | ||
| </RemoveLiquidityProvider> | ||
| </PermitSignatureProvider> | ||
| </RelayerSignatureProvider> | ||
| </TransactionStateProvider> | ||
| </DefaultPageContainer> | ||
| ) | ||
| export default function RemoveLiquidityPageWrapper({ params: { txHash } }: Props) { | ||
| return <RemoveLiquidityPage txHash={txHash} /> | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <> | ||
| <Box> | ||
| <DefaultPageContainer pb={['xl', '2xl']} pt={['xl', '40px']}> | ||
| <FadeInOnView animateOnce={false}> | ||
| <Box> | ||
| <BeetsPromoBanner /> | ||
| </Box> | ||
| </FadeInOnView> | ||
| {/* <FadeInOnView animateOnce={false}> | ||
| <Box pt="20" pb="4"> | ||
| <FeaturedPools featuredPools={featuredPools} /> | ||
| </Box> | ||
| </FadeInOnView> */} | ||
| </DefaultPageContainer> | ||
| </Box> | ||
| <DefaultPageContainer noVerticalPadding pb={['xl', '2xl']} pt={['lg', '54px']}> | ||
| <FadeInOnView animateOnce={false}> | ||
| <Suspense fallback={<Skeleton h="500px" w="full" />}> | ||
| <PoolList /> | ||
| </Suspense> | ||
| </FadeInOnView> | ||
| </DefaultPageContainer> | ||
| </> | ||
| <PoolsPage> | ||
| <BeetsPromoBanner /> | ||
| </PoolsPage> | ||
| ) | ||
| } |
49 changes: 3 additions & 46 deletions
49
...frontend-v3/app/(app)/pools/[chain]/[variant]/[id]/add-liquidity/[[...txHash]]/layout.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <Alert minW="50%" status="info" w="fit-content"> | ||
| This pool type is not currently supported in the Balancer V3 UI | ||
| </Alert> | ||
| ) | ||
| } | ||
|
|
||
| return ( | ||
| <DefaultPageContainer> | ||
| <TransactionStateProvider> | ||
| <RelayerSignatureProvider> | ||
| <Permit2SignatureProvider> | ||
| <TokenInputsValidationProvider> | ||
| <AddLiquidityProvider urlTxHash={urlTxHash}> | ||
| <PriceImpactProvider>{children}</PriceImpactProvider> | ||
| </AddLiquidityProvider> | ||
| </TokenInputsValidationProvider> | ||
| </Permit2SignatureProvider> | ||
| </RelayerSignatureProvider> | ||
| </TransactionStateProvider> | ||
| </DefaultPageContainer> | ||
| ) | ||
| export default function AddLiquidityLayoutWrapper({ params: { txHash }, children }: Props) { | ||
| return <AddLiquidityLayout txHash={txHash}>{children}</AddLiquidityLayout> | ||
| } |
12 changes: 3 additions & 9 deletions
12
apps/frontend-v3/app/(app)/pools/[chain]/[variant]/[id]/add-liquidity/[[...txHash]]/page.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <PoolActionsLayout> | ||
| <AddLiquidityForm /> | ||
| </PoolActionsLayout> | ||
| ) | ||
| export default function AddLiquidityWrapper() { | ||
| return <AddLiquidityPage /> | ||
| } |
Oops, something went wrong.