fix(send page): support swap + send query parameters on send page (#921)

* support swap + send query parameters on send page

* revert the unfinished portis logic
Co-authored-by: ianlapham <ianlapham@gmail.com>

src/pages/Send/index.tsx

@@ -43,7 +43,8 @@ import { useUserSlippageTolerance, useUserDeadline, useExpertModeManager } from
 import { ClickableText } from '../Pool/styleds'
 
 export default function Send() {
-  useDefaultsFromURLSearch()
+  // override auto ETH populate to allow for single inputs or swap and send
+  useDefaultsFromURLSearch(true)
 
   // text translation
   // const { t } = useTranslation()
@@ -64,7 +65,19 @@ export default function Send() {
   const [recipientError, setRecipientError] = useState<string | null>('Enter a Recipient')
 
   // trade details, check query params for initial state
-  const { independentField, typedValue } = useSwapState()
+  const {
+    independentField,
+    typedValue,
+    [Field.OUTPUT]: { address: output }
+  } = useSwapState()
+
+  // if output is valid set to sending view (will reset to undefined on remove swap)
+  useEffect(() => {
+    if (output) {
+      setSendingWithSwap(true)
+    }
+  }, [output])
+
   const {
     parsedAmount,
     bestTrade: bestTradeV2,
@@ -134,13 +147,6 @@ export default function Send() {
 
   const { onSwitchTokens, onTokenSelection, onUserInput } = useSwapActionHandlers()
 
-  // reset field if sending with with swap is cancled
-  useEffect(() => {
-    if (!sendingWithSwap) {
-      onTokenSelection(Field.OUTPUT, null)
-    }
-  }, [onTokenSelection, sendingWithSwap])
-
   const maxAmountInput: TokenAmount =
     !!tokenBalances[Field.INPUT] &&
     !!tokens[Field.INPUT] &&
@@ -419,7 +425,10 @@ export default function Send() {
                         <ArrowDown size="16" color={theme.text2} onClick={onSwitchTokens} />
                       </ArrowWrapper>
                       <ButtonSecondary
-                        onClick={() => setSendingWithSwap(false)}
+                        onClick={() => {
+                          setSendingWithSwap(false)
+                          onTokenSelection(Field.OUTPUT, null)
+                        }}
                         style={{ marginRight: '0px', width: 'auto', fontSize: '14px' }}
                         padding={'4px 6px'}
                       >

src/state/swap/hooks.ts

@@ -172,15 +172,14 @@ export function useDerivedSwapInfo(): {
   }
 }
 
-function parseCurrencyFromURLParameter(urlParam: any, chainId: number): string {
+function parseCurrencyFromURLParameter(urlParam: any, chainId: number, overrideWETH: boolean): string {
   if (typeof urlParam === 'string') {
     const valid = isAddress(urlParam)
     if (valid) return valid
     if (urlParam.toLowerCase() === 'eth') return WETH[chainId as ChainId]?.address ?? ''
     if (valid === false) return WETH[chainId as ChainId]?.address ?? ''
   }
-
-  return WETH[chainId as ChainId]?.address
+  return overrideWETH ? '' : WETH[chainId as ChainId]?.address ?? ''
 }
 
 function parseTokenAmountURLParameter(urlParam: any): string {
@@ -191,9 +190,9 @@ function parseIndependentFieldURLParameter(urlParam: any): Field {
   return typeof urlParam === 'string' && urlParam.toLowerCase() === 'output' ? Field.OUTPUT : Field.INPUT
 }
 
-export function queryParametersToSwapState(parsedQs: ParsedQs, chainId: ChainId): SwapState {
-  let inputCurrency = parseCurrencyFromURLParameter(parsedQs.inputCurrency, chainId)
-  let outputCurrency = parseCurrencyFromURLParameter(parsedQs.outputCurrency, chainId)
+export function queryParametersToSwapState(parsedQs: ParsedQs, chainId: ChainId, overrideETH: boolean): SwapState {
+  let inputCurrency = parseCurrencyFromURLParameter(parsedQs.inputCurrency, chainId, overrideETH)
+  let outputCurrency = parseCurrencyFromURLParameter(parsedQs.outputCurrency, chainId, overrideETH)
   if (inputCurrency === outputCurrency) {
     if (typeof parsedQs.outputCurrency === 'string') {
       inputCurrency = ''
@@ -215,14 +214,16 @@ export function queryParametersToSwapState(parsedQs: ParsedQs, chainId: ChainId)
 }
 
 // updates the swap state to use the defaults for a given network
-export function useDefaultsFromURLSearch() {
+// set overrideETH to true if dont want to autopopulate ETH
+export function useDefaultsFromURLSearch(overrideWETH = false) {
   const { chainId } = useActiveWeb3React()
   const dispatch = useDispatch<AppDispatch>()
   const parsedQs = useParsedQueryString()
 
   useEffect(() => {
     if (!chainId) return
-    const parsed = queryParametersToSwapState(parsedQs, chainId)
+    const parsed = queryParametersToSwapState(parsedQs, chainId, overrideWETH)
+
     dispatch(
       replaceSwapState({
         typedValue: parsed.typedValue,