diff --git a/.babelrc b/.babelrc deleted file mode 100644 index d5a26dc..0000000 --- a/.babelrc +++ /dev/null @@ -1,14 +0,0 @@ -{ - "presets": [ - [ - "@babel/env", - { - "targets": { - "node": "current" - } - } - ], - "@babel/react" - ], - "plugins": ["@babel/plugin-proposal-class-properties"] -} diff --git a/.gitignore b/.gitignore index 0a06796..abce006 100644 --- a/.gitignore +++ b/.gitignore @@ -4,3 +4,5 @@ package-lock.json build dist coverage +.next +out \ No newline at end of file diff --git a/package.json b/package.json index ade5651..fa7e407 100644 --- a/package.json +++ b/package.json @@ -5,13 +5,13 @@ "description": "🐡 Simple Electron-based desktop app to retrieve and display your total Ocean Token balances.", "main": "./src/main/index.js", "scripts": { + "start": "electron .", "test": "npm run lint && jest", "test:watch": "jest --watch", "lint": "eslint --ignore-path .gitignore ./src/**/*.{js,jsx} && stylelint --ignore-path .gitignore ./src/**/*.{css,scss}", - "start": "webpack-dev-server --hot --host 0.0.0.0 --config=./webpack.dev.config.js", - "build": "cross-env NODE_ENV=production webpack --config webpack.common.config.js", - "package": "electron-builder build -ml -p never", - "package:win": "electron-builder build -w -p never", + "build:react": "next build src/renderer && next export src/renderer", + "build:electron": "electron-builder build -ml -p never", + "build:electron:win": "electron-builder build -w -p never", "dist": "./scripts/release-prepare.sh", "release": "release-it --non-interactive", "changelog": "auto-changelog -p", @@ -30,15 +30,13 @@ "@coingecko/cryptoformat": "^0.3.3", "ethereum-address": "^0.0.4", "ethereum-blockies": "github:MyEtherWallet/blockies", - "ms": "^2.1.2" + "ms": "^2.1.2", + "shortid": "^2.2.15" }, "devDependencies": { "@babel/core": "^7.8.4", - "@babel/plugin-proposal-class-properties": "^7.8.3", "@babel/preset-env": "^7.8.4", - "@babel/preset-react": "^7.8.3", "@jest-runner/electron": "^2.0.3", - "@reach/router": "^1.3.1", "@react-mock/state": "^0.1.8", "@svgr/webpack": "^5.0.0", "@testing-library/jest-dom": "^5.0.0", @@ -46,42 +44,35 @@ "auto-changelog": "^1.16.2", "babel-eslint": "^10.0.3", "babel-jest": "^25.1.0", - "babel-loader": "^8.0.6", - "copy-webpack-plugin": "^5.1.1", - "cross-env": "^7.0.0", - "css-loader": "^3.4.2", "electron": "^8.0.0", "electron-builder": "^22.3.2", "electron-devtools-installer": "^2.2.4", + "electron-is-dev": "^1.1.0", + "electron-next": "^3.1.5", "electron-store": "^5.1.0", "eslint": "^6.8.0", "eslint-config-prettier": "^6.10.0", "eslint-plugin-react": "^7.18.3", - "file-loader": "^5.0.2", - "html-webpack-plugin": "^3.2.0", "identity-obj-proxy": "^3.0.0", "jest": "^25.1.0", - "mini-css-extract-plugin": "^0.9.0", + "next": "^9.2.1", "prettier": "^1.19.1", "prettier-stylelint": "^0.4.2", "react": "^16.12.0", "react-dom": "^16.12.0", "react-pose": "^4.0.10", "release-it": "^12.4.3", - "style-loader": "^1.1.3", "stylelint": "^13.1.0", "stylelint-config-css-modules": "^2.1.0", - "stylelint-config-standard": "^19.0.0", - "webpack": "^4.41.5", - "webpack-cli": "^3.3.10", - "webpack-dev-server": "^3.10.3" + "stylelint-config-standard": "^19.0.0" }, - "browserslist": "electron >= 6.0", + "browserslist": "electron >= 8.0", "build": { + "asar": true, "appId": "com.kremalicious.blowfish", "files": [ - "./build/**/*", "./src/main/**/*", + "./src/renderer/out/**/*", "./src/*.js", "package.json" ], diff --git a/scripts/release-prepare.sh b/scripts/release-prepare.sh index 6b4d8e7..dcf80d5 100755 --- a/scripts/release-prepare.sh +++ b/scripts/release-prepare.sh @@ -1,8 +1,8 @@ #!/bin/bash -rm -rf {dist,build}/ && \ -npm run build && \ -npm run package && \ +rm -rf {dist,src/renderer/.next,src/renderer/out}/ && \ +npm run build:react && \ +npm run build:electron && \ if [ -x "$(command -v docker)" ]; then docker run --rm \ @@ -14,6 +14,6 @@ if [ -x "$(command -v docker)" ]; then -v ~/.cache/electron:/root/.cache/electron \ -v ~/.cache/electron-builder:/root/.cache/electron-builder \ electronuserland/builder:wine \ - /bin/bash -c "npm i && npm run build && npm run package:win" + /bin/bash -c "npm i && npm run build && npm run build:electron:win" fi diff --git a/src/main/index.js b/src/main/index.js index 9e62dfe..c1a54e6 100644 --- a/src/main/index.js +++ b/src/main/index.js @@ -6,6 +6,8 @@ const { nativeTheme, ipcMain } = require('electron') +const prepareNext = require('electron-next') +const isDev = require('electron-is-dev') const pkg = require('../../package.json') const buildMenu = require('./menu') const { buildTouchbar, updateTouchbar } = require('./touchbar') @@ -13,16 +15,6 @@ const { rgbaToHex } = require('../utils') let mainWindow -// Keep a reference for dev mode -let isDev = false -if ( - process.defaultApp || - /[\\/]electron-prebuilt[\\/]/.test(process.execPath) || - /[\\/]electron[\\/]/.test(process.execPath) -) { - isDev = true -} - const width = 640 const height = 450 @@ -46,13 +38,14 @@ const createWindow = async () => { nodeIntegration: true, scrollBounce: true, enableBlinkFeatures: 'OverlayScrollbars' + // preload: path.join(__dirname, 'preload.js') } }) mainWindow.loadURL( isDev - ? 'http://localhost:8080' - : `file://${path.join(__dirname, '../../build/index.html')}` + ? 'http://localhost:8000' + : `file://${path.join(__dirname, '../renderer/out/index.html')}` ) createWindowEvents(mainWindow) @@ -85,7 +78,9 @@ const createWindow = async () => { } } -app.on('ready', () => { +app.on('ready', async () => { + await prepareNext('./src/renderer') + createWindow() mainWindow.webContents.on('dom-ready', () => { @@ -138,22 +133,22 @@ const installDevTools = async mainWindow => { const createWindowEvents = mainWindow => { mainWindow.on('enter-full-screen', () => mainWindow.webContents.executeJavaScript( - 'document.getElementsByTagName(\'html\')[0].classList.add(\'fullscreen\')' + 'document.getElementsByTagName("html")[0].classList.add("fullscreen")' ) ) mainWindow.on('leave-full-screen', () => mainWindow.webContents.executeJavaScript( - 'document.getElementsByTagName(\'html\')[0].classList.remove(\'fullscreen\')' + 'document.getElementsByTagName("html")[0].classList.remove("fullscreen")' ) ) mainWindow.on('blur', () => mainWindow.webContents.executeJavaScript( - 'document.getElementsByTagName(\'html\')[0].classList.add(\'blur\')' + 'document.getElementsByTagName("html")[0].classList.add("blur")' ) ) mainWindow.on('focus', () => mainWindow.webContents.executeJavaScript( - 'document.getElementsByTagName(\'html\')[0].classList.remove(\'blur\')' + 'document.getElementsByTagName("html")[0].classList.remove("blur")' ) ) } @@ -197,10 +192,10 @@ const switchTheme = () => { isDarkMode ? mainWindow.webContents.executeJavaScript( - 'document.getElementsByTagName(\'html\')[0].classList.add(\'dark\')' + 'document.getElementsByTagName("html")[0].classList.add("dark")' ) : mainWindow.webContents.executeJavaScript( - 'document.getElementsByTagName(\'html\')[0].classList.remove(\'dark\')' + 'document.getElementsByTagName("html")[0].classList.remove("dark")' ) } } diff --git a/src/main/preload.js b/src/main/preload.js new file mode 100644 index 0000000..f9d22f4 --- /dev/null +++ b/src/main/preload.js @@ -0,0 +1,12 @@ +const { webFrame, ipcRenderer } = require('electron') +const Store = require('electron-store') + +const store = new Store() + +// Since we disabled nodeIntegration we can reintroduce +// needed node functionality here +process.once('loaded', () => { + global.ipcRenderer = ipcRenderer + global.webFrame = webFrame + global.store = store +}) diff --git a/src/renderer/App.jsx b/src/renderer/App.jsx deleted file mode 100644 index a1c75af..0000000 --- a/src/renderer/App.jsx +++ /dev/null @@ -1,65 +0,0 @@ -import React, { useEffect } from 'react' -import PropTypes from 'prop-types' -import { - Router, - createMemorySource, - createHistory, - LocationProvider, - navigate -} from '@reach/router' -import { webFrame, ipcRenderer } from 'electron' -import posed, { PoseGroup } from 'react-pose' -import Titlebar from './components/Titlebar' -import { defaultAnimation } from './components/Animations' -import Home from './screens/Home' -import Preferences from './screens/Preferences' -import styles from './App.module.css' - -// -// Disable zooming -// -webFrame.setVisualZoomLevelLimits(1, 1) -webFrame.setLayoutZoomLevelLimits(0, 0) - -const Animation = posed.div(defaultAnimation) - -// Fix reach-router in packaged Electron -// https://github.com/reach/router/issues/25#issuecomment-394003652 -let source = createMemorySource('/') -let history = createHistory(source) - -const PosedRouter = ({ children }) => ( - - {({ location }) => ( - - - {children} - - - )} - -) - -PosedRouter.propTypes = { - children: PropTypes.any.isRequired -} - -export default function App() { - useEffect(() => { - ipcRenderer.on('goTo', (evt, route) => { - navigate(route) - }) - }, []) - - return ( - <> - {process.platform === 'darwin' && } -
- - - - -
- - ) -} diff --git a/src/renderer/babel.config.js b/src/renderer/babel.config.js new file mode 100644 index 0000000..3d88cfe --- /dev/null +++ b/src/renderer/babel.config.js @@ -0,0 +1,16 @@ +const { devDependencies } = require('../../package.json') + +module.exports = { + presets: [ + [ + 'next/babel', + { + 'preset-env': { + targets: { + electron: devDependencies.electron.replace(/^\^|~/, '') + } + } + } + ] + ] +} diff --git a/src/renderer/index.js b/src/renderer/index.js deleted file mode 100644 index e606b4d..0000000 --- a/src/renderer/index.js +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react' -import { render } from 'react-dom' -import AppProvider from './store/AppProvider' -import App from './App' -import pkg from '../../package.json' -import './index.css' - -document.body.style.backgroundColor = '#141414' - -// Since we are using HtmlWebpackPlugin WITHOUT a template, we should create our own root node in the body element before rendering into it -let root = document.createElement('div') -root.id = 'root' -document.body.appendChild(root) -document.title = pkg.productName - -render( - - - , - document.getElementById('root') -) diff --git a/src/renderer/App.test.jsx b/src/renderer/jest/App.test.jsx similarity index 87% rename from src/renderer/App.test.jsx rename to src/renderer/jest/App.test.jsx index 7145615..d55e078 100644 --- a/src/renderer/App.test.jsx +++ b/src/renderer/jest/App.test.jsx @@ -1,6 +1,6 @@ import React from 'react' import { render } from '@testing-library/react' -import AppProvider from './store/AppProvider' +import AppProvider from '../store/AppProvider' import App from './App' describe('App', () => { diff --git a/src/renderer/screens/Home/index.test.jsx b/src/renderer/jest/index.test.jsx similarity index 86% rename from src/renderer/screens/Home/index.test.jsx rename to src/renderer/jest/index.test.jsx index 82bbcd3..a2adff5 100644 --- a/src/renderer/screens/Home/index.test.jsx +++ b/src/renderer/jest/index.test.jsx @@ -1,7 +1,7 @@ import React from 'react' import { render, fireEvent } from '@testing-library/react' -import { AppContext } from '../../store/createContext' -import context from '../../jest/__fixtures__/context' +import { AppContext } from '../store/createContext' +import context from './__fixtures__/context' import Home from '.' describe('Home', () => { diff --git a/src/renderer/screens/Preferences/index.test.jsx b/src/renderer/jest/preferences.test.jsx similarity index 87% rename from src/renderer/screens/Preferences/index.test.jsx rename to src/renderer/jest/preferences.test.jsx index 43d0ebf..369408f 100644 --- a/src/renderer/screens/Preferences/index.test.jsx +++ b/src/renderer/jest/preferences.test.jsx @@ -1,6 +1,6 @@ import React from 'react' import { render } from '@testing-library/react' -import { AppContext } from '../../store/createContext' +import { AppContext } from '../store/createContext' import Preferences from '.' describe('Preferences', () => { diff --git a/src/renderer/next.config.js b/src/renderer/next.config.js new file mode 100644 index 0000000..f000d6a --- /dev/null +++ b/src/renderer/next.config.js @@ -0,0 +1,41 @@ +// eslint-disable-next-line no-unused-vars +const withSvgr = (nextConfig = {}, nextComposePlugins = {}) => { + return Object.assign({}, nextConfig, { + webpack(config, options) { + config.module.rules.push({ + test: /\.svg$/, + use: [ + { + loader: '@svgr/webpack', + options: { + icon: true + } + } + ] + }) + + if (typeof nextConfig.webpack === 'function') { + return nextConfig.webpack(config, options) + } + + return config + } + }) +} + +module.exports = withSvgr({ + webpack: config => { + config.target = 'electron-renderer' + + return config + } + // exportPathMap() { + // // Let Next.js know where to find the entry page + // // when it's exporting the static bundle for the use + // // in the production version of your app + // return { + // '/': { page: '/' }, + // '/preferences': { page: '/preferences' } + // } + // } +}) diff --git a/src/renderer/screens/Home/Accounts.module.css b/src/renderer/screens/Home/Accounts.module.css deleted file mode 100644 index 295138a..0000000 --- a/src/renderer/screens/Home/Accounts.module.css +++ /dev/null @@ -1,5 +0,0 @@ -.accounts { - composes: balanceWrap from './index.module.css'; - min-height: 55px; - padding-top: 2rem; -} diff --git a/src/renderer/screens/Preferences/index.jsx b/src/renderer/screens/Preferences/index.jsx deleted file mode 100644 index 86a389c..0000000 --- a/src/renderer/screens/Preferences/index.jsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react' -import { Link } from '@reach/router' -import Accounts from './Accounts' -import styles from './index.module.css' - -const Preferences = () => ( -
-

