TS migrations and commit hash in code link (#730)

* TypeScript in the utils directory, README fixes

* Remove unused methods

* Added unnecessary space

* Some env variable cleanup

* Bug in change

* Another file to ts

* App.tsx

* Header and Footer to tsx

* Few more TS migrations and add a commit hash title to the uni icon

* Few more TS migrations and put commit hash in code link

* Splitting up files

* Splitting up files (merged dark mode changes)

package.json

@@ -24,6 +24,7 @@
     "@web3-react/walletconnect-connector": "^6.0.2",
     "@web3-react/walletlink-connector": "^6.0.2",
     "copy-to-clipboard": "^3.2.0",
+    "cross-env": "^7.0.2",
     "escape-string-regexp": "^2.0.0",
     "ethers": "^4.0.44",
     "history": "^4.9.0",
@@ -51,8 +52,8 @@
     "use-media": "^1.4.0"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "start": "cross-env REACT_APP_GIT_COMMIT_HASH=$(git show -s --format=%H) react-scripts start",
+    "build": "cross-env REACT_APP_GIT_COMMIT_HASH=$(git show -s --format=%H) react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject",
     "lint:base": "yarn eslint './src/**/*.{js,jsx}'",
@@ -80,4 +81,4 @@
     ]
   },
   "license": "GPL-3.0-or-later"
-}
\ No newline at end of file
+}

src/components/ExchangePage/styleds.ts

+import styled from 'styled-components'
+import { AutoColumn } from '../Column'
+
+import NumericalInput from '../NumericalInput'
+
+export const Wrapper = styled.div`
+  position: relative;
+`
+
+export const ArrowWrapper = styled.div`
+  padding: 2px;
+  border-radius: 12px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  :hover {
+    cursor: pointer;
+    opacity: 0.8;
+  }
+`
+
+export const FixedBottom = styled.div`
+  position: absolute;
+  margin-top: 1.5rem;
+  width: 100%;
+  margin-bottom: 40px;
+`
+
+export const AdvancedDropwdown = styled.div`
+  position: absolute;
+  margin-top: -12px;
+  max-width: 455px;
+  width: 100%;
+  margin-bottom: 100px;
+  padding: 10px 0;
+  padding-top: 36px;
+  border-bottom-left-radius: 20px;
+  border-bottom-right-radius: 20px;
+  color: ${({ theme }) => theme.text2};
+  background-color: ${({ theme }) => theme.advancedBG};
+  color: ${({ theme }) => theme.text2};
+  z-index: -1;
+`
+
+export const SectionBreak = styled.div`
+  height: 1px;
+  width: 100%;
+  background-color: ${({ theme }) => theme.bg3};
+`
+
+export const BottomGrouping = styled.div`
+  margin-top: 12px;
+  position: relative;
+`
+
+export const ErrorText = styled(Text)`
+  color: ${({ theme, warningLow, warningMedium, warningHigh }) =>
+  warningHigh ? theme.red1 : warningMedium ? theme.yellow2 : warningLow ? theme.green1 : theme.text1};
+`
+
+export const InputGroup = styled(AutoColumn)`
+  position: relative;
+  padding: 40px 0 20px 0;
+`
+
+export const StyledNumerical = styled(NumericalInput)`
+  text-align: center;
+  font-size: 48px;
+  font-weight: 500px;
+  width: 100%;
+
+  ::placeholder {
+    color: ${({ theme }) => theme.text4};
+  }
+`
+
+export const MaxButton = styled.button`
+  position: absolute;
+  right: 70px;
+  padding: 0.5rem 0.5rem;
+  background-color: ${({ theme }) => theme.blue5};
+  border: 1px solid ${({ theme }) => theme.blue5};
+  border-radius: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  cursor: pointer;
+  margin-right: 0.5rem;
+  color: ${({ theme }) => theme.blue1};
+  :hover {
+    border: 1px solid ${({ theme }) => theme.blue1};
+  }
+  :focus {
+    border: 1px solid ${({ theme }) => theme.blue1};
+    outline: none;
+  }
+`
+
+export const StyledBalanceMaxMini = styled.button`
+  height: 24px;
+  background-color: ${({ theme }) => theme.bg2};
+  border: none;
+  border-radius: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 400;
+  margin-left: 6px;
+  cursor: pointer;
+  color: ${({ theme }) => theme.text2};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: fit-content;
+  float: right;
+
+  :hover {
+    background-color: ${({ theme }) => theme.bg3};
+
+    /* border: 1px solid ${({ theme, active }) => (active ? theme.bg2 : theme.blue4)}; */
+  }
+  :focus {
+    background-color: ${({ theme }) => theme.bg3};
+    /* border: 1px solid ${({ theme, active }) => (active ? theme.bg2 : theme.blue4)}; */
+    outline: none;
+  }
+`
+
+export const TruncatedText = styled(Text)`
+  text-overflow: ellipsis;
+  width: 220px;
+  overflow: hidden;
+`
+
+// styles
+export const Dots = styled.span`
+  &::after {
+    display: inline-block;
+    animation: ellipsis 1.25s infinite;
+    content: '.';
+    width: 1em;
+    text-align: left;
+  }
+  @keyframes ellipsis {
+    0% {
+      content: '.';
+    }
+    33% {
+      content: '..';
+    }
+    66% {
+      content: '...';
+    }
+  }
+`

