ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Send screen and fixed react-router

Browse Source
This commit is contained in:
Chi Kei Chan 2018-10-06 19:30:55 -07:00
parent c5d911afde
commit b9665b3a3d
7 changed files with 207 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/AddressInputPanel/address-input-panel.scss Normal file
View 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
View 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);

4
src/components/Web3Status/index.js
View File

@ -18,6 +18,10 @@ function Web3Status(props) {
<div <div
className="web3-status__identicon" className="web3-status__identicon"
ref={el => { ref={el => {
if (!el) {
return;
}
if (!address|| address.length < 42 || !Web3.utils.isHexStrict(address)) { if (!address|| address.length < 42 || !Web3.utils.isHexStrict(address)) {
return; return;
} }

6
src/index.js
View File

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom' // import { BrowserRouter } from 'react-router-dom'
import App from './pages/App'; import App from './pages/App';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
@ -12,11 +12,9 @@ import registerServiceWorker from './registerServiceWorker';
// provider is going to need a store object passed into it // provider is going to need a store object passed into it
ReactDOM.render( ReactDOM.render(
<Provider store={store}> <Provider store={store}>
<BrowserRouter>
<App metamask={window.web3} /> <App metamask={window.web3} />
</BrowserRouter>
</Provider> </Provider>
, document.getElementById('root') , document.getElementById('root')
); );
registerServiceWorker(); registerServiceWorker();

122
src/pages/App.js
View File

@ -1,72 +1,76 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { Switch, Route } from 'react-router-dom'; import { BrowserRouter, Switch, Route } from 'react-router-dom';
import UniHead from '../components/UniHead' // import UniHead from '../components/UniHead'
import Header from '../components/Header'; // import Header from '../components/Header';
import ConnectionHelper from '../components/ConnectionHelper' // import ConnectionHelper from '../components/ConnectionHelper'
import Exchange from '../components/Exchange'; // import Exchange from '../components/Exchange';
import RateAndFee from '../components/RateAndFee'; // import RateAndFee from '../components/RateAndFee';
import Purchase from '../components/Purchase'; // import Purchase from '../components/Purchase';
import About from '../components/About'; // import About from '../components/About';
import Links from '../components/Links'; // import Links from '../components/Links';
import SharePurchase from '../components/SharePurchase'; // import SharePurchase from '../components/SharePurchase';
import Swap from './Swap'; import Swap from './Swap';
import Send from './Send';
import './App.scss'; import './App.scss';
class App extends Component { class App extends Component {
renderMain() { // renderMain() {
return ( // return (
<div className="app"> // <div className="app">
<UniHead /> // <UniHead />
<Header metamask={this.props.metamask}/> // <Header metamask={this.props.metamask}/>
<ConnectionHelper // <ConnectionHelper
metamask={this.props.metamask} // metamask={this.props.metamask}
approveAllowance={this.approveAllowance} // approveAllowance={this.approveAllowance}
toggleAbout={this.toggleAbout} // toggleAbout={this.toggleAbout}
/> // />
<Exchange // <Exchange
getAccountInfo={this.getAccountInfo} // getAccountInfo={this.getAccountInfo}
getMarketInfo={this.getMarketInfo} // getMarketInfo={this.getMarketInfo}
symbolToTokenContract={this.symbolToTokenContract} // symbolToTokenContract={this.symbolToTokenContract}
symbolToExchangeAddress={this.symbolToExchangeAddress} // symbolToExchangeAddress={this.symbolToExchangeAddress}
/> // />
<RateAndFee // <RateAndFee
exchangeRate={this.props.exchange.rate} // exchangeRate={this.props.exchange.rate}
outputTokenValue={this.props.exchange.outputToken.value} // outputTokenValue={this.props.exchange.outputToken.value}
inputTokenValue={this.props.exchange.inputToken.value} // inputTokenValue={this.props.exchange.inputToken.value}
exchangeFee={this.props.exchange.fee} // exchangeFee={this.props.exchange.fee}
/> // />
<Purchase // <Purchase
symbolToExchangeContract={this.symbolToExchangeContract} // symbolToExchangeContract={this.symbolToExchangeContract}
symbolToTokenAddress={this.symbolToTokenAddress} // symbolToTokenAddress={this.symbolToTokenAddress}
/> // />
{/* <Visualization /> */} // {/* <Visualization /> */}
<Links // <Links
toggleInvest={this.toggleInvest} // toggleInvest={this.toggleInvest}
location={this} // location={this}
symbolToTokenContract={this.symbolToTokenContract} // symbolToTokenContract={this.symbolToTokenContract}
symbolToExchangeContract={this.symbolToExchangeContract} // symbolToExchangeContract={this.symbolToExchangeContract}
symbolToExchangeAddress={this.symbolToExchangeAddress} // symbolToExchangeAddress={this.symbolToExchangeAddress}
/> // />
<SharePurchase // <SharePurchase
symbolToTokenContract={this.symbolToTokenContract} // symbolToTokenContract={this.symbolToTokenContract}
symbolToExchangeContract={this.symbolToExchangeContract} // symbolToExchangeContract={this.symbolToExchangeContract}
symbolToTokenAddress={this.symbolToTokenAddress} // symbolToTokenAddress={this.symbolToTokenAddress}
symbolToExchangeAddress={this.symbolToExchangeAddress} // symbolToExchangeAddress={this.symbolToExchangeAddress}
/> // />
<About toggleAbout={this.toggleAbout} location={this}/> // <About toggleAbout={this.toggleAbout} location={this}/>
</div> // </div>
) // )
} // }
render() { render() {
return ( return (
<Switch> <BrowserRouter>
<Route exact path="/swap" component={Swap} /> <Switch>
<Route exact path="/send" component={Swap} /> <Route exact path="/swap" component={Swap} />
<Route exact path="/pool" component={Swap} /> <Route exact path="/send" component={Send} />
</Switch> <Route exact path="/pool" component={Swap} />
</Switch>
</BrowserRouter>
) )
} }
} }

71
src/pages/Send/index.js Normal file
View 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
View File

@ -0,0 +1,6 @@
@import "../../variables.scss";
.send {
@extend %col-nowrap;
height: 100%;
}