[Issue-83] Reformat display number

Koniverse · Jul 29, 2024 · 08ba2c3 · 08ba2c3
1 parent daf7b4f
commit 08ba2c3
Show file tree

Hide file tree

Showing 12 changed files with 73 additions and 42 deletions.
diff --git a/packages/extension-koni-ui/src/Popup/Account/AccountDetail.tsx b/packages/extension-koni-ui/src/Popup/Account/AccountDetail.tsx
@@ -8,7 +8,7 @@ import { AccountRankType, BookaAccount, EnergyConfig, RankInfo } from '@subwalle
 import { accountRankList, detailScreensLayoutBackgroundImages, rankNameMap, smallRankIconMap } from '@subwallet/extension-koni-ui/constants';
 import { useGetAccountByAddress, useGetEnergyInfo, useNotification } from '@subwallet/extension-koni-ui/hooks';
 import { ThemeProps } from '@subwallet/extension-koni-ui/types';
-import { copyToClipboard, formatInteger, formatIntegerShort, toShort } from '@subwallet/extension-koni-ui/utils';
+import { copyToClipboard, toDisplayNumber, toShort } from '@subwallet/extension-koni-ui/utils';
 import { Button, Icon, Progress } from '@subwallet/react-ui';
 import CN from 'classnames';
 import { Copy, Lightning } from 'phosphor-react';
