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 @@
@media only screen and (min-width : 768px) {
//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 {
})}
/>
<div className='ani_title_fade_in'>
{
this.isNewExchange()
? (
<div className="pool__new-exchange-warning">
<div className="pool__new-exchange-warning-text">
🚰 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>
{
this.isNewExchange()
? (
<div className="pool__new-exchange-warning">
<div className="pool__new-exchange-warning-text">
🚰 You are the first person to add liquidity!
</div>
)
: null
}
<ModeSelector title="Add Liquidity" />
<CurrencyInputPanel
title="Deposit"
extraText={this.getBalance(inputCurrency)}
onValueChange={this.onInputChange}
selectedTokenAddress="ETH"
value={inputValue}
errorMessage={inputError}
disableTokenSelect
/>
<OversizedPanel>
<div className="swap__down-arrow-background">
<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 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>
)
: null
}
<ModeSelector title="Add Liquidity" />
<CurrencyInputPanel
title="Deposit"
extraText={this.getBalance(inputCurrency)}
onValueChange={this.onInputChange}
selectedTokenAddress="ETH"
value={inputValue}
errorMessage={inputError}
disableTokenSelect
/>
<OversizedPanel>
<div className="swap__down-arrow-background">
<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>
];
......
src/pages/Pool/CreateExchange.js
View file @ c98591eb
......@@ -182,38 +182,36 @@ class CreateExchange extends Component {
})}
/>
<div className='ani_title_fade_in'>
<ModeSelector title="Create Exchange" />
<AddressInputPanel
title="Token Address"
value={tokenAddress}
onChange={this.onChange}
errorMessage={errorMessage}
/>
<OversizedPanel hideBottom>
<div className="pool__summary-panel">
<div className="pool__exchange-rate-wrapper">
<span className="pool__exchange-rate">Label</span>
<span>{label || ' - '}</span>
</div>
<div className="pool__exchange-rate-wrapper">
<span className="swap__exchange-rate">Decimals</span>
<span>{decimals || ' - '}</span>
</div>
<ModeSelector title="Create Exchange" />
<AddressInputPanel
title="Token Address"
value={tokenAddress}
onChange={this.onChange}
errorMessage={errorMessage}
/>
<OversizedPanel hideBottom>
<div className="pool__summary-panel">
<div className="pool__exchange-rate-wrapper">
<span className="pool__exchange-rate">Label</span>
<span>{label || ' - '}</span>
</div>
<div className="pool__exchange-rate-wrapper">
<span className="swap__exchange-rate">Decimals</span>
<span>{decimals || ' - '}</span>
</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>
</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>
);
......
src/pages/Pool/RemoveLiquidity.js
View file @ c98591eb
......@@ -359,39 +359,35 @@ class RemoveLiquidity extends Component {
'header--inactive': !isConnected,
})}
/>
<div className='ani_title_fade_in'>
<ModeSelector title="Remove Liquidity" />
<CurrencyInputPanel
title="Pool Tokens"
extraText={this.getBalance(tokenAddress)}
onValueChange={this.onInputChange}
value={value}
errorMessage={errorMessage}
selectedTokenAddress={tokenAddress}
onCurrencySelected={this.onTokenSelect}
filteredTokens={['ETH']}
/>
<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>
<ModeSelector title="Remove Liquidity" />
<CurrencyInputPanel
title="Pool Tokens"
extraText={this.getBalance(tokenAddress)}
onValueChange={this.onInputChange}
value={value}
errorMessage={errorMessage}
selectedTokenAddress={tokenAddress}
onCurrencySelected={this.onTokenSelect}
filteredTokens={['ETH']}
/>
<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>
];
......
src/pages/Send/index.js
View file @ c98591eb
......@@ -733,59 +733,56 @@ class Send extends Component {
})}
/>
<div className='ani_title_fade_in'>
<CurrencyInputPanel
title="Input"
description={lastEditedField === OUTPUT ? estimatedText : ''}
extraText={this.renderBalance(inputCurrency, inputBalance, inputDecimals)}
onCurrencySelected={inputCurrency => this.setState({ inputCurrency }, this.recalcForm)}
onValueChange={this.updateInput}
selectedTokens={[inputCurrency, outputCurrency]}
selectedTokenAddress={inputCurrency}
value={inputValue}
errorMessage={inputError}
/>
<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
/>
<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>
<CurrencyInputPanel
title="Input"
description={lastEditedField === OUTPUT ? estimatedText : ''}
extraText={this.renderBalance(inputCurrency, inputBalance, inputDecimals)}
onCurrencySelected={inputCurrency => this.setState({ inputCurrency }, this.recalcForm)}
onValueChange={this.updateInput}
selectedTokens={[inputCurrency, outputCurrency]}
selectedTokenAddress={inputCurrency}
value={inputValue}
errorMessage={inputError}
/>
<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
/>
<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>
</div>
);
......
src/pages/Swap/index.js
View file @ c98591eb
......@@ -714,48 +714,46 @@ class Swap extends Component {
})}
/>
<div className='ani_title_fade_in'>
<CurrencyInputPanel
title="Input"
description={lastEditedField === OUTPUT ? estimatedText : ''}
extraText={this.renderBalance(inputCurrency, inputBalance, inputDecimals)}
onCurrencySelected={inputCurrency => this.setState({ inputCurrency }, this.recalcForm)}
onValueChange={this.updateInput}
selectedTokens={[inputCurrency, outputCurrency]}
selectedTokenAddress={inputCurrency}
value={inputValue}
errorMessage={inputError}
/>
<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>
<CurrencyInputPanel
title="Input"
description={lastEditedField === OUTPUT ? estimatedText : ''}
extraText={this.renderBalance(inputCurrency, inputBalance, inputDecimals)}
onCurrencySelected={inputCurrency => this.setState({ inputCurrency }, this.recalcForm)}
onValueChange={this.updateInput}
selectedTokens={[inputCurrency, outputCurrency]}
selectedTokenAddress={inputCurrency}
value={inputValue}
errorMessage={inputError}
/>
<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>
</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