From aef40834f308e8864e4457d4bd03d8e3afcc5aff Mon Sep 17 00:00:00 2001
From: Christian Byrne <cbyrne@comfy.org>
Date: Tue, 9 Dec 2025 04:11:27 -0800
Subject: [PATCH] add shared comfy credit conversion helpers (#7061)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Introduces cents<->usd<->credit converters plus basic formatters and
adds test. Lays groundwork to start converting UI components into
displaying comfy credits.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7061-add-shared-comfy-credit-conversion-helpers-2bb6d73d3650810bb34fdf9bb3fc115b)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Claude <noreply@anthropic.com>
---
 src/base/credits/comfyCredits.ts              | 125 +++++++++++++++
 src/components/common/UserCredit.vue          |  13 +-
 .../content/TopUpCreditsDialogContent.vue     | 150 +++++++++++++++++-
 .../content/credit/CreditTopUpOption.vue      |  98 ++++--------
 .../credit/LegacyCreditTopUpOption.vue        | 119 ++++++++++++++
 src/composables/useFeatureFlags.ts            |   2 +-
 src/locales/en/main.json                      |  15 +-
 .../components/SubscriptionPanel.vue          |   6 +-
 .../composables/useSubscriptionCredits.ts     |  65 +++-----
 .../tests/base/credits/comfyCredits.test.ts   |  46 ++++++
 .../content/credit/CreditTopUpOption.test.ts  |  52 ++++++
 .../composables/node/useCreditsBadge.test.ts  |   8 +
 .../components/SubscriptionPanel.test.ts      |  10 +-
 .../useSubscriptionCredits.test.ts            |  78 +++++----
 14 files changed, 628 insertions(+), 159 deletions(-)
 create mode 100644 src/base/credits/comfyCredits.ts
 create mode 100644 src/components/dialog/content/credit/LegacyCreditTopUpOption.vue
 create mode 100644 tests-ui/tests/base/credits/comfyCredits.test.ts
 create mode 100644 tests-ui/tests/components/dialog/content/credit/CreditTopUpOption.test.ts

diff --git a/src/base/credits/comfyCredits.ts b/src/base/credits/comfyCredits.ts
new file mode 100644
index 000000000..b49df573f
--- /dev/null
+++ b/src/base/credits/comfyCredits.ts
@@ -0,0 +1,125 @@
+const DEFAULT_NUMBER_FORMAT: Intl.NumberFormatOptions = {
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2
+}
+
+const formatNumber = ({
+  value,
+  locale,
+  options
+}: {
+  value: number
+  locale?: string
+  options?: Intl.NumberFormatOptions
+}): string => {
+  const merged: Intl.NumberFormatOptions = {
+    ...DEFAULT_NUMBER_FORMAT,
+    ...options
+  }
+
+  if (
+    typeof merged.maximumFractionDigits === 'number' &&
+    typeof merged.minimumFractionDigits === 'number' &&
+    merged.maximumFractionDigits < merged.minimumFractionDigits
+  ) {
+    merged.minimumFractionDigits = merged.maximumFractionDigits
+  }
+
+  return new Intl.NumberFormat(locale, merged).format(value)
+}
+
+export const CREDITS_PER_USD = 211
+export const COMFY_CREDIT_RATE_CENTS = CREDITS_PER_USD / 100 // credits per cent
+
+export const usdToCents = (usd: number): number => Math.round(usd * 100)
+
+export const centsToCredits = (cents: number): number =>
+  Math.round(cents * COMFY_CREDIT_RATE_CENTS)
+
+export const creditsToCents = (credits: number): number =>
+  Math.round(credits / COMFY_CREDIT_RATE_CENTS)
+
+export const usdToCredits = (usd: number): number =>
+  Math.round(usd * CREDITS_PER_USD)
+
+export const creditsToUsd = (credits: number): number =>
+  Math.round((credits / CREDITS_PER_USD) * 100) / 100
+
+export type FormatOptions = {
+  value: number
+  locale?: string
+  numberOptions?: Intl.NumberFormatOptions
+}
+
+export type FormatFromCentsOptions = {
+  cents: number
+  locale?: string
+  numberOptions?: Intl.NumberFormatOptions
+}
+
+export type FormatFromUsdOptions = {
+  usd: number
+  locale?: string
+  numberOptions?: Intl.NumberFormatOptions
+}
+
+export const formatCredits = ({
+  value,
+  locale,
+  numberOptions
+}: FormatOptions): string =>
+  formatNumber({ value, locale, options: numberOptions })
+
+export const formatCreditsFromCents = ({
+  cents,
+  locale,
+  numberOptions
+}: FormatFromCentsOptions): string =>
+  formatCredits({
+    value: centsToCredits(cents),
+    locale,
+    numberOptions
+  })
+
+export const formatCreditsFromUsd = ({
+  usd,
+  locale,
+  numberOptions
+}: FormatFromUsdOptions): string =>
+  formatCredits({
+    value: usdToCredits(usd),
+    locale,
+    numberOptions
+  })
+
+export const formatUsd = ({
+  value,
+  locale,
+  numberOptions
+}: FormatOptions): string =>
+  formatNumber({
+    value,
+    locale,
+    options: numberOptions
+  })
+
+export const formatUsdFromCents = ({
+  cents,
+  locale,
+  numberOptions
+}: FormatFromCentsOptions): string =>
+  formatUsd({
+    value: cents / 100,
+    locale,
+    numberOptions
+  })
+
+/**
+ * Clamps a USD value to the allowed range for credit purchases
+ * @param value - The USD amount to clamp
+ * @returns The clamped value between $1 and $1000, or 0 if NaN
+ */
+export const clampUsd = (value: number): number => {
+  if (Number.isNaN(value)) return 0
+  return Math.min(1000, Math.max(1, value))
+}
diff --git a/src/components/common/UserCredit.vue b/src/components/common/UserCredit.vue
index 15a7eb404..e3032fc4f 100644
--- a/src/components/common/UserCredit.vue
+++ b/src/components/common/UserCredit.vue
@@ -26,10 +26,11 @@
 import Skeleton from 'primevue/skeleton'
 import Tag from 'primevue/tag'
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
+import { formatCreditsFromCents } from '@/base/credits/comfyCredits'
 import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
