hook up purchase server modal in app

apps/app-frontend/src/config.ts

@@ -0,0 +1,7 @@
+// src/config.ts
+export const config = {
+	siteUrl: import.meta.env.VITE_SITE_URL,
+	stripePublishableKey:
+		import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY ||
+		'pk_test_51JbFxJJygY5LJFfKV50mnXzz3YLvBVe2Gd1jn7ljWAkaBlRz3VQdxN9mXcPSrFbSqxwAb0svte9yhnsmm7qHfcWn00R611Ce7b',
+}

apps/app-frontend/src/pages/Servers.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
+import { injectModrinthClient, ServersManagePageIndex } from '@modrinth/ui'
+import { useQuery } from '@tanstack/vue-query'
+import { computed } from 'vue'
+import { config } from '../config'
+
+const stripePublishableKey = (config.stripePublishableKey as string) || ''
+
+const client = injectModrinthClient()
+
+const { data: products } = useQuery({
+	queryKey: ['billing', 'products'],
+	queryFn: () => client.labrinth.billing_internal.getProducts(),
+})
+
+const resolvedProducts = computed<Labrinth.Billing.Internal.Product[]>(() => products.value ?? [])
+</script>
+
+<template>
+	<ServersManagePageIndex
+		:stripe-publishable-key="stripePublishableKey"
+		:site-url="'https://modrinth.com'"
+		:products="resolvedProducts"
+	/>
+</template>

apps/app-frontend/src/pages/index.js

@@ -1,6 +1,7 @@
 import Browse from './Browse.vue'
 import Index from './Index.vue'
+import Servers from './Servers.vue'
 import Skins from './Skins.vue'
 import Worlds from './Worlds.vue'
 
-export { Browse, Index, Skins, Worlds }
+export { Browse, Index, Servers, Skins, Worlds }

apps/app-frontend/src/routes.js

@@ -1,4 +1,3 @@
-import { ServersManagePageIndex } from '@modrinth/ui'
 import { createRouter, createWebHistory } from 'vue-router'
 
 import * as Pages from '@/pages'
@@ -31,7 +30,7 @@ export default new createRouter({
 		{
 			path: '/hosting/manage/',
 			name: 'Servers',
-			component: ServersManagePageIndex,
+			component: Pages.Servers,
 			meta: {
 				breadcrumb: [{ name: 'Servers' }],
 			},

apps/app-frontend/tsconfig.app.json

@@ -16,6 +16,8 @@
 
 		"strict": true,
 
+		"types": ["vite/client"],
+
 		"paths": {
 			"@/*": ["./src/*"]
 		}

apps/app/tauri.conf.json

@@ -87,12 +87,12 @@
 			"capabilities": ["ads", "core", "plugins"],
 			"csp": {
 				"default-src": "'self' customprotocol: asset:",
-				"connect-src": "ipc: http://ipc.localhost https://modrinth.com https://*.modrinth.com https://*.posthog.com https://*.sentry.io https://api.mclo.gs http://textures.minecraft.net https://textures.minecraft.net 'self' data: blob:",
+				"connect-src": "ipc: http://ipc.localhost https://modrinth.com https://*.modrinth.com https://*.posthog.com https://posthog.modrinth.com https://*.sentry.io https://api.mclo.gs http://textures.minecraft.net https://textures.minecraft.net https://js.stripe.com https://*.stripe.com wss://*.stripe.com wss://*.nodes.modrinth.com 'self' data: blob:",
 				"font-src": ["https://cdn-raw.modrinth.com/fonts/"],
 				"img-src": "https: 'unsafe-inline' 'self' asset: http://asset.localhost http://textures.minecraft.net blob: data:",
 				"style-src": "'unsafe-inline' 'self'",
-				"script-src": "https://*.posthog.com https://tally.so/widgets/embed.js 'self'",
-				"frame-src": "https://www.youtube.com https://www.youtube-nocookie.com https://discord.com https://tally.so/popup/ 'self'",
+				"script-src": "https://*.posthog.com https://posthog.modrinth.com https://js.stripe.com https://tally.so/widgets/embed.js 'self'",
+				"frame-src": "https://www.youtube.com https://www.youtube-nocookie.com https://discord.com https://tally.so/popup/ https://js.stripe.com https://hooks.stripe.com 'self'",
 				"media-src": "https://*.githubusercontent.com"
 			}
 		}