Skip to content

I
interface
Commit 10dc4e2d authored by Ross's avatar Ross
Browse files
Options

added ani

parent 33124d6f
Hide whitespace changes
Inline Side-by-side
Showing with 188 additions and 161 deletions
src/pages/App.js
View file @ 10dc4e2d
import React, { Component } from 'react'; import React, { Component } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { BrowserRouter, Redirect, Route } from 'react-router-dom'; import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom';
import MediaQuery from 'react-responsive'; import MediaQuery from 'react-responsive';
import { AnimatedSwitch } from 'react-router-transition'; //import { AnimatedSwitch } from 'react-router-transition';
import { Web3Connect, startWatching, initialize } from '../ducks/web3connect'; import { Web3Connect, startWatching, initialize } from '../ducks/web3connect';
import { setAddresses } from '../ducks/addresses'; import { setAddresses } from '../ducks/addresses';
import Header from '../components/Header'; import Header from '../components/Header';
...@@ -45,19 +45,16 @@ class App extends Component { ...@@ -45,19 +45,16 @@ class App extends Component {
</MediaQuery> </MediaQuery>
<Web3Connect /> <Web3Connect />
<BrowserRouter> <BrowserRouter>
<AnimatedSwitch <Switch>
atEnter={{ opacity: 0 }} <div className="app__switch-wrapper">
atLeave={{ opacity: 0 }} <Route exact path="/swap" component={Swap} />
atActive={{ opacity: 1 }} <Route exact path="/send" component={Send} />
className="app__switch-wrapper" <Route exact path="/add-liquidity" component={Pool} />
> <Route exact path="/remove-liquidity" component={Pool} />
<Route exact path="/swap" component={Swap} /> <Route exact path="/create-exchange/:tokenAddress?" component={Pool} />
<Route exact path="/send" component={Send} /> <Redirect exact from="/" to="/swap" />
<Route exact path="/add-liquidity" component={Pool} /> </div>
<Route exact path="/remove-liquidity" component={Pool} /> </Switch>
<Route exact path="/create-exchange/:tokenAddress?" component={Pool} />
<Redirect exact from="/" to="/swap" />
</AnimatedSwitch>
</BrowserRouter> </BrowserRouter>
</div> </div>
); );
......
src/pages/App.scss
View file @ 10dc4e2d
...@@ -30,3 +30,24 @@ ...@@ -30,3 +30,24 @@
//max-width: 560px; //max-width: 560px;
} }
} }
@keyframes title_fade_in {
from {
opacity: 0;
top: -10px;
}
to {
opacity: 1;
top: 0px;
}
}
.ani_title_fade_in {
position: relative;
opacity: 0;
animation: title_fade_in cubic-bezier(0.23, 1, 0.32, 1) 1;
animation-fill-mode: forwards;
animation-duration: 1.2s;
animation-delay: 0s;
}
\ No newline at end of file
src/pages/Pool/AddLiquidity.js
View file @ 10dc4e2d
...@@ -511,65 +511,68 @@ class AddLiquidity extends Component { ...@@ -511,65 +511,68 @@ class AddLiquidity extends Component {
'header--inactive': !isConnected, 'header--inactive': !isConnected,
})} })}
/> />
{
this.isNewExchange() <div className='ani_title_fade_in'>
? ( {
<div className="pool__new-exchange-warning"> this.isNewExchange()
<div className="pool__new-exchange-warning-text"> ? (
🚰 You are the first person to add liquidity! <div className="pool__new-exchange-warning">
</div> <div className="pool__new-exchange-warning-text">
<div className="pool__new-exchange-warning-text"> 🚰 You are the first person to add liquidity!
{`The initial exchange rate will be set based on your deposits. Please make sure that your ETH and ${label} deposits have the same fiat value.`} </div>
<div className="pool__new-exchange-warning-text">
{`The initial exchange rate will be set based on your deposits. Please make sure that your ETH and ${label} deposits have the same fiat value.`}
</div>
</div> </div>
</div> )
) : null
: null }
} <ModeSelector title="Add Liquidity" />
<ModeSelector title="Add Liquidity" /> <CurrencyInputPanel
<CurrencyInputPanel title="Deposit"
title="Deposit" extraText={this.getBalance(inputCurrency)}
extraText={this.getBalance(inputCurrency)} onValueChange={this.onInputChange}
onValueChange={this.onInputChange} selectedTokenAddress="ETH"
selectedTokenAddress="ETH" value={inputValue}
value={inputValue} errorMessage={inputError}
errorMessage={inputError} disableTokenSelect
disableTokenSelect />
/> <OversizedPanel>
<OversizedPanel> <div className="swap__down-arrow-background">
<div className="swap__down-arrow-background"> <img className="swap__down-arrow" src={isValid ? PlusBlue : PlusGrey} />
<img className="swap__down-arrow" src={isValid ? PlusBlue : PlusGrey} /> </div>
</OversizedPanel>
<CurrencyInputPanel
title="Deposit"
description={this.isNewExchange() ? '(estimated)' : ''}
extraText={this.getBalance(outputCurrency)}
selectedTokenAddress={outputCurrency}
onCurrencySelected={currency => {
this.setState({
outputCurrency: currency,
}, this.recalcForm);
}}
onValueChange={this.onOutputChange}
value={outputValue}
errorMessage={outputError}
filteredTokens={[ 'ETH' ]}
/>
<OversizedPanel hideBottom>
{ this.renderInfo() }
</OversizedPanel>
{ this.renderSummary(inputError, outputError) }
<div className="pool__cta-container">
<button
className={classnames('pool__cta-btn', {
'swap--inactive': !this.props.isConnected,
'pool__cta-btn--inactive': !isValid,
})}
disabled={!isValid}
onClick={this.onAddLiquidity}
>
Add Liquidity
</button>
</div> </div>
</OversizedPanel>
<CurrencyInputPanel
title="Deposit"
description={this.isNewExchange() ? '(estimated)' : ''}
extraText={this.getBalance(outputCurrency)}
selectedTokenAddress={outputCurrency}
onCurrencySelected={currency => {
this.setState({
outputCurrency: currency,
}, this.recalcForm);
}}
onValueChange={this.onOutputChange}
value={outputValue}
errorMessage={outputError}
filteredTokens={[ 'ETH' ]}
/>
<OversizedPanel hideBottom>
{ this.renderInfo() }
</OversizedPanel>
{ this.renderSummary(inputError, outputError) }
<div className="pool__cta-container">
<button
className={classnames('pool__cta-btn', {
'swap--inactive': !this.props.isConnected,
'pool__cta-btn--inactive': !isValid,
})}
disabled={!isValid}
onClick={this.onAddLiquidity}
>
Add Liquidity
</button>
</div> </div>
</div> </div>
]; ];
......
src/pages/Send/index.js
View file @ 10dc4e2d
...@@ -718,7 +718,7 @@ class Send extends Component { ...@@ -718,7 +718,7 @@ class Send extends Component {
const { inputError, outputError, isValid } = this.validate(); const { inputError, outputError, isValid } = this.validate();
return ( return (
<div className="send"> <div className="send ">
<MediaQuery query="(max-width: 767px)"> <MediaQuery query="(max-width: 767px)">
<Header /> <Header />
</MediaQuery> </MediaQuery>
...@@ -732,56 +732,60 @@ class Send extends Component { ...@@ -732,56 +732,60 @@ class Send extends Component {
'header--inactive': !this.props.isConnected, 'header--inactive': !this.props.isConnected,
})} })}
/> />
<CurrencyInputPanel
title="Input" <div className='ani_title_fade_in'>
description={lastEditedField === OUTPUT ? estimatedText : ''} <CurrencyInputPanel
extraText={this.renderBalance(inputCurrency, inputBalance, inputDecimals)} title="Input"
onCurrencySelected={inputCurrency => this.setState({ inputCurrency }, this.recalcForm)} description={lastEditedField === OUTPUT ? estimatedText : ''}
onValueChange={this.updateInput} extraText={this.renderBalance(inputCurrency, inputBalance, inputDecimals)}
selectedTokens={[inputCurrency, outputCurrency]} onCurrencySelected={inputCurrency => this.setState({ inputCurrency }, this.recalcForm)}
selectedTokenAddress={inputCurrency} onValueChange={this.updateInput}
value={inputValue} selectedTokens={[inputCurrency, outputCurrency]}
errorMessage={inputError} selectedTokenAddress={inputCurrency}
/> value={inputValue}
<OversizedPanel> errorMessage={inputError}
<div className="swap__down-arrow-background"> />
<img onClick={this.flipInputOutput} className="swap__down-arrow swap__down-arrow--clickable" src={isValid ? ArrowDownBlue : ArrowDownGrey} /> <OversizedPanel>
</div> <div className="swap__down-arrow-background">
</OversizedPanel> <img onClick={this.flipInputOutput} className="swap__down-arrow swap__down-arrow--clickable" src={isValid ? ArrowDownBlue : ArrowDownGrey} />
<CurrencyInputPanel </div>
title="Output" </OversizedPanel>
description={lastEditedField === INPUT ? estimatedText : ''} <CurrencyInputPanel
extraText={this.renderBalance(outputCurrency, outputBalance, outputDecimals)} title="Output"
onCurrencySelected={outputCurrency => this.setState({ outputCurrency }, this.recalcForm)} description={lastEditedField === INPUT ? estimatedText : ''}
onValueChange={this.updateOutput} extraText={this.renderBalance(outputCurrency, outputBalance, outputDecimals)}
selectedTokens={[inputCurrency, outputCurrency]} onCurrencySelected={outputCurrency => this.setState({ outputCurrency }, this.recalcForm)}
value={outputValue} onValueChange={this.updateOutput}
selectedTokenAddress={outputCurrency} selectedTokens={[inputCurrency, outputCurrency]}
errorMessage={outputError} value={outputValue}
disableUnlock selectedTokenAddress={outputCurrency}
/> errorMessage={outputError}
<OversizedPanel> disableUnlock
<div className="swap__down-arrow-background"> />
<img className="swap__down-arrow" src={isValid ? ArrowDownBlue : ArrowDownGrey} /> <OversizedPanel>
<div className="swap__down-arrow-background">
<img className="swap__down-arrow" src={isValid ? ArrowDownBlue : ArrowDownGrey} />
</div>
</OversizedPanel>
<AddressInputPanel
value={recipient}
onChange={address => this.setState({recipient: address})}
/>
{ this.renderExchangeRate() }
{ this.renderSummary(inputError, outputError) }
<div className="swap__cta-container">
<button
className={classnames('swap__cta-btn', {
'swap--inactive': !this.props.isConnected,
})}
disabled={!isValid}
onClick={this.onSend}
>
Send
</button>
</div> </div>
</OversizedPanel>
<AddressInputPanel
value={recipient}
onChange={address => this.setState({recipient: address})}
/>
{ this.renderExchangeRate() }
{ this.renderSummary(inputError, outputError) }
<div className="swap__cta-container">
<button
className={classnames('swap__cta-btn', {
'swap--inactive': !this.props.isConnected,
})}
disabled={!isValid}
onClick={this.onSend}
>
Send
</button>
</div> </div>
</div> </div>
</div> </div>
); );
......
src/pages/Swap/index.js
View file @ 10dc4e2d
...@@ -698,7 +698,6 @@ class Swap extends Component { ...@@ -698,7 +698,6 @@ class Swap extends Component {
const { inputError, outputError, isValid } = this.validate(); const { inputError, outputError, isValid } = this.validate();
return ( return (
<div className="swap"> <div className="swap">
<MediaQuery query="(max-width: 767px)"> <MediaQuery query="(max-width: 767px)">
...@@ -714,46 +713,49 @@ class Swap extends Component { ...@@ -714,46 +713,49 @@ class Swap extends Component {
'header--inactive': !this.props.isConnected, 'header--inactive': !this.props.isConnected,
})} })}
/> />
<CurrencyInputPanel
title="Input" <div className='ani_title_fade_in'>
description={lastEditedField === OUTPUT ? estimatedText : ''} <CurrencyInputPanel
extraText={this.renderBalance(inputCurrency, inputBalance, inputDecimals)} title="Input"
onCurrencySelected={inputCurrency => this.setState({ inputCurrency }, this.recalcForm)} description={lastEditedField === OUTPUT ? estimatedText : ''}
onValueChange={this.updateInput} extraText={this.renderBalance(inputCurrency, inputBalance, inputDecimals)}
selectedTokens={[inputCurrency, outputCurrency]} onCurrencySelected={inputCurrency => this.setState({ inputCurrency }, this.recalcForm)}
selectedTokenAddress={inputCurrency} onValueChange={this.updateInput}
value={inputValue} selectedTokens={[inputCurrency, outputCurrency]}
errorMessage={inputError} selectedTokenAddress={inputCurrency}
/> value={inputValue}
<OversizedPanel> errorMessage={inputError}
<div className="swap__down-arrow-background"> />
<img onClick={this.flipInputOutput} className="swap__down-arrow swap__down-arrow--clickable" src={isValid ? ArrowDownBlue : ArrowDownGrey} /> <OversizedPanel>
<div className="swap__down-arrow-background">
<img onClick={this.flipInputOutput} className="swap__down-arrow swap__down-arrow--clickable" src={isValid ? ArrowDownBlue : ArrowDownGrey} />
</div>
</OversizedPanel>
<CurrencyInputPanel
title="Output"
description={lastEditedField === INPUT ? estimatedText : ''}
extraText={this.renderBalance(outputCurrency, outputBalance, outputDecimals)}
onCurrencySelected={outputCurrency => this.setState({ outputCurrency }, this.recalcForm)}
onValueChange={this.updateOutput}
selectedTokens={[inputCurrency, outputCurrency]}
value={outputValue}
selectedTokenAddress={outputCurrency}
errorMessage={outputError}
disableUnlock
/>
{ this.renderExchangeRate() }
{ this.renderSummary(inputError, outputError) }
<div className="swap__cta-container">
<button
className={classnames('swap__cta-btn', {
'swap--inactive': !this.props.isConnected,
})}
disabled={!isValid}
onClick={this.onSwap}
>
Swap
</button>
</div> </div>
</OversizedPanel>
<CurrencyInputPanel
title="Output"
description={lastEditedField === INPUT ? estimatedText : ''}
extraText={this.renderBalance(outputCurrency, outputBalance, outputDecimals)}
onCurrencySelected={outputCurrency => this.setState({ outputCurrency }, this.recalcForm)}
onValueChange={this.updateOutput}
selectedTokens={[inputCurrency, outputCurrency]}
value={outputValue}
selectedTokenAddress={outputCurrency}
errorMessage={outputError}
disableUnlock
/>
{ this.renderExchangeRate() }
{ this.renderSummary(inputError, outputError) }
<div className="swap__cta-container">
<button
className={classnames('swap__cta-btn', {
'swap--inactive': !this.props.isConnected,
})}
disabled={!isValid}
onClick={this.onSwap}
>
Swap
</button>
</div> </div>
</div> </div>
</div> </div>
......
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