Preferences

{' '} - - × - - -
-) - -export default Preferences diff --git a/src/renderer/src/Layout.jsx b/src/renderer/src/Layout.jsx new file mode 100644 index 0000000..8272a0a --- /dev/null +++ b/src/renderer/src/Layout.jsx @@ -0,0 +1,27 @@ +import React from 'react' +import PropTypes from 'prop-types' +import posed, { PoseGroup } from 'react-pose' +import shortid from 'shortid' +import AppProvider from './store/AppProvider' +import { defaultAnimation } from './components/Animations' +import Titlebar from './components/Titlebar' +import styles from './Layout.module.css' + +const Animation = posed.div(defaultAnimation) + +export default function Layout({ children }) { + return ( + + {process.platform === 'darwin' && } +
+ + {children} + +
+ + ) +} + +Layout.propTypes = { + children: PropTypes.any.isRequired +} diff --git a/src/renderer/App.module.css b/src/renderer/src/Layout.module.css similarity index 100% rename from src/renderer/App.module.css rename to src/renderer/src/Layout.module.css diff --git a/src/renderer/components/Animations.js b/src/renderer/src/components/Animations.js similarity index 100% rename from src/renderer/components/Animations.js rename to src/renderer/src/components/Animations.js diff --git a/src/renderer/components/Balance.jsx b/src/renderer/src/components/Balance.jsx similarity index 95% rename from src/renderer/components/Balance.jsx rename to src/renderer/src/components/Balance.jsx index 0335a40..3b00715 100644 --- a/src/renderer/components/Balance.jsx +++ b/src/renderer/src/components/Balance.jsx @@ -2,7 +2,7 @@ import React, { useContext } from 'react' import PropTypes from 'prop-types' import posed, { PoseGroup } from 'react-pose' import { AppContext } from '../store/createContext' -import { cryptoFormatter } from '../../utils' +import { cryptoFormatter } from '../../../utils' import { fadeIn } from './Animations' import Label from './Label' import styles from './Balance.module.css' diff --git a/src/renderer/components/Balance.module.css b/src/renderer/src/components/Balance.module.css similarity index 100% rename from src/renderer/components/Balance.module.css rename to src/renderer/src/components/Balance.module.css diff --git a/src/renderer/components/Box.module.css b/src/renderer/src/components/Box.module.css similarity index 100% rename from src/renderer/components/Box.module.css rename to src/renderer/src/components/Box.module.css diff --git a/src/renderer/components/Divider.jsx b/src/renderer/src/components/Divider.jsx similarity index 100% rename from src/renderer/components/Divider.jsx rename to src/renderer/src/components/Divider.jsx diff --git a/src/renderer/components/Divider.module.css b/src/renderer/src/components/Divider.module.css similarity index 100% rename from src/renderer/components/Divider.module.css rename to src/renderer/src/components/Divider.module.css diff --git a/src/renderer/screens/Home/Accounts.jsx b/src/renderer/src/components/Home/Accounts.jsx similarity index 87% rename from src/renderer/screens/Home/Accounts.jsx rename to src/renderer/src/components/Home/Accounts.jsx index d0ebc14..805907e 100644 --- a/src/renderer/screens/Home/Accounts.jsx +++ b/src/renderer/src/components/Home/Accounts.jsx @@ -1,6 +1,6 @@ import React, { useContext } from 'react' -import { openUrl } from '../../../utils' -import Balance from '../../components/Balance' +import { openUrl } from '../../../../utils' +import Balance from '../Balance' import { AppContext } from '../../store/createContext' import styles from './Accounts.module.css' diff --git a/src/renderer/src/components/Home/Accounts.module.css b/src/renderer/src/components/Home/Accounts.module.css new file mode 100644 index 0000000..dfb643f --- /dev/null +++ b/src/renderer/src/components/Home/Accounts.module.css @@ -0,0 +1,5 @@ +.accounts { + composes: balanceWrap from '../../pages/index.module.css'; + min-height: 55px; + padding-top: 2rem; +} diff --git a/src/renderer/screens/Home/Ticker.jsx b/src/renderer/src/components/Home/Ticker.jsx similarity index 92% rename from src/renderer/screens/Home/Ticker.jsx rename to src/renderer/src/components/Home/Ticker.jsx index 1e69168..96a8f2e 100644 --- a/src/renderer/screens/Home/Ticker.jsx +++ b/src/renderer/src/components/Home/Ticker.jsx @@ -2,10 +2,10 @@ import React, { useContext } from 'react' import PropTypes from 'prop-types' import posed, { PoseGroup } from 'react-pose' import { AppContext } from '../../store/createContext' -import { cryptoFormatter } from '../../../utils' -import stylesIndex from './index.module.css' +import { cryptoFormatter } from '../../../../utils' +import stylesIndex from '../../pages/index.module.css' import styles from './Ticker.module.css' -import { fadeIn } from '../../components/Animations' +import { fadeIn } from '../Animations' const Item = posed.div(fadeIn) diff --git a/src/renderer/screens/Home/Ticker.module.css b/src/renderer/src/components/Home/Ticker.module.css similarity index 100% rename from src/renderer/screens/Home/Ticker.module.css rename to src/renderer/src/components/Home/Ticker.module.css diff --git a/src/renderer/screens/Home/Total.jsx b/src/renderer/src/components/Home/Total.jsx similarity index 90% rename from src/renderer/screens/Home/Total.jsx rename to src/renderer/src/components/Home/Total.jsx index 85b24e1..dda91ab 100644 --- a/src/renderer/screens/Home/Total.jsx +++ b/src/renderer/src/components/Home/Total.jsx @@ -1,7 +1,7 @@ import React, { useContext } from 'react' import { AppContext } from '../../store/createContext' -import Balance from '../../components/Balance' -import { conversions } from '../../../config' +import Balance from '../Balance' +import { conversions } from '../../../../config' const calculateTotalBalance = (accounts, currency) => { const balanceTotalArray = [] diff --git a/src/renderer/screens/Home/Welcome.jsx b/src/renderer/src/components/Home/Welcome.jsx similarity index 81% rename from src/renderer/screens/Home/Welcome.jsx rename to src/renderer/src/components/Home/Welcome.jsx index bf26368..3e06b70 100644 --- a/src/renderer/screens/Home/Welcome.jsx +++ b/src/renderer/src/components/Home/Welcome.jsx @@ -1,5 +1,5 @@ import React, { useContext } from 'react' -import { Link } from '@reach/router' +import Link from 'next/link' import { AppContext } from '../../store/createContext' import IconRocket from '../../images/rocket.svg' import styles from './Welcome.module.css' @@ -10,7 +10,7 @@ const Welcome = () => { return (
- + Add your first address to get started.
diff --git a/src/renderer/screens/Home/Welcome.module.css b/src/renderer/src/components/Home/Welcome.module.css similarity index 100% rename from src/renderer/screens/Home/Welcome.module.css rename to src/renderer/src/components/Home/Welcome.module.css diff --git a/src/renderer/components/Label.jsx b/src/renderer/src/components/Label.jsx similarity index 100% rename from src/renderer/components/Label.jsx rename to src/renderer/src/components/Label.jsx diff --git a/src/renderer/components/Label.module.css b/src/renderer/src/components/Label.module.css similarity index 100% rename from src/renderer/components/Label.module.css rename to src/renderer/src/components/Label.module.css diff --git a/src/renderer/screens/Preferences/Accounts/New.jsx b/src/renderer/src/components/Preferences/Accounts/New.jsx similarity index 100% rename from src/renderer/screens/Preferences/Accounts/New.jsx rename to src/renderer/src/components/Preferences/Accounts/New.jsx diff --git a/src/renderer/screens/Preferences/Accounts/New.module.css b/src/renderer/src/components/Preferences/Accounts/New.module.css similarity index 100% rename from src/renderer/screens/Preferences/Accounts/New.module.css rename to src/renderer/src/components/Preferences/Accounts/New.module.css diff --git a/src/renderer/screens/Preferences/Accounts/Saved.jsx b/src/renderer/src/components/Preferences/Accounts/Saved.jsx similarity index 94% rename from src/renderer/screens/Preferences/Accounts/Saved.jsx rename to src/renderer/src/components/Preferences/Accounts/Saved.jsx index a298c7a..9162f46 100644 --- a/src/renderer/screens/Preferences/Accounts/Saved.jsx +++ b/src/renderer/src/components/Preferences/Accounts/Saved.jsx @@ -2,7 +2,7 @@ import React from 'react' import PropTypes from 'prop-types' import { toDataUrl } from 'ethereum-blockies' import posed, { PoseGroup } from 'react-pose' -import { fadeIn } from '../../../components/Animations' +import { fadeIn } from '../../Animations' import styles from './Saved.module.css' export default function Saved({ accounts, handleDelete }) { diff --git a/src/renderer/screens/Preferences/Accounts/Saved.module.css b/src/renderer/src/components/Preferences/Accounts/Saved.module.css similarity index 100% rename from src/renderer/screens/Preferences/Accounts/Saved.module.css rename to src/renderer/src/components/Preferences/Accounts/Saved.module.css diff --git a/src/renderer/screens/Preferences/Accounts/index.jsx b/src/renderer/src/components/Preferences/Accounts/index.jsx similarity index 100% rename from src/renderer/screens/Preferences/Accounts/index.jsx rename to src/renderer/src/components/Preferences/Accounts/index.jsx index de556ec..c259230 100644 --- a/src/renderer/screens/Preferences/Accounts/index.jsx +++ b/src/renderer/src/components/Preferences/Accounts/index.jsx @@ -1,6 +1,6 @@ import React, { PureComponent } from 'react' -import Store from 'electron-store' import ethereum_address from 'ethereum-address' +import Store from 'electron-store' import { AppContext } from '../../../store/createContext' import Saved from './Saved' import New from './New' diff --git a/src/renderer/screens/Preferences/Accounts/index.module.css b/src/renderer/src/components/Preferences/Accounts/index.module.css similarity index 100% rename from src/renderer/screens/Preferences/Accounts/index.module.css rename to src/renderer/src/components/Preferences/Accounts/index.module.css diff --git a/src/renderer/screens/Preferences/Accounts/index.test.jsx b/src/renderer/src/components/Preferences/Accounts/index.test.jsx similarity index 100% rename from src/renderer/screens/Preferences/Accounts/index.test.jsx rename to src/renderer/src/components/Preferences/Accounts/index.test.jsx diff --git a/src/renderer/components/Spinner.jsx b/src/renderer/src/components/Spinner.jsx similarity index 100% rename from src/renderer/components/Spinner.jsx rename to src/renderer/src/components/Spinner.jsx diff --git a/src/renderer/components/Spinner.module.css b/src/renderer/src/components/Spinner.module.css similarity index 100% rename from src/renderer/components/Spinner.module.css rename to src/renderer/src/components/Spinner.module.css diff --git a/src/renderer/components/Titlebar.jsx b/src/renderer/src/components/Titlebar.jsx similarity index 84% rename from src/renderer/components/Titlebar.jsx rename to src/renderer/src/components/Titlebar.jsx index d0d1acf..99ad876 100644 --- a/src/renderer/components/Titlebar.jsx +++ b/src/renderer/src/components/Titlebar.jsx @@ -1,5 +1,5 @@ import React from 'react' -import pkg from '../../../package.json' +import pkg from '../../../../package.json' import styles from './Titlebar.module.css' const Titlebar = () => ( diff --git a/src/renderer/components/Titlebar.module.css b/src/renderer/src/components/Titlebar.module.css similarity index 100% rename from src/renderer/components/Titlebar.module.css rename to src/renderer/src/components/Titlebar.module.css diff --git a/src/renderer/index.css b/src/renderer/src/global.css similarity index 97% rename from src/renderer/index.css rename to src/renderer/src/global.css index ac4fad4..a940d99 100644 --- a/src/renderer/index.css +++ b/src/renderer/src/global.css @@ -27,7 +27,7 @@ html.fullscreen { font-size: 24px; } -#root { +#__next { height: 100%; position: relative; font-size: 1rem; @@ -43,7 +43,7 @@ html.fullscreen { -webkit-user-select: none; } -.dark #root { +.dark #__next { color: #e2e2e2; } diff --git a/src/renderer/images/cog.svg b/src/renderer/src/images/cog.svg similarity index 100% rename from src/renderer/images/cog.svg rename to src/renderer/src/images/cog.svg diff --git a/src/renderer/images/icon.icns b/src/renderer/src/images/icon.icns similarity index 100% rename from src/renderer/images/icon.icns rename to src/renderer/src/images/icon.icns diff --git a/src/renderer/images/icon.ico b/src/renderer/src/images/icon.ico similarity index 100% rename from src/renderer/images/icon.ico rename to src/renderer/src/images/icon.ico diff --git a/src/renderer/images/icon1024.png b/src/renderer/src/images/icon1024.png similarity index 100% rename from src/renderer/images/icon1024.png rename to src/renderer/src/images/icon1024.png diff --git a/src/renderer/images/rocket.svg b/src/renderer/src/images/rocket.svg similarity index 100% rename from src/renderer/images/rocket.svg rename to src/renderer/src/images/rocket.svg diff --git a/src/renderer/src/pages/_app.jsx b/src/renderer/src/pages/_app.jsx new file mode 100644 index 0000000..07e4609 --- /dev/null +++ b/src/renderer/src/pages/_app.jsx @@ -0,0 +1,32 @@ +import React, { useEffect } from 'react' +import PropTypes from 'prop-types' +import Router from 'next/router' +import { ipcRenderer } from 'electron' + +import '../global.css' +import Layout from '../Layout' + +// +// Disable zooming +// +// webFrame.setVisualZoomLevelLimits(1, 1) +// webFrame.setLayoutZoomLevelLimits(0, 0) + +export default function App({ Component, pageProps }) { + useEffect(() => { + ipcRenderer.on('goTo', (evt, route) => { + Router.push(route) + }) + }, []) + + return ( + + + + ) +} + +App.propTypes = { + Component: PropTypes.any.isRequired, + pageProps: PropTypes.any.isRequired +} diff --git a/src/renderer/screens/Home/index.jsx b/src/renderer/src/pages/index.jsx similarity index 51% rename from src/renderer/screens/Home/index.jsx rename to src/renderer/src/pages/index.jsx index 5927904..0720d11 100644 --- a/src/renderer/screens/Home/index.jsx +++ b/src/renderer/src/pages/index.jsx @@ -1,13 +1,13 @@ import React, { useContext } from 'react' -import { Link } from '@reach/router' -import { AppContext } from '../../store/createContext' -import Welcome from './Welcome' -import Spinner from '../../components/Spinner' -import Divider from '../../components/Divider' -import Total from './Total' -import Ticker from './Ticker' -import Accounts from './Accounts' -import IconCog from '../../images/cog.svg' +import Link from 'next/link' +import { AppContext } from '../store/createContext' +import Welcome from '../components/Home/Welcome' +import Spinner from '../components/Spinner' +import Divider from '../components/Divider' +import Total from '../components/Home/Total' +import Ticker from '../components/Home/Ticker' +import Accounts from '../components/Home/Accounts' +import IconCog from '../images/cog.svg' import styles from './index.module.css' export default function Home() { @@ -16,8 +16,10 @@ export default function Home() { return ( <>
- - + + + + {needsConfig ? ( diff --git a/src/renderer/screens/Home/index.module.css b/src/renderer/src/pages/index.module.css similarity index 90% rename from src/renderer/screens/Home/index.module.css rename to src/renderer/src/pages/index.module.css index 1c6a3ee..b79c826 100644 --- a/src/renderer/screens/Home/index.module.css +++ b/src/renderer/src/pages/index.module.css @@ -1,5 +1,5 @@ .main { - composes: box from '../../components/Box.module.css'; + composes: box from '../components/Box.module.css'; min-height: 222px; display: flex; align-items: center; diff --git a/src/renderer/src/pages/preferences.jsx b/src/renderer/src/pages/preferences.jsx new file mode 100644 index 0000000..2b592bf --- /dev/null +++ b/src/renderer/src/pages/preferences.jsx @@ -0,0 +1,18 @@ +import React from 'react' +import Link from 'next/link' +import Accounts from '../components/Preferences/Accounts' +import styles from './preferences.module.css' + +const Preferences = () => ( +
+

Preferences

{' '} + + + × + + + +
+) + +export default Preferences diff --git a/src/renderer/screens/Preferences/index.module.css b/src/renderer/src/pages/preferences.module.css similarity index 100% rename from src/renderer/screens/Preferences/index.module.css rename to src/renderer/src/pages/preferences.module.css diff --git a/src/renderer/store/AppProvider.jsx b/src/renderer/src/store/AppProvider.jsx similarity index 96% rename from src/renderer/store/AppProvider.jsx rename to src/renderer/src/store/AppProvider.jsx index 666bd2a..34d997d 100644 --- a/src/renderer/store/AppProvider.jsx +++ b/src/renderer/src/store/AppProvider.jsx @@ -4,8 +4,12 @@ import ms from 'ms' import { ipcRenderer } from 'electron' import Store from 'electron-store' import { AppContext } from './createContext' -import fetchData from '../utils/fetch' -import { refreshInterval, conversions, oceanTokenContract } from '../../config' +import { fetchData } from '../../../utils' +import { + refreshInterval, + conversions, + oceanTokenContract +} from '../../../config' // construct initial prices Map to get consistent // order for Ticker and Touchbar diff --git a/src/renderer/store/createContext.jsx b/src/renderer/src/store/createContext.jsx similarity index 100% rename from src/renderer/store/createContext.jsx rename to src/renderer/src/store/createContext.jsx diff --git a/src/renderer/utils/fetch.js b/src/renderer/utils/fetch.js deleted file mode 100644 index d0f33c3..0000000 --- a/src/renderer/utils/fetch.js +++ /dev/null @@ -1,18 +0,0 @@ -const fetchData = async url => { - try { - const response = await fetch(url) - - if (response.status !== 200) { - return console.log('Non-200 response: ' + response.status) // eslint-disable-line - } - - const json = await response.json() - if (!json) return - - return json - } catch (error) { - console.log('Error parsing json:' + error) // eslint-disable-line - } -} - -export default fetchData diff --git a/src/utils.js b/src/utils.js index e2cbb0a..9b271c8 100644 --- a/src/utils.js +++ b/src/utils.js @@ -1,6 +1,23 @@ const { app, shell } = require('electron') const { formatCurrency } = require('@coingecko/cryptoformat') +const fetchData = async url => { + try { + const response = await fetch(url) + + if (response.status !== 200) { + return console.log('Non-200 response: ' + response.status) // eslint-disable-line + } + + const json = await response.json() + if (!json) return + + return json + } catch (error) { + console.log('Error parsing json:' + error) // eslint-disable-line + } +} + const isFiat = currency => currency === 'eur' || currency === 'usd' const openUrl = url => { @@ -65,5 +82,6 @@ module.exports = { rgbaToHex, locale, numberFormatter, - cryptoFormatter + cryptoFormatter, + fetchData } diff --git a/webpack.common.config.js b/webpack.common.config.js deleted file mode 100644 index 69bc6cc..0000000 --- a/webpack.common.config.js +++ /dev/null @@ -1,74 +0,0 @@ -const path = require('path') -const HtmlWebpackPlugin = require('html-webpack-plugin') -const CopyPlugin = require('copy-webpack-plugin') -const MiniCssExtractPlugin = require('mini-css-extract-plugin') - -const defaultInclude = [path.resolve(__dirname, 'src', 'renderer')] - -const isDevelopment = process.env.NODE_ENV !== 'production' - -module.exports = { - mode: isDevelopment ? 'development' : 'production', - entry: path.resolve(__dirname, 'src', 'renderer', 'index.js'), - output: { - path: path.resolve(__dirname, 'build'), - filename: 'bundle.js', - publicPath: isDevelopment ? '/' : './' - }, - module: { - rules: [ - { - test: /\.(js|jsx)?$/, - use: ['babel-loader'], - include: defaultInclude - }, - { - test: /\.css$/, - exclude: /\.module\.css$/, - use: ['style-loader', 'css-loader'], - include: defaultInclude - }, - { - test: /\.module\.css$/, - include: defaultInclude, - loader: [ - isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader, - { - loader: 'css-loader', - options: { - modules: { - localIdentName: '[name]__[local]___[hash:base64:5]' - }, - localsConvention: 'camelCase', - sourceMap: isDevelopment - } - } - ] - }, - { - test: /\.(jpe?g|png|gif)$/, - use: ['file-loader?name=img/[name]__[hash:base64:5].[ext]'], - include: defaultInclude - }, - { - test: /\.svg$/, - use: ['@svgr/webpack'], - include: defaultInclude - } - ] - }, - resolve: { - extensions: ['*', '.js', '.jsx', '.css'] - }, - target: 'electron-renderer', - plugins: [ - new HtmlWebpackPlugin(), - new MiniCssExtractPlugin({ - filename: isDevelopment ? '[name].css' : '[name].[hash].css', - chunkFilename: isDevelopment ? '[id].css' : '[id].[hash].css' - }), - new CopyPlugin([ - { from: './src/renderer/images/icon.*', to: './', flatten: true } - ]) - ] -} diff --git a/webpack.dev.config.js b/webpack.dev.config.js deleted file mode 100644 index d3025d7..0000000 --- a/webpack.dev.config.js +++ /dev/null @@ -1,20 +0,0 @@ -const path = require('path') -const common = require('./webpack.common.config') -const { spawn } = require('child_process') - -module.exports = Object.assign({}, common, { - devtool: 'cheap-source-map', - devServer: { - contentBase: path.resolve(__dirname, 'build'), - stats: 'minimal', - before: () => { - spawn('electron', ['.'], { - shell: true, - env: process.env, - stdio: 'inherit' - }) - .on('close', () => process.exit(0)) - .on('error', spawnError => console.error(spawnError)) // eslint-disable-line no-console - } - } -})