package updates

.stylelintrc

@@ -1,7 +1,6 @@
 {
-  "extends": [
-    "stylelint-config-standard",
-    "stylelint-config-css-modules",
-    "./node_modules/prettier-stylelint/config.js"
-  ]
+  "plugins": ["stylelint-prettier"],
+  "rules": {
+    "prettier/prettier": true
+  }
 }

package.json

@@ -17,8 +17,7 @@
     "dist": "./scripts/release-prepare.sh",
     "release": "release-it --non-interactive",
     "changelog": "auto-changelog -p",
-    "format": "prettier --write --ignore-path .gitignore 'src/**/*.{js,jsx,json}' && npm run format:css",
-    "format:css": "prettier-stylelint --write --ignore-path .gitignore --quiet 'src/**/*.{css,scss}'"
+    "format": "prettier --write --ignore-path .gitignore 'src/**/*.{js,jsx,json,css,scss}'"
   },
   "repository": "https://github.com/kremalicious/blowfish.git",
   "homepage": "https://github.com/kremalicious/blowfish",
@@ -42,8 +41,8 @@
     "shortid": "^2.2.15"
   },
   "devDependencies": {
-    "@babel/core": "^7.8.7",
-    "@babel/preset-env": "^7.8.7",
+    "@babel/core": "^7.9.0",
+    "@babel/preset-env": "^7.9.0",
     "@jest-runner/electron": "^2.0.3",
     "@react-mock/state": "^0.1.8",
     "@svgr/webpack": "^5.2.0",
@@ -56,23 +55,21 @@
     "cross-env": "^7.0.2",
     "dotenv": "^8.2.0",
     "electron": "^8.1.1",
-    "electron-builder": "^22.4.0",
+    "electron-builder": "^22.4.1",
     "electron-devtools-installer": "^2.2.4",
     "eslint": "^6.8.0",
     "eslint-config-prettier": "^6.10.0",
     "eslint-plugin-react": "^7.19.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^25.1.0",
-    "next": "^9.3.0",
-    "prettier": "^1.19.1",
-    "prettier-stylelint": "^0.4.2",
-    "react": "^16.13.0",
-    "react-dom": "^16.13.0",
+    "next": "^9.3.1",
+    "prettier": "^2.0.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "react-pose": "^4.0.10",
-    "release-it": "^13.0.0",
+    "release-it": "^13.1.2",
     "stylelint": "^13.2.1",
-    "stylelint-config-css-modules": "^2.2.0",
-    "stylelint-config-standard": "^20.0.0"
+    "stylelint-prettier": "^1.1.2"
   },
   "browserslist": "electron >= 8.0",
   "build": {

src/main/index.js

@@ -111,7 +111,7 @@ app.on('activate', () => {
   }
 })
 
