[FEATURE] Move scheduling to main tab.

This commit is contained in:
Daniel Kmak 2018-03-27 14:38:42 +02:00 committed by Bagaric
parent c6ec79a31b
commit 2294046603
8 changed files with 9 additions and 211 deletions

View File

@ -4,7 +4,6 @@ import { withRouter, Switch, Redirect, HashRouter, Route, BrowserRouter } from '
// Components
import Contracts from 'containers/Tabs/Contracts';
import ENS from 'containers/Tabs/ENS';
import ScheduleTransaction from 'containers/Tabs/ScheduleTransaction';
import GenerateWallet from 'containers/Tabs/GenerateWallet';
import SendTransaction from 'containers/Tabs/SendTransaction';
import Swap from 'containers/Tabs/Swap';
@ -82,7 +81,6 @@ class RootClass extends Component<Props, State> {
<Route path="/swap" component={Swap} />
<Route path="/contracts" component={Contracts} />
<Route path="/ens" component={ENS} exact={true} />
<Route path="/schedule" component={ScheduleTransaction} exact={true} />
<Route path="/sign-and-verify-message" component={SignAndVerifyMessage} />
<Route path="/tx-status" component={CheckTransaction} exact={true} />
<Route path="/pushTx" component={BroadcastTx} />

View File

@ -8,12 +8,11 @@ import './NavigationLink.scss';
interface Props extends RouteComponentProps<{}> {
link: TabLink;
isHomepage: boolean;
activeOnlyWhenExact?: boolean;
}
class NavigationLink extends React.PureComponent<Props, {}> {
public render() {
const { activeOnlyWhenExact, link, location, isHomepage } = this.props;
const { link, location, isHomepage } = this.props;
const isExternalLink = link.to.includes('http');
let isActive = false;
@ -22,8 +21,7 @@ class NavigationLink extends React.PureComponent<Props, {}> {
// 1) Current path is the same as link
// 2) the first path is the same for both links (/account and /account/send)
// 3) we're at the root path and this is the "homepage" nav item
const isSubRoute =
!activeOnlyWhenExact && location.pathname.split('/')[1] === link.to.split('/')[1];
const isSubRoute = location.pathname.split('/')[1] === link.to.split('/')[1];
isActive =
location.pathname === link.to || isSubRoute || (isHomepage && location.pathname === '/');
}

View File

@ -1,56 +0,0 @@
import React from 'react';
import { connect } from 'react-redux';
import translate from 'translations';
import TabSection from 'containers/TabSection';
import { UnlockHeader } from 'components/ui';
import { getWalletInst } from 'selectors/wallet';
import { AppState } from 'reducers';
import { RouteComponentProps, Redirect } from 'react-router';
import { UnavailableWallets, SchedulingFields } from 'containers/Tabs/SendTransaction/components';
import { SideBar } from '../SendTransaction/components/SideBar';
import { getNetworkConfig } from 'selectors/config';
const ScheduleMain = () => (
<React.Fragment>
<SchedulingFields />
<UnavailableWallets />
</React.Fragment>
);
interface StateProps {
schedulingDisabled: boolean;
wallet: AppState['wallet']['inst'];
}
type Props = StateProps & RouteComponentProps<{}>;
class Schedule extends React.Component<Props> {
public render() {
const { schedulingDisabled, wallet } = this.props;
if (schedulingDisabled && wallet) {
return <Redirect to="account/info" />;
}
return (
<TabSection>
<section className="Tab-content">
<UnlockHeader title={translate('SCHEDULE_schedule')} showGenerateLink={true} />
{wallet && (
<div className="SubTabs row">
<div className="col-sm-8">
{wallet.isReadOnly ? <Redirect to="schedule/info" /> : <ScheduleMain />}
</div>
<SideBar />
</div>
)}
</section>
</TabSection>
);
}
}
export default connect((state: AppState) => ({
wallet: getWalletInst(state),
schedulingDisabled: getNetworkConfig(state).name !== 'Kovan'
}))(Schedule);

View File

@ -1,110 +0,0 @@
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { isAnyOfflineWithWeb3 } from 'selectors/derived';
import {
AddressField,
AmountField,
TXMetaDataPanel,
CurrentCustomMessage,
WindowStartField,
ScheduleTimestampField
} from 'components';
import { OnlyUnlocked, WhenQueryExists } from 'components/renderCbs';
import translate from 'translations';
import { AppState } from 'reducers';
import { NonStandardTransaction } from './components';
import { NewTabLink } from 'components/ui';
import { getOffline } from 'selectors/config';
import { SendScheduleTransactionButton } from 'containers/Tabs/ScheduleTransaction/components/SendScheduleTransactionButton';
import { GenerateScheduleTransactionButton } from 'containers/Tabs/ScheduleTransaction/components/GenerateScheduleTransactionButton';
const EACLink = () => (
<NewTabLink href="https://chronologic.network" content="Ethereum Alarm Clock" />
);
const QueryWarning: React.SFC<{}> = () => (
<WhenQueryExists
whenQueryExists={
<div className="alert alert-info">
<p>{translate('WARN_Send_Link')}</p>
</div>
}
/>
);
interface StateProps {
shouldDisplay: boolean;
offline: boolean;
}
class SchedulingFieldsClass extends Component<StateProps> {
public render() {
const { shouldDisplay, offline } = this.props;
return (
<OnlyUnlocked
whenUnlocked={
<React.Fragment>
<QueryWarning />
{shouldDisplay && (
<div className="Tab-content-pane">
<div className="row form-group">
<div className="col-xs-12">
<h3>ChronoLogic Scheduler</h3>
Powered by the <EACLink />, ChronoLogic Scheduler is a decentralized scheduling
protocol based on the Ethereum blockchain.
</div>
</div>
<div className="row form-group" />
<AddressField />
<div className="row form-group">
<div className="col-xs-12">
<AmountField hasUnitDropdown={true} hasSendEverything={true} />
</div>
</div>
<div className="row form-group">
<div className="col-xs-12">
<WindowStartField />
</div>
</div>
<div className="row form-group">
<div className="col-xs-12">
<ScheduleTimestampField />
</div>
</div>
<div className="row form-group">
<div className="col-xs-12">
<TXMetaDataPanel scheduling={true} />
</div>
</div>
<CurrentCustomMessage />
<NonStandardTransaction />
<div className="row form-group">
<div className="col-xs-12 clearfix">
{offline ? (
<GenerateScheduleTransactionButton />
) : (
<SendScheduleTransactionButton signing={true} />
)}
</div>
</div>
</div>
)}
</React.Fragment>
}
/>
);
}
}
export const SchedulingFields = connect((state: AppState) => ({
shouldDisplay: !isAnyOfflineWithWeb3(state),
offline: getOffline(state)
}))(SchedulingFieldsClass);

View File

@ -1,2 +1 @@
export * from './Fields';
export * from './SchedulingFields';

View File

@ -12,8 +12,7 @@ import {
RequestPayment,
RecentTransactions,
Fields,
UnavailableWallets,
SchedulingFields
UnavailableWallets
} from 'containers/Tabs/SendTransaction/components';
import SubTabs, { Tab } from 'components/SubTabs';
import { RouteNotFound } from 'components/RouteNotFound';
@ -26,13 +25,6 @@ const Send = () => (
</React.Fragment>
);
const Schedule = () => (
<React.Fragment>
<SchedulingFields />
<UnavailableWallets />
</React.Fragment>
);
interface StateProps {
wallet: AppState['wallet']['inst'];
requestDisabled: boolean;
@ -108,17 +100,6 @@ class SendTransaction extends React.Component<Props> {
exact={true}
render={() => <RecentTransactions wallet={wallet} />}
/>
<Route
exact={true}
path={`${currentPath}/schedule`}
render={() => {
return wallet.isReadOnly ? (
<Redirect to={`${currentPath}/info`} />
) : (
<Schedule />
);
}}
/>
<RouteNotFound />
</Switch>
</div>

View File

@ -51,10 +51,9 @@ export const getScheduleData = (
windowStart: any,
gasPrice: BN | null,
timeBounty: any,
requiredDeposit: any,
scheduleTimestamp: Date | null
requiredDeposit: any
) => {
if (!callValue || !gasPrice || !windowStart || !scheduleTimestamp) {
if (!callValue || !gasPrice || !windowStart) {
return;
}
@ -66,8 +65,7 @@ export const getScheduleData = (
gasPrice,
EAC_SCHEDULING_CONFIG.FEE,
timeBounty,
requiredDeposit,
scheduleTimestamp
requiredDeposit
]);
};

View File

@ -1,13 +1,6 @@
import { AppState } from 'reducers';
import { getCurrentTo, getCurrentValue } from './current';
import {
getFields,
getData,
getWindowStart,
getNonce,
getTimeBounty,
getScheduleTimestamp
} from './fields';
import { getFields, getData, getWindowStart, getNonce, getTimeBounty } from './fields';
import { makeTransaction, IHexStrTransaction } from 'libs/transaction';
import EthTx from 'ethereumjs-tx';
import { getUnit } from 'selectors/transaction/meta';
@ -74,7 +67,6 @@ const getSchedulingTransaction = (state: AppState): IGetTransaction => {
const callData = getData(state);
const validGasCost = getValidGasCost(state);
const windowStart = getWindowStart(state);
const scheduleTimestamp = getScheduleTimestamp(state);
const gasLimit = getGasLimit(state);
const nonce = getNonce(state);
const gasPrice = getGasPrice(state);
@ -84,8 +76,7 @@ const getSchedulingTransaction = (state: AppState): IGetTransaction => {
const isFullTransaction =
isFullTx(state, transactionFields, currentTo, currentValue, dataExists, validGasCost, unit) &&
windowStartValid &&
scheduleTimestampValid;
(windowStartValid || scheduleTimestampValid);
const transactionData = getScheduleData(
currentTo.raw,
@ -96,8 +87,7 @@ const getSchedulingTransaction = (state: AppState): IGetTransaction => {
windowStart.value,
gasPrice.value,
timeBounty.value,
EAC_SCHEDULING_CONFIG.REQUIRED_DEPOSIT,
scheduleTimestamp.value
EAC_SCHEDULING_CONFIG.REQUIRED_DEPOSIT
);
const endowment = calcEACEndowment(