global en locale

lib/setLocale.ts

+const old = Number.prototype.toLocaleString;
+Number.prototype.toLocaleString = function(locale, ...args) {
+  return old.call(this, 'en', ...args);
+};
+
+export {};

lib/tx/getConfirmationDuration.ts

@@ -6,12 +6,12 @@ export default function getConfirmationString(durations: Array<number>) {
   const [ lower, upper ] = durations.map((time) => time / 1_000);
 
   if (!upper) {
-    return `Confirmed within ${ lower } secs`;
+    return `Confirmed within ${ lower.toLocaleString() } secs`;
   }
 
   if (lower === 0) {
-    return `Confirmed within <= ${ upper } secs`;
+    return `Confirmed within <= ${ upper.toLocaleString() } secs`;
   }
 
-  return `Confirmed within ${ lower } - ${ upper } secs`;
+  return `Confirmed within ${ lower.toLocaleString() } - ${ upper.toLocaleString() } secs`;
 }

pages/_app.tsx

@@ -17,6 +17,8 @@ import AppError from 'ui/shared/AppError/AppError';
 import ErrorBoundary from 'ui/shared/ErrorBoundary';
 import GoogleAnalytics from 'ui/shared/GoogleAnalytics';
 
+import 'lib/setLocale';
+
 function MyApp({ Component, pageProps }: AppProps) {
   useConfigSentry();
   const [ queryClient ] = useState(() => new QueryClient({

ui/addresses/AddressesListItem.tsx

@@ -55,7 +55,7 @@ const AddressesListItem = ({
       ) }
       <HStack spacing={ 3 }>
         <Text fontSize="sm" fontWeight={ 500 }>Txn count</Text>
-        <Text fontSize="sm" variant="secondary">{ Number(item.tx_count).toLocaleString('en') }</Text>
+        <Text fontSize="sm" variant="secondary">{ Number(item.tx_count).toLocaleString() }</Text>
       </HStack>
     </ListItemMobile>
   );

ui/addresses/AddressesTableItem.tsx

@@ -60,7 +60,7 @@ const AddressesTableItem = ({
         </Td>
       ) }
       <Td isNumeric>
-        <Text lineHeight="24px">{ Number(item.tx_count).toLocaleString('en') }</Text>
+        <Text lineHeight="24px">{ Number(item.tx_count).toLocaleString() }</Text>
       </Td>
     </Tr>
   );

ui/block/BlockDetails.tsx

@@ -112,7 +112,7 @@ const BlockDetails = ({ query }: Props) => {
         title="Size"
         hint="Size of the block in bytes"
       >
-        { data.size.toLocaleString('en') }
+        { data.size.toLocaleString() }
       </DetailsInfoItem>
       <DetailsInfoItem
         title="Timestamp"

ui/blocks/BlocksListItem.tsx

@@ -48,7 +48,7 @@ const BlocksListItem = ({ data, isPending, enableTimeIncrement }: Props) => {
       </Flex>
       <Flex columnGap={ 2 }>
         <Text fontWeight={ 500 }>Size</Text>
-        <Text variant="secondary">{ data.size.toLocaleString('en') } bytes</Text>
+        <Text variant="secondary">{ data.size.toLocaleString() } bytes</Text>
       </Flex>
       <Flex columnGap={ 2 }>
         <Text fontWeight={ 500 }>{ capitalize(getNetworkValidatorTitle()) }</Text>

ui/blocks/BlocksTableItem.tsx

@@ -53,7 +53,7 @@ const BlocksTableItem = ({ data, isPending, enableTimeIncrement }: Props) => {
         </Flex>
         <BlockTimestamp ts={ data.timestamp } isEnabled={ enableTimeIncrement }/>
       </Td>
-      <Td fontSize="sm">{ data.size.toLocaleString('en') }</Td>
+      <Td fontSize="sm">{ data.size.toLocaleString() }</Td>
       <Td fontSize="sm">
         <AddressLink type="address" alias={ data.miner.name } hash={ data.miner.hash } truncation="constant" display="inline-flex" maxW="100%"/>
       </Td>

ui/home/indicators/utils/indicators.tsx

@@ -12,7 +12,7 @@ import TokenLogo from 'ui/shared/TokenLogo';
 const dailyTxsIndicator: TChainIndicator<'homepage_chart_txs'> = {
   id: 'daily_txs',
   title: 'Daily transactions',
-  value: (stats) => Number(stats.transactions_today).toLocaleString('en', { maximumFractionDigits: 2, notation: 'compact' }),
+  value: (stats) => Number(stats.transactions_today).toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' }),
   icon: <Icon as={ txIcon } boxSize={ 6 } bgColor="#56ACD1" borderRadius="base" color="white"/>,
   hint: `The total daily number of transactions on the blockchain for the last month.`,
   api: {
@@ -22,7 +22,7 @@ const dailyTxsIndicator: TChainIndicator<'homepage_chart_txs'> = {
         .map((item) => ({ date: new Date(item.date), value: item.tx_count }))
         .sort(sortByDateDesc),
       name: 'Tx/day',
-      valueFormatter: (x: number) => x.toLocaleString('en', { maximumFractionDigits: 2, notation: 'compact' }),
+      valueFormatter: (x: number) => x.toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' }),
     } ]),
   },
 };
@@ -48,7 +48,7 @@ const coinPriceIndicator: TChainIndicator<'homepage_chart_market'> = {
 const marketPriceIndicator: TChainIndicator<'homepage_chart_market'> = {
   id: 'market_cup',
   title: 'Market cap',
-  value: (stats) => '$' + Number(stats.market_cap).toLocaleString('en', { maximumFractionDigits: 0, notation: 'compact' }),
+  value: (stats) => '$' + Number(stats.market_cap).toLocaleString(undefined, { maximumFractionDigits: 0, notation: 'compact' }),
   icon: <Icon as={ globeIcon } boxSize={ 6 } bgColor="#6A5DCC" borderRadius="base" color="white"/>,
   // eslint-disable-next-line max-len
   hint: 'The total market value of a cryptocurrency\'s circulating supply. It is analogous to the free-float capitalization in the stock market. Market Cap = Current Price x Circulating Supply.',
@@ -59,7 +59,7 @@ const marketPriceIndicator: TChainIndicator<'homepage_chart_market'> = {
         .map((item) => ({ date: new Date(item.date), value: Number(item.closing_price) * Number(response.available_supply) }))
         .sort(sortByDateDesc),
       name: 'Market cap',
-      valueFormatter: (x: number) => '$' + x.toLocaleString('en', { maximumFractionDigits: 0 }),
+      valueFormatter: (x: number) => '$' + x.toLocaleString(undefined, { maximumFractionDigits: 0 }),
     } ]),
   },
 };

ui/pages/Deposits.tsx

@@ -47,7 +47,7 @@ const Deposits = () => {
 
     return (
       <Text mb={{ base: 6, lg: isPaginationVisible ? 0 : 6 }} lineHeight={{ base: '24px', lg: '32px' }}>
-        A total of { countersQuery.data.toLocaleString('en') } deposits found
+        A total of { countersQuery.data.toLocaleString() } deposits found
       </Text>
     );
   })();

