From 51c39a513e7f872717975e9ea256bdce6b0ddbad Mon Sep 17 00:00:00 2001
From: Ian Mukherjee <ian@thirdweb.com>
Date: Wed, 17 Jul 2024 11:24:30 -0400
Subject: [PATCH] Add test mode page and fix customization page broken links

---
 .../pay/customization/connectbutton/page.mdx  | 32 ++++----
 src/app/connect/pay/test-mode/page.mdx        | 78 +++++++++++++++++++
 src/app/connect/sidebar.tsx                   |  5 +-
 3 files changed, 98 insertions(+), 17 deletions(-)
 create mode 100644 src/app/connect/pay/test-mode/page.mdx

diff --git a/src/app/connect/pay/customization/connectbutton/page.mdx b/src/app/connect/pay/customization/connectbutton/page.mdx
index a58878aa..f9763114 100644
--- a/src/app/connect/pay/customization/connectbutton/page.mdx
+++ b/src/app/connect/pay/customization/connectbutton/page.mdx
@@ -11,7 +11,7 @@ export const metadata = createMetadata({
 
 # Customize ConnectButton
 
-Learn how to customize Pay within the `ConnectButton` interface. You can find a selection of popular customizations below. For the full list of props, you can [view the full reference](/references/typescript/v5/connectbuttonprops).
+Learn how to customize Pay within the `ConnectButton` interface. You can find a selection of popular customizations below. For the full list of props, you can [view the full reference](/references/typescript/v5/ConnectButtonProps).
 
 ---
 
@@ -51,21 +51,21 @@ import { base } from "thirdweb/chains";
 	detailsModal={{
 		payOptions: {
 			prefillBuy: {
-			token: {
-				address: "0x866a087038f7C12cf33EF91aC5b1AcE6Ac1DA788",
-				name: "Base ETH",
-				symbol: "ETH",
-				icon: "...", // optional
-			},
-			chain: base,
-			allowEdits: {
-				amount: true, // allow editing buy amount
-				token: false, // disable selecting buy token
-				chain: false, // disable selecting buy chain
+				token: {
+					address: "0x866a087038f7C12cf33EF91aC5b1AcE6Ac1DA788",
+					name: "Base ETH",
+					symbol: "ETH",
+					icon: "...", // optional
+				},
+				chain: base,
+				allowEdits: {
+					amount: true, // allow editing buy amount
+					token: false, // disable selecting buy token
+					chain: false, // disable selecting buy chain
+				},
 			},
 		},
 	}}
-	}
 />;
 ```
 
@@ -79,7 +79,7 @@ If you'd like to prefill a purchase with a native token, you can set the chain w
 			prefillBuy: {
 				chain: base,
 			},
-		}
+		},
 	}}
 />
 ```
@@ -98,7 +98,7 @@ In some cases, you may only want to show users fiat or crypto payment options fo
 	detailsModal={{
 		payOptions: {
 			buyWithCrypto: false,
-		}
+		},
 	}}
 />
 ```
@@ -111,7 +111,7 @@ In some cases, you may only want to show users fiat or crypto payment options fo
 	detailsModal={{
 		payOptions: {
 			buyWithFiat: false,
-		}
+		},
 	}}
 />
 ```
diff --git a/src/app/connect/pay/test-mode/page.mdx b/src/app/connect/pay/test-mode/page.mdx
new file mode 100644
index 00000000..b094a5df
--- /dev/null
+++ b/src/app/connect/pay/test-mode/page.mdx
@@ -0,0 +1,78 @@
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { createMetadata, Callout } from "@doc";
+
+export const metadata = createMetadata({
+	image: {
+		title: "thirdweb Pay - Test Mode",
+		icon: "thirdweb",
+	},
+	title: "thirdweb Pay - Test Mode - thirdweb",
+	description: "thirdweb Pay - Test Mode",
+});
+
+# Enable Test Mode
+
+Developers can turn on Buy With Fiat Test Mode to test fiat-to-crypto transactions through our onramp providers.
+
+<Callout variant="info">
+
+    Crypto-to-crypto transactions will remain on mainnet during test mode as Pay
+    does not currently support testnets.
+
+</Callout>
+
+<Tabs defaultValue="connectbutton">
+
+<TabsList>
+	<TabsTrigger value="connectbutton">ConnectButton</TabsTrigger>
+	<TabsTrigger value="payembed">PayEmbed</TabsTrigger>
+	<TabsTrigger value="sendtxn">sendTransaction</TabsTrigger>
+</TabsList>
+
+<TabsContent value='connectbutton'>
+
+```tsx
+<ConnectButton
+	client={client}
+	detailsModal={{
+		payOptions: {
+			buyWithFiat: {
+				testMode: true, // defaults to false
+			},
+		},
+	}}
+/>
+```
+
+</TabsContent>
+
+<TabsContent value="payembed">
+
+```tsx
+<PayEmbed
+	client={client}
+	payOptions={{
+		buyWithFiat: {
+			testMode: true, // defaults to false
+		},
+	}}
+/>
+```
+
+</TabsContent>
+
+<TabsContent value="sendtxn">
+
+```tsx
+const { mutate: sendTransaction } = useSendTransaction({
+	payModal: {
+		buyWithFiat: {
+			testMode: true, // defaults to false
+		},
+	},
+});
+```
+
+</TabsContent>
+
+</Tabs>
diff --git a/src/app/connect/sidebar.tsx b/src/app/connect/sidebar.tsx
index 3fd27ba5..5badc6f3 100644
--- a/src/app/connect/sidebar.tsx
+++ b/src/app/connect/sidebar.tsx
@@ -384,7 +384,6 @@ export const sidebar: SideBar = {
 		{
 			name: "Pay",
 			icon: <PayIcon />,
-			// isCollapsible: true,
 			links: [
 				{
 					name: "Overview",
@@ -452,6 +451,10 @@ export const sidebar: SideBar = {
 						},
 					],
 				},
+				{
+					name: "Enable Test Mode",
+					href: `${paySlug}/test-mode`,
+				},
 				{
 					name: "Build a Custom Experience",
 					href: `${paySlug}/build-a-custom-experience`,