Merge pull request #175 from forbole/momenttz

show current timezone when hovering over a date time

imports/ui/blocks/Block.jsx

@@ -7,6 +7,7 @@ import Avatar from '../components/Avatar.jsx';
 import TranactionTabs from '../transactions/TransactionTabs.jsx';
 import { Helmet } from 'react-helmet';
 import i18n from 'meteor/universe:i18n';
+import TimeStamp from '../components/TimeStamp.jsx';
 
 const T = i18n.createComponent();
 export default class Block extends Component{
@@ -68,7 +69,7 @@ export default class Block extends Component{
                                 <Col md={4} className="label"><T>blocks.numOfTransactions</T></Col>
                                 <Col md={8} className="value">{numbro(block.transNum).format("0,0")}</Col>
                                 <Col md={4} className="label"><T>common.time</T></Col>
-                                <Col md={8} className="value">{moment.utc(block.time).format("D MMM YYYY, h:mm:ssa z")} ({moment(block.time).fromNow()})</Col>
+                                <Col md={8} className="value"><TimeStamp time={block.time}/> ({moment(block.time).fromNow()})</Col>
                             </Row>
                         </CardBody>
                     </Card>

imports/ui/blocks/block.js

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
 import { Row, Col } from 'reactstrap';
-import moment from 'moment';
 import numbro from 'numbro';
 import Avatar from '../components/Avatar.jsx';
+import TimeStamp from '../components/TimeStamp.jsx';
 
 export default class Block extends Component {
     constructor(props){
@@ -15,7 +15,7 @@ export default class Block extends Component {
         if (proposer){
             let moniker = (proposer.description&&proposer.description.moniker)?proposer.description.moniker:proposer.address;
             return <Row className="block-info">
-                <Col xs={8} sm={4} lg={3}><i className="far fa-clock d-sm-none"></i> {moment.utc(this.props.block.time).format("D MMM YYYY, h:mm:ssa")}</Col>
+                <Col xs={8} sm={4} lg={3}><i className="far fa-clock d-sm-none"></i><TimeStamp time={this.props.block.time}/></Col>
                 <Col xs={4} sm={2} className="text-truncate"><i className="fas fa-hashtag d-sm-none"></i> { this.props.block.hash}</Col>
                 <Col xs={8}sm={3} md={2} lg={3} className="text-truncate"><Link to={"/validator/"+this.props.block.proposerAddress}><Avatar moniker={moniker} profileUrl={proposer.profile_url} address={this.props.block.proposerAddress} list={true} /> {moniker}</Link></Col>
                 <Col xs={4} sm={1} md={2}><i className="fas fa-sync d-sm-none"></i> {numbro(this.props.block.transNum).format('0,0')}</Col>

imports/ui/components/AccountTooltip.jsx

@@ -2,10 +2,10 @@ import React, { Component } from 'react';
 import { Meteor } from 'meteor/meteor';
 import { Link } from 'react-router-dom';
 import { Badge, Progress, Row, Col, Card, Spinner, UncontrolledTooltip } from 'reactstrap';
-import moment from 'moment';
 import numbro from 'numbro';
 import Avatar from '../components/Avatar.jsx';
 import Account from './Account.jsx';
+import TimeStamp from '../components/TimeStamp.jsx';
 
 export default class AccountTooltip extends Account{
     constructor(props){
@@ -70,8 +70,8 @@ export default class AccountTooltip extends Account{
                     {numbro(validator.commission.rate).format('0.00%')}
                 </Row>:null}
                 {(!isActive)?<Row className="last-seen data">
-                    {validator.lastSeen?moment.utc(validator.lastSeen).format("D MMM YYYY, h:mm:ssa"):
-                     (validator.unbonding_time?moment.utc(validator.unbonding_time).format("D MMM YYYY, h:mm:ssa"):null)}
+                    {validator.lastSeen?<TimeStamp time={validator.lastSeen}/>:
+                     (validator.unbonding_time?<TimeStamp time={validator.unbonding_time}/>:null)}
                 </Row>:null}
                 {(!isActive)?<Row className="bond-status data" xs={2}>
                     <Col xs={6}>{(validator.status == 0)?<Badge color="secondary">Unbonded</Badge>:<Badge color="warning">Unbonding</Badge>}</Col>

imports/ui/components/TimeStamp.jsx

@@ -0,0 +1,24 @@
+import React, { Component } from 'react';
+import { Meteor } from 'meteor/meteor'
+import moment from 'moment-timezone';
+import { UncontrolledTooltip } from 'reactstrap';
+
+export default class TimeStamp extends Component{
+    constructor(props){
+        super(props);
+        this.ref = React.createRef();
+    }
+
+    render(){
+        let format = "D MMM YYYY, h:mm:ssa z";
+        let timezone = moment.tz.guess()
+        let time = moment.utc(this.props.time);
+        return <span>
+            <span ref={this.ref}>{time.format(format)}</span>
+            <UncontrolledTooltip placement='bottom' target={this.ref}>
+                {time.tz(timezone).format(format)}
+            </UncontrolledTooltip>
+        </span>
+
+    }
+}

imports/ui/home/ChainStatus.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { Row, Col, Card, CardText, 
+import { Row, Col, Card, CardText,
     CardTitle, UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem, Spinner } from 'reactstrap';
-import moment from 'moment';
 import numbro from 'numbro';
 import i18n from 'meteor/universe:i18n';
+import TimeStamp from '../components/TimeStamp.jsx';
 
 const T = i18n.createComponent();
 
@@ -28,7 +28,7 @@ export default class ChainStatus extends React.Component {
         if (prevProps != this.props){
             this.setState({
                 blockHeight: numbro(this.props.status.latestBlockHeight).format({thousandSeparated: true}),
-                blockTime: moment.utc(this.props.status.latestBlockTime).format("D MMM YYYY hh:mm:ssa z"),
+                blockTime: <TimeStamp time={this.props.status.latestBlockTime}/>,
                 delegatedTokens: numbro(this.props.status.totalVotingPower).format('0,0.00a'),
                 numValidators: this.props.status.validators,
                 totalNumValidators: this.props.status.totalValidators,
@@ -158,7 +158,7 @@ export default class ChainStatus extends React.Component {
                                 <CardText>
                                     <span className="display-4 value text-primary">{this.state.blockHeight}</span>
                                     {this.state.blockTime}
-                                </CardText>   
+                                </CardText>
                             </Card>
                         </Col>
                         <Col lg={3} md={6}>
@@ -177,13 +177,13 @@ export default class ChainStatus extends React.Component {
                                 <CardTitle><T>chainStatus.averageBlockTime</T> ({this.state.blockTimeText})</CardTitle>
                                 <CardText>
                                     <span className="display-4 value text-primary">{this.state.averageBlockTime}</span><T>chainStatus.seconds</T>
-                                </CardText>   
+                                </CardText>
                             </Card>
                         </Col>
                         <Col lg={3} md={6}>
                             <Card body>
                                 <CardTitle><T>chainStatus.activeValidators</T></CardTitle>
-                                <CardText><span className="display-4 value text-primary">{this.state.numValidators}</span><T totalValidators={this.state.totalNumValidators}>chainStatus.outOfValidators</T></CardText>   
+                                <CardText><span className="display-4 value text-primary">{this.state.numValidators}</span><T totalValidators={this.state.totalNumValidators}>chainStatus.outOfValidators</T></CardText>
                             </Card>
                         </Col>
                         <Col lg={3} md={6}>
@@ -199,7 +199,7 @@ export default class ChainStatus extends React.Component {
                                     </DropdownMenu>
                                 </UncontrolledDropdown>
                                 <CardTitle><T>chainStatus.onlineVotingPower</T> ({this.state.votingPowerText})</CardTitle>
-                                <CardText><span className="display-4 value text-primary">{this.state.votingPower}</span><T percent={numbro(this.state.bondedTokens/(this.state.bondedTokens+this.state.notBondedTokens)).format("0.00%")} totalStakes={numbro((this.state.bondedTokens+this.state.notBondedTokens)/Meteor.settings.public.stakingFraction).format("0.00a")} denom={Meteor.settings.public.stakingDenom}>chainStatus.fromTotalStakes</T></CardText>   
+                                <CardText><span className="display-4 value text-primary">{this.state.votingPower}</span><T percent={numbro(this.state.bondedTokens/(this.state.bondedTokens+this.state.notBondedTokens)).format("0.00%")} totalStakes={numbro((this.state.bondedTokens+this.state.notBondedTokens)/Meteor.settings.public.stakingFraction).format("0.00a")} denom={Meteor.settings.public.stakingDenom}>chainStatus.fromTotalStakes</T></CardText>
                             </Card>
                         </Col>
                     </Row>

imports/ui/home/Chart.jsx

@@ -4,6 +4,7 @@ import { Row, Col, Card, CardImg, CardText, CardBody,
     CardTitle, CardSubtitle, Button, Progress, Spinner } from 'reactstrap';
 import moment from 'moment';
 import i18n from 'meteor/universe:i18n';
+import TimeStamp from '../components/TimeStamp.jsx';
 
 const T = i18n.createComponent();
 export default class Chart extends Component{
@@ -78,7 +79,7 @@ export default class Chart extends Component{
                                 callbacks: {
                                     label: function(tooltipItem, data) {
                                         var label = data.datasets[tooltipItem.datasetIndex].label || '';
-                    
+
                                         if (label) {
                                             label += ': ';
                                         }
@@ -102,7 +103,7 @@ export default class Chart extends Component{
                                 callbacks: {
                                     label: function(tooltipItem, data) {
                                         var label = data.datasets[tooltipItem.datasetIndex].label || '';
-                    
+
                                         if (label) {
                                             label += ': ';
                                         }
@@ -201,7 +202,7 @@ export default class Chart extends Component{
                         </CardBody>
                     </Card> */}
                     </div>
-                );   
+                );
             }
             else{
                 return <div></div>

imports/ui/ledger/LedgerActions.jsx

@@ -9,8 +9,8 @@ import { Ledger, DEFAULT_MEMO } from './ledger.js';
 import { Validators } from '/imports/api/validators/validators.js';
 import AccountTooltip from '/imports/ui/components/AccountTooltip.jsx';
 import Coin from '/both/utils/coins.js';
-import moment from 'moment';
 import numbro from 'numbro';
+import TimeStamp from '../components/TimeStamp.jsx';
 
 const maxHeightModifier = {
     setMaxHeight: {
@@ -517,7 +517,7 @@ class LedgerButton extends Component {
 
                     let redelegation = redelegations[validator.operator_address]
                     let disabled = redelegation && (redelegation.count >= maxEntries);
-                    let completionTime = disabled?moment.utc(redelegation.completionTime).format("D MMM YYYY, h:mm:ssa z"):null;
+                    let completionTime = disabled?<TimeStamp time={redelegation.completionTime}/>:null;
                     let id = `validator-option${i}`
                     return <div id={id} className={`validator disabled-btn-wrapper${disabled?' disabled':''}`}  key={i}>
                         <DropdownItem name='targetValidator'
@@ -701,7 +701,7 @@ class DelegationButtons extends LedgerButton {
                 </Button>
                 {isCompleted?null:<UncontrolledTooltip placement='bottom' target='redelegate-button'>
                     <span>You have incompleted regelegation to this validator,
-                        you can't redelegate until {moment.utc(completionTime).format("D MMM YYYY, h:mm:ssa z")}
+                        you can't redelegate until <TimeStamp time={completionTime}/>
                     </span>
                 </UncontrolledTooltip>}
             </div>
@@ -712,7 +712,7 @@ class DelegationButtons extends LedgerButton {
                 </Button>
                 {canUnbond?null:<UncontrolledTooltip placement='bottom' target='undelegate-button'>
                     <span>You reached maximum {maxEntries} unbonding delegation entries,
-                        you can't delegate until the first one matures at {moment.utc(delegation.unbondingCompletionTime).format("D MMM YYYY, h:mm:ssa z")}
+                        you can't delegate until the first one matures at <TimeStamp time={delegation.unbondingCompletionTime}/>
                     </span>
                 </UncontrolledTooltip>}
             </div>

imports/ui/proposals/List.jsx

@@ -1,11 +1,11 @@
 import React, { Component } from 'react';
-import moment from 'moment';
 import { Table, Spinner } from 'reactstrap';
 import { Link } from 'react-router-dom';
 import { DenomSymbol, ProposalStatusIcon } from '../components/Icons.jsx';
 import numbro from 'numbro';
 import i18n from 'meteor/universe:i18n';
 import Coin from '/both/utils/coins.js'
+import TimeStamp from '../components/TimeStamp.jsx';
 import { SubmitProposalButton } from '../ledger/LedgerActions.jsx';
 
 const T = i18n.createComponent();
@@ -15,8 +15,8 @@ const ProposalRow = (props) => {
         <th className="d-none d-sm-table-cell counter">{props.proposal.proposalId}</th>
         <td className="title"><Link to={"/proposals/"+props.proposal.proposalId}>{props.proposal.content.value.title}</Link></td>
         <td className="status"><ProposalStatusIcon status={props.proposal.proposal_status}/><span className="d-none d-sm-inline">{props.proposal.proposal_status.match(/[A-Z]+[^A-Z]*|[^A-Z]+/g).join(" ")}</span></td>
-        <td className="submit-block">{moment.utc(props.proposal.submit_time).format("D MMM YYYY, h:mm:ssa")}</td>
-        <td className="voting-start">{(props.proposal.voting_start_time != "0001-01-01T00:00:00Z")?moment.utc(props.proposal.voting_start_time).format("D MMM YYYY, h:mm:ssa"):'Not started'}</td>
+        <td className="submit-block"><TimeStamp time={props.proposal.submit_time}/></td>
+        <td className="voting-start">{(props.proposal.voting_start_time != "0001-01-01T00:00:00Z")?<TimeStamp time={props.proposal.voting_start_time}/>:'Not started'}</td>
         <td className="deposit text-right">{props.proposal.total_deposit?props.proposal.total_deposit.map((deposit, i) => {
             return <div key={i}>{new Coin(deposit.amount).toString()}</div>
         }):'0'}</td>

imports/ui/proposals/Proposal.jsx

@@ -12,7 +12,8 @@ import { Helmet } from 'react-helmet';
 import posed from 'react-pose';
 import i18n from 'meteor/universe:i18n';
 import { Meteor } from 'meteor/meteor';
-import Coin from '/both/utils/coins.js'
+import Coin from '/both/utils/coins.js';
+import TimeStamp from '../components/TimeStamp.jsx';
 import { ProposalActionButtons } from '../ledger/LedgerActions.jsx';
 
 const T = i18n.createComponent();
@@ -79,7 +80,7 @@ export default class Proposal extends Component{
 
                         this.setState({
                             tally: this.props.proposal.tally,
-                            tallyDate: moment.utc(this.props.proposal.updatedAt).format("D MMM YYYY, h:mm:ssa z"),
+                            tallyDate: <TimeStamp time={this.props.proposal.updatedAt}/>,
                             voteStarted: true,
                             voteEnded: false,
                             totalVotes: totalVotes,
@@ -398,19 +399,19 @@ export default class Proposal extends Component{
                         </Row>
                         <Row className="mb-2 border-top">
                             <Col md={3} className="label"><T>proposals.submitTime</T></Col>
-                            <Col md={9} className="value">{moment.utc(this.state.proposal.submit_time).format("D MMM YYYY, h:mm:ssa z")}</Col>
+                            <Col md={9} className="value"><TimeStamp time={this.state.proposal.submit_time}/></Col>
                         </Row>
                         <Row className="mb-2 border-top">
                             <Col md={3} className="label"><T>proposals.depositEndTime</T></Col>
-                            <Col md={9} className="value">{moment.utc(this.state.proposal.deposit_end_time).format("D MMM YYYY, h:mm:ssa z")}</Col>
+                            <Col md={9} className="value"><TimeStamp time={this.state.proposal.deposit_end_time}/></Col>
                         </Row>
                         <Row className="mb-2 border-top">
                             <Col md={3} className="label"><T>proposals.votingStartTime</T></Col>
-                            <Col md={9} className="value">{(this.state.proposal.voting_start_time != '0001-01-01T00:00:00Z')?moment.utc(this.state.proposal.voting_start_time).format("D MMM YYYY, h:mm:ssa z"):'-'}</Col>
+                            <Col md={9} className="value">{(this.state.proposal.voting_start_time != '0001-01-01T00:00:00Z')?<TimeStamp time={this.stat}/>:'-'}</Col>
                         </Row>
                         <Row className="mb-2 border-top">
                             <Col md={3} className="label"><T>proposals.votingEndTime</T></Col>
-                            <Col md={9} className="value">{(this.state.proposal.voting_start_time != '0001-01-01T00:00:00Z')?moment.utc(this.state.proposal.voting_end_time).format("D MMM YYYY, h:mm:ssa z"):'-'}</Col>
+                            <Col md={9} className="value">{(this.state.proposal.voting_start_time != '0001-01-01T00:00:00Z')?<TimeStamp time={this.state.proposal.voting_end_time}/>:'-'}</Col>
                         </Row>
                     </div>
                     <Row className='clearfix'>

imports/ui/transactions/Transaction.jsx

@@ -6,10 +6,10 @@ import CosmosErrors from '../components/CosmosErrors.jsx';
 import { Link } from 'react-router-dom';
 import { Markdown } from 'react-showdown';
 import numbro from 'numbro';
-import moment from 'moment';
 import { Helmet } from 'react-helmet';
 import i18n from 'meteor/universe:i18n';
-import Coin from '/both/utils/coins.js'
+import Coin from '/both/utils/coins.js';
+import TimeStamp from '../components/TimeStamp.jsx';
 
 const T = i18n.createComponent();
 export default class Transaction extends Component{
@@ -54,7 +54,7 @@ export default class Transaction extends Component{
                                 <Col md={4} className="label"><T>common.height</T></Col>
                                 <Col md={8} className="value">
                                     <Link to={"/blocks/"+tx.height}>{numbro(tx.height).format("0,0")}</Link>
-                                    {tx.block() && `(${moment.utc(tx.block().time).format("D MMM YYYY, h:mm:ssa z")})`}
+                                    {tx.block()?<span> <TimeStamp time={tx.block().time}/></span>:null}
                                 </Col>
                                 <Col md={4} className="label"><T>transactions.fee</T></Col>
                                 <Col md={8} className="value">{(tx.tx.value.fee.amount.length > 0)?tx.tx.value.fee.amount.map((fee,i) => {