feat: implement copy-to-clipboard

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}`;
+    },
 };
diff --git a/yarn.lock b/yarn.lock
index 81e55020a..3cd04e13e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -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"