mirror of
https://github.com/status-im/MyCrypto.git
synced 2025-01-10 19:16:10 +00:00
e3505fd958
* Empty component, routes setup. * Shared components for all Contracts inputs. Dont do anything yet. * Check in reducer work so far. Still WIP. * Header styling * Check in input work so far, splitting to new branch. * Strip down contracts inputs. Split out into form and explorer * Contract selector * Constantized config actions to use in contract saga. * Interact explorer UI, no functionality * Convert to constants, hook up errors * Deploy and style cleanup. * Remove unnecessary class. * Fix flow errors with css modules * Attempt at fixing all newly introduced flow errors in the contracts branch. * Removed unused validator. * Remove action constants, fix flow specificity in reducers * Fix unit tests * Move network contracts out of redux / sagas, and read directly from state with a selector in mapStateToProps. * Fix initialState -> INITIAL_STATE rename * foreach push -> concat
104 lines
2.9 KiB
JavaScript
104 lines
2.9 KiB
JavaScript
// @flow
|
|
import React, { Component } from 'react';
|
|
import { connect } from 'react-redux';
|
|
import { accessContract } from 'actions/contracts';
|
|
import type { ABIFunction } from 'actions/contracts';
|
|
import { getNetworkContracts } from 'selectors/config';
|
|
import type { NetworkContract } from 'config/data';
|
|
import { State } from 'reducers/contracts';
|
|
import translate from 'translations';
|
|
import Interact from './components/Interact';
|
|
import Deploy from './components/Deploy';
|
|
import './index.scss';
|
|
|
|
type Props = {
|
|
NetworkContracts: Array<NetworkContract>,
|
|
selectedAddress: ?string,
|
|
selectedABIJson: ?string,
|
|
selectedABIFunctions: ?Array<ABIFunction>,
|
|
accessContract: Function
|
|
};
|
|
|
|
class Contracts extends Component {
|
|
props: Props;
|
|
|
|
state = {
|
|
activeTab: 'interact'
|
|
};
|
|
|
|
changeTab(activeTab) {
|
|
this.setState({ activeTab });
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
NetworkContracts,
|
|
selectedAddress,
|
|
selectedABIJson,
|
|
selectedABIFunctions,
|
|
accessContract
|
|
} = this.props;
|
|
const { activeTab } = this.state;
|
|
let content = '';
|
|
let interactActive = '';
|
|
let deployActive = '';
|
|
|
|
if (activeTab === 'interact') {
|
|
content = (
|
|
<Interact
|
|
NetworkContracts={NetworkContracts}
|
|
selectedAddress={selectedAddress}
|
|
selectedABIJson={selectedABIJson}
|
|
selectedABIFunctions={selectedABIFunctions}
|
|
accessContract={accessContract}
|
|
/>
|
|
);
|
|
interactActive = 'is-active';
|
|
} else {
|
|
content = <Deploy />;
|
|
deployActive = 'is-active';
|
|
}
|
|
|
|
return (
|
|
<section className="container" style={{ minHeight: '50%' }}>
|
|
<div className="tab-content">
|
|
<main className="tab-pane active" role="main">
|
|
<div className="Contracts">
|
|
<h1 className="Contracts-header">
|
|
<button
|
|
className={`Contracts-header-tab ${interactActive}`}
|
|
onClick={this.changeTab.bind(this, 'interact')}
|
|
>
|
|
{translate('NAV_InteractContract')}
|
|
</button>{' '}
|
|
<span>or</span>{' '}
|
|
<button
|
|
className={`Contracts-header-tab ${deployActive}`}
|
|
onClick={this.changeTab.bind(this, 'deploy')}
|
|
>
|
|
{translate('NAV_DeployContract')}
|
|
</button>
|
|
</h1>
|
|
|
|
<div className="Contracts-content">
|
|
{content}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
}
|
|
|
|
function mapStateToProps(state: State) {
|
|
return {
|
|
NetworkContracts: getNetworkContracts(state),
|
|
selectedAddress: state.contracts.selectedAddress,
|
|
selectedABIJson: state.contracts.selectedABIJson,
|
|
selectedABIFunctions: state.contracts.selectedABIFunctions
|
|
};
|
|
}
|
|
|
|
export default connect(mapStateToProps, { accessContract })(Contracts);
|