Settings: Display: hide decimal commas

ZeusLN · Nov 15, 2024 · 883a8fa · 883a8fa
1 parent 040c898
commit 883a8fa
Show file tree

Hide file tree

Showing 6 changed files with 92 additions and 1 deletion.
diff --git a/locales/en.json b/locales/en.json
@@ -742,6 +742,7 @@
     "views.Settings.Display.displayNickname": "Display node nickname on main views",
     "views.Settings.Display.bigKeypadButtons": "Big keypad buttons",
     "views.Settings.Display.showAllDecimalPlaces": "Show all decimal places",
+    "views.Settings.Display.removeDecimalSpaces": "Remove decimal spaces from Bitcoin denominated amounts",
     "views.Settings.Display.showMillisatoshiAmounts": "Show millisatoshi amounts",
     "views.Settings.Display.selectNodeOnStartup": "Select node on startup",
     "views.Settings.privacy": "Privacy",

diff --git a/stores/SettingsStore.ts b/stores/SettingsStore.ts
@@ -44,6 +44,7 @@ interface DisplaySettings {
     displayNickname?: boolean;
     bigKeypadButtons?: boolean;
     showAllDecimalPlaces?: boolean;
+    removeDecimalSpaces?: boolean;
     showMillisatoshiAmounts?: boolean;
 }
 
@@ -1106,6 +1107,7 @@ export default class SettingsStore {
             displayNickname: false,
             bigKeypadButtons: false,
             showAllDecimalPlaces: false,
+            removeDecimalSpaces: false,
             showMillisatoshiAmounts: true
         },
         pos: {

diff --git a/utils/AddressUtils.test.ts b/utils/AddressUtils.test.ts
@@ -5,6 +5,16 @@ jest.mock('react-native-encrypted-storage', () => ({
     clear: jest.fn(() => Promise.resolve())
 }));
 
+jest.mock('../stores/Stores', () => ({
+    SettingsStore: {
+        settings: {
+            display: {
+                removeDecimalSpaces: false
+            }
+        }
+    }
+}));
+
 import AddressUtils from './AddressUtils';
 import { walletrpc } from '../proto/lightning';
 

diff --git a/utils/UnitsUtils.test.ts b/utils/UnitsUtils.test.ts
@@ -1,3 +1,13 @@
+jest.mock('../stores/Stores', () => ({
+    SettingsStore: {
+        settings: {
+            display: {
+                removeDecimalSpaces: false
+            }
+        }
+    }
+}));
+
 import { getDecimalPlaceholder } from './UnitsUtils';
 
 describe('UnitsUtils', () => {

diff --git a/utils/UnitsUtils.ts b/utils/UnitsUtils.ts
@@ -1,3 +1,5 @@
+import stores from '../stores/Stores';
+
 // 100_000_000
 const SATS_PER_BTC = 100000000;
 
@@ -16,7 +18,8 @@ const getDecimalPlaceholder = (amount: string, units: string) => {
 
     return {
         string: amount.includes('.')
-            ? units === 'BTC'
+            ? units === 'BTC' &&
+              !stores?.settingsStore?.settings?.display?.removeDecimalSpaces
                 ? '00 000 000'.slice(
                       occupiedPlaces +
                           (decimalPart.length > 5
@@ -52,6 +55,10 @@ const formatBitcoinWithSpaces = (x: string | number) => {
         return integerFormatted;
     }
 
+    if (stores?.settingsStore?.settings?.display?.removeDecimalSpaces) {
+        return `${integerFormatted}.${decimalPart}`;
+    }
+
     // Handle the first two characters, then group the rest in threes
     const firstTwo = decimalPart.slice(0, 2);
     const rest = decimalPart.slice(2).replace(/(\d{3})(?=\d)/g, '$1 ');

diff --git a/views/Settings/Display.tsx b/views/Settings/Display.tsx
@@ -28,6 +28,7 @@ interface DisplayState {
     displayNickname: boolean;
     bigKeypadButtons: boolean;
     showAllDecimalPlaces: boolean;
+    removeDecimalSpaces: boolean;
     showMillisatoshiAmounts: boolean;
     selectNodeOnStartup: boolean;
 }
@@ -44,6 +45,7 @@ export default class Display extends React.Component<
         displayNickname: false,
         bigKeypadButtons: false,
         showAllDecimalPlaces: false,
+        removeDecimalSpaces: false,
         showMillisatoshiAmounts: false,
         selectNodeOnStartup: false
     };
@@ -65,6 +67,9 @@ export default class Display extends React.Component<
             showAllDecimalPlaces:
                 (settings.display && settings.display.showAllDecimalPlaces) ||
                 false,
+            removeDecimalSpaces:
+                (settings.display && settings.display.removeDecimalSpaces) ||
+                false,
             showMillisatoshiAmounts:
                 (settings.display &&
                     settings.display.showMillisatoshiAmounts) ||
@@ -90,6 +95,7 @@ export default class Display extends React.Component<
             bigKeypadButtons,
             theme,
             showAllDecimalPlaces,
+            removeDecimalSpaces,
             showMillisatoshiAmounts,
             selectNodeOnStartup
         } = this.state;
@@ -126,6 +132,7 @@ export default class Display extends React.Component<
                                     bigKeypadButtons,
                                     defaultView,
                                     showAllDecimalPlaces,
+                                    removeDecimalSpaces,
                                     showMillisatoshiAmounts
                                 }
                             });
@@ -156,6 +163,7 @@ export default class Display extends React.Component<
                                     bigKeypadButtons,
                                     theme,
                                     showAllDecimalPlaces,
+                                    removeDecimalSpaces,
                                     showMillisatoshiAmounts
                                 }
                             });
