mirror
/
remix-project
mirror of https://github.com/ethereum/remix-project.git
2
0
Fork 0
Code Issues Releases Wiki Activity

UI

Browse Source
pull/2113/head
bunsenstraat 3 years ago
parent 41f441748a
commit daf5508e2c
3 changed files with 75 additions and 56 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 22
      apps/remix-ide/src/app/components/preload.css
  2. 102
      apps/remix-ide/src/app/components/preload.tsx
  3. 7
      apps/remix-ide/src/app/files/filesystems/localStorage.ts

22
apps/remix-ide/src/app/components/preload.css
Unescape View File

@ -0,0 +1,22 @@
.preload-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
.preload-info-container {
display: flex;
flex-direction: column;
text-align: center;
max-width: 400px;
}
.preload-info-container .btn {
cursor: pointer;
}
.preload-logo {
min-width: 200px;
}

102
apps/remix-ide/src/app/components/preload.tsx
Unescape View File

@ -2,10 +2,11 @@ import { RemixApp } from '@remix-ui/app'
import React, { useEffect, useRef, useState } from 'react' import React, { useEffect, useRef, useState } from 'react'
import { render } from 'react-dom' import { render } from 'react-dom'
import * as packageJson from '../../../../../package.json' import * as packageJson from '../../../../../package.json'
import { fileSystems } from '../files/fileSystem' import { fileSystem, fileSystems } from '../files/fileSystem'
import { indexedDBFileSystem } from '../files/filesystems/indexedDB' import { indexedDBFileSystem } from '../files/filesystems/indexedDB'
import { localStorageFS } from '../files/filesystems/localStorage' import { localStorageFS } from '../files/filesystems/localStorage'
import { fileSystemUtility } from '../files/filesystems/migrateFileSystem' import { fileSystemUtility } from '../files/filesystems/migrateFileSystem'
import './preload.css'
export const Preload = () => { export const Preload = () => {
@ -13,12 +14,8 @@ export const Preload = () => {
const [error, setError] = useState<boolean>(false) const [error, setError] = useState<boolean>(false)
const [showDownloader, setShowDownloader] = useState<boolean>(false) const [showDownloader, setShowDownloader] = useState<boolean>(false)
const remixFileSystems = useRef<fileSystems>(new fileSystems()) const remixFileSystems = useRef<fileSystems>(new fileSystems())
const remixIndexedDB = useRef<fileSystem>(new indexedDBFileSystem())
const logo = <svg id="Ebene_2" data-name="Ebene 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 100"> const localStorageFileSystem = useRef<fileSystem>(new localStorageFS())
<path d="M91.84,35a.09.09,0,0,1-.1-.07,41,41,0,0,0-79.48,0,.09.09,0,0,1-.1.07C9.45,35,1,35.35,1,42.53c0,8.56,1,16,6,20.32,2.16,1.85,5.81,2.3,9.27,2.22a44.4,44.4,0,0,0,6.45-.68.09.09,0,0,0,.06-.15A34.81,34.81,0,0,1,17,45c0-.1,0-.21,0-.31a35,35,0,0,1,70,0c0,.1,0,.21,0,.31a34.81,34.81,0,0,1-5.78,19.24.09.09,0,0,0,.06.15,44.4,44.4,0,0,0,6.45.68c3.46.08,7.11-.37,9.27-2.22,5-4.27,6-11.76,6-20.32C103,35.35,94.55,35,91.84,35Z" />
<path d="M52,74,25.4,65.13a.1.1,0,0,0-.1.17L51.93,91.93a.1.1,0,0,0,.14,0L78.7,65.3a.1.1,0,0,0-.1-.17L52,74A.06.06,0,0,1,52,74Z" />
<path d="M75.68,46.9,82,45a.09.09,0,0,0,.08-.09,29.91,29.91,0,0,0-.87-6.94.11.11,0,0,0-.09-.08l-6.43-.58a.1.1,0,0,1-.06-.18l4.78-4.18a.13.13,0,0,0,0-.12,30.19,30.19,0,0,0-3.65-6.07.09.09,0,0,0-.11,0l-5.91,2a.1.1,0,0,1-.12-.14L72.19,23a.11.11,0,0,0,0-.12,29.86,29.86,0,0,0-5.84-4.13.09.09,0,0,0-.11,0l-4.47,4.13a.1.1,0,0,1-.17-.07l.09-6a.1.1,0,0,0-.07-.1,30.54,30.54,0,0,0-7-1.47.1.1,0,0,0-.1.07l-2.38,5.54a.1.1,0,0,1-.18,0l-2.37-5.54a.11.11,0,0,0-.11-.06,30,30,0,0,0-7,1.48.12.12,0,0,0-.07.1l.08,6.05a.09.09,0,0,1-.16.07L37.8,18.76a.11.11,0,0,0-.12,0,29.75,29.75,0,0,0-5.83,4.13.11.11,0,0,0,0,.12l2.59,5.6a.11.11,0,0,1-.13.14l-5.9-2a.11.11,0,0,0-.12,0,30.23,30.23,0,0,0-3.62,6.08.11.11,0,0,0,0,.12l4.79,4.19a.1.1,0,0,1-.06.17L23,37.91a.1.1,0,0,0-.09.07A29.9,29.9,0,0,0,22,44.92a.1.1,0,0,0,.07.1L28.4,47a.1.1,0,0,1,0,.18l-5.84,3.26a.16.16,0,0,0,0,.11,30.17,30.17,0,0,0,2.1,6.76c.32.71.67,1.4,1,2.08a.1.1,0,0,0,.06,0L52,68.16H52l26.34-8.78a.1.1,0,0,0,.06-.05,30.48,30.48,0,0,0,3.11-8.88.1.1,0,0,0-.05-.11l-5.83-3.26A.1.1,0,0,1,75.68,46.9Z" />
</svg>
function loadAppComponent() { function loadAppComponent() {
import('../../app').then((AppComponent) => { import('../../app').then((AppComponent) => {
@ -37,79 +34,80 @@ export const Preload = () => {
}) })
} }
const downloadBackup = async () => {
const fsUtility = new fileSystemUtility()
await fsUtility.downloadBackup(remixFileSystems.current.fileSystems['localstorage'])
await migrateAndLoad()
}
const skipBackup = async () => {
await migrateAndLoad()
}
const downloadBackup = async () =>{ const migrateAndLoad = async () => {
const migrator = new fileSystemUtility() const fsUtility = new fileSystemUtility()
migrator.downloadBackup(remixFileSystems.current.fileSystems['localstorage']) await fsUtility.migrate(localStorageFileSystem.current, remixIndexedDB.current)
loadAppComponent() await setFileSystems()
} }
const skipBackup = async() => { const setFileSystems = async () => {
loadAppComponent() const fsLoaded = await remixFileSystems.current.setFileSystem([remixIndexedDB.current, localStorageFileSystem.current])
if (fsLoaded) {
console.log(fsLoaded.name + ' activated')
loadAppComponent()
} else {
setSupported(false)
}
} }
useEffect(() => { useEffect(() => {
async function loadStorage() { async function loadStorage() {
const remixIndexedDB = new indexedDBFileSystem() await remixFileSystems.current.addFileSystem(remixIndexedDB.current)
const localStorageFileSystem = new localStorageFS() await remixFileSystems.current.addFileSystem(localStorageFileSystem.current)
await remixIndexedDB.current.checkWorkspaces()
remixIndexedDB.current.hasWorkSpaces ? await setFileSystems() : setShowDownloader(true)
await remixFileSystems.current.addFileSystem(remixIndexedDB)
await remixFileSystems.current.addFileSystem(localStorageFileSystem)
setShowDownloader(true)
const migrator = new fileSystemUtility()
await migrator.migrate(localStorageFileSystem, remixIndexedDB)
const fsLoaded = await remixFileSystems.current.setFileSystem([remixIndexedDB, localStorageFileSystem])
if (fsLoaded) {
console.log(fsLoaded.name + ' activated')
console.log(localStorageFileSystem)
// migrator.downloadBackup(localStorageFileSystem)
//loadAppComponent()
} else {
console.log('No filesystem could be loaded')
setSupported(false)
// displayBrowserNotSupported()
}
} }
loadStorage() loadStorage()
}, []) }, [])
return <> return <>
<div style={{ display: 'block' }} className='centered'> <div className='preload-container'>
{logo} <div className='preload-logo pb-4'>
<div className="info-secondary splash"> {logo}
REMIX IDE <div className="info-secondary splash">
<br /> REMIX IDE
<span className='version'> v{packageJson.version}</span> <br />
<span className='version'> v{packageJson.version}</span>
</div>
</div> </div>
{!supported ? {!supported ?
<div style={{ marginTop: '50%', textAlign: 'center' }}> <div className='preload-info-container alert alert-warning'>
Your browser does not support any of the filesytems required by Remix. Your browser does not support any of the filesytems required by Remix.
Either change the settings in your browser or use a supported browser. Either change the settings in your browser or use a supported browser.
</div> : null} </div> : null}
{error ? {error ?
<div style={{ marginTop: '50%', textAlign: 'center' }}> <div className='preload-info-container alert alert-danger'>
An unknown error has occured loading the application. An unknown error has occured loading the application.
</div> : null} </div> : null}
{showDownloader ? {showDownloader ?
<div style={{ marginTop: '20%', textAlign: 'center' }}> <div className='preload-info-container alert alert-info'>
This app will be updated now. Please download a backup of your files now to make sure you don't lose your work. This app will be updated now. Please download a backup of your files now to make sure you don't lose your work.
<br></br> <br></br>
You don't need to do anything else, your files will be available when the app loads. You don't need to do anything else, your files will be available when the app loads.
<div onClick={async() => {await downloadBackup()}} className='btn btn-primary mt-1'>download backup</div> <div onClick={async () => { await downloadBackup() }} className='btn btn-primary mt-1'>download backup</div>
<div onClick={async() => {await skipBackup()}}className='btn btn-primary mt-1'>skip backup</div> <div onClick={async () => { await skipBackup() }} className='btn btn-primary mt-1'>skip backup</div>
</div> : null} </div> : null}
{(supported && !error && !showDownloader) ? {(supported && !error && !showDownloader) ?
<div style={{ marginTop: '50%', textAlign: 'center' }}> <div>
<i className="fas fa-spinner fa-spin fa-2x"></i> <i className="fas fa-spinner fa-spin fa-2x"></i>
</div> : null} </div> : null}
</div> </div>
</> </>
} }
const logo = <svg id="Ebene_2" data-name="Ebene 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 100">
<path d="M91.84,35a.09.09,0,0,1-.1-.07,41,41,0,0,0-79.48,0,.09.09,0,0,1-.1.07C9.45,35,1,35.35,1,42.53c0,8.56,1,16,6,20.32,2.16,1.85,5.81,2.3,9.27,2.22a44.4,44.4,0,0,0,6.45-.68.09.09,0,0,0,.06-.15A34.81,34.81,0,0,1,17,45c0-.1,0-.21,0-.31a35,35,0,0,1,70,0c0,.1,0,.21,0,.31a34.81,34.81,0,0,1-5.78,19.24.09.09,0,0,0,.06.15,44.4,44.4,0,0,0,6.45.68c3.46.08,7.11-.37,9.27-2.22,5-4.27,6-11.76,6-20.32C103,35.35,94.55,35,91.84,35Z" />
<path d="M52,74,25.4,65.13a.1.1,0,0,0-.1.17L51.93,91.93a.1.1,0,0,0,.14,0L78.7,65.3a.1.1,0,0,0-.1-.17L52,74A.06.06,0,0,1,52,74Z" />
<path d="M75.68,46.9,82,45a.09.09,0,0,0,.08-.09,29.91,29.91,0,0,0-.87-6.94.11.11,0,0,0-.09-.08l-6.43-.58a.1.1,0,0,1-.06-.18l4.78-4.18a.13.13,0,0,0,0-.12,30.19,30.19,0,0,0-3.65-6.07.09.09,0,0,0-.11,0l-5.91,2a.1.1,0,0,1-.12-.14L72.19,23a.11.11,0,0,0,0-.12,29.86,29.86,0,0,0-5.84-4.13.09.09,0,0,0-.11,0l-4.47,4.13a.1.1,0,0,1-.17-.07l.09-6a.1.1,0,0,0-.07-.1,30.54,30.54,0,0,0-7-1.47.1.1,0,0,0-.1.07l-2.38,5.54a.1.1,0,0,1-.18,0l-2.37-5.54a.11.11,0,0,0-.11-.06,30,30,0,0,0-7,1.48.12.12,0,0,0-.07.1l.08,6.05a.09.09,0,0,1-.16.07L37.8,18.76a.11.11,0,0,0-.12,0,29.75,29.75,0,0,0-5.83,4.13.11.11,0,0,0,0,.12l2.59,5.6a.11.11,0,0,1-.13.14l-5.9-2a.11.11,0,0,0-.12,0,30.23,30.23,0,0,0-3.62,6.08.11.11,0,0,0,0,.12l4.79,4.19a.1.1,0,0,1-.06.17L23,37.91a.1.1,0,0,0-.09.07A29.9,29.9,0,0,0,22,44.92a.1.1,0,0,0,.07.1L28.4,47a.1.1,0,0,1,0,.18l-5.84,3.26a.16.16,0,0,0,0,.11,30.17,30.17,0,0,0,2.1,6.76c.32.71.67,1.4,1,2.08a.1.1,0,0,0,.06,0L52,68.16H52l26.34-8.78a.1.1,0,0,0,.06-.05,30.48,30.48,0,0,0,3.11-8.88.1.1,0,0,0-.05-.11l-5.83-3.26A.1.1,0,0,1,75.68,46.9Z" />
</svg>

7
apps/remix-ide/src/app/files/filesystems/localStorage.ts
Unescape View File

@ -10,10 +10,9 @@ export class localStorageFS extends fileSystem {
const me = this const me = this
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
try { try {
// eslint-disable-next-line no-undef const w = window as any
BrowserFS.install(window) w.BrowserFS.install(window)
// eslint-disable-next-line no-undef w.BrowserFS.configure({
BrowserFS.configure({
fs: 'LocalStorage' fs: 'LocalStorage'
}, async function (e) { }, async function (e) {
if (e) { if (e) {

Write Preview
Loading…
Cancel
Save