feature: staking earnings decimal formatting design

src/features/rnbw-membership/screens/rnbw-membership-screen/components/RnbwStakingEarningsCard.tsx

@@ -7,6 +7,7 @@ import { MembershipCard } from '@/features/rnbw-membership/screens/rnbw-membersh
 import { RNBW_SYMBOL } from '@/features/rnbw-rewards/constants';
 import { useRnbwStakingEarnings } from '@/features/rnbw-staking/stores/derived/useRnbwStakingEarnings';
 import { useStakingPositionStore } from '@/features/rnbw-staking/stores/rnbwStakingPositionStore';
+import { parseDecimalParts } from '@/framework/core/utils/parseDecimalParts';
 import { isZero } from '@/helpers/utilities';
 import * as i18n from '@/languages';
 
@@ -21,6 +22,7 @@ export const RnbwStakingEarningsCard = memo(function RnbwStakingEarningsCard() {
   }
 
   const isZeroTotalEarnings = isZero(totalEarnings);
+  const { whole: totalEarningsWhole, fractionalSuffix: totalEarningsFractionalSuffix } = parseDecimalParts(totalEarnings);
 
   return (
     <MembershipCard padding="24px">
@@ -32,7 +34,12 @@ export const RnbwStakingEarningsCard = memo(function RnbwStakingEarningsCard() {
         <Box flexDirection="row" alignItems="center" gap={8}>
           <Image source={rnbwCoinImage} style={{ width: 40, height: 40 }} />
           <Text size="34pt" weight="bold" color={isZeroTotalEarnings ? 'labelQuaternary' : 'label'}>
-            {totalEarnings}
+            {totalEarningsWhole}
+            {totalEarningsFractionalSuffix && (
+              <Text size="26pt" weight="bold" color="labelQuaternary">
+                {totalEarningsFractionalSuffix}
+              </Text>
+            )}
           </Text>
         </Box>
         <Separator color="separatorTertiary" thickness={1} />

src/features/rnbw-staking/stores/derived/useRnbwStakingEarnings.ts

@@ -24,7 +24,7 @@ export const useRnbwStakingEarnings = createDerivedStore<StakingEarnings>(
     const exitRewardsEarnings = convertRawAmountToDecimalFormat(exitRewardsRaw, tokenDecimals);
 
     return {
-      totalEarnings: isZero(totalEarnings) ? '0' : formatNumber(totalEarnings, { decimals: 4 }),
+      totalEarnings: isZero(totalEarnings) ? '0' : formatNumber(totalEarnings, { decimals: 5 }),
       cashbackEarnings: isZero(cashbackEarnings)
         ? '0'
         : truncateToDecimalsWithThreshold({ value: cashbackEarnings, decimals: 2, threshold: '0.01' }),

src/framework/core/utils/parseDecimalParts.test.ts

@@ -0,0 +1,19 @@
+import { parseDecimalParts } from './parseDecimalParts';
+
+const testCases = [
+  { value: '123', expected: { whole: '123', fractionalSuffix: '' } },
+  { value: '-123', expected: { whole: '-123', fractionalSuffix: '' } },
+  { value: '123.45', expected: { whole: '123', fractionalSuffix: '.45' } },
+  { value: '-123.45', expected: { whole: '-123', fractionalSuffix: '.45' } },
+  { value: '.45', expected: { whole: '', fractionalSuffix: '.45' } },
+  { value: '123.', expected: { whole: '123', fractionalSuffix: '.' } },
+  { value: '1.2.3', expected: { whole: '1.2', fractionalSuffix: '.3' } },
+];
+
+describe('parseDecimalParts', () => {
+  testCases.forEach(({ value, expected }) => {
+    it(`parses ${value}`, () => {
+      expect(parseDecimalParts(value)).toEqual(expected);
+    });
+  });
+});

src/framework/core/utils/parseDecimalParts.ts

@@ -0,0 +1,15 @@
+export function parseDecimalParts(value: string): {
+  whole: string;
+  fractionalSuffix: string;
+} {
+  const decimalIndex = value.lastIndexOf('.');
+
+  if (decimalIndex === -1) {
+    return { whole: value, fractionalSuffix: '' };
+  }
+
+  return {
+    whole: value.slice(0, decimalIndex),
+    fractionalSuffix: value.slice(decimalIndex),
+  };
+}