diff --git a/kraiken-lib/src/format.ts b/kraiken-lib/src/format.ts
index 2a41da4..06d906d 100644
--- a/kraiken-lib/src/format.ts
+++ b/kraiken-lib/src/format.ts
@@ -24,3 +24,9 @@ export function compactNumber(value: number): string {
export function commaNumber(value: number): string {
return value ? value.toLocaleString('en-US') : '0';
}
+
+/** Format a token amount with comma grouping and 2 decimal places (e.g. "1,234.56") */
+export function formatTokenAmount(value: number): string {
+ if (!isFinite(value)) return '0.00';
+ return value.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+}
diff --git a/web-app/src/components/collapse/CollapseActive.vue b/web-app/src/components/collapse/CollapseActive.vue
index db8e27a..8955831 100644
--- a/web-app/src/components/collapse/CollapseActive.vue
+++ b/web-app/src/components/collapse/CollapseActive.vue
@@ -42,15 +42,15 @@
Tax Paid
-
{{ taxPaidGes ?? '...' }} $KRK
+
{{ taxPaidGes !== undefined ? formatTokenAmount(taxPaidGes) : '...' }} $KRK
Issuance Earned
-
{{ profit ?? '...' }} $KRK
+
{{ profit !== undefined ? formatTokenAmount(profit) : '...' }} $KRK
Total
-
{{ taxPaidGes !== undefined && profit !== undefined ? total.toFixed(5) : '...' }} $KRK
+
{{ taxPaidGes !== undefined && profit !== undefined ? formatTokenAmount(total) : '...' }} $KRK
@@ -88,7 +88,7 @@ import FButton from '@/components/fcomponents/FButton.vue';
import FTag from '@/components/fcomponents/FTag.vue';
import FSelect from '@/components/fcomponents/FSelect.vue';
import FCollapse from '@/components/fcomponents/FCollapse.vue';
-import { compactNumber, weiToNumber } from 'kraiken-lib/format';
+import { compactNumber, weiToNumber, formatTokenAmount } from 'kraiken-lib/format';
import { useUnstake } from '@/composables/useUnstake';
import { useAdjustTaxRate } from '@/composables/useAdjustTaxRates';
import { computed, ref, onMounted } from 'vue';