From c65296d953f897555eeac42bc24636148bf34b69 Mon Sep 17 00:00:00 2001 From: Daniel Ternyak Date: Fri, 6 Apr 2018 16:08:28 -0500 Subject: [PATCH] Add Etherchain links (#1462) * add etherchain to transaction succeeded notification * additional etherchain links * shorten verify copy * fix config mis-match --- .../components/BalanceSidebar/AccountInfo.tsx | 8 ++++ .../TransactionSucceeded.tsx | 12 +++++ common/components/Footer/index.tsx | 4 ++ common/config/data.tsx | 7 +++ .../Tabs/CheckTransaction/index.tsx | 13 +++++- .../config/networks/staticNetworks.ts | 45 ++++--------------- common/translations/lang/en.json | 3 +- common/utils/helpers.ts | 27 +++++++++++ 8 files changed, 79 insertions(+), 40 deletions(-) diff --git a/common/components/BalanceSidebar/AccountInfo.tsx b/common/components/BalanceSidebar/AccountInfo.tsx index b7b801f1859..cd5d98550a2 100644 --- a/common/components/BalanceSidebar/AccountInfo.tsx +++ b/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 { )} + {network.name === 'ETH' && ( +
  • + + {`${network.name} (${etherChainExplorerInst.origin})`} + +
    • + )} {!!tokenExplorer && (
  • diff --git a/common/components/ExtendedNotifications/TransactionSucceeded.tsx b/common/components/ExtendedNotifications/TransactionSucceeded.tsx index 49206528fbe..c2e1e51d316 100644 --- a/common/components/ExtendedNotifications/TransactionSucceeded.tsx +++ b/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 | undefined; + let altVerifyBtn: React.ReactElement | undefined; if (blockExplorer) { verifyBtn = ( @@ -18,6 +20,15 @@ const TransactionSucceeded = ({ txHash, blockExplorer }: TransactionSucceededPro ); } + // 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 = ( + + {translate('VERIFY_TX', { $block_explorer: etherChainExplorerInst.name })} + + ); + } return (
    @@ -25,6 +36,7 @@ const TransactionSucceeded = ({ txHash, blockExplorer }: TransactionSucceededPro {translate('SUCCESS_3')} {txHash}

    {verifyBtn} + {altVerifyBtn} {translate('NAV_CHECKTXSTATUS')} diff --git a/common/components/Footer/index.tsx b/common/components/Footer/index.tsx index 0fe77ef22e8..a67761732e9 100644 --- a/common/components/Footer/index.tsx +++ b/common/components/Footer/index.tsx @@ -107,6 +107,10 @@ const FRIENDS: Link[] = [ { link: 'https://etherscan.io/', text: 'Etherscan' + }, + { + link: 'https://etherchain.org/', + text: 'Etherchain' } ]; diff --git a/common/config/data.tsx b/common/config/data.tsx index cc8cde7e28c..cabb095be39 100644 --- a/common/config/data.tsx +++ b/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', diff --git a/common/containers/Tabs/CheckTransaction/index.tsx b/common/containers/Tabs/CheckTransaction/index.tsx index e9c464da6e4..1aed3b5709e 100644 --- a/common/containers/Tabs/CheckTransaction/index.tsx +++ b/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 { 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 ( @@ -52,9 +58,12 @@ class CheckTransaction extends React.Component {

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

    diff --git a/common/reducers/config/networks/staticNetworks.ts b/common/reducers/config/networks/staticNetworks.ts index 7677501aebb..c8af189716d 100644 --- a/common/reducers/config/networks/staticNetworks.ts +++ b/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, diff --git a/common/translations/lang/en.json b/common/translations/lang/en.json index 9e0517f463f..254892ee88d 100644 --- a/common/translations/lang/en.json +++ b/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", diff --git a/common/utils/helpers.ts b/common/utils/helpers.ts index 52ca845640d..27f8ef5b301 100644 --- a/common/utils/helpers.ts +++ b/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}` + }; +}