Init

nijynot · Feb 22, 2019 · 897a85f · 897a85f
commit 897a85f
Show file tree

Hide file tree

Showing 34 changed files with 10,399 additions and 0 deletions.
diff --git a/.babelrc.js b/.babelrc.js
@@ -0,0 +1,7 @@
+module.exports = {
+	presets: ["@babel/preset-env", "@babel/preset-react"],
+	plugins: [
+		// "@babel/plugin-proposal-class-properties",
+		// "rawact"
+	]
+};
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+dist
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) <nijynot@gmail.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,52 @@
+{
+  "name": "grin-wallet-gui",
+  "version": "0.1.0",
+  "description": "",
+  "main": "src/main/main.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "electron .",
+    "webpack": "webpack --mode=development",
+    "build": "npm run webpack && npm run start"
+  },
+  "build": {
+    "appId": "moe.grin",
+    "productName": "Grin Wallet GUI"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nijynot/grin-wallet-gui.git"
+  },
+  "author": "",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/nijynot/grin-wallet-gui/issues"
+  },
+  "homepage": "https://github.com/nijynot/grin-wallet-gui#readme",
+  "devDependencies": {
+    "@babel/core": "^7.3.3",
+    "@babel/preset-env": "^7.3.1",
+    "@babel/preset-react": "^7.0.0",
+    "babel-loader": "^8.0.5",
+    "cross-env": "^5.2.0",
+    "css-loader": "^2.1.0",
+    "electron": "^4.0.5",
+    "eslint-plugin-react-hooks": "^1.2.0",
+    "file-loader": "^3.0.1",
+    "json-loader": "^0.5.7",
+    "node-sass": "^4.11.0",
+    "sass-loader": "^7.1.0",
+    "style-loader": "^0.23.1",
+    "webpack": "^4.29.5",
+    "webpack-cli": "^3.2.3",
+    "webpack-dev-server": "^3.2.0"
+  },
+  "dependencies": {
+    "classnames": "^2.2.6",
+    "date-fns": "^1.30.1",
+    "grin-client": "git+https://github.com/nijynot/grin-client-js.git",
+    "prop-types": "^15.7.2",
+    "react": "^16.8.2",
+    "react-dom": "^16.8.2"
+  }
+}
diff --git a/src/main/index.html b/src/main/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Hello World!</title>
+    <link href="https://fonts.googleapis.com/css?family=Noto+Serif+JP:400,500,600,700,900&amp;subset=japanese" rel="stylesheet">
+  </head>
+  <body>
+    <!-- All of the Node.js APIs are available in this renderer process. -->
+    <!-- We are using Node.js <script>document.write(process.versions.node)</script>,
+    Chromium <script>document.write(process.versions.chrome)</script>,
+    and Electron <script>document.write(process.versions.electron)</script>. -->
+    <div id="root">
+    </div>
+    <script>
+      // You can also require other files to run in this process
+      require('../../dist/index.js');
+    </script>
+  </body>
+</html>
diff --git a/src/main/main.js b/src/main/main.js
@@ -0,0 +1,64 @@
+// Modules to control application life and create native browser window
+const {app, BrowserWindow} = require('electron')
+
+// Keep a global reference of the window object, if you don't, the window will
+// be closed automatically when the JavaScript object is garbage collected.
+let mainWindow
+
+function createWindow () {
+  // Create the browser window.
+  mainWindow = new BrowserWindow({
+    width: 700,
+    height: 525,
+    backgroundColor: '#060606',
+    // transparent: true,
+    webPreferences: {
+      nodeIntegration: true,
+    },
+    minWidth: 300,
+    maxWidth: 900,
+    minHeight: 300,
+    useContentSize: true,
+    // autoHideMenuBar: true,
+    frame: false,
+  });
+
+  // and load the index.html of the app.
+  mainWindow.loadFile('./src/main/index.html');
+
+  // Open the DevTools.
+  // mainWindow.webContents.openDevTools()
+
+  // Emitted when the window is closed.
+  mainWindow.on('closed', function () {
+    // Dereference the window object, usually you would store windows
+    // in an array if your app supports multi windows, this is the time
+    // when you should delete the corresponding element.
+    mainWindow = null;
+  });
+}
+
+// This method will be called when Electron has finished
+// initialization and is ready to create browser windows.
+// Some APIs can only be used after this event occurs.
+app.on('ready', createWindow);
+
+// Quit when all windows are closed.
+app.on('window-all-closed', function () {
+  // On macOS it is common for applications and their menu bar
+  // to stay active until the user quits explicitly with Cmd + Q
+  if (process.platform !== 'darwin') {
+    app.quit();
+  }
+});
+
+app.on('activate', function () {
+  // On macOS it's common to re-create a window in the app when the
+  // dock icon is clicked and there are no other windows open.
+  if (mainWindow === null) {
+    createWindow();
+  }
+});
+
+// In this file you can include the rest of your app's specific main process
+// code. You can also put them in separate files and require them here.
diff --git a/src/renderer/index.js b/src/renderer/index.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import App from './views/App';
+import HomePage from './views/pages/Home/HomePage';
+require('./views/reset.css');
+require('./views/index.scss');
+
+ReactDOM.render(
+  <App>
+    <HomePage />
+  </App>,
+  document.getElementById('root')
+);
diff --git a/src/renderer/views/App.js b/src/renderer/views/App.js
@@ -0,0 +1,53 @@
+import React, { useState, useEffect } from 'react';
+import cx from 'classnames';
+
+import SettingsPage from './pages/Settings/SettingsPage';
+require('./App.scss');
+
+export default function App(props) {
+  const [count, setCount] = useState(0);
+  const [settingsActive, setSettingsActive] = useState(false);
+
+  function toggle() {
+    setSettingsActive(!settingsActive);
+  }
+
+  function esc() {
+    if (event.keyCode === 27 && settingsActive) {
+      toggle();
+    }
+  }
+
+  useEffect(() => {
+    document.addEventListener('keydown', esc, false);
+    return function() {
+      document.removeEventListener('keydown', esc, false);
+    }
+  });
+
+  return (
+    <React.Fragment>
+      <div className="App-toolbar">
+        <div className="App-wallet">
+          Personal Wallet
+          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 23" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
+        </div>
+        <div className="App-drag"></div>
+      </div>
+      <div className={cx('App', { hide: settingsActive })}>
+        {props.children}
+        <div
+          className="App-settings-btn"
+          onClick={() => toggle()}
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path fill="none" d="M0 0h20v20H0V0z"/><path d="M15.95 10.78c.03-.25.05-.51.05-.78s-.02-.53-.06-.78l1.69-1.32c.15-.12.19-.34.1-.51l-1.6-2.77c-.1-.18-.31-.24-.49-.18l-1.99.8c-.42-.32-.86-.58-1.35-.78L12 2.34c-.03-.2-.2-.34-.4-.34H8.4c-.2 0-.36.14-.39.34l-.3 2.12c-.49.2-.94.47-1.35.78l-1.99-.8c-.18-.07-.39 0-.49.18l-1.6 2.77c-.1.18-.06.39.1.51l1.69 1.32c-.04.25-.07.52-.07.78s.02.53.06.78L2.37 12.1c-.15.12-.19.34-.1.51l1.6 2.77c.1.18.31.24.49.18l1.99-.8c.42.32.86.58 1.35.78l.3 2.12c.04.2.2.34.4.34h3.2c.2 0 .37-.14.39-.34l.3-2.12c.49-.2.94-.47 1.35-.78l1.99.8c.18.07.39 0 .49-.18l1.6-2.77c.1-.18.06-.39-.1-.51l-1.67-1.32zM10 13c-1.65 0-3-1.35-3-3s1.35-3 3-3 3 1.35 3 3-1.35 3-3 3z"/></svg>
+        </div>
+      </div>
+      <div className={cx('App-layer', { active: settingsActive })}>
+        <SettingsPage
+          close={() => toggle()}
+        />
+      </div>
+    </React.Fragment>
+  );
+}
diff --git a/src/renderer/views/App.scss b/src/renderer/views/App.scss
@@ -0,0 +1,95 @@
+@import "src/scss/variables";
+
+.App {
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  padding-top: 40px;
+  // transition: all .3s cubic-bezier(0.165, 0.84, 0.44, 1);
+  transition: all .3s cubic-bezier(.19, 1, .22, 1);
+  &.hide {
+    transform: scale(.9);
+  }
+}
+.App-toolbar {
+  display: flex;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 1000;
+}
+.App-wallet {
+  padding: 8px $small 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: 600;
+  cursor: pointer;
+  color: #999;
+  transition: all .15s ease;
+  font-size: 14px;
+  &:hover {
+    color: black;
+  }
+  &:hover > svg {
+    opacity: 1;
+  }
+  &:active > svg{
+    stroke: #080808;
+  }
+}
+.App-wallet svg {
+  opacity: 0;
+  margin-left: 4px;
+  stroke: #888;
+  transition: all .15s ease;
+}
+.App-drag {
+  flex-grow: 1;
+  // vertical-align: top;
+  -webkit-app-region: drag;
+  height: 40px;
+}
+.App-settings-btn {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  padding: 14px;
+  vertical-align: top;
+  cursor: pointer;
+  &:hover > svg {
+    fill: #080808;
+  }
+}
+.App-settings-btn svg {
+  vertical-align: middle;
+  fill: #888;
+  width: $base;
+  height: $base;
+  transition: all .15s ease;
+}
+.App-layer {
+  display: flex;
+  visibility: hidden;
+  opacity: 0;
+  height: 100%;
+  transform: scale(1.15);
+  // transition: all .3s cubic-bezier(0.165, 0.84, 0.44, 1);
+  transition: all .3s cubic-bezier(.19, 1, .22, 1);
+  // transition: all .3s ease;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  position: absolute;
+  z-index: 10;
+  overflow: hidden;
+  &.active {
+    visibility: visible;
+    opacity: 1;
+    transform: scale(1);
+  }
+}