Merge branch 'master' into verify-upgrade

README.md

@@ -41,6 +41,8 @@ You don’t have to ever use `eject`. The curated feature set is suitable for sm
 
 ## Learn More
 
+
+
 You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
 
 To learn React, check out the [React documentation](https://reactjs.org/).

src/components/tables/TransactionsTable.tsx

@@ -122,11 +122,10 @@ function getColumns(props: any) {
       ),
     },
     {
-      property: "timestamp",
-      size: "280px",
+      property: "timestamp", 
       resizeable: false,
       header: (
-        <Text color="minorText" size="small" style={{ fontWeight: 300 }}>
+        <Text color="minorText" size="small" style={{ fontWeight: 300, width: '180px' }}>
           Timestamp
         </Text>
       ),

src/components/transaction/helpers.tsx

@@ -17,6 +17,7 @@ import {
   StakingTransactionTypeValue,
   CalculateFee,
   formatNumber,
+  RelativeTimer,
 } from "../ui";
 import { Box, Text } from "grommet";
 import { CopyBtn } from "../ui/CopyBtn";
@@ -168,7 +169,7 @@ export const transactionPropertyDisplayValues: any = {
   ),
   hash_harmony: (value: any) => <TransactionHash hash={value} />,
   blockHash: (value: any) => <BlockHash hash={value} />,
-  timestamp: (value: any) => <Timestamp timestamp={value} withRelative />,
+  timestamp: (value: any) => <RelativeTimer date={value} />,
   gasUsed: (value: any, tx: RPCTransactionHarmony) => (
     <span>
       {value} ({+value / +tx.gas}%){" "}

src/components/ui/RelativeTimer.tsx

@@ -52,9 +52,14 @@ interface IRelativeTimer {
 
 export function RelativeTimer(props: IRelativeTimer) {
   const { date, render, updateInterval = 1000, style } = props;
+
+  const now = dayjs(new Date());
+  const formatedDate = dayjs(date).format("MM/DD/YYYY, HH:mm:ss");
+  const needFormated = now.diff(dayjs(date)) > 86400000;
+
   useEffect(() => {
     const getTimeOffset = () => {
-      setFormattedValue(dayjs().to(dayjs(date)));
+      setFormattedValue(needFormated ? formatedDate : dayjs().to(dayjs(date))); 
     };
     getTimeOffset();
     const tId = window.setInterval(getTimeOffset, updateInterval);
@@ -66,7 +71,7 @@ export function RelativeTimer(props: IRelativeTimer) {
 
   const [formattedValue, setFormattedValue] = useState("");
 
-  if(!date) {
+  if (!date) {
     return null;
   }
 
@@ -79,6 +84,7 @@ export function RelativeTimer(props: IRelativeTimer) {
       size="small"
       style={{ minWidth: "125px", ...style }}
       color="minorText"
+      title={formatedDate}
     >
       {formattedValue}
     </Text>

src/components/ui/Timestamp.tsx

@@ -14,7 +14,7 @@ export const Timestamp = (props: TimestampProps) => {
   return (
     <span>
       <Clock size="small" />
-      &nbsp;{dayjs(timestamp).format("YYYY-MM-DD, HH:mm:ss")}
+      &nbsp;{dayjs(timestamp).format("YYYY-MM-DD, HH:mm:ss").toString()}
       {withRelative && <span>, <RelativeTimer date={timestamp} /></span>}
     </span>
   );