added ani

src/pages/App.js

 import React, { Component } from 'react';
 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 { AnimatedSwitch } from 'react-router-transition';
+//import { AnimatedSwitch } from 'react-router-transition';
 import { Web3Connect, startWatching, initialize } from '../ducks/web3connect';
 import { setAddresses } from '../ducks/addresses';
 import Header from '../components/Header';
@@ -45,19 +45,16 @@ class App extends Component {
         </MediaQuery>
         <Web3Connect />
         <BrowserRouter>
-          <AnimatedSwitch
-            atEnter={{ opacity: 0 }}
-            atLeave={{ opacity: 0 }}
-            atActive={{ opacity: 1 }}
-            className="app__switch-wrapper"
-          >
-            <Route exact path="/swap" component={Swap} />
-            <Route exact path="/send" component={Send} />
-            <Route exact path="/add-liquidity" component={Pool} />
-            <Route exact path="/remove-liquidity" component={Pool} />
-            <Route exact path="/create-exchange/:tokenAddress?" component={Pool} />
-            <Redirect exact from="/" to="/swap" />
-          </AnimatedSwitch>
+          <Switch>
+            <div className="app__switch-wrapper">
+              <Route exact path="/swap" component={Swap} />
+              <Route exact path="/send" component={Send} />
+              <Route exact path="/add-liquidity" component={Pool} />
+              <Route exact path="/remove-liquidity" component={Pool} />
+              <Route exact path="/create-exchange/:tokenAddress?" component={Pool} />
+              <Redirect exact from="/" to="/swap" />
+            </div>
+          </Switch>
         </BrowserRouter>
       </div>
     );

src/pages/App.scss

@@ -30,3 +30,24 @@
     //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

@@ -511,65 +511,68 @@ class AddLiquidity extends Component {
             'header--inactive': !isConnected,
           })}
         />
-        {
-          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 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>
                 </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} />
+              )
+              : 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>
-        </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/Send/index.js

@@ -718,7 +718,7 @@ class Send extends Component {
     const { inputError, outputError, isValid } = this.validate();
 
     return (
-      <div className="send">
+      <div className="send ">
         <MediaQuery query="(max-width: 767px)">
           <Header />
         </MediaQuery>
@@ -732,56 +732,60 @@ class Send extends Component {
               'header--inactive': !this.props.isConnected,
             })}
           />
-          <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 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>
             </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

@@ -698,7 +698,6 @@ class Swap extends Component {
     const { inputError, outputError, isValid } = this.validate();
 
 
-
     return (
       <div className="swap">
         <MediaQuery query="(max-width: 767px)">
@@ -714,46 +713,49 @@ class Swap extends Component {
               'header--inactive': !this.props.isConnected,
             })}
           />
-          <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 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>
             </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>