improvement(swap): show add a send only for expert mode

src/components/CurrencyInputPanel/index.tsx

@@ -7,7 +7,7 @@ import CurrencySearchModal from '../SearchModal/CurrencySearchModal'
 import CurrencyLogo from '../CurrencyLogo'
 import DoubleCurrencyLogo from '../DoubleLogo'
 import { RowBetween } from '../Row'
-import { TYPE, CursorPointer } from '../../theme'
+import { TYPE } from '../../theme'
 import { Input as NumericalInput } from '../NumericalInput'
 import { ReactComponent as DropDown } from '../../assets/images/dropdown.svg'
 
@@ -170,19 +170,17 @@ export default function CurrencyInputPanel({
                 {label}
               </TYPE.body>
               {account && (
-                <CursorPointer>
                 <TYPE.body
                   onClick={onMax}
                   color={theme.text2}
                   fontWeight={500}
                   fontSize={14}
-                    style={{ display: 'inline' }}
+                  style={{ display: 'inline', cursor: 'pointer' }}
                 >
                   {!hideBalance && !!currency && selectedCurrencyBalance
                     ? 'Balance: ' + selectedCurrencyBalance?.toSignificant(6)
                     : ' -'}
                 </TYPE.body>
-                </CursorPointer>
               )}
             </RowBetween>
           </LabelRow>

src/pages/Swap/index.tsx

@@ -41,7 +41,7 @@ import {
   useUserDeadline,
   useUserSlippageTolerance
 } from '../../state/user/hooks'
-import { CursorPointer, LinkStyledButton, TYPE } from '../../theme'
+import { LinkStyledButton, TYPE } from '../../theme'
 import { maxAmountSpend } from '../../utils/maxAmountSpend'
 import { computeTradePriceBreakdown, warningSeverity } from '../../utils/prices'
 import AppBody from '../AppBody'
@@ -285,7 +285,6 @@ export default function Swap() {
               id="swap-currency-input"
             />
 
-            <CursorPointer>
             <AutoColumn justify="space-between">
               <AutoRow justify="space-between" style={{ padding: '0 1rem' }}>
                 <ArrowWrapper clickable>
@@ -298,14 +297,13 @@ export default function Swap() {
                     color={currencies[Field.INPUT] && currencies[Field.OUTPUT] ? theme.primary1 : theme.text2}
                   />
                 </ArrowWrapper>
-                  {recipient === null && !showWrap ? (
+                {recipient === null && !showWrap && isExpertMode ? (
                   <LinkStyledButton id="add-recipient-button" onClick={() => onChangeRecipient('')}>
                     + Add a send (optional)
                   </LinkStyledButton>
                 ) : null}
               </AutoRow>
             </AutoColumn>
-            </CursorPointer>
             <CurrencyInputPanel
               value={formattedAmounts[Field.OUTPUT]}
               onUserInput={handleTypeOutput}

src/theme/components.tsx

@@ -148,12 +148,6 @@ export const Spinner = styled.img`
   height: 16px;
 `
 
-export const CursorPointer = styled.div`
-  :hover {
-    cursor: pointer;
-  }
-`
-
 const BackArrowLink = styled(StyledInternalLink)`
   color: ${({ theme }) => theme.text1};
 `