Add Send screen and fixed react-router
This commit is contained in:
Chi Kei Chan
parent
c5d911afde
commit
b9665b3a3d
19
src/components/AddressInputPanel/address-input-panel.scss
Normal file
19
src/components/AddressInputPanel/address-input-panel.scss
Normal file
@ -0,0 +1,19 @@
|
||||
@import '../../variables.scss';
|
||||
|
||||
.address-input-panel {
|
||||
@extend %col-nowrap;
|
||||
|
||||
&__input {
|
||||
color: $mine-shaft-gray;
|
||||
font-size: .9rem;
|
||||
outline: none;
|
||||
border: none;
|
||||
flex: 1 1 auto;
|
||||
width: 0;
|
||||
color: $royal-blue;
|
||||
|
||||
&::placeholder {
|
||||
color: $chalice-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
42
src/components/AddressInputPanel/index.js
Normal file
42
src/components/AddressInputPanel/index.js
Normal file
@ -0,0 +1,42 @@
|
||||
import React, { Component } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import './address-input-panel.scss';
|
||||
|
||||
class AddressInputPanel extends Component {
|
||||
static propTypes = {
|
||||
title: PropTypes.string,
|
||||
description: PropTypes.string,
|
||||
extraText: PropTypes.string,
|
||||
};
|
||||
|
||||
render() {
|
||||
const {
|
||||
title,
|
||||
description,
|
||||
extraText,
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<div className="currency-input-panel">
|
||||
<div className="currency-input-panel__container">
|
||||
<div className="currency-input-panel__label-row">
|
||||
<div className="currency-input-panel__label-container">
|
||||
<span className="currency-input-panel__label">Recipient Address</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="currency-input-panel__input-row">
|
||||
<input
|
||||
type="text"
|
||||
className="address-input-panel__input"
|
||||
placeholder="0x1234..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default connect()(AddressInputPanel);
|
||||
@ -18,6 +18,10 @@ function Web3Status(props) {
|
||||
<div
|
||||
className="web3-status__identicon"
|
||||
ref={el => {
|
||||
if (!el) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!address|| address.length < 42 || !Web3.utils.isHexStrict(address)) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { BrowserRouter } from 'react-router-dom'
|
||||
// import { BrowserRouter } from 'react-router-dom'
|
||||
import App from './pages/App';
|
||||
|
||||
import { Provider } from 'react-redux';
|
||||
@ -12,11 +12,9 @@ import registerServiceWorker from './registerServiceWorker';
|
||||
// provider is going to need a store object passed into it
|
||||
ReactDOM.render(
|
||||
<Provider store={store}>
|
||||
<BrowserRouter>
|
||||
<App metamask={window.web3} />
|
||||
</BrowserRouter>
|
||||
</Provider>
|
||||
, document.getElementById('root')
|
||||
, document.getElementById('root')
|
||||
);
|
||||
|
||||
registerServiceWorker();
|
||||
|
||||
122
src/pages/App.js
122
src/pages/App.js
@ -1,72 +1,76 @@
|
||||
import React, { Component } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { Switch, Route } from 'react-router-dom';
|
||||
import UniHead from '../components/UniHead'
|
||||
import Header from '../components/Header';
|
||||
import ConnectionHelper from '../components/ConnectionHelper'
|
||||
import Exchange from '../components/Exchange';
|
||||
import RateAndFee from '../components/RateAndFee';
|
||||
import Purchase from '../components/Purchase';
|
||||
import About from '../components/About';
|
||||
import Links from '../components/Links';
|
||||
import SharePurchase from '../components/SharePurchase';
|
||||
import { BrowserRouter, Switch, Route } from 'react-router-dom';
|
||||
// import UniHead from '../components/UniHead'
|
||||
// import Header from '../components/Header';
|
||||
// import ConnectionHelper from '../components/ConnectionHelper'
|
||||
// import Exchange from '../components/Exchange';
|
||||
// import RateAndFee from '../components/RateAndFee';
|
||||
// import Purchase from '../components/Purchase';
|
||||
// import About from '../components/About';
|
||||
// import Links from '../components/Links';
|
||||
// import SharePurchase from '../components/SharePurchase';
|
||||
|
||||
import Swap from './Swap';
|
||||
import Send from './Send';
|
||||
|
||||
import './App.scss';
|
||||
|
||||
class App extends Component {
|
||||
renderMain() {
|
||||
return (
|
||||
<div className="app">
|
||||
<UniHead />
|
||||
<Header metamask={this.props.metamask}/>
|
||||
<ConnectionHelper
|
||||
metamask={this.props.metamask}
|
||||
approveAllowance={this.approveAllowance}
|
||||
toggleAbout={this.toggleAbout}
|
||||
/>
|
||||
<Exchange
|
||||
getAccountInfo={this.getAccountInfo}
|
||||
getMarketInfo={this.getMarketInfo}
|
||||
symbolToTokenContract={this.symbolToTokenContract}
|
||||
symbolToExchangeAddress={this.symbolToExchangeAddress}
|
||||
/>
|
||||
<RateAndFee
|
||||
exchangeRate={this.props.exchange.rate}
|
||||
outputTokenValue={this.props.exchange.outputToken.value}
|
||||
inputTokenValue={this.props.exchange.inputToken.value}
|
||||
exchangeFee={this.props.exchange.fee}
|
||||
/>
|
||||
<Purchase
|
||||
symbolToExchangeContract={this.symbolToExchangeContract}
|
||||
symbolToTokenAddress={this.symbolToTokenAddress}
|
||||
/>
|
||||
{/* <Visualization /> */}
|
||||
<Links
|
||||
toggleInvest={this.toggleInvest}
|
||||
location={this}
|
||||
symbolToTokenContract={this.symbolToTokenContract}
|
||||
symbolToExchangeContract={this.symbolToExchangeContract}
|
||||
symbolToExchangeAddress={this.symbolToExchangeAddress}
|
||||
/>
|
||||
<SharePurchase
|
||||
symbolToTokenContract={this.symbolToTokenContract}
|
||||
symbolToExchangeContract={this.symbolToExchangeContract}
|
||||
symbolToTokenAddress={this.symbolToTokenAddress}
|
||||
symbolToExchangeAddress={this.symbolToExchangeAddress}
|
||||
/>
|
||||
<About toggleAbout={this.toggleAbout} location={this}/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
// renderMain() {
|
||||
// return (
|
||||
// <div className="app">
|
||||
// <UniHead />
|
||||
// <Header metamask={this.props.metamask}/>
|
||||
// <ConnectionHelper
|
||||
// metamask={this.props.metamask}
|
||||
// approveAllowance={this.approveAllowance}
|
||||
// toggleAbout={this.toggleAbout}
|
||||
// />
|
||||
// <Exchange
|
||||
// getAccountInfo={this.getAccountInfo}
|
||||
// getMarketInfo={this.getMarketInfo}
|
||||
// symbolToTokenContract={this.symbolToTokenContract}
|
||||
// symbolToExchangeAddress={this.symbolToExchangeAddress}
|
||||
// />
|
||||
// <RateAndFee
|
||||
// exchangeRate={this.props.exchange.rate}
|
||||
// outputTokenValue={this.props.exchange.outputToken.value}
|
||||
// inputTokenValue={this.props.exchange.inputToken.value}
|
||||
// exchangeFee={this.props.exchange.fee}
|
||||
// />
|
||||
// <Purchase
|
||||
// symbolToExchangeContract={this.symbolToExchangeContract}
|
||||
// symbolToTokenAddress={this.symbolToTokenAddress}
|
||||
// />
|
||||
// {/* <Visualization /> */}
|
||||
// <Links
|
||||
// toggleInvest={this.toggleInvest}
|
||||
// location={this}
|
||||
// symbolToTokenContract={this.symbolToTokenContract}
|
||||
// symbolToExchangeContract={this.symbolToExchangeContract}
|
||||
// symbolToExchangeAddress={this.symbolToExchangeAddress}
|
||||
// />
|
||||
// <SharePurchase
|
||||
// symbolToTokenContract={this.symbolToTokenContract}
|
||||
// symbolToExchangeContract={this.symbolToExchangeContract}
|
||||
// symbolToTokenAddress={this.symbolToTokenAddress}
|
||||
// symbolToExchangeAddress={this.symbolToExchangeAddress}
|
||||
// />
|
||||
// <About toggleAbout={this.toggleAbout} location={this}/>
|
||||
// </div>
|
||||
// )
|
||||
// }
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Switch>
|
||||
<Route exact path="/swap" component={Swap} />
|
||||
<Route exact path="/send" component={Swap} />
|
||||
<Route exact path="/pool" component={Swap} />
|
||||
</Switch>
|
||||
<BrowserRouter>
|
||||
<Switch>
|
||||
<Route exact path="/swap" component={Swap} />
|
||||
<Route exact path="/send" component={Send} />
|
||||
<Route exact path="/pool" component={Swap} />
|
||||
</Switch>
|
||||
</BrowserRouter>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
71
src/pages/Send/index.js
Normal file
71
src/pages/Send/index.js
Normal file
@ -0,0 +1,71 @@
|
||||
import React, { Component } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { withRouter } from 'react-router-dom';
|
||||
import PropTypes from 'prop-types';
|
||||
import Header from '../../components/Header';
|
||||
import NavigationTabs from '../../components/NavigationTabs';
|
||||
import CurrencyInputPanel from '../../components/CurrencyInputPanel';
|
||||
import AddressInputPanel from '../../components/AddressInputPanel';
|
||||
import OversizedPanel from '../../components/OversizedPanel';
|
||||
import ArrowDown from '../../assets/images/arrow-down-blue.svg';
|
||||
|
||||
import "./send.scss";
|
||||
|
||||
class Send extends Component {
|
||||
static propTypes = {
|
||||
// Injected by React Router Dom
|
||||
push: PropTypes.func.isRequired,
|
||||
pathname: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="send">
|
||||
<Header />
|
||||
<NavigationTabs className="swap__navigation" />
|
||||
<div className="swap__content">
|
||||
<CurrencyInputPanel
|
||||
title="Input"
|
||||
extraText="Balance: 0.03141"
|
||||
/>
|
||||
<OversizedPanel>
|
||||
<div className="swap__down-arrow-background">
|
||||
<img className="swap__down-arrow" src={ArrowDown} />
|
||||
</div>
|
||||
</OversizedPanel>
|
||||
<CurrencyInputPanel
|
||||
title="Output"
|
||||
description="(estimated)"
|
||||
extraText="Balance: 0.0"
|
||||
/>
|
||||
<OversizedPanel>
|
||||
<div className="swap__down-arrow-background">
|
||||
<img className="swap__down-arrow" src={ArrowDown} />
|
||||
</div>
|
||||
</OversizedPanel>
|
||||
<AddressInputPanel />
|
||||
<OversizedPanel hideBottom>
|
||||
<div className="swap__exchange-rate-wrapper">
|
||||
<span className="swap__exchange-rate">Exchange Rate</span>
|
||||
<span>1 ETH = 1283.878 BAT</span>
|
||||
</div>
|
||||
</OversizedPanel>
|
||||
<div className="swap__summary-wrapper">
|
||||
<div>You are selling <span className="swap__highlight-text">0.01 ETH</span></div>
|
||||
<div>You will receive between <span className="swap__highlight-text">12.80</span> and <span className="swap__highlight-text">12.83 BAT</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<button className="swap__cta-btn">Send</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withRouter(
|
||||
connect(
|
||||
(state, ownProps) => ({
|
||||
push: ownProps.history.push,
|
||||
pathname: ownProps.location.pathname,
|
||||
}),
|
||||
)(Send)
|
||||
);
|
||||
6
src/pages/Send/send.scss
Normal file
6
src/pages/Send/send.scss
Normal file
@ -0,0 +1,6 @@
|
||||
@import "../../variables.scss";
|
||||
|
||||
.send {
|
||||
@extend %col-nowrap;
|
||||
height: 100%;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user