project restructuring

README.md

@@ -26,6 +26,7 @@
 - [Features](#features)
 - [Download](#download)
 - [Development](#development)
+- [Configuration](#configuration)
 - [Build packages](#build-packages)
 - [License](#license)
 
@@ -39,9 +40,10 @@
 - re-fetches everything automatically every minute
 - balances are fetched via etherscan.io API
 - spot prices are fetched from coingecko.com API
-- detects system locale for number formatting
 - detects dark appearance setting and switches to dark theme automatically (macOS only)
 - detects system accent color and uses it as primary color (macOS & Windows only)
+- Touch Bar support (macOS only)
+- detects system locale for number formatting
 - currently highly optimized for macOS, your mileage on Windows or Linux may vary
 
 ## Download
@@ -57,6 +59,8 @@ Alternatively, you can [build the app on your system](#build-packages).
 
 ## Development
 
+The main app is a React app in `src/renderer/` wrapped within an Electron app defined in `src/main/`.
+
 Clone, and run:
 
 ```bash
@@ -70,6 +74,18 @@ npm install
 npm start
 ```
 
+## Configuration
+
+The app has a settings screen where you can add your account addresses.
+
+When building the app yourself, you can configure more in the `src/config.js` file:
+
+| Key                  | Description                                                                                                                    |
+| -------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| `conversions`        | Array defining the currencies the Ocean balance is converted to. Every currency listed here will appear in the ticker buttons. |
+| `refreshInterval`    | Defines the interval prices and balances are refetched.                                                                        |
+| `oceanTokenContract` | Contract address of the Ocean Token. You should not change this.                                                               |
+
 ## Build packages
 
 ```bash

package.json

@@ -3,7 +3,7 @@
   "productName": "Blowfish",
   "version": "1.0.2",
   "description": "🐡 Simple Electron-based desktop app to retrieve and display your total Ocean Token balances.",
-  "main": "./src/main.js",
+  "main": "./src/main/index.js",
   "scripts": {
     "test": "eslint ./src/**/*.{js,jsx} && stylelint ./src/**/*.css",
     "start": "webpack-dev-server --hot --host 0.0.0.0 --config=./webpack.dev.config.js",
@@ -21,13 +21,8 @@
   "license": "MIT",
   "dependencies": {
     "@coingecko/cryptoformat": "^0.3.1",
-    "@reach/router": "^1.2.1",
     "ethereum-address": "0.0.4",
-    "ms": "^2.1.1",
+    "ms": "^2.1.1"
-    "react": "^16.8.6",
-    "react-blockies": "^1.4.1",
-    "react-dom": "^16.8.6",
-    "react-pose": "^4.0.8"
   },
   "devDependencies": {
     "@babel/core": "^7.4.5",
@@ -36,6 +31,7 @@
     "@babel/preset-env": "^7.4.5",
     "@babel/preset-react": "^7.0.0",
     "@babel/runtime": "^7.4.5",
+    "@reach/router": "^1.2.1",
     "@svgr/webpack": "^4.2.0",
     "babel-eslint": "^10.0.1",
     "babel-loader": "^8.0.6",
@@ -52,6 +48,10 @@
     "html-webpack-plugin": "^3.2.0",
     "prettier": "^1.17.0",
     "prettier-stylelint": "^0.4.2",
+    "react": "^16.8.6",
+    "react-blockies": "^1.4.1",
+    "react-dom": "^16.8.6",
+    "react-pose": "^4.0.8",
     "style-loader": "^0.23.1",
     "stylelint": "^10.0.1",
     "stylelint-config-standard": "^18.3.0",
@@ -64,6 +64,7 @@
     "appId": "com.kremalicious.blowfish",
     "files": [
       "./build/**/*",
+      "./src/main/**/*",
       "./src/*.js",
       "package.json"
     ],

src/main/index.js

@@ -1,9 +1,9 @@
 const path = require('path')
 const { app, BrowserWindow, systemPreferences, ipcMain } = require('electron')
-const pkg = require('../package.json')
+const pkg = require('../../package.json')
 const buildMenu = require('./menu')
 const { buildTouchbar, updateTouchbar } = require('./touchbar')
-const { rgbaToHex } = require('./utils')
+const { rgbaToHex } = require('../utils')
 
 let mainWindow
 
@@ -44,7 +44,7 @@ const createWindow = async () => {
   mainWindow.loadURL(
     isDev
       ? 'http://localhost:8080'
-      : `file://${path.join(__dirname, '../build/index.html')}`
+      : `file://${path.join(__dirname, '../../build/index.html')}`
   )
 
   createWindowEvents(mainWindow)

src/main/menu.js

@@ -1,6 +1,6 @@
 const { app, Menu } = require('electron')
-const { openUrl } = require('./utils')
+const { openUrl } = require('../utils')
-const { homepage } = require('../package.json')
+const { homepage } = require('../../package.json')
 
 const buildMenu = mainWindow => {
   const template = [

src/main/touchbar.js

@@ -1,6 +1,6 @@
 const { TouchBar } = require('electron')
-const { cryptoFormatter } = require('./utils')
+const { cryptoFormatter } = require('../utils')
-const { conversions } = require('./config')
+const { conversions } = require('../config')
 
 const { TouchBarButton } = TouchBar
 

webpack.common.config.js

@@ -2,10 +2,10 @@ const path = require('path')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const CopyPlugin = require('copy-webpack-plugin')
 
-const defaultInclude = [path.resolve(__dirname, 'src')]
+const defaultInclude = [path.resolve(__dirname, 'src', 'renderer')]
 
 module.exports = {
-  entry: path.resolve(__dirname, 'src', 'app', 'index.js'),
+  entry: path.resolve(__dirname, 'src', 'renderer', 'index.js'),
   output: {
     path: path.resolve(__dirname, 'build'),
     filename: 'bundle.js',
@@ -42,7 +42,7 @@ module.exports = {
   plugins: [
     new HtmlWebpackPlugin(),
     new CopyPlugin([
-      { from: './src/app/images/icon.*', to: './', flatten: true }
+      { from: './src/renderer/images/icon.*', to: './', flatten: true }
     ])
   ]
 }