setup initital component merging

src/components/ExchangePage/ExchangePage.jsx

+import React from 'react'
+
+export default function ExchangePage({ sending }) {
+
+  
+}
\ No newline at end of file

src/components/TransactionDetails/index.js

@@ -389,7 +389,6 @@ export default function TransactionDetails(props) {
         setWarningType('riskyEntryLow')
       }
       if (input >= 5) {
-        console.log('doing it')
         props.setcustomSlippageError('warning')
         setWarningType('riskyEntryHigh')
       }

src/pages/App.js

@@ -46,7 +46,7 @@ export default function App() {
                 {/* this Suspense is for route code-splitting */}
                 <Suspense fallback={null}>
                   <Switch>
-                    <Route exact strict path="/swap" component={Swap} />
+                    <Route exact strict path="/swap" component={() => <Swap sending={true} />} />
                     <Route
                       exact
                       strict

src/pages/Swap/index.js

@@ -8,6 +8,7 @@ import styled from 'styled-components'
 import { Button } from '../../theme'
 import CurrencyInputPanel from '../../components/CurrencyInputPanel'
 import NewContextualInfo from '../../components/ContextualInfoNew'
+import AddressInputPanel from '../../components/AddressInputPanel'
 import OversizedPanel from '../../components/OversizedPanel'
 import TransactionDetails from '../../components/TransactionDetails'
 import ArrowDownBlue from '../../assets/images/arrow-down-blue.svg'
@@ -239,7 +240,7 @@ function getMarketRate(
   }
 }
 
-export default function Swap({ initialCurrency }) {
+export default function Swap({ initialCurrency, sending }) {
   const { t } = useTranslation()
   const { account } = useWeb3Context()
 
@@ -260,6 +261,9 @@ export default function Swap({ initialCurrency }) {
   const [swapState, dispatchSwapState] = useReducer(swapStateReducer, initialCurrency, getInitialSwapState)
   const { independentValue, dependentValue, independentField, inputCurrency, outputCurrency } = swapState
 
+  const [recipient, setRecipient] = useState({ address: '', name: '' })
+  const [recipientError, setRecipientError] = useState()
+
   // get swap type from the currency types
   const swapType = getSwapType(inputCurrency, outputCurrency)
 
@@ -498,7 +502,9 @@ export default function Swap({ initialCurrency }) {
     percentSlippage.lt(ethers.utils.parseEther('.2')) // [5% - 20%)
   const highSlippageWarning = percentSlippage && percentSlippage.gte(ethers.utils.parseEther('.2')) // [20+%
 
-  const isValid = exchangeRate && inputError === null && independentError === null
+  const isValid = sending
+    ? exchangeRate && inputError === null && independentError === null && recipientError === null
+    : exchangeRate && inputError === null && independentError === null
 
   const estimatedText = `(${t('estimated')})`
   function formatBalance(value) {
@@ -620,6 +626,18 @@ export default function Swap({ initialCurrency }) {
         errorMessage={independentField === OUTPUT ? independentError : ''}
         disableUnlock
       />
+      {sending ? (
+        <>
+          <OversizedPanel>
+            <DownArrowBackground>
+              <DownArrow src={isValid ? ArrowDownBlue : ArrowDownGrey} alt="arrow" />
+            </DownArrowBackground>
+          </OversizedPanel>
+          <AddressInputPanel onChange={setRecipient} onError={setRecipientError} />
+        </>
+      ) : (
+        ''
+      )}
       <OversizedPanel hideBottom>
         <ExchangeRateWrapper
           onClick={() => {