Merge pull request #1995 from ethereum/download_zip

add download backup in homepage

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

@@ -1,6 +1,7 @@
 import React, { useState, useRef, useEffect, useReducer } from 'react' // eslint-disable-line
 
 import './remix-ui-home-tab.css'
+import JSZip from 'jszip'
 import { ModalDialog } from '@remix-ui/modal-dialog' // eslint-disable-line
 import { Toaster } from '@remix-ui/toaster' // eslint-disable-line
 import PluginButton from './components/pluginButton' // eslint-disable-line
@@ -175,6 +176,43 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
   const startPluginManager = async () => {
     plugin.verticalIcons.select('pluginManager')
   }
+  const saveAs = (blob, name) => {
+    const node = document.createElement('a')
+    node.download = name
+    node.rel = 'noopener'
+    node.href = URL.createObjectURL(blob)
+    setTimeout(function () { URL.revokeObjectURL(node.href) }, 4E4) // 40s
+    setTimeout(function () {
+      try {
+        node.dispatchEvent(new MouseEvent('click'))
+      } catch (e) {
+        var evt = document.createEvent('MouseEvents')
+        evt.initMouseEvent('click', true, true, window, 0, 0, 0, 80,
+          20, false, false, false, false, 0, null)
+        node.dispatchEvent(evt)
+      }
+    }, 0) // 40s
+  }
+  const downloadFiles = async () => {
+    try {
+      plugin.call('notification', 'toast', 'preparing files for download, please wait..')
+      const zip = new JSZip()
+      const browserProvider = fileManager.getProvider('browser')
+      await browserProvider.copyFolderToJson('/', ({ path, content }) => {
+        zip.file(path, content)
+      })
+      zip.generateAsync({ type: 'blob' }).then(function (blob) {
+        var today = new Date()
+        var date = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate()
+        var time = today.getHours() + 'h' + today.getMinutes() + 'min'
+        saveAs(blob, `remix-backup-at-${time}-${date}.zip`)
+      }).catch((e) => {
+        plugin.call('notification', 'toast', e.message)
+      })
+    } catch (e) {
+      plugin.call('notification', 'toast', e.message)
+    }
+  }
 
   const showFullMessage = (title: string, loadItem: string, examples: Array<string>) => {
     setState(prevState => {
@@ -279,6 +317,10 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
                   <i className="mr-1 far fa-hdd"></i>
                   <label className="ml-1 remixui_home_text" onClick={() => connectToLocalhost()}>Connect to Localhost</label>
                 </p>
+                <p className="mb-1">
+                  <i className="mr-1 far fa-download"></i>
+                  <label className="ml-1 remixui_home_text" onClick={() => downloadFiles()}>Download Backup</label>
+                </p>
                 <p className="mt-3 mb-0"><label>LOAD FROM:</label></p>
                 <div className="btn-group">
                   <button className="btn mr-1 btn-secondary" data-id="landingPageImportFromGistButton" onClick={() => importFromGist()}>Gist</button>