fix: various fixes

.vscode/settings.json

@@ -11,21 +11,21 @@
 		"source.fixAll.eslint": "explicit",
 		"source.organizeImports": "always"
 	},
-	"editor.defaultFormatter": "esbenp.prettier-vscode",
+	"editor.defaultFormatter": "rvest.vs-code-prettier-eslint",
 	"[vue]": {
-		"editor.defaultFormatter": "esbenp.prettier-vscode"
+		"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
 	},
 	"[typescript]": {
-		"editor.defaultFormatter": "esbenp.prettier-vscode"
+		"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
 	},
 	"[javascript]": {
-		"editor.defaultFormatter": "esbenp.prettier-vscode"
+		"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
 	},
 	"[scss]": {
-		"editor.defaultFormatter": "esbenp.prettier-vscode"
+		"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
 	},
 	"[css]": {
-		"editor.defaultFormatter": "esbenp.prettier-vscode"
+		"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
 	},
 	"[rust]": {
 		"editor.defaultFormatter": "rust-lang.rust-analyzer"

apps/frontend/src/components/ui/dashboard/withdraw-stages/TremendousDetailsStage.vue

@@ -15,27 +15,6 @@
 			</div>
 		</Transition>
 
-		<Transition
-			enter-active-class="transition-all duration-300 ease-out"
-			enter-from-class="opacity-0 max-h-0"
-			enter-to-class="opacity-100 max-h-40"
-			leave-active-class="transition-all duration-200 ease-in"
-			leave-from-class="opacity-100 max-h-40"
-			leave-to-class="opacity-0 max-h-0"
-		>
-			<div v-if="shouldShowUsdWarning" class="overflow-hidden">
-				<Admonition type="warning" :header="formatMessage(messages.usdPaypalWarningHeader)">
-					<IntlFormatted :message-id="messages.usdPaypalWarningMessage">
-						<template #direct-paypal-link="{ children }">
-							<span class="cursor-pointer text-link" @click="switchToDirectPaypal">
-								<component :is="() => normalizeChildren(children)" />
-							</span>
-						</template>
-					</IntlFormatted>
-				</Admonition>
-			</div>
-		</Transition>
-
 		<div v-if="!showGiftCardSelector && selectedMethodDisplay" class="flex flex-col gap-2.5">
 			<label>
 				<span class="text-md font-semibold text-contrast">
@@ -373,19 +352,11 @@ import { computed, onMounted, ref, watch } from 'vue'
 import RevenueInputField from '@/components/ui/dashboard/RevenueInputField.vue'
 import WithdrawFeeBreakdown from '@/components/ui/dashboard/WithdrawFeeBreakdown.vue'
 import { useAuth } from '@/composables/auth.js'
-import { useBaseFetch } from '@/composables/fetch.js'
-import { type PayoutMethod, useWithdrawContext } from '@/providers/creator-withdraw.ts'
+import { useWithdrawContext } from '@/providers/creator-withdraw.ts'
 
 const debug = useDebugLogger('TremendousDetailsStage')
-const {
-	withdrawData,
-	maxWithdrawAmount,
-	availableMethods,
-	paymentOptions,
-	calculateFees,
-	setStage,
-	paymentMethodsCache,
-} = useWithdrawContext()
+const { withdrawData, maxWithdrawAmount, availableMethods, paymentOptions, calculateFees } =
+	useWithdrawContext()
 const { formatMessage } = useVIntl()
 const auth = await useAuth()
 
@@ -410,12 +381,6 @@ const showPayPalCurrencySelector = computed(() => {
 	return method === 'paypal'
 })
 
-const shouldShowUsdWarning = computed(() => {
-	const method = withdrawData.value.selection.method
-	const currency = selectedCurrency.value
-	return method === 'paypal' && currency === 'USD'
-})
-
 const selectedMethodDisplay = computed(() => {
 	const method = withdrawData.value.selection.method
 	if (!method) return null
@@ -964,47 +929,6 @@ watch(
 	{ immediate: true },
 )
 
-async function switchToDirectPaypal() {
-	withdrawData.value.selection.country = {
-		id: 'US',
-		name: 'United States',
-	}
-
-	let usMethods = paymentMethodsCache.value['US']
-
-	if (!usMethods) {
-		try {
-			usMethods = (await useBaseFetch('payout/methods', {
-				apiVersion: 3,
-				query: { country: 'US' },
-			})) as PayoutMethod[]
-
-			paymentMethodsCache.value['US'] = usMethods
-		} catch (error) {
-			console.error('Failed to fetch US payment methods:', error)
-			return
-		}
-	}
-
-	availableMethods.value = usMethods
-
-	const directPaypal = usMethods.find((m) => m.type === 'paypal')
-
-	if (directPaypal) {
-		withdrawData.value.selection.provider = 'paypal'
-		withdrawData.value.selection.method = directPaypal.id
-		withdrawData.value.selection.methodId = directPaypal.id
-
-		withdrawData.value.providerData = {
-			type: 'paypal',
-		}
-
-		await setStage('paypal-details', true)
-	} else {
-		console.error('An error occured - no paypal in US region??')
-	}
-}
-
 const messages = defineMessages({
 	unverifiedEmailHeader: {
 		id: 'dashboard.creator-withdraw-modal.tremendous-details.unverified-email-header',

apps/frontend/src/components/ui/servers/LoaderSelectorCard.vue

@@ -7,10 +7,11 @@
 			>
 				<LoaderIcon
 					:loader="loader.name"
-					class="[&&]:size-6"
+					class="size-6"
 					:class="isCurrentLoader ? 'text-brand' : ''"
 				/>
 			</div>
+
 			<div class="flex flex-col gap-0.5">
 				<div class="flex flex-row items-center gap-2">
 					<h1 class="m-0 text-xl font-bold leading-none text-contrast">
@@ -20,30 +21,24 @@
 						v-if="isCurrentLoader"
 						class="hidden items-center gap-1 rounded-full bg-bg-green p-1 px-1.5 text-xs font-semibold text-brand sm:flex"
 					>
-						<CheckIcon class="h-4 w-4" />
-						Current
+						<CheckIcon class="h-4 w-4" /> Current
 					</span>
 				</div>
-				<p v-if="isCurrentLoader" class="m-0 text-xs text-secondary">
-					{{ loaderVersion }}
-				</p>
+
+				<p v-if="isCurrentLoader" class="m-0 text-xs text-secondary">{{ loaderVersion }}</p>
 			</div>
 		</div>
-
 		<ButtonStyled>
 			<button :disabled="isInstalling" @click="onSelect">
-				<DownloadIcon class="h-5 w-5" />
-				{{ isCurrentLoader ? 'Reinstall' : 'Install' }}
+				<DownloadIcon class="h-5 w-5" /> {{ isCurrentLoader ? 'Reinstall' : 'Install' }}
 			</button>
 		</ButtonStyled>
 	</div>
 </template>
 
 <script setup lang="ts">
 import { CheckIcon, DownloadIcon } from '@modrinth/assets'
-import { ButtonStyled } from '@modrinth/ui'
-
-import LoaderIcon from './icons/LoaderIcon.vue'
+import { ButtonStyled, LoaderIcon } from '@modrinth/ui'
 
 interface LoaderInfo {
 	name: 'Vanilla' | 'Fabric' | 'Forge' | 'Quilt' | 'Paper' | 'NeoForge' | 'Purpur'

apps/frontend/src/error.vue

@@ -24,17 +24,17 @@
 							<IntlFormatted :message-id="item">
 								<template #status-link="{ children }">
 									<a href="https://status.modrinth.com" target="_blank" rel="noopener">
-										<component :is="() => children" />
+										<component :is="() => normalizeChildren(children)" />
 									</a>
 								</template>
 								<template #discord-link="{ children }">
 									<a href="https://discord.modrinth.com" target="_blank" rel="noopener">
-										<component :is="() => children" />
+										<component :is="() => normalizeChildren(children)" />
 									</a>
 								</template>
 								<template #tou-link="{ children }">
 									<nuxt-link :to="`/legal/terms`" target="_blank" rel="noopener">
-										<component :is="() => children" />
+										<component :is="() => normalizeChildren(children)" />
 									</nuxt-link>
 								</template>
 							</IntlFormatted>
@@ -55,6 +55,7 @@ import { SadRinthbot } from '@modrinth/assets'
 import {
 	defineMessage,
 	IntlFormatted,
+	normalizeChildren,
 	NotificationPanel,
 	provideModrinthClient,
 	provideNotificationManager,

package.json

@@ -26,6 +26,8 @@
 	},
 	"devDependencies": {
 		"@modrinth/tooling-config": "workspace:*",
+		"@vue/compiler-sfc": "^3.5.26",
+		"chalk": "^5.6.2",
 		"if-ci": "^3.0.0",
 		"prettier": "^3.3.2",
 		"turbo": "^2.5.4",