Formatting improvements (#731)

ui/component/claimPreview/view.jsx

@@ -170,8 +170,9 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
       return <span />;
     }
     const formattedSubCount = toCompactNotation(channelSubCount, lang, 10000);
+    const formattedSubCountLocale = Number(channelSubCount).toLocaleString();
     return (
-      <Tooltip title={channelSubCount} followCursor placement="top">
+      <Tooltip title={formattedSubCountLocale} followCursor placement="top">
         <span className="claim-preview__channel-sub-count">
           {channelSubCount === 1 ? __('1 Follower') : __('%formattedSubCount% Followers', { formattedSubCount })}
         </span>

ui/page/channel/index.js

@@ -15,6 +15,7 @@ import { selectIsSubscribedForUri } from 'redux/selectors/subscriptions';
 import { selectModerationBlockList } from 'redux/selectors/comments';
 import { selectMutedChannels } from 'redux/selectors/blocked';
 import { doOpenModal } from 'redux/actions/app';
+import { selectLanguage } from 'redux/selectors/settings';
 import ChannelPage from './view';
 
 const select = (state, props) => {
@@ -35,6 +36,7 @@ const select = (state, props) => {
     blockedChannels: selectModerationBlockList(state),
     mutedChannels: selectMutedChannels(state),
     unpublishedCollections: selectMyUnpublishedCollections(state),
+    lang: selectLanguage(state),
   };
 };
 

ui/page/channel/view.jsx

@@ -27,6 +27,8 @@ import I18nMessage from 'component/i18nMessage';
 import TruncatedText from 'component/common/truncated-text';
 // $FlowFixMe cannot resolve ...
 import PlaceholderTx from 'static/img/placeholderTx.gif';
+import Tooltip from 'component/common/tooltip';
+import { toCompactNotation } from 'util/string';
 
 export const PAGE_VIEW_QUERY = `view`;
 export const DISCUSSION_PAGE = `discussion`;
@@ -58,6 +60,7 @@ type Props = {
   blockedChannels: Array<string>,
   mutedChannels: Array<string>,
   unpublishedCollections: CollectionGroup,
+  lang: string,
 };
 
 function ChannelPage(props: Props) {
@@ -77,6 +80,7 @@ function ChannelPage(props: Props) {
     blockedChannels,
     mutedChannels,
     unpublishedCollections,
+    lang,
   } = props;
   const {
     push,
@@ -91,6 +95,7 @@ function ChannelPage(props: Props) {
   const { channelName } = parseURI(uri);
   const { permanent_url: permanentUrl } = claim;
   const claimId = claim.claim_id;
+  const compactSubCount = toCompactNotation(subCount, lang, 10000);
   const formattedSubCount = Number(subCount).toLocaleString();
   const isBlocked = claim && blockedChannels.includes(claim.permanent_url);
   const isMuted = claim && mutedChannels.includes(claim.permanent_url);
@@ -231,10 +236,12 @@ function ChannelPage(props: Props) {
             <ChannelStakedIndicator uri={uri} large />
           </h1>
           <div className="channel__meta">
+            <Tooltip title={formattedSubCount} followCursor placement="top">
               <span>
-              {formattedSubCount} {subCount !== 1 ? __('Followers') : __('Follower')}
+                {compactSubCount} {subCount !== 1 ? __('Followers') : __('Follower')}
                 <HelpLink href="https://odysee.com/@OdyseeHelp:b/OdyseeBasics:c" />
               </span>
+            </Tooltip>
             {channelIsMine && (
               <>
                 {pending ? (