Skip to content

Commit

Permalink
Add Etherchain links (#1462)
Browse files Browse the repository at this point in the history
* add etherchain to transaction succeeded notification

* additional etherchain links

* shorten verify copy

* fix config mis-match
  • Loading branch information
dternyak authored Apr 6, 2018
1 parent 04eaa08 commit c65296d
Show file tree
Hide file tree
Showing 8 changed files with 79 additions and 40 deletions.
8 changes: 8 additions & 0 deletions common/components/BalanceSidebar/AccountInfo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { getNetworkConfig, getOffline } from 'selectors/config';
import { AppState } from 'reducers';
import { NetworkConfig } from 'types/network';
import { TRefreshAccountBalance, refreshAccountBalance } from 'actions/wallet';
import { etherChainExplorerInst } from 'config/data';
import './AccountInfo.scss';

interface OwnProps {
Expand Down Expand Up @@ -193,6 +194,13 @@ class AccountInfo extends React.Component<Props, State> {
</NewTabLink>
</li>
)}
{network.name === 'ETH' && (
<li className="AccountInfo-list-item">
<NewTabLink href={etherChainExplorerInst.addressUrl(address)}>
{`${network.name} (${etherChainExplorerInst.origin})`}
</NewTabLink>
</li>
)}
{!!tokenExplorer && (
<li className="AccountInfo-list-item">
<NewTabLink href={tokenExplorer.address(address)}>
Expand Down
12 changes: 12 additions & 0 deletions common/components/ExtendedNotifications/TransactionSucceeded.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
import translate from 'translations';
import { NewTabLink } from 'components/ui';
import { BlockExplorerConfig } from 'types/network';
import { etherChainExplorerInst } from 'config/data';

export interface TransactionSucceededProps {
txHash: string;
Expand All @@ -11,20 +12,31 @@ export interface TransactionSucceededProps {

const TransactionSucceeded = ({ txHash, blockExplorer }: TransactionSucceededProps) => {
let verifyBtn: React.ReactElement<string> | undefined;
let altVerifyBtn: React.ReactElement<string> | undefined;
if (blockExplorer) {
verifyBtn = (
<NewTabLink className="btn btn-xs" href={blockExplorer.txUrl(txHash)}>
{translate('VERIFY_TX', { $block_explorer: blockExplorer.name })}
</NewTabLink>
);
}
// TODO: In the future, we'll want to refactor staticNetworks so that multiple blockexplorers can be configured per network.
// This requires a large refactor, so for now we'll hard-code the etherchain link when etherscan is shown to verify your transaction
if (blockExplorer && blockExplorer.origin === 'https://etherscan.io') {
altVerifyBtn = (
<NewTabLink className="btn btn-xs" href={etherChainExplorerInst.txUrl(txHash)}>
{translate('VERIFY_TX', { $block_explorer: etherChainExplorerInst.name })}
</NewTabLink>
);
}

return (
<div>
<p>
{translate('SUCCESS_3')} {txHash}
</p>
{verifyBtn}
{altVerifyBtn}
<Link to={`/tx-status?txHash=${txHash}`} className="btn btn-xs">
{translate('NAV_CHECKTXSTATUS')}
</Link>
Expand Down
4 changes: 4 additions & 0 deletions common/components/Footer/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,10 @@ const FRIENDS: Link[] = [
{
link: 'https://etherscan.io/',
text: 'Etherscan'
},
{
link: 'https://etherchain.org/',
text: 'Etherchain'
}
];

Expand Down
7 changes: 7 additions & 0 deletions common/config/data.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import NewTabLink from 'components/ui/NewTabLink';
import { getValues } from '../utils/helpers';
import packageJson from '../../package.json';
import { GasPriceSetting } from 'types/network';
import { makeExplorer } from 'utils/helpers';

export const languages = require('./languages.json');
export const discordURL = 'https://discord.gg/VSaTXEA';
Expand Down Expand Up @@ -33,6 +34,12 @@ export const BTCTxExplorer = (txHash: string): string => `${blockChainInfo}/tx/$
export const ETHAddressExplorer = (address: string): string => `${etherScan}/address/${address}`;
export const ETHTokenExplorer = (address: string): string => `${ethPlorer}/address/${address}`;

export const etherChainExplorerInst = makeExplorer({
name: 'Etherchain',
origin: 'https://www.etherchain.org',
addressPath: 'account'
});

export const donationAddressMap = {
BTC: '32oirLEzZRhi33RCXDF9WHJjEb8RsrSss3',
ETH: '0x4bbeEB066eD09B7AEd07bF39EEe0460DFa261520',
Expand Down
13 changes: 11 additions & 2 deletions common/containers/Tabs/CheckTransaction/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { AppState } from 'reducers';
import { NetworkConfig } from 'types/network';
import './index.scss';
import translate from 'translations';
import { etherChainExplorerInst } from 'config/data';

interface StateProps {
network: NetworkConfig;
Expand Down Expand Up @@ -43,6 +44,11 @@ class CheckTransaction extends React.Component<Props, State> {
public render() {
const { network } = this.props;
const { hash } = this.state;
console.log(network);
const CHECK_TX_KEY =
network.name === 'ETH'
? 'CHECK_TX_STATUS_DESCRIPTION_MULTIPLE'
: 'CHECK_TX_STATUS_DESCRIPTION_2';

return (
<TabSection>
Expand All @@ -52,9 +58,12 @@ class CheckTransaction extends React.Component<Props, State> {
<p className="CheckTransaction-form-desc">
{translate('CHECK_TX_STATUS_DESCRIPTION_1')}
{!network.isCustom &&
translate('CHECK_TX_STATUS_DESCRIPTION_2', {
translate(CHECK_TX_KEY, {
$block_explorer: network.blockExplorer.name,
$block_explorer_link: network.blockExplorer.origin
$block_explorer_link: network.blockExplorer.origin,
// On ETH networks, we also show Etherchain. Otherwise, these variables are ignored
$block_explorer_2: etherChainExplorerInst.name,
$block_explorer_link_2: etherChainExplorerInst.origin
})}
</p>
<TxHashInput hash={hash} onSubmit={this.handleHashSubmit} />
Expand Down
45 changes: 8 additions & 37 deletions common/reducers/config/networks/staticNetworks.ts
Original file line number Diff line number Diff line change
@@ -1,56 +1,27 @@
import {
ethPlorer,
ETHTokenExplorer,
SecureWalletName,
gasPriceDefaults,
InsecureWalletName,
gasPriceDefaults
SecureWalletName
} from 'config/data';
import {
ETH_DEFAULT,
ETH_TREZOR,
ETH_LEDGER,
ELLA_DEFAULT,
ETC_LEDGER,
ETC_TREZOR,
ETH_DEFAULT,
ETH_LEDGER,
ETH_TESTNET,
ETH_TREZOR,
EXP_DEFAULT,
UBQ_DEFAULT,
POA_DEFAULT,
TOMO_DEFAULT,
ELLA_DEFAULT
UBQ_DEFAULT
} from 'config/dpaths';
import { ConfigAction } from 'actions/config';
import { BlockExplorerConfig } from 'types/network';
import { makeExplorer } from 'utils/helpers';
import { StaticNetworksState as State } from './types';

// Must be a website that follows the ethplorer convention of /tx/[hash] and
// address/[address] to generate the correct functions.
// TODO: put this in utils / libs
interface ExplorerConfig {
name: string;
origin: string;
txPath?: string;
addressPath?: string;
blockPath?: string;
}

export function makeExplorer(expConfig: ExplorerConfig): BlockExplorerConfig {
const config: ExplorerConfig = {
// Defaults
txPath: 'tx',
addressPath: 'address',
blockPath: 'block',
...expConfig
};

return {
name: config.origin,
origin: config.origin,
txUrl: hash => `${config.origin}/${config.txPath}/${hash}`,
addressUrl: address => `${config.origin}/${config.addressPath}/${address}`,
blockUrl: blockNum => `${config.origin}/${config.blockPath}/${blockNum}`
};
}

const testnetDefaultGasPrice = {
min: 0.1,
max: 40,
Expand Down
3 changes: 2 additions & 1 deletion common/translations/lang/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -440,11 +440,12 @@
"CHECK_TX_STATUS_TITLE": "Check Transaction Status",
"CHECK_TX_STATUS_DESCRIPTION_1": "Enter your Transaction Hash to check on its status. ",
"CHECK_TX_STATUS_DESCRIPTION_2": "If you don’t know your Transaction Hash, you can look it up on [$block_explorer]($block_explorer_link) by looking up your address.",
"CHECK_TX_STATUS_DESCRIPTION_MULTIPLE": "If you don’t know your Transaction Hash, you can look it up on [$block_explorer]($block_explorer_link) or [$block_explorer_2]($block_explorer_link_2) by looking up your address.",
"CHECK_TX_TITLE": "Transaction Found",
"TX_STATUS": "Status",
"TX_BLOCK_NUMB": "Block Number",
"TX_GAS_USED": "Gas Used",
"VERIFY_TX": "Verify transaction on $block_explorer",
"VERIFY_TX": "Verify ($block_explorer)",
"SWAP_DEPOSIT_INPUT_LABEL": "Deposit",
"SWAP_RECEIVE_INPUT_LABEL": "Receive",
"SWAP_MAX_ERROR": "Maximum $rate_max $origin_id",
Expand Down
27 changes: 27 additions & 0 deletions common/utils/helpers.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import qs from 'query-string';
import has from 'lodash/has';
import { BlockExplorerConfig } from 'types/network';

interface IObjectValue {
[key: string]: any;
Expand Down Expand Up @@ -37,3 +38,29 @@ export function isPositiveInteger(n: number) {

export const getValues = (...args: any[]) =>
args.reduce((acc, currArg) => [...acc, ...Object.values(currArg)], []);

interface ExplorerConfig {
name: string;
origin: string;
txPath?: string;
addressPath?: string;
blockPath?: string;
}

export function makeExplorer(expConfig: ExplorerConfig): BlockExplorerConfig {
const config: ExplorerConfig = {
// Defaults
txPath: 'tx',
addressPath: 'address',
blockPath: 'block',
...expConfig
};

return {
name: config.name,
origin: config.origin,
txUrl: hash => `${config.origin}/${config.txPath}/${hash}`,
addressUrl: address => `${config.origin}/${config.addressPath}/${address}`,
blockUrl: blockNum => `${config.origin}/${config.blockPath}/${blockNum}`
};
}

0 comments on commit c65296d

Please sign in to comment.