Final tweaks for wallet staking

CHANGELOG.md

@@ -10,6 +10,7 @@
 ### Improvements
 
 - Add helper script for CHANGELOG
+- Time is now displayed in 24hr format
 
 ### Bug Fixes
 

src/Components/UserAccount/UserAccount.js

@@ -55,6 +55,11 @@ const WalletBtn = styled(Button)`
 const AccountBtn = styled(Button)`
   border: none;
   background: none;
+  /* animate.css @keyframe */
+  animation: heartBeat;
+  animation-duration: 1s;
+  animation-delay: 2s;
+  animation-iteration-count: ${({ isLoggedIn }) => (isLoggedIn ? 0 : 2)};
 
   @media ${breakpoints.up('md')} {
     margin-left: 10px;
@@ -107,7 +112,7 @@ const UserAccount = ({ isMobile }) => {
 
   return (
     <Container ref={containerRef}>
-      <AccountBtn onClick={toggleShowPopup}>
+      <AccountBtn onClick={toggleShowPopup} isLoggedIn={isLoggedIn}>
         <Sprite icon={isLoggedIn ? ICON_NAMES.ACCOUNT : ICON_NAMES.KEY} color={theme.FONT_NAV} size="20px" />
       </AccountBtn>
 

src/Pages/Validators/Components/ValidatorList.js

@@ -72,18 +72,18 @@ const ValidatorList = () => {
   }, [accountRewards, currentVals, isDelegateFilter, setMyValTableData, tableData]);
 
   const myValTableHeaders = [
+    isDelegateFilter && { displayName: 'Staking', dataName: 'manageStaking' },
     { displayName: 'Moniker', dataName: 'moniker' },
     { displayName: 'Voting Power', dataName: 'votingPower' },
     { displayName: 'Commission', dataName: 'commission' },
     { displayName: 'Delegation Amount', dataName: 'amount' },
     { displayName: 'Reward', dataName: 'reward' },
-    isDelegateFilter && { displayName: '', dataName: 'manageStaking' },
   ] // Remove the nulls
     .filter((th) => th);
 
   // Table header values in order
   const tableHeaders = [
-    isLoggedIn && { displayName: 'Delegate', dataName: 'delegate' },
+    isLoggedIn && { displayName: 'Staking', dataName: 'delegate' },
     { displayName: 'Moniker', dataName: 'moniker' },
     { displayName: 'Address', dataName: 'addressId' },
     { displayName: 'Commission', dataName: 'commission' },

src/utils/date/getFormattedDate.js

@@ -1,5 +1,5 @@
 import { utcToZonedTime, format as dateFnsFormat } from 'date-fns-tz';
 
-// Get a date (in the format of your choosing, default is 'yyyy/MM/dd hh:mm:ss') for any timezone
-export const getFormattedDate = (date, timeFormat = 'yyyy/MM/dd hh:mm:ss', timeZone = 'UTC') =>
+// Get a date (in the format of your choosing, default is 'yyyy/MM/dd HH:mm:ss') for any timezone
+export const getFormattedDate = (date, timeFormat = 'yyyy/MM/dd HH:mm:ss', timeZone = 'UTC') =>
   dateFnsFormat(utcToZonedTime(date, timeZone), timeFormat, { timeZone });

src/utils/date/getTimeSince.js

@@ -15,8 +15,8 @@ export const getTimeSince = (prevDate, options = {}) => {
 
   const currentUTCDate = getUTCTime('current');
   // DateFNS requires a parsed date to do any work on it (can't just take in a string)
-  const currentUTCDateParsed = parse(currentUTCDate, 'yyyy/MM/dd hh:mm:ss', new Date(currentUTCDate));
-  const prevDateParsed = parse(prevDate, 'yyyy/MM/dd hh:mm:ss', new Date(prevDate));
+  const currentUTCDateParsed = parse(currentUTCDate, 'yyyy/MM/dd HH:mm:ss', new Date(currentUTCDate));
+  const prevDateParsed = parse(prevDate, 'yyyy/MM/dd HH:mm:ss', new Date(prevDate));
   // Built in date-fns time difference function
   const timeSince = formatDistanceStrict(currentUTCDateParsed, prevDateParsed, { roundingMethod: 'floor', unit });
   // Clean up words if longhand isn't requested

src/utils/date/getUTCTime.js

@@ -2,7 +2,7 @@ import { parseISO } from 'date-fns';
 import { getFormattedDate } from './getFormattedDate';
 
 // Convert a date (or leave null, 'now', or 'current' for 'today') to UTC time in the format of your choosing (default is 'yyyy/MM/dd hh:mm:ss')
-export const getUTCTime = (date, format = 'yyyy/MM/dd hh:mm:ss') => {
+export const getUTCTime = (date, format = 'yyyy/MM/dd HH:mm:ss') => {
   const today = !date || date === 'now' || date === 'current' ? new Date().toISOString() : new Date(date).toISOString();
   const todayParsed = parseISO(today);
 

src/utils/table/formatTableData.js

@@ -156,8 +156,10 @@ export const formatTableData = (data = [], tableHeaders) => {
         case 'reward': {
           const { amount = '--', denom = '--' } = serverValue?.[0] || {};
           denom === 'nhash'
-            ? (finalObj[dataName] = { value: `${currencyFormat(amount, 'nhash', 'hash')} hash` })
-            : (finalObj[dataName] = { value: `${numberFormat(amount, 6)} ${denom}` });
+            ? (finalObj[dataName] = {
+                value: `${formatNhash(currencyFormat(amount, 'nhash', 'hash'), { decimal: 4 })} hash`,
+              })
+            : (finalObj[dataName] = { value: `${numberFormat(amount, 4)} ${denom}` });
           break;
         }
         // Amount of currency/item and its denomination given in an object (count)