ui/pages/OutputRoots.tsx

@@ -49,7 +49,7 @@ const OutputRoots = () => {
       L2 output index
         <Text fontWeight={ 600 } whiteSpace="pre"> #{ data.items[0].l2_output_index } </Text>to
         <Text fontWeight={ 600 } whiteSpace="pre"> #{ data.items[data.items.length - 1].l2_output_index } </Text>
-      (total of { countersQuery.data.toLocaleString('en') } roots)
+      (total of { countersQuery.data.toLocaleString() } roots)
       </Flex>
     );
   })();

ui/pages/TxnBatches.tsx

@@ -50,7 +50,7 @@ const TxnBatches = () => {
       Tx batch (L2 block)
         <Text fontWeight={ 600 } whiteSpace="pre"> #{ data.items[0].l2_block_number } </Text>to
         <Text fontWeight={ 600 } whiteSpace="pre"> #{ data.items[data.items.length - 1].l2_block_number } </Text>
-      (total of { countersQuery.data.toLocaleString('en') } batches)
+      (total of { countersQuery.data.toLocaleString() } batches)
       </Flex>
     );
   })();

ui/pages/Withdrawals.tsx

@@ -47,7 +47,7 @@ const Withdrawals = () => {
 
     return (
       <Text mb={{ base: 6, lg: isPaginationVisible ? 0 : 6 }} lineHeight={{ base: '24px', lg: '32px' }}>
-        A total of { countersQuery.data.toLocaleString('en') } withdrawals found
+        A total of { countersQuery.data.toLocaleString() } withdrawals found
       </Text>
     );
   })();

