Feature: swapping guide (#7864)

Author: gregfromstl

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/AdvancedSection.client.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { CodeIcon, WebhookIcon } from "lucide-react";
+import { ArrowRightLeftIcon, CodeIcon, WebhookIcon } from "lucide-react";
 import { FeatureCard } from "./FeatureCard.client";
 
 export function AdvancedSection({
@@ -45,6 +45,19 @@ export function AdvancedSection({
             label: "Setup Webhooks",
           }}
         />
+        <FeatureCard
+          title="Swap Tokens"
+          icon={ArrowRightLeftIcon}
+          setupTime={5}
+          color="green"
+          id="swap_tokens"
+          features={["Swap any token", "Cross-chain swaps"]}
+          description="Swap tokens cross-chain with dedicated swapping endpoints."
+          link={{
+            href: `/team/${teamSlug}/${projectSlug}/payments/swap`,
+            label: "Setup Swaps",
+          }}
+        />
       </div>
     </section>
   );

apps/portal/src/app/payments/sidebar.tsx

@@ -41,6 +41,10 @@ export const sidebar: SideBar = {
           href: `${paymentsSlug}/sell`,
           name: "Sell Tokens",
         },
+        {
+          href: `${paymentsSlug}/swap`,
+          name: "Swap Tokens",
+        },
         {
           href: `${paymentsSlug}/tokens`,
           name: "Get Token Prices",