update i18n; kinda fix tests; remove stale dependencies (#266)

.travis.yml

@@ -12,3 +12,4 @@ install: yarn
 script:
   - yarn check:all
   - yarn build
+  - yarn test

README.md

@@ -36,4 +36,4 @@ REACT_APP_NETWORK_ID=2 REACT_APP_NETWORK='Ropsten Test Network' yarn start
 
 ## Contributions
 
-Please open all pull requests against the `beta` branch. CI checks will run against all PRs. To ensure that your changes will pass, run `yarn check:all` before pushing. If this command fails, you can try to automatically fix eslint/prettier problems with `yarn lint`/`yarn format`, or manually fix the problems.
+**Please open all pull requests against the `beta` branch.** CI checks will run against all PRs. To ensure that your changes will pass, run `yarn check:all` before pushing. If this command fails, you can try to automatically fix problems with `yarn fix:all`, or do it manually.

package.json

@@ -5,38 +5,31 @@
   "homepage": ".",
   "private": true,
   "dependencies": {
-    "axios": "^0.18.0",
     "bignumber.js": "^7.2.1",
     "classnames": "^2.2.6",
-    "d3": "^4.13.0",
-    "deep-equal": "^1.0.1",
     "ethers": "^4.0.27",
     "fuse": "^0.4.0",
-    "i18next": "^13.0.1",
-    "i18next-browser-languagedetector": "^2.2.4",
-    "i18next-xhr-backend": "^1.5.1",
+    "i18next": "^15.0.9",
+    "i18next-browser-languagedetector": "^3.0.1",
+    "i18next-xhr-backend": "^2.0.1",
     "jazzicon": "^1.5.0",
-    "node-sass": "^4.9.3",
-    "npm": "^6.0.0",
+    "node-sass": "^4.11.0",
     "prop-types": "^15.7.2",
     "react": "^16.8.6",
-    "react-cookies": "^0.1.0",
     "react-dom": "^16.8.6",
-    "react-ga": "^2.5.3",
-    "react-helmet": "^5.2.0",
-    "react-i18next": "^8.4.0",
+    "react-ga": "^2.5.7",
+    "react-i18next": "^10.7.0",
     "react-redux": "^5.0.7",
     "react-responsive": "^5.0.0",
     "react-router-dom": "^5.0.0",
     "react-scripts": "^2.1.8",
-    "react-scroll-to-component": "^1.0.2",
-    "react-select": "^1.2.1",
     "react-transition-group": "1.x",
     "redux": "^3.7.2",
     "redux-subscriber": "^1.1.0",
     "redux-thunk": "^2.2.0",
     "ua-parser-js": "^0.7.18",
-    "web3": "1.0.0-beta.52"
+    "web3": "1.0.0-beta.52",
+    "web3-react": "^4.0.0"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -47,8 +40,9 @@
     "eject": "react-scripts eject",
     "lint:base": "yarn eslint './src/**/*.{js,jsx}'",
     "format:base": "yarn prettier './src/**/*.{js,jsx,scss}'",
-    "lint": "yarn lint:base --fix",
-    "format": "yarn format:base --write",
+    "fix:lint": "yarn lint:base --fix",
+    "fix:format": "yarn format:base --write",
+    "fix:all": "yarn fix:lint && yarn fix:format",
     "check:lint": "yarn lint:base",
     "check:format": "yarn format:base --check",
     "check:all": "yarn check:lint && yarn check:format"

src/components/CurrencyInputPanel/index.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 import { CSSTransitionGroup } from 'react-transition-group'
 import classnames from 'classnames'
 import { withRouter } from 'react-router-dom'
-import { withNamespaces } from 'react-i18next'
+import { withTranslation } from 'react-i18next'
 import Fuse from '../../helpers/fuse'
 import Modal from '../Modal'
 import TokenLogo from '../TokenLogo'
@@ -394,5 +394,5 @@ export default withRouter(
       addPendingTx: opts => dispatch(addPendingTx(opts)),
       addApprovalTx: opts => dispatch(addApprovalTx(opts))
     })
-  )(withNamespaces()(CurrencyInputPanel))
+  )(withTranslation()(CurrencyInputPanel))
 )

src/components/Header/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import classnames from 'classnames'
 import UAParser from 'ua-parser-js'
