diff --git a/apps/developer-hub/content/docs/express-relay/index.mdx b/apps/developer-hub/content/docs/express-relay/index.mdx index a466db4185..0f10295067 100644 --- a/apps/developer-hub/content/docs/express-relay/index.mdx +++ b/apps/developer-hub/content/docs/express-relay/index.mdx @@ -1,10 +1,69 @@ --- -title: Overview -description: A placeholder landing page -icon: CardsThree +title: "Express Relay: Eliminate MEV with Priority Auctions" +description: >- + Express Relay enables better orderflow mechanisms that eliminate MEV. Protocol developers can recapture MEV while searchers get unified access to opportunities. +icon: Gavel full: true --- -# Take Back Control with Express Relay +# Introduction -Integrate directly with searchers to recapture MEV. Go to market faster. Accelerate your protocol's growth. +Express Relay is a priority auction which enables better orderflow mechanisms that eliminate [Maximal Extractable Value](https://www.ledger.com/academy/glossary/maximal-extractable-value-mev) (MEV). + +- **For Protocol Developers:** Express Relay allows protocols to recapture MEV and access a network of searchers for more competitive pricing than on-chain sources provide. + With Express Relay, protocols get access to plug-and-play liquidity. + +- **For Searchers:** Express Relay provides easy and unified access to a range of orderflow opportunities across integrated DeFi protocols. + +## Integration + +To integrate with Express Relay, you can integrate as a protocol (to power token swaps) or as a searcher. + +
+ + + + } + /> + + + + + } + /> +
+ +## Learn + +To learn more about Express Relay, refer to the following resources: + +
+ + + + } + /> +
diff --git a/apps/developer-hub/src/components/IntegrationCard/index.tsx b/apps/developer-hub/src/components/IntegrationCard/index.tsx new file mode 100644 index 0000000000..80467970e0 --- /dev/null +++ b/apps/developer-hub/src/components/IntegrationCard/index.tsx @@ -0,0 +1,56 @@ +type IntegrationCardProps = { + href: string; + icon: React.ReactNode; + title: string; + description: string; + colorScheme?: "blue" | "green" | "purple"; +}; + +export const IntegrationCard = ({ + href, + icon, + title, + description, + colorScheme = "blue", +}: IntegrationCardProps) => { + const colorClasses = { + blue: { + bg: "bg-blue-100 dark:bg-blue-900", + text: "text-blue-600 dark:text-blue-400", + hoverText: "group-hover:text-blue-600 dark:group-hover:text-blue-400", + }, + green: { + bg: "bg-green-100 dark:bg-green-900", + text: "text-green-600 dark:text-green-400", + hoverText: "group-hover:text-green-600 dark:group-hover:text-green-400", + }, + purple: { + bg: "bg-purple-100 dark:bg-purple-900", + text: "text-purple-600 dark:text-purple-400", + hoverText: "group-hover:text-purple-600 dark:group-hover:text-purple-400", + }, + }; + + const colors = colorClasses[colorScheme]; + + return ( + +
+
+
{icon}
+
+

+ {title} +

+
+

{description}

+
+ ); +}; diff --git a/apps/developer-hub/src/mdx-components.tsx b/apps/developer-hub/src/mdx-components.tsx index c6a3bb3106..d13fc7ba15 100644 --- a/apps/developer-hub/src/mdx-components.tsx +++ b/apps/developer-hub/src/mdx-components.tsx @@ -3,6 +3,8 @@ import { Tab, Tabs } from "fumadocs-ui/components/tabs"; import defaultMdxComponents from "fumadocs-ui/mdx"; import type { MDXComponents } from "mdx/types"; +import { IntegrationCard } from "./components/IntegrationCard"; + export function getMDXComponents(components?: MDXComponents): MDXComponents { return { ...defaultMdxComponents, @@ -12,5 +14,6 @@ export function getMDXComponents(components?: MDXComponents): MDXComponents { InfoBox: InfoBox, // Fuma has a Callout component in `defaultMdxComponents` which we still want to overwrite Callout: InfoBox, + IntegrationCard, }; }