Skip to content

I
interface
Commit f97155d6 authored by Chi Kei Chan's avatar Chi Kei Chan
Browse files
Options

Add Sass and create pages directory

parent 2d423267
Hide whitespace changes
Inline Side-by-side
Showing with 4535 additions and 3097 deletions
package.json
View file @ f97155d6
...@@ -6,13 +6,14 @@ ...@@ -6,13 +6,14 @@
"dependencies": { "dependencies": {
"axios": "^0.18.0", "axios": "^0.18.0",
"d3": "^4.13.0", "d3": "^4.13.0",
"node-sass": "^4.9.3",
"npm": "^6.0.0", "npm": "^6.0.0",
"react": "^16.2.0", "react": "^16.2.0",
"react-cookies": "^0.1.0", "react-cookies": "^0.1.0",
"react-dom": "^16.2.0", "react-dom": "^16.2.0",
"react-helmet": "^5.2.0", "react-helmet": "^5.2.0",
"react-redux": "^5.0.7", "react-redux": "^5.0.7",
"react-scripts": "1.1.0", "react-scripts": "2.0.4",
"react-scroll-to-component": "^1.0.2", "react-scroll-to-component": "^1.0.2",
"react-select": "^1.2.1", "react-select": "^1.2.1",
"redux": "^3.7.2", "redux": "^3.7.2",
...@@ -29,5 +30,11 @@ ...@@ -29,5 +30,11 @@
}, },
"devDependencies": { "devDependencies": {
"gh-pages": "^1.1.0" "gh-pages": "^1.1.0"
} },
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
} }
public/favicon.ico
View replaced file @ 2d423267 View file @ f97155d6
public/favicon.ico

3.78 KB | W: | H:

public/favicon.ico

39.9 KB | W: | H:

public/favicon.ico
public/favicon.ico
public/favicon.ico
public/favicon.ico
  • 2-up
  • Swipe
  • Onion skin