-import { withNamespaces } from 'react-i18next'
+import { withTranslation } from 'react-i18next'
 import Logo from '../Logo'
 import CoinbaseWalletLogo from '../../assets/images/coinbase-wallet-logo.png'
 import TrustLogo from '../../assets/images/trust-wallet-logo.svg'
@@ -168,4 +168,4 @@ export default connect(state => ({
   isConnected: !!state.web3connect.account,
   web3: state.web3connect.web3,
   networkId: state.web3connect.networkId
-}))(withNamespaces()(Header))
+}))(withTranslation()(Header))

src/components/NavigationTabs/index.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import { withRouter } from 'react-router-dom'
 import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
-import { withNamespaces } from 'react-i18next'
+import { withTranslation } from 'react-i18next'
 import { dismissBetaMessage } from '../../ducks/app'
 import { Tab, Tabs } from '../Tab'
 
@@ -62,5 +62,5 @@ export default withRouter(
     dispatch => ({
       dismissBetaMessage: () => dispatch(dismissBetaMessage())
     })
-  )(withNamespaces()(NavigationTabs))
+  )(withTranslation()(NavigationTabs))
 )

src/components/Web3Status/index.js

@@ -4,7 +4,7 @@ import { connect } from 'react-redux'
 import classnames from 'classnames'
 import Jazzicon from 'jazzicon'
 import { CSSTransitionGroup } from 'react-transition-group'
-import { withNamespaces } from 'react-i18next'
+import { withTranslation } from 'react-i18next'
 import { ethers } from 'ethers'
 import './web3-status.scss'
 import Modal from '../Modal'
@@ -142,4 +142,4 @@ export default connect(state => {
     pending: state.web3connect.transactions.pending,
     confirmed: state.web3connect.transactions.confirmed
   }
-})(withNamespaces()(Web3Status))
+})(withTranslation()(Web3Status))

src/i18n.js

-import i18n from 'i18next'
-import Backend from 'i18next-xhr-backend'
+import i18next from 'i18next'
+import XHR from 'i18next-xhr-backend'
 import LanguageDetector from 'i18next-browser-languagedetector'
-import { reactI18nextModule } from 'react-i18next'
+import { initReactI18next } from 'react-i18next'
 
-const resources = {
-  loadPath: `./locales/{{lng}}.json`
-}
-
-i18n
+i18next
   // load translation using xhr -> see /public/locales
-  // learn more: https://github.com/i18next/i18next-xhr-backend
-  .use(Backend)
+  // https://github.com/i18next/i18next-xhr-backend
+  .use(XHR)
   // detect user language
-  // learn more: https://github.com/i18next/i18next-browser-languageDetector
+  // https://github.com/i18next/i18next-browser-languageDetector
   .use(LanguageDetector)
-  // pass the i18n instance to react-i18next.
-  .use(reactI18nextModule)
-  // init i18next
-  // for all options read: https://www.i18next.com/overview/configuration-options
+  .use(initReactI18next)
+  // https://www.i18next.com/overview/configuration-options
   .init({
-    backend: resources,
+    backend: {
+      loadPath: './locales/{{lng}}.json'
+    },
     fallbackLng: 'en',
-
     keySeparator: false,
-
     interpolation: {
-      escapeValue: false
+      escapeValue: false // not needed for react as it escapes by default
     }
   })
 
-export default i18n
+export default i18next

src/index.js

-import React from 'react'
+import React, { Suspense } from 'react'
 import ReactDOM from 'react-dom'
 import { Provider } from 'react-redux'
 import ReactGA from 'react-ga'
+
 import './i18n'
 import App from './pages/App'
 import store from './store'
-
 import './index.scss'
 
-if (process.env.NODE_ENV === 'development') {
-  ReactGA.initialize('test', { testMode: true })
-} else {
+if (process.env.NODE_ENV === 'production') {
   ReactGA.initialize('UA-128182339-1')
+} else {
+  ReactGA.initialize('test', { testMode: true })
 }
+
 ReactGA.pageview(window.location.pathname + window.location.search)
 
-window.addEventListener('load', function() {
-  ReactDOM.render(
+ReactDOM.render(
+  // catch the suspense in case translations are not yet loaded
+  <Suspense fallback={null}>
     <Provider store={store}>
       <App />
-    </Provider>,
+    </Provider>
+  </Suspense>,
   document.getElementById('root')
-  )
-})
+)

src/index.scss

-@import url('https://rsms.me/inter/inter-ui.css');
+@import url('https://rsms.me/inter/inter.css');
 @import './variables.scss';
 
 html,

src/pages/Pool/AddLiquidity.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
-import { withNamespaces } from 'react-i18next'
+import { withTranslation } from 'react-i18next'
 import CurrencyInputPanel from '../../components/CurrencyInputPanel'
 import OversizedPanel from '../../components/OversizedPanel'
 import ContextualInfo from '../../components/ContextualInfo'
@@ -644,7 +644,7 @@ export default connect(
     selectors: () => dispatch(selectors()),
     addPendingTx: id => dispatch(addPendingTx(id))
   })
