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,146 @@
+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 } from '../../../TxModal';
+import { TxCompare, Props as TCProps } from '../../../TxCompare';
+import { withTx } from '../../../withTx';
+
+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 =>
+      this.setState({
+        [inputName]: ev.target.value
+      });
+
+    public handleDeploy = () => this.setState({ displayModal: true });
+
+    public render() {
+      const { data: byteCode, gasLimit, signedTx, displayModal } = this.state;
+
+      const props = {
+        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 = () => {
+      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 = () => {
+      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
+};

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

@@ -0,0 +1,86 @@
+import React from 'react';
+import translate from 'translations';
+import WalletDecrypt from 'components/WalletDecrypt';
+import { deployHOC } from './components/DeployHoc';
+import { TTxCompare } from '../TxCompare';
+import { TTxModal } from '../TxModal';
+interface Props {
+  byteCode: string;
+  gasLimit: string;
+  walletExists: boolean;
+  TxCompare: TTxCompare | null;
+  displayModal: boolean;
+  DeployModal: TTxModal | null;
+  handleInput(input: string): () => null;
+  handleSignTx(): null;
+  handleDeploy(): null;
+}
+
+const Deploy = (props: Props) => {
+  const {
+    handleSignTx,
+    handleInput,
+    handleDeploy,
+    byteCode,
+    gasLimit,
+    walletExists,
+    DeployModal,
+    displayModal,
+    TxCompare
+  } = props;
+  return (
+    <div className="Deploy">
+      <section>
+        <label className="Deploy-field form-group">
+          <h4 className="Deploy-field-label">
+            {translate('CONTRACT_ByteCode')}
+          </h4>
+          <textarea
+            name="byteCode"
+            placeholder="0x8f87a973e..."
+            rows={6}
+            onChange={handleInput('data')}
+            className="Deploy-field-input form-control"
+            value={byteCode}
+          />
+        </label>
+
+        <label className="Deploy-field form-group">
+          <h4 className="Deploy-field-label">Gas Limit</h4>
+          <input
+            name="gasLimit"
+            value={gasLimit}
+            onChange={handleInput('gasLimit')}
+            placeholder="30000"
+            className="Deploy-field-input form-control"
+          />
+        </label>
+
+        {(walletExists && (
+          <button
+            className="Sign-submit btn btn-primary"
+            onClick={handleSignTx}
+          >
+            {translate('DEP_signtx')}
+          </button>
+        )) || <WalletDecrypt />}
+
+        {TxCompare ? (
+          <section>
+            {TxCompare}
+            <button
+              className="Deploy-submit btn btn-primary"
+              onClick={handleDeploy}
+            >
+              {translate('NAV_DeployContract')}
+            </button>
+          </section>
+        ) : null}
+
+        {displayModal && DeployModal}
+      </section>
+    </div>
+  );
+};
+
+export default deployHOC(Deploy);