upgrade prettier

.eslintrc.json

@@ -8,9 +8,7 @@
       "jsx": true
     }
   },
-  "ignorePatterns": [
-    "node_modules/**/*"
-  ],
+  "ignorePatterns": ["node_modules/**/*"],
   "settings": {
     "react": {
       "version": "detect"
@@ -28,4 +26,4 @@
     "prettier/prettier": "error",
     "@typescript-eslint/no-explicit-any": "off"
   }
-}
+}

.github/ISSUE_TEMPLATE/bug-report.md

@@ -10,9 +10,10 @@ assignees: ''
 A clear and concise description of the bug.
 
 **Steps to Reproduce**
+
 1. Go to ...
 2. Click on ...
-...
+   ...
 
 **Expected Behavior**
 A clear and concise description of what you expected to happen.

.github/workflows/release.yaml

@@ -1,7 +1,7 @@
 name: Release
 on:
-#  schedule:
-#    - cron:  '0 12 * * 1-4' # every day 12:00 UTC Monday-Thursday
+  #  schedule:
+  #    - cron:  '0 12 * * 1-4' # every day 12:00 UTC Monday-Thursday
 
   # manual trigger
   workflow_dispatch:

.github/workflows/tests.yaml

@@ -35,7 +35,7 @@ jobs:
       - run: yarn build
         env:
           CI: false
-          REACT_APP_NETWORK_URL: "https://mainnet.infura.io/v3/4bf032f2d38a4ed6bb975b80d6340847"
+          REACT_APP_NETWORK_URL: 'https://mainnet.infura.io/v3/4bf032f2d38a4ed6bb975b80d6340847'
       - run: yarn integration-test
 
   unit-tests:
@@ -62,4 +62,3 @@ jobs:
             ${{ runner.os }}-yarn-
       - run: yarn install --frozen-lockfile
       - run: yarn test
-

.storybook/main.ts

@@ -10,7 +10,7 @@ module.exports = {
     reactDocgen: 'react-docgen-typescript',
     reactDocgenTypescriptOptions: {
       shouldExtractLiteralValuesFromEnum: true,
-      propFilter: prop => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true)
-    }
-  }
+      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
+    },
+  },
 }

.storybook/preview.tsx

