From 0d4108937f9ec94f0559dbfbc97c5609c6271034 Mon Sep 17 00:00:00 2001
From: Ian Lapham <ianlapham@gmail.com>
Date: Tue, 12 May 2020 11:48:42 -0400
Subject: [PATCH] Ui changes (#747)

* copy changes

* remove unused input on toggle

* comparison fix
---
 src/components/AddressInputPanel/index.tsx  | 19 ++++++------
 src/components/CreatePool/index.tsx         |  2 +-
 src/components/CurrencyInputPanel/index.tsx |  1 -
 src/components/ExchangePage/index.tsx       | 32 ++++++++++++++-------
 4 files changed, 32 insertions(+), 22 deletions(-)

diff --git a/src/components/AddressInputPanel/index.tsx b/src/components/AddressInputPanel/index.tsx
index 702176cc99..66171c6b7a 100644
--- a/src/components/AddressInputPanel/index.tsx
+++ b/src/components/AddressInputPanel/index.tsx
@@ -190,16 +190,15 @@ export default function AddressInputPanel({
               <TYPE.black color={theme.text2} fontWeight={500} fontSize={14}>
                 Recipient
               </TYPE.black>
-
-              {data.name ? (
-                <Link href={getEtherscanLink(chainId, data.name, 'address')} style={{ fontSize: '14px' }}>
-                  (View on Etherscan)
-                </Link>
-              ) : (
-                <Link href={getEtherscanLink(chainId, data.address, 'address')} style={{ fontSize: '14px' }}>
-                  (View on Etherscan)
-                </Link>
-              )}
+              {data.name ||
+                (data.address && (
+                  <Link
+                    href={getEtherscanLink(chainId, data.name || data.address, 'address')}
+                    style={{ fontSize: '14px' }}
+                  >
+                    (View on Etherscan)
+                  </Link>
+                ))}
             </RowBetween>
             <Input
               type="text"
diff --git a/src/components/CreatePool/index.tsx b/src/components/CreatePool/index.tsx
index 92d4391384..5647eca893 100644
--- a/src/components/CreatePool/index.tsx
+++ b/src/components/CreatePool/index.tsx
@@ -130,7 +130,7 @@ function CreatePool({ history }) {
             setShowSearch(false)
           }}
           hiddenToken={activeField === Fields.TOKEN0 ? token1Address : token0Address}
-          showCommonBases={true}
+          showCommonBases={activeField === Fields.TOKEN0}
         />
       </AutoColumn>
     )
diff --git a/src/components/CurrencyInputPanel/index.tsx b/src/components/CurrencyInputPanel/index.tsx
index 4aec78fc15..2bdf9d9075 100644
--- a/src/components/CurrencyInputPanel/index.tsx
+++ b/src/components/CurrencyInputPanel/index.tsx
@@ -175,7 +175,6 @@ export default function CurrencyInputPanel({
               <TYPE.body color={theme.text2} fontWeight={500} fontSize={14}>
                 {label}
               </TYPE.body>
-
               {account && (
                 <Hover>
                   <TYPE.body
diff --git a/src/components/ExchangePage/index.tsx b/src/components/ExchangePage/index.tsx
index c1ecd14b66..c02c9d64db 100644
--- a/src/components/ExchangePage/index.tsx
+++ b/src/components/ExchangePage/index.tsx
@@ -22,6 +22,7 @@ import { useAllTokens, useToken } from '../../contexts/Tokens'
 import { usePendingApproval, useTransactionAdder } from '../../contexts/Transactions'
 import { useTokenContract, useWeb3React } from '../../hooks'
 import { useTradeExactIn, useTradeExactOut } from '../../hooks/Trades'
+import { useWalletModalToggle } from '../../state/application/hooks'
 import { Hover, TYPE } from '../../theme'
 import { Link } from '../../theme/components'
 import {
@@ -88,6 +89,9 @@ function ExchangePage({ sendingInput = false, history, params }: ExchangePagePro
   // adding notifications on txns
   const addTransaction = useTransactionAdder()
 
+  // toggle wallet when disconnected
+  const toggleWalletModal = useWalletModalToggle()
+
   // sending state
   const [sending] = useState<boolean>(sendingInput)
   const [sendingWithSwap, setSendingWithSwap] = useState<boolean>(false)
@@ -835,7 +839,7 @@ function ExchangePage({ sendingInput = false, history, params }: ExchangePagePro
             <RowBetween>
               <RowFixed>
                 <TYPE.black color={theme.text2} fontSize={14} fontWeight={400}>
-                  Price impact
+                  Price Impact
                 </TYPE.black>
                 <QuestionHelper text="The difference between the market price and your price due to trade size." />
               </RowFixed>
@@ -1021,7 +1025,7 @@ function ExchangePage({ sendingInput = false, history, params }: ExchangePagePro
           <>
             <CurrencyInputPanel
               field={Field.INPUT}
-              label={'From'}
+              label={independentField === Field.OUTPUT && parsedAmounts[Field.INPUT] ? 'From (estimated)' : 'From'}
               value={formattedAmounts[Field.INPUT]}
               atMax={atMaxAmountInput}
               token={tokens[Field.INPUT]}
@@ -1071,7 +1075,7 @@ function ExchangePage({ sendingInput = false, history, params }: ExchangePagePro
               onMax={() => {
                 maxAmountOutput && onMaxOutput(maxAmountOutput.toExact())
               }}
-              label={'To'}
+              label={independentField === Field.INPUT && parsedAmounts[Field.OUTPUT] ? 'To (estimated)' : 'To'}
               atMax={atMaxAmountOutput}
               token={tokens[Field.OUTPUT]}
               onTokenSelection={address => onTokenSelection(Field.OUTPUT, address)}
@@ -1160,16 +1164,24 @@ function ExchangePage({ sendingInput = false, history, params }: ExchangePagePro
         )}
       </AutoColumn>
       <BottomGrouping>
-        {noRoute && userHasSpecifiedInputOutput ? (
+        {!account ? (
+          <ButtonLight
+            onClick={() => {
+              toggleWalletModal()
+            }}
+          >
+            Connect Wallet
+          </ButtonLight>
+        ) : noRoute && userHasSpecifiedInputOutput ? (
           <GreyCard style={{ textAlign: 'center' }}>
-            <TYPE.main>No path found.</TYPE.main>
-
+            <TYPE.main mb="4px">Insufficient liquidity for this trade.</TYPE.main>
             <Link
               onClick={() => {
                 history.push('/add/' + tokens[Field.INPUT]?.address + '-' + tokens[Field.OUTPUT]?.address)
               }}
             >
-              Create one now
+              {' '}
+              Add liquidity now.
             </Link>
           </GreyCard>
         ) : !userHasApprovedRouter && !inputError ? (
@@ -1298,7 +1310,7 @@ function ExchangePage({ sendingInput = false, history, params }: ExchangePagePro
               <SectionBreak />
               <RowFixed padding={'0 20px'}>
                 <TYPE.black fontWeight={400} fontSize={14} color={theme.text2}>
-                  Set front running resistance
+                  Set slippage tolerance
                 </TYPE.black>
                 <QuestionHelper text="Your transaction will revert if the price changes more than this amount after you submit your trade." />
               </RowFixed>
@@ -1326,8 +1338,8 @@ function ExchangePage({ sendingInput = false, history, params }: ExchangePagePro
                       </RowFixed>
                     </RowBetween>
                     <Text lineHeight="145.23%;" fontSize={16} fontWeight={400} color={theme.text1}>
-                      This trade will move the price by {slippageFromTrade?.toFixed(2)}%. This pool probably doesn’t
-                      have enough liquidity to support this trade.
+                      This trade will move the price by ~{priceSlippage.toFixed(2)}%. This pool probably doesn’t have
+                      enough liquidity to support this trade.
                     </Text>
                   </AutoColumn>
                 </YellowCard>