1  import React from 'react';
 2  import { Link } from 'react-router-dom';
 3  
 4  import { etherChainExplorerInst } from 'config/data';
 5  import translate from 'translations';
 6  import { BlockExplorerConfig } from 'types/network';
 7  import { getTXDetailsCheckURL } from 'libs/scheduling';
 8  import { NewTabLink } from 'components/ui';
 9  
10  export interface TransactionSucceededProps {
11    txHash: string;
12    blockExplorer?: BlockExplorerConfig;
13    scheduling?: boolean;
14  }
15  
16  const TransactionSucceeded = ({ txHash, blockExplorer, scheduling }: TransactionSucceededProps) => {
17    let verifyBtn: React.ReactElement<string> | undefined;
18    let altVerifyBtn: React.ReactElement<string> | undefined;
19    if (blockExplorer) {
20      verifyBtn = (
21        <NewTabLink className="btn btn-xs" href={blockExplorer.txUrl(txHash)}>
22          {translate('VERIFY_TX', { $block_explorer: blockExplorer.name })}
23        </NewTabLink>
24      );
25    }
26    // TODO: In the future, we'll want to refactor staticNetworks so that multiple blockexplorers can be configured per network.
27    // This requires a large refactor, so for now we'll hard-code the etherchain link when etherscan is shown to verify your transaction
28    if (blockExplorer && blockExplorer.origin === 'https://etherscan.io') {
29      altVerifyBtn = (
30        <NewTabLink className="btn btn-xs" href={etherChainExplorerInst.txUrl(txHash)}>
31          {translate('VERIFY_TX', { $block_explorer: etherChainExplorerInst.name })}
32        </NewTabLink>
33      );
34    }
35  
36    let scheduleDetailsBtn: React.ReactElement<string> | undefined;
37    if (scheduling) {
38      scheduleDetailsBtn = (
39        <NewTabLink className="btn btn-xs" href={getTXDetailsCheckURL(txHash)}>
40          {translate('SCHEDULE_CHECK')}
41        </NewTabLink>
42      );
43    }
44  
45    return (
46      <div>
47        <p>
48          {translate('SUCCESS_3')} {txHash}
49        </p>
50        {scheduleDetailsBtn}
51        {verifyBtn}
52        {altVerifyBtn}
53        <Link to={`/tx-status?txHash=${txHash}`} className="btn btn-xs">
54          {translate('NAV_CHECKTXSTATUS')}
55        </Link>
56      </div>
57    );
58  };
59  
60  export default TransactionSucceeded;