-import { formatMetronomeCurrency } from '@/utils/formatUtil'
 
 const { textClass } = defineProps<{
   textClass?: string
@@ -38,9 +39,15 @@ const { textClass } = defineProps<{
 const authStore = useFirebaseAuthStore()
 const { flags } = useFeatureFlags()
 const balanceLoading = computed(() => authStore.isFetchingBalance)
+const { t, locale } = useI18n()
 
 const formattedBalance = computed(() => {
-  if (!authStore.balance) return '0.00'
-  return formatMetronomeCurrency(authStore.balance.amount_micros, 'usd')
+  // Backend returns cents despite the *_micros naming convention.
+  const cents = authStore.balance?.amount_micros ?? 0
+  const amount = formatCreditsFromCents({
+    cents,
+    locale: locale.value
+  })
+  return `${amount} ${t('credits.credits')}`
 })
 </script>
diff --git a/src/components/dialog/content/TopUpCreditsDialogContent.vue b/src/components/dialog/content/TopUpCreditsDialogContent.vue
index 8f1cdd797..12ef94ca0 100644
--- a/src/components/dialog/content/TopUpCreditsDialogContent.vue
+++ b/src/components/dialog/content/TopUpCreditsDialogContent.vue
@@ -1,5 +1,65 @@
 <template>
-  <div class="flex w-96 flex-col gap-10 p-2">
+  <!-- New Credits Design (default) -->
+  <div
+    v-if="useNewDesign"
+    class="flex w-96 flex-col gap-8 p-8 bg-node-component-surface rounded-2xl border border-border-primary"
+  >
+    <!-- Header -->
+    <div class="flex flex-col gap-4">
+      <h1 class="text-2xl font-semibold text-foreground-primary m-0">
+        {{ $t('credits.topUp.addMoreCredits') }}
+      </h1>
+      <p class="text-sm text-foreground-secondary m-0">
+        {{ $t('credits.topUp.creditsDescription') }}
+      </p>
+    </div>
+
+    <!-- Current Balance Section -->
+    <div class="flex flex-col gap-4">
+      <div class="flex items-baseline gap-2">
+        <UserCredit text-class="text-3xl font-bold" />
+        <span class="text-sm text-foreground-secondary">{{
+          $t('credits.creditsAvailable')
+        }}</span>
+      </div>
+      <div v-if="refreshDate" class="text-sm text-foreground-secondary">
+        {{ $t('credits.refreshes', { date: refreshDate }) }}
+      </div>
+    </div>
+
+    <!-- Credit Options Section -->
+    <div class="flex flex-col gap-4">
+      <span class="text-sm text-foreground-secondary">
+        {{ $t('credits.topUp.howManyCredits') }}
+      </span>
+      <div class="flex flex-col gap-2">
+        <CreditTopUpOption
+          v-for="option in creditOptions"
+          :key="option.credits"
+          :credits="option.credits"
+          :description="option.description"
+          :selected="selectedCredits === option.credits"
+          @select="selectedCredits = option.credits"
+        />
+      </div>
+      <div class="text-xs text-foreground-secondary">
+        {{ $t('credits.topUp.templateNote') }}
+      </div>
+    </div>
+
+    <!-- Buy Button -->
+    <Button
+      :disabled="!selectedCredits || loading"
+      :loading="loading"
+      severity="primary"
+      :label="$t('credits.topUp.buy')"
+      class="w-full"
+      @click="handleBuy"
+    />
+  </div>
+
+  <!-- Legacy Design -->
+  <div v-else class="flex w-96 flex-col gap-10 p-2">
     <div v-if="isInsufficientCredits" class="flex flex-col gap-4">
       <h1 class="my-0 text-2xl leading-normal font-medium">
         {{ $t('credits.topUp.insufficientTitle') }}
@@ -34,14 +94,14 @@
         >{{ $t('credits.topUp.quickPurchase') }}:</span
       >
       <div class="grid grid-cols-[2fr_1fr] gap-2">
-        <CreditTopUpOption
+        <LegacyCreditTopUpOption
           v-for="amount in amountOptions"
           :key="amount"
           :amount="amount"
           :preselected="amount === preselectedAmountOption"
         />
 
-        <CreditTopUpOption :amount="100" :preselected="false" editable />
+        <LegacyCreditTopUpOption :amount="100" :preselected="false" editable />
       </div>
     </div>
   </div>
@@ -49,23 +109,107 @@
 
 <script setup lang="ts">
 import Button from 'primevue/button'
+import { useToast } from 'primevue/usetoast'
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
+import {
+  creditsToUsd,
+  formatCredits,
+  formatUsd
+} from '@/base/credits/comfyCredits'
 import UserCredit from '@/components/common/UserCredit.vue'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
+import { useTelemetry } from '@/platform/telemetry'
 
 import CreditTopUpOption from './credit/CreditTopUpOption.vue'
+import LegacyCreditTopUpOption from './credit/LegacyCreditTopUpOption.vue'
+
+interface CreditOption {
+  credits: number
+  description: string
+}
 
 const {
+  refreshDate,
   isInsufficientCredits = false,
   amountOptions = [5, 10, 20, 50],
   preselectedAmountOption = 10
 } = defineProps<{
+  refreshDate?: string
   isInsufficientCredits?: boolean
   amountOptions?: number[]
   preselectedAmountOption?: number
 }>()
 
+const { flags } = useFeatureFlags()
+// Use feature flag to determine design - defaults to true (new design)
+const useNewDesign = computed(() => flags.subscriptionTiersEnabled)
+
+const { t, locale } = useI18n()
 const authActions = useFirebaseAuthActions()
+const telemetry = useTelemetry()
+const toast = useToast()
+
+const selectedCredits = ref<number | null>(null)
+const loading = ref(false)
+
+const creditOptions: CreditOption[] = [
+  {
+    credits: 1000,
+    description: t('credits.topUp.videosEstimate', { count: 100 })
+  },
+  {
+    credits: 5000,
+    description: t('credits.topUp.videosEstimate', { count: 500 })
+  },
+  {
+    credits: 10000,
+    description: t('credits.topUp.videosEstimate', { count: 1000 })
+  },
+  {
+    credits: 20000,
+    description: t('credits.topUp.videosEstimate', { count: 2000 })
+  }
+]
+
+const handleBuy = async () => {
+  if (!selectedCredits.value) return
+
+  loading.value = true
+  try {
+    const usdAmount = creditsToUsd(selectedCredits.value)
+    telemetry?.trackApiCreditTopupButtonPurchaseClicked(usdAmount)
+    await authActions.purchaseCredits(usdAmount)
+
+    toast.add({
+      severity: 'success',
+      summary: t('credits.topUp.purchaseSuccess'),
+      detail: t('credits.topUp.purchaseSuccessDetail', {
+        credits: formatCredits({
+          value: selectedCredits.value,
+          locale: locale.value
+        }),
+        amount: `$${formatUsd({ value: usdAmount, locale: locale.value })}`
+      }),
+      life: 3000
+    })
+  } catch (error) {
+    console.error('Purchase failed:', error)
+
+    const errorMessage =
+      error instanceof Error ? error.message : t('credits.topUp.unknownError')
+    toast.add({
+      severity: 'error',
+      summary: t('credits.topUp.purchaseError'),
+      detail: t('credits.topUp.purchaseErrorDetail', { error: errorMessage }),
+      life: 5000
+    })
+  } finally {
+    loading.value = false
+  }
+}
 
 const handleSeeDetails = async () => {
   await authActions.accessBillingPortal()
diff --git a/src/components/dialog/content/credit/CreditTopUpOption.vue b/src/components/dialog/content/credit/CreditTopUpOption.vue
index f134aba5e..4694f15ee 100644
--- a/src/components/dialog/content/credit/CreditTopUpOption.vue
+++ b/src/components/dialog/content/credit/CreditTopUpOption.vue
@@ -1,81 +1,43 @@
 <template>
-  <div class="flex items-center gap-2">
-    <Tag
-      severity="secondary"
-      icon="pi pi-dollar"
-      rounded
-      class="p-1 text-amber-400"
-    />
-    <InputNumber
-      v-if="editable"
-      v-model="customAmount"
-      :min="1"
-      :max="1000"
-      :step="1"
-      show-buttons
-      :allow-empty="false"
-      :highlight-on-focus="true"
-      pt:pc-input-text:root="w-24"
-      @blur="(e: InputNumberBlurEvent) => (customAmount = Number(e.value))"
-      @input="(e: InputNumberInputEvent) => (customAmount = Number(e.value))"
-    />
-    <span v-else class="text-xl">{{ amount }}</span>
+  <div
+    class="flex items-center justify-between p-2 rounded-lg cursor-pointer transition-all duration-200"
+    :class="[
+      selected
+        ? 'bg-surface-secondary border-2 border-primary'
+        : 'bg-surface-tertiary border border-border-primary hover:bg-surface-secondary'
+    ]"
+    @click="$emit('select')"
+  >
+    <div class="flex flex-col">
+      <span class="text-base font-medium text-foreground-primary">
+        {{ formattedCredits }}
+      </span>
+      <span class="text-sm text-foreground-secondary">
+        {{ description }}
+      </span>
+    </div>
   </div>
-  <ProgressSpinner v-if="loading" class="h-8 w-8" />
-  <Button
-    v-else
-    :severity="preselected ? 'primary' : 'secondary'"
-    :outlined="!preselected"
-    :label="$t('credits.topUp.buyNow')"
-    @click="handleBuyNow"
-  />
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
-import InputNumber from 'primevue/inputnumber'
-import type {
-  InputNumberBlurEvent,
-  InputNumberInputEvent
-} from 'primevue/inputnumber'
-import ProgressSpinner from 'primevue/progressspinner'
-import Tag from 'primevue/tag'
-import { onBeforeUnmount, ref } from 'vue'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
-import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
-import { useTelemetry } from '@/platform/telemetry'
+import { formatCredits } from '@/base/credits/comfyCredits'
 
-const authActions = useFirebaseAuthActions()
-const telemetry = useTelemetry()
-
-const {
-  amount,
-  preselected,
-  editable = false
-} = defineProps<{
-  amount: number
-  preselected: boolean
-  editable?: boolean
+const { credits, description, selected } = defineProps<{
+  credits: number
+  description: string
+  selected: boolean
 }>()
 
-const customAmount = ref(amount)
-const didClickBuyNow = ref(false)
-const loading = ref(false)
+defineEmits<{
+  select: []
+}>()
 
-const handleBuyNow = async () => {
-  const creditAmount = editable ? customAmount.value : amount
-  telemetry?.trackApiCreditTopupButtonPurchaseClicked(creditAmount)
+const { locale } = useI18n()
 
-  loading.value = true
-  await authActions.purchaseCredits(creditAmount)
-  loading.value = false
-  didClickBuyNow.value = true
-}
-
-onBeforeUnmount(() => {
-  if (didClickBuyNow.value) {
-    // If clicked buy now, then returned back to the dialog and closed, fetch the balance
-    void authActions.fetchBalance()
-  }
+const formattedCredits = computed(() => {
+  return formatCredits({ value: credits, locale: locale.value })
 })
 </script>
diff --git a/src/components/dialog/content/credit/LegacyCreditTopUpOption.vue b/src/components/dialog/content/credit/LegacyCreditTopUpOption.vue
new file mode 100644
index 000000000..f33c3845b
--- /dev/null
+++ b/src/components/dialog/content/credit/LegacyCreditTopUpOption.vue
@@ -0,0 +1,119 @@
+<template>
+  <div class="flex items-center gap-2">
+    <Tag
+      severity="secondary"
+      icon="pi pi-wallet"
+      rounded
+      class="p-1 text-amber-400"
+    />
+    <div v-if="editable" class="flex items-center gap-2">
+      <InputNumber
+        v-model="customAmount"
+        :min="1"
+        :max="1000"
+        :step="1"
+        show-buttons
+        :allow-empty="false"
+        :highlight-on-focus="true"
+        prefix="$"
+        pt:pc-input-text:root="w-28"
+        @blur="
+          (e: InputNumberBlurEvent) =>
+            (customAmount = clampUsd(Number(e.value)))
+        "
+        @input="
+          (e: InputNumberInputEvent) =>
+            (customAmount = clampUsd(Number(e.value)))
+        "
+      />
+      <span class="text-xs text-muted">{{ formattedCredits }}</span>
+    </div>
+    <div v-else class="flex flex-col leading-tight">
+      <span class="text-xl font-semibold">{{ formattedCredits }}</span>
+      <span class="text-xs text-muted">{{ formattedUsd }}</span>
+    </div>
+  </div>
+  <ProgressSpinner v-if="loading" class="h-8 w-8" />
+  <Button
+    v-else
+    :severity="preselected ? 'primary' : 'secondary'"
+    :outlined="!preselected"
+    :label="$t('credits.topUp.buyNow')"
+    @click="handleBuyNow"
+  />
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import InputNumber from 'primevue/inputnumber'
+import type {
+  InputNumberBlurEvent,
+  InputNumberInputEvent
+} from 'primevue/inputnumber'
+import ProgressSpinner from 'primevue/progressspinner'
+import Tag from 'primevue/tag'
+import { computed, onBeforeUnmount, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import {
+  clampUsd,
+  formatCreditsFromUsd,
+  formatUsd
+} from '@/base/credits/comfyCredits'
+import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
+import { useTelemetry } from '@/platform/telemetry'
+
+const authActions = useFirebaseAuthActions()
+const telemetry = useTelemetry()
+
+const {
+  amount,
+  preselected,
+  editable = false
+} = defineProps<{
+  amount: number
+  preselected: boolean
+  editable?: boolean
+}>()
+
+const customAmount = ref(amount)
+const didClickBuyNow = ref(false)
+const loading = ref(false)
+const { t, locale } = useI18n()
+
+const displayUsdAmount = computed(() =>
+  editable ? clampUsd(Number(customAmount.value)) : clampUsd(amount)
+)
+
+const formattedCredits = computed(
+  () =>
+    `${formatCreditsFromUsd({
+      usd: displayUsdAmount.value,
+      locale: locale.value
+    })} ${t('credits.credits')}`
+)
+
+const formattedUsd = computed(
+  () => `$${formatUsd({ value: displayUsdAmount.value, locale: locale.value })}`
+)
+
+const handleBuyNow = async () => {
+  const creditAmount = displayUsdAmount.value
+  telemetry?.trackApiCreditTopupButtonPurchaseClicked(creditAmount)
+
+  loading.value = true
+  try {
+    await authActions.purchaseCredits(creditAmount)
+    didClickBuyNow.value = true
+  } finally {
+    loading.value = false
+  }
+}
+
+onBeforeUnmount(() => {
+  if (didClickBuyNow.value) {
+    // If clicked buy now, then returned back to the dialog and closed, fetch the balance
+    void authActions.fetchBalance()
+  }
+})
+</script>
diff --git a/src/composables/useFeatureFlags.ts b/src/composables/useFeatureFlags.ts
index 29fb67c23..bb493385d 100644
--- a/src/composables/useFeatureFlags.ts
+++ b/src/composables/useFeatureFlags.ts
@@ -63,7 +63,7 @@ export function useFeatureFlags() {
         remoteConfig.value.subscription_tiers_enabled ??
         api.getServerFeature(
           ServerFeatureFlag.SUBSCRIPTION_TIERS_ENABLED,
-          false
+          true // Default to true (new design)
         )
       )
     }
diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index f7cbee358..9f21a6d2f 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -1845,8 +1845,21 @@
       "maxAmount": "(Max. $1,000 USD)",
       "buyNow": "Buy now",
       "seeDetails": "See details",
-      "topUp": "Top Up"
+      "topUp": "Top Up",
+      "addMoreCredits": "Add more credits",
+      "creditsDescription": "Credits are used to run workflows or partner nodes.",
+      "howManyCredits": "How many credits would you like to add?",
+      "videosEstimate": "~{count} videos*",
+      "templateNote": "*Generated with Wan Fun Control template",
+      "buy": "Buy",
+      "purchaseSuccess": "Purchase Successful",
+      "purchaseSuccessDetail": "Successfully purchased {credits} credits for {amount}",
+      "purchaseError": "Purchase Failed",
+      "purchaseErrorDetail": "Failed to purchase credits: {error}",
+      "unknownError": "An unknown error occurred"
     },
+    "creditsAvailable": "Credits available",
+    "refreshes": "Refreshes {date}",
     "eventType": "Event Type",
     "details": "Details",
     "time": "Time",
diff --git a/src/platform/cloud/subscription/components/SubscriptionPanel.vue b/src/platform/cloud/subscription/components/SubscriptionPanel.vue
index 29f5a8ae2..4d229562e 100644
--- a/src/platform/cloud/subscription/components/SubscriptionPanel.vue
+++ b/src/platform/cloud/subscription/components/SubscriptionPanel.vue
@@ -121,7 +121,7 @@
                       height="2rem"
                     />
                     <div v-else class="text-2xl font-bold">
-                      ${{ totalCredits }}
+                      {{ totalCredits }}
                     </div>
                   </div>
 
@@ -134,7 +134,7 @@
                         height="1rem"
                       />
                       <div v-else class="text-sm text-text-secondary font-bold">
-                        ${{ monthlyBonusCredits }}
+                        {{ monthlyBonusCredits }}
                       </div>
                       <div class="flex items-center gap-1">
                         <div class="text-sm text-text-secondary">
@@ -162,7 +162,7 @@
                         height="1rem"
                       />
                       <div v-else class="text-sm text-text-secondary font-bold">
-                        ${{ prepaidCredits }}
+                        {{ prepaidCredits }}
                       </div>
                       <div class="flex items-center gap-1">
                         <div class="text-sm text-text-secondary">
diff --git a/src/platform/cloud/subscription/composables/useSubscriptionCredits.ts b/src/platform/cloud/subscription/composables/useSubscriptionCredits.ts
index 0c0cf5a7f..4f390bb17 100644
--- a/src/platform/cloud/subscription/composables/useSubscriptionCredits.ts
+++ b/src/platform/cloud/subscription/composables/useSubscriptionCredits.ts
@@ -1,58 +1,37 @@
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
+import { formatCreditsFromCents } from '@/base/credits/comfyCredits'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
-import { formatMetronomeCurrency } from '@/utils/formatUtil'
 
 /**
  * Composable for handling subscription credit calculations and formatting
  */
 export function useSubscriptionCredits() {
   const authStore = useFirebaseAuthStore()
+  const { t, locale } = useI18n()
 
-  const totalCredits = computed(() => {
-    if (!authStore.balance?.amount_micros) return '0.00'
-    try {
-      return formatMetronomeCurrency(authStore.balance.amount_micros, 'usd')
-    } catch (error) {
-      console.error(
-        '[useSubscriptionCredits] Error formatting total credits:',
-        error
-      )
-      return '0.00'
-    }
-  })
+  const formatBalance = (maybeCents?: number) => {
+    // Backend returns cents despite the *_micros naming convention.
+    const cents = maybeCents ?? 0
+    const amount = formatCreditsFromCents({
+      cents,
+      locale: locale.value
+    })
+    return `${amount} ${t('credits.credits')}`
+  }
 
-  const monthlyBonusCredits = computed(() => {
-    if (!authStore.balance?.cloud_credit_balance_micros) return '0.00'
-    try {
-      return formatMetronomeCurrency(
-        authStore.balance.cloud_credit_balance_micros,
-        'usd'
-      )
-    } catch (error) {
-      console.error(
-        '[useSubscriptionCredits] Error formatting monthly bonus credits:',
-        error
-      )
-      return '0.00'
-    }
-  })
+  const totalCredits = computed(() =>
+    formatBalance(authStore.balance?.amount_micros)
+  )
 
-  const prepaidCredits = computed(() => {
-    if (!authStore.balance?.prepaid_balance_micros) return '0.00'
-    try {
-      return formatMetronomeCurrency(
-        authStore.balance.prepaid_balance_micros,
-        'usd'
-      )
-    } catch (error) {
-      console.error(
-        '[useSubscriptionCredits] Error formatting prepaid credits:',
-        error
-      )
-      return '0.00'
-    }
-  })
+  const monthlyBonusCredits = computed(() =>
+    formatBalance(authStore.balance?.cloud_credit_balance_micros)
+  )
+
+  const prepaidCredits = computed(() =>
+    formatBalance(authStore.balance?.prepaid_balance_micros)
+  )
 
   const isLoadingBalance = computed(() => authStore.isFetchingBalance)
 
diff --git a/tests-ui/tests/base/credits/comfyCredits.test.ts b/tests-ui/tests/base/credits/comfyCredits.test.ts
new file mode 100644
index 000000000..a2ef78a53
--- /dev/null
+++ b/tests-ui/tests/base/credits/comfyCredits.test.ts
@@ -0,0 +1,46 @@
+import { describe, expect, test } from 'vitest'
+
+import {
+  CREDITS_PER_USD,
+  COMFY_CREDIT_RATE_CENTS,
+  centsToCredits,
+  creditsToCents,
+  creditsToUsd,
+  formatCredits,
+  formatCreditsFromCents,
+  formatCreditsFromUsd,
+  formatUsd,
+  formatUsdFromCents,
+  usdToCents,
+  usdToCredits
+} from '@/base/credits/comfyCredits'
+
+describe('comfyCredits helpers', () => {
+  test('exposes the fixed conversion rate', () => {
+    expect(CREDITS_PER_USD).toBe(211)
+    expect(COMFY_CREDIT_RATE_CENTS).toBeCloseTo(2.11) // credits per cent
+  })
+
+  test('converts between USD and cents', () => {
+    expect(usdToCents(1.23)).toBe(123)
+    expect(formatUsdFromCents({ cents: 123, locale: 'en-US' })).toBe('1.23')
+  })
+
+  test('converts cents to credits and back', () => {
+    expect(centsToCredits(100)).toBe(211) // 100 cents = 211 credits
+    expect(creditsToCents(211)).toBe(100) // 211 credits = 100 cents
+  })
+
+  test('converts USD to credits and back', () => {
+    expect(usdToCredits(1)).toBe(211) // 1 USD = 211 credits
+    expect(creditsToUsd(211)).toBe(1) // 211 credits = 1 USD
+  })
+
+  test('formats credits and USD values using en-US locale', () => {
+    const locale = 'en-US'
+    expect(formatCredits({ value: 1234.567, locale })).toBe('1,234.57')
+    expect(formatCreditsFromCents({ cents: 100, locale })).toBe('211.00')
+    expect(formatCreditsFromUsd({ usd: 1, locale })).toBe('211.00')
+    expect(formatUsd({ value: 4.2, locale })).toBe('4.20')
+  })
+})
diff --git a/tests-ui/tests/components/dialog/content/credit/CreditTopUpOption.test.ts b/tests-ui/tests/components/dialog/content/credit/CreditTopUpOption.test.ts
new file mode 100644
index 000000000..72ad9ecd7
--- /dev/null
+++ b/tests-ui/tests/components/dialog/content/credit/CreditTopUpOption.test.ts
@@ -0,0 +1,52 @@
+import { mount } from '@vue/test-utils'
+import { createI18n } from 'vue-i18n'
+import { describe, expect, it } from 'vitest'
+
+import CreditTopUpOption from '@/components/dialog/content/credit/CreditTopUpOption.vue'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: { en: {} }
+})
+
+const mountOption = (
+  props?: Partial<{ credits: number; description: string; selected: boolean }>
+) =>
+  mount(CreditTopUpOption, {
+    props: {
+      credits: 1000,
+      description: '~100 videos*',
+      selected: false,
+      ...props
+    },
+    global: {
+      plugins: [i18n]
+    }
+  })
+
+describe('CreditTopUpOption', () => {
+  it('renders credit amount and description', () => {
+    const wrapper = mountOption({ credits: 5000, description: '~500 videos*' })
+    expect(wrapper.text()).toContain('5,000')
+    expect(wrapper.text()).toContain('~500 videos*')
+  })
+
+  it('applies selected styling when selected', () => {
+    const wrapper = mountOption({ selected: true })
+    expect(wrapper.find('div').classes()).toContain('bg-surface-secondary')
+    expect(wrapper.find('div').classes()).toContain('border-primary')
+  })
+
+  it('applies unselected styling when not selected', () => {
+    const wrapper = mountOption({ selected: false })
+    expect(wrapper.find('div').classes()).toContain('bg-surface-tertiary')
+    expect(wrapper.find('div').classes()).toContain('border-border-primary')
+  })
+
+  it('emits select event when clicked', async () => {
+    const wrapper = mountOption()
+    await wrapper.find('div').trigger('click')
+    expect(wrapper.emitted('select')).toHaveLength(1)
+  })
+})
diff --git a/tests-ui/tests/composables/node/useCreditsBadge.test.ts b/tests-ui/tests/composables/node/useCreditsBadge.test.ts
index 72bb92338..1725eb043 100644
--- a/tests-ui/tests/composables/node/useCreditsBadge.test.ts
+++ b/tests-ui/tests/composables/node/useCreditsBadge.test.ts
@@ -17,6 +17,14 @@ vi.mock('@/stores/workspace/colorPaletteStore', () => ({
   })
 }))
 
+vi.mock('@/composables/useFeatureFlags', () => ({
+  useFeatureFlags: () => ({
+    flags: {
+      subscriptionTiersEnabled: false // Test legacy badge behavior
+    }
+  })
+}))
+
 const { updateSubgraphCredits } = usePriceBadge()
 
 const mockNode = new LGraphNode('mock node')
diff --git a/tests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.ts b/tests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.ts
index b7bff37a5..5be9f7d80 100644
--- a/tests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.ts
+++ b/tests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.ts
@@ -17,9 +17,9 @@ const mockSubscriptionData = {
 }
 
 const mockCreditsData = {
-  totalCredits: '10.00',
-  monthlyBonusCredits: '5.00',
-  prepaidCredits: '5.00',
+  totalCredits: '10.00 Credits',
+  monthlyBonusCredits: '5.00 Credits',
+  prepaidCredits: '5.00 Credits',
   isLoadingBalance: false
 }
 
@@ -154,8 +154,8 @@ describe('SubscriptionPanel', () => {
   describe('credit display functionality', () => {
     it('displays dynamic credit values correctly', () => {
       const wrapper = createWrapper()
-      expect(wrapper.text()).toContain('$10.00') // totalCredits
-      expect(wrapper.text()).toContain('$5.00') // both monthlyBonus and prepaid
+      expect(wrapper.text()).toContain('10.00 Credits')
+      expect(wrapper.text()).toContain('5.00 Credits')
     })
 
     it('shows loading skeleton when fetching balance', () => {
diff --git a/tests-ui/tests/platform/cloud/subscription/composables/useSubscriptionCredits.test.ts b/tests-ui/tests/platform/cloud/subscription/composables/useSubscriptionCredits.test.ts
index 1d64129a4..2155a7f04 100644
--- a/tests-ui/tests/platform/cloud/subscription/composables/useSubscriptionCredits.test.ts
+++ b/tests-ui/tests/platform/cloud/subscription/composables/useSubscriptionCredits.test.ts
@@ -1,8 +1,27 @@
 import { createPinia, setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
+import * as comfyCredits from '@/base/credits/comfyCredits'
 import { useSubscriptionCredits } from '@/platform/cloud/subscription/composables/useSubscriptionCredits'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
+import type { operations } from '@/types/comfyRegistryTypes'
+
+type GetCustomerBalanceResponse =
+  operations['GetCustomerBalance']['responses']['200']['content']['application/json']
+
+vi.mock(
+  'vue-i18n',
+  async (importOriginal: () => Promise<typeof import('vue-i18n')>) => {
+    const actual = await importOriginal()
+    return {
+      ...actual,
+      useI18n: () => ({
+        t: () => 'Credits',
+        locale: { value: 'en-US' }
+      })
+    }
+  }
+)
 
 // Mock Firebase Auth and related modules
 vi.mock('vuefire', () => ({
@@ -55,14 +74,6 @@ vi.mock('@/stores/apiKeyAuthStore', () => ({
   })
 }))
 
-// Mock formatMetronomeCurrency
-vi.mock('@/utils/formatUtil', () => ({
-  formatMetronomeCurrency: vi.fn((micros: number) => {
-    // Simple mock that converts micros to dollars
-    return (micros / 1000000).toFixed(2)
-  })
-}))
-
 describe('useSubscriptionCredits', () => {
   let authStore: ReturnType<typeof useFirebaseAuthStore>
 
@@ -73,63 +84,66 @@ describe('useSubscriptionCredits', () => {
   })
 
   describe('totalCredits', () => {
-    it('should return "0.00" when balance is null', () => {
+    it('should return "0.00 Credits" when balance is null', () => {
       authStore.balance = null
       const { totalCredits } = useSubscriptionCredits()
-      expect(totalCredits.value).toBe('0.00')
+      expect(totalCredits.value).toBe('0.00 Credits')
     })
 
-    it('should return "0.00" when amount_micros is missing', () => {
-      authStore.balance = {} as any
+    it('should return "0.00 Credits" when amount_micros is missing', () => {
+      authStore.balance = {} as GetCustomerBalanceResponse
       const { totalCredits } = useSubscriptionCredits()
-      expect(totalCredits.value).toBe('0.00')
+      expect(totalCredits.value).toBe('0.00 Credits')
     })
 
     it('should format amount_micros correctly', () => {
-      authStore.balance = { amount_micros: 5000000 } as any
+      authStore.balance = { amount_micros: 100 } as GetCustomerBalanceResponse
       const { totalCredits } = useSubscriptionCredits()
-      expect(totalCredits.value).toBe('5.00')
+      expect(totalCredits.value).toBe('211.00 Credits')
     })
 
-    it('should handle formatting errors gracefully', async () => {
-      const mockFormatMetronomeCurrency = vi.mocked(
-        await import('@/utils/formatUtil')
-      ).formatMetronomeCurrency
-      mockFormatMetronomeCurrency.mockImplementationOnce(() => {
+    it('should handle formatting errors by throwing', async () => {
+      const formatSpy = vi.spyOn(comfyCredits, 'formatCreditsFromCents')
+      formatSpy.mockImplementationOnce(() => {
         throw new Error('Formatting error')
       })
 
-      authStore.balance = { amount_micros: 5000000 } as any
+      authStore.balance = { amount_micros: 100 } as GetCustomerBalanceResponse
       const { totalCredits } = useSubscriptionCredits()
-      expect(totalCredits.value).toBe('0.00')
+      expect(() => totalCredits.value).toThrow('Formatting error')
+      formatSpy.mockRestore()
     })
   })
 
   describe('monthlyBonusCredits', () => {
-    it('should return "0.00" when cloud_credit_balance_micros is missing', () => {
-      authStore.balance = {} as any
+    it('should return "0.00 Credits" when cloud_credit_balance_micros is missing', () => {
+      authStore.balance = {} as GetCustomerBalanceResponse
       const { monthlyBonusCredits } = useSubscriptionCredits()
-      expect(monthlyBonusCredits.value).toBe('0.00')
+      expect(monthlyBonusCredits.value).toBe('0.00 Credits')
     })
 
     it('should format cloud_credit_balance_micros correctly', () => {
-      authStore.balance = { cloud_credit_balance_micros: 2500000 } as any
+      authStore.balance = {
+        cloud_credit_balance_micros: 200
+      } as GetCustomerBalanceResponse
       const { monthlyBonusCredits } = useSubscriptionCredits()
-      expect(monthlyBonusCredits.value).toBe('2.50')
+      expect(monthlyBonusCredits.value).toBe('422.00 Credits')
     })
   })
 
   describe('prepaidCredits', () => {
-    it('should return "0.00" when prepaid_balance_micros is missing', () => {
-      authStore.balance = {} as any
+    it('should return "0.00 Credits" when prepaid_balance_micros is missing', () => {
+      authStore.balance = {} as GetCustomerBalanceResponse
       const { prepaidCredits } = useSubscriptionCredits()
-      expect(prepaidCredits.value).toBe('0.00')
+      expect(prepaidCredits.value).toBe('0.00 Credits')
     })
 
     it('should format prepaid_balance_micros correctly', () => {
-      authStore.balance = { prepaid_balance_micros: 7500000 } as any
+      authStore.balance = {
+        prepaid_balance_micros: 300
+      } as GetCustomerBalanceResponse
       const { prepaidCredits } = useSubscriptionCredits()
-      expect(prepaidCredits.value).toBe('7.50')
+      expect(prepaidCredits.value).toBe('633.00 Credits')
     })
   })