Add URL swapping for marketplace based on environment (#8418)

### Fixes #8371

These changes are needed to automatically switch between local and
production marketplace URLs, ensuring the app connects to the correct
environment (dev or prod) without manual intervention.

### Changes 🏗️

1. Swaps marketplace URL based on APP_ENV (dev or prod).
2. Ensures correct URL is used for local or production environments.

Co-authored-by: Nicholas Tindle <[email protected]>
Co-authored-by: Aarushi <[email protected]>

autogpt_platform/frontend/.env.example

@@ -2,6 +2,7 @@ NEXT_PUBLIC_AUTH_CALLBACK_URL=http://localhost:8006/auth/callback
 NEXT_PUBLIC_AGPT_SERVER_URL=http://localhost:8006/api
 NEXT_PUBLIC_AGPT_WS_SERVER_URL=ws://localhost:8001/ws
 NEXT_PUBLIC_AGPT_MARKETPLACE_URL=http://localhost:8015/api/v1/market
+NEXT_PUBLIC_APP_ENV=dev
 
 ## Supabase credentials
 
@@ -15,4 +16,4 @@ AUTH_CALLBACK_URL=http://localhost:3000/auth/callback
 GA_MEASUREMENT_ID=G-FH2XK2W4GN
 
 # When running locally, set NEXT_PUBLIC_BEHAVE_AS=CLOUD to use the a locally hosted marketplace (as is typical in development, and the cloud deployment), otherwise set it to LOCAL to have the marketplace open in a new tab
-NEXT_PUBLIC_BEHAVE_AS=LOCAL
+NEXT_PUBLIC_BEHAVE_AS=LOCAL

autogpt_platform/frontend/src/components/nav/MarketPopup.tsx

@@ -7,7 +7,15 @@ interface MarketPopupProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 
 export default function MarketPopup({
   className = "",
-  marketplaceUrl = "http://platform.agpt.co/marketplace",
+  marketplaceUrl = (() => {
+    if (process.env.NEXT_PUBLIC_APP_ENV === "prod") {
+      return "https://production-marketplace-url.com";
+    } else if (process.env.NEXT_PUBLIC_APP_ENV === "dev") {
+      return "https://dev-builder.agpt.co/marketplace";
+    } else {
+      return "http://localhost:3000/marketplace";
+    }
+  })(),
   children,
   ...props
 }: MarketPopupProps) {