git.iko.soy/bridge
on master help sign in
ux: user can hover short date to see full date
c3c8a37tomholford
src/views/Transactions/TransactionRow.tsx+22−5
compare with master
unifiedsplit
@@ -32,15 +32,30 @@ export const TransactionRow = ({
32 return abbreviateAddress(hash);
32 return abbreviateAddress(hash);
33 }, [hash]);
33 }, [hash]);
34
34
35− const shortDate = useMemo(() => {
35+ const parsedDate = useMemo(() => {
36 if (!time) {
36 if (!time) {
37 return null;
37 return null;
38 }
38 }
39+
39− const d = fromUnixTime(time / 1000);
40+ return fromUnixTime(time / 1000);
40− console.log(d.toLocaleTimeString());
41− return format(d, 'MMMM dd');
42 }, [time]);
41 }, [time]);
43
42
43+ const shortDate = useMemo(() => {
44+ if (!parsedDate) {
45+ return null;
46+ }
47+
48+ return format(parsedDate, 'MMMM dd');
49+ }, [parsedDate]);
50+
51+ const longDate = useMemo(() => {
52+ if (!parsedDate) {
53+ return null;
54+ }
55+
56+ return parsedDate.toISOString();
57+ }, [parsedDate]);
58+
44 const statusBadge = useMemo(() => {
59 const statusBadge = useMemo(() => {
45 return (
60 return (
46 <div className={cn(['badge', status])}>
61 <div className={cn(['badge', status])}>
@@ -62,7 +77,9 @@ export const TransactionRow = ({
62 </Row>
77 </Row>
63 <Row className="info-row">
78 <Row className="info-row">
64 <Box className="hash">{shortHash}</Box>
79 <Box className="hash">{shortHash}</Box>
65− <Box className="date">{shortDate}</Box>
80+ <Box className="date" title={longDate}>
81+ {shortDate}
82+ </Box>
66 </Row>
83 </Row>
67 </Box>
84 </Box>
68 </Box>
85 </Box>