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>

.github/workflows/release.yaml

@@ -7,7 +7,7 @@ on:
   # releases are triggered on changes to this file
   push:
     branches:
-      - v2
+      - master
     paths:
       - '.github/workflows/release.yaml'
       - '.env.production'

.github/workflows/tests.yaml

@@ -2,10 +2,10 @@ name: Tests
 on:
   push:
     branches:
-      - v2
+      - master
   pull_request:
     branches:
-      - v2
+      - master
 jobs:
   integration-tests:
     name: Integration tests

README.md

@@ -1,4 +1,4 @@
-# Uniswap Frontend
+# Uniswap Interface
 
 [![Tests](https://github.com/Uniswap/uniswap-interface/workflows/Tests/badge.svg)](https://github.com/Uniswap/uniswap-interface/actions?query=workflow%3ATests)
 [![Styled With Prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://prettier.io/)
@@ -6,6 +6,7 @@
 An open source interface for Uniswap -- a protocol for decentralized exchange of Ethereum tokens.
 
 - Website: [uniswap.org](https://uniswap.org/)
+- Interface: [app.uniswap.org](https://app.uniswap.org)
 - Docs: [uniswap.org/docs/](https://uniswap.org/docs/)
 - Twitter: [@UniswapProtocol](https://twitter.com/UniswapProtocol)
 - Reddit: [/r/Uniswap](https://www.reddit.com/r/Uniswap/)
@@ -13,11 +14,11 @@ An open source interface for Uniswap -- a protocol for decentralized exchange of
 - Discord: [Uniswap](https://discord.gg/Y7TF6QA)
 - Whitepaper: [Link](https://hackmd.io/C-DvwDSfSxuh-Gd4WKE_ig)
 
-## Accessing the frontend
+## Accessing the Uniswap Interface
 
-To access the front end, use an IPFS gateway link from the
-[latest release](https://github.com/Uniswap/uniswap-interface/releases/latest)
-or visit [uniswap.exchange](https://uniswap.exchange).
+To access the Uniswap Interface, use an IPFS gateway link from the
+[latest release](https://github.com/Uniswap/uniswap-interface/releases/latest), 
+or visit [app.uniswap.org](https://app.uniswap.org).
 
 ## Development
 
@@ -27,31 +28,32 @@ or visit [uniswap.exchange](https://uniswap.exchange).
 yarn
 ```
 
-### Configure Environment (optional)
-
-Copy `.env` to `.env.local` and change the appropriate variables.
-
 ### Run
 
 ```bash
 yarn start
 ```
 
-To have the frontend default to a different network, make a copy of `.env` named `.env.local`, 
-change `REACT_APP_NETWORK_ID` to `"{yourNetworkId}"`, and change `REACT_APP_NETWORK_URL` to e.g. 
-`"https://{yourNetwork}.infura.io/v3/{yourKey}"`. 
+### Configuring the environment (optional)
 
-Note that the front end only works properly on testnets where both 
+To have the interface default to a different network when a wallet is not connected:
+
+1. Make a copy of `.env` named `.env.local`
+2. Change `REACT_APP_NETWORK_ID` to `"{YOUR_NETWORK_ID}"`
+3. Change `REACT_APP_NETWORK_URL` to e.g. `"https://{YOUR_NETWORK_ID}.infura.io/v3/{YOUR_INFURA_KEY}"` 
+
+Note that the interface only works on testnets where both 
 [Uniswap V2](https://uniswap.org/docs/v2/smart-contracts/factory/) and 
 [multicall](https://github.com/makerdao/multicall) are deployed.
-The frontend will not work on other networks.
+The interface will not work on other networks.
 
 ## Contributions
 
-**Please open all pull requests against the `v2` branch.** 
-CI checks will run against all PRs. 
+**Please open all pull requests against the `master` branch.** 
+CI checks will run against all PRs.
 
-## Accessing Uniswap V1 interface
+## Accessing Uniswap Interface V1
 
-The Uniswap V1 interface for mainnet and testnets is accessible via IPFS gateways linked 
-from the [v1.0.0 release](https://github.com/Uniswap/uniswap-interface/releases/tag/v1.0.0).
+The Uniswap Interface supports swapping against, and migrating or removing liquidity from Uniswap V1. However,
+if you would like to use Uniswap V1, the Uniswap V1 interface for mainnet and testnets is accessible via IPFS gateways 
+linked from the [v1.0.0 release](https://github.com/Uniswap/uniswap-interface/releases/tag/v1.0.0).

cypress/support/commands.js

@@ -69,13 +69,13 @@ class CustomizedBridge extends _Eip1193Bridge {
 
 // sets up the injected provider to be a mock ethereum provider with the given mnemonic/index
 Cypress.Commands.overwrite('visit', (original, url, options) => {
-  return original(url, {
+  return original(url.startsWith('/') && url.length > 2 && !url.startsWith('/#') ? `/#${url}` : url, {
     ...options,
     onBeforeLoad(win) {
       options && options.onBeforeLoad && options.onBeforeLoad(win)
       const provider = new JsonRpcProvider('https://rinkeby.infura.io/v3/acb7e55995d04c49bfb52b7141599467', 4)
       const signer = new Wallet(PRIVATE_KEY_TEST_NEVER_USE, provider)
       win.ethereum = new CustomizedBridge(signer, provider)
-    }
+    },
   })
 })

package.json

@@ -51,6 +51,7 @@
     "i18next": "^15.0.9",
     "i18next-browser-languagedetector": "^3.0.1",
     "i18next-xhr-backend": "^2.0.1",
+    "inter-ui": "^3.13.1",
     "jazzicon": "^1.5.0",
     "lodash.flatmap": "^4.5.0",
     "polished": "^3.3.2",

src/components/Header/VersionSwitch.tsx

@@ -11,7 +11,7 @@ const VersionLabel = styled.span<{ enabled: boolean }>`
   background: ${({ theme, enabled }) => (enabled ? theme.primary1 : 'none')};
   color: ${({ theme, enabled }) => (enabled ? theme.white : theme.text1)};
   font-size: 1rem;
-  font-weight: ${({ theme, enabled }) => (enabled ? '500' : '400')};
+  font-weight: ${({ enabled }) => (enabled ? '500' : '400')};
   :hover {
     user-select: ${({ enabled }) => (enabled ? 'none' : 'initial')};
     background: ${({ theme, enabled }) => (enabled ? theme.primary1 : 'none')};

src/components/TokenWarningCard/index.tsx

@@ -109,7 +109,7 @@ export default function TokenWarningCard({ token, ...rest }: TokenWarningCardPro
             ? `${token.name} (${token.symbol})`
             : token.name || token.symbol}
         </div>
-        <ExternalLink style={{ fontWeight: 400 }} href={getEtherscanLink(chainId, token.address, 'address')}>
+        <ExternalLink style={{ fontWeight: 400 }} href={getEtherscanLink(chainId, token.address, 'token')}>
           (View on Etherscan)
         </ExternalLink>
       </Row>

src/constants/tokens/mainnet.ts

@@ -91,7 +91,7 @@ export default [
   new Token(ChainId.MAINNET, '0x459086F2376525BdCebA5bDDA135e4E9d3FeF5bf', 8, 'renBCH', 'renBCH'),
   new Token(ChainId.MAINNET, '0xEB4C2781e4ebA804CE9a9803C67d0893436bB27D', 8, 'renBTC', 'renBTC'),
   new Token(ChainId.MAINNET, '0x1C5db575E2Ff833E46a2E9864C22F4B22E0B37C2', 8, 'renZEC', 'renZEC'),
-  new Token(ChainId.MAINNET, '0x1985365e9f78359a9B6AD760e32412f4a445E862', 18, 'REP', 'Reputation'),
+  new Token(ChainId.MAINNET, '0x1985365e9f78359a9B6AD760e32412f4a445E862', 18, 'REPv1', 'Augur v1 Reputation'),
   new Token(ChainId.MAINNET, '0x9469D013805bFfB7D3DEBe5E7839237e535ec483', 18, 'RING', 'Darwinia Network Native Token'),
   new Token(ChainId.MAINNET, '0x607F4C5BB672230e8672085532f7e901544a7375', 9, 'RLC', 'iEx.ec Network Token'),
   new Token(ChainId.MAINNET, '0xB4EFd85c19999D84251304bDA99E90B92300Bd93', 18, 'RPL', 'Rocket Pool'),
@@ -123,6 +123,7 @@ export default [
   new Token(ChainId.MAINNET, '0xA4Bdb11dc0a2bEC88d24A3aa1E6Bb17201112eBe', 6, 'USDS', 'StableUSD'),
   USDT,
   new Token(ChainId.MAINNET, '0xeb269732ab75A6fD61Ea60b06fE994cD32a83549', 18, 'USDx', 'dForce'),
+  new Token(ChainId.MAINNET, '0x9A48BD0EC040ea4f1D3147C025cd4076A2e71e3e', 18, 'USD++', 'PieDAO USD++'),
   new Token(ChainId.MAINNET, '0x8f3470A7388c05eE4e7AF3d01D8C722b0FF52374', 18, 'VERI', 'Veritaseum'),
   new Token(ChainId.MAINNET, '0x2260FAC5E5542a773Aa44fBCfeDf7C193bc2C599', 8, 'WBTC', 'Wrapped BTC'),
   new Token(ChainId.MAINNET, '0x09fE5f0236F0Ea5D930197DCE254d77B04128075', 18, 'WCK', 'Wrapped CryptoKitties'),

src/index.tsx

@@ -6,6 +6,7 @@ import ReactDOM from 'react-dom'
 import ReactGA from 'react-ga'
 import { Provider } from 'react-redux'
 import { NetworkContextName } from './constants'
+import 'inter-ui'
 import './i18n'
 import App from './pages/App'
 import store from './state'

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,

src/theme/index.tsx

@@ -168,8 +168,6 @@ export const TYPE = {
 }
 
 export const FixedGlobalStyle = createGlobalStyle`
-@import url('https://rsms.me/inter/inter.css');
-
 html, input, textarea, button {
   font-family: 'Inter', sans-serif;
   letter-spacing: -0.018em;

src/utils/index.test.ts

@@ -16,6 +16,9 @@ describe('utils', () => {
     it('correct for tx', () => {
       expect(getEtherscanLink(1, 'abc', 'transaction')).toEqual('https://etherscan.io/tx/abc')
     })
+    it('correct for token', () => {
+      expect(getEtherscanLink(1, 'abc', 'token')).toEqual('https://etherscan.io/token/abc')
+    })
     it('correct for address', () => {
       expect(getEtherscanLink(1, 'abc', 'address')).toEqual('https://etherscan.io/address/abc')
     })

src/utils/index.ts

@@ -25,13 +25,16 @@ const ETHERSCAN_PREFIXES: { [chainId in ChainId]: string } = {
   42: 'kovan.'
 }
 
-export function getEtherscanLink(chainId: ChainId, data: string, type: 'transaction' | 'address'): string {
+export function getEtherscanLink(chainId: ChainId, data: string, type: 'transaction' | 'token' | 'address'): string {
   const prefix = `https://${ETHERSCAN_PREFIXES[chainId] || ETHERSCAN_PREFIXES[1]}etherscan.io`
 
   switch (type) {
     case 'transaction': {
       return `${prefix}/tx/${data}`
     }
+    case 'token': {
+      return `${prefix}/token/${data}`
+    }
     case 'address':
     default: {
       return `${prefix}/address/${data}`

yarn.lock

@@ -8419,6 +8419,11 @@ inquirer@^7.0.0:
     strip-ansi "^6.0.0"
     through "^2.3.6"
 
+inter-ui@^3.13.1:
+  version "3.13.1"
+  resolved "https://registry.yarnpkg.com/inter-ui/-/inter-ui-3.13.1.tgz#3b3841c1ab425035d0146b38c7ee7a640d3da3d8"
+  integrity sha512-A+gHBm9WXZZmIYHdQci9ZoIrsPkzwYvWqG2+DyrwOuxjZVnRyz3b73ridPUWI/JvZ1nGf2j0VdJ+vxh0/bKBwg==
+
 internal-ip@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/internal-ip/-/internal-ip-4.3.0.tgz#845452baad9d2ca3b69c635a137acb9a0dad0907"