diff --git a/package-lock.json b/package-lock.json index fbaa5d5..99f644a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2340,6 +2340,14 @@ } } }, + "@material-ui/icons": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.2.1.tgz", + "integrity": "sha512-FvSD5lUBJ66frI4l4AYAPy2CH14Zs2Dgm0o3oOMr33BdQtOAjCgbdOcvPBeaD1w6OQl31uNW3CKOE8xfPNxvUQ==", + "requires": { + "@babel/runtime": "^7.2.0" + } + }, "@material-ui/styles": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.3.0.tgz", @@ -5866,6 +5874,11 @@ } } }, + "camelize": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz", + "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=" + }, "caniuse-api": { "version": "1.6.1", "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-1.6.1.tgz", @@ -7475,6 +7488,11 @@ "randomfill": "^1.0.3" } }, + "css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=" + }, "css-color-names": { "version": "0.0.4", "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz", @@ -7753,6 +7771,16 @@ } } }, + "css-to-react-native": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-2.3.1.tgz", + "integrity": "sha512-yO+oEx1Lf+hDKasqQRVrAvzMCz825Huh1VMlEEDlRWyAhFb/FWb6I0KpEF1PkyKQ7NEdcx9d5M2ZEWgJAsgPvQ==", + "requires": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^3.3.0" + } + }, "css-vendor": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.5.tgz", @@ -17489,6 +17517,21 @@ "resolved": "https://registry.npmjs.org/lodash.escaperegexp/-/lodash.escaperegexp-4.1.2.tgz", "integrity": "sha1-ZHYsSGGAglGKw99Mz11YhtriA0c=" }, + "lodash.every": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/lodash.every/-/lodash.every-4.6.0.tgz", + "integrity": "sha1-64mYS+vENkJ5uzrvu9HKGb+mxqc=" + }, + "lodash.flattendeep": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz", + "integrity": "sha1-+wMJF/hqMTTlvJvsDWngAT3f7bI=" + }, + "lodash.foreach": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.foreach/-/lodash.foreach-4.5.0.tgz", + "integrity": "sha1-Gmo16s5AEoDH8G3d7DUWWrJ+PlM=" + }, "lodash.isarguments": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz", @@ -17499,6 +17542,11 @@ "resolved": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.4.tgz", "integrity": "sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U=" }, + "lodash.isequal": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz", + "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA=" + }, "lodash.isfinite": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/lodash.isfinite/-/lodash.isfinite-3.3.2.tgz", @@ -17538,6 +17586,16 @@ "lodash.isarray": "^3.0.0" } }, + "lodash.map": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/lodash.map/-/lodash.map-4.6.0.tgz", + "integrity": "sha1-dx7Hg540c9nEzeKLGTlMNWL09tM=" + }, + "lodash.maxby": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/lodash.maxby/-/lodash.maxby-4.6.0.tgz", + "integrity": "sha1-CCJABo88eiJ6oAqDgOTzjPB4bj0=" + }, "lodash.memoize": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz", @@ -20415,6 +20473,11 @@ "find-up": "^1.0.0" } }, + "platform": { + "version": "1.3.5", + "resolved": "https://registry.npmjs.org/platform/-/platform-1.3.5.tgz", + "integrity": "sha512-TuvHS8AOIZNAlE77WUDiR4rySV/VMptyMfcfeoMgs4P8apaZM3JrnbzBiixKUv+XR6i+BXrQh8WAnjaSPFO65Q==" + }, "playos-sdk": { "version": "1.8.0", "resolved": "https://registry.npmjs.org/playos-sdk/-/playos-sdk-1.8.0.tgz", @@ -21417,6 +21480,11 @@ "prop-types": "^15.5.0" } }, + "react-object-inspector": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/react-object-inspector/-/react-object-inspector-0.2.1.tgz", + "integrity": "sha1-jsMpUb3ox2sHLvCEp056nS0K63I=" + }, "react-redux": { "version": "4.4.9", "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-4.4.9.tgz", @@ -24380,6 +24448,18 @@ } } }, + "string-similarity": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/string-similarity/-/string-similarity-1.2.2.tgz", + "integrity": "sha512-IoHUjcw3Srl8nsPlW04U3qwWPk3oG2ffLM0tN853d/E/JlIvcmZmDY2Kz5HzKp4lEi2T7QD7Zuvjq/1rDw+XcQ==", + "requires": { + "lodash.every": "^4.6.0", + "lodash.flattendeep": "^4.4.0", + "lodash.foreach": "^4.5.0", + "lodash.map": "^4.6.0", + "lodash.maxby": "^4.6.0" + } + }, "string-template": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/string-template/-/string-template-0.2.1.tgz", @@ -24587,6 +24667,56 @@ } } }, + "styled-components": { + "version": "3.1.6", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-3.1.6.tgz", + "integrity": "sha1-nEQxRvqCxmWan2TdSTvyICSANC4=", + "requires": { + "buffer": "^5.0.3", + "css-to-react-native": "^2.0.3", + "fbjs": "^0.8.9", + "hoist-non-react-statics": "^1.2.0", + "is-plain-object": "^2.0.1", + "prop-types": "^15.5.4", + "stylis": "^3.4.0", + "stylis-rule-sheet": "^0.0.7", + "supports-color": "^3.2.3" + }, + "dependencies": { + "buffer": { + "version": "5.4.0", + "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.4.0.tgz", + "integrity": "sha512-Xpgy0IwHK2N01ncykXTy6FpCWuM+CJSHoPVBLyNqyrWxsedpLvwsYUhf0ME3WRFNUhos0dMamz9cOS/xRDtU5g==", + "requires": { + "base64-js": "^1.0.2", + "ieee754": "^1.1.4" + } + }, + "hoist-non-react-statics": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz", + "integrity": "sha1-qkSM8JhtVcxAdzsXF0t90GbLfPs=" + }, + "supports-color": { + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz", + "integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=", + "requires": { + "has-flag": "^1.0.0" + } + } + } + }, + "stylis": { + "version": "3.5.4", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz", + "integrity": "sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==" + }, + "stylis-rule-sheet": { + "version": "0.0.7", + "resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.7.tgz", + "integrity": "sha512-qxzlUBO40tgcGMhYxk2gXAPcaZYpfCqHMoVHj92lFMyiFotcqaEl7Jb5eW1ccCanGwf1N9dVBKF9+i/gmDfzyQ==" + }, "subarg": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/subarg/-/subarg-1.0.0.tgz", @@ -24704,6 +24834,48 @@ "inherits": "2" } }, + "terminal-in-react": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/terminal-in-react/-/terminal-in-react-4.3.1.tgz", + "integrity": "sha512-o0uZQgLBsOTjXjBJxc1SY3tps9SpF8uZkzqvifrC/aIvizvyeSvyjoCcnLF/UwibqWlidHcIc9OiG/TFinIO+g==", + "requires": { + "lodash.camelcase": "^4.3.0", + "lodash.isequal": "^4.5.0", + "minimist": "^1.2.0", + "platform": "^1.3.4", + "prop-types": "^15.5.10", + "react": "16.2.0", + "react-dom": "16.2.0", + "react-object-inspector": "^0.2.1", + "string-similarity": "^1.2.0", + "styled-components": "3.1.6", + "whatkey": "^2.0.1" + }, + "dependencies": { + "react": { + "version": "16.2.0", + "resolved": "https://registry.npmjs.org/react/-/react-16.2.0.tgz", + "integrity": "sha512-ZmIomM7EE1DvPEnSFAHZn9Vs9zJl5A9H7el0EGTE6ZbW9FKe/14IYAlPbC8iH25YarEQxZL+E8VW7Mi7kfQrDQ==", + "requires": { + "fbjs": "^0.8.16", + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1", + "prop-types": "^15.6.0" + } + }, + "react-dom": { + "version": "16.2.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.2.0.tgz", + "integrity": "sha512-zpGAdwHVn9K0091d+hr+R0qrjoJ84cIBFL2uU60KvWBPfZ7LPSrfqviTxGHWN0sjPZb2hxWzMexwrvJdKePvjg==", + "requires": { + "fbjs": "^0.8.16", + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1", + "prop-types": "^15.6.0" + } + } + } + }, "terser": { "version": "4.1.4", "resolved": "https://registry.npmjs.org/terser/-/terser-4.1.4.tgz", @@ -28207,6 +28379,11 @@ "integrity": "sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg==", "dev": true }, + "whatkey": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/whatkey/-/whatkey-2.0.1.tgz", + "integrity": "sha1-QeVrKxBYrNFVDUh3SKYGjlgShog=" + }, "whatwg-encoding": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz", diff --git a/package.json b/package.json index cd043d7..933f1a6 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "dependencies": { "@babel/plugin-proposal-class-properties": "^7.5.5", "@material-ui/core": "^4.3.2", + "@material-ui/icons": "^4.2.1", "@types/react-loadable": "^5.5.1", "babel-polyfill": "^6.26.0", "classnames": "^2.2.6", @@ -41,6 +42,7 @@ "redux": "^3.6.0", "redux-logger": "^2.10.2", "redux-thunk": "^2.1.0", + "terminal-in-react": "^4.3.1", "whatwg-fetch": "^3.0.0" }, "devDependencies": { diff --git a/src/js/components/molecules/App/App.jsx b/src/js/components/molecules/App/App.jsx index b970c9a..3f5f3ba 100644 --- a/src/js/components/molecules/App/App.jsx +++ b/src/js/components/molecules/App/App.jsx @@ -64,7 +64,9 @@ class App extends React.Component { if (!userWantsToOpen) return; } - this.props.dispatch(openApp(this.props.app)); + window.open(this.props.app.main); + // window.location.href = this.props.app.main; + // this.props.dispatch(openApp(this.props.app)); } handlePopoverClose() { diff --git a/src/js/components/molecules/App/App.scss b/src/js/components/molecules/App/App.scss index 5edc5cb..94192f8 100644 --- a/src/js/components/molecules/App/App.scss +++ b/src/js/components/molecules/App/App.scss @@ -49,6 +49,7 @@ z-index: 1; img { + border-radius: 10px; width: 100%; max-height: 100%; } diff --git a/src/js/components/molecules/AppCanvas/AppCanvas.tsx b/src/js/components/molecules/AppCanvas/AppCanvas.tsx new file mode 100644 index 0000000..d02116c --- /dev/null +++ b/src/js/components/molecules/AppCanvas/AppCanvas.tsx @@ -0,0 +1,13 @@ +import * as React from 'react'; +import AppTerminal from '../../organims/AppTerminal'; + +function AppCanvas() { + return ( + <> + + + ); +} + + +export default AppCanvas; diff --git a/src/js/components/molecules/AppCanvas/index.ts b/src/js/components/molecules/AppCanvas/index.ts new file mode 100644 index 0000000..323ecea --- /dev/null +++ b/src/js/components/molecules/AppCanvas/index.ts @@ -0,0 +1 @@ +export { default } from './AppCanvas'; diff --git a/src/js/components/molecules/SideNavigation/SideNavigation.jsx b/src/js/components/molecules/SideNavigation/SideNavigation.jsx index 17eb383..704a02e 100644 --- a/src/js/components/molecules/SideNavigation/SideNavigation.jsx +++ b/src/js/components/molecules/SideNavigation/SideNavigation.jsx @@ -6,6 +6,7 @@ import MenuItem from 'material-ui/MenuItem'; import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; import BusinessIcon from 'material-ui/svg-icons/communication/business'; import AccountIcon from 'material-ui/svg-icons/action/account-circle'; +import AccountBalanceWalletIcon from '@material-ui/icons/AccountBalanceWallet'; import PowerIcon from 'material-ui/svg-icons/action/power-settings-new'; import ArrowRightIcon from 'material-ui/svg-icons/hardware/keyboard-arrow-right'; import getMuiTheme from 'material-ui/styles/getMuiTheme'; @@ -42,6 +43,10 @@ class SideNavigation extends React.Component { window.location.reload(); } + openWallet() { + + } + getMenuItems() { const profileMenuItem = this.handleRequestChange(false)} leftIcon={} rightIcon={}>{this.props.user.info.fullName}; @@ -59,6 +64,7 @@ class SideNavigation extends React.Component { return ( {profileMenuItem} + this.openWallet()} leftIcon={}>Wallet this.openApp(SETTINGS_NAMESPACE)} leftIcon={}>Profile { hasBusiness && this.openApp(BUSINESS_NAMESPACE)} leftIcon={}>Manage accounts} }>Log out diff --git a/src/js/components/molecules/Wallet/Wallet.tsx b/src/js/components/molecules/Wallet/Wallet.tsx new file mode 100644 index 0000000..372df8d --- /dev/null +++ b/src/js/components/molecules/Wallet/Wallet.tsx @@ -0,0 +1,38 @@ +import * as React from 'react'; +import DialogTitle from '@material-ui/core/DialogTitle'; +import Dialog from '@material-ui/core/Dialog'; +import Button from '@material-ui/core/Button'; +import DialogContent from '@material-ui/core/DialogContent'; +import DialogContentText from '@material-ui/core/DialogContentText'; +import DialogActions from '@material-ui/core/DialogActions'; + +interface Props { + +} + +function Wallet(props: Props) { + return ( + <> + + + Requesting to sign message: + + + + Message + + + + + + + + + ); +} + +export default Wallet; diff --git a/src/js/components/molecules/Wallet/index.ts b/src/js/components/molecules/Wallet/index.ts new file mode 100644 index 0000000..485f668 --- /dev/null +++ b/src/js/components/molecules/Wallet/index.ts @@ -0,0 +1 @@ +export { default } from './Wallet'; diff --git a/src/js/components/organims/AppCanvasHolder/AppCanvasHolder.scss b/src/js/components/organims/AppCanvasHolder/AppCanvasHolder.scss new file mode 100644 index 0000000..7bb1117 --- /dev/null +++ b/src/js/components/organims/AppCanvasHolder/AppCanvasHolder.scss @@ -0,0 +1,8 @@ +.appCanvasHolder { + position: absolute; + top:0; + width: 100%; + height: 100%; + background: #252525; + z-index: 2; +} diff --git a/src/js/components/organims/AppCanvasHolder/AppCanvasHolder.tsx b/src/js/components/organims/AppCanvasHolder/AppCanvasHolder.tsx new file mode 100644 index 0000000..c018e96 --- /dev/null +++ b/src/js/components/organims/AppCanvasHolder/AppCanvasHolder.tsx @@ -0,0 +1,17 @@ +import * as React from 'react'; +import AppCanvas from '../../molecules/AppCanvas'; +const styles = require('./AppCanvasHolder.scss'); + +interface Props { + +} + +function AppCanvasHolder(props: Props) { + return ( +
+ +
+ ); +} + +export default AppCanvasHolder; diff --git a/src/js/components/organims/AppCanvasHolder/index.ts b/src/js/components/organims/AppCanvasHolder/index.ts new file mode 100644 index 0000000..bdda278 --- /dev/null +++ b/src/js/components/organims/AppCanvasHolder/index.ts @@ -0,0 +1 @@ +export { default } from './AppCanvasHolder'; diff --git a/src/js/components/organims/AppSection/AppSection.tsx b/src/js/components/organims/AppSection/AppSection.tsx index 9977fb2..8d87c9f 100644 --- a/src/js/components/organims/AppSection/AppSection.tsx +++ b/src/js/components/organims/AppSection/AppSection.tsx @@ -18,7 +18,7 @@ function AppSection(props: Props) {
- Apps + My Apps {props.apps.map((app) => { if (app.isFolder) { diff --git a/src/js/components/organims/AppTerminal/AppTerminal.scss b/src/js/components/organims/AppTerminal/AppTerminal.scss new file mode 100644 index 0000000..88208e3 --- /dev/null +++ b/src/js/components/organims/AppTerminal/AppTerminal.scss @@ -0,0 +1,4 @@ +.appTerminal { + height: 100%; + width: 100%; +} diff --git a/src/js/components/organims/AppTerminal/AppTerminal.tsx b/src/js/components/organims/AppTerminal/AppTerminal.tsx new file mode 100644 index 0000000..3c83403 --- /dev/null +++ b/src/js/components/organims/AppTerminal/AppTerminal.tsx @@ -0,0 +1,25 @@ +import * as React from 'react'; +import Terminal from 'terminal-in-react'; +const styles = require('./AppTerminal.scss'); + +interface Props { + +} + +function AppTerminal(props: Props) { + return ( +
+ +
+ ); +} + +export default AppTerminal; diff --git a/src/js/components/organims/AppTerminal/index.ts b/src/js/components/organims/AppTerminal/index.ts new file mode 100644 index 0000000..d5a05ad --- /dev/null +++ b/src/js/components/organims/AppTerminal/index.ts @@ -0,0 +1 @@ +export { default } from './AppTerminal'; diff --git a/src/js/pages/HomePage/HomePage.tsx b/src/js/pages/HomePage/HomePage.tsx index 2989bf6..04c48ad 100644 --- a/src/js/pages/HomePage/HomePage.tsx +++ b/src/js/pages/HomePage/HomePage.tsx @@ -7,6 +7,8 @@ import KeyService from '../../services/KeyService'; import Header from '../../components/molecules/Header'; import AppSection from '../../components/organims/AppSection'; import { loadApps } from '../../store/ApplicationStore'; +import Wallet from '../../components/molecules/Wallet'; +import AppCanvasHolder from '../../components/organims/AppCanvasHolder'; const styles = require('./HomePage.scss'); interface Props { @@ -53,6 +55,8 @@ class HomePage extends React.Component { <>
+ {/* */} + } diff --git a/src/js/services/providers/IProvider.ts b/src/js/services/providers/IProvider.ts index 1b28d51..b15aad1 100644 --- a/src/js/services/providers/IProvider.ts +++ b/src/js/services/providers/IProvider.ts @@ -11,6 +11,8 @@ export interface Account { address: string; profilePic: string; wallpaper: string; + currencyTicker: string; + balance: string; } export default interface IProvider { diff --git a/src/js/services/providers/RutileProvider.ts b/src/js/services/providers/RutileProvider.ts index d5fd542..28d1f04 100644 --- a/src/js/services/providers/RutileProvider.ts +++ b/src/js/services/providers/RutileProvider.ts @@ -37,17 +37,15 @@ class RutileProvider implements IProvider { return JSON.parse(keys); } - getAccountInfo(key: PrivateKey): Promise { - return new Promise((resolve) => { - // setTimeout(() => { - resolve({ - fullName: 'Franklin Waller', - address: '0x000', - profilePic: '', - wallpaper: 'https://i.imgur.com/HvLbgjE.jpg', - }); - // }, 2000); - }); + async getAccountInfo(key: PrivateKey): Promise { + return { + currencyTicker: 'RUT', + balance: '10000', + fullName: 'Franklin Waller', + address: '0x000', + profilePic: '', + wallpaper: 'https://i.imgur.com/HvLbgjE.jpg', + }; } async getInstalledApplications(key: PrivateKey): Promise { @@ -57,9 +55,10 @@ class RutileProvider implements IProvider { apps: [], icon: 'https://picsum.photos/512', isFolder: false, - main: '', + main: `https://google.com/?token=${key.privateKey}`, properties: { background_color: '', + openInNewWindow: true, }, status: ApplicationStatus.STANDARD, supportedDeviceTypes: [], diff --git a/src/js/store/UserInfoStore.ts b/src/js/store/UserInfoStore.ts index b91e88f..63ac8aa 100644 --- a/src/js/store/UserInfoStore.ts +++ b/src/js/store/UserInfoStore.ts @@ -5,6 +5,8 @@ export interface UserInfo { info: { fullName: string; wallpaper: string; + balance: string; + currencyTicker: string; }, settings: string[], } @@ -13,6 +15,8 @@ const defaultState: UserInfo = { info: { fullName: '', wallpaper: '', + balance: '0', + currencyTicker: 'N/A', }, settings: [''], };