Merge branch 'master' of https://github.com/ethereum/remix-project into appmodals

README.md

@@ -51,6 +51,7 @@ git clone https://github.com/ethereum/remix-project.git
 ```bash
 cd remix-project
 npm install
+npm run build:libs // Build remix libs
 nx build
 nx serve
 ```

apps/remix-ide/src/app.tsx

@@ -1,17 +0,0 @@
-'use strict'
-import React from 'react' // eslint-disable-line
-import { RemixApp } from '@remix-ui/app'
-import AppComponent from './app-component'
-
-const appComponent = new AppComponent()
-appComponent.run()
-
-function App () {
-  return <>
-    <React.StrictMode>
-      <RemixApp app={appComponent}></RemixApp>
-    </React.StrictMode>
-  </>
-}
-
-export default App

apps/remix-ide/src/app/tabs/theme-module.js

@@ -2,7 +2,6 @@ import { Plugin } from '@remixproject/engine'
 import { EventEmitter } from 'events'
 import QueryParams from '../../lib/query-params'
 import * as packageJson from '../../../../../package.json'
-import yo from 'yo-yo'
 const _paq = window._paq = window._paq || []
 
 const themes = [
@@ -37,10 +36,12 @@ export class ThemeModule extends Plugin {
       theme.url = window.location.origin + window.location.pathname + theme.url
       return { ...acc, [theme.name]: theme }
     }, {})
+    this._paq = _paq
     let queryTheme = (new QueryParams()).get().theme
     queryTheme = this.themes[queryTheme] ? queryTheme : null
     let currentTheme = this._deps.config.get('settings/theme')
     currentTheme = this.themes[currentTheme] ? currentTheme : null
+    this.currentThemeState = { queryTheme, currentTheme }
     this.active = queryTheme || currentTheme || 'Dark'
     this.forced = !!queryTheme
   }