src/components/ExchangePage/swap-store.ts

+export enum Field {
+  INPUT,
+  OUTPUT
+}
+
+export interface SwapState {
+  independentField: Field
+  typedValue: string
+  [Field.INPUT]: {
+    address: string | undefined
+  }
+  [Field.OUTPUT]: {
+    address: string | undefined
+  }
+}
+
+export function initializeSwapState({ inputTokenAddress, outputTokenAddress, typedValue, independentField }): SwapState {
+  return {
+    independentField: independentField,
+    typedValue: typedValue,
+    [Field.INPUT]: {
+      address: inputTokenAddress
+    },
+    [Field.OUTPUT]: {
+      address: outputTokenAddress
+    }
+  }
+}
+
+export enum SwapAction {
+  SELECT_TOKEN,
+  SWITCH_TOKENS,
+  TYPE
+}
+
+export interface Payload {
+  [SwapAction.SELECT_TOKEN]: {
+    field: Field
+    address: string
+  }
+  [SwapAction.SWITCH_TOKENS]: undefined
+  [SwapAction.TYPE]: {
+    field: Field
+    typedValue: string
+  }
+}
+
+export function reducer(
+  state: SwapState,
+  action: {
+    type: SwapAction
+    payload: Payload[SwapAction]
+  }
+): SwapState {
+  switch (action.type) {
+    case SwapAction.SELECT_TOKEN: {
+      const { field, address } = action.payload as Payload[SwapAction.SELECT_TOKEN]
+      const otherField = field === Field.INPUT ? Field.OUTPUT : Field.INPUT
+      if (address === state[otherField].address) {
+        // the case where we have to swap the order
+        return {
+          ...state,
+          independentField: state.independentField === Field.INPUT ? Field.OUTPUT : Field.INPUT,
+          [field]: { address },
+          [otherField]: { address: state[field].address }
+        }
+      } else {
+        // the normal case
+        return {
+          ...state,
+          [field]: { address }
+        }
+      }
+    }
+    case SwapAction.SWITCH_TOKENS: {
+      return {
+        ...state,
+        independentField: state.independentField === Field.INPUT ? Field.OUTPUT : Field.INPUT,
+        [Field.INPUT]: { address: state[Field.OUTPUT].address },
+        [Field.OUTPUT]: { address: state[Field.INPUT].address }
+      }
+    }
+    case SwapAction.TYPE: {
+      const { field, typedValue } = action.payload as Payload[SwapAction.TYPE]
+      return {
+        ...state,
+        independentField: field,
+        typedValue
+      }
+    }
+    default: {
+      throw Error
+    }
+  }
+}

src/components/Header/index.js → src/components/Header/index.tsx

@@ -13,7 +13,6 @@ import { isMobile } from 'react-device-detect'
 import { YellowCard, GreyCard } from '../Card'
 import { useWeb3React } from '../../hooks'
 import { useAddressBalance } from '../../contexts/Balances'