@@ -170,10 +170,10 @@ const Component: React.FC<Props> = (props: Props) => {
                     weight={'fill'}
                   />
 
-                  <span>{formatIntegerShort(currentEnergy || 0)}</span>
+                  <span>{toDisplayNumber(currentEnergy || 0)}</span>
                 </span>
                 <span className='max-energy'>
-                /{formatIntegerShort(energyConfig?.maxEnergy || 0)}
+                /{toDisplayNumber(energyConfig?.maxEnergy || 0)}
                 </span>
               </div>
             </div>
@@ -211,11 +211,11 @@ const Component: React.FC<Props> = (props: Props) => {
                 />
 
                 <span className='current-point'>
-                  {formatInteger(currentPoint)}
+                  {toDisplayNumber(currentPoint)}
                 </span>
 
                 <span className='tagret-point'>
-                  /{formatInteger(rankInfoMap?.[currentRank].maxPoint || 0)}
+                  /{toDisplayNumber(rankInfoMap?.[currentRank].maxPoint || 0)}
                 </span>
               </div>
             </div>

diff --git a/packages/extension-koni-ui/src/Popup/Home/Invite/index.tsx b/packages/extension-koni-ui/src/Popup/Home/Invite/index.tsx
@@ -10,7 +10,7 @@ import { TelegramConnector } from '@subwallet/extension-koni-ui/connector/telegr
 import { detailScreensLayoutBackgroundImages, rankPointMap } from '@subwallet/extension-koni-ui/constants';
 import { useNotification, useSetCurrentPage, useTranslation } from '@subwallet/extension-koni-ui/hooks';
 import { ThemeProps } from '@subwallet/extension-koni-ui/types';
-import { copyToClipboard, formatIntegerShort } from '@subwallet/extension-koni-ui/utils';
+import { copyToClipboard, toDisplayNumber } from '@subwallet/extension-koni-ui/utils';
 import { Button, Icon } from '@subwallet/react-ui';
 import CN from 'classnames';
 import { Copy, Plus, SmileySad, UserCirclePlus } from 'phosphor-react';
@@ -158,7 +158,7 @@ const Component = ({ className }: Props): React.ReactElement => {
         <div className='account-info-area-center-part'>
           <GamePoint
             className={'account-point'}
-            point={formatIntegerShort(account?.attributes.point || 0)}
+            point={toDisplayNumber(account?.attributes.point || 0)}
             size={18}
           />
           <div className='friend-count'>
@@ -210,7 +210,7 @@ const Component = ({ className }: Props): React.ReactElement => {
           </div>
 
           <div className='invitation-reward'>
-            {t('Up to')} {formatIntegerShort(invitePoint)}
+            {t('Up to')} {toDisplayNumber(invitePoint)}
 
             <img
               alt='token'

diff --git a/packages/extension-koni-ui/src/Popup/Home/Mission/TaskCategoryList.tsx b/packages/extension-koni-ui/src/Popup/Home/Mission/TaskCategoryList.tsx
@@ -4,7 +4,7 @@
 import { TaskCategory, TaskCategoryInfo } from '@subwallet/extension-koni-ui/connector/booka/types';
 import { useTranslation } from '@subwallet/extension-koni-ui/hooks';
 import { ThemeProps } from '@subwallet/extension-koni-ui/types';
-import { formatInteger } from '@subwallet/extension-koni-ui/utils';
+import { toDisplayNumber } from '@subwallet/extension-koni-ui/utils';
 import { Icon, Image, Typography } from '@subwallet/react-ui';
 import { CaretRight } from 'phosphor-react';
 import React, { useCallback, useMemo } from 'react';
@@ -53,7 +53,7 @@ const Component = ({ className, onClickCategoryItem, taskCategoryInfoMap, taskCa
               <div>{tc.name}</div>
 
               <div>
-                Min point can earn: {formatInteger(taskCategoryInfoMap[tc.id]?.minPoint || 0)}
+                Min point can earn: {toDisplayNumber(taskCategoryInfoMap[tc.id]?.minPoint || 0)}
               </div>
             </div>
             <div className={'task-category-item-caret-icon'}>

diff --git a/packages/extension-koni-ui/src/Popup/Home/Mission/TaskItem.tsx b/packages/extension-koni-ui/src/Popup/Home/Mission/TaskItem.tsx
@@ -8,7 +8,7 @@ import { ShareLeaderboard, Task } from '@subwallet/extension-koni-ui/connector/b
 import { TelegramConnector } from '@subwallet/extension-koni-ui/connector/telegram';
 import { useNotification, useSetCurrentPage, useTranslation } from '@subwallet/extension-koni-ui/hooks';
 import { ThemeProps } from '@subwallet/extension-koni-ui/types';
-import { customFormatDate, formatInteger } from '@subwallet/extension-koni-ui/utils';
+import { customFormatDate, toDisplayNumber } from '@subwallet/extension-koni-ui/utils';
 import { actionTaskOnChain } from '@subwallet/extension-koni-ui/utils/game/task';
 import { Button, Icon, Image } from '@subwallet/react-ui';
 import CN from 'classnames';
@@ -223,7 +223,7 @@ const _TaskItem = ({ actionReloadPoint, className, openWidget, reloadTask, task
         <div className='__min-part-line-2'>
           <GamePoint
             className={'__game-point'}
-            point={`${formatInteger(task.pointReward || 0)}`}
+            point={`${toDisplayNumber(task.pointReward || 0)}`}
           />
 
           {renderTaskDate()}

diff --git a/packages/extension-koni-ui/src/Popup/Home/Tokens/DetailUpperBlock.tsx b/packages/extension-koni-ui/src/Popup/Home/Tokens/DetailUpperBlock.tsx
@@ -7,7 +7,7 @@ import { useGetEnergyInfo, useTranslation } from '@subwallet/extension-koni-ui/h
 import { saveShowBalance } from '@subwallet/extension-koni-ui/messaging';
 import { RootState } from '@subwallet/extension-koni-ui/stores';
 import { ThemeProps } from '@subwallet/extension-koni-ui/types';
-import { formatIntegerShort } from '@subwallet/extension-koni-ui/utils';
+import { toDisplayNumber } from '@subwallet/extension-koni-ui/utils';
 import { Button, Icon, Number } from '@subwallet/react-ui';
 import { SwNumberProps } from '@subwallet/react-ui/es/number';
 import { CopySimple, Eye, EyeSlash, Lightning, PaperPlaneTilt, ShoppingCartSimple } from 'phosphor-react';
@@ -98,10 +98,10 @@ function Component (
               weight={'fill'}
             />
 
-            <span>{formatIntegerShort(currentEnergy || 0)}</span>
+            <span>{toDisplayNumber(currentEnergy || 0)}</span>
           </span>
           <span className='__max-energy-value'>
-              /{formatIntegerShort(energyConfig?.maxEnergy || 0)}
+              /{toDisplayNumber(energyConfig?.maxEnergy || 0)}
           </span>
         </div>
       </div>

diff --git a/packages/extension-koni-ui/src/Popup/Home/Tokens/UpperBlock.tsx b/packages/extension-koni-ui/src/Popup/Home/Tokens/UpperBlock.tsx
@@ -8,7 +8,7 @@ import { EnergyConfig } from '@subwallet/extension-koni-ui/connector/booka/types
 import { useGetEnergyInfo, useSelector, useTranslation } from '@subwallet/extension-koni-ui/hooks';
 import { reloadCron, saveShowBalance } from '@subwallet/extension-koni-ui/messaging';
 import { ThemeProps } from '@subwallet/extension-koni-ui/types';
-import { formatIntegerShort } from '@subwallet/extension-koni-ui/utils';
+import { toDisplayNumber } from '@subwallet/extension-koni-ui/utils';
 import { Button, Icon, Number, SwNumberProps, Tag } from '@subwallet/react-ui';
 import { ArrowsClockwise, CopySimple, Eye, EyeSlash, Lightning, PaperPlaneTilt, ShoppingCartSimple } from 'phosphor-react';
 import React, { useCallback, useEffect, useState } from 'react';
@@ -117,10 +117,10 @@ function Component (
                   weight={'fill'}
                 />
 
-                <span>{formatIntegerShort(currentEnergy || 0)}</span>
+                <span>{toDisplayNumber(currentEnergy || 0)}</span>
               </span>
               <span className='__max-energy-value'>
-              /{formatIntegerShort(energyConfig?.maxEnergy || 0)}
+              /{toDisplayNumber(energyConfig?.maxEnergy || 0)}
               </span>
             </div>
           )
@@ -193,10 +193,10 @@ function Component (
                   weight={'fill'}
                 />
 
-                <span>{formatIntegerShort(currentEnergy || 0)}</span>
+                <span>{toDisplayNumber(currentEnergy || 0)}</span>
               </span>
               <span className='__max-energy-value'>
-              /{formatIntegerShort(energyConfig?.maxEnergy || 0)}
+              /{toDisplayNumber(energyConfig?.maxEnergy || 0)}
               </span>
             </div>
 

diff --git a/packages/extension-koni-ui/src/components/Account/AccountRankLevel.tsx b/packages/extension-koni-ui/src/components/Account/AccountRankLevel.tsx
@@ -5,7 +5,7 @@ import { GamePoint } from '@subwallet/extension-koni-ui/components';
 import { AccountRankType, RankInfo } from '@subwallet/extension-koni-ui/connector/booka/types';
 import { largeRankIconMap, rankNameMap } from '@subwallet/extension-koni-ui/constants';
 import { ThemeProps } from '@subwallet/extension-koni-ui/types';
-import { formatInteger } from '@subwallet/extension-koni-ui/utils';
+import { toDisplayNumber } from '@subwallet/extension-koni-ui/utils';
 import { Icon } from '@subwallet/react-ui';
 import CN from 'classnames';
 import { CheckCircle } from 'phosphor-react';
@@ -48,7 +48,7 @@ const Component: React.FC<Props> = ({ className, isCurrent, rank, rankInfoMap }:
 
       <GamePoint
         className={'__game-point'}
-        point={rank === 'unknown' ? '---' : `${formatInteger(rankInfoMap[rank]?.minPoint || 0)}`}
+        point={rank === 'unknown' ? '---' : `${toDisplayNumber(rankInfoMap[rank]?.minPoint || 0)}`}
       />
     </div>
   );

diff --git a/packages/extension-koni-ui/src/components/Airdrop/AirdropHistoryItem.tsx b/packages/extension-koni-ui/src/components/Airdrop/AirdropHistoryItem.tsx
@@ -6,7 +6,7 @@ import { AirdropRewardHistoryLog } from '@subwallet/extension-koni-ui/connector/
 import { useTranslation } from '@subwallet/extension-koni-ui/hooks';
 import { RootState } from '@subwallet/extension-koni-ui/stores';
 import { ThemeProps } from '@subwallet/extension-koni-ui/types';
-import { customFormatDate, formatInteger } from '@subwallet/extension-koni-ui/utils';
+import { customFormatDate, toDisplayNumber } from '@subwallet/extension-koni-ui/utils';
 import { Button, Icon, Squircle } from '@subwallet/react-ui';
 import CN from 'classnames';
 import { CheckCircle, Gift } from 'phosphor-react';
@@ -81,7 +81,7 @@ const Component = ({ className, item, onClaim }: Props): React.ReactElement => {
         <div className='__min-part-line-2'>
           <GamePoint
             className={'__reward-value'}
-            point={`${formatInteger(item.rewardValue || 0)}`}
+            point={`${toDisplayNumber(item.rewardValue || 0)}`}
             tokenSrc={item.type === 'TOKEN' ? logoMaps[(item.tokenSlug || '').toLowerCase()] : undefined}
           />
 

diff --git a/packages/extension-koni-ui/src/components/Games/GameAccount.tsx b/packages/extension-koni-ui/src/components/Games/GameAccount.tsx
@@ -3,7 +3,7 @@
 
 import { GameAccountAvatar } from '@subwallet/extension-koni-ui/components';
 import { ThemeProps } from '@subwallet/extension-koni-ui/types';
-import { formatIntegerShort } from '@subwallet/extension-koni-ui/utils';
+import { toDisplayNumber } from '@subwallet/extension-koni-ui/utils';
 import CN from 'classnames';
 import React from 'react';
 import styled from 'styled-components';
@@ -29,7 +29,7 @@ function Component ({ actionNode, avatar, className, isPlaceholder, name, point,
       />
       <span className={'__name'}>{isPlaceholder ? '------' : name}</span>
       <span className={'__point'}>
-        {isPlaceholder ? '---' : formatIntegerShort(point)}
+        {isPlaceholder ? '---' : toDisplayNumber(point)}
       </span>
 
       {actionNode}

diff --git a/packages/extension-koni-ui/src/components/Games/GameAccountBlock.tsx b/packages/extension-koni-ui/src/components/Games/GameAccountBlock.tsx
@@ -6,7 +6,7 @@ import { GameAccountAvatar, GameEnergyBar } from '@subwallet/extension-koni-ui/c
 import { BookaAccount } from '@subwallet/extension-koni-ui/connector/booka/types';
 import { useGetEnergyInfo } from '@subwallet/extension-koni-ui/hooks';
 import { ThemeProps } from '@subwallet/extension-koni-ui/types';
-import { formatIntegerShort } from '@subwallet/extension-koni-ui/utils';
+import { toDisplayNumber } from '@subwallet/extension-koni-ui/utils';
 import { Icon } from '@subwallet/react-ui';
 import CN from 'classnames';
 import { Lightning } from 'phosphor-react';
@@ -42,7 +42,7 @@ function Component ({ accountInfo, className, maxEnergy }: Props) {
       <div className='__right-part'>
         <div className='__point-info'>
           <div className='__point-value'>
-            {formatIntegerShort(accountInfo?.attributes.point || 0)}
+            {toDisplayNumber(accountInfo?.attributes.point || 0)}
           </div>
           <img
             alt={'avatar'}
@@ -74,10 +74,10 @@ function Component ({ accountInfo, className, maxEnergy }: Props) {
                 weight={'fill'}
               />
 
-              <span>{formatIntegerShort(currentEnergy || 0)}</span>
+              <span>{toDisplayNumber(currentEnergy || 0)}</span>
             </span>
             <span className='__max-energy'>
-              /{formatIntegerShort(maxEnergy || 0)}
+              /{toDisplayNumber(maxEnergy || 0)}
             </span>
           </div>
         </div>

diff --git a/packages/extension-koni-ui/src/components/Leaderboard/TopAccountItem.tsx b/packages/extension-koni-ui/src/components/Leaderboard/TopAccountItem.tsx
@@ -4,7 +4,7 @@
 import { GameAccountAvatar, GamePoint } from '@subwallet/extension-koni-ui/components';
 import { LeaderboardPerson } from '@subwallet/extension-koni-ui/connector/booka/types';
 import { ThemeProps } from '@subwallet/extension-koni-ui/types';
-import { formatIntegerShort } from '@subwallet/extension-koni-ui/utils';
+import { toDisplayNumber } from '@subwallet/extension-koni-ui/utils';
 import CN from 'classnames';
 import React from 'react';
 import styled from 'styled-components';
@@ -30,7 +30,7 @@ const Component = ({ className, isFirst, isPlaceholder, leaderboardInfo, rank }:
       return '---';
     }
 
-    return formatIntegerShort(leaderboardInfo?.point);
+    return toDisplayNumber(leaderboardInfo?.point);
   })();
 
   return (

diff --git a/packages/extension-koni-ui/src/utils/common/number.ts b/packages/extension-koni-ui/src/utils/common/number.ts
@@ -20,22 +20,53 @@ export const formatAmount = (amountData?: AmountData): string => {
   return `${displayValue} ${symbol}`;
 };
 
-export function formatInteger (num?: number): string {
-  if (num === undefined) {
-    return '';
+const getNumberSeparators = () => {
+  // default
+  const res = {
+    decimal: '.',
+    thousand: ''
+  };
+
+  // convert a number formatted according to locale
+  const str = parseFloat('1234.56').toLocaleString();
+
+  // if the resulting number does not contain previous number
+  // (i.e. in some Arabic formats), return defaults
+  if (!str.match('1')) {
+    return res;
   }
 
-  return num.toLocaleString('de-DE');
-}
+  // get decimal and thousand separators
+  res.decimal = str.replace(/.*4(.*)5.*/, '$1');
+  res.thousand = str.replace(/.*1(.*)2.*/, '$1');
+
+  // return results
+  return res;
+};
 
-export function formatIntegerShort (num?: number): string {
+const { decimal: decimalSeparator, thousand: thousandSeparator } = getNumberSeparators();
+const intToLocaleString = (str: string, separator: string) =>
+  str.replace(/\B(?=(\d{3})+(?!\d))/g, separator);
+
+export function toDisplayNumber (num?: number): string {
   if (num === undefined) {
     return '';
   }
 
-  if (num >= 100000) {
-    return '100.000+';
-  } else {
-    return formatInteger(num);
+  const formatNumberString = formatNumber(num, 0, balanceFormatter);
+
+  const [int, decAndAbb] = formatNumberString.split('.');
+  const [dec, abbreviation] = decAndAbb ? decAndAbb.split(' ') : [''];
+
+  let result = intToLocaleString(int, thousandSeparator);
+
+  if (dec) {
+    result = `${result}${decimalSeparator}${dec}`;
   }
+
+  if (abbreviation) {
+    result = `${result} ${abbreviation}`;
+  }
+
+  return result;
 }