Contracts Tab UI

common/components/Header/components/Navigation.tsx

@@ -24,6 +24,10 @@ const tabs = [
     name: 'NAV_ViewWallet'
     // to: 'view-wallet'
   },
+  {
+    name: 'NAV_Contracts',
+    to: 'contracts'
+  },
   {
     name: 'NAV_ENS',
     to: 'ens'

common/components/Root/index.tsx

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { Provider } from 'react-redux';
 import { Router, Route } from 'react-router-dom';
 // Components
+import Contracts from 'containers/Tabs/Contracts';
 import ENS from 'containers/Tabs/ENS';
 import GenerateWallet from 'containers/Tabs/GenerateWallet';
 import Help from 'containers/Tabs/Help';
@@ -28,6 +29,7 @@ export default class Root extends Component<Props, {}> {
             <Route path="/help" component={Help} />
             <Route path="/swap" component={Swap} />
             <Route path="/send-transaction" component={SendTransaction} />
+            <Route path="/contracts" component={Contracts} />
             <Route path="/ens" component={ENS} />
           </div>
         </Router>

common/components/ui/Code.scss

@@ -0,0 +1,14 @@
+pre {
+  color: #333;
+  background-color: #fafafa;
+  border: 1px solid #ececec;
+  border-radius: 0px;
+  padding: 8px;
+  code {
+    font-size: 14px;
+    line-height: 20px;
+    word-break: break-all;
+    word-wrap: break-word;
+    white-space: pre;
+  }
+}

common/components/ui/Code.tsx

@@ -0,0 +1,10 @@
+import React, { Component } from 'react';
+import './Code.scss';
+
+const Code = ({ children }) => (
+  <pre>
+    <code>{children}</code>
+  </pre>
+);
+
+export default Code;

common/containers/Tabs/Contracts/components/Deploy/components/DeployHoc/index.tsx

@@ -0,0 +1,154 @@
+import Big from 'bignumber.js';
+import React, { Component } from 'react';
+import {
+  generateCompleteTransaction as makeAndSignTx,
+  TransactionInput
+} from 'libs/transaction';
+import { Props, State, initialState } from './types';
+import { TxModal, Props as DMProps, TTxModal } from '../../../TxModal';
+import { TxCompare, Props as TCProps, TTxCompare } from '../../../TxCompare';
+import { withTx } from '../../../withTx';
+import { Props as DProps } from '../../';
+
+export const deployHOC = PassedComponent => {
+  class WrappedComponent extends Component<Props, State> {
+    public state: State = initialState;
+
+    public asyncSetState = value =>
+      new Promise(resolve => this.setState(value, resolve));
+
+    public resetState = () => this.setState(initialState);
+
+    public handleSignTx = async () => {
+      const { props, state } = this;
+
+      if (state.data === '') {
+        return;
+      }
+
+      try {
+        await this.getAddressAndNonce();
+        await this.makeSignedTxFromState();
+      } catch (e) {
+        props.showNotification(
+          'danger',
+          e.message || 'Error during contract tx generation',
+          5000
+        );
+
+        return this.resetState();
+      }
+    };
+
+    public handleInput = inputName => (
+      ev: React.FormEvent<HTMLTextAreaElement | HTMLInputElement>
+    ): void => {
+      if (this.state.signedTx) {
+        this.resetState();
+      }
+
+      this.setState({
+        [inputName]: ev.currentTarget.value
+      });
+    };
+
+    public handleDeploy = () => this.setState({ displayModal: true });
+
+    public render() {
+      const { data: byteCode, gasLimit, signedTx, displayModal } = this.state;
+
+      const props: DProps = {
+        handleInput: this.handleInput,
+        handleSignTx: this.handleSignTx,
+        handleDeploy: this.handleDeploy,
+        byteCode,
+        gasLimit,
+        displayModal,
+        walletExists: !!this.props.wallet,
+        txCompare: signedTx ? this.displayCompareTx() : null,
+        deployModal: signedTx ? this.displayDeployModal() : null
+      };
+
+      return <PassedComponent {...props} />;
+    }
+
+    private displayCompareTx = (): React.ReactElement<TTxCompare> => {
+      const { nonce, gasLimit, data, value, signedTx, to } = this.state;
+      const { gasPrice, chainId } = this.props;
+
+      if (!nonce || !signedTx) {
+        throw Error('Can not display raw tx, nonce empty or no signed tx');
+      }
+
+      const props: TCProps = {
+        nonce,
+        gasPrice,
+        chainId,
+        data,
+        gasLimit,
+        to,
+        value,
+        signedTx
+      };
+
+      return <TxCompare {...props} />;
+    };
+
+    private displayDeployModal = (): React.ReactElement<TTxModal> => {
+      const { networkName, node: { network, service } } = this.props;
+      const { signedTx } = this.state;
+
+      if (!signedTx) {
+        throw Error('Can not deploy contract, no signed tx');
+      }
+
+      const props: DMProps = {
+        action: 'deploy a contract',
+        networkName,
+        network,
+        service,
+        handleBroadcastTx: this.handleBroadcastTx,
+        onClose: this.resetState
+      };
+
+      return <TxModal {...props} />;
+    };
+
+    private handleBroadcastTx = () => {
+      if (!this.state.signedTx) {
+        throw Error('Can not broadcast tx, signed tx does not exist');
+      }
+      this.props.broadcastTx(this.state.signedTx);
+      this.resetState();
+    };
+
+    private makeSignedTxFromState = () => {
+      const { props, state: { data, gasLimit, value, to } } = this;
+      const transactionInput: TransactionInput = {
+        unit: 'ether',
+        to,
+        data,
+        value
+      };
+
+      return makeAndSignTx(
+        props.wallet,
+        props.nodeLib,
+        props.gasPrice,
+        new Big(gasLimit),
+        props.chainId,
+        transactionInput,
+        true
+      ).then(({ signedTx }) => this.asyncSetState({ signedTx }));
+    };
+
+    private getAddressAndNonce = async () => {
+      const address = await this.props.wallet.getAddress();
+      const nonce = await this.props.nodeLib
+        .getTransactionCount(address)
+        .then(n => new Big(n).toString());
+      return this.asyncSetState({ nonce, address });
+    };
+  }
+  return withTx(WrappedComponent);
+};

common/containers/Tabs/Contracts/components/Deploy/components/DeployHoc/types.ts

@@ -0,0 +1,42 @@
+import { Wei, Ether } from 'libs/units';
+import { IWallet } from 'libs/wallet/IWallet';
+import { RPCNode } from 'libs/nodes';
+import { NodeConfig, NetworkConfig } from 'config/data';
+import { TBroadcastTx } from 'actions/wallet';
+import { TShowNotification } from 'actions/notifications';
+
+export interface Props {
+  wallet: IWallet;
+  balance: Ether;
+  node: NodeConfig;
+  nodeLib: RPCNode;
+  chainId: NetworkConfig['chainId'];
+  networkName: NetworkConfig['name'];
+  gasPrice: Wei;
+  broadcastTx: TBroadcastTx;
+  showNotification: TShowNotification;
+}
+
+export interface State {
+  data: string;
+  gasLimit: string;
+  determinedContractAddress: string;
+  signedTx: null | string;
+  nonce: null | string;
+  address: null | string;
+  value: string;
+  to: string;
+  displayModal: boolean;
+}
+
+export const initialState: State = {
+  data: '',
+  gasLimit: '300000',
+  determinedContractAddress: '',
+  signedTx: null,
+  nonce: null,
+  address: null,
+  to: '0x',
+  value: '0x0',
+  displayModal: false
+};