perf(swap): initialize swap inputs from url (#2402)

* fix(swap): use undefined as initial currencyId state

Null should be used for a selection state, not an unknown state. undefined may signify that a currency was passed in the URL but not yet parsed.

* perf(swap): initialize swap with url

Initializes SwapState with URL parameters so that currency input may be rendered on the first frame.

* test(swap): update hooks tests

* test: fix casing

* fix: check nullish to allow eg 0

src/components/CurrencyInputPanel/index.tsx

@@ -221,7 +221,7 @@ export default function CurrencyInputPanel({
       <Container hideInput={hideInput}>
         <InputRow style={hideInput ? { padding: '0', borderRadius: '8px' } : {}} selected={!onCurrencySelect}>
           <CurrencySelect
-            visible={currency !== null}
+            visible={currency !== undefined}
             selected={!!currency}
             hideInput={hideInput}
             className="open-currency-select-button"

src/hooks/Tokens.ts

 import { parseBytes32String } from '@ethersproject/strings'
 import { Currency, Token } from '@uniswap/sdk-core'
+import { SupportedChainId } from 'constants/chains'
 import { arrayify } from 'ethers/lib/utils'
 import { useMemo } from 'react'
 
@@ -181,8 +182,16 @@ export function useCurrency(currencyId: string | null | undefined): Currency | n
   const { chainId } = useActiveWeb3React()
   const isETH = currencyId?.toUpperCase() === 'ETH'
   const token = useToken(isETH ? undefined : currencyId)
-  const extendedEther = useMemo(() => (chainId ? ExtendedEther.onChain(chainId) : undefined), [chainId])
+  const extendedEther = useMemo(
+    () =>
+      chainId
+        ? ExtendedEther.onChain(chainId)
+        : // display mainnet when not connected
+          ExtendedEther.onChain(SupportedChainId.MAINNET),
+    [chainId]
+  )
   const weth = chainId ? WETH9_EXTENDED[chainId] : undefined
-  if (weth?.address?.toLowerCase() === currencyId?.toLowerCase()) return weth
+  if (currencyId === null || currencyId === undefined) return currencyId
+  if (weth?.address?.toUpperCase() === currencyId?.toUpperCase()) return weth
   return isETH ? extendedEther : token
 }

src/state/swap/hooks.test.ts

@@ -9,7 +9,7 @@ describe('hooks', () => {
       expect(
         queryParametersToSwapState(
           parse(
-            '?inputCurrency=ETH&outputCurrency=0x6b175474e89094c44da98b954eedeac495271d0f&exactAmount=20.5&exactField=outPUT',
+            '?inputCurrency=ETH&outputCurrency=0x6b175474e89094c44da98b954eedeac495271d0f&exactAmount=20.5&exactField=output',
             { parseArrays: false, ignoreQueryPrefix: true }
           )
         )
@@ -27,7 +27,7 @@ describe('hooks', () => {
         queryParametersToSwapState(parse('?outputCurrency=invalid', { parseArrays: false, ignoreQueryPrefix: true }))
       ).toEqual({
         [Field.INPUT]: { currencyId: 'ETH' },
-        [Field.OUTPUT]: { currencyId: '' },
+        [Field.OUTPUT]: { currencyId: null },
         typedValue: '',
         independentField: Field.INPUT,
         recipient: null,
@@ -41,7 +41,7 @@ describe('hooks', () => {
         )
       ).toEqual({
         [Field.OUTPUT]: { currencyId: 'ETH' },
-        [Field.INPUT]: { currencyId: '' },
+        [Field.INPUT]: { currencyId: null },
         typedValue: '20.5',
         independentField: Field.INPUT,
         recipient: null,
@@ -55,7 +55,7 @@ describe('hooks', () => {
         )
       ).toEqual({
         [Field.OUTPUT]: { currencyId: 'ETH' },
-        [Field.INPUT]: { currencyId: '' },
+        [Field.INPUT]: { currencyId: null },
         typedValue: '20.5',
         independentField: Field.INPUT,
         recipient: null,
@@ -72,7 +72,7 @@ describe('hooks', () => {
         )
       ).toEqual({
         [Field.OUTPUT]: { currencyId: 'ETH' },
-        [Field.INPUT]: { currencyId: '' },
+        [Field.INPUT]: { currencyId: null },
         typedValue: '20.5',
         independentField: Field.INPUT,
         recipient: '0x0fF2D1eFd7A57B7562b2bf27F3f37899dB27F4a5',
@@ -88,7 +88,7 @@ describe('hooks', () => {
         )
       ).toEqual({
         [Field.OUTPUT]: { currencyId: 'ETH' },
-        [Field.INPUT]: { currencyId: '' },
+        [Field.INPUT]: { currencyId: null },
         typedValue: '20.5',
         independentField: Field.INPUT,
         recipient: 'bob.argent.xyz',

src/state/swap/hooks.ts

@@ -281,10 +281,10 @@ export function queryParametersToSwapState(parsedQs: ParsedQs): SwapState {
 
   return {
     [Field.INPUT]: {
-      currencyId: inputCurrency,
+      currencyId: inputCurrency === '' ? null : inputCurrency ?? null,
     },
     [Field.OUTPUT]: {
-      currencyId: outputCurrency,
+      currencyId: outputCurrency === '' ? null : outputCurrency ?? null,
     },
     typedValue: parseTokenAmountURLParameter(parsedQs.exactAmount),
     independentField: parseIndependentFieldURLParameter(parsedQs.exactField),

src/state/swap/reducer.ts

 import { createReducer } from '@reduxjs/toolkit'
+import { parsedQueryString } from 'hooks/useParsedQueryString'
 
 import { Field, replaceSwapState, selectCurrency, setRecipient, switchCurrencies, typeInput } from './actions'
+import { queryParametersToSwapState } from './hooks'
 
 export interface SwapState {
   readonly independentField: Field
@@ -15,17 +17,7 @@ export interface SwapState {
   readonly recipient: string | null
 }
 
-const initialState: SwapState = {
-  independentField: Field.INPUT,
-  typedValue: '',
-  [Field.INPUT]: {
-    currencyId: null,
-  },
-  [Field.OUTPUT]: {
-    currencyId: null,
-  },
-  recipient: null,
-}
+const initialState: SwapState = queryParametersToSwapState(parsedQueryString())
 
 export default createReducer<SwapState>(initialState, (builder) =>
   builder
@@ -34,10 +26,10 @@ export default createReducer<SwapState>(initialState, (builder) =>
       (state, { payload: { typedValue, recipient, field, inputCurrencyId, outputCurrencyId } }) => {
         return {
           [Field.INPUT]: {
-            currencyId: inputCurrencyId,
+            currencyId: inputCurrencyId ?? null,
           },
           [Field.OUTPUT]: {
-            currencyId: outputCurrencyId,
+            currencyId: outputCurrencyId ?? null,
           },
           independentField: field,
           typedValue,