Merge remote-tracking branch 'origin' into kien/dynamic-load-extensions-list

Author: kien-ngo

src/app/connect/auth/page.mdx

@@ -80,16 +80,24 @@ export default function App() {
 				client={client}
 				auth={{
 					getLoginPayload: async (params) => {
+						// here you should call your backend, using generatePayload to return 
+						// a SIWE compliant login payload to the client
 						return thirdwebAuth.generatePayload(params)
 					},
 					doLogin: async (params) => {
-						const verifiedPayload = await thirdwebAuth.verifyPayload(params);
+             					// here you should call your backend to verify the signed payload passed in params
+						// this will verify that the signature matches the intended wallet
+						const verifiedPayload = await thirdwebAuth.verifyPayload(params); 						
 						setLoggedIn(verifiedPayload.valid)
 					},
 					isLoggedIn: async () => {
+						// here you should ask you backend if the user is logged in
+						// can use cookies, storage, or your method of choice
 						return loggedIn;
 					},
 					doLogout: async () => {
+						// here you should call your backend to logout the user if needed
+						// and delete any local auth tokens
 						setLoggedIn(false);
 					}
 				}}

src/app/connect/ecosystems/overview/page.mdx

@@ -58,6 +58,6 @@ An ecosystem wallet is your own managed in-app wallet service that allows you to
 
 ## Pricing
 
-Ecosystem Wallets start at $250/mo per instance. Instances allow for up to 30,000 in-app wallets per month and $0.02 per additional in-app wallet.
+Ecosystem Wallets start at $250/mo per instance. Instances allow for up to 30,000 monthly active in-app wallets and $0.02 per additional monthly active in-app wallet.
 
 For pricing on unlimited wallets, contact our sales team.

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,
-		}
+		},
 	}}
 />
 ```

src/app/connect/pay/customization/payembed/page.mdx

@@ -11,7 +11,7 @@ export const metadata = createMetadata({
 
 # PayEmbed Customization
 
-Learn how to customize the `PayEmbed`. You can find a selection of popular customizations below. For the full list of props, you can [view the full reference](/references/typescript/v5/payembedprops).
+Learn how to customize the `PayEmbed`. You can find a selection of popular customizations below. For the full list of props, you can [view the full reference](/references/typescript/v5/PayEmbedProps).
 
 ---
 

src/app/connect/pay/overview/page.mdx

@@ -59,6 +59,11 @@ Pay allows your users to purchase cryptocurrencies and execute transactions with
     	description="Use pre-built modals or customize the transaction experience"
     		iconUrl="/icons/feature-cards/integration-options.svg"
     />
+        <FeatureCard
+    	title="Secure"
+    	description="Strict one-time approvals mean user funds are not at risk of smart contract allowance exploits"
+    		iconUrl="/icons/feature-cards/security.svg"
+    />
 
 </div>
 

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>

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`,

src/app/engine/features/security/page.mdx

@@ -0,0 +1,26 @@
+import { Details, Callout, DocImage } from "@doc";
+import { createMetadata } from "@doc";
+
+export const metadata = createMetadata({
+	title: "Security | thirdweb Engine",
+	description:
+		"thirdweb Engine provides you with security features to configure and restrict access.",
+});
+
+# Security
+
+Engine provides you with security features to configure and restrict access to sensitive operations.
+
+## IP Allowlist
+
+You can restrict access to your Engine instance by configuring an IP allowlist. This can be configured in the **Configuration** section of the [Engine dashboard](https://thirdweb.com/dashboard/engine/).
+If an IP allowlist is not configured, Engine will allow all incoming requests.
+
+<Callout variant="info" title="Note">
+	This does not affect calls from the Engine dashboard to your Engine instance.
+</Callout>
+
+## Domain Allowlist (CORS)
+
+You can restrict access to your Engine instance by configuring a domain allowlist. This can be configured in the **Configuration** section of the [Engine dashboard](https://thirdweb.com/dashboard/engine/).
+Multiple domains can be added to the allowlist, and Engine will only accept requests from these domains. A wildcard domain can also be added to allow requests from any domain.

src/app/engine/self-host/page.mdx

@@ -64,6 +64,7 @@ docker run \
 | `LOG_LEVEL`                                                    | Determines the logging severity level. Adjust for finer control over logged information. (Default: `debug`)                 |
 | `PRUNE_TRANSACTIONS`                                           | When `false`, Engine prevents the pruning/deletion of processed transaction data. (Default: `true`)                         |
 | `ENABLE_KEYPAIR_AUTH`                                          | Enables [Keypair Authentication](/engine/features/keypair-authentication).                                                  |
+| `TRUST_PROXY`                                                  | When `true`, trust the `X-Forwarded-For` header to allow Engine to use the correct client IP address for the IP allowlist.  |
 
 <span style={{ color: "red" }}>*</span> Required
 
@@ -129,8 +130,6 @@ See [Production Checklist](/engine/production-checklist#cloud-hosting) for best
   - Minimum specs: 2 vCPU, 2 GB memory (AWS equivalent: t4g.small)
   - Set the `connection_limit` parameter within your `POSTGRES_CONNECTION_URL` environment variable to `10`.
 
-### FAQ
-
 #### How do I filter logs in Engine?
 
 Configure log verbosity via the `LOG_LEVEL` environment variable.
@@ -168,3 +167,7 @@ Example configuration:
 ```bash
 POSTGRES_CONNECTION_URL=postgres://postgres:postgres@localhost:5432/postgres?connection_limit=10
 ```
+
+#### What is `x-forwarded-for` and how does it affect Engine?
+
+If you have engine running on a server behind a reverse proxy, you can set the `TRUST_PROXY` environment variable to `true` to trust the `X-Forwarded-For` header. Reverse proxies like Nginx or Apache will add this header to the request with the original client IP address, and setting this variable will allow Engine to use the correct IP address for the IP Allowlist. For more details on IP Allowlisting, refer to the [Security Features](/engine/features/security) page.

src/app/engine/sidebar.tsx

@@ -68,6 +68,10 @@ export const sidebar: SideBar = {
 					name: "Contract Subscriptions",
 					href: `${engineSlug}/features/contract-subscriptions`,
 				},
+				{
+					name: "Security",
+					href: `${engineSlug}/features/security`,
+				},
 			],
 		},
 		{