-import { useWalletModalToggle } from '../../contexts/Application'
 import { useDarkModeManager } from '../../contexts/LocalStorage'
 
 import Logo from '../../assets/svg/logo.svg'
@@ -138,7 +137,6 @@ function Header({ history }) {
   const { account, chainId } = useWeb3React()
 
   const userEthBalance = useAddressBalance(account, WETH[chainId])
-  const toggleWalletModal = useWalletModalToggle()
   const [isDark] = useDarkModeManager()
 
   return (
@@ -189,7 +187,7 @@ function Header({ history }) {
             ) : (
               ''
             )}
-            <Web3Status onClick={toggleWalletModal} />
+            <Web3Status />
           </AccountElement>
 
           <Menu />

src/components/Menu/index.js → src/components/Menu/index.tsx

@@ -79,13 +79,17 @@ const MenuItem = styled(Link)`
   }
 `
 
+const CODE_LINK = !!process.env.REACT_APP_GIT_COMMIT_HASH ?
+  `https://github.com/Uniswap/uniswap-frontend/tree/${process.env.REACT_APP_GIT_COMMIT_HASH}`:
+  'https://github.com/Uniswap/uniswap-frontend'
+
 export default function Menu() {
-  const node = useRef()
+  const node = useRef<HTMLDivElement>()
   const [open, toggle] = useToggle(false)
 
   useEffect(() => {
     const handleClickOutside = e => {
-      if (node.current.contains(e.target)) {
+      if (node.current?.contains(e.target) ?? false) {
         return
       }
       toggle()
@@ -115,7 +119,7 @@ export default function Menu() {
           <MenuItem id="link" href="https://uniswap.org/docs/v2">
             Docs
           </MenuItem>
-          <MenuItem id="link" href="https://github.com/Uniswap">
+          <MenuItem id="link" href={CODE_LINK}>
             Code
           </MenuItem>
           <MenuItem id="link" href="https://uniswap.info/">

src/connectors/Fortmatic.js → src/connectors/Fortmatic.ts

@@ -13,9 +13,10 @@ export class FortmaticConnector extends FortmaticConnectorCore {
   async activate() {
     if (!this.fortmatic) {
       const { default: Fortmatic } = await import('fortmatic')
+      const { apiKey, chainId } = this as any
       this.fortmatic = new Fortmatic(
-        this.apiKey,
-        this.chainId === 1 || this.chainId === 4 ? undefined : chainIdToNetwork[this.chainId]
+        apiKey,
+        chainId === 1 || chainId === 4 ? undefined : chainIdToNetwork[chainId]
       )
     }
 
@@ -33,6 +34,6 @@ export class FortmaticConnector extends FortmaticConnectorCore {
 
     const [account] = await Promise.all([provider.enable().then(accounts => accounts[0]), pollForOverlayReady])
 
-    return { provider: this.fortmatic.getProvider(), chainId: this.chainId, account }
+    return { provider: this.fortmatic.getProvider(), chainId: (this as any).chainId, account }
   }
 }

src/connectors/Network.js → src/connectors/Network.ts

@@ -2,14 +2,14 @@ import { NetworkConnector as NetworkConnectorCore } from '@web3-react/network-co
 
 export class NetworkConnector extends NetworkConnectorCore {
   pause() {
-    if (this.active) {
-      this.providers[this.currentChainId].stop()
+    if ((this as any).active) {
+      (this as any).providers[(this as any).currentChainId].stop()
     }
   }
 
   resume() {
-    if (this.active) {
-      this.providers[this.currentChainId].start()
+    if ((this as any).active) {
+      (this as any).providers[(this as any).currentChainId].start()
     }
   }
 }

src/hooks/index.js → src/hooks/index.ts

@@ -3,7 +3,7 @@ import { useWeb3React as useWeb3ReactCore } from '@web3-react/core'
 import { isMobile } from 'react-device-detect'
 import copy from 'copy-to-clipboard'
 
-import ERC20_ABI from '../constants/abis/erc20'
+import ERC20_ABI from '../constants/abis/erc20.json'
 import { injected } from '../connectors'
 import { NetworkContextName } from '../constants'
 import { getContract, getExchangeContract, isAddress } from '../utils'
@@ -25,7 +25,7 @@ export function useEagerConnect() {
           setTried(true)
         })
       } else {
-        if (isMobile && window.ethereum) {
+        if (isMobile && (window as any).ethereum) {
           activate(injected, undefined, true).catch(() => {
             setTried(true)
           })
@@ -54,7 +54,7 @@ export function useInactiveListener(suppress = false) {
   const { active, error, activate } = useWeb3ReactCore() // specifically using useWeb3React because of what this hook does
 
   useEffect(() => {
-    const { ethereum } = window
+    const { ethereum } = window as any
 
     if (ethereum && ethereum.on && !active && !error && !suppress) {
       const handleChainChanged = () => {
@@ -139,7 +139,7 @@ export function useBodyKeyDown(targetKey, onKeyDown, suppressOnKeyDown = false)
 export function useENSName(address) {
   const { library } = useWeb3React()
 
-  const [ENSName, setENSName] = useState()
+  const [ENSName, setENSName] = useState<string | null>(null)
 
   useEffect(() => {
     if (isAddress(address)) {
@@ -163,7 +163,7 @@ export function useENSName(address) {
 
       return () => {
         stale = true
-        setENSName()
+        setENSName(null)
       }
     }
   }, [library, address])
@@ -247,7 +247,7 @@ export function usePrevious(value) {
   return ref.current
 }
 
-export function useToggle(initialState = false) {
+export function useToggle(initialState = false): [boolean, () => void] {
   const [state, setState] = useState(initialState)
   const toggle = useCallback(() => setState(state => !state), [])
   return [state, toggle]

src/pages/App.js → src/pages/App.tsx

@@ -143,7 +143,7 @@ export default function App() {
                           const t1 =
                             tokens?.[1] === 'ETH' ? 'ETH' : isAddress(tokens?.[1]) ? isAddress(tokens[1]) : undefined
                           if (t0 && t1) {
-                            return <Remove token0={t0} token1={t1} params={params} />
+                            return <Remove token0={t0} token1={t1} />
                           } else {
                             return <Redirect to="/pool" />
                           }
@@ -154,7 +154,7 @@ export default function App() {
                   </Suspense>
                 </Web3ReactManager>
               </Body>
-              <Footer></Footer>
+              <Footer/>
             </BodyWrapper>
             <StyledRed />
           </AppWrapper>

yarn.lock

@@ -5276,6 +5276,13 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+cross-env@^7.0.2:
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-7.0.2.tgz#bd5ed31339a93a3418ac4f3ca9ca3403082ae5f9"
+  integrity sha512-KZP/bMEOJEDCkDQAyRhu3RL2ZO/SUVrxQVI0G3YEQ+OLbRA3c6zgixe8Mq8a/z7+HKlNEjo8oiLUs8iRijY2Rw==
+  dependencies:
+    cross-spawn "^7.0.1"
+
 cross-fetch@^2.1.0, cross-fetch@^2.1.1:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-2.2.3.tgz#e8a0b3c54598136e037f8650f8e823ccdfac198e"
@@ -5304,6 +5311,15 @@ cross-spawn@^6.0.0, cross-spawn@^6.0.5:
     shebang-command "^1.2.0"
     which "^1.2.9"
 
+cross-spawn@^7.0.1:
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.2.tgz#d0d7dcfa74e89115c7619f4f721a94e1fdb716d6"
+  integrity sha512-PD6G8QG3S4FK/XCGFbEQrDqO2AnMMsy0meR7lerlIOHAAbkuavGU/pOqprrlvfTNjvowivTeBsjebAL0NSoMxw==
+  dependencies:
+    path-key "^3.1.0"
+    shebang-command "^2.0.0"
+    which "^2.0.1"
+
 crypto-browserify@3.12.0, crypto-browserify@^3.11.0:
   version "3.12.0"
   resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.12.0.tgz#396cf9f3137f03e4b8e532c58f698254e00f80ec"