diff --git a/apps/hyperdrive-trading/src/ui/analytics/Plausible.tsx b/apps/hyperdrive-trading/src/ui/analytics/Plausible.tsx index fe80e9a5d..697fe0f05 100644 --- a/apps/hyperdrive-trading/src/ui/analytics/Plausible.tsx +++ b/apps/hyperdrive-trading/src/ui/analytics/Plausible.tsx @@ -115,6 +115,13 @@ export interface PlausibleEventParamsMap { }; }; + aboutPoolOpen: { + props: { + chainId: number; + poolAddress: Address; + }; + }; + positionTypeChange: { props: { chainId: number; diff --git a/apps/hyperdrive-trading/src/ui/markets/PoolDetails.tsx b/apps/hyperdrive-trading/src/ui/markets/PoolDetails.tsx index dddd0afd2..5c83f1a69 100644 --- a/apps/hyperdrive-trading/src/ui/markets/PoolDetails.tsx +++ b/apps/hyperdrive-trading/src/ui/markets/PoolDetails.tsx @@ -1,14 +1,21 @@ import { appConfig, + getBaseToken, + getToken, getYieldSource, HyperdriveConfig, + makeAddressUrl, } from "@delvtech/hyperdrive-appconfig"; import { ArrowLeftIcon } from "@heroicons/react/16/solid"; +import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline"; import { Link, useSearch } from "@tanstack/react-router"; import classNames from "classnames"; import { ReactElement } from "react"; +import { ExternalLink } from "src/ui/analytics/ExternalLink"; import { AccordionSection2 } from "src/ui/base/components/AccordionSection/AccordionSection"; import CustomBanner from "src/ui/base/components/CustomBanner"; +import { LabelValue } from "src/ui/base/components/LabelValue"; +import { formatAddress } from "src/ui/base/formatting/formatAddress"; import { useMarketState } from "src/ui/hyperdrive/hooks/useMarketState"; import { OpenLongForm } from "src/ui/hyperdrive/longs/OpenLongForm/OpenLongForm"; import { AddLiquidityForm } from "src/ui/hyperdrive/lp/AddLiquidityForm/AddLiquidityForm"; @@ -75,11 +82,132 @@ export function PoolDetails({ } })()} + ); } +function AboutThisPool({ + hyperdrive, +}: { + hyperdrive: HyperdriveConfig; +}): ReactElement { + const baseToken = getBaseToken({ + appConfig, + hyperdriveAddress: hyperdrive.address, + hyperdriveChainId: hyperdrive.chainId, + }); + const sharesToken = getToken({ + appConfig, + chainId: hyperdrive.chainId, + tokenAddress: hyperdrive.poolConfig.vaultSharesToken, + }); + const chainConfig = appConfig.chains[hyperdrive.chainId]; + return ( + // Add mx-2 so the FAQ lines up with the rest of the form +
+
+ +

Pool Information

+
+ } + onChange={(open) => + open && + window.plausible("aboutPoolOpen", { + props: { + chainId: hyperdrive.chainId, + poolAddress: hyperdrive.address, + }, + }) + } + > +
+ + + {chainConfig.name} +
+ } + /> + +
+ {formatAddress(hyperdrive.address)} + +
+ + } + /> + +
+ + {formatAddress(baseToken.address)} + +
+ + } + /> + {sharesToken ? ( + +
+ + {formatAddress(sharesToken.address)} + +
+ + } + /> + ) : null} +
+ + + + ); +} function FAQ() { const { address: account } = useAccount(); return (