Purse Short Number toggle

public/ui-config.json

@@ -45,6 +45,7 @@
         5,
         101
     ],
+    "currency.display.number.short": false,
     "currency.asset.icon.url": "${images.url}/wallet/%type%.png",
     "catalog.asset.url": "${image.library.url}catalogue",
     "catalog.asset.image.url": "${catalog.asset.url}/%name%.gif",

src/api/utils/LocalizeFormattedNumber.ts

@@ -0,0 +1,6 @@
+export function LocalizeFormattedNumber(number: number): string
+{
+    if(!number || isNaN(number)) return '0';
+
+    return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
+};

src/api/utils/index.ts

@@ -1,6 +1,7 @@
 export * from './ColorUtils';
 export * from './LocalizeBadgeDescription';
 export * from './LocalizeBageName';
+export * from './LocalizeFormattedNumber';
 export * from './LocalizeShortNumber';
 export * from './LocalizeText';
 export * from './Randomizer';

src/views/purse/PurseView.tsx

@@ -29,6 +29,11 @@ export const PurseView: FC<{}> = props =>
         return GetConfiguration<number[]>('system.currency.types', []);
     }, []);
 
+    const currencyDisplayNumberShort = useMemo(() =>
+    {
+        return GetConfiguration<boolean>('currency.display.number.short', false);
+    }, []);
+
     const getCurrencyElements = useCallback((offset: number, limit: number = -1, seasonal: boolean = false) =>
     {
         if(!purse.activityPoints.size) return null;
@@ -53,13 +58,13 @@ export const PurseView: FC<{}> = props =>
             if((limit > -1) && (count === limit)) break;
 
             if(seasonal) elements.push(<SeasonalView key={ type } type={ type } amount={ purse.activityPoints.get(type) } />);
-            else elements.push(<CurrencyView key={ type } type={ type } amount={ purse.activityPoints.get(type) } />);
+            else elements.push(<CurrencyView key={ type } type={ type } amount={ purse.activityPoints.get(type) } short={ currencyDisplayNumberShort } />);
 
             count++;
         }
 
         return elements;
-    }, [ purse, displayedCurrencies ]);
+    }, [ purse, displayedCurrencies, currencyDisplayNumberShort ]);
 
     const getClubText = useCallback(() =>
     {
@@ -123,7 +128,7 @@ export const PurseView: FC<{}> = props =>
                 <div className="row mx-0 w-100">
                     <div className="col-6 px-0">
                         <div className="d-flex flex-column nitro-currencies">
-                            <CurrencyView type={ -1 } amount={ purse.credits } />
+                            <CurrencyView type={ -1 } amount={ purse.credits } short={ currencyDisplayNumberShort } />
                             { getCurrencyElements(0, 2) }
                         </div>
                     </div>

src/views/purse/views/currency/CurrencyView.tsx

@@ -1,13 +1,23 @@
-import { FC } from 'react';
+import { FC, useMemo } from 'react';
 import { OverlayTrigger, Tooltip } from 'react-bootstrap';
-import { LocalizeShortNumber } from '../../../../api';
+import { LocalizeFormattedNumber, LocalizeShortNumber } from '../../../../api';
 import { CurrencyIcon } from '../../../shared/currency-icon/CurrencyIcon';
 import { CurrencyViewProps } from './CurrencyView.types';
 
 export const CurrencyView: FC<CurrencyViewProps> = props =>
 {
-    const { type = -1, amount = -1 } = props;
+    const { type = -1, amount = -1, short = false } = props;
 
+    const element = useMemo(() =>
+    {
+        return (<div className="nitro-currency d-flex justify-content-end nitro-purse-button">
+                    <div className="px-1 text-end text-truncate nitro-currency-text align-self-center">{ short ? LocalizeShortNumber(amount) : LocalizeFormattedNumber(amount) }</div>
+                    <CurrencyIcon className="flex-shrink-0" type={ type } />
+                </div>);
+    }, [ amount, short, type ]);
+
+    if(!short) return element;
+    
     return (
         <OverlayTrigger
         placement="left"
@@ -16,10 +26,7 @@ export const CurrencyView: FC<CurrencyViewProps> = props =>
                 { amount }
             </Tooltip>
         }>
-            <div className="nitro-currency d-flex justify-content-end nitro-purse-button">
-                <div className="px-1 text-end text-truncate nitro-currency-text align-self-center">{LocalizeShortNumber(amount)}</div>
-                <CurrencyIcon className="flex-shrink-0" type={ type } />
-            </div>
+            { element }
         </OverlayTrigger>
     );
 }

src/views/purse/views/currency/CurrencyView.types.ts

@@ -2,4 +2,5 @@ export interface CurrencyViewProps
 {
     type: number;
     amount: number;
+    short: boolean;
 }

src/views/purse/views/seasonal/SeasonalView.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { LocalizeShortNumber, LocalizeText } from '../../../../api';
+import { LocalizeFormattedNumber, LocalizeText } from '../../../../api';
 import { CurrencyIcon } from '../../../shared/currency-icon/CurrencyIcon';
 import { SeasonalViewProps } from './SeasonalView.types';
 
@@ -11,7 +11,7 @@ export const SeasonalView: FC<SeasonalViewProps> = props =>
         <div className="nitro-seasonal-currency rounded d-flex justify-content-end">
             <div className="nitro-currency-text w-100 px-1 d-flex justify-content-between">
                 <span className="seasonal-text">{ LocalizeText(`purse.seasonal.currency.${ type }`) }</span>
-                <span>{ LocalizeShortNumber(amount) }</span>
+                <span>{ LocalizeFormattedNumber(amount) }</span>
             </div>
             <div>
                 <CurrencyIcon type={ type } />