Skip to content

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

remove animation

parent 43637b0f
Hide whitespace changes
Inline Side-by-side
Showing with 200 additions and 232 deletions
src/pages/App.scss
View file @ c98591eb
...@@ -29,23 +29,4 @@ ...@@ -29,23 +29,4 @@
@media only screen and (min-width : 768px) { @media only screen and (min-width : 768px) {
//max-width: 560px; //max-width: 560px;
} }
}
@keyframes title_fade_in {
from {
opacity: 0.5;
}
to {
opacity: 1;
}
}
.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 @ c98591eb
...@@ -512,67 +512,65 @@ class AddLiquidity extends Component { ...@@ -512,67 +512,65 @@ class AddLiquidity extends Component {
})} })}
/> />
<div className='ani_title_fade_in'> {
{ this.isNewExchange()
this.isNewExchange() ? (
? ( <div className="pool__new-exchange-warning">
<div className="pool__new-exchange-warning"> <div className="pool__new-exchange-warning-text">
<div className="pool__new-exchange-warning-text"> 🚰 You are the first person to add liquidity!
🚰 You are the first person to add liquidity!
</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 className="pool__new-exchange-warning-text">
: null {`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>
<ModeSelector title="Add Liquidity" /> </div>
<CurrencyInputPanel )
title="Deposit" : null
extraText={this.getBalance(inputCurrency)} }
onValueChange={this.onInputChange} <ModeSelector title="Add Liquidity" />
selectedTokenAddress="ETH" <CurrencyInputPanel
value={inputValue} title="Deposit"
errorMessage={inputError} extraText={this.getBalance(inputCurrency)}
disableTokenSelect onValueChange={this.onInputChange}
/> selectedTokenAddress="ETH"
<OversizedPanel> value={inputValue}
<div className="swap__down-arrow-background"> errorMessage={inputError}
<img className="swap__down-arrow" src={isValid ? PlusBlue : PlusGrey} /> disableTokenSelect
</div> />
</OversizedPanel> <OversizedPanel>
<CurrencyInputPanel <div className="swap__down-arrow-background">
title="Deposit" <img className="swap__down-arrow" src={isValid ? PlusBlue : PlusGrey} />
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/Pool/CreateExchange.js
View file @ c98591eb
...@@ -182,38 +182,36 @@ class CreateExchange extends Component { ...@@ -182,38 +182,36 @@ class CreateExchange extends Component {
})} })}
/> />
<div className='ani_title_fade_in'> <ModeSelector title="Create Exchange" />
<ModeSelector title="Create Exchange" /> <AddressInputPanel
<AddressInputPanel title="Token Address"
title="Token Address" value={tokenAddress}
value={tokenAddress} onChange={this.onChange}
onChange={this.onChange} errorMessage={errorMessage}
errorMessage={errorMessage} />
/> <OversizedPanel hideBottom>
<OversizedPanel hideBottom> <div className="pool__summary-panel">
<div className="pool__summary-panel"> <div className="pool__exchange-rate-wrapper">
<div className="pool__exchange-rate-wrapper"> <span className="pool__exchange-rate">Label</span>
<span className="pool__exchange-rate">Label</span> <span>{label || ' - '}</span>
<span>{label || ' - '}</span> </div>
</div> <div className="pool__exchange-rate-wrapper">
<div className="pool__exchange-rate-wrapper"> <span className="swap__exchange-rate">Decimals</span>
<span className="swap__exchange-rate">Decimals</span> <span>{decimals || ' - '}</span>
<span>{decimals || ' - '}</span>
</div>
</div> </div>
</OversizedPanel>
{ this.renderSummary() }
<div className="pool__cta-container">
<button
className={classnames('pool__cta-btn', {
'swap--inactive': !isConnected,
})}
disabled={!isValid}
onClick={this.onCreateExchange}
>
Create Exchange
</button>
</div> </div>
</OversizedPanel>
{ this.renderSummary() }
<div className="pool__cta-container">
<button
className={classnames('pool__cta-btn', {
'swap--inactive': !isConnected,
})}
disabled={!isValid}
onClick={this.onCreateExchange}
>
Create Exchange
</button>
</div> </div>
</div> </div>
); );
......
src/pages/Pool/RemoveLiquidity.js
View file @ c98591eb
...@@ -359,39 +359,35 @@ class RemoveLiquidity extends Component { ...@@ -359,39 +359,35 @@ class RemoveLiquidity extends Component {
'header--inactive': !isConnected, 'header--inactive': !isConnected,
})} })}
/> />
<ModeSelector title="Remove Liquidity" />
<div className='ani_title_fade_in'> <CurrencyInputPanel
title="Pool Tokens"
<ModeSelector title="Remove Liquidity" /> extraText={this.getBalance(tokenAddress)}
<CurrencyInputPanel onValueChange={this.onInputChange}
title="Pool Tokens" value={value}
extraText={this.getBalance(tokenAddress)} errorMessage={errorMessage}
onValueChange={this.onInputChange} selectedTokenAddress={tokenAddress}
value={value} onCurrencySelected={this.onTokenSelect}
errorMessage={errorMessage} filteredTokens={['ETH']}
selectedTokenAddress={tokenAddress} />
onCurrencySelected={this.onTokenSelect} <OversizedPanel>
filteredTokens={['ETH']} <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>
{ this.renderOutput() }
{ this.renderSummary(errorMessage) }
<div className="pool__cta-container">
<button
className={classnames('pool__cta-btn', {
'swap--inactive': !isConnected,
'pool__cta-btn--inactive': !isValid,
})}
disabled={!isValid}
onClick={this.onRemoveLiquidity}
>
Remove Liquidity
</button>
</div> </div>
</OversizedPanel>
{ this.renderOutput() }
{ this.renderSummary(errorMessage) }
<div className="pool__cta-container">
<button
className={classnames('pool__cta-btn', {
'swap--inactive': !isConnected,
'pool__cta-btn--inactive': !isValid,
})}
disabled={!isValid}
onClick={this.onRemoveLiquidity}
>
Remove Liquidity
</button>
</div> </div>
</div> </div>
]; ];
......
src/pages/Send/index.js
View file @ c98591eb
...@@ -733,59 +733,56 @@ class Send extends Component { ...@@ -733,59 +733,56 @@ class Send extends Component {
})} })}
/> />
<div className='ani_title_fade_in'> <CurrencyInputPanel
<CurrencyInputPanel title="Input"
title="Input" description={lastEditedField === OUTPUT ? estimatedText : ''}
description={lastEditedField === OUTPUT ? estimatedText : ''} extraText={this.renderBalance(inputCurrency, inputBalance, inputDecimals)}
extraText={this.renderBalance(inputCurrency, inputBalance, inputDecimals)} onCurrencySelected={inputCurrency => this.setState({ inputCurrency }, this.recalcForm)}
onCurrencySelected={inputCurrency => this.setState({ inputCurrency }, this.recalcForm)} onValueChange={this.updateInput}
onValueChange={this.updateInput} selectedTokens={[inputCurrency, outputCurrency]}
selectedTokens={[inputCurrency, outputCurrency]} selectedTokenAddress={inputCurrency}
selectedTokenAddress={inputCurrency} value={inputValue}
value={inputValue} errorMessage={inputError}
errorMessage={inputError} />
/> <OversizedPanel>
<OversizedPanel> <div className="swap__down-arrow-background">
<div className="swap__down-arrow-background"> <img onClick={this.flipInputOutput} className="swap__down-arrow swap__down-arrow--clickable" src={isValid ? ArrowDownBlue : ArrowDownGrey} />
<img onClick={this.flipInputOutput} className="swap__down-arrow swap__down-arrow--clickable" src={isValid ? ArrowDownBlue : ArrowDownGrey} /> </div>
</div> </OversizedPanel>
</OversizedPanel> <CurrencyInputPanel
<CurrencyInputPanel title="Output"
title="Output" description={lastEditedField === INPUT ? estimatedText : ''}
description={lastEditedField === INPUT ? estimatedText : ''} extraText={this.renderBalance(outputCurrency, outputBalance, outputDecimals)}
extraText={this.renderBalance(outputCurrency, outputBalance, outputDecimals)} onCurrencySelected={outputCurrency => this.setState({ outputCurrency }, this.recalcForm)}
onCurrencySelected={outputCurrency => this.setState({ outputCurrency }, this.recalcForm)} onValueChange={this.updateOutput}
onValueChange={this.updateOutput} selectedTokens={[inputCurrency, outputCurrency]}
selectedTokens={[inputCurrency, outputCurrency]} value={outputValue}
value={outputValue} selectedTokenAddress={outputCurrency}
selectedTokenAddress={outputCurrency} errorMessage={outputError}
errorMessage={outputError} disableUnlock
disableUnlock />
/> <OversizedPanel>
<OversizedPanel> <div className="swap__down-arrow-background">
<div className="swap__down-arrow-background"> <img className="swap__down-arrow" src={isValid ? ArrowDownBlue : ArrowDownGrey} />
<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 @ c98591eb
...@@ -714,48 +714,46 @@ class Swap extends Component { ...@@ -714,48 +714,46 @@ class Swap extends Component {
})} })}
/> />
<div className='ani_title_fade_in'> <CurrencyInputPanel
<CurrencyInputPanel title="Input"
title="Input" description={lastEditedField === OUTPUT ? estimatedText : ''}
description={lastEditedField === OUTPUT ? estimatedText : ''} extraText={this.renderBalance(inputCurrency, inputBalance, inputDecimals)}
extraText={this.renderBalance(inputCurrency, inputBalance, inputDecimals)} onCurrencySelected={inputCurrency => this.setState({ inputCurrency }, this.recalcForm)}
onCurrencySelected={inputCurrency => this.setState({ inputCurrency }, this.recalcForm)} onValueChange={this.updateInput}
onValueChange={this.updateInput} selectedTokens={[inputCurrency, outputCurrency]}
selectedTokens={[inputCurrency, outputCurrency]} selectedTokenAddress={inputCurrency}
selectedTokenAddress={inputCurrency} value={inputValue}
value={inputValue} errorMessage={inputError}
errorMessage={inputError} />
/> <OversizedPanel>
<OversizedPanel> <div className="swap__down-arrow-background">
<div className="swap__down-arrow-background"> <img onClick={this.flipInputOutput} className="swap__down-arrow swap__down-arrow--clickable" src={isValid ? ArrowDownBlue : ArrowDownGrey} />
<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