From 18520ed90fec30385220d3ef1513d979ca7d40bc Mon Sep 17 00:00:00 2001 From: AlphaX-Projects <77661270+AlphaX-Projects@users.noreply.github.com> Date: Thu, 10 Feb 2022 00:35:21 -0800 Subject: [PATCH] Update to latest lit and some fixes --- .../config/default.build.options.js | 2 - .../config/default.styles.config.js | 2 - qortal-ui-core/package.json | 15 ++-- qortal-ui-core/src/components/app-info.js | 12 +-- qortal-ui-core/src/components/app-view.js | 76 ++++++++----------- qortal-ui-core/src/components/base.js | 10 +-- .../login-view/create-account-section.js | 58 ++++++++------ .../login-view/loading-ripple_old.js | 18 +---- .../components/login-view/login-section.js | 8 +- .../src/components/login-view/login-view.js | 2 +- .../src/components/login-view/welcome-page.js | 2 +- qortal-ui-core/src/components/main-app.js | 15 +--- .../components/settings-view/account-view.js | 2 +- .../settings-view/notifications-view.js | 12 +-- .../components/settings-view/security-view.js | 21 +++-- .../components/settings-view/user-settings.js | 62 +-------------- qortal-ui-core/src/components/show-plugin.js | 2 +- qortal-ui-core/src/components/sidenav-menu.js | 5 +- .../src/components/wallet-profile.js | 4 +- .../src/custom-elements/frag-file-input.js | 6 +- qortal-ui-core/src/epml.js | 1 - .../confirm-transaction-dialog.js | 2 +- .../functional-components/copy-text-menu.js | 7 +- .../functional-components/frame-paste-menu.js | 3 +- .../functional-components/loading-ripple.js | 2 +- .../src/functional-components/mykey-page.js | 2 +- .../src/functional-components/paste-menu.js | 3 +- .../functional-components/settings-page.js | 2 +- .../src/functional-components/snackbar.js | 2 +- qortal-ui-core/src/initStore.js | 1 - qortal-ui-core/src/localStorageHelpers.js | 6 -- qortal-ui-core/src/main.js | 1 - .../notification-actions/new-message.js | 1 - qortal-ui-core/src/worker.js | 1 - qortal-ui-core/tooling/utils.js | 6 -- qortal-ui-core/tooling/watch-inlines.js | 24 ------ qortal-ui-core/tooling/watch.js | 11 +-- 37 files changed, 110 insertions(+), 299 deletions(-) diff --git a/qortal-ui-core/config/default.build.options.js b/qortal-ui-core/config/default.build.options.js index fd72d49e..5c3ef43a 100644 --- a/qortal-ui-core/config/default.build.options.js +++ b/qortal-ui-core/config/default.build.options.js @@ -15,7 +15,6 @@ const aliases = { } const apiComponents = { - // All the do stuff imports...such as login(...) and logout() api: { file: 'api/api.js', className: 'api' @@ -34,7 +33,6 @@ const functionalComponents = { } } -// Inlines all dependencies... transpiles to es5 const inlineComponents = [ { className: 'worker', diff --git a/qortal-ui-core/config/default.styles.config.js b/qortal-ui-core/config/default.styles.config.js index 572e7bc8..1a3e7590 100644 --- a/qortal-ui-core/config/default.styles.config.js +++ b/qortal-ui-core/config/default.styles.config.js @@ -6,7 +6,6 @@ const styles = { }, theme: { colors: { - // primary: '#64ffda', /* Sets the text color to the theme primary color. */ primary: '#03a9f4', /* Sets the text color to the theme primary color. */ primaryBg: '#e8eaf6', /* Sets the background color to the theme primary color. */ onPrimary: '#fff', /* Sets the text color to the color configured for text on the primary color. */ @@ -44,7 +43,6 @@ const styles = { dark: { // ... } - // And more... perhaps installable or user definable, like slack (...used to be? haven't been on it in ages) } } diff --git a/qortal-ui-core/package.json b/qortal-ui-core/package.json index 4ffa5fe7..5f57a28e 100644 --- a/qortal-ui-core/package.json +++ b/qortal-ui-core/package.json @@ -42,33 +42,32 @@ "@polymer/iron-pages": "^3.0.1", "@polymer/paper-checkbox": "^3.1.0", "@polymer/paper-dialog": "^3.0.1", - "@polymer/paper-dropdown-menu": "^3.1.0", + "@polymer/paper-dropdown-menu": "^3.2.0", "@polymer/paper-icon-button": "^3.0.2", - "@polymer/paper-input": "^3.2.0", + "@polymer/paper-input": "^3.2.1", "@polymer/paper-item": "^3.0.1", "@polymer/paper-listbox": "^3.0.1", "@polymer/paper-progress": "^3.0.1", "@polymer/paper-ripple": "^3.0.2", "@polymer/paper-spinner": "^3.0.2", "@polymer/paper-toast": "^3.0.1", - "@rollup/plugin-alias": "^3.1.8", + "@rollup/plugin-alias": "^3.1.9", "@rollup/plugin-babel": "^5.3.0", "@rollup/plugin-commonjs": "^21.0.1", - "@rollup/plugin-node-resolve": "^13.0.6", + "@rollup/plugin-node-resolve": "^13.1.3", "@rollup/plugin-replace": "^3.0.0", - "@vaadin/vaadin-app-layout": "^2.2.0", "@vaadin/vaadin-grid": "^5.9.3", "asmcrypto.js": "^2.3.2", "bcryptjs": "^2.4.3", "epml": "^0.3.3", "file-saver": "^2.0.5", - "lit-element": "^2.5.1", - "postcss": "^8.4.4", + "lit": "^2.1.2", + "postcss": "^8.4.6", "pwa-helpers": "^0.9.1", "random-sentence-generator": "^0.0.8", "redux": "^4.1.2", "redux-thunk": "^2.4.1", - "rollup": "^2.67.0", + "rollup": "^2.67.1", "rollup-plugin-node-globals": "^1.4.0", "rollup-plugin-postcss": "^4.0.2", "rollup-plugin-progress": "^1.1.2", diff --git a/qortal-ui-core/src/components/app-info.js b/qortal-ui-core/src/components/app-info.js index a5905a0e..bfdc4b28 100644 --- a/qortal-ui-core/src/components/app-info.js +++ b/qortal-ui-core/src/components/app-info.js @@ -1,4 +1,4 @@ -import { LitElement, html, css } from 'lit-element' +import { LitElement, html, css } from 'lit' import { connect } from 'pwa-helpers' import { store } from '../store.js' import { doPageUrl } from '../redux/app/app-actions.js' @@ -27,12 +27,10 @@ class AppInfo extends connect(store)(LitElement) { .normal { --mdc-theme-primary: rgb(3, 169, 244); } - .normal-button { --mdc-theme-primary: rgb(3, 169, 244); --mdc-theme-on-primary: white; } - mwc-button.normal-button { --mdc-theme-primary: rgb(3, 169, 244); --mdc-theme-on-primary: white; @@ -40,12 +38,10 @@ class AppInfo extends connect(store)(LitElement) { .test-net { --mdc-theme-primary: black; } - .test-net-button { --mdc-theme-primary: black; --mdc-theme-on-primary: white; } - mwc-button.test-net-button { --mdc-theme-primary: black; --mdc-theme-on-primary: white; @@ -54,10 +50,6 @@ class AppInfo extends connect(store)(LitElement) { flex: 0 0 100px; padding:12px; border-top: 1px solid #eee; - /* position: fixed; - top: 102vh; - left: 0; */ - /* margin-top: 2.5rem; */ } .info { margin: 0; @@ -105,7 +97,6 @@ class AppInfo extends connect(store)(LitElement) { } firstUpdated() { - // ... } _renderStatus() { @@ -138,7 +129,6 @@ class AppInfo extends connect(store)(LitElement) { this.nodeStatus = state.app.nodeStatus this.nodeInfo = state.app.nodeInfo this.nodeConfig = state.app.nodeConfig - this.pageUrl = state.app.pageUrl if (this.pageUrl.length > 5) { this.gotoPage(this.pageUrl) diff --git a/qortal-ui-core/src/components/app-view.js b/qortal-ui-core/src/components/app-view.js index 169fa9dc..e15170a6 100644 --- a/qortal-ui-core/src/components/app-view.js +++ b/qortal-ui-core/src/components/app-view.js @@ -1,4 +1,4 @@ -import { LitElement, html, css } from 'lit-element' +import { LitElement, html, css } from 'lit' import { connect } from 'pwa-helpers' import { store } from '../store.js' @@ -30,11 +30,9 @@ class AppView extends connect(store)(LitElement) { :host { --app-drawer-width: 260px; } - app-drawer-layout:not([narrow]) [drawer-toggle]:not(sidenav-menu) { display: none; } - app-drawer { box-shadow: var(--shadow-2); background: var(--mdc-theme-surface); @@ -46,7 +44,6 @@ class AppView extends connect(store)(LitElement) { background: var(--mdc-theme-surface); color: var(--mdc-theme-on-surface); } - #sideBar { height: 100vh; display: flex; @@ -76,56 +73,44 @@ class AppView extends connect(store)(LitElement) { render() { return html` - - - - - ` } diff --git a/qortal-ui-core/src/functional-components/frame-paste-menu.js b/qortal-ui-core/src/functional-components/frame-paste-menu.js index 389449ba..5887a387 100644 --- a/qortal-ui-core/src/functional-components/frame-paste-menu.js +++ b/qortal-ui-core/src/functional-components/frame-paste-menu.js @@ -1,4 +1,4 @@ -import { LitElement, html, css } from 'lit-element' +import { LitElement, html, css } from 'lit' import { connect } from 'pwa-helpers' import { store } from '../store'; @@ -46,7 +46,6 @@ class FramePasteMenu extends connect(store)(LitElement) { min-width: 150px; max-width: 300px; background: #F9F9F9; - /* box-shadow: 3px 3px 2px #E9E9E9; */ border-radius: 4px; } diff --git a/qortal-ui-core/src/functional-components/loading-ripple.js b/qortal-ui-core/src/functional-components/loading-ripple.js index c0158550..d6b51cb2 100644 --- a/qortal-ui-core/src/functional-components/loading-ripple.js +++ b/qortal-ui-core/src/functional-components/loading-ripple.js @@ -1,4 +1,4 @@ -import { LitElement, html, css } from 'lit-element' +import { LitElement, html, css } from 'lit' const TRANSITION_EVENT_NAMES = ['transitionend', 'webkitTransitionEnd', 'oTransitionEnd', 'MSTransitionEnd'] diff --git a/qortal-ui-core/src/functional-components/mykey-page.js b/qortal-ui-core/src/functional-components/mykey-page.js index e8211fac..1699a6a4 100644 --- a/qortal-ui-core/src/functional-components/mykey-page.js +++ b/qortal-ui-core/src/functional-components/mykey-page.js @@ -1,4 +1,4 @@ -import { LitElement, html, css } from 'lit-element' +import { LitElement, html, css } from 'lit' import { connect } from 'pwa-helpers' import { store } from '../store.js' import { testApiKey } from '../apiKeyUtils.js' diff --git a/qortal-ui-core/src/functional-components/paste-menu.js b/qortal-ui-core/src/functional-components/paste-menu.js index 37c22ae2..09dc8d2f 100644 --- a/qortal-ui-core/src/functional-components/paste-menu.js +++ b/qortal-ui-core/src/functional-components/paste-menu.js @@ -1,4 +1,4 @@ -import { LitElement, html, css } from 'lit-element' +import { LitElement, html, css } from 'lit' import { connect } from 'pwa-helpers' import { store } from '../store'; @@ -39,7 +39,6 @@ class FramePasteMenu extends connect(store)(LitElement) { min-width: 150px; max-width: 300px; background: #F9F9F9; - /* box-shadow: 3px 3px 2px #E9E9E9; */ border-radius: 4px; } diff --git a/qortal-ui-core/src/functional-components/settings-page.js b/qortal-ui-core/src/functional-components/settings-page.js index 0a660c33..81faebda 100644 --- a/qortal-ui-core/src/functional-components/settings-page.js +++ b/qortal-ui-core/src/functional-components/settings-page.js @@ -1,4 +1,4 @@ -import { LitElement, html, css } from 'lit-element' +import { LitElement, html, css } from 'lit' import { connect } from 'pwa-helpers' import { store } from '../store.js' diff --git a/qortal-ui-core/src/functional-components/snackbar.js b/qortal-ui-core/src/functional-components/snackbar.js index 968d000f..372074df 100644 --- a/qortal-ui-core/src/functional-components/snackbar.js +++ b/qortal-ui-core/src/functional-components/snackbar.js @@ -1,4 +1,4 @@ -import { LitElement, html, css } from 'lit-element' +import { LitElement, html, css } from 'lit' import '@material/mwc-snackbar' let queueElement diff --git a/qortal-ui-core/src/initStore.js b/qortal-ui-core/src/initStore.js index c924af57..256100c7 100644 --- a/qortal-ui-core/src/initStore.js +++ b/qortal-ui-core/src/initStore.js @@ -3,7 +3,6 @@ import { doLoadConfigFromAPI } from './redux/config/config-actions.js' import { doLoadNodeConfig, doInitWorkers } from './redux/app/app-actions.js' import { doLoadNotificationConfig } from './redux/user/user-actions.js' - import './persistState.js' import { initApi } from 'qortal-ui-crypto' diff --git a/qortal-ui-core/src/localStorageHelpers.js b/qortal-ui-core/src/localStorageHelpers.js index b8eaab2b..464927d1 100644 --- a/qortal-ui-core/src/localStorageHelpers.js +++ b/qortal-ui-core/src/localStorageHelpers.js @@ -9,12 +9,6 @@ export const loadStateFromLocalStorage = (key) => { } } -// const loadConfigFromAPI = () => { -// return fetch(configURL).then(res => res.json()) -// } - -// export const loadConfig = async (key) => loadConfigFromLocalStorage() || loadConfigFromAPI() - export const saveStateToLocalStorage = (key, state) => { try { const stateJSON = JSON.stringify(state) diff --git a/qortal-ui-core/src/main.js b/qortal-ui-core/src/main.js index 039350b6..9beedda9 100644 --- a/qortal-ui-core/src/main.js +++ b/qortal-ui-core/src/main.js @@ -1,3 +1,2 @@ - import './initStore.js' import './components/main-app.js' diff --git a/qortal-ui-core/src/notifications/notification-actions/new-message.js b/qortal-ui-core/src/notifications/notification-actions/new-message.js index 3edfc88f..faaaad32 100644 --- a/qortal-ui-core/src/notifications/notification-actions/new-message.js +++ b/qortal-ui-core/src/notifications/notification-actions/new-message.js @@ -35,6 +35,5 @@ export const newMessage = (data) => { } const playSound = (soundUrl) => { - return new Audio(soundUrl) } diff --git a/qortal-ui-core/src/worker.js b/qortal-ui-core/src/worker.js index 212f481e..24a11d8b 100644 --- a/qortal-ui-core/src/worker.js +++ b/qortal-ui-core/src/worker.js @@ -11,7 +11,6 @@ Epml.registerPlugin(EpmlWorkerPlugin) const parentEpml = new Epml({ type: 'WORKER', source: self }) parentEpml.route('kdf', async req => { - const { salt, key, nonce, staticSalt, staticBcryptSalt } = req.data const combinedBytes = utils.appendBuffer(salt, utils.stringtoUTF8Array(staticSalt + key + nonce)) const sha512Hash = new Sha512().process(combinedBytes).finish().result diff --git a/qortal-ui-core/tooling/utils.js b/qortal-ui-core/tooling/utils.js index 2574b018..ad7b0ac0 100644 --- a/qortal-ui-core/tooling/utils.js +++ b/qortal-ui-core/tooling/utils.js @@ -1,16 +1,10 @@ const path = require('path') -// So that the directory rollup is running in doesn't matter as the paths aren't relative const makeSourceAbsolute = (dir, tree) => { for (const component of Object.values(tree)) { - // console.log(component) component.source = path.join(dir, component.file) if (component.children) { makeSourceAbsolute(dir, component.children) - // for (const child of Object.values(component.children)) { - // console.log(child) - // addPathToSource(child) - // } } } return tree diff --git a/qortal-ui-core/tooling/watch-inlines.js b/qortal-ui-core/tooling/watch-inlines.js index 540ce53e..71d15adb 100644 --- a/qortal-ui-core/tooling/watch-inlines.js +++ b/qortal-ui-core/tooling/watch-inlines.js @@ -4,38 +4,14 @@ async function watchInlines (inlineConfigs) { for (const conf of inlineConfigs) { const watchOptions = { ...conf.inputOptions, - // output: [outputOptions], output: [conf.outputOptions], watch: { - // chokidar, - // clearScreen, - // exclude, - // include } } - const watcher = rollup.watch(watchOptions) - watcher.on('event', event => { - // event.code can be one of: - // START — the watcher is (re)starting - // BUNDLE_START — building an individual bundle - // BUNDLE_END — finished building a bundle - // END — finished building all bundles - // ERROR — encountered an error while bundling - // FATAL — encountered an unrecoverable error }) - - // stop watching - // watcher.close() } - // console.log(bundle.watchFiles) // an array of file names this bundle depends on - - // console.log(bundle, conf.outputOptions) - // await writeBundle(bundle, conf.outputOptions) - // console.log('bundle written') } -// build() - module.exports = watchInlines diff --git a/qortal-ui-core/tooling/watch.js b/qortal-ui-core/tooling/watch.js index 71eddc7f..ab65e41e 100644 --- a/qortal-ui-core/tooling/watch.js +++ b/qortal-ui-core/tooling/watch.js @@ -11,23 +11,15 @@ async function watch(options, outputs, outputOptions, inputOptions) { } }), watch: { - // chokidar, - // clearScreen, - // exclude, - // include } } const watcher = rollup.watch(watchOptions) - - watcher.on('event', event => { - // ... + watcher.on('event', event => {. }) } async function writeBundle(bundle, outputOptions) { - await bundle.generate(outputOptions) - await bundle.write(outputOptions) console.log('WATCH CORE ==> Write Bundle : Done 🎉'); } @@ -36,7 +28,6 @@ async function buildInline(conf) { const bundle = await rollup.rollup(conf.inputOptions).catch(err => { throw err }) - await writeBundle(bundle, conf.outputOptions) }