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

94 lines
3.0 KiB
TypeScript

import translate from 'translations';
import classnames from 'classnames';
import { DataFieldFactory } from 'components/DataFieldFactory';
import { GasFieldFactory } from 'components/GasFieldFactory';
import { SendButtonFactory } from 'components/SendButtonFactory';
import { SigningStatus } from 'components/SigningStatus';
import { NonceField } from 'components/NonceField';
import { OfflineAwareUnlockHeader } from 'components';
import { GenerateTransaction } from 'components/GenerateTransaction';
import React, { Component } from 'react';
import { setToField, TSetToField } from 'actions/transaction';
import { connect } from 'react-redux';
import { Aux } from 'components/ui';
import { OnlyUnlocked } from 'components/renderCbs';
interface DispatchProps {
setToField: TSetToField;
}
class DeployClass extends Component<DispatchProps> {
public render() {
const content = (
<div className="Deploy">
<section>
<label className="Deploy-field form-group">
<h4 className="Deploy-field-label">{translate('CONTRACT_ByteCode')}</h4>
<DataFieldFactory
withProps={({ data: { raw, value }, onChange, readOnly }) => (
<textarea
name="byteCode"
placeholder="0x8f87a973e..."
rows={6}
onChange={onChange}
disabled={readOnly}
className={classnames('Deploy-field-input', 'form-control', {
'is-valid': value && value.length > 0
})}
value={raw}
/>
)}
/>
</label>
<label className="Deploy-field form-group">
<h4 className="Deploy-field-label">Gas Limit</h4>
<GasFieldFactory
withProps={({ gasLimit: { raw, value }, onChange, readOnly }) => (
<input
name="gasLimit"
value={raw}
disabled={readOnly}
onChange={onChange}
className={classnames('Deploy-field-input', 'form-control', {
'is-invalid': !value
})}
/>
)}
/>
</label>
<div className="row form-group">
<div className="col-xs-11">
<NonceField />
</div>
</div>
<div className="row form-group">
<div className="col-xs-12 clearfix">
<GenerateTransaction />
</div>
</div>
<SigningStatus />
<SendButtonFactory
withProps={({ onClick }) => (
<button className="Deploy-submit btn btn-primary" onClick={onClick}>
{translate('NAV_DeployContract')}
</button>
)}
/>
</section>
</div>
);
return (
<Aux>
<OfflineAwareUnlockHeader allowReadOnly={false} />
<OnlyUnlocked whenUnlocked={content} />
</Aux>
);
}
}
export const Deploy = connect(null, {
setToField
})(DeployClass);