@@ -200,6 +208,7 @@ export default class Display extends React.Component<
                                             bigKeypadButtons,
                                             displayNickname: !displayNickname,
                                             showAllDecimalPlaces,
+                                            removeDecimalSpaces,
                                             showMillisatoshiAmounts
                                         }
                                     });
@@ -245,6 +254,7 @@ export default class Display extends React.Component<
                                             displayNickname,
                                             bigKeypadButtons: !bigKeypadButtons,
                                             showAllDecimalPlaces,
+                                            removeDecimalSpaces,
                                             showMillisatoshiAmounts
                                         }
                                     });
@@ -292,13 +302,63 @@ export default class Display extends React.Component<
                                             bigKeypadButtons,
                                             showAllDecimalPlaces:
                                                 !showAllDecimalPlaces,
+                                            removeDecimalSpaces,
+                                            showMillisatoshiAmounts
+                                        }
+                                    });
+                                }}
+                            />
+                        </View>
+                    </ListItem>
+
+                    <ListItem
+                        containerStyle={{
+                            borderBottomWidth: 0,
+                            backgroundColor: 'transparent'
+                        }}
+                    >
+                        <ListItem.Title
+                            style={{
+                                color: themeColor('secondaryText'),
+                                fontFamily: 'PPNeueMontreal-Book',
+                                left: -10
+                            }}
+                        >
+                            {localeString(
+                                'views.Settings.Display.removeDecimalSpaces'
+                            )}
+                        </ListItem.Title>
+                        <View
+                            style={{
+                                flex: 1,
+                                flexDirection: 'row',
+                                justifyContent: 'flex-end'
+                            }}
+                        >
+                            <Switch
+                                value={removeDecimalSpaces}
+                                onValueChange={async () => {
+                                    this.setState({
+                                        removeDecimalSpaces:
+                                            !removeDecimalSpaces
+                                    });
+                                    await updateSettings({
+                                        display: {
+                                            defaultView,
+                                            theme,
+                                            displayNickname,
+                                            bigKeypadButtons,
+                                            showAllDecimalPlaces,
+                                            removeDecimalSpaces:
+                                                !removeDecimalSpaces,
                                             showMillisatoshiAmounts
                                         }
                                     });
                                 }}
                             />
                         </View>
                     </ListItem>
+
                     <ListItem
                         containerStyle={{
                             borderBottomWidth: 0,
@@ -337,6 +397,7 @@ export default class Display extends React.Component<
                                             displayNickname,
                                             bigKeypadButtons,
                                             showAllDecimalPlaces,
+                                            removeDecimalSpaces,
                                             showMillisatoshiAmounts:
                                                 !showMillisatoshiAmounts
                                         }