-)(withNamespaces()(AddLiquidity))
+)(withTranslation()(AddLiquidity))
 
 function b(text) {
   return <span className="swap__highlight-text">{text}</span>

src/pages/Pool/CreateExchange.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
 import { withRouter } from 'react-router-dom'
-import { withNamespaces } from 'react-i18next'
+import { withTranslation } from 'react-i18next'
 import { selectors, addPendingTx } from '../../ducks/web3connect'
 import classnames from 'classnames'
 import NavigationTabs from '../../components/NavigationTabs'
@@ -239,5 +239,5 @@ export default withRouter(
       addExchange: opts => dispatch(addExchange(opts)),
       addPendingTx: id => dispatch(addPendingTx(id))
     })
-  )(withNamespaces()(CreateExchange))
+  )(withTranslation()(CreateExchange))
 )

src/pages/Pool/ModeSelector.js

 import React, { Component } from 'react'
 import { withRouter } from 'react-router-dom'
-import { withNamespaces } from 'react-i18next'
+import { withTranslation } from 'react-i18next'
 import OversizedPanel from '../../components/OversizedPanel'
 import Dropdown from '../../assets/images/dropdown-blue.svg'
 import Modal from '../../components/Modal'
@@ -80,4 +80,4 @@ class ModeSelector extends Component {
   }
 }
 
-export default withRouter(withNamespaces()(ModeSelector))
+export default withRouter(withTranslation()(ModeSelector))

src/pages/Pool/RemoveLiquidity.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import { connect } from 'react-redux'
 import { BigNumber as BN } from 'bignumber.js'
-import { withNamespaces } from 'react-i18next'
+import { withTranslation } from 'react-i18next'
 import NavigationTabs from '../../components/NavigationTabs'
 import ModeSelector from './ModeSelector'
 import CurrencyInputPanel from '../../components/CurrencyInputPanel'
@@ -430,7 +430,7 @@ export default connect(
     selectors: () => dispatch(selectors()),
     addPendingTx: id => dispatch(addPendingTx(id))
   })
-)(withNamespaces()(RemoveLiquidity))
+)(withTranslation()(RemoveLiquidity))
 
 function b(text) {
   return <span className="swap__highlight-text">{text}</span>

src/pages/Send/index.js

@@ -3,7 +3,7 @@ import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import { BigNumber as BN } from 'bignumber.js'
-import { withNamespaces } from 'react-i18next'
+import { withTranslation } from 'react-i18next'
 import { selectors, addPendingTx } from '../../ducks/web3connect'
 import Header from '../../components/Header'
 import NavigationTabs from '../../components/NavigationTabs'
@@ -840,7 +840,7 @@ export default connect(
     selectors: () => dispatch(selectors()),
     addPendingTx: id => dispatch(addPendingTx(id))
   })
-)(withNamespaces()(Send))
+)(withTranslation()(Send))
 
 const b = text => <span className="swap__highlight-text">{text}</span>
 

src/pages/Swap/index.js

@@ -5,7 +5,7 @@ import classnames from 'classnames'
 import { BigNumber as BN } from 'bignumber.js'
 import MediaQuery from 'react-responsive'
 import ReactGA from 'react-ga'
-import { withNamespaces } from 'react-i18next'
+import { withTranslation } from 'react-i18next'
 import { selectors, addPendingTx } from '../../ducks/web3connect'
 import Header from '../../components/Header'
 import NavigationTabs from '../../components/NavigationTabs'
@@ -810,7 +810,7 @@ export default connect(
     selectors: () => dispatch(selectors()),
     addPendingTx: id => dispatch(addPendingTx(id))
   })
-)(withNamespaces()(Swap))
+)(withTranslation()(Swap))
 
 const b = text => <span className="swap__highlight-text">{text}</span>