feat(wallet): display exact date/time as tooltip in transaction history

components/brave_wallet_ui/components/desktop/portfolio-transaction-item/index.tsx

@@ -48,6 +48,7 @@ import {
 } from './style'
 import TransactionFeesTooltip from '../transaction-fees-tooltip'
 import TransactionPopup, { TransactionPopupItem } from '../transaction-popup'
+import TransactionTimestampTooltip from '../transaction-timestamp-tooltip'
 
 export interface Props {
   selectedNetwork: EthereumChain
@@ -293,7 +294,18 @@ const PortfolioTransactionItem = (props: Props) => {
               {transactionIntentLocale}
             </DetailTextDark>
             <DetailTextLight>-</DetailTextLight>
-            <DetailTextDarkBold>{formatDateAsRelative(mojoTimeDeltaToJSDate(transactionDetails.createdTime))}</DetailTextDarkBold>
+
+            <TransactionTimestampTooltip
+              text={
+                <TransactionFeeTooltipBody>
+                  {mojoTimeDeltaToJSDate(transactionDetails.createdTime).toUTCString()}
+                </TransactionFeeTooltipBody>
+              }
+            >
+              <DetailTextDarkBold>
+                {formatDateAsRelative(mojoTimeDeltaToJSDate(transactionDetails.createdTime))}
+              </DetailTextDarkBold>
+            </TransactionTimestampTooltip>
           </DetailRow>
           {transactionIntentDescription}
         </DetailColumn>

components/brave_wallet_ui/components/desktop/transaction-timestamp-tooltip/index.tsx

@@ -0,0 +1,49 @@
+/* Copyright (c) 2020 The Brave Authors. All rights reserved.
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import * as React from 'react'
+
+import {
+  StyledWrapper,
+  Tip,
+  Pointer
+} from './style'
+
+export interface Props {
+  children?: React.ReactNode
+  text: string | React.ReactNode
+}
+
+function TransactionTimestampTooltip (props: Props) {
+  const { children, text } = props
+  const [active, setActive] = React.useState(false)
+
+  const showTip = () => {
+    setActive(true)
+  }
+
+  const hideTip = () => {
+    setActive(false)
+  }
+
+  return (
+    <StyledWrapper
+      onMouseEnter={showTip}
+      onMouseLeave={hideTip}
+    >
+      {children}
+      {active && (
+        <>
+          <Pointer />
+          <Tip>
+            {text}
+          </Tip>
+        </>
+      )}
+    </StyledWrapper>
+  )
+}
+
+export default TransactionTimestampTooltip

components/brave_wallet_ui/components/desktop/transaction-timestamp-tooltip/style.ts

@@ -0,0 +1,44 @@
+/* Copyright (c) 2020 The Brave Authors. All rights reserved.
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import styled from 'styled-components'
+
+export const StyledWrapper = styled.div`
+  flex: 1;
+  display: flex;
+  position: relative;
+  height: 100%;
+`
+
+export const Tip = styled.div`
+  position: absolute;
+  border-radius: 4px;
+  left: 50%;
+  transform: translateX(calc(-20% + 15px)) translateY(35%);
+  padding: 10px;
+  line-height: 18px;
+  min-width: 168px;
+  color: ${(p) => p.theme.palette.white};
+  background: ${(p) => p.theme.palette.black};
+  z-index: 120;
+  white-space: nowrap;
+  font-family: Poppins;
+  font-size: 12px;
+  letter-spacing: 0.01em;
+  top: 9px;
+`
+
+export const Pointer = styled.div`
+  width: 0;
+  height: 0;
+  border-style: solid;
+  position: absolute;
+  left: 50%;
+  top: 19px;
+  transform: translateX(-50%) translateY(-40%);
+  border-width: 0 7px 8px 7px;
+  z-index: 120;
+  border-color: transparent transparent ${(p) => p.theme.palette.black} transparent;
+`