stable version with updated balances, add liquidity using SDK, pair m…

…enu search

package.json

@@ -5,9 +5,14 @@
   "homepage": "https://uniswap.exchange",
   "private": true,
   "dependencies": {
+    "@ethersproject/units": "^5.0.0-beta.132",
     "@reach/dialog": "^0.2.8",
     "@reach/tooltip": "^0.2.0",
-    "@uniswap/sdk": "^1.0.0-beta.4",
+    "@types/jest": "^25.1.3",
+    "@types/node": "^13.7.4",
+    "@types/react": "^16.9.21",
+    "@types/react-dom": "^16.9.5",
+    "@uniswap/sdk": "next",
     "@web3-react/core": "^6.0.2",
     "@web3-react/fortmatic-connector": "^6.0.2",
     "@web3-react/injected-connector": "^6.0.3",
@@ -36,7 +41,9 @@
     "react-spring": "^8.0.27",
     "react-switch": "^5.0.1",
     "react-use-gesture": "^6.0.14",
-    "styled-components": "^4.2.0"
+    "rebass": "^4.0.7",
+    "styled-components": "^4.2.0",
+    "typescript": "^3.7.5"
   },
   "scripts": {
     "start": "react-scripts start",

public/locales/en.json

@@ -9,7 +9,7 @@
   "swapAnyway": "Swap Anyway",
   "send": "Send",
   "sendAnyway": "Send Anyway",
-  "pool": "Pool",
+  "pool": "Supply",
   "betaWarning": "This project is in beta. Use at your own risk.",
   "input": "Input",
   "output": "Output",

src/components/Button/index.js

@@ -0,0 +1,99 @@
+import React from 'react'
+import { Button as RebassButton } from 'rebass/styled-components'
+import styled from 'styled-components'
+import { darken } from 'polished'
+
+import { RowBetween } from '../Row'
+import { ChevronDown } from 'react-feather'
+
+const Base = styled(RebassButton)`
+  padding: ${({ padding }) => (padding ? padding : '16px')};
+  width: ${({ width }) => (width ? width : '100%')};
+  font-size: 1rem;
+  font-weight: 500;
+  text-align: center;
+  border-radius: 20px;
+  outline: none;
+  border: 1px solid transparent;
+  color: white;
+  cursor: pointer;
+  &:disabled {
+    cursor: auto;
+  }
+`
+
+export const ButtonPrimary = styled(Base)`
+  background-color: ${({ theme }) => theme.royalBlue};
+  color: white;
+  &:focus {
+    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.05, theme.royalBlue)};
+    background-color: ${({ theme }) => darken(0.05, theme.royalBlue)};
+  }
+  &:hover {
+    background-color: ${({ theme }) => darken(0.05, theme.royalBlue)};
+  }
+  &:active {
+    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.1, theme.royalBlue)};
+    background-color: ${({ theme }) => darken(0.1, theme.royalBlue)};
+  }
+  &:disabled {
+    background-color: ${({ theme }) => theme.royalBlue};
+    opacity: 50%;
+    cursor: auto;
+  }
+`
+
+export const ButtonSecondary = styled(Base)`
+  background-color: #ebf4ff;
+  color: #2172e5;
+  border-radius: 8px;
+  padding: 10px;
+
+  &:focus {
+    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.05, '#ebf4ff')};
+    background-color: ${({ theme }) => darken(0.05, '#ebf4ff')};
+  }
+  &:hover {
+    background-color: ${({ theme }) => darken(0.05, '#ebf4ff')};
+  }
+  &:active {
+    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.1, '#ebf4ff')};
+    background-color: ${({ theme }) => darken(0.1, '#ebf4ff')};
+  }
+  &:disabled {
+    background-color: ${({ theme }) => '#ebf4ff'};
+    opacity: 50%;
+    cursor: auto;
+  }
+`
+
+export const ButtonEmpty = styled(Base)`
+  border: 1px solid #edeef2;
+  background-color: transparent;
+  color: black;
+
+  &:focus {
+    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.05, '#edeef2')};
+  }
+  &:hover {
+    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.1, '#edeef2')};
+  }
+  &:active {
+    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.1, '#edeef2')};
+  }
+  &:disabled {
+    opacity: 50%;
+    cursor: auto;
+  }
+`
+
+export function ButtonDropwdown({ disabled, children, ...rest }) {
+  return (
+    <ButtonPrimary {...rest}>
+      <RowBetween>
+        <div style={{ display: 'flex', alignItems: 'center' }}>{children}</div>
+        <ChevronDown size={24} />
+      </RowBetween>
+    </ButtonPrimary>
+  )
+}

src/components/Card/index.js

@@ -0,0 +1,16 @@
+import styled from 'styled-components'
+import { Box } from 'rebass/styled-components'
+
+const Card = styled(Box)`
+  width: 100%;
+  border-radius: 20px;
+  padding: 1rem;
+  padding: ${({ padding }) => padding};
+  border: ${({ border }) => border};
+`
+
+export default Card
+
+export const LightCard = styled(Card)`
+  border: 1px solid ${({ theme }) => theme.outlineGrey};
+`

src/components/Column/index.js

@@ -0,0 +1,20 @@
+import styled from 'styled-components'
+
+const Column = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+`
+export const ColumnCenter = styled(Column)`
+  width: 100%;
+  align-items: center;
+`
+
+export const AutoColumn = styled.div`
+  display: grid;
+  grid-auto-rows: auto;
+  grid-row-gap: ${({ gap }) => gap};
+  justify-items: ${({ justify }) => justify && justify};
+`
+
+export default Column