Updated modal and project list styles

packages/landing/src/common/components/Project/index.js

@@ -10,9 +10,9 @@ import ProjectStyle from './project.style';
 import { ellipsisAddress } from 'common/utils';
 import _ from 'lodash';
 import reduxHelper from 'redux/helper';
-import backend from 'common/backend'
+import backend from 'common/backend';
 import notificationHelper from 'common/utils/notification.helper';
-import { numberWithCommas } from 'common/utils';
+import { formatNumberThousands } from 'common/utils';
 
 const Project = ({ project, Icon, projectRecords, account, ...props }) => {
   const {
@@ -28,8 +28,8 @@ const Project = ({ project, Icon, projectRecords, account, ...props }) => {
 
   const projectIndex = parseInt(project_index);
 
-  const [projectRecord, setProjectRecord] = useState({})
-  
+  const [projectRecord, setProjectRecord] = useState({});
+
   useEffect(async () => {
     const foundRecord = _.find(projectRecords, (projectRecord) => {
       return projectRecord.index === projectIndex;
@@ -50,14 +50,14 @@ const Project = ({ project, Icon, projectRecords, account, ...props }) => {
       data: {
         projectIndex,
         address: account,
-        isLike: _.isNil(likeAccount)
+        isLike: _.isNil(likeAccount),
       },
     });
 
     reduxHelper.getProjects();
-  }  
+  };
 
-  let likeText = "Like";
+  let likeText = 'Like';
   let likeAccount = null;
 
   // Because projectRecord dependes on requesting data from network
@@ -66,45 +66,54 @@ const Project = ({ project, Icon, projectRecords, account, ...props }) => {
     likeAccount = _.find(projectRecord.likes, (like) => {
       return like === account;
     });
-
-    likeText = `${numberWithCommas(projectRecord.likes.length)} ${projectRecord.likes.length === 1 ? 'Like' : 'Likes'}`;
+
+    likeText = `${formatNumberThousands(projectRecord.likes.length)} ${
+      projectRecord.likes.length === 1 ? 'Like' : 'Likes'
+    }`;
   }
 
   return (
     <ProjectStyle {...props}>
-      <Link href={{ pathname: `/detail/${project_index}`, query: { rid: roundId } }}>
+      <Link
+        href={{ pathname: `/detail/${project_index}`, query: { rid: roundId } }}
+      >
+        <div>
           <div>
-              <div>
-                <span className="title">{name}</span>
-                <span className="description">{description}</span>
-              </div>
-              <div className="identity">
-                <div className="infomation">
-                  {/* <image className="photo"></image> */}
-                  {Icon}
-                  <div style={{ textAlign: 'left' }}>
-                    <span className="username">{`Creator: ${
-                      username || ellipsisAddress(owner)
-                    }`}</span>
-                    <span className="created">
-                      Created at block #{create_block_number}
-                    </span>
-                  </div>
-                </div>
-
-                <span className="creator">{socialElements}</span>
-
-                <div className="buttons">
-                  <Button
-                    type="button"
-                    icon={<FontAwesomeIcon color={ likeAccount ? 'red' : 'white' } icon={faThumbsUp}></FontAwesomeIcon>}
-                    title={likeText}
-                    onClick = {onLikeClicked}
-                  />
-                </div>
+            <span className="title">{name}</span>
+            <span className="description">{description}</span>
+          </div>
+          <div className="identity">
+            <div className="infomation">
+              {/* <image className="photo"></image> */}
+              {Icon}
+              <div style={{ textAlign: 'left' }}>
+                <span className="username">{`Creator: ${
+                  username || ellipsisAddress(owner)
+                }`}</span>
+                <span className="created">
+                  Created at block #{create_block_number}
+                </span>
               </div>
+            </div>
+
+            <span className="creator">{socialElements}</span>
+
+            <div className="buttons">
+              <Button
+                type="button"
+                icon={
+                  <FontAwesomeIcon
+                    color={likeAccount ? 'red' : 'white'}
+                    icon={faThumbsUp}
+                  ></FontAwesomeIcon>
+                }
+                title={likeText}
+                onClick={onLikeClicked}
+              />
+            </div>
           </div>
-        </Link>
+        </div>
+      </Link>
     </ProjectStyle>
   );
 };
@@ -114,4 +123,4 @@ const mapStateToProps = (state) => ({
   account: state.account,
 });
 
-export default connect(mapStateToProps)(Project);
+export default connect(mapStateToProps)(Project);

packages/landing/src/common/utils/index.js

@@ -32,21 +32,31 @@ export const unitToNumber = (unit) => {
     magnification = 1000000;
   }
   return Number(arrs[0]) * magnification;
-}
+};
 
 /**
- * number with thousand commas, maximum 2 fraction digits.
- * @param {*} num number/string
- * @returns formated text
+ * Formatting number with thousand separator, and always leave two digits of float number
+ * @param  {number} num e.g. 1000000.65
+ * @return {string}   "1,000,000.65"
  */
-export const numberWithCommas = (num) => {
-  num = _.toNumber(num);
-  return num.toLocaleString('en-US', { maximumFractionDigits: 2 });
+export function formatNumberThousands(num) {
+  if (_.isUndefined(num)) {
+    return num;
+  }
+
+  const numStr = num.toString();
+  const parts = numStr.split('.');
+
+  const decimalStr = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+  const period = _.isUndefined(parts[1]) ? '' : '.';
+  const floatStr = _.isUndefined(parts[1]) ? '0' : parts[1].substr(0, 2);
+
+  return `${decimalStr}${period}${floatStr}`;
 }
 
 /**
  * Get grant matching amount
- * @param {*} contributions 
+ * @param {*} contributions
  * @returns matching value
  */
 export const getMatching = (contributions) => {
@@ -71,4 +81,4 @@ export const getWeb3Api = async() => {
     });
   }
   return web3Api;
-}
+}