diff --git a/common/components/ExtendedNotifications/TransactionSucceeded.tsx b/common/components/ExtendedNotifications/TransactionSucceeded.tsx index ea0cb9b0..c2198890 100644 --- a/common/components/ExtendedNotifications/TransactionSucceeded.tsx +++ b/common/components/ExtendedNotifications/TransactionSucceeded.tsx @@ -1,26 +1,33 @@ import React from 'react'; -import { translateRaw } from 'translations'; +import { Link } from 'react-router-dom'; +import translate from 'translations'; +import { NewTabLink } from 'components/ui'; import { BlockExplorerConfig } from 'types/network'; export interface TransactionSucceededProps { txHash: string; - blockExplorer: BlockExplorerConfig; + blockExplorer?: BlockExplorerConfig; } const TransactionSucceeded = ({ txHash, blockExplorer }: TransactionSucceededProps) => { - const txHashLink = blockExplorer.txUrl(txHash); + let verifyBtn: React.ReactElement | undefined; + if (blockExplorer) { + verifyBtn = ( + + Verify Transaction on {blockExplorer.name} + + ); + } return (
-

{translateRaw('SUCCESS_3') + txHash}

- - Verify Transaction - +

+ {translate('SUCCESS_3')} {txHash} +

+ {verifyBtn} + + {translate('NAV_CheckTxStatus')} +
); }; diff --git a/common/components/LogOutPrompt.tsx b/common/components/LogOutPrompt.tsx index a7921b75..dadde8f1 100644 --- a/common/components/LogOutPrompt.tsx +++ b/common/components/LogOutPrompt.tsx @@ -62,7 +62,7 @@ class LogOutPromptClass extends React.Component { }; private onConfirm = () => { - const { nextLocation } = this.state; + const { nextLocation: next } = this.state; this.props.resetWallet(); this.setState( { @@ -70,8 +70,8 @@ class LogOutPromptClass extends React.Component { nextLocation: null }, () => { - if (nextLocation) { - this.props.history.push(nextLocation.pathname); + if (next) { + this.props.history.push(`${next.pathname}${next.search}${next.hash}`); } } ); diff --git a/common/containers/Tabs/CheckTransaction/index.tsx b/common/containers/Tabs/CheckTransaction/index.tsx index a4bb4429..0fae96f0 100644 --- a/common/containers/Tabs/CheckTransaction/index.tsx +++ b/common/containers/Tabs/CheckTransaction/index.tsx @@ -1,15 +1,17 @@ import React from 'react'; import { connect } from 'react-redux'; +import { RouteComponentProps } from 'react-router'; import TabSection from 'containers/TabSection'; import TxHashInput from './components/TxHashInput'; import { TransactionStatus as TransactionStatusComponent } from 'components'; import { NewTabLink } from 'components/ui'; import { getNetworkConfig } from 'selectors/config'; +import { getParamFromURL } from 'utils/helpers'; import { AppState } from 'reducers'; import { NetworkConfig } from 'types/network'; import './index.scss'; -interface Props { +interface StateProps { network: NetworkConfig; } @@ -17,11 +19,20 @@ interface State { hash: string; } +type Props = StateProps & RouteComponentProps<{}>; + class CheckTransaction extends React.Component { public state: State = { hash: '' }; + public componentDidMount() { + const hash = getParamFromURL(this.props.location.search, 'txHash'); + if (hash) { + this.setState({ hash }); + } + } + public render() { const { network } = this.props; const { hash } = this.state; @@ -43,7 +54,7 @@ class CheckTransaction extends React.Component { )}

- + {hash && ( @@ -64,6 +75,6 @@ class CheckTransaction extends React.Component { }; } -export default connect((state: AppState) => ({ +export default connect((state: AppState): StateProps => ({ network: getNetworkConfig(state) }))(CheckTransaction); diff --git a/common/sagas/transaction/broadcast/helpers.tsx b/common/sagas/transaction/broadcast/helpers.tsx index 81e0fdf0..bacb0ae3 100644 --- a/common/sagas/transaction/broadcast/helpers.tsx +++ b/common/sagas/transaction/broadcast/helpers.tsx @@ -20,6 +20,7 @@ import React from 'react'; import { getNetworkConfig } from 'selectors/config'; import TransactionSucceeded from 'components/ExtendedNotifications/TransactionSucceeded'; import { computeIndexingHash } from 'libs/transaction'; +import { NetworkConfig } from 'types/network'; export const broadcastTransactionWrapper = (func: (serializedTx: string) => SagaIterator) => function* handleBroadcastTransaction(action: BroadcastRequestedAction) { @@ -29,7 +30,7 @@ export const broadcastTransactionWrapper = (func: (serializedTx: string) => Saga ); try { - const shouldBroadcast = yield call(shouldBroadcastTransaction, indexingHash); + const shouldBroadcast: boolean = yield call(shouldBroadcastTransaction, indexingHash); if (!shouldBroadcast) { yield put( showNotification( @@ -46,16 +47,19 @@ export const broadcastTransactionWrapper = (func: (serializedTx: string) => Saga }); yield put(queueAction); const stringTx: string = yield call(bufferToHex, serializedTransaction); - const broadcastedHash = yield call(func, stringTx); // convert to string because node / web3 doesnt support buffers + const broadcastedHash: string = yield call(func, stringTx); // convert to string because node / web3 doesnt support buffers yield put(broadcastTransactionSucceeded({ indexingHash, broadcastedHash })); - const network = yield select(getNetworkConfig); - //TODO: make this not ugly + const network: NetworkConfig = yield select(getNetworkConfig); + yield put( showNotification( 'success', - , - 0 + , + Infinity ) ); } catch (error) { diff --git a/common/sass/styles/overrides/alerts.scss b/common/sass/styles/overrides/alerts.scss index 6d3f7a39..4ce8690a 100644 --- a/common/sass/styles/overrides/alerts.scss +++ b/common/sass/styles/overrides/alerts.scss @@ -1,7 +1,7 @@ // Extends Bootstrap's `.alert` -@import "common/sass/variables"; -@import "common/sass/mixins"; -@import "~bootstrap-sass/assets/stylesheets/bootstrap/alerts"; +@import 'common/sass/variables'; +@import 'common/sass/mixins'; +@import '~bootstrap-sass/assets/stylesheets/bootstrap/alerts'; .alert { margin-bottom: 1rem; @@ -16,6 +16,13 @@ opacity: 0.8; } } + + // Alerts have their own button style + .btn { + @include button-variant($text-color, #FFF, darken(#FFF, 5%)); + text-decoration: none; + margin-right: $space-xs; + } } // Alert icons diff --git a/common/sass/styles/overrides/buttons.scss b/common/sass/styles/overrides/buttons.scss index 63858628..28654b3a 100644 --- a/common/sass/styles/overrides/buttons.scss +++ b/common/sass/styles/overrides/buttons.scss @@ -100,24 +100,6 @@ } // Contextual color overrides (?) -.alert .btn-info { - background-color: white; - text-decoration: none; - color: $brand-info; - &:hover, - &:focus, - &.focus { - text-decoration: none; - opacity: 1; - } - &.disabled { - background-color: white; - text-decoration: none; - color: $brand-info; - opacity: 0.6; - } -} - .btn-group .btn-default { border-bottom-width: 1px; border-color: transparent; diff --git a/common/utils/helpers.ts b/common/utils/helpers.ts index ddeb5009..b6d1fe2c 100644 --- a/common/utils/helpers.ts +++ b/common/utils/helpers.ts @@ -1,3 +1,4 @@ +import qs from 'query-string'; import has from 'lodash/has'; export function objectContainsObjectKeys(checkingObject, containingObject) { @@ -19,6 +20,10 @@ export function getParam(query: { [key: string]: string }, key: string) { return query[keys[index]]; } +export function getParamFromURL(url: string, param: string): string | undefined { + return qs.parse(qs.extract(url))[param]; +} + export function isPositiveInteger(n: number) { return Number.isInteger(n) && n > 0; } diff --git a/spec/sagas/transaction/broadcast/helpers.spec.tsx b/spec/sagas/transaction/broadcast/helpers.spec.tsx index 11eb3657..0a8845f5 100644 --- a/spec/sagas/transaction/broadcast/helpers.spec.tsx +++ b/spec/sagas/transaction/broadcast/helpers.spec.tsx @@ -128,7 +128,7 @@ describe('broadcastTransactionWrapper*', () => { showNotification( 'success', , - 0 + Infinity ) ) );