Merge pull request #2011 from ethereum/loader

Add loader to splash screen

Author: ioedeveloper

.circleci/config.yml

@@ -182,7 +182,7 @@ jobs:
     environment:
       - COMMIT_AUTHOR_EMAIL: "[email protected]"
       - COMMIT_AUTHOR: "Circle CI"
-      - FILES_TO_PACKAGE: "dist/apps/remix-ide/assets dist/apps/remix-ide/index.html dist/apps/remix-ide/main.js dist/apps/remix-ide/polyfills.js dist/apps/remix-ide/runtime.js dist/apps/remix-ide/vendor.js dist/apps/remix-ide/favicon.ico"
+      - FILES_TO_PACKAGE: "dist/apps/remix-ide/assets dist/apps/remix-ide/index.html dist/apps/remix-ide/main.js dist/apps/remix-ide/polyfills.js dist/apps/remix-ide/runtime.js dist/apps/remix-ide/vendor.js dist/apps/remix-ide/favicon.ico dist/apps/remix-ide/vendors~app.js dist/apps/remix-ide/app.js"
     working_directory: ~/remix-project
     parallelism: 7
     steps:
@@ -220,7 +220,7 @@ jobs:
     environment:
       - COMMIT_AUTHOR_EMAIL: "[email protected]"
       - COMMIT_AUTHOR: "Circle CI"
-      - FILES_TO_PACKAGE: "dist/apps/remix-ide/assets dist/apps/remix-ide/production.index.html dist/apps/remix-ide/main.js dist/apps/remix-ide/polyfills.js dist/apps/remix-ide/favicon.ico"
+      - FILES_TO_PACKAGE: "dist/apps/remix-ide/assets dist/apps/remix-ide/production.index.html dist/apps/remix-ide/main.js dist/apps/remix-ide/polyfills.js dist/apps/remix-ide/favicon.ico dist/apps/remix-ide/vendors~app.js dist/apps/remix-ide/app.js"
     working_directory: ~/remix-project
 
     steps:
@@ -248,7 +248,7 @@ jobs:
     environment:
       - COMMIT_AUTHOR_EMAIL: "[email protected]"
       - COMMIT_AUTHOR: "Circle CI"
-      - FILES_TO_PACKAGE: "dist/apps/remix-ide/assets dist/apps/remix-ide/production.index.html dist/apps/remix-ide/main.js dist/apps/remix-ide/polyfills.js dist/apps/remix-ide/favicon.ico"
+      - FILES_TO_PACKAGE: "dist/apps/remix-ide/assets dist/apps/remix-ide/production.index.html dist/apps/remix-ide/main.js dist/apps/remix-ide/polyfills.js dist/apps/remix-ide/favicon.ico dist/apps/remix-ide/vendors~app.js dist/apps/remix-ide/app.js"
     working_directory: ~/remix-project
 
     steps:
@@ -274,7 +274,7 @@ jobs:
     environment:
       - COMMIT_AUTHOR_EMAIL: "[email protected]"
       - COMMIT_AUTHOR: "Circle CI"
-      - FILES_TO_PACKAGE: "dist/apps/remix-ide/assets dist/apps/remix-ide/production.index.html dist/apps/remix-ide/main.js dist/apps/remix-ide/polyfills.js dist/apps/remix-ide/favicon.ico"
+      - FILES_TO_PACKAGE: "dist/apps/remix-ide/assets dist/apps/remix-ide/production.index.html dist/apps/remix-ide/main.js dist/apps/remix-ide/polyfills.js dist/apps/remix-ide/favicon.ico dist/apps/remix-ide/vendors~app.js dist/apps/remix-ide/app.js"
     working_directory: ~/remix-project
 
     steps:
@@ -302,7 +302,7 @@ jobs:
     environment:
       - COMMIT_AUTHOR_EMAIL: "[email protected]"
       - COMMIT_AUTHOR: "Circle CI"
-      - FILES_TO_PACKAGE: "dist/apps/remix-ide/assets dist/apps/remix-ide/production.index.html dist/apps/remix-ide/main.js dist/apps/remix-ide/polyfills.js dist/apps/remix-ide/favicon.ico"
+      - FILES_TO_PACKAGE: "dist/apps/remix-ide/assets dist/apps/remix-ide/production.index.html dist/apps/remix-ide/main.js dist/apps/remix-ide/polyfills.js dist/apps/remix-ide/favicon.ico dist/apps/remix-ide/vendors~app.js dist/apps/remix-ide/app.js"
     working_directory: ~/remix-project
 
     steps:

