set up eslint and prettier; run prettier

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 120
+}

package.json

@@ -42,9 +42,18 @@
     "build": "react-scripts build",
     "build:rinkeby": "REACT_APP_NETWORK_ID=4 REACT_APP_NETWORK='Rinkeby Test Network' yarn build",
     "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
+    "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",
+    "check:lint": "yarn lint:base",
+    "check:format": "yarn format:base --check",
+    "check:all": "yarn check:lint && yarn check:format"
+  },
+  "devDependencies": {
+    "prettier": "^1.17.0"
   },
-  "devDependencies": {},
   "browserslist": [
     ">0.2%",
     "not dead",

src/components/AddressInputPanel/index.js

@@ -1,48 +1,44 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import c from 'classnames';
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import c from 'classnames'
 
-import QrCode from '../QrCode';
-import './address-input-panel.scss';
+import QrCode from '../QrCode'
+import './address-input-panel.scss'
 
 class AddressInputPanel extends Component {
   static propTypes = {
     title: PropTypes.string,
     onChange: PropTypes.func,
     value: PropTypes.string,
-    errorMessage: PropTypes.string,
-  };
+    errorMessage: PropTypes.string
+  }
 
   static defaultProps = {
     onChange() {},
-    value: '',
-  };
+    value: ''
+  }
 
   render() {
-    const {
-      t,
-      title,
-      onChange,
-      value,
-      errorMessage,
-    } = this.props;
+    const { t, title, onChange, value, errorMessage } = this.props
 
     return (
       <div className="currency-input-panel">
-        <div className={c('currency-input-panel__container address-input-panel__recipient-row', {
-          'currency-input-panel__container--error': errorMessage,
-        })}>
+        <div
+          className={c('currency-input-panel__container address-input-panel__recipient-row', {
+            'currency-input-panel__container--error': errorMessage
+          })}
+        >
           <div className="address-input-panel__input-container">
             <div className="currency-input-panel__label-row">
               <div className="currency-input-panel__label-container">
-                <span className="currency-input-panel__label">{title || t("recipientAddress")}</span>
+                <span className="currency-input-panel__label">{title || t('recipientAddress')}</span>
               </div>
             </div>
             <div className="currency-input-panel__input-row">
               <input
                 type="text"
-                className={c('address-input-panel__input',{
-                  'address-input-panel__input--error': errorMessage,
+                className={c('address-input-panel__input', {
+                  'address-input-panel__input--error': errorMessage
                 })}
                 placeholder="0x1234..."
                 onChange={e => onChange(e.target.value)}
@@ -59,4 +55,4 @@ class AddressInputPanel extends Component {
   }
 }
 
-export default AddressInputPanel;
+export default AddressInputPanel

src/components/ContextualInfo/contextual-info.scss

@@ -1,4 +1,4 @@
-@import "../../variables.scss";
+@import '../../variables.scss';
 
 .contextual-info {
   &__summary-wrapper {

src/components/ContextualInfo/index.js

@@ -1,76 +1,69 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import c from 'classnames';
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import c from 'classnames'
 
-import DropdownBlue from "../../assets/images/dropdown-blue.svg";
-import DropupBlue from "../../assets/images/dropup-blue.svg";
-import './contextual-info.scss';
+import DropdownBlue from '../../assets/images/dropdown-blue.svg'
+import DropupBlue from '../../assets/images/dropup-blue.svg'
+import './contextual-info.scss'
 
 class ContextualInfo extends Component {
   static propTypes = {
     openDetailsText: PropTypes.string,
     renderTransactionDetails: PropTypes.func,
     contextualInfo: PropTypes.string,
-    isError: PropTypes.bool,
-  };
+    isError: PropTypes.bool
+  }
 
   static defaultProps = {
     openDetailsText: 'Transaction Details',
     closeDetailsText: 'Hide Details',
     renderTransactionDetails() {},
     contextualInfo: '',
-    isError: false,
-  };
+    isError: false
+  }
 
   state = {
-    showDetails: false,
-  };
+    showDetails: false
+  }
 
   renderDetails() {
     if (!this.state.showDetails) {
-      return null;
+      return null
     }
 
-    return (
-      <div className="contextual-info__details">
-        {this.props.renderTransactionDetails()}
-      </div>
-    );
+    return <div className="contextual-info__details">{this.props.renderTransactionDetails()}</div>
   }
 
   render() {
-    const {
-      openDetailsText,
-      closeDetailsText,
-      contextualInfo,
-      isError,
-    } = this.props;
+    const { openDetailsText, closeDetailsText, contextualInfo, isError } = this.props
 
     if (contextualInfo) {
       return (
         <div className={c({ 'contextual-info--error': isError }, 'contextual-info__summary-wrapper')}>
           <div>{contextualInfo}</div>
         </div>
-      );
+      )
     }
 
     return [
       <div
         key="open-details"
         className="contextual-info__summary-wrapper contextual-info__open-details-container"
-        onClick={() => this.setState((prevState) => {
-          return { showDetails: !prevState.showDetails }
-        })}
+        onClick={() =>
+          this.setState(prevState => {
+            return { showDetails: !prevState.showDetails }
+          })
+        }
       >
         {!this.state.showDetails ? (
           <>
             <span>{openDetailsText}</span>
-            <img src={DropdownBlue} alt='dropdown' />
+            <img src={DropdownBlue} alt="dropdown" />
           </>
         ) : (
           <>
             <span>{closeDetailsText}</span>
-            <img src={DropupBlue} alt='dropup' />
+            <img src={DropupBlue} alt="dropup" />
           </>
         )}
       </div>,
@@ -79,4 +72,4 @@ class ContextualInfo extends Component {
   }
 }
 
-export default ContextualInfo;
+export default ContextualInfo

src/components/CurrencyInputPanel/currency-panel.scss

@@ -9,30 +9,30 @@
 
   &__container {
     border-radius: 1.25rem;
-    box-shadow: 0 0 0 .5px $mercury-gray;
+    box-shadow: 0 0 0 0.5px $mercury-gray;
     background-color: $white;
     transition: box-shadow 200ms ease-in-out;
 
     &--error {
-      box-shadow: 0 0 0 .5px $salmon-red;
+      box-shadow: 0 0 0 0.5px $salmon-red;
     }
 
     &:focus-within {
-      box-shadow: 0 0 .5px .5px $malibu-blue;
+      box-shadow: 0 0 0.5px 0.5px $malibu-blue;
     }
 
     &--error:focus-within {
-      box-shadow: 0 0 .5px .5px $salmon-red;
+      box-shadow: 0 0 0.5px 0.5px $salmon-red;
     }
   }
 
   &__label-row {
     @extend %row-nowrap;
     align-items: center;
     color: $dove-gray;
-    font-size: .75rem;
+    font-size: 0.75rem;
     line-height: 1rem;
-    padding: .75rem 1rem;
+    padding: 0.75rem 1rem;
   }
 
   &__label-container {
@@ -44,14 +44,14 @@
   }
 
   &__label-description {
-    opacity: .75;
-    margin-left: .25rem;
+    opacity: 0.75;
+    margin-left: 0.25rem;
   }
 
   &__input-row {
     @extend %row-nowrap;
     align-items: center;
-    padding: .25rem .85rem .75rem;
+    padding: 0.25rem 0.85rem 0.75rem;
   }
 
   &__input {
@@ -62,12 +62,12 @@
     }
 
     &[type='number'] {
-        -moz-appearance:textfield;
+      -moz-appearance: textfield;
     }
 
     &::-webkit-outer-spin-button,
     &::-webkit-inner-spin-button {
-        -webkit-appearance: none;
+      -webkit-appearance: none;
     }
   }
 
@@ -92,14 +92,14 @@
     user-select: none;
 
     &:active {
-      background-color: rgba($zumthor-blue, .8);
+      background-color: rgba($zumthor-blue, 0.8);
     }
 
     &--selected {
       background-color: $concrete-gray;
       border-color: $mercury-gray;
       color: $black;
-      padding: 0 .5rem;
+      padding: 0 0.5rem;
 
       .currency-input-panel__dropdown-icon {
         background-image: url(../../assets/images/dropdown.svg);
@@ -128,32 +128,31 @@
     user-select: none;
 
     &--pending {
-      line-height: .9;
+      line-height: 0.9;
       .loader {
-        height: .5rem;
-        width: .5rem;
+        height: 0.5rem;
+        width: 0.5rem;
       }
     }
   }
 
   &__dropdown-icon {
     height: 1rem;
-    width: .75rem;
-    margin-left: .7rem;
+    width: 0.75rem;
+    margin-left: 0.7rem;
     background-image: url(../../assets/images/dropdown-blue.svg);
     background-repeat: no-repeat;
     background-size: contain;
     background-position: 50% 50%;
   }
 
   &__selected-token-logo {
-    margin-right: .4rem;
+    margin-right: 0.4rem;
     border-radius: 1rem;
     object-fit: contain;
   }
 }
 
-
 .token-modal {
   background-color: $white;
   position: relative;
@@ -176,7 +175,7 @@
   }
 
   &__search-icon {
-    margin-right: .2rem;
+    margin-right: 0.2rem;
   }
 
   &__token-list {
@@ -189,7 +188,7 @@
     @extend %row-nowrap;
     align-items: center;
     padding: 1rem 1.5rem;
-    margin: .25rem .5rem;
+    margin: 0.25rem 0.5rem;
     justify-content: space-between;
     cursor: pointer;
     user-select: none;
@@ -235,7 +234,7 @@
       justify-content: center;
       background-color: $malibu-blue;
       &:hover {
-        background-color: lighten($malibu-blue, 1)
+        background-color: lighten($malibu-blue, 1);
       }
 
       &:active {
@@ -253,7 +252,7 @@
     color: $dove-gray;
   }
 
-  @media only screen and (min-width : 768px) {
+  @media only screen and (min-width: 768px) {
     max-width: 560px;
     max-height: 768px;
     position: absolute;
@@ -269,7 +268,6 @@
   }
 }
 
-
 .token-modal-appear {
   bottom: 0;
 }