Add Etherchain links (#1462)

* add etherchain to transaction succeeded notification

* additional etherchain links

* shorten verify copy

* fix config mis-match

common/components/BalanceSidebar/AccountInfo.tsx

@@ -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 {
@@ -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)}>

common/components/ExtendedNotifications/TransactionSucceeded.tsx

@@ -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;
@@ -11,6 +12,7 @@ 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)}>
@@ -18,6 +20,15 @@ const TransactionSucceeded = ({ txHash, blockExplorer }: TransactionSucceededPro
       </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>
@@ -25,6 +36,7 @@ const TransactionSucceeded = ({ txHash, blockExplorer }: TransactionSucceededPro
         {translate('SUCCESS_3')} {txHash}
       </p>
       {verifyBtn}
+      {altVerifyBtn}
       <Link to={`/tx-status?txHash=${txHash}`} className="btn btn-xs">
         {translate('NAV_CHECKTXSTATUS')}
       </Link>

common/components/Footer/index.tsx

@@ -107,6 +107,10 @@ const FRIENDS: Link[] = [
   {
     link: 'https://etherscan.io/',
     text: 'Etherscan'
+  },
+  {
+    link: 'https://etherchain.org/',
+    text: 'Etherchain'
   }
 ];
 

common/config/data.tsx

@@ -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';
@@ -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',

common/containers/Tabs/CheckTransaction/index.tsx

@@ -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;
@@ -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>
@@ -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} />

common/reducers/config/networks/staticNetworks.ts

@@ -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,

common/translations/lang/en.json

@@ -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",

common/utils/helpers.ts

@@ -1,5 +1,6 @@
 import qs from 'query-string';
 import has from 'lodash/has';
+import { BlockExplorerConfig } from 'types/network';
 
 interface IObjectValue {
   [key: string]: any;
@@ -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}`
+  };
+}