-const installDevTools = async mainWindow => {
+const installDevTools = async (mainWindow) => {
   if (isDev) {
     const {
       default: installExtension,
@@ -134,7 +134,7 @@ const installDevTools = async mainWindow => {
   }
 }
 
-const createWindowEvents = mainWindow => {
+const createWindowEvents = (mainWindow) => {
   mainWindow.on('enter-full-screen', () =>
     mainWindow.webContents.executeJavaScript(
       'document.getElementsByTagName("html")[0].classList.add("fullscreen")'

src/main/menu.js

@@ -2,7 +2,7 @@ const { app, Menu } = require('electron')
 const { openUrl } = require('../utils')
 const { homepage } = require('../../package.json')
 
-const buildMenu = mainWindow => {
+const buildMenu = (mainWindow) => {
   const template = [
     {
       label: 'Edit',

src/main/touchbar.js

@@ -21,7 +21,7 @@ const buildTouchbar = (mainWindow, accentColor) => {
   const touchBar = new TouchBar({
     items: [
       createButton(1, 'ocean', mainWindow, accentColor),
-      ...conversions.map(key => createButton(0, key, mainWindow, accentColor))
+      ...conversions.map((key) => createButton(0, key, mainWindow, accentColor))
     ]
   })
 
@@ -34,7 +34,7 @@ const updateTouchbar = (
   accentColor,
   currentCurrency = 'ocean'
 ) => {
-  const items = pricesNew.map(item => {
+  const items = pricesNew.map((item) => {
     return createButton(
       item[1],
       item[0],

src/renderer/components/Home/Ticker.jsx

@@ -55,7 +55,7 @@ const Items = () => {
   ))
 }
 
-const Ticker = props => (
+const Ticker = (props) => (
   <footer className={styles.ticker} {...props}>
     <div className={stylesIndex.balancewrap}>
       <PoseGroup animateOnMount>

src/renderer/components/Home/Total.jsx

@@ -23,7 +23,7 @@ const Total = () => {
   const { accounts } = useContext(AppContext)
 
   const conversionsBalance = Object.assign(
-    ...conversions.map(key => ({
+    ...conversions.map((key) => ({
       [key]: calculateTotalBalance(accounts, key)
     }))
   )

src/renderer/components/Preferences/AccountsList/New.jsx

@@ -14,13 +14,13 @@ export default function New({
         type="text"
         placeholder="0xxxxxxxx"
         value={input}
-        onChange={e => handleInputChange(e)}
+        onChange={(e) => handleInputChange(e)}
         className={styles.input}
       />
 
       <button
         className={styles.button}
-        onClick={e => handleSave(e)}
+        onClick={(e) => handleSave(e)}
         style={{ color: accentColor }}
       >
         Add

src/renderer/components/Preferences/AccountsList/Saved.jsx

@@ -10,7 +10,7 @@ export default function Saved({ accounts, handleDelete }) {
 
   return (
     <PoseGroup>
-      {accounts.map(account => {
+      {accounts.map((account) => {
         const identicon = toDataUrl(account)
 
         return (
@@ -26,7 +26,7 @@ export default function Saved({ accounts, handleDelete }) {
 
             <button
               className={styles.delete}
-              onClick={e => handleDelete(e, account)}
+              onClick={(e) => handleDelete(e, account)}
               title="Remove account"
             >
               &times;

src/renderer/components/Preferences/AccountsList/index.jsx

@@ -19,11 +19,11 @@ export default class AccountsList extends PureComponent {
     }
   }
 
-  handleInputChange = e => {
+  handleInputChange = (e) => {
     this.setState({ input: e.target.value })
   }
 
-  handleSave = e => {
+  handleSave = (e) => {
     e.preventDefault()
 
     const { accounts, input } = this.state
@@ -56,7 +56,7 @@ export default class AccountsList extends PureComponent {
     e.preventDefault()
 
     let array = this.state.accounts
-    array = array.filter(item => account !== item)
+    array = array.filter((item) => account !== item)
 
     const index = array.indexOf(account)
     if (index > -1) {

src/renderer/next.config.js

@@ -26,7 +26,7 @@ const withSvgr = (nextConfig = {}) => {
 
 const withElectron = (nextConfig = {}) => {
   return Object.assign({}, nextConfig, {
-    webpack: config => {
+    webpack: (config) => {
       config.target = 'electron-renderer'
       return config
     }

src/renderer/store/AppProvider.jsx

@@ -57,7 +57,7 @@ export default function AppProvider({ children }) {
       const oceanBalance = await getBalance(account)
 
       const conversionsBalance = Object.assign(
-        ...conversions.map(key => ({
+        ...conversions.map((key) => ({
           [key]: oceanBalance * prices.get(key) || 0
         }))
       )

src/renderer/store/PriceProvider.jsx

@@ -10,12 +10,12 @@ export default function PriceProvider({ children }) {
   // order for Ticker and Touchbar
   let pricesMap = new Map()
   pricesMap.set('ocean', 1)
-  conversions.map(key => pricesMap.set(key, 0))
+  conversions.map((key) => pricesMap.set(key, 0))
 
   const [prices, setPrices] = useState(pricesMap)
   const [priceChanges, setPriceChanges] = useState(
     Object.assign(
-      ...conversions.map(key => ({
+      ...conversions.map((key) => ({
         [key]: 0
       }))
     )

src/renderer/store/helpers.js

@@ -11,10 +11,10 @@ export async function fetchAndSetPrices(prices) {
   )
 
   let newPrices = new Map(prices) // make a shallow copy of the Map
-  conversions.map(key => newPrices.set(key, json['ocean-protocol'][key])) // modify the copy
+  conversions.map((key) => newPrices.set(key, json['ocean-protocol'][key])) // modify the copy
 
   const newPriceChanges = await Object.assign(
-    ...conversions.map(key => ({
+    ...conversions.map((key) => ({
       [key]: json['ocean-protocol'][key + '_24h_change']
     }))
   )

src/utils.js

@@ -2,7 +2,7 @@ const { app, shell } = require('electron')
 const { formatCurrency } = require('@coingecko/cryptoformat')
 const axios = require('axios')
 
-const fetchData = async url => {
+const fetchData = async (url) => {
   try {
     const response = await axios(url)
 
@@ -16,13 +16,13 @@ const fetchData = async url => {
   }
 }
 
-const isFiat = currency => currency === 'eur' || currency === 'usd'
+const isFiat = (currency) => currency === 'eur' || currency === 'usd'
 
-const openUrl = url => {
+const openUrl = (url) => {
   shell.openExternal(url)
 }
 
-const rgbaToHex = color => {
+const rgbaToHex = (color) => {
   const r = color.substr(0, 2)
   const g = color.substr(2, 2)
   const b = color.substr(4, 2)
@@ -35,13 +35,13 @@ const locale =
   typeof navigator !== 'undefined' ? navigator.language : () => app.getLocale()
 
 // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat
-const numberFormatter = value =>
+const numberFormatter = (value) =>
   new Intl.NumberFormat(locale, {
     minimumFractionDigits: 0,
     maximumFractionDigits: 4
   }).format(value)
 
-const formatOcean = value => {
+const formatOcean = (value) => {
   const numberformatted = new Intl.NumberFormat(locale, {
     minimumFractionDigits: 0,
     maximumFractionDigits: 4,

tests/Providers.test.jsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import {
   render,
-  waitForElement,
   waitForElementToBeRemoved,
-  fireEvent
+  fireEvent,
+  wait
 } from '@testing-library/react'
 import AppProvider from '../src/renderer/store/AppProvider'
 import PriceProvider from '../src/renderer/store/PriceProvider'
@@ -38,7 +38,7 @@ describe('Providers', () => {
           </AppProvider>
         </PriceContext.Provider>
       )
-      await waitForElement(() => getByText('Click'))
+      await wait(() => getByText('Click'))
       expect(getByText('Click')).toBeInTheDocument()
 
       fireEvent.click(getByText('Click'))