From c5bb06796f9a993755cb2b3b2064ae1f57bb015f Mon Sep 17 00:00:00 2001 From: 0xMasayoshi <0xMasayoshi@protonmail.com> Date: Thu, 3 Oct 2024 03:04:10 +0800 Subject: [PATCH] chore: tron sidebar support --- apps/web/src/app/(evm)/[chainId]/header.tsx | 4 +- .../[chainId]/pool/incentivize/layout.tsx | 15 +- .../src/app/(evm)/[chainId]/pool/layout.tsx | 4 + .../(non-evm)/aptos/(positions)/layout.tsx | 5 +- .../(non-evm)/aptos/(positions)/pool/page.tsx | 10 +- .../(non-evm)/aptos/(positions)/providers.tsx | 2 +- .../app/(non-evm)/aptos/explore/layout.tsx | 4 + .../(non-evm)/aptos/explore/pools/page.tsx | 8 +- .../app/(non-evm)/aptos/explore/providers.tsx | 2 +- apps/web/src/app/(non-evm)/aptos/header.tsx | 19 ++- .../src/app/(non-evm)/aptos/pool/loading.tsx | 6 - .../pools/filters/pool-filters-farms-only.tsx | 33 ----- .../pools/filters/pool-filters-provider.tsx | 83 ----------- .../filters/pool-filters-search-token.tsx | 38 ----- .../tables/pools/cells/pool-name-cell.tsx | 0 .../ui/{pools => }/tables/pools/columns.tsx | 0 .../{pools => }/tables/pools/pools-table.tsx | 4 +- .../positions/cells/position-apr-cell.tsx | 0 .../positions/cells/position-name-cell.tsx | 0 .../positions/cells/position-tvl-cell.tsx | 0 .../{pools => }/tables/positions/columns.tsx | 0 .../tables/positions/pool-positions-table.tsx | 4 +- .../aptos/pool/ui/{pools => }/tables/types.ts | 0 .../app/(non-evm)/tron/(positions)/layout.tsx | 87 ++++++----- .../tron/_common/header-elements.tsx | 67 +++++++++ .../src/app/(non-evm)/tron/explore/layout.tsx | 36 +++-- .../app/(non-evm)/tron/explore/providers.tsx | 12 ++ apps/web/src/app/(non-evm)/tron/header.tsx | 139 +++++++++--------- apps/web/src/app/(non-evm)/tron/layout.tsx | 6 +- apps/web/src/app/(non-evm)/tron/loading.tsx | 6 - .../(non-evm)/tron/pool/[address]/page.tsx | 2 +- .../src/app/(non-evm)/tron/pool/layout.tsx | 25 ++++ .../src/app/(non-evm)/tron/pool/not-found.tsx | 41 ------ .../src/app/(non-evm)/tron/pool/providers.tsx | 7 + apps/web/src/app/(non-evm)/tron/providers.tsx | 17 ++- .../src/app/(non-evm)/tron/swap/layout.tsx | 9 +- apps/web/src/config.ts | 30 +++- apps/web/src/lib/network.ts | 11 +- .../lib/wagmi/components/network-selector.tsx | 2 +- apps/web/src/ui/pool/TableFiltersNetwork.tsx | 2 +- apps/web/src/ui/sidebar/index.tsx | 48 ++++-- .../src/icons/network/circle/MantleCircle.tsx | 8 +- .../ui/src/icons/network/circle/index.tsx | 2 + .../src/icons/network/naked/MantleNaked.tsx | 38 ++--- .../ui/src/icons/network/naked/TronNaked.tsx | 10 +- packages/ui/src/icons/network/naked/index.tsx | 2 + 46 files changed, 428 insertions(+), 420 deletions(-) delete mode 100644 apps/web/src/app/(non-evm)/aptos/pool/loading.tsx delete mode 100644 apps/web/src/app/(non-evm)/aptos/pool/ui/pools/filters/pool-filters-farms-only.tsx delete mode 100644 apps/web/src/app/(non-evm)/aptos/pool/ui/pools/filters/pool-filters-provider.tsx delete mode 100644 apps/web/src/app/(non-evm)/aptos/pool/ui/pools/filters/pool-filters-search-token.tsx rename apps/web/src/app/(non-evm)/aptos/pool/ui/{pools => }/tables/pools/cells/pool-name-cell.tsx (100%) rename apps/web/src/app/(non-evm)/aptos/pool/ui/{pools => }/tables/pools/columns.tsx (100%) rename apps/web/src/app/(non-evm)/aptos/pool/ui/{pools => }/tables/pools/pools-table.tsx (93%) rename apps/web/src/app/(non-evm)/aptos/pool/ui/{pools => }/tables/positions/cells/position-apr-cell.tsx (100%) rename apps/web/src/app/(non-evm)/aptos/pool/ui/{pools => }/tables/positions/cells/position-name-cell.tsx (100%) rename apps/web/src/app/(non-evm)/aptos/pool/ui/{pools => }/tables/positions/cells/position-tvl-cell.tsx (100%) rename apps/web/src/app/(non-evm)/aptos/pool/ui/{pools => }/tables/positions/columns.tsx (100%) rename apps/web/src/app/(non-evm)/aptos/pool/ui/{pools => }/tables/positions/pool-positions-table.tsx (95%) rename apps/web/src/app/(non-evm)/aptos/pool/ui/{pools => }/tables/types.ts (100%) create mode 100644 apps/web/src/app/(non-evm)/tron/_common/header-elements.tsx create mode 100644 apps/web/src/app/(non-evm)/tron/explore/providers.tsx delete mode 100644 apps/web/src/app/(non-evm)/tron/loading.tsx create mode 100644 apps/web/src/app/(non-evm)/tron/pool/layout.tsx delete mode 100644 apps/web/src/app/(non-evm)/tron/pool/not-found.tsx create mode 100644 apps/web/src/app/(non-evm)/tron/pool/providers.tsx diff --git a/apps/web/src/app/(evm)/[chainId]/header.tsx b/apps/web/src/app/(evm)/[chainId]/header.tsx index c1f327b231..cf10a4091a 100644 --- a/apps/web/src/app/(evm)/[chainId]/header.tsx +++ b/apps/web/src/app/(evm)/[chainId]/header.tsx @@ -29,8 +29,8 @@ export const Header: FC<{ chainId: ChainId }> = ({ chainId }) => {
diff --git a/apps/web/src/app/(evm)/[chainId]/pool/incentivize/layout.tsx b/apps/web/src/app/(evm)/[chainId]/pool/incentivize/layout.tsx index 4c343210fa..4dba27a082 100644 --- a/apps/web/src/app/(evm)/[chainId]/pool/incentivize/layout.tsx +++ b/apps/web/src/app/(evm)/[chainId]/pool/incentivize/layout.tsx @@ -1,11 +1,18 @@ import { Container, typographyVariants } from '@sushiswap/ui' import { BackButton } from 'src/ui/pool/BackButton' +import { ChainId } from 'sushi/chain' +import { isMerklChainId } from 'sushi/config' +import notFound from '~evm/[chainId]/not-found' -export const metadata = { - title: 'Pool 💦', -} +export default function Layout({ + children, + params, +}: { children: React.ReactNode; params: { chainId: string } }) { + const chainId = +params.chainId as ChainId + if (!isMerklChainId(chainId)) { + return notFound(chainId) + } -export default function Layout({ children }: { children: React.ReactNode }) { return ( <> diff --git a/apps/web/src/app/(evm)/[chainId]/pool/layout.tsx b/apps/web/src/app/(evm)/[chainId]/pool/layout.tsx index 9c6c2af253..7fd706be06 100644 --- a/apps/web/src/app/(evm)/[chainId]/pool/layout.tsx +++ b/apps/web/src/app/(evm)/[chainId]/pool/layout.tsx @@ -5,6 +5,10 @@ import { ChainId } from 'sushi/chain' import { Header } from '../header' import notFound from '../not-found' +export const metadata = { + title: 'Pool 💦', +} + export default function PoolLayout({ children, params, diff --git a/apps/web/src/app/(non-evm)/aptos/(positions)/layout.tsx b/apps/web/src/app/(non-evm)/aptos/(positions)/layout.tsx index 714d26deec..890af9f064 100644 --- a/apps/web/src/app/(non-evm)/aptos/(positions)/layout.tsx +++ b/apps/web/src/app/(non-evm)/aptos/(positions)/layout.tsx @@ -4,13 +4,12 @@ import { Container, LinkInternal } from '@sushiswap/ui' import { useSearchParams } from 'next/navigation' import { Suspense } from 'react' import { POOL_SUPPORTED_NETWORKS } from 'src/config' -import { PathnameButton } from 'src/ui/pool' +import { PathnameButton, PoolsFiltersProvider } from 'src/ui/pool' import { AptosSidebarContainer, SidebarProvider } from 'src/ui/sidebar' -import { PoolsFiltersProvider } from '~aptos/pool/ui/pools/filters/pool-filters-provider' import { Header } from '../header' import { Hero } from './hero' -export default function TabsLayout({ +export default function PositionsLayout({ children, }: { children: React.ReactNode }) { return ( diff --git a/apps/web/src/app/(non-evm)/aptos/(positions)/pool/page.tsx b/apps/web/src/app/(non-evm)/aptos/(positions)/pool/page.tsx index bd722104d5..74ab8a6f8a 100644 --- a/apps/web/src/app/(non-evm)/aptos/(positions)/pool/page.tsx +++ b/apps/web/src/app/(non-evm)/aptos/(positions)/pool/page.tsx @@ -4,23 +4,21 @@ import { Container } from '@sushiswap/ui' import { Suspense } from 'react' import { POOL_SUPPORTED_NETWORKS } from 'src/config' import { TableFiltersNetwork } from 'src/ui/pool/TableFiltersNetwork' - -// import { PoolFiltersFarmsOnly } from '~aptos/pool/ui/pools/filters/pool-filters-farms-only' -import { PoolFiltersSearchToken } from '~aptos/pool/ui/pools/filters/pool-filters-search-token' -import { PositionsTable } from '~aptos/pool/ui/pools/tables/positions/pool-positions-table' +import { TableFiltersSearchToken } from 'src/ui/pool/TableFiltersSearchToken' +import { PositionsTable } from '~aptos/pool/ui/tables/positions/pool-positions-table' export default function MyPositionsPage() { return (
- + - {/* */} + {/* */}
diff --git a/apps/web/src/app/(non-evm)/aptos/(positions)/providers.tsx b/apps/web/src/app/(non-evm)/aptos/(positions)/providers.tsx index 8ef5aec3f3..4c8ba695d8 100644 --- a/apps/web/src/app/(non-evm)/aptos/(positions)/providers.tsx +++ b/apps/web/src/app/(non-evm)/aptos/(positions)/providers.tsx @@ -1,7 +1,7 @@ 'use client' import { Suspense } from 'react' -import { PoolsFiltersProvider } from '~aptos/pool/ui/pools/filters/pool-filters-provider' +import { PoolsFiltersProvider } from 'src/ui/pool' export function Providers({ children }: { children: React.ReactNode }) { return ( diff --git a/apps/web/src/app/(non-evm)/aptos/explore/layout.tsx b/apps/web/src/app/(non-evm)/aptos/explore/layout.tsx index 0de215149d..38d1deef55 100644 --- a/apps/web/src/app/(non-evm)/aptos/explore/layout.tsx +++ b/apps/web/src/app/(non-evm)/aptos/explore/layout.tsx @@ -5,6 +5,10 @@ import { Header } from '../header' import { Hero } from './hero' import { Providers } from './providers' +export const metadata = { + title: 'Pools 💦', +} + export default function PoolLayout({ children, }: { children: React.ReactNode }) { diff --git a/apps/web/src/app/(non-evm)/aptos/explore/pools/page.tsx b/apps/web/src/app/(non-evm)/aptos/explore/pools/page.tsx index 0ecd2a2c9f..8bba5da43d 100644 --- a/apps/web/src/app/(non-evm)/aptos/explore/pools/page.tsx +++ b/apps/web/src/app/(non-evm)/aptos/explore/pools/page.tsx @@ -2,16 +2,14 @@ import { Container } from '@sushiswap/ui' import React from 'react' import { POOL_SUPPORTED_NETWORKS } from 'src/config' import { TableFiltersNetwork } from 'src/ui/pool/TableFiltersNetwork' -// import { PoolFiltersFarmsOnly } from '~aptos/pool/ui/pools/filters/pool-filters-farms-only' -import { PoolFiltersSearchToken } from '~aptos/pool/ui/pools/filters/pool-filters-search-token' -import { PoolsTable } from '~aptos/pool/ui/pools/tables/pools/pools-table' +import { TableFiltersSearchToken } from 'src/ui/pool/TableFiltersSearchToken' +import { PoolsTable } from '~aptos/pool/ui/tables/pools/pools-table' export default async function PoolsPage() { return (
- - {/* */} + { const { connected } = useWallet() + const evmChainId = useChainId() + + const { isConnected: isEVMConnected } = useAccount() + const { isOpen } = useSidebar() return (
@@ -38,14 +43,18 @@ export const Header: FC = () => { ) : (
) } > - + diff --git a/apps/web/src/app/(non-evm)/aptos/pool/loading.tsx b/apps/web/src/app/(non-evm)/aptos/pool/loading.tsx deleted file mode 100644 index 75da76e366..0000000000 --- a/apps/web/src/app/(non-evm)/aptos/pool/loading.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import { Splash } from '@sushiswap/ui' -import React from 'react' - -export default function Loading() { - return -} diff --git a/apps/web/src/app/(non-evm)/aptos/pool/ui/pools/filters/pool-filters-farms-only.tsx b/apps/web/src/app/(non-evm)/aptos/pool/ui/pools/filters/pool-filters-farms-only.tsx deleted file mode 100644 index 56a1ad2dda..0000000000 --- a/apps/web/src/app/(non-evm)/aptos/pool/ui/pools/filters/pool-filters-farms-only.tsx +++ /dev/null @@ -1,33 +0,0 @@ -'use client' - -import { Toggle } from '@sushiswap/ui' -import React, { FC, useCallback, useState, useTransition } from 'react' -import { usePoolFilters, useSetPoolFilters } from './pool-filters-provider' - -export const PoolFiltersFarmsOnly: FC = () => { - const [isPending, startTransition] = useTransition() - const { farmsOnly } = usePoolFilters() - const setFilters = useSetPoolFilters() - const [checked, setChecked] = useState(farmsOnly) - - const toggle = useCallback( - (checked: boolean) => { - setChecked(checked) - startTransition(() => { - setFilters((prev) => ({ ...prev, farmsOnly: !prev.farmsOnly })) - }) - }, - [setFilters], - ) - - return ( - - 🧑‍🌾 Farms only - - ) -} diff --git a/apps/web/src/app/(non-evm)/aptos/pool/ui/pools/filters/pool-filters-provider.tsx b/apps/web/src/app/(non-evm)/aptos/pool/ui/pools/filters/pool-filters-provider.tsx deleted file mode 100644 index 8d78297953..0000000000 --- a/apps/web/src/app/(non-evm)/aptos/pool/ui/pools/filters/pool-filters-provider.tsx +++ /dev/null @@ -1,83 +0,0 @@ -'use client' - -import { useRouter } from 'next/navigation' -import { - Dispatch, - FC, - ReactNode, - SetStateAction, - createContext, - useContext, - useMemo, -} from 'react' -import { useTypedSearchParams } from 'src/lib/hooks' -import { z } from 'zod' -import { parseArgs } from '~aptos/_common/lib/common/parse-args' -type FilterContext = z.TypeOf - -const FilterContext = createContext(undefined) - -export type PoolFilters = Omit - -interface PoolsFiltersProvider { - children?: ReactNode - passedFilters?: Partial -} - -export const poolFiltersSchema = z.object({ - tokenSymbols: z.coerce.string().transform((symbols) => { - return symbols.split(',') - }), - farmsOnly: z - .string() - .transform((bool) => (bool ? bool === 'true' : undefined)), - smartPoolsOnly: z - .string() - .transform((bool) => (bool ? bool === 'true' : undefined)), -}) - -export const PoolsFiltersProvider: FC = ({ - children, -}) => { - const urlFilters = useTypedSearchParams(poolFiltersSchema.partial()) - const { tokenSymbols, farmsOnly, smartPoolsOnly } = urlFilters - - return ( - ({ - tokenSymbols: tokenSymbols ? tokenSymbols : [], - farmsOnly: farmsOnly ? farmsOnly : false, - smartPoolsOnly: smartPoolsOnly ? smartPoolsOnly : false, - }), - [farmsOnly, tokenSymbols, smartPoolsOnly], - )} - > - {children} - - ) -} - -export const usePoolFilters = () => { - const context = useContext(FilterContext) - if (!context) { - throw new Error('Hook can only be used inside Filter Context') - } - - return context -} - -export const useSetPoolFilters = () => { - const { push } = useRouter() - const urlFilters = useTypedSearchParams(poolFiltersSchema.partial()) - - const setFilters: Dispatch> = (filters) => { - if (typeof filters === 'function') { - void push(parseArgs(filters(urlFilters))) - } else { - void push(parseArgs(filters)) - } - } - - return setFilters -} diff --git a/apps/web/src/app/(non-evm)/aptos/pool/ui/pools/filters/pool-filters-search-token.tsx b/apps/web/src/app/(non-evm)/aptos/pool/ui/pools/filters/pool-filters-search-token.tsx deleted file mode 100644 index a8d25fd78e..0000000000 --- a/apps/web/src/app/(non-evm)/aptos/pool/ui/pools/filters/pool-filters-search-token.tsx +++ /dev/null @@ -1,38 +0,0 @@ -'use client' - -import { MagnifyingGlassIcon } from '@heroicons/react/24/solid' -import { ChipInput } from '@sushiswap/ui' -import React, { FC, useCallback, useState, useTransition } from 'react' -import { usePoolFilters, useSetPoolFilters } from './pool-filters-provider' - -export const PoolFiltersSearchToken: FC = () => { - const [isPending, startTransition] = useTransition() - const { tokenSymbols } = usePoolFilters() - const setFilters = useSetPoolFilters() - const [values, setValues] = useState(tokenSymbols) - - const onValueChange = useCallback( - (values: string[]) => { - setValues(values) - startTransition(() => { - setFilters((prev) => ({ ...prev, tokenSymbols: values })) - }) - }, - [setFilters], - ) - - return ( -
- -
- ) -} diff --git a/apps/web/src/app/(non-evm)/aptos/pool/ui/pools/tables/pools/cells/pool-name-cell.tsx b/apps/web/src/app/(non-evm)/aptos/pool/ui/tables/pools/cells/pool-name-cell.tsx similarity index 100% rename from apps/web/src/app/(non-evm)/aptos/pool/ui/pools/tables/pools/cells/pool-name-cell.tsx rename to apps/web/src/app/(non-evm)/aptos/pool/ui/tables/pools/cells/pool-name-cell.tsx diff --git a/apps/web/src/app/(non-evm)/aptos/pool/ui/pools/tables/pools/columns.tsx b/apps/web/src/app/(non-evm)/aptos/pool/ui/tables/pools/columns.tsx similarity index 100% rename from apps/web/src/app/(non-evm)/aptos/pool/ui/pools/tables/pools/columns.tsx rename to apps/web/src/app/(non-evm)/aptos/pool/ui/tables/pools/columns.tsx diff --git a/apps/web/src/app/(non-evm)/aptos/pool/ui/pools/tables/pools/pools-table.tsx b/apps/web/src/app/(non-evm)/aptos/pool/ui/tables/pools/pools-table.tsx similarity index 93% rename from apps/web/src/app/(non-evm)/aptos/pool/ui/pools/tables/pools/pools-table.tsx rename to apps/web/src/app/(non-evm)/aptos/pool/ui/tables/pools/pools-table.tsx index 3c84cec6eb..c8a8dbf224 100644 --- a/apps/web/src/app/(non-evm)/aptos/pool/ui/pools/tables/pools/pools-table.tsx +++ b/apps/web/src/app/(non-evm)/aptos/pool/ui/tables/pools/pools-table.tsx @@ -9,8 +9,8 @@ import { } from '@sushiswap/ui' import { ColumnDef, SortingState, TableState } from '@tanstack/react-table' import React, { useCallback, useMemo, useState } from 'react' +import { usePoolFilters } from 'src/ui/pool' import { TopPool, useTopPools } from '~aptos/pool/lib/use-top-pools' -import { usePoolFilters } from '~aptos/pool/ui/pools/filters/pool-filters-provider' import { APR_COLUMN, FEES_1D_COLUMN, @@ -39,7 +39,7 @@ export const PoolsTable = () => { const { data: pools, isLoading } = useTopPools() const rowLink = useCallback((row: TopPool) => { - return `/aptos/pool/${row.token0Address}, ${row.token1Address}` + return `/aptos/pool/v2/${row.token0Address}, ${row.token1Address}` }, []) const filtered = useMemo(() => { diff --git a/apps/web/src/app/(non-evm)/aptos/pool/ui/pools/tables/positions/cells/position-apr-cell.tsx b/apps/web/src/app/(non-evm)/aptos/pool/ui/tables/positions/cells/position-apr-cell.tsx similarity index 100% rename from apps/web/src/app/(non-evm)/aptos/pool/ui/pools/tables/positions/cells/position-apr-cell.tsx rename to apps/web/src/app/(non-evm)/aptos/pool/ui/tables/positions/cells/position-apr-cell.tsx diff --git a/apps/web/src/app/(non-evm)/aptos/pool/ui/pools/tables/positions/cells/position-name-cell.tsx b/apps/web/src/app/(non-evm)/aptos/pool/ui/tables/positions/cells/position-name-cell.tsx similarity index 100% rename from apps/web/src/app/(non-evm)/aptos/pool/ui/pools/tables/positions/cells/position-name-cell.tsx rename to apps/web/src/app/(non-evm)/aptos/pool/ui/tables/positions/cells/position-name-cell.tsx diff --git a/apps/web/src/app/(non-evm)/aptos/pool/ui/pools/tables/positions/cells/position-tvl-cell.tsx b/apps/web/src/app/(non-evm)/aptos/pool/ui/tables/positions/cells/position-tvl-cell.tsx similarity index 100% rename from apps/web/src/app/(non-evm)/aptos/pool/ui/pools/tables/positions/cells/position-tvl-cell.tsx rename to apps/web/src/app/(non-evm)/aptos/pool/ui/tables/positions/cells/position-tvl-cell.tsx diff --git a/apps/web/src/app/(non-evm)/aptos/pool/ui/pools/tables/positions/columns.tsx b/apps/web/src/app/(non-evm)/aptos/pool/ui/tables/positions/columns.tsx similarity index 100% rename from apps/web/src/app/(non-evm)/aptos/pool/ui/pools/tables/positions/columns.tsx rename to apps/web/src/app/(non-evm)/aptos/pool/ui/tables/positions/columns.tsx diff --git a/apps/web/src/app/(non-evm)/aptos/pool/ui/pools/tables/positions/pool-positions-table.tsx b/apps/web/src/app/(non-evm)/aptos/pool/ui/tables/positions/pool-positions-table.tsx similarity index 95% rename from apps/web/src/app/(non-evm)/aptos/pool/ui/pools/tables/positions/pool-positions-table.tsx rename to apps/web/src/app/(non-evm)/aptos/pool/ui/tables/positions/pool-positions-table.tsx index 4c55565e18..bcb8563a94 100644 --- a/apps/web/src/app/(non-evm)/aptos/pool/ui/pools/tables/positions/pool-positions-table.tsx +++ b/apps/web/src/app/(non-evm)/aptos/pool/ui/tables/positions/pool-positions-table.tsx @@ -3,9 +3,9 @@ import { Card, CardHeader, CardTitle, DataTable } from '@sushiswap/ui' import { PaginationState } from '@tanstack/react-table' import { ColumnDef, SortingState, TableState } from '@tanstack/react-table' import React, { useCallback, useMemo, useState } from 'react' +import { usePoolFilters } from 'src/ui/pool' import { PoolExtended } from '~aptos/pool/lib/use-pools-extended' import { useUserPositionPools } from '~aptos/pool/lib/use-user-position-pools' -import { usePoolFilters } from '../../filters/pool-filters-provider' import { MYPOSITION_TVL_COLUMN, NAME_COLUMN, TVL_COLUMN } from './columns' const COLUMNS = [ @@ -60,7 +60,7 @@ export const PositionsTable = () => { }, [pools, tokenSymbols]) const rowLink = useCallback((row: PoolExtended) => { - return `/aptos/pool/${row.id}` + return `/aptos/pool/v2/${row.id}` }, []) const state: Partial = useMemo(() => { diff --git a/apps/web/src/app/(non-evm)/aptos/pool/ui/pools/tables/types.ts b/apps/web/src/app/(non-evm)/aptos/pool/ui/tables/types.ts similarity index 100% rename from apps/web/src/app/(non-evm)/aptos/pool/ui/pools/tables/types.ts rename to apps/web/src/app/(non-evm)/aptos/pool/ui/tables/types.ts diff --git a/apps/web/src/app/(non-evm)/tron/(positions)/layout.tsx b/apps/web/src/app/(non-evm)/tron/(positions)/layout.tsx index 8e9af4f820..0e2e9aab83 100644 --- a/apps/web/src/app/(non-evm)/tron/(positions)/layout.tsx +++ b/apps/web/src/app/(non-evm)/tron/(positions)/layout.tsx @@ -2,43 +2,62 @@ import { Container, LinkInternal } from '@sushiswap/ui' import { useSearchParams } from 'next/navigation' -import React from 'react' +import React, { Suspense } from 'react' +import { POOL_SUPPORTED_NETWORKS } from 'src/config' import { PathnameButton, PoolsFiltersProvider } from 'src/ui/pool' +import { SidebarProvider, TronSidebarContainer } from 'src/ui/sidebar' +import { Header } from '~tron/header' import { Hero } from './hero' -export default function Layout({ +export default function PositionsLayout({ + children, +}: { children: React.ReactNode }) { + return ( + + {children} + + ) +} + +function Layout({ children, }: { children: React.ReactNode - params: { chainId: string } }) { const searchParams = useSearchParams() return ( - <> - - - - +
+ -
- + + + + - - My Positions - - - {/* + + + My Positions + + + {/* */} -
- -
-
- {children} -
-
- +
+ +
+
+ {children} +
+
+ + + ) } diff --git a/apps/web/src/app/(non-evm)/tron/_common/header-elements.tsx b/apps/web/src/app/(non-evm)/tron/_common/header-elements.tsx new file mode 100644 index 0000000000..6479693591 --- /dev/null +++ b/apps/web/src/app/(non-evm)/tron/_common/header-elements.tsx @@ -0,0 +1,67 @@ +import { + NavigationElement, + NavigationElementType, + NavigationListItem, + NavigationMenuContent, + NavigationMenuItem, + NavigationMenuTrigger, + OnramperButton, +} from '@sushiswap/ui' +import React from 'react' +import { EXPLORE_NAVIGATION_LINKS } from 'src/app/_common/header-elements' + +export const headerElements: NavigationElement[] = [ + { + title: 'Explore', + items: EXPLORE_NAVIGATION_LINKS(), + show: 'mobile', + type: NavigationElementType.Dropdown, + }, + { + show: 'desktop', + type: NavigationElementType.Custom, + href: '/swap', + item: ( + + Trade + +
    + + The easiest way to trade. + + + + Onramp with fiat. + + +
+ + + ), + }, + { + title: 'Explore', + href: `/tron/explore/pools`, + show: 'desktop', + type: NavigationElementType.Single, + }, + + { + title: 'Pool', + href: `/tron/pool`, + show: 'desktop', + type: NavigationElementType.Single, + }, + { + title: 'Stake', + href: '/stake', + show: 'desktop', + type: NavigationElementType.Single, + }, + // { + // title: 'More', + // items: MORE_NAVIGATION_LINKS, + // show: 'desktop', + // type: NavigationElementType.Dropdown, + // }, +] diff --git a/apps/web/src/app/(non-evm)/tron/explore/layout.tsx b/apps/web/src/app/(non-evm)/tron/explore/layout.tsx index 29b5075560..36e756bab7 100644 --- a/apps/web/src/app/(non-evm)/tron/explore/layout.tsx +++ b/apps/web/src/app/(non-evm)/tron/explore/layout.tsx @@ -1,8 +1,9 @@ import { Container } from '@sushiswap/ui' - -import React from 'react' -import { PoolsFiltersProvider } from 'src/ui/pool' +import { POOL_SUPPORTED_NETWORKS } from 'src/config' +import { SidebarProvider, TronSidebarContainer } from 'src/ui/sidebar' +import { Header } from '~tron/header' import { Hero } from './hero' +import { Providers } from './providers' export const metadata = { title: 'Pools 💦', @@ -12,15 +13,24 @@ export default function ExploreLayout({ children, }: { children: React.ReactNode }) { return ( - <> - - - -
-
- {children} -
-
- + +
+ +
+ + + +
+
+ {children} +
+
+
+ + ) } diff --git a/apps/web/src/app/(non-evm)/tron/explore/providers.tsx b/apps/web/src/app/(non-evm)/tron/explore/providers.tsx new file mode 100644 index 0000000000..4c8ba695d8 --- /dev/null +++ b/apps/web/src/app/(non-evm)/tron/explore/providers.tsx @@ -0,0 +1,12 @@ +'use client' + +import { Suspense } from 'react' +import { PoolsFiltersProvider } from 'src/ui/pool' + +export function Providers({ children }: { children: React.ReactNode }) { + return ( + + {children} + + ) +} diff --git a/apps/web/src/app/(non-evm)/tron/header.tsx b/apps/web/src/app/(non-evm)/tron/header.tsx index 42d453ef95..34e2c07b9c 100644 --- a/apps/web/src/app/(non-evm)/tron/header.tsx +++ b/apps/web/src/app/(non-evm)/tron/header.tsx @@ -1,77 +1,84 @@ 'use client' +import { ChevronDownIcon } from '@heroicons/react-v1/solid' import { + Badge, Navigation, - NavigationElement, - NavigationElementType, - NavigationListItem, - NavigationMenuContent, - NavigationMenuItem, - NavigationMenuTrigger, + SushiNavigationDropdown, + classNames, } from '@sushiswap/ui' -import React, { FC } from 'react' +import { NetworkIcon } from '@sushiswap/ui/icons/NetworkIcon' +import { SushiIcon } from '@sushiswap/ui/icons/SushiIcon' +import { SushiWithTextIcon } from '@sushiswap/ui/icons/SushiWithTextIcon' +import { useWallet } from '@tronweb3/tronwallet-adapter-react-hooks' +import React, { FC, Suspense } from 'react' +import { NonStandardChainId, SUPPORTED_NETWORKS } from 'src/config' +import { HeaderNetworkSelector } from 'src/lib/wagmi/components/header-network-selector' +import { SidebarToggle, useSidebar } from 'src/ui/sidebar' +import { useAccount, useChainId } from 'wagmi' +import { headerElements } from './_common/header-elements' +import { WalletConnector } from './_common/ui/WalletConnector/WalletConnector' -import { WalletConnector } from '~tron/_common/ui/WalletConnector/WalletConnector' +export const Header: FC = () => { + const { connected } = useWallet() -const nagivationElements: NavigationElement[] = [ - { - title: 'Explore', - items: [ - { - title: 'Swap', - href: '/swap', - description: 'The easiest way to trade.', - }, - { - title: 'Explore', - href: `/tron/explore/pools`, - description: 'Explore top pools.', - }, - { - title: 'Pool', - href: `/tron/pool`, - description: 'Earn fees by providing liquidity.', - }, - ], - type: NavigationElementType.Dropdown, - show: 'mobile', - }, - { - show: 'desktop', - type: NavigationElementType.Custom, - href: '/tron/swap', - item: ( - - Trade - -
    - - The easiest way to trade. - -
- - - ), - }, - { - title: 'Explore', - href: `/tron/explore/pools`, - show: 'desktop', - type: NavigationElementType.Single, - }, - { - title: 'Pool', - href: `/tron/pool`, - show: 'desktop', - type: NavigationElementType.Single, - }, -] + const evmChainId = useChainId() + + const { isConnected: isEVMConnected } = useAccount() + + const { isOpen } = useSidebar() -export const Header: FC = () => { return ( - } - /> +
+
+ + + + + + ) : ( +
+ ) + } + > + + + + +
+
+ + + +
+ + + + + } + /> +
) } diff --git a/apps/web/src/app/(non-evm)/tron/layout.tsx b/apps/web/src/app/(non-evm)/tron/layout.tsx index f74188769c..a178a392f6 100644 --- a/apps/web/src/app/(non-evm)/tron/layout.tsx +++ b/apps/web/src/app/(non-evm)/tron/layout.tsx @@ -1,6 +1,5 @@ import { Metadata } from 'next' import React from 'react' -import { Header } from './header' import { Providers } from './providers' export const metadata: Metadata = { @@ -17,10 +16,7 @@ export default function RootLayout({ }: { children: React.ReactNode }) { return ( -
-
- {children} -
+
{children}
 ) } diff --git a/apps/web/src/app/(non-evm)/tron/loading.tsx b/apps/web/src/app/(non-evm)/tron/loading.tsx deleted file mode 100644 index 75da76e366..0000000000 --- a/apps/web/src/app/(non-evm)/tron/loading.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import { Splash } from '@sushiswap/ui' -import React from 'react' - -export default function Loading() { - return -} diff --git a/apps/web/src/app/(non-evm)/tron/pool/[address]/page.tsx b/apps/web/src/app/(non-evm)/tron/pool/[address]/page.tsx index 8581713eb9..18d9ff15e9 100644 --- a/apps/web/src/app/(non-evm)/tron/pool/[address]/page.tsx +++ b/apps/web/src/app/(non-evm)/tron/pool/[address]/page.tsx @@ -44,7 +44,7 @@ export default function PoolByIdPage({ return ( -
+
+
+ +
{children}
+ + + ) +} diff --git a/apps/web/src/app/(non-evm)/tron/pool/not-found.tsx b/apps/web/src/app/(non-evm)/tron/pool/not-found.tsx deleted file mode 100644 index 3f5fbceee4..0000000000 --- a/apps/web/src/app/(non-evm)/tron/pool/not-found.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import { ChevronRightIcon } from '@heroicons/react/20/solid' -import { Button, LinkInternal, typographyVariants } from '@sushiswap/ui' - -export default function NotFound() { - return ( -
-
-

- Not Found -

-
- - -
-
-
- ) -} diff --git a/apps/web/src/app/(non-evm)/tron/pool/providers.tsx b/apps/web/src/app/(non-evm)/tron/pool/providers.tsx new file mode 100644 index 0000000000..f3cb6cc73d --- /dev/null +++ b/apps/web/src/app/(non-evm)/tron/pool/providers.tsx @@ -0,0 +1,7 @@ +'use client' + +import { PoolProvider } from '~tron/_common/ui/Pools/pool-provider' + +export function Providers({ children }: { children: React.ReactNode }) { + return {children} +} diff --git a/apps/web/src/app/(non-evm)/tron/providers.tsx b/apps/web/src/app/(non-evm)/tron/providers.tsx index 9b14f8ac52..bec76ba7d3 100644 --- a/apps/web/src/app/(non-evm)/tron/providers.tsx +++ b/apps/web/src/app/(non-evm)/tron/providers.tsx @@ -2,12 +2,13 @@ import '@tronweb3/tronwallet-adapter-react-ui/style.css' -import { BaseProviders } from '@sushiswap/ui' +import { BaseProviders, OnramperProvider } from '@sushiswap/ui' import { WalletError } from '@tronweb3/tronwallet-abstract-adapter' import { WalletProvider } from '@tronweb3/tronwallet-adapter-react-hooks' import { WalletModalProvider } from '@tronweb3/tronwallet-adapter-react-ui' import { useCallback } from 'react' import { QueryClientProvider } from 'src/providers/query-client-provider' +import { WagmiProvider } from 'src/providers/wagmi-provider' import { useWalletAdapters } from '~tron/_common/lib/hooks/useWalletAdapters' export function Providers({ children }: { children: React.ReactNode }) { @@ -22,12 +23,16 @@ export function Providers({ children }: { children: React.ReactNode }) { }, []) return ( - + - - {children} - + + + + {children} + + + - + ) } diff --git a/apps/web/src/app/(non-evm)/tron/swap/layout.tsx b/apps/web/src/app/(non-evm)/tron/swap/layout.tsx index d0841b0445..b232290327 100644 --- a/apps/web/src/app/(non-evm)/tron/swap/layout.tsx +++ b/apps/web/src/app/(non-evm)/tron/swap/layout.tsx @@ -1,3 +1,5 @@ +import { SidebarProvider, TronSidebarContainer } from 'src/ui/sidebar' +import { Header } from '~tron/header' import { Providers } from './providers' export const metadata = { @@ -11,7 +13,12 @@ export default function SwapLayout({ }: { children: React.ReactNode }) { return ( -
{children}
+ +
+ +
{children}
+ + ) } diff --git a/apps/web/src/config.ts b/apps/web/src/config.ts index ae2f97f9e6..f9ca77bf95 100644 --- a/apps/web/src/config.ts +++ b/apps/web/src/config.ts @@ -8,6 +8,7 @@ import { export const NonStandardChainId = { APTOS: 'aptos', + TRON: 'tron', } as const export type NonStandardChainId = @@ -32,10 +33,19 @@ export const NonStandardChain = { symbol: 'APT', decimals: 8, }, - shortName: 'aptos', chainId: 'aptos', }, + [NonStandardChainId.TRON]: { + name: 'Tron', + nativeCurrency: { + name: 'Tron', + symbol: 'TRX', + decimals: 6, + }, + shortName: 'tron', + chainId: 'tron', + }, } as Record export const SWAP_API_SUPPORTED_CHAIN_IDS = EXTRACTOR_SUPPORTED_CHAIN_IDS @@ -52,6 +62,7 @@ export const DISABLED_CHAIN_IDS = [ ChainId.PALM, ChainId.HECO, ChainId.OKEX, + // NonStandardChainId.TRON, ] as const export const NEW_CHAIN_IDS = [ChainId.MANTLE, ChainId.ZKSYNC_ERA] as const @@ -59,6 +70,7 @@ export const NEW_CHAIN_IDS = [ChainId.MANTLE, ChainId.ZKSYNC_ERA] as const const PREFERRED_CHAINID_ORDER = [ ...NEW_CHAIN_IDS, ChainId.ETHEREUM, + NonStandardChainId.TRON, ChainId.BSC, ChainId.ARBITRUM, ChainId.BASE, @@ -130,14 +142,13 @@ export const isSupportedChainId = ( ): chainId is SupportedChainId => SUPPORTED_CHAIN_IDS.includes(chainId as SupportedChainId) -export const SUPPORTED_NON_STANDARD_NETWORKS = [ - NonStandardChainId.APTOS, -] as const - const UNSORTED_SUPPORTED_NETWORKS = [ ...SUPPORTED_CHAIN_IDS, - ...SUPPORTED_NON_STANDARD_NETWORKS, -] + NonStandardChainId.APTOS, + NonStandardChainId.TRON, +].filter( + (c) => !DISABLED_CHAIN_IDS.includes(c as (typeof DISABLED_CHAIN_IDS)[number]), +) export const SUPPORTED_NETWORKS = Array.from( new Set([ @@ -153,7 +164,10 @@ export const SUPPORTED_NETWORKS = Array.from( const UNSORTED_POOL_SUPPORTED_NETWORKS = [ ...PoolChainIds, NonStandardChainId.APTOS, -] + NonStandardChainId.TRON, +].filter( + (c) => !DISABLED_CHAIN_IDS.includes(c as (typeof DISABLED_CHAIN_IDS)[number]), +) export const POOL_SUPPORTED_NETWORKS = Array.from( new Set([ diff --git a/apps/web/src/lib/network.ts b/apps/web/src/lib/network.ts index 4a4d02d4ef..3918e236cd 100644 --- a/apps/web/src/lib/network.ts +++ b/apps/web/src/lib/network.ts @@ -7,11 +7,18 @@ export const getNetworkName = (network: ChainId | NonStandardChainId) => { : NonStandardChain[network].name } +export const getNetworkKey = (network: ChainId | NonStandardChainId) => { + return typeof network === 'number' ? ChainKey[network] : network +} + export const replaceNetworkSlug = ( - pathname: string, network: ChainId | NonStandardChainId, + pathname: string, ) => { + if (pathname.includes('/pool/')) { + return `/${getNetworkKey(network)}/explore/pools` + } const pathSegments = pathname.split('/') - pathSegments[1] = typeof network === 'number' ? ChainKey[network] : network + pathSegments[1] = getNetworkKey(network) return pathSegments.join('/') } diff --git a/apps/web/src/lib/wagmi/components/network-selector.tsx b/apps/web/src/lib/wagmi/components/network-selector.tsx index 8adc69bc78..a3db09859a 100644 --- a/apps/web/src/lib/wagmi/components/network-selector.tsx +++ b/apps/web/src/lib/wagmi/components/network-selector.tsx @@ -53,7 +53,7 @@ const NetworkSelector = ({ isNonStandardChainId(pathSegments[1]) ) { push( - replaceNetworkSlug(pathname, network as ChainId | NonStandardChainId), + replaceNetworkSlug(network as ChainId | NonStandardChainId, pathname), { scroll: false }, ) } else if (isNonStandardChainId(network.toString())) { diff --git a/apps/web/src/ui/pool/TableFiltersNetwork.tsx b/apps/web/src/ui/pool/TableFiltersNetwork.tsx index db455a1693..afcd73bdff 100644 --- a/apps/web/src/ui/pool/TableFiltersNetwork.tsx +++ b/apps/web/src/ui/pool/TableFiltersNetwork.tsx @@ -45,10 +45,10 @@ export const TableFiltersNetwork: FC<{ const network = value.split('__')[1] push( replaceNetworkSlug( - pathname, isChainId(+network) ? (+network as ChainId) : (network as NonStandardChainId), + pathname, ), { scroll: false }, ) diff --git a/apps/web/src/ui/sidebar/index.tsx b/apps/web/src/ui/sidebar/index.tsx index 81f3384bf4..f1176dc603 100644 --- a/apps/web/src/ui/sidebar/index.tsx +++ b/apps/web/src/ui/sidebar/index.tsx @@ -13,6 +13,7 @@ import { classNames, } from '@sushiswap/ui' import { NetworkIcon } from '@sushiswap/ui/icons/NetworkIcon' +import { useWallet as useTronWallet } from '@tronweb3/tronwallet-adapter-react-hooks' import { usePathname, useRouter } from 'next/navigation' import { Dispatch, @@ -29,8 +30,8 @@ import { NonStandardChainId, SUPPORTED_NETWORKS, } from 'src/config' -import { getNetworkName } from 'src/lib/network' -import { ChainId, ChainKey, isChainId } from 'sushi/chain' +import { getNetworkName, replaceNetworkSlug } from 'src/lib/network' +import { ChainId, isChainId } from 'sushi/chain' import { useAccount } from 'wagmi' interface SidebarContextType { @@ -118,6 +119,8 @@ export const EVMSidebarContainer: FC< return } +export const SidebarContainer = EVMSidebarContainer + export const AptosSidebarContainer: FC< Omit > = (props) => { @@ -126,7 +129,7 @@ export const AptosSidebarContainer: FC< return ( +> = (props) => { + const { connected } = useTronWallet() + + return ( + + ) +} interface SidebarProps { selectedNetwork?: number | string @@ -163,12 +178,16 @@ const Sidebar: FC = ({ const onSelect = useCallback( (value: string) => { const network = value.split('__')[1] - const pathSegments = pathname.split('/') - pathSegments[1] = isChainId(+network) - ? ChainKey[+network as ChainId] - : network - push(pathSegments.join('/'), { scroll: false }) + push( + replaceNetworkSlug( + isChainId(+network) + ? (+network as ChainId) + : (network as NonStandardChainId), + pathname, + ), + { scroll: false }, + ) }, [pathname, push], ) @@ -217,11 +236,12 @@ const Sidebar: FC = ({ - ) : ( -
- ) +
} > diff --git a/packages/ui/src/icons/network/circle/MantleCircle.tsx b/packages/ui/src/icons/network/circle/MantleCircle.tsx index 4fc18a4846..339f51e2fd 100644 --- a/packages/ui/src/icons/network/circle/MantleCircle.tsx +++ b/packages/ui/src/icons/network/circle/MantleCircle.tsx @@ -7,12 +7,6 @@ import { IconComponent } from '../../../types' export const MantleCircle: IconComponent = (props) => ( - - - - - } + circle={} /> ) diff --git a/packages/ui/src/icons/network/circle/index.tsx b/packages/ui/src/icons/network/circle/index.tsx index 771e4b3a6f..d55ff2a997 100644 --- a/packages/ui/src/icons/network/circle/index.tsx +++ b/packages/ui/src/icons/network/circle/index.tsx @@ -39,6 +39,7 @@ import { ScrollCircle } from './ScrollCircle' import { SkaleCircle } from './SkaleCircle' import { TelosCircle } from './TelosCircle' import { ThunderCoreCircle } from './ThunderCoreCircle' +import { TronCircle } from './TronCircle' import { ZKSyncCircle } from './ZKSyncCircle' import { ZetaChainCircle } from './ZetaChainCircle' @@ -127,4 +128,5 @@ export const NETWORK_CIRCLE_ICON: Partial< [ChainId.CRONOS]: CronosCircle, [ChainId.MANTLE]: MantleCircle, aptos: AptosCircle, + tron: TronCircle, } diff --git a/packages/ui/src/icons/network/naked/MantleNaked.tsx b/packages/ui/src/icons/network/naked/MantleNaked.tsx index acfe7d0fd9..9f20f5b1f6 100644 --- a/packages/ui/src/icons/network/naked/MantleNaked.tsx +++ b/packages/ui/src/icons/network/naked/MantleNaked.tsx @@ -2,27 +2,27 @@ import React from 'react' import { NakedNetworkIconComponent } from '../../../types' -export const MantleNaked: NakedNetworkIconComponent = (props) => { +export const MantleNaked: NakedNetworkIconComponent = ({ + circle, + ...props +}) => { return ( - {props.circle} - - - - - + {circle ? circle : } + + ) } diff --git a/packages/ui/src/icons/network/naked/TronNaked.tsx b/packages/ui/src/icons/network/naked/TronNaked.tsx index a64d31b78c..ed688f0c13 100644 --- a/packages/ui/src/icons/network/naked/TronNaked.tsx +++ b/packages/ui/src/icons/network/naked/TronNaked.tsx @@ -3,16 +3,16 @@ import * as React from 'react' import classNames from 'classnames' import { NakedNetworkIconComponent } from '../../../types' -export const TronNaked: NakedNetworkIconComponent = (props) => ( +export const TronNaked: NakedNetworkIconComponent = ({ circle, ...props }) => ( - {props.circle} - + {circle} + diff --git a/packages/ui/src/icons/network/naked/index.tsx b/packages/ui/src/icons/network/naked/index.tsx index 42b6c4ea95..2495bcff19 100644 --- a/packages/ui/src/icons/network/naked/index.tsx +++ b/packages/ui/src/icons/network/naked/index.tsx @@ -39,6 +39,7 @@ import { ScrollNaked } from './ScrollNaked' import { SkaleNaked } from './SkaleNaked' import { TelosNaked } from './TelosNaked' import { ThunderCoreNaked } from './ThunderCoreNaked' +import { TronNaked } from './TronNaked' import { ZKSyncNaked } from './ZKSyncNaked' import { ZetaChainNaked } from './ZetaChainNaked' @@ -126,4 +127,5 @@ export const NETWORK_NAKED_ICON: Partial< [ChainId.CRONOS]: CronosNaked, [ChainId.MANTLE]: MantleNaked, aptos: AptosNaked, + tron: TronNaked, }