From 8f5910d30aa1384a49c1b144739943189ae53341 Mon Sep 17 00:00:00 2001
From: openhands <openhands@all-hands.dev>
Date: Tue, 3 Mar 2026 03:03:22 +0000
Subject: [PATCH] fix: Raw number rendering for \`taxPaidGes\` and \`profit\`
 after load (#375)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 kraiken-lib/src/format.ts                          | 5 +++++
 web-app/src/components/collapse/CollapseActive.vue | 6 +++---
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/kraiken-lib/src/format.ts b/kraiken-lib/src/format.ts
index 2a41da4..efc55fe 100644
--- a/kraiken-lib/src/format.ts
+++ b/kraiken-lib/src/format.ts
@@ -24,3 +24,8 @@ 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 {
+  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..b748ce4 100644
--- a/web-app/src/components/collapse/CollapseActive.vue
+++ b/web-app/src/components/collapse/CollapseActive.vue
@@ -42,11 +42,11 @@
       <div v-if="!error || taxPaidGes !== undefined" class="profit-stats-wrapper">
         <div class="profit-stats-item">
           <div><b>Tax Paid</b></div>
-          <div>{{ taxPaidGes ?? '...' }} $KRK</div>
+          <div>{{ taxPaidGes !== undefined ? formatTokenAmount(taxPaidGes) : '...' }} $KRK</div>
         </div>
         <div class="profit-stats-item">
           <div><b>Issuance Earned</b></div>
-          <div>{{ profit ?? '...' }} $KRK</div>
+          <div>{{ profit !== undefined ? formatTokenAmount(profit) : '...' }} $KRK</div>
         </div>
         <div class="profit-stats-item profit-stats-total">
           <div><b>Total</b></div>
@@ -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';