@@ -8,43 +8,43 @@ export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
   dependencies: {
     withStoriesOnly: true,
-    hideEmpty: true
+    hideEmpty: true,
   },
   docs: {
-    theme: storybookThemes.light
+    theme: storybookThemes.light,
   },
   viewport: {
     viewports: {
       mobile: {
         name: 'iPhone X',
         styles: {
           width: '375px',
-          height: '812px'
-        }
+          height: '812px',
+        },
       },
       tablet: {
         name: 'iPad',
         styles: {
           width: '768px',
-          height: '1024px'
-        }
+          height: '1024px',
+        },
       },
       laptop: {
         name: 'Laptop',
         styles: {
           width: '1024px',
-          height: '768px'
-        }
+          height: '768px',
+        },
       },
       desktop: {
         name: 'Desktop',
         styles: {
           width: '1440px',
-          height: '1024px'
-        }
-      }
-    }
-  }
+          height: '1024px',
+        },
+      },
+    },
+  },
 }
 
 export const globalTypes = {
@@ -54,9 +54,9 @@ export const globalTypes = {
     defaultValue: 'light',
     toolbar: {
       icon: 'circlehollow',
-      items: ['light', 'dark']
-    }
-  }
+      items: ['light', 'dark'],
+    },
+  },
 }
 
 const withProviders = (Component: Story, context: Record<string, any>) => {

.storybook/theme.ts

@@ -4,11 +4,11 @@ import { create } from '@storybook/theming'
 const uniswapBaseTheme = {
   brandTitle: 'Uniswap Design',
   brandUrl: 'https://uniswap.org',
-  brandImage: 'https://ipfs.io/ipfs/QmNa8mQkrNKp1WEEeGjFezDmDeodkWRevGFN8JCV7b4Xir'
+  brandImage: 'https://ipfs.io/ipfs/QmNa8mQkrNKp1WEEeGjFezDmDeodkWRevGFN8JCV7b4Xir',
 }
 export const light = create({
   base: 'light',
-  ...uniswapBaseTheme
+  ...uniswapBaseTheme,
 })
 
 // export const dark = create({

README.md

@@ -18,13 +18,13 @@ An open source interface for Uniswap -- a protocol for decentralized exchange of
 ## Accessing the Uniswap Interface
 
 To access the Uniswap Interface, use an IPFS gateway link from the
-[latest release](https://github.com/Uniswap/uniswap-interface/releases/latest), 
+[latest release](https://github.com/Uniswap/uniswap-interface/releases/latest),
 or visit [app.uniswap.org](https://app.uniswap.org).
 
 ## Listing a token
 
 Please see the
-[@uniswap/default-token-list](https://github.com/uniswap/default-token-list) 
+[@uniswap/default-token-list](https://github.com/uniswap/default-token-list)
 repository.
 
 ## Development
@@ -47,20 +47,20 @@ To have the interface default to a different network when a wallet is not connec
 
 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}"` 
+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 
+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 interface will not work on other networks.
 
 ## Contributions
 
-**Please open all pull requests against the `master` branch.** 
+**Please open all pull requests against the `master` branch.**
 CI checks will run against all PRs.
 
 ## Accessing Uniswap Interface V1
 
 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 
+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/integration/swap.test.ts

@@ -3,33 +3,23 @@ describe('Swap', () => {
     cy.visit('/swap')
   })
   it('can enter an amount into input', () => {
-    cy.get('#swap-currency-input .token-amount-input')
-      .type('0.001', { delay: 200 })
-      .should('have.value', '0.001')
+    cy.get('#swap-currency-input .token-amount-input').type('0.001', { delay: 200 }).should('have.value', '0.001')
   })
 
   it('zero swap amount', () => {
-    cy.get('#swap-currency-input .token-amount-input')
-      .type('0.0', { delay: 200 })
-      .should('have.value', '0.0')
+    cy.get('#swap-currency-input .token-amount-input').type('0.0', { delay: 200 }).should('have.value', '0.0')
   })
 
   it('invalid swap amount', () => {
-    cy.get('#swap-currency-input .token-amount-input')
-      .type('\\', { delay: 200 })
-      .should('have.value', '')
+    cy.get('#swap-currency-input .token-amount-input').type('\\', { delay: 200 }).should('have.value', '')
   })
 
   it('can enter an amount into output', () => {
-    cy.get('#swap-currency-output .token-amount-input')
-      .type('0.001', { delay: 200 })
-      .should('have.value', '0.001')
+    cy.get('#swap-currency-output .token-amount-input').type('0.001', { delay: 200 }).should('have.value', '0.001')
   })
 
   it('zero output amount', () => {
-    cy.get('#swap-currency-output .token-amount-input')
-      .type('0.0', { delay: 200 })
-      .should('have.value', '0.0')
+    cy.get('#swap-currency-output .token-amount-input').type('0.0', { delay: 200 }).should('have.value', '0.0')
   })
 
   it('can swap ETH for DAI', () => {
@@ -49,7 +39,7 @@ describe('Swap', () => {
 
   describe('expert mode', () => {
     beforeEach(() => {
-      cy.window().then(win => {
+      cy.window().then((win) => {
         cy.stub(win, 'prompt').returns('confirm')
       })
       cy.get('#open-settings-dialog-button').click()

cypress/support/commands.js

@@ -77,6 +77,6 @@ Cypress.Commands.overwrite('visit', (original, url, options) => {
       const provider = new JsonRpcProvider('https://rinkeby.infura.io/v3/4bf032f2d38a4ed6bb975b80d6340847', 4)
       const signer = new Wallet(PRIVATE_KEY_TEST_NEVER_USE, provider)
       win.ethereum = new CustomizedBridge(signer, provider)
-    }
+    },
   })
 })

package.json

@@ -71,7 +71,6 @@
     "multihashes": "^3.0.1",
     "node-vibrant": "^3.1.5",
     "polished": "^3.3.2",
-    "prettier": "^1.17.0",
     "qs": "^6.9.4",
     "react": "^16.13.1",
     "react-confetti": "^6.0.0",

src/components/AccountDetails/index.tsx

@@ -26,7 +26,7 @@ const HeaderRow = styled.div`
   ${({ theme }) => theme.flexRowNoWrap};
   padding: 1rem 1rem;
   font-weight: 500;
-  color: ${props => (props.color === 'blue' ? ({ theme }) => theme.primary1 : 'inherit')};
+  color: ${(props) => (props.color === 'blue' ? ({ theme }) => theme.primary1 : 'inherit')};
   ${({ theme }) => theme.mediaWidth.upToMedium`
     padding: 1rem;
   `};
@@ -223,7 +223,7 @@ export default function AccountDetails({
   pendingTransactions,
   confirmedTransactions,
   ENSName,
-  openOptions
+  openOptions,
 }: AccountDetailsProps) {
   const { chainId, account, connector } = useActiveWeb3React()
   const theme = useContext(ThemeContext)
@@ -234,10 +234,10 @@ export default function AccountDetails({
     const isMetaMask = !!(ethereum && ethereum.isMetaMask)
     const name = Object.keys(SUPPORTED_WALLETS)
       .filter(
-        k =>
+        (k) =>
           SUPPORTED_WALLETS[k].connector === connector && (connector !== injected || isMetaMask === (k === 'METAMASK'))
       )
-      .map(k => SUPPORTED_WALLETS[k].name)[0]
+      .map((k) => SUPPORTED_WALLETS[k].name)[0]
     return <WalletName>Connected with {name}</WalletName>
   }
 

src/components/AddressInputPanel/index.tsx

@@ -68,7 +68,7 @@ const Input = styled.input<{ error?: boolean }>`
 export default function AddressInputPanel({
   id,
   value,
-  onChange
+  onChange,
 }: {
   id?: string
   // the typed string value
@@ -82,7 +82,7 @@ export default function AddressInputPanel({
   const { address, loading, name } = useENS(value)
 
   const handleInput = useCallback(
-    event => {
+    (event) => {
       const input = event.target.value
       const withoutSpaces = input.replace(/\s+/g, '')
       onChange(withoutSpaces)

src/components/Button/Button.stories.tsx

@@ -16,7 +16,7 @@ import {
   ButtonRadio,
   ButtonSecondary,
   ButtonUNIGradient,
-  ButtonWhite
+  ButtonWhite,
 } from './index'
 
 const wrapperCss = styled.main`
@@ -29,15 +29,15 @@ export default {
   title: 'Buttons',
   argTypes: {
     disabled: { control: { type: 'boolean' } },
-    onClick: { action: 'clicked' }
+    onClick: { action: 'clicked' },
   },
   decorators: [
     (Component: Story) => (
       <div css={wrapperCss}>
         <Component />
       </div>
-    )
-  ]
+    ),
+  ],
 }
 
 const Unicorn = () => (

src/components/Confetti/index.tsx

@@ -20,7 +20,7 @@ export default function Confetti({ start, variant }: { start: boolean; variant?:
         h: height,
         w: width,
         x: 0,
-        y: _variant === 'top' ? height * 0.25 : _variant === 'bottom' ? height * 0.75 : height * 0.5
+        y: _variant === 'top' ? height * 0.25 : _variant === 'bottom' ? height * 0.75 : height * 0.5,
       }}
       initialVelocityX={15}
       initialVelocityY={30}

src/components/CurrencyInputPanel/index.tsx

@@ -148,7 +148,7 @@ export default function CurrencyInputPanel({
   otherCurrency,
   id,
   showCommonBases,
-  customBalanceText
+  customBalanceText,
 }: CurrencyInputPanelProps) {
   const { t } = useTranslation()
 
@@ -192,7 +192,7 @@ export default function CurrencyInputPanel({
               <NumericalInput
                 className="token-amount-input"
                 value={value}
-                onUserInput={val => {
+                onUserInput={(val) => {
                   onUserInput(val)
                 }}
               />

src/components/CurrencyLogo/index.tsx

@@ -28,7 +28,7 @@ const StyledLogo = styled(Logo)<{ size: string }>`
 export default function CurrencyLogo({
   currency,
   size = '24px',
-  style
+  style,
 }: {
   currency?: Currency
   size?: string

src/components/DoubleLogo/index.tsx

@@ -29,7 +29,7 @@ export default function DoubleCurrencyLogo({
   currency0,
   currency1,
   size = 16,
-  margin = false
+  margin = false,
 }: DoubleCurrencyLogoProps) {
   return (
     <Wrapper sizeraw={size} margin={margin}>

src/components/FormattedCurrencyAmount/index.tsx

@@ -5,7 +5,7 @@ const CURRENCY_AMOUNT_MIN = new Fraction(JSBI.BigInt(1), JSBI.BigInt(1000000))
 
 export default function FormattedCurrencyAmount({
   currencyAmount,
-  significantDigits = 4
+  significantDigits = 4,
 }: {
   currencyAmount: CurrencyAmount
   significantDigits?: number