aboutsummaryrefslogblamecommitdiffstats
path: root/packages/website/ts/components/ui/etherscan_icon.tsx
blob: a7fba8a33c9f2fa1d90c2bea90f4c79ccdc6abad (plain) (tree)
1
2
3
4
5
6
7
8
9
10
11
12
                                                                                       

                               
                                         







                                                             
                                                                       

                              
                                    



                                                                                   

                                                                
                                  


                                                                                        




                                                                                          
              



              
                                        
                                                                                      
 
import { colors, EtherscanLinkSuffixes, utils as sharedUtils } from '@0x/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
import ReactTooltip from 'react-tooltip';

interface EtherScanIconProps {
    addressOrTxHash: string;
    etherscanLinkSuffixes: EtherscanLinkSuffixes;
    networkId: number;
}

export const EtherScanIcon = (props: EtherScanIconProps) => {
    const etherscanLinkIfExists = sharedUtils.getEtherScanLinkIfExists(
        props.addressOrTxHash,
        props.networkId,
        props.etherscanLinkSuffixes,
    );
    const transactionTooltipId = `${props.addressOrTxHash}-etherscan-icon-tooltip`;
    return (
        <div className="inline">
            {!_.isUndefined(etherscanLinkIfExists) ? (
                <a href={etherscanLinkIfExists} target="_blank">
                    {renderIcon()}
                </a>
            ) : (
                <div className="inline" data-tip={true} data-for={transactionTooltipId}>
                    {renderIcon()}
                    <ReactTooltip id={transactionTooltipId}>
                        Your network (id: {props.networkId}) is not supported by Etherscan
                    </ReactTooltip>
                </div>
            )}
        </div>
    );
};

function renderIcon(): React.ReactNode {
    return <i style={{ color: colors.amber600 }} className="zmdi zmdi-open-in-new" />;
}