public/index.html
View file @ f97155d6
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/ homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
--> -->
<!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json"> --> <!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json"> -->
<link rel="shortcut icon" href="%PUBLIC_URL%/🦄.ico"> <link rel="shortcut icon" href="%PUBLIC_URL%/🦄.png">
<!-- <!--
Notice the use of %PUBLIC_URL% in the tags above. Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build. It will be replaced with the URL of the `public` folder during the build.
......
src/App.css deleted 100644 → 0
View file @ 2d423267
@import url('https://rsms.me/inter/inter-ui.css');
body{
margin: 0;
padding: 0;
font-family: "Inter UI", sans-serif;
font-size: 20px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
.dim input{
pointer-events:none;
}
input{
font-size: 20px;
line-height: 1.6;
}
p{
margin: 0;
}
a{
cursor: pointer;
color: #2F80ED;
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
.pa2 {
padding: 2.5rem;
/* padding-top: 1.5rem; */
/* padding-bottom: 1.5rem; */
}
.title{
display: flex;
flex-direction: row;
width: 100%;
}
.border{
border: 1px solid #f7f7f7;
}
.logo{
/* width: 10vw; */
display: flex;
justify-content: center;
align-items: center;
}
.connection{
display: flex;
justify-content: space-between;
align-items: center;
/* color: #27AE60; */
flex: 1;
z-index: 2;
font-family: "Inter UI", sans-serif;
}
.connection a{
/* text-decoration: none; */
/* color: #27AE60; */
padding-right: 2em;
}
.userBalance{
overflow-y: hidden;
overflow-x: scroll;
white-space: nowrap;
z-index: 10;
padding-right: 2em;
}
.order {
width: 100%;
display: flex;
flex-direction: row;
font-family: "Inter UI", sans-serif;
/* justify-content: space-between; */
}
.arrow{
max-width: 100vw;
display: flex;
justify-content: center;
align-items: center;
flex: 1;
}
.value{
width: 35vw;
display: flex;
justify-content: space-between;
align-items: center;
}
.value input, select{
width: 100%;
height: 100%;
border: none;
}
.value input:focus{
outline: none;
}
.investValue{
width: 80vw;
display: flex;
justify-content: space-between;
align-items: center;
}
.dropdown{
transform: rotate(-90deg);
opacity: .4;
position: relative;
z-index: -99;
left: -5px;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.rate-info{
display: flex;
flex-direction: row;
justify-content: space-between;
opacity: .6;
}
.rate p{
margin: 0px;
padding: .25rem;
font-family: "Inter UI", sans-serif;
}
.info{
display: flex;
flex-direction: row;
justify-content: space-between;
font-family: "Inter UI", sans-serif;
}
.links{
display: flex;
flex-direction: row;
justify-content: center;
font-family: "Inter UI", sans-serif;
}
.link{
display: flex;
flex-direction: row;
justify-content: space-between;
flex: 1;
text-decoration: none;
color: black;
}
.link:hover .underline{
text-decoration: underline;
}
.about{
display: flex;
flex-direction: row;
justify-content: space-between;
flex: 1;
text-decoration: none;
color: black;
font-family: "Inter UI", sans-serif;
}
.about:hover .underline{
text-decoration: underline;
}
.swap{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
color: white;
height: 48px;
transition: height .3s ease;
cursor: pointer;
font-family: "Inter UI", sans-serif;
}
.expand{
display: flex;
flex-direction: column;
/* justify-content: center; */
background-color: #f2f2f2;
height: auto;
transition: height .3s ease;
font-family: "Inter UI", sans-serif;
}
.transaction p{
margin: 0px;
font-family: "Inter UI", sans-serif;
}
.transaction ol{
padding: 0px;
padding-left: 20px;
}
.grey-bg{
background-color: #f7f7f7;
}
.white-bg{
background-color: #ffffff;
}
.red-bg{
/* background-color: red; */
background-color: #d73a49;
}
.blue-bg{
background-color: #2F80ED;
}
.red{
/* color: red; */
color: #d73a49;
}
.green{
color: #27AE60;
}
.green a{
color: #27AE60;
}
.yellow{
color: #F2C94C;
}
.dim .order , .liq, .ex{
opacity: .4;
pointer-events:none;
}
.dim .rate{
opacity: .4;
pointer-events:none;
}
.dim .links{
opacity: .4;
pointer-events:none;
}
.hidden{
padding: 0px;
height: 0px;
border: 0px solid #f2f2f2;
}
.f-a{
cursor: pointer;
}
.About p{
/* margin: .5rem; */
}
.expand p{
margin-top: .5rem;
margin-bottom: .5rem;
/* margin-before: 1em;
margin-after: 1em;
margin-start: 0px;
margin-end: 0px; */
}
.invest {
font-family: "Inter UI", sans-serif;
}
.investValue {
width: 90vw;
display: flex;
justify-content: space-between;
align-items: center;
}
.investValue input {
width: 15vw;
height: 100%;
border: none;
outline: none;
}
.investValueInput {
background-color: #ffffff;
}
.investSelectToken {
/* background-color: #ffffff; */
justify-content: space-between;
align-items: center;
display: flex;
flex-direction: row;
}
.investDropdown {
transform: rotate(-90deg);
opacity: .4;
position: relative;
left: -5px;
}
.visualization {
font-family: "Inter UI", sans-serif;
}
src/App.js deleted 100644 → 0
View file @ 2d423267
import React, { Component } from 'react';
// web3
import Web3 from 'web3';
import { exchangeABI } from './helpers/exchangeABI.js'
import { tokenABI } from './helpers/tokenABI.js'
import { factoryABI } from './helpers/factoryABI.js'
// React Components
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 Transactions from './components/Transactions';
import Visualization from './components/Visualization';
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux';
import { subscribe } from 'redux-subscriber';
// redux actions
import { exchangeContractReady } from './ducks/exchange-contract';
import { tokenContractReady } from './ducks/token-contract';
import { initializeGlobalWeb3,
setWeb3ConnectionStatus,
setCurrentMaskAddress,
metamaskLocked,
metamaskUnlocked,
setInteractionState,
factoryContractReady,
toggleAbout,
toggleInvest } from './ducks/web3';
import { setInputBalance,
setOutputBalance,
setEthPool1,
setEthPool2,
setTokenPool1,
setTokenPool2,
setAllowanceApprovalState,
setInvestToken,
setInvestEthPool,
setInvestTokenPool,
setInvestTokenAllowance,
setInvestShares,
setUserShares,
setInvestTokenBalance,
setInvestEthBalance } from './ducks/exchange';
import './App.css';
import scrollToComponent from 'react-scroll-to-component';
var web3;
class App extends Component {
constructor (props) {
super(props)
if (typeof props.metamask !== 'undefined'){
web3 = new Web3(window.web3.currentProvider)
} else {
web3 = 'undefined'
}
}
// TODO: get rid of redundant web3 === 'undefined' checks in componentWill/DidMount
componentWillMount() {
//console.log('props', this.props);
if(web3 === 'undefined') {
this.props.setWeb3ConnectionStatus(false);
} else {
this.props.initializeGlobalWeb3(web3)
this.getInfoFirstTime();
}
}
componentDidMount (){
// basic format to wrap functions you want firing upon a certain state change
// eslint-disable-next-line no-unused-vars
const web3Subscriber = subscribe('web3Store.connected', state => {
if(state.web3Store.connected === true && !state.web3Store.metamaskLocked) {
this.marketInterval = setInterval(this.getMarketInfo, 10000);
this.accountInterval = setInterval(this.getAccountInfo, 10000);
this.userInterval = setInterval(this.getUserAddress, 500);
} else {
console.log('web3 not connected, getting user address')
console.log('this.props.currentMaskAddress', this.props.currentMaskAddress)
this.otherUserInterval = setInterval(this.getUserAddress, 500);
}
})
}
componentWillReceiveProps(nextProps) {
//console.log('nextProps', nextProps)
}
// TODO: improve getInfoFirstTime and getUserAddress
getInfoFirstTime = () => {
web3.eth.getAccounts(async (error, result) => {
if(result.length > 0){
this.props.setCurrentMaskAddress(result[0]);
this.props.metamaskUnlocked();
this.props.setWeb3ConnectionStatus(true)
await this.getContracts();
this.getAccountInfo();
this.getMarketInfo();
} else {
this.props.metamaskLocked();
this.props.setWeb3ConnectionStatus(false)
this.props.setInteractionState('locked');
}
})
}
getUserAddress = () => {
this.props.web3Store.web3.eth.getAccounts((error, result) => {
if (result.length > 0) {
this.props.setCurrentMaskAddress(result[0]);
this.props.metamaskUnlocked();
this.props.setWeb3ConnectionStatus(true);
}
else {
this.props.setCurrentMaskAddress(undefined);
clearInterval(this.marketInterval);
clearInterval(this.accountInterval);
clearInterval(this.userInterval);
this.props.metamaskLocked();
this.props.setWeb3ConnectionStatus(false);
this.props.setInteractionState('locked');
}
})
}
// could possibly use refactoring
getContracts = () => {
const factoryAddress = this.props.web3Store.factoryAddress;
const factoryContract = new this.props.web3Store.web3.eth.Contract(factoryABI, factoryAddress);
this.props.factoryContractReady(factoryContract);
this.props.web3Store.exchangeAddresses.addresses.map(async exchangeAddress => {
// receive the exchange address, create the exchange contract
let exchangeContract = await new this.props.web3Store.web3.eth.Contract(exchangeABI, exchangeAddress[1]);
// send the exchange contract to redux store
await this.props.exchangeContractReady(exchangeAddress[0], exchangeContract);
})
this.props.web3Store.tokenAddresses.addresses.map(async tokenAddress => {
// receive the token address, create the token contract
let tokenContract = await new this.props.web3Store.web3.eth.Contract(tokenABI, tokenAddress[1]);
// send the token contract to redux store
await this.props.tokenContractReady(tokenAddress[0], tokenContract);
})
}
symbolToTokenAddress = (symbol) => {
let tokenAddresses = this.props.web3Store.tokenAddresses.addresses;
for (let i = 0; i < tokenAddresses.length; i++) {
if (tokenAddresses[i][0] === symbol) {
return tokenAddresses[i][1];
}
}
}
symbolToTokenContract = (symbol) => {
return this.props.tokenContracts[symbol]
}
symbolToExchangeAddress = (symbol) => {
let exchangeAddresses = this.props.web3Store.exchangeAddresses.addresses;
for (let i = 0; i < exchangeAddresses.length; i++) {
if (exchangeAddresses[i][0] === symbol) {
return exchangeAddresses[i][1];
}
}
}
symbolToExchangeContract = (symbol) => {
return this.props.exchangeContracts[symbol]
}
getMarketInfo = () => {
switch (this.props.web3Store.exchangeType) {
case 'ETH to Token':
this.getExchangeState('output');
break;
case 'Token to ETH':
this.getExchangeState('input');
break;
case 'Token to Token':
this.getExchangeState('input');
this.getExchangeState('output');
break;
default:
}
}
// this quadruplet of functions will end up being shared amongst multiple components
// will need to bring this out into a higher order component
// TODO: multiple components currently need this function, we will pass it to them via props
getAccountInfo = () => {
switch (this.props.web3Store.exchangeType) {
case 'ETH to Token':
this.getEthBalance('input');
this.getTokenBalance('output');
break;
case 'Token to ETH':
this.getEthBalance('output');
this.getTokenBalance('input');
this.getAllowance();
break;
case 'Token to Token':
this.getTokenBalance('input');
this.getTokenBalance('output');
this.getAllowance();
break;
case 'ETH to ETH':
this.getEthBalance('input');
this.getEthBalance('output');
break;
case 'Token to itself':
this.getTokenBalance('input');
this.getTokenBalance('output');
this.getAllowance();
break;
default:
}
}
getInvestInfo = () => {
var symbol = this.props.exchange.investToken.value;
if (symbol != "ETH") {
var exchange = this.symbolToExchangeContract(symbol);
var token = this.symbolToTokenContract(symbol);
var exchangeAddress = this.symbolToExchangeAddress(symbol);
exchange.methods.ethPool().call().then((result, error) => {
this.props.setInvestEthPool(result);
});
exchange.methods.tokenPool().call().then((result, error) => {
this.props.setInvestTokenPool(result);
});
exchange.methods.totalShares().call().then((result, error) => {
this.props.setInvestShares(result);
});
exchange.methods.getShares(this.props.web3Store.currentMaskAddress).call().then((result, error) => {
this.props.setUserShares(result);
});
token.methods.balanceOf(this.props.web3Store.currentMaskAddress).call((error, result) => {
this.props.setInvestTokenBalance(result);
});
token.methods.allowance(this.props.web3Store.currentMaskAddress, exchangeAddress).call((error, result) => {
this.props.setInvestTokenAllowance(result);
});
this.props.web3Store.web3.eth.getBalance(this.props.web3Store.currentMaskAddress, (error, result) => {
this.props.setInvestEthBalance(result);
});
}
}
getExchangeState = (type) => {
var exchange;
if (type === 'input') {
exchange = this.symbolToExchangeContract(this.props.exchange.inputToken.value);
exchange.methods.ethPool().call().then((result, error) => {
this.props.setEthPool1(result);
});
exchange.methods.tokenPool().call().then((result, error) => {
this.props.setTokenPool1(result);
});
} else if (type === 'output') {
exchange = this.symbolToExchangeContract(this.props.exchange.outputToken.value);
exchange.methods.ethPool().call().then((result, error) => {
this.props.setEthPool2(result);
});
exchange.methods.tokenPool().call().then((result, error) => {
this.props.setTokenPool2(result);
});
}
}
getEthBalance = (type) => {
if (type === 'input') {
this.props.web3Store.web3.eth.getBalance(this.props.web3Store.currentMaskAddress, (error, result) => {
this.props.setInputBalance(result);
});
} else if (type === 'output') {
this.props.web3Store.web3.eth.getBalance(this.props.web3Store.currentMaskAddress, (error, result) => {
this.props.setOutputBalance(result);
});
}
}
getTokenBalance = (type) => {
var token;
if (type === 'input') {
token = this.symbolToTokenContract(this.props.exchange.inputToken.value);
token.methods.balanceOf(this.props.web3Store.currentMaskAddress).call((error, result) => {
this.props.setInputBalance(result);
});
} else if (type === 'output') {
token = this.symbolToTokenContract(this.props.exchange.outputToken.value);
token.methods.balanceOf(this.props.web3Store.currentMaskAddress).call((error, result) => {
this.props.setOutputBalance(result);
});
}
}
getAllowance = () => {
var type = this.props.web3Store.exchangeType;
if(type === 'Token to ETH' || type === 'Token to Token') {
var token = this.symbolToTokenContract(this.props.exchange.inputToken.value);
var exchangeAddress = this.symbolToExchangeAddress(this.props.exchange.inputToken.value);
token.methods.allowance(this.props.web3Store.currentMaskAddress, exchangeAddress).call().then((result, error) => {
if(result === '0'){
this.props.setAllowanceApprovalState(false)
}
})
}
}
approveAllowance = () => {
var type = this.props.web3Store.exchangeType;
if(type === 'Token to ETH' || type === 'Token to Token') {
var token = this.symbolToTokenContract(this.props.exchange.inputToken.value);
var exchangeAddress = this.symbolToExchangeAddress(this.props.exchange.inputToken.value);
var amount = this.props.web3Store.web3.utils.toWei('100000');
token.methods.approve(exchangeAddress, amount).send({from: this.props.web3Store.currentMaskAddress})
.on('transactionHash', console.log('Transaction Hash created'))
.on('receipt', (receipt) => {
console.log(receipt)
this.props.setAllowanceApprovalState(true);
}) //Transaction Submitted to blockchain
.on('confirmation', (confirmationNumber, receipt) => {console.log("Block Confirmations: " + confirmationNumber)}) //Transaction Mined
.on('error', console.error);
}
}
tokenToExchangeFactoryLookup = (tokenAddress) => {
console.log('looking up exchange for token: ', tokenAddress)
this.props.web3Store.factoryContract.methods.tokenToExchangeLookup(tokenAddress).call().then((result, error) => {
if(error) {
console.log(error);
} else {
console.log('exchange address: ', result);
}
});
}
launchExchange = (tokenAddress) => {
this.props.web3Store.factoryContract.methods.launchExchange(tokenAddress).send({from: this.props.web3Store.currentMaskAddress})
.on('transactionHash', console.log('Transaction Hash created'))
.on('receipt', (receipt) => {
console.log(receipt)
}) //Transaction Submitted to blockchain
.on('confirmation', (confirmationNumber, receipt) => {console.log("Block Confirmations: " + confirmationNumber)}) //Transaction Mined
.on('error', console.error);
}
toggleAbout = () => {
let current = this.props.web3Store.aboutToggle;
this.props.toggleAbout(!current);
setTimeout(this.scrollToAbout, 300);
}
scrollToAbout = () => {
scrollToComponent(this.About, { offset: 0, align: 'top', duration: 500})
}
toggleInvest = () => {
this.getInvestInfo();
let current = this.props.web3Store.investToggle;
this.props.toggleInvest(!current);
setTimeout(this.scrollToInvest, 300);
}
scrollToInvest = () => {
scrollToComponent(this.Links, { offset: 0, align: 'top', duration: 500})
}
render() {
return (
<div className={this.props.web3Store.connected && !this.props.web3Store.metamaskLocked && this.props.web3Store.interaction !== 'disconnected' ? "App" : "App dim"}>
<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}/>
{//<Transactions transactions={this.state.transactions} interaction={this.props.web3Store.interaction} />
}
</div>
)
}
}
const mapStateToProps = state => ({
web3Store: state.web3Store,
exchangeContracts: state.exchangeContracts,
tokenContracts: state.tokenContracts,
exchange: state.exchange
});
const mapDispatchToProps = (dispatch) => {
return bindActionCreators({
setWeb3ConnectionStatus,
setCurrentMaskAddress,
metamaskLocked,
metamaskUnlocked,
setInteractionState,
factoryContractReady,
setInputBalance,
setOutputBalance,
setEthPool1,
setEthPool2,
setTokenPool1,
setTokenPool2,
setAllowanceApprovalState,
initializeGlobalWeb3,
toggleAbout,
toggleInvest,
exchangeContractReady,
tokenContractReady,
setInvestToken,
setInvestEthPool,
setInvestTokenPool,
setInvestTokenAllowance,
setInvestShares,
setUserShares,
setInvestTokenBalance,
setInvestEthBalance
}, dispatch)
}
export default connect(mapStateToProps, mapDispatchToProps)(App);
src/components/SharePurchase.js
View file @ f97155d6
...@@ -80,9 +80,11 @@ class Purchase extends Component { ...@@ -80,9 +80,11 @@ class Purchase extends Component {
if(this.props.web3Store.investToggle == true && this.props.exchange.investSharesInput > 0) { if(this.props.web3Store.investToggle == true && this.props.exchange.investSharesInput > 0) {
// Doesn't work // Doesn't work
if (this.props.exchange.investToken.value == "ETH") { if (this.props.exchange.investToken.value == "ETH") {
<div className="swap border pa2 red-bg"> return (
<b><p>Please select a token other than ETH.</p></b> <div className="swap border pa2 red-bg">
</div> <b><p>Please select a token other than ETH.</p></b>
</div>
)
} else if(this.props.exchange.investTokenAllowance == 0) { } else if(this.props.exchange.investTokenAllowance == 0) {
return ( return (
<div className="swap border pa2 blue-bg" role="button" onClick={() => {this.approveInvestAllowance()}}> <div className="swap border pa2 blue-bg" role="button" onClick={() => {this.approveInvestAllowance()}}>
......
src/components/UniHead.js
View file @ f97155d6
import React from 'react'; import React from 'react';
import { Helmet } from "react-helmet"; import { Helmet } from "react-helmet";
import unicorn from '../images/🦄.png' import unicorn from '../assets/images/logo.png'
function UniHead(props) { function UniHead(props) {
return ( return (
......
src/index.css
View file @ f97155d6
body { @import url('https://rsms.me/inter/inter-ui.css');
html, body {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: sans-serif; font-family: "Inter UI", sans-serif;
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
.root {
display: flex;
flex-flow: column nowrap;
height: 100vh;
width: 100vw;
overflow-x: hidden;
overflow-y: auto;
} }
src/index.js
View file @ f97155d6
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import App from './App'; import App from './pages/App';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import store from './store'; import store from './store';
......
src/pages/App.js 0 → 100644
View file @ f97155d6
import React, { Component } from 'react';
import { connect } from 'react-redux';
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 './App.scss';
class App extends Component {
render() {
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>
)
}
}
export default connect(
state => ({
web3Store: state.web3Store,
exchangeContracts: state.exchangeContracts,
tokenContracts: state.tokenContracts,
exchange: state.exchange,
}),
)(App);
src/pages/App.scss 0 → 100644
View file @ f97155d6
.app {
}
\ No newline at end of file
yarn.lock
View file @ f97155d6
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment