diff options
| -rw-r--r-- | packages/instant/package.json | 1 | ||||
| -rw-r--r-- | packages/instant/src/components/payment_method_dropdown.tsx | 16 | ||||
| -rw-r--r-- | packages/instant/src/util/etherscan.ts | 7 | ||||
| -rw-r--r-- | yarn.lock | 6 |
4 files changed, 30 insertions, 0 deletions
diff --git a/packages/instant/package.json b/packages/instant/package.json index f90990649..2af4a799c 100644 --- a/packages/instant/package.json +++ b/packages/instant/package.json @@ -53,6 +53,7 @@ "@0x/typescript-typings": "^3.0.3", "@0x/utils": "^2.0.3", "@0x/web3-wrapper": "^3.1.0", + "copy-to-clipboard": "^3.0.8", "ethereum-types": "^1.1.1", "lodash": "^4.17.10", "polished": "^2.2.0", diff --git a/packages/instant/src/components/payment_method_dropdown.tsx b/packages/instant/src/components/payment_method_dropdown.tsx index 09d21e384..d1586f2c7 100644 --- a/packages/instant/src/components/payment_method_dropdown.tsx +++ b/packages/instant/src/components/payment_method_dropdown.tsx @@ -1,6 +1,9 @@ import { BigNumber } from '@0x/utils'; +import copy from 'copy-to-clipboard'; import * as React from 'react'; +import { Network } from '../types'; +import { etherscanUtil } from '../util/etherscan'; import { format } from '../util/format'; import { Dropdown, DropdownItemConfig } from './ui/dropdown'; @@ -8,12 +11,14 @@ import { Dropdown, DropdownItemConfig } from './ui/dropdown'; export interface PaymentMethodDropdownProps { selectedEthAddress: string; addressEthBaseAmount: BigNumber; + network: Network; } export class PaymentMethodDropdown extends React.Component<PaymentMethodDropdownProps> { public static defaultProps = { selectedEthAddress: '0xa1b2c3d4e5f6g7h8j9k10', addressEthBaseAmount: new BigNumber(10500000000000000000), + network: Network.Mainnet, }; public render(): React.ReactNode { const { selectedEthAddress, addressEthBaseAmount } = this.props; @@ -24,10 +29,21 @@ export class PaymentMethodDropdown extends React.Component<PaymentMethodDropdown private readonly _getDropdownItemConfigs = (): DropdownItemConfig[] => { const viewOnEtherscan = { text: 'View on Etherscan', + onClick: this._handleEtherscanClick, }; const copyAddressToClipboard = { text: 'Copy address to clipboard', + onClick: this._handleCopyToClipboardClick, }; return [viewOnEtherscan, copyAddressToClipboard]; }; + private readonly _handleEtherscanClick = (): void => { + const { selectedEthAddress, network } = this.props; + const etherscanUrl = etherscanUtil.getEtherScanEthAddressIfExists(selectedEthAddress, network); + window.open(etherscanUrl, '_blank'); + }; + private readonly _handleCopyToClipboardClick = (): void => { + const { selectedEthAddress } = this.props; + copy(selectedEthAddress); + }; } diff --git a/packages/instant/src/util/etherscan.ts b/packages/instant/src/util/etherscan.ts index cfc2578a3..4d62c4d9f 100644 --- a/packages/instant/src/util/etherscan.ts +++ b/packages/instant/src/util/etherscan.ts @@ -21,4 +21,11 @@ export const etherscanUtil = { } return `https://${prefix}etherscan.io/tx/${txHash}`; }, + getEtherScanEthAddressIfExists: (ethAddress: string, networkId: number) => { + const prefix = etherscanPrefix(networkId); + if (_.isUndefined(prefix)) { + return; + } + return `https://${prefix}etherscan.io/address/${ethAddress}`; + }, }; @@ -4407,6 +4407,12 @@ copy-to-clipboard@^3: dependencies: toggle-selection "^1.0.3" +copy-to-clipboard@^3.0.8: + version "3.0.8" + resolved "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.0.8.tgz#f4e82f4a8830dce4666b7eb8ded0c9bcc313aba9" + dependencies: + toggle-selection "^1.0.3" + copyfiles@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/copyfiles/-/copyfiles-2.0.0.tgz#bbd78bb78e8fd6db5c67adf54249317b24560f2a" |