apps/remix-ide/ci/deploy_from_travis_remix-alpha.sh

@@ -15,7 +15,7 @@ cp -r $FILES_TO_PACKAGE "./"
 rm -rf dist
 ls
 mv production.index.html index.html
-FILES_TO_DEPLOY="assets index.html main.js polyfills.js favicon.ico"
+FILES_TO_DEPLOY="assets index.html main.js polyfills.js favicon.ico vendors~app.js app.js"
 # ZIP the whole directory
 zip -r remix-$SHA.zip $FILES_TO_DEPLOY
 # -f is needed because "build" is part of .gitignore

apps/remix-ide/ci/deploy_from_travis_remix-beta.sh

@@ -15,7 +15,7 @@ cp -r $FILES_TO_PACKAGE "./"
 rm -rf dist
 ls
 mv production.index.html index.html
-FILES_TO_DEPLOY="assets index.html main.js polyfills.js favicon.ico"
+FILES_TO_DEPLOY="assets index.html main.js polyfills.js favicon.ico vendors~app.js app.js"
 # ZIP the whole directory
 zip -r remix-$SHA.zip $FILES_TO_DEPLOY
 # -f is needed because "build" is part of .gitignore

apps/remix-ide/ci/deploy_from_travis_remix-live.sh

@@ -15,7 +15,7 @@ cp -r $FILES_TO_PACKAGE "./"
 rm -rf dist
 ls
 mv production.index.html index.html
-FILES_TO_DEPLOY="assets index.html main.js polyfills.js"
+FILES_TO_DEPLOY="assets index.html main.js polyfills.js vendors~app.js app.js"
 # ZIP the whole directory
 zip -r remix-$SHA.zip $FILES_TO_DEPLOY
 # -f is needed because "build" is part of .gitignore

apps/remix-ide/src/index.css

@@ -0,0 +1,22 @@
+.centered {
+  position           : fixed;
+  top                : 20%;
+  left               : 45%;
+  width              : 200px;
+  height             : 200px;
+}
+.centered svg path {
+  fill: var(--secondary);
+}
+.centered svg polygon {
+  fill              : var(--secondary);
+}
+.splash {
+  text-align: center;
+}
+.version {
+  cursor: pointer;
+  font-size: 0.8rem;
+  font-weight: normal;
+  max-width: 300px;
+}

apps/remix-ide/src/index.tsx

@@ -3,6 +3,8 @@ import React from 'react'
 import { render } from 'react-dom'
 // eslint-disable-next-line no-unused-vars
 import { RemixApp } from '@remix-ui/app'
+import * as packageJson from '../../../package.json'
+import './index.css'
 
 (function () {
   render(
@@ -15,6 +17,11 @@ import { RemixApp } from '@remix-ui/app'
           </svg>
           <div className="info-secondary splash">
             REMIX IDE
+            <br />
+            <span className='version'> v{ packageJson.version }</span>
+          </div>
+          <div style={{ marginTop: '50%', textAlign: 'center' }}>
+            <i className="fas fa-spinner fa-spin fa-2x"></i>
           </div>
         </div>
     </React.StrictMode>,
@@ -35,3 +42,4 @@ import ('./app').then((AppComponent) => {
 }).catch(err => {
   console.log('Error on loading Remix:', err)
 })
+

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

@@ -1,7 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react'
 import './style/remix-app.css'
 import { RemixUIMainPanel } from '@remix-ui/panel'
-import RemixSplashScreen from './components/splashscreen'
 import MatomoDialog from './components/modals/matomo'
 import OriginWarning from './components/modals/origin-warning'
 import DragBar from './components/dragbar/dragbar'
@@ -89,7 +88,6 @@ const RemixApp = (props: IRemixAppUi) => {
 
   return (
     <AppProvider value={value}>
-      <RemixSplashScreen hide={appReady}></RemixSplashScreen>
       <OriginWarning></OriginWarning>
       <MatomoDialog hide={!appReady}></MatomoDialog>
 

libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx

@@ -290,7 +290,7 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
           <div>
             <i className="pl-4 text-danger fas fa-exclamation-triangle"></i>
             <span className="px-2 remixui_home_text text-danger mt-4 pt-4">
-              Scam Alert: Beware of Youtube videos promoting "liquidity front runner bots" asking to paste contract code into Remix IDE.
+              Scam Alert: Beware of videos promoting "liquidity front runner bots" asking to paste contract code into Remix IDE.
             </span>
             <a className="remixui_home_text" target="__blank" href="https://medium.com/remix-ide/remix-in-youtube-crypto-scams-71c338da32d">Learn more</a>
           </div>