@@ -58,11 +59,16 @@ export class ThemeModule extends Plugin {
   /**
    * Init the theme
    */
-  initTheme (callback) {
+  initTheme (callback) { // callback is setTimeOut in app.js which is always passed
+    if (callback) this.initCallback = callback
     if (this.active) {
       const nextTheme = this.themes[this.active] // Theme
       document.documentElement.style.setProperty('--theme', nextTheme.quality)
-      const theme = yo`<link rel="stylesheet" href="${nextTheme.url}" id="theme-link"/>`
+
+      const theme = document.createElement('link')
+      theme.setAttribute('rel', 'stylesheet')
+      theme.setAttribute('href', nextTheme.url)
+      theme.setAttribute('id', 'theme-link')
       theme.addEventListener('load', () => {
         if (callback) callback()
       })
@@ -79,12 +85,16 @@ export class ThemeModule extends Plugin {
       throw new Error(`Theme ${themeName} doesn't exist`)
     }
     const next = themeName || this.active // Name
-    if (next === this.active) return
+    if (next === this.active) return // --> exit out of this method
     _paq.push(['trackEvent', 'themeModule', 'switchTo', next])
     const nextTheme = this.themes[next] // Theme
     if (!this.forced) this._deps.config.set('settings/theme', next)
     document.getElementById('theme-link').remove()
-    const theme = yo`<link rel="stylesheet" href="${nextTheme.url}" id="theme-link"/>`
+    const theme = document.createElement('link')
+
+    theme.setAttribute('rel', 'stylesheet')
+    theme.setAttribute('href', nextTheme.url)
+    theme.setAttribute('id', 'theme-link')
     theme.addEventListener('load', () => {
       this.emit('themeLoaded', nextTheme)
       this.events.emit('themeLoaded', nextTheme)

apps/remix-ide/src/index.tsx

@@ -1,9 +1,16 @@
 // eslint-disable-next-line no-use-before-define
 import React from 'react'
 import ReactDOM from 'react-dom'
-import App from './app'
+import AppComponent from './app'
+// eslint-disable-next-line no-unused-vars
+import { RemixApp } from '@remix-ui/app'
+
+const appComponent = new AppComponent()
+appComponent.run()
 
 ReactDOM.render(
-  <App />,
+  <React.StrictMode>
+    <RemixApp app={appComponent}></RemixApp>
+  </React.StrictMode>,
   document.getElementById('root')
 )

libs/remix-ui/app/README.md

@@ -1,7 +0,0 @@
-# remix-ui-clipboard
-
-This library was generated with [Nx](https://nx.dev).
-
-## Running unit tests
-
-Run `nx test remix-ui-clipboard` to execute the unit tests via [Jest](https://jestjs.io).

libs/remix-ui/settings/src/lib/remix-ui-settings.tsx

@@ -7,6 +7,8 @@ import './remix-ui-settings.css'
 import { ethereumVM, generateContractMetadat, personal, textWrapEventAction, useMatomoAnalytics, saveTokenToast, removeTokenToast } from './settingsAction'
 import { initialState, toastInitialState, toastReducer, settingReducer } from './settingsReducer'
 import { Toaster } from '@remix-ui/toaster'// eslint-disable-line
+import { RemixUiThemeModule } from '@remix-ui/theme-module'
+import { ThemeModule } from 'libs/remix-ui/theme-module/types/theme-module'
 
 /* eslint-disable-next-line */
 export interface RemixUiSettingsProps {
@@ -14,16 +16,15 @@ export interface RemixUiSettingsProps {
   editor: any,
    _deps: any,
    useMatomoAnalytics: boolean
+   themeModule: ThemeModule
 }
 
 export const RemixUiSettings = (props: RemixUiSettingsProps) => {
   const [, dispatch] = useReducer(settingReducer, initialState)
   const [state, dispatchToast] = useReducer(toastReducer, toastInitialState)
   const [tokenValue, setTokenValue] = useState('')
-  const [themeName, setThemeName] = useState('')
 
   useEffect(() => {
-    props._deps.themeModule.switchTheme()
     const token = props.config.get('settings/gist-access-token')
     if (token === undefined) {
       props.config.set('settings/generate-contract-metadata', true)
@@ -32,7 +33,7 @@ export const RemixUiSettings = (props: RemixUiSettingsProps) => {
     if (token) {
       setTokenValue(token)
     }
-  }, [themeName, state.message])
+  }, [state.message])
 
   useEffect(() => {
     if (props.useMatomoAnalytics !== null) useMatomoAnalytics(props.config, props.useMatomoAnalytics, dispatch)
@@ -64,11 +65,6 @@ export const RemixUiSettings = (props: RemixUiSettingsProps) => {
     useMatomoAnalytics(props.config, event.target.checked, dispatch)
   }
 
-  const onswitchTheme = (event, name) => {
-    props._deps.themeModule.switchTheme(name)
-    setThemeName(name)
-  }
-
   const getTextClass = (key) => {
     if (props.config.get(key)) {
       return textDark
@@ -155,32 +151,12 @@ export const RemixUiSettings = (props: RemixUiSettingsProps) => {
     </div>
   )
 
-  const themes = () => {
-    const themes = props._deps.themeModule.getThemes()
-    if (themes) {
-      return themes.map((aTheme, index) => (
-        <div className="radio custom-control custom-radio mb-1 form-check" key={index}>
-          <input type="radio" onChange={event => { onswitchTheme(event, aTheme.name) }} className="align-middle custom-control-input" name='theme' id={aTheme.name} data-id={`settingsTabTheme${aTheme.name}`} checked = {props._deps.themeModule.active === aTheme.name }/>
-          <label className="form-check-label custom-control-label" data-id={`settingsTabThemeLabel${aTheme.name}`} htmlFor={aTheme.name}>{aTheme.name} ({aTheme.quality})</label>
-        </div>
-      )
-      )
-    }
-  }
-
   return (
     <div>
       {state.message ? <Toaster message= {state.message}/> : null}
       {generalConfig()}
       {gistToken()}
-      <div className="border-top">
+      <RemixUiThemeModule themeModule={props._deps.themeModule} />
-        <div className="card-body pt-3 pb-2">
-          <h6 className="card-title">Themes</h6>
-          <div className="card-text themes-container">
-            {themes()}
-          </div>
-        </div>
-      </div>
     </div>
   )
 }

libs/remix-ui/theme-module/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nrwl/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

libs/remix-ui/theme-module/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nrwl/nx/react", "../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

libs/remix-ui/theme-module/README.md

@@ -0,0 +1,7 @@
+# remix-ui-theme-module
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test remix-ui-theme-module` to execute the unit tests via [Jest](https://jestjs.io).

libs/remix-ui/theme-module/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/remix-ui-theme-module';

libs/remix-ui/theme-module/src/lib/remix-ui-theme-module.tsx

@@ -0,0 +1,106 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { useEffect, useRef, useState } from 'react';
+import { Theme, ThemeModule } from '../../types/theme-module';
+import './remix-ui-theme-module.module.css';
+
+/* eslint-disable-next-line */
+export interface RemixUiThemeModuleProps {
+  themeModule: ThemeModule;
+}
+
+const defaultThemes = [
+  {
+    name: 'Dark',
+    quality: 'dark',
+    url: 'assets/css/themes/remix-dark_tvx1s2.css'
+  },
+  {
+    name: 'Light',
+    quality: 'light',
+    url: 'assets/css/themes/remix-light_powaqg.css'
+  },
+  {
+    name: 'Midcentury',
+    quality: 'light',
+    url: 'assets/css/themes/remix-midcentury_hrzph3.css'
+  },
+  {
+    name: 'Black',
+    quality: 'dark',
+    url: 'assets/css/themes/remix-black_undtds.css'
+  },
+  {
+    name: 'Candy',
+    quality: 'light',
+    url: 'assets/css/themes/remix-candy_ikhg4m.css'
+  },
+
+  {
+    name: 'Cerulean',
+    quality: 'light',
+    url: 'assets/css/themes/bootstrap-cerulean.min.css'
+  },
+  {
+    name: 'Flatly',
+    quality: 'light',
+    url: 'assets/css/themes/bootstrap-flatly.min.css'
+  },
+  {
+    name: 'Spacelab',
+    quality: 'light',
+    url: 'assets/css/themes/bootstrap-spacelab.min.css'
+  },
+  {
+    name: 'Cyborg',
+    quality: 'dark',
+    url: 'assets/css/themes/bootstrap-cyborg.min.css'
+  }
+];
+
+export function RemixUiThemeModule({ themeModule }: RemixUiThemeModuleProps) {
+  const [themeName, setThemeName] = useState('')
+
+  useEffect(() => {
+      themeModule.switchTheme()
+  }, [themeName, themeModule])
+
+  return (
+    <div className="border-top">
+      <div className="card-body pt-3 pb-2">
+        <h6 className="card-title">Themes</h6>
+        <div className="card-text themes-container">
+          {themeModule.getThemes()
+            ? themeModule.getThemes().map((theme, idx) => (
+                <div
+                  className="radio custom-control custom-radio mb-1 form-check"
+                  key={idx}
+                >
+                  <input
+                    type="radio"
+                    onChange={event => {
+                      themeModule.switchTheme(theme.name);
+                      setThemeName(theme.name);
+                    }}
+                    className="align-middle custom-control-input"
+                    name="theme"
+                    id={theme.name}
+                    data-id={`settingsTabTheme${theme.name}`}
+                    checked={themeModule.active === theme.name}
+                  />
+                  <label
+                    className="form-check-label custom-control-label"
+                    data-id={`settingsTabThemeLabel${theme.name}`}
+                    htmlFor={theme.name}
+                  >
+                    {theme.name} ({theme.quality})
+                  </label>
+                </div>
+              ))
+            : null}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default RemixUiThemeModule;

libs/remix-ui/theme-module/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "react",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ]
+}

libs/remix-ui/theme-module/tsconfig.lib.json

@@ -0,0 +1,13 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "types": ["node"]
+  },
+  "files": [
+    "../../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
+    "../../../node_modules/@nrwl/react/typings/image.d.ts"
+  ],
+  "exclude": ["**/*.spec.ts", "**/*.spec.tsx"],
+  "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+}

libs/remix-ui/theme-module/types/theme-module.d.ts

@@ -0,0 +1,47 @@
+import { Plugin } from "@remixproject/engine/lib/abstract";
+import { EventEmitter } from "events";
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export class ThemeModule extends Plugin<any, any> {
+    currentThemeState: Record<string, unknown>;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    constructor(registry: any);
+    events: EventEmitter;
+    _deps: {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        config: any;
+    };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    _paq: any
+    element: HTMLDivElement;
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    themes: {[key: string]: Theme};
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    active: string;
+    forced: boolean;
+    render(): HTMLDivElement;
+    renderComponent(): void;
+    /** Return the active theme */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    currentTheme(): any;
+    /** Returns all themes as an array */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    getThemes(): Theme[];
+    /**
+     * Init the theme
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    initTheme(callback: any): void;
+    /**
+     * Change the current theme
+     * @param {string} [themeName] - The name of the theme
+     */
+    switchTheme(themeName?: string): void;
+    /**
+     * fixes the invertion for images since this should be adjusted when we switch between dark/light qualified themes
+     * @param {element} [image] - the dom element which invert should be fixed to increase visibility
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    fixInvert(image?: any): void;
+}
+
+interface Theme { name: string, quality: string, url: string }

nx.json

@@ -141,6 +141,9 @@
     },
     "remix-ui-tabs": {
       "tags": []
+    },
+    "remix-ui-theme-module": {
+      "tags": []
     }
   },
   "targetDependencies": {

package.json

@@ -188,6 +188,7 @@
     "react-dom": "^17.0.2",
     "react-draggable": "^4.4.4",
     "react-tabs": "^3.2.2",
+    "regenerator-runtime": "0.13.7",
     "selenium": "^2.20.0",
     "signale": "^1.4.0",
     "string-similarity": "^4.0.4",
@@ -264,11 +265,8 @@
     "eslint-config-prettier": "^6.11.0",
     "eslint-config-standard": "^14.1.1",
     "eslint-plugin-import": "2.20.2",
-    "eslint-plugin-jsx-a11y": "6.4.1",
     "eslint-plugin-node": "11.1.0",
     "eslint-plugin-promise": "4.2.1",
-    "eslint-plugin-react": "7.23.1",
-    "eslint-plugin-react-hooks": "4.2.0",
     "eslint-plugin-standard": "4.0.1",
     "events": "^3.0.0",
     "execr": "^1.0.1",

tsconfig.base.json

@@ -70,7 +70,8 @@
       "@remix-ui/app": ["libs/remix-ui/app/src/index.ts"],
       "@remix-ui/vertical-icons-panel": [
         "libs/remix-ui/vertical-icons-panel/src/index.ts"
-      ]
+      ],
+      "@remix-ui/theme-module": ["libs/remix-ui/theme-module/src/index.ts"]
     }
   },
   "exclude": ["node_modules", "tmp"]

tsconfig.json

@@ -11,12 +11,18 @@
     "importHelpers": true,
     "target": "es2015",
     "module": "commonjs",
-    "lib": ["es2017", "dom"],
+    "lib": [
+      "es2017",
+      "dom"
+    ],
     "skipLibCheck": true,
     "skipDefaultLibCheck": true,
     "baseUrl": ".",
     "paths": {},
     "allowSyntheticDefaultImports": true
   },
-  "exclude": ["node_modules", "tmp"]
+  "exclude": [
-}
+    "node_modules",
+    "tmp"
+  ]
+}

workspace.json

@@ -1023,6 +1023,21 @@
         }
       }
     },
+    "remix-ui-theme-module": {
+      "root": "libs/remix-ui/theme-module",
+      "sourceRoot": "libs/remix-ui/theme-module/src",
+      "projectType": "library",
+      "architect": {
+        "lint": {
+          "builder": "@nrwl/linter:lint",
+          "options": {
+            "linter": "eslint",
+              "tsConfig": ["libs/remix-ui/editor/tsconfig.lib.json"],
+              "exclude": ["**/node_modules/**", "!libs/remix-ui/editor/**/*"]
+          }
+        }
+      }
+    },
     "remix-ui-app": {
       "root": "libs/remix-ui/app",
       "sourceRoot": "libs/remix-ui/app/src",
@@ -1167,4 +1182,4 @@
       }
     },
     "defaultProject": "remix-ide"
-}
+}