ui/shared/GasUsedToTargetRatio.tsx

@@ -9,7 +9,7 @@ const GasUsedToTargetRatio = ({ value }: Props) => {
   return (
     <Tooltip label="% of Gas Target">
       <Text variant="secondary">
-        { (value > 0 ? '+' : '') + value.toLocaleString('en', { maximumFractionDigits: 2 }) }%
+        { (value > 0 ? '+' : '') + value.toLocaleString(undefined, { maximumFractionDigits: 2 }) }%
       </Text>
     </Tooltip>
   );

ui/shared/SocketNewItemsNotice.tsx

@@ -31,7 +31,7 @@ const SocketNewItemsNotice = ({ children, className, url, num, alert, type = 'tr
 
     return (
       <>
-        <Link href={ url }>{ num } more { name }{ num > 1 ? 's' : '' }</Link>
+        <Link href={ url }>{ num.toLocaleString() } more { name }{ num > 1 ? 's' : '' }</Link>
         <Text whiteSpace="pre"> ha{ num > 1 ? 've' : 's' } come in</Text>
       </>
     );

ui/shared/Utilization/Utilization.tsx

@@ -11,7 +11,7 @@ interface Props {
 const WIDTH = 50;
 
 const Utilization = ({ className, value, colorScheme = 'green' }: Props) => {
-  const valueString = (clamp(value * 100 || 0, 0, 100)).toLocaleString('en', { maximumFractionDigits: 2 }) + '%';
+  const valueString = (clamp(value * 100 || 0, 0, 100)).toLocaleString(undefined, { maximumFractionDigits: 2 }) + '%';
   const colorGrayScheme = useColorModeValue('gray.500', 'gray.400');
   const color = colorScheme === 'gray' ? colorGrayScheme : 'green.500';
 

ui/shared/chart/useTimeChartController.tsx

@@ -72,7 +72,7 @@ export default function useTimeChartController({ data, width, height }: Props) {
     return format(d as Date);
   };
 
-  const yTickFormat = () => (d: d3.AxisDomain) => Number(d).toLocaleString('en', { maximumFractionDigits: 3, notation: 'compact' });
+  const yTickFormat = () => (d: d3.AxisDomain) => Number(d).toLocaleString(undefined, { maximumFractionDigits: 3, notation: 'compact' });
 
   return {
     xTickFormat,

ui/shared/forms/FileSnippet.tsx

@@ -101,7 +101,7 @@ const FileSnippet = ({ file, className, index, onRemove, isDisabled, error }: Pr
           />
         </Flex>
         <Text variant="secondary" mt={ 1 }>
-          { file.size.toLocaleString('en', { notation: 'compact', maximumFractionDigits: 2, unit: 'byte', unitDisplay: 'narrow', style: 'unit' }) }
+          { file.size.toLocaleString(undefined, { notation: 'compact', maximumFractionDigits: 2, unit: 'byte', unitDisplay: 'narrow', style: 'unit' }) }
         </Text>
       </Box>
     </Flex>

ui/stats/NumberWidgetsList.tsx

@@ -31,7 +31,7 @@ const NumberWidgetsList = () => {
             <NumberWidget
               key={ id }
               label={ title }
-              value={ `${ Number(value).toLocaleString('en', { maximumFractionDigits: 3, notation: 'compact' }) } ${ units ? units : '' }` }
+              value={ `${ Number(value).toLocaleString(undefined, { maximumFractionDigits: 3, notation: 'compact' }) } ${ units ? units : '' }` }
             />
           );
         }) }

ui/token/TokenDetails.tsx

@@ -49,7 +49,7 @@ const TokenDetails = ({ tokenQuery }: Props) => {
 
     const tab: TokenTabs = item === 'token_holders_count' ? 'holders' : 'token_transfers';
 
-    return <Link onClick={ changeUrlAndScroll(tab) }>{ itemValue }</Link>;
+    return <Link onClick={ changeUrlAndScroll(tab) }>{ Number(itemValue).toLocaleString() }</Link>;
   }, [ tokenCountersQuery.data, changeUrlAndScroll ]);
 
   if (tokenQuery.isError) {
@@ -85,7 +85,7 @@ const TokenDetails = ({ tokenQuery }: Props) => {
     marketcap = totalValue?.usd;
     totalSupplyValue = totalValue?.valueStr;
   } else {
-    totalSupplyValue = Number(totalSupply).toLocaleString('en');
+    totalSupplyValue = Number(totalSupply).toLocaleString();
   }
 
   return (

ui/tokens/TokensListItem.tsx

@@ -77,7 +77,7 @@ const TokensTableItem = ({
       ) }
       <HStack spacing={ 3 }>
         <Text fontSize="sm" fontWeight={ 500 }>Holders</Text>
-        <Text fontSize="sm" variant="secondary">{ holders }</Text>
+        <Text fontSize="sm" variant="secondary">{ Number(holders).toLocaleString() }</Text>
       </HStack>
     </ListItemMobile>
   );

ui/tokens/TokensTableItem.tsx

@@ -71,7 +71,7 @@ const TokensTableItem = ({
       <Td isNumeric maxWidth="300px" width="300px">
         <Text fontSize="sm" lineHeight="24px" fontWeight={ 500 }>{ totalValue?.usd ? `$${ totalValue.usd }` : '-' }</Text>
       </Td>
-      <Td isNumeric><Text fontSize="sm" lineHeight="24px" fontWeight={ 500 }>{ holders }</Text></Td>
+      <Td isNumeric><Text fontSize="sm" lineHeight="24px" fontWeight={ 500 }>{ Number(holders).toLocaleString() }</Text></Td>
     </Tr>
   );
 };

ui/verifiedContracts/VerifiedContractsCountersItem.tsx

@@ -18,10 +18,10 @@ const VerifiedContractsCountersItem = ({ name, total, new24 }: Props) => {
     >
       <Text variant="secondary" fontSize="xs">{ name }</Text>
       <Flex alignItems="baseline">
-        <Text fontWeight={ 600 } mr={ 2 } fontSize="lg">{ Number(total).toLocaleString('en') }</Text>
+        <Text fontWeight={ 600 } mr={ 2 } fontSize="lg">{ Number(total).toLocaleString() }</Text>
         { Number(new24) > 0 && (
           <>
-            <Text fontWeight={ 600 } mr={ 1 } fontSize="lg" color="green.500">+{ Number(new24).toLocaleString('en') }</Text>
+            <Text fontWeight={ 600 } mr={ 1 } fontSize="lg" color="green.500">+{ Number(new24).toLocaleString() }</Text>
             <Text variant="secondary" fontSize="sm">(24h)</Text>
           </>
         ) }