From a50628aaac6781361551b7011ee9fd4ff0150b91 Mon Sep 17 00:00:00 2001
From: ioedeveloper <daviddisu8@gmail.com>
Date: Fri, 14 May 2021 20:33:22 +0100
Subject: [PATCH 01/14] Publish folder to gist

---
 apps/remix-ide/src/lib/gist-handler.js        |  2 +-
 .../src/lib/actions/fileSystem.ts             | 14 ++--
 .../src/lib/file-explorer-context-menu.tsx    |  2 +-
 .../file-explorer/src/lib/file-explorer.tsx   | 66 ++++++++++++-------
 .../src/lib/reducers/fileSystem.ts            |  9 ++-
 .../file-explorer/src/lib/types/index.ts      |  5 +-
 6 files changed, 62 insertions(+), 36 deletions(-)

diff --git a/apps/remix-ide/src/lib/gist-handler.js b/apps/remix-ide/src/lib/gist-handler.js
index 92c170b10f..eac8c607c1 100644
--- a/apps/remix-ide/src/lib/gist-handler.js
+++ b/apps/remix-ide/src/lib/gist-handler.js
@@ -54,7 +54,7 @@ function GistHandler (_window) {
         }
         const obj = {}
         Object.keys(data.files).forEach((element) => {
-          obj['/' + gistId + '/' + element] = data.files[element]
+          obj['/' + 'gist-' + gistId + '/' + element] = data.files[element]
         })
         fileManager.setBatchFiles(obj, 'workspace', true, (errorLoadingFile) => {
           if (!errorLoadingFile) {
diff --git a/libs/remix-ui/file-explorer/src/lib/actions/fileSystem.ts b/libs/remix-ui/file-explorer/src/lib/actions/fileSystem.ts
index 8a397cfd91..54e9befc58 100644
--- a/libs/remix-ui/file-explorer/src/lib/actions/fileSystem.ts
+++ b/libs/remix-ui/file-explorer/src/lib/actions/fileSystem.ts
@@ -41,14 +41,16 @@ const normalize = (parent, filesList, newInputType?: string): any => {
     if (filesList[key].isDirectory) {
       folders[extractNameFromKey(key)] = {
         path,
-        name: extractNameFromKey(path),
-        isDirectory: filesList[key].isDirectory
+        name: extractNameFromKey(path).indexOf('gist-') === 0 ? extractNameFromKey(path).split('-')[1] : extractNameFromKey(path),
+        isDirectory: filesList[key].isDirectory,
+        type: extractNameFromKey(path).indexOf('gist-') === 0 ? 'gist' : 'folder'
       }
     } else {
       files[extractNameFromKey(key)] = {
         path,
         name: extractNameFromKey(path),
-        isDirectory: filesList[key].isDirectory
+        isDirectory: filesList[key].isDirectory,
+        type: 'file'
       }
     }
   })
@@ -59,7 +61,8 @@ const normalize = (parent, filesList, newInputType?: string): any => {
     folders[path] = {
       path: path,
       name: '',
-      isDirectory: true
+      isDirectory: true,
+      type: 'folder'
     }
   } else if (newInputType === 'file') {
     const path = parent + '/blank'
@@ -67,7 +70,8 @@ const normalize = (parent, filesList, newInputType?: string): any => {
     files[path] = {
       path: path,
       name: '',
-      isDirectory: false
+      isDirectory: false,
+      type: 'file'
     }
   }
 
diff --git a/libs/remix-ui/file-explorer/src/lib/file-explorer-context-menu.tsx b/libs/remix-ui/file-explorer/src/lib/file-explorer-context-menu.tsx
index 3e6b308a35..81bd7aa5e9 100644
--- a/libs/remix-ui/file-explorer/src/lib/file-explorer-context-menu.tsx
+++ b/libs/remix-ui/file-explorer/src/lib/file-explorer-context-menu.tsx
@@ -50,7 +50,7 @@ export const FileExplorerContextMenu = (props: FileExplorerContextMenuProps) =>
               deletePath(path)
               break
             case 'Push changes to gist':
-              publishToGist()
+              publishToGist(path, type)
               break
             case 'Run':
               runScript(path)
diff --git a/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx b/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx
index c471449ac4..a93b801ec9 100644
--- a/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx
+++ b/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx
@@ -31,14 +31,14 @@ export const FileExplorer = (props: FileExplorerProps) => {
     actions: [{
       id: 'newFile',
       name: 'New File',
-      type: ['folder'],
+      type: ['folder', 'gist'],
       path: [],
       extension: [],
       pattern: []
     }, {
       id: 'newFolder',
       name: 'New Folder',
-      type: ['folder'],
+      type: ['folder', 'gist'],
       path: [],
       extension: [],
       pattern: []
@@ -52,17 +52,24 @@ export const FileExplorer = (props: FileExplorerProps) => {
     }, {
       id: 'delete',
       name: 'Delete',
-      type: ['file', 'folder'],
+      type: ['file', 'folder', 'gist'],
       path: [],
       extension: [],
       pattern: []
     }, {
       id: 'pushChangesToGist',
-      name: 'Push changes to gist',
-      type: [],
+      name: 'Push back changes to gist',
+      type: ['gist'],
       path: [],
       extension: [],
-      pattern: ['^browser/gists/([0-9]|[a-z])*$']
+      pattern: []
+    }, {
+      id: 'publishFolderToGist',
+      name: 'Publish folder to gist',
+      type: ['folder'],
+      path: [],
+      extension: [],
+      pattern: []
     }, {
       id: 'run',
       name: 'Run',
@@ -228,6 +235,15 @@ export const FileExplorer = (props: FileExplorerProps) => {
     else return false
   }
 
+  const getFocusedFolder = () => {
+    if (state.focusElement[0]) {
+      if (state.focusElement[0].type === 'folder' && state.focusElement[0].key) return state.focusElement[0].key
+      else if (state.focusElement[0].type === 'gist' && state.focusElement[0].key) return state.focusElement[0].key
+      else if (state.focusElement[0].type === 'file' && state.focusElement[0].key) return extractParentFromKey(state.focusElement[0].key)
+      else return name
+    }
+  }
+
   const createNewFile = async (newFilePath: string) => {
     const fileManager = state.fileManager
 
@@ -309,7 +325,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
     // the files module. Please ask the user here if they want to overwrite
     // a file and then just use `files.add`. The file explorer will
     // pick that up via the 'fileAdded' event from the files module.
-    const parentFolder = state.focusElement[0] ? state.focusElement[0].type === 'folder' ? state.focusElement[0].key : extractParentFromKey(state.focusElement[0].key) : name
+    const parentFolder = getFocusedFolder()
     const expandPath = [...new Set([...state.expandPath, parentFolder])]
 
     setState(prevState => {
@@ -359,7 +375,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
     modal('Create a public gist', `Are you sure you want to anonymously publish all your files in the ${name} workspace as a public gist on github.com?`, 'OK', toGist, 'Cancel', () => {})
   }
 
-  const toGist = (id?: string) => {
+  const toGist = (path?: string, type?: string) => {
     const filesProvider = fileSystem.provider.provider
     const proccedResult = function (error, data) {
       if (error) {
@@ -393,7 +409,8 @@ export const FileExplorer = (props: FileExplorerProps) => {
     }
 
     // If 'id' is not defined, it is not a gist update but a creation so we have to take the files from the browser explorer.
-    const folder = id ? '/gists/' + id : '/'
+    const folder = path || '/'
+    const id = type === 'gist' ? extractNameFromKey(path).split('-')[1] : null
 
     packageFiles(filesProvider, folder, async (error, packaged) => {
       if (error) {
@@ -501,15 +518,15 @@ export const FileExplorer = (props: FileExplorerProps) => {
     })
   }
 
-  const handleClickFile = (path: string) => {
+  const handleClickFile = (path: string, type: string) => {
     path = path.indexOf(props.name + '/') === 0 ? path.replace(props.name + '/', '') : path
     state.fileManager.open(path)
     setState(prevState => {
-      return { ...prevState, focusElement: [{ key: path, type: 'file' }] }
+      return { ...prevState, focusElement: [{ key: path, type }] }
     })
   }
 
-  const handleClickFolder = async (path: string) => {
+  const handleClickFolder = async (path: string, type: string) => {
     if (state.ctrlKey) {
       if (state.focusElement.findIndex(item => item.key === path) !== -1) {
         setState(prevState => {
@@ -517,7 +534,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
         })
       } else {
         setState(prevState => {
-          return { ...prevState, focusElement: [...prevState.focusElement, { key: path, type: 'folder' }] }
+          return { ...prevState, focusElement: [...prevState.focusElement, { key: path, type }] }
         })
       }
     } else {
@@ -531,22 +548,22 @@ export const FileExplorer = (props: FileExplorerProps) => {
       }
 
       setState(prevState => {
-        return { ...prevState, focusElement: [{ key: path, type: 'folder' }], expandPath }
+        return { ...prevState, focusElement: [{ key: path, type }], expandPath }
       })
     }
   }
 
-  const handleContextMenuFile = (pageX: number, pageY: number, path: string, content: string) => {
+  const handleContextMenuFile = (pageX: number, pageY: number, path: string, content: string, type: string) => {
     if (!content) return
     setState(prevState => {
-      return { ...prevState, focusContext: { element: path, x: pageX, y: pageY, type: 'file' }, focusEdit: { ...prevState.focusEdit, lastEdit: content }, showContextMenu: prevState.focusEdit.element !== path }
+      return { ...prevState, focusContext: { element: path, x: pageX, y: pageY, type }, focusEdit: { ...prevState.focusEdit, lastEdit: content }, showContextMenu: prevState.focusEdit.element !== path }
     })
   }
 
-  const handleContextMenuFolder = (pageX: number, pageY: number, path: string, content: string) => {
+  const handleContextMenuFolder = (pageX: number, pageY: number, path: string, content: string, type: string) => {
     if (!content) return
     setState(prevState => {
-      return { ...prevState, focusContext: { element: path, x: pageX, y: pageY, type: 'folder' }, focusEdit: { ...prevState.focusEdit, lastEdit: content }, showContextMenu: prevState.focusEdit.element !== path }
+      return { ...prevState, focusContext: { element: path, x: pageX, y: pageY, type }, focusEdit: { ...prevState.focusEdit, lastEdit: content }, showContextMenu: prevState.focusEdit.element !== path }
     })
   }
 
@@ -618,7 +635,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
   }
 
   const handleNewFileInput = async (parentFolder?: string) => {
-    if (!parentFolder) parentFolder = state.focusElement[0] ? state.focusElement[0].type === 'folder' ? state.focusElement[0].key ? state.focusElement[0].key : name : extractParentFromKey(state.focusElement[0].key) ? extractParentFromKey(state.focusElement[0].key) : name : name
+    if (!parentFolder) parentFolder = getFocusedFolder()
     const expandPath = [...new Set([...state.expandPath, parentFolder])]
 
     await addInputField(fileSystem.provider.provider, 'file', parentFolder)(dispatch)
@@ -629,7 +646,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
   }
 
   const handleNewFolderInput = async (parentFolder?: string) => {
-    if (!parentFolder) parentFolder = state.focusElement[0] ? state.focusElement[0].type === 'folder' ? state.focusElement[0].key ? state.focusElement[0].key : name : extractParentFromKey(state.focusElement[0].key) ? extractParentFromKey(state.focusElement[0].key) : name : name
+    if (!parentFolder) parentFolder = getFocusedFolder()
     else if ((parentFolder.indexOf('.sol') !== -1) || (parentFolder.indexOf('.js') !== -1)) parentFolder = extractParentFromKey(parentFolder)
     const expandPath = [...new Set([...state.expandPath, parentFolder])]
 
@@ -705,12 +722,12 @@ export const FileExplorer = (props: FileExplorerProps) => {
           label={label(file)}
           onClick={(e) => {
             e.stopPropagation()
-            if (state.focusEdit.element !== file.path) handleClickFolder(file.path)
+            if (state.focusEdit.element !== file.path) handleClickFolder(file.path, file.type)
           }}
           onContextMenu={(e) => {
             e.preventDefault()
             e.stopPropagation()
-            handleContextMenuFolder(e.pageX, e.pageY, file.path, e.target.textContent)
+            handleContextMenuFolder(e.pageX, e.pageY, file.path, e.target.textContent, file.type)
           }}
           labelClass={labelClass}
           controlBehaviour={ state.ctrlKey }
@@ -742,12 +759,12 @@ export const FileExplorer = (props: FileExplorerProps) => {
           label={label(file)}
           onClick={(e) => {
             e.stopPropagation()
-            if (state.focusEdit.element !== file.path) handleClickFile(file.path)
+            if (state.focusEdit.element !== file.path) handleClickFile(file.path, file.type)
           }}
           onContextMenu={(e) => {
             e.preventDefault()
             e.stopPropagation()
-            handleContextMenuFile(e.pageX, e.pageY, file.path, e.target.textContent)
+            handleContextMenuFile(e.pageX, e.pageY, file.path, e.target.textContent, file.type)
           }}
           icon={icon}
           labelClass={labelClass}
@@ -841,6 +858,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
             e.stopPropagation()
             handleMouseOver(state.focusContext.element)
           }}
+          publishToGist={publishToGist}
         />
       }
     </div>
diff --git a/libs/remix-ui/file-explorer/src/lib/reducers/fileSystem.ts b/libs/remix-ui/file-explorer/src/lib/reducers/fileSystem.ts
index dc1628ebf9..73340cbd77 100644
--- a/libs/remix-ui/file-explorer/src/lib/reducers/fileSystem.ts
+++ b/libs/remix-ui/file-explorer/src/lib/reducers/fileSystem.ts
@@ -258,7 +258,8 @@ const resolveDirectory = (root, path: string, files, content) => {
   files = _.set(files, _path, {
     isDirectory: true,
     path,
-    name: extractNameFromKey(path),
+    name: extractNameFromKey(path).indexOf('gist-') === 0 ? extractNameFromKey(path).split('-')[1] : extractNameFromKey(path),
+    type: extractNameFromKey(path).indexOf('gist-') === 0 ? 'gist' : 'folder',
     child: { ...content[pathArr[pathArr.length - 1]], ...(prevFiles ? prevFiles.child : {}) }
   })
 
@@ -278,7 +279,8 @@ const removePath = (root, path: string, pathName, files) => {
   files = _.set(files, _path, {
     isDirectory: true,
     path,
-    name: extractNameFromKey(path),
+    name: extractNameFromKey(path).indexOf('gist-') === 0 ? extractNameFromKey(path).split('-')[1] : extractNameFromKey(path),
+    type: extractNameFromKey(path).indexOf('gist-') === 0 ? 'gist' : 'folder',
     child: prevFiles ? prevFiles.child : {}
   })
 
@@ -336,7 +338,8 @@ const fileRenamed = (root, path: string, removePath: string, files, content) =>
   files = _.set(files, _path, {
     isDirectory: true,
     path,
-    name: extractNameFromKey(path),
+    name: extractNameFromKey(path).indexOf('gist-') === 0 ? extractNameFromKey(path).split('-')[1] : extractNameFromKey(path),
+    type: extractNameFromKey(path).indexOf('gist-') === 0 ? 'gist' : 'folder',
     child: { ...content[pathArr[pathArr.length - 1]], ...prevFiles.child }
   })
 
diff --git a/libs/remix-ui/file-explorer/src/lib/types/index.ts b/libs/remix-ui/file-explorer/src/lib/types/index.ts
index 17d6975414..9f3f584e4d 100644
--- a/libs/remix-ui/file-explorer/src/lib/types/index.ts
+++ b/libs/remix-ui/file-explorer/src/lib/types/index.ts
@@ -15,6 +15,7 @@ export interface File {
     path: string,
     name: string,
     isDirectory: boolean,
+    type: string,
     child?: File[]
 }
 
@@ -24,7 +25,7 @@ export interface FileExplorerMenuProps {
     fileManager: any,
     createNewFile: (folder?: string) => void,
     createNewFolder: (parentFolder?: string) => void,
-    publishToGist: () => void,
+    publishToGist: (path?: string) => void,
     uploadFile: (target: EventTarget & HTMLInputElement) => void
 }
 
@@ -35,7 +36,7 @@ export interface FileExplorerContextMenuProps {
     deletePath: (path: string) => void,
     renamePath: (path: string, type: string) => void,
     hideContextMenu: () => void,
-    publishToGist?: () => void,
+    publishToGist?: (path?: string, type?: string) => void,
     runScript?: (path: string) => void,
     emit?: (id: string, path: string) => void,
     pageX: number,

From d4b4081833c7366bb76a966455acfdc2787f3bed Mon Sep 17 00:00:00 2001
From: ioedeveloper <daviddisu8@gmail.com>
Date: Fri, 14 May 2021 20:46:13 +0100
Subject: [PATCH 02/14] Add usecase for files

---
 .../file-explorer/src/lib/file-explorer-context-menu.tsx | 6 ++++++
 libs/remix-ui/file-explorer/src/lib/file-explorer.tsx    | 9 ++++++++-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/libs/remix-ui/file-explorer/src/lib/file-explorer-context-menu.tsx b/libs/remix-ui/file-explorer/src/lib/file-explorer-context-menu.tsx
index 81bd7aa5e9..2deb23e96a 100644
--- a/libs/remix-ui/file-explorer/src/lib/file-explorer-context-menu.tsx
+++ b/libs/remix-ui/file-explorer/src/lib/file-explorer-context-menu.tsx
@@ -52,6 +52,12 @@ export const FileExplorerContextMenu = (props: FileExplorerContextMenuProps) =>
             case 'Push changes to gist':
               publishToGist(path, type)
               break
+            case 'Publish folder to gist':
+              publishToGist(path, type)
+              break
+            case 'Publish file to gist':
+              publishToGist(path, type)
+              break
             case 'Run':
               runScript(path)
               break
diff --git a/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx b/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx
index a93b801ec9..188c805084 100644
--- a/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx
+++ b/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx
@@ -58,7 +58,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
       pattern: []
     }, {
       id: 'pushChangesToGist',
-      name: 'Push back changes to gist',
+      name: 'Push changes to gist',
       type: ['gist'],
       path: [],
       extension: [],
@@ -70,6 +70,13 @@ export const FileExplorer = (props: FileExplorerProps) => {
       path: [],
       extension: [],
       pattern: []
+    }, {
+      id: 'publishFileToGist',
+      name: 'Publish file to gist',
+      type: ['file'],
+      path: [],
+      extension: [],
+      pattern: []
     }, {
       id: 'run',
       name: 'Run',

From e51bfffccb7f1f95cbd2a2653690f344c7536b84 Mon Sep 17 00:00:00 2001
From: ioedeveloper <daviddisu8@gmail.com>
Date: Sun, 16 May 2021 15:32:39 +0100
Subject: [PATCH 03/14] Publish file content

---
 .../file-explorer/src/lib/file-explorer.tsx   | 44 +++++++++++++------
 1 file changed, 31 insertions(+), 13 deletions(-)

diff --git a/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx b/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx
index 188c805084..d450022a66 100644
--- a/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx
+++ b/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx
@@ -378,8 +378,8 @@ export const FileExplorer = (props: FileExplorerProps) => {
     })
   }
 
-  const publishToGist = () => {
-    modal('Create a public gist', `Are you sure you want to anonymously publish all your files in the ${name} workspace as a public gist on github.com?`, 'OK', toGist, 'Cancel', () => {})
+  const publishToGist = (path?: string, type?: string) => {
+    modal('Create a public gist', `Are you sure you want to anonymously publish all your files in the ${name} workspace as a public gist on github.com?`, 'OK', () => toGist(path, type), 'Cancel', () => {})
   }
 
   const toGist = (path?: string, type?: string) => {
@@ -875,18 +875,36 @@ export const FileExplorer = (props: FileExplorerProps) => {
 export default FileExplorer
 
 async function packageFiles (filesProvider, directory, callback) {
+  const isFile = filesProvider.isFile(directory)
   const ret = {}
-  try {
-    await filesProvider.copyFolderToJson(directory, ({ path, content }) => {
-      if (/^\s+$/.test(content) || !content.length) {
-        content = '// this line is added to create a gist. Empty file is not allowed.'
-      }
-      path = path.replace(/\//g, '...')
-      ret[path] = { content }
-    })
-    callback(null, ret)
-  } catch (e) {
-    return callback(e)
+
+  if (isFile) {
+    try {
+      filesProvider.get(directory, (error, content) => {
+        if (error) throw new Error('An error ocurred while getting file content. ' + directory)
+        if (/^\s+$/.test(content) || !content.length) {
+          content = '// this line is added to create a gist. Empty file is not allowed.'
+        }
+        directory = directory.replace(/\//g, '...')
+        ret[directory] = { content }
+        callback(null, ret)
+      })
+    } catch (e) {
+      return callback(e)
+    }
+  } else {
+    try {
+      await filesProvider.copyFolderToJson(directory, ({ path, content }) => {
+        if (/^\s+$/.test(content) || !content.length) {
+          content = '// this line is added to create a gist. Empty file is not allowed.'
+        }
+        path = path.replace(/\//g, '...')
+        ret[path] = { content }
+      })
+      callback(null, ret)
+    } catch (e) {
+      return callback(e)
+    }
   }
 }
 

From dbaeefc807ad78b95b53c569ddf40edbd7e4976c Mon Sep 17 00:00:00 2001
From: ioedeveloper <daviddisu8@gmail.com>
Date: Mon, 17 May 2021 09:20:16 +0100
Subject: [PATCH 04/14] Display different modal messages for publish to gist
 cases

---
 .../src/lib/file-explorer-context-menu.tsx    |  8 ++---
 .../file-explorer/src/lib/file-explorer.tsx   | 34 ++++++++++++++++++-
 .../file-explorer/src/lib/types/index.ts      |  3 ++
 3 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/libs/remix-ui/file-explorer/src/lib/file-explorer-context-menu.tsx b/libs/remix-ui/file-explorer/src/lib/file-explorer-context-menu.tsx
index 2deb23e96a..13915aab02 100644
--- a/libs/remix-ui/file-explorer/src/lib/file-explorer-context-menu.tsx
+++ b/libs/remix-ui/file-explorer/src/lib/file-explorer-context-menu.tsx
@@ -4,7 +4,7 @@ import { FileExplorerContextMenuProps } from './types'
 import './css/file-explorer-context-menu.css'
 
 export const FileExplorerContextMenu = (props: FileExplorerContextMenuProps) => {
-  const { actions, createNewFile, createNewFolder, deletePath, renamePath, hideContextMenu, publishToGist, runScript, emit, pageX, pageY, path, type, ...otherProps } = props
+  const { actions, createNewFile, createNewFolder, deletePath, renamePath, hideContextMenu, pushChangesToGist, publishFileToGist, publishFolderToGist, runScript, emit, pageX, pageY, path, type, ...otherProps } = props
   const contextMenuRef = useRef(null)
 
   useEffect(() => {
@@ -50,13 +50,13 @@ export const FileExplorerContextMenu = (props: FileExplorerContextMenuProps) =>
               deletePath(path)
               break
             case 'Push changes to gist':
-              publishToGist(path, type)
+              pushChangesToGist(path, type)
               break
             case 'Publish folder to gist':
-              publishToGist(path, type)
+              publishFolderToGist(path, type)
               break
             case 'Publish file to gist':
-              publishToGist(path, type)
+              publishFileToGist(path, type)
               break
             case 'Run':
               runScript(path)
diff --git a/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx b/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx
index d450022a66..c883cb848a 100644
--- a/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx
+++ b/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx
@@ -382,6 +382,36 @@ export const FileExplorer = (props: FileExplorerProps) => {
     modal('Create a public gist', `Are you sure you want to anonymously publish all your files in the ${name} workspace as a public gist on github.com?`, 'OK', () => toGist(path, type), 'Cancel', () => {})
   }
 
+  const pushChangesToGist = (path?: string, type?: string) => {
+    modal('Create a public gist', 'Are you sure you want to push changes to remote gist file on github.com?', {
+      label: 'OK',
+      fn: () => toGist(path, type)
+    }, {
+      label: 'Cancel',
+      fn: () => {}
+    })
+  }
+
+  const publishFolderToGist = (path?: string, type?: string) => {
+    modal('Create a public gist', `Are you sure you want to anonymously publish all your files in the ${path} folder as a public gist on github.com?`, {
+      label: 'OK',
+      fn: () => toGist(path, type)
+    }, {
+      label: 'Cancel',
+      fn: () => {}
+    })
+  }
+
+  const publishFileToGist = (path?: string, type?: string) => {
+    modal('Create a public gist', `Are you sure you want to anonymously publish ${path} file as a public gist on github.com?`, {
+      label: 'OK',
+      fn: () => toGist(path, type)
+    }, {
+      label: 'Cancel',
+      fn: () => {}
+    })
+  }
+
   const toGist = (path?: string, type?: string) => {
     const filesProvider = fileSystem.provider.provider
     const proccedResult = function (error, data) {
@@ -865,7 +895,9 @@ export const FileExplorer = (props: FileExplorerProps) => {
             e.stopPropagation()
             handleMouseOver(state.focusContext.element)
           }}
-          publishToGist={publishToGist}
+          pushChangesToGist={pushChangesToGist}
+          publishFolderToGist={publishFolderToGist}
+          publishFileToGist={publishFileToGist}
         />
       }
     </div>
diff --git a/libs/remix-ui/file-explorer/src/lib/types/index.ts b/libs/remix-ui/file-explorer/src/lib/types/index.ts
index 9f3f584e4d..3234818913 100644
--- a/libs/remix-ui/file-explorer/src/lib/types/index.ts
+++ b/libs/remix-ui/file-explorer/src/lib/types/index.ts
@@ -37,6 +37,9 @@ export interface FileExplorerContextMenuProps {
     renamePath: (path: string, type: string) => void,
     hideContextMenu: () => void,
     publishToGist?: (path?: string, type?: string) => void,
+    pushChangesToGist?: (path?: string, type?: string) => void,
+    publishFolderToGist?: (path?: string, type?: string) => void,
+    publishFileToGist?: (path?: string, type?: string) => void,
     runScript?: (path: string) => void,
     emit?: (id: string, path: string) => void,
     pageX: number,

From afed38639bf3c3ffd472a92f84ceb56d04e68785 Mon Sep 17 00:00:00 2001
From: ioedeveloper <daviddisu8@gmail.com>
Date: Mon, 17 May 2021 12:25:39 +0100
Subject: [PATCH 05/14] Return workspace name if file path is root dir

---
 libs/remix-ui/file-explorer/src/lib/file-explorer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx b/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx
index c883cb848a..b2350902e6 100644
--- a/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx
+++ b/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx
@@ -246,7 +246,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
     if (state.focusElement[0]) {
       if (state.focusElement[0].type === 'folder' && state.focusElement[0].key) return state.focusElement[0].key
       else if (state.focusElement[0].type === 'gist' && state.focusElement[0].key) return state.focusElement[0].key
-      else if (state.focusElement[0].type === 'file' && state.focusElement[0].key) return extractParentFromKey(state.focusElement[0].key)
+      else if (state.focusElement[0].type === 'file' && state.focusElement[0].key) return extractParentFromKey(state.focusElement[0].key) ? extractParentFromKey(state.focusElement[0].key) : name
       else return name
     }
   }

From 9e8fe09b63cf7587b5ea43960db6ca01b02a6d90 Mon Sep 17 00:00:00 2001
From: ioedeveloper <daviddisu8@gmail.com>
Date: Mon, 17 May 2021 12:44:59 +0100
Subject: [PATCH 06/14] Fixed failing test

---
 apps/remix-ide-e2e/src/tests/gist.spec.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/remix-ide-e2e/src/tests/gist.spec.ts b/apps/remix-ide-e2e/src/tests/gist.spec.ts
index ad98cb6f19..5d7a17ebf4 100644
--- a/apps/remix-ide-e2e/src/tests/gist.spec.ts
+++ b/apps/remix-ide-e2e/src/tests/gist.spec.ts
@@ -54,9 +54,9 @@ module.exports = {
             .click('[data-id="default_workspace-modal-footer-cancel-react"]')
             .executeScript(`remix.loadgist('${gistid}')`)
             // .perform((done) => { if (runtimeBrowser === 'chrome') { browser.openFile('gists') } done() })
-            .waitForElementVisible(`[data-id="treeViewLitreeViewItem${gistid}"]`)
-            .click(`[data-id="treeViewLitreeViewItem${gistid}"]`)
-            .openFile(`${gistid}/README.txt`)
+            .waitForElementVisible(`[data-id="treeViewLitreeViewItemgist-${gistid}"]`)
+            .click(`[data-id="treeViewLitreeViewItemgist-${gistid}"]`)
+            .openFile(`gist-${gistid}/README.txt`)
         }
       })
   },

From 5d313f2d3d5dbc30b3deeee8668f0d14cb40661a Mon Sep 17 00:00:00 2001
From: ioedeveloper <daviddisu8@gmail.com>
Date: Mon, 17 May 2021 13:03:50 +0100
Subject: [PATCH 07/14] Fixed failing test

---
 apps/remix-ide-e2e/src/tests/gist.spec.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/remix-ide-e2e/src/tests/gist.spec.ts b/apps/remix-ide-e2e/src/tests/gist.spec.ts
index 5d7a17ebf4..a46dba097f 100644
--- a/apps/remix-ide-e2e/src/tests/gist.spec.ts
+++ b/apps/remix-ide-e2e/src/tests/gist.spec.ts
@@ -118,9 +118,9 @@ module.exports = {
       .waitForElementVisible('*[data-id="modalDialogCustomPromptText"]')
       .setValue('*[data-id="modalDialogCustomPromptText"]', testData.validGistId)
       .modalFooterOKClick()
-      .openFile(`${testData.validGistId}/ApplicationRegistry`)
-      .waitForElementVisible(`div[title='default_workspace/${testData.validGistId}/ApplicationRegistry']`)
-      .assert.containsText(`div[title='default_workspace/${testData.validGistId}/ApplicationRegistry'] > span`, 'ApplicationRegistry')
+      .openFile(`gist-${testData.validGistId}/ApplicationRegistry`)
+      .waitForElementVisible(`div[title='default_workspace/gist-${testData.validGistId}/ApplicationRegistry']`)
+      .assert.containsText(`div[title='default_workspace/gist-${testData.validGistId}/ApplicationRegistry'] > span`, 'ApplicationRegistry')
       .end()
   }
 }

From 04ad3cc5e0a5b0d02e6d81318950f827e2457788 Mon Sep 17 00:00:00 2001
From: ioedeveloper <daviddisu8@gmail.com>
Date: Wed, 19 May 2021 15:10:32 +0100
Subject: [PATCH 08/14] Sanitize filename when publishing gist folder

---
 libs/remix-ui/file-explorer/src/lib/file-explorer.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx b/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx
index b2350902e6..65b6f2337b 100644
--- a/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx
+++ b/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx
@@ -930,6 +930,11 @@ async function packageFiles (filesProvider, directory, callback) {
         if (/^\s+$/.test(content) || !content.length) {
           content = '// this line is added to create a gist. Empty file is not allowed.'
         }
+        if (path.indexOf('gist-') === 0) {
+          path = path.split('/')
+          path.shift()
+          path = path.join('/')
+        }
         path = path.replace(/\//g, '...')
         ret[path] = { content }
       })

From c571400399cc93029e4d25d86d134493434f2c0f Mon Sep 17 00:00:00 2001
From: ioedeveloper <daviddisu8@gmail.com>
Date: Wed, 19 May 2021 15:17:11 +0100
Subject: [PATCH 09/14] Update modal parameters

---
 .../file-explorer/src/lib/file-explorer.tsx   | 24 +++----------------
 1 file changed, 3 insertions(+), 21 deletions(-)

diff --git a/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx b/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx
index 65b6f2337b..29d1f5955e 100644
--- a/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx
+++ b/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx
@@ -383,33 +383,15 @@ export const FileExplorer = (props: FileExplorerProps) => {
   }
 
   const pushChangesToGist = (path?: string, type?: string) => {
-    modal('Create a public gist', 'Are you sure you want to push changes to remote gist file on github.com?', {
-      label: 'OK',
-      fn: () => toGist(path, type)
-    }, {
-      label: 'Cancel',
-      fn: () => {}
-    })
+    modal('Create a public gist', 'Are you sure you want to push changes to remote gist file on github.com?', 'OK', () => toGist(path, type), 'Cancel', () => {})
   }
 
   const publishFolderToGist = (path?: string, type?: string) => {
-    modal('Create a public gist', `Are you sure you want to anonymously publish all your files in the ${path} folder as a public gist on github.com?`, {
-      label: 'OK',
-      fn: () => toGist(path, type)
-    }, {
-      label: 'Cancel',
-      fn: () => {}
-    })
+    modal('Create a public gist', `Are you sure you want to anonymously publish all your files in the ${path} folder as a public gist on github.com?`, 'OK', () => toGist(path, type), 'Cancel', () => {})
   }
 
   const publishFileToGist = (path?: string, type?: string) => {
-    modal('Create a public gist', `Are you sure you want to anonymously publish ${path} file as a public gist on github.com?`, {
-      label: 'OK',
-      fn: () => toGist(path, type)
-    }, {
-      label: 'Cancel',
-      fn: () => {}
-    })
+    modal('Create a public gist', `Are you sure you want to anonymously publish ${path} file as a public gist on github.com?`, 'OK', () => toGist(path, type), 'Cancel', () => {})
   }
 
   const toGist = (path?: string, type?: string) => {

From 7871fae68e208459c08f530aa363a052c9a57a83 Mon Sep 17 00:00:00 2001
From: ioedeveloper <daviddisu8@gmail.com>
Date: Thu, 20 May 2021 13:12:04 +0100
Subject: [PATCH 10/14] Create directories during gist import

---
 apps/remix-ide/src/lib/gist-handler.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/remix-ide/src/lib/gist-handler.js b/apps/remix-ide/src/lib/gist-handler.js
index eac8c607c1..a85e3b475e 100644
--- a/apps/remix-ide/src/lib/gist-handler.js
+++ b/apps/remix-ide/src/lib/gist-handler.js
@@ -54,7 +54,9 @@ function GistHandler (_window) {
         }
         const obj = {}
         Object.keys(data.files).forEach((element) => {
-          obj['/' + 'gist-' + gistId + '/' + element] = data.files[element]
+          const path = element.replace('...', '/')
+
+          obj['/' + 'gist-' + gistId + '/' + path] = data.files[element]
         })
         fileManager.setBatchFiles(obj, 'workspace', true, (errorLoadingFile) => {
           if (!errorLoadingFile) {

From 7162e312af8342ba23f3d975270957b1484149b3 Mon Sep 17 00:00:00 2001
From: ioedeveloper <daviddisu8@gmail.com>
Date: Thu, 20 May 2021 14:02:57 +0100
Subject: [PATCH 11/14] Replace globally with regex pattern

---
 apps/remix-ide/src/lib/gist-handler.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/remix-ide/src/lib/gist-handler.js b/apps/remix-ide/src/lib/gist-handler.js
index a85e3b475e..da881e1103 100644
--- a/apps/remix-ide/src/lib/gist-handler.js
+++ b/apps/remix-ide/src/lib/gist-handler.js
@@ -54,7 +54,7 @@ function GistHandler (_window) {
         }
         const obj = {}
         Object.keys(data.files).forEach((element) => {
-          const path = element.replace('...', '/')
+          const path = element.replace(/\.\.\./g, '/')
 
           obj['/' + 'gist-' + gistId + '/' + path] = data.files[element]
         })

From 7e4e9e33de9c54cf3672fa0dba6b89d3f33b5dfc Mon Sep 17 00:00:00 2001
From: ioedeveloper <daviddisu8@gmail.com>
Date: Thu, 20 May 2021 16:24:33 +0100
Subject: [PATCH 12/14] Fixed failing test

---
 apps/remix-ide-e2e/src/tests/gist.spec.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/remix-ide-e2e/src/tests/gist.spec.ts b/apps/remix-ide-e2e/src/tests/gist.spec.ts
index a46dba097f..214aacae47 100644
--- a/apps/remix-ide-e2e/src/tests/gist.spec.ts
+++ b/apps/remix-ide-e2e/src/tests/gist.spec.ts
@@ -54,8 +54,8 @@ module.exports = {
             .click('[data-id="default_workspace-modal-footer-cancel-react"]')
             .executeScript(`remix.loadgist('${gistid}')`)
             // .perform((done) => { if (runtimeBrowser === 'chrome') { browser.openFile('gists') } done() })
-            .waitForElementVisible(`[data-id="treeViewLitreeViewItemgist-${gistid}"]`)
-            .click(`[data-id="treeViewLitreeViewItemgist-${gistid}"]`)
+            .waitForElementVisible(`[data-id="treeViewLitreeViewItem/gist-${gistid}"]`)
+            .click(`[data-id="treeViewLitreeViewItem/gist-${gistid}"]`)
             .openFile(`gist-${gistid}/README.txt`)
         }
       })

From 006f4c4ce55ca320eed0a0d5843bdb94ef3ac251 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Tue, 18 May 2021 11:49:33 +0200
Subject: [PATCH 13/14] fix matomo send transaction

---
 .../src/app/tabs/runTab/contractDropdown.js   | 34 +++++++++----------
 .../app/tabs/runTab/model/dropdownlogic.js    |  2 +-
 .../remix-ide/src/app/tabs/runTab/settings.js | 26 ++++++--------
 .../remix-ide/src/app/ui/universal-dapp-ui.js |  8 +++--
 apps/remix-ide/src/blockchain/blockchain.js   | 21 +++++++-----
 5 files changed, 46 insertions(+), 45 deletions(-)

diff --git a/apps/remix-ide/src/app/tabs/runTab/contractDropdown.js b/apps/remix-ide/src/app/tabs/runTab/contractDropdown.js
index 2a8336125d..6918c305a3 100644
--- a/apps/remix-ide/src/app/tabs/runTab/contractDropdown.js
+++ b/apps/remix-ide/src/app/tabs/runTab/contractDropdown.js
@@ -48,24 +48,22 @@ class ContractDropdownUI {
   }
 
   listenToContextChange () {
-    this.blockchain.event.register('contextChanged', () => {
-      this.blockchain.updateNetwork((err, { name } = {}) => {
-        if (err) {
-          console.log('can\'t detect network')
-          return
-        }
-        this.exEnvironment = this.blockchain.getProvider()
-        this.networkName = name
+    this.blockchain.event.register('networkStatus', ({ error, network }) => {
+      if (error) {
+        console.log('can\'t detect network')
+        return
+      }
+      this.exEnvironment = this.blockchain.getProvider()
+      this.networkName = network.name
 
-        const savedConfig = window.localStorage.getItem(`ipfs/${this.exEnvironment}/${this.networkName}`)
+      const savedConfig = window.localStorage.getItem(`ipfs/${this.exEnvironment}/${this.networkName}`)
 
-        // check if an already selected option exist else use default workflow
-        if (savedConfig !== null) {
-          this.setCheckedState(savedConfig)
-        } else {
-          this.setCheckedState(this.networkName === 'Main')
-        }
-      })
+      // check if an already selected option exist else use default workflow
+      if (savedConfig !== null) {
+        this.setCheckedState(savedConfig)
+      } else {
+        this.setCheckedState(this.networkName === 'Main')
+      }
     })
   }
 
@@ -306,10 +304,10 @@ class ContractDropdownUI {
       const data = self.runView.compilersArtefacts.getCompilerAbstract(contractObject.contract.file)
       self.runView.compilersArtefacts.addResolvedContract(helper.addressToString(address), data)
       if (self.ipfsCheckedState) {
-        _paq.push(['trackEvent', 'udapp', `DeployAndPublish_${this.networkName}`])
+        _paq.push(['trackEvent', 'udapp', 'DeployAndPublish', this.networkName])
         publishToStorage('ipfs', self.runView.fileProvider, self.runView.fileManager, selectedContract)
       } else {
-        _paq.push(['trackEvent', 'udapp', `DeployOnly_${this.networkName}`])
+        _paq.push(['trackEvent', 'udapp', 'DeployOnly', this.networkName])
       }
     }
 
diff --git a/apps/remix-ide/src/app/tabs/runTab/model/dropdownlogic.js b/apps/remix-ide/src/app/tabs/runTab/model/dropdownlogic.js
index 15764a6dbe..2ee225fef3 100644
--- a/apps/remix-ide/src/app/tabs/runTab/model/dropdownlogic.js
+++ b/apps/remix-ide/src/app/tabs/runTab/model/dropdownlogic.js
@@ -55,7 +55,7 @@ class DropdownLogic {
         cb(null, 'abi', abi)
       })
     } else {
-      _paq.push(['trackEvent', 'udapp', 'AtAddressLoadWithInstance'])
+      _paq.push(['trackEvent', 'udapp', 'AtAddressLoadWithArtifacts'])
       cb(null, 'instance')
     }
   }
diff --git a/apps/remix-ide/src/app/tabs/runTab/settings.js b/apps/remix-ide/src/app/tabs/runTab/settings.js
index 4cc9ff4f00..551248000a 100644
--- a/apps/remix-ide/src/app/tabs/runTab/settings.js
+++ b/apps/remix-ide/src/app/tabs/runTab/settings.js
@@ -97,7 +97,7 @@ class SettingsUI {
           Environment
         </label>
         <div class="${css.environment}">
-          <select id="selectExEnvOptions" data-id="settingsSelectEnvOptions" onchange=${() => { this.updateNetwork() }} class="form-control ${css.select} custom-select">
+          <select id="selectExEnvOptions" data-id="settingsSelectEnvOptions" class="form-control ${css.select} custom-select">
             <option id="vm-mode"
               title="Execution environment does not connect to any node, everything is local and in memory only."
               value="vm" name="executionContext"> JavaScript VM
@@ -192,8 +192,17 @@ class SettingsUI {
       this.setFinalContext()
     })
 
+    this.blockchain.event.register('networkStatus', ({ error, network }) => {
+      if (error) {
+        this.netUI.innerHTML = 'can\'t detect network '
+        return
+      }
+      const networkProvider = this._components.networkModule.getNetworkProvider.bind(this._components.networkModule)
+      this.netUI.innerHTML = (networkProvider() !== 'vm') ? `${network.name} (${network.id || '-'}) network` : ''    
+    })
+
     setInterval(() => {
-      this.updateNetwork()
+      this.fillAccountsList()
     }, 1000)
 
     this.el = el
@@ -273,7 +282,6 @@ class SettingsUI {
     // set the final context. Cause it is possible that this is not the one we've originaly selected
     this.selectExEnv.value = this.blockchain.getProvider()
     this.event.trigger('clearInstance', [])
-    this.updateNetwork()
     this.updatePlusButton()
   }
 
@@ -390,18 +398,6 @@ class SettingsUI {
     })
   }
 
-  updateNetwork () {
-    this.blockchain.updateNetwork((err, { id, name } = {}) => {
-      if (err) {
-        this.netUI.innerHTML = 'can\'t detect network '
-        return
-      }
-      const network = this._components.networkModule.getNetworkProvider.bind(this._components.networkModule)
-      this.netUI.innerHTML = (network() !== 'vm') ? `${name} (${id || '-'}) network` : ''
-    })
-    this.fillAccountsList()
-  }
-
   // TODO: unclear what's the goal of accountListCallId, feels like it can be simplified
   async fillAccountsList () {
     this.accountListCallId++
diff --git a/apps/remix-ide/src/app/ui/universal-dapp-ui.js b/apps/remix-ide/src/app/ui/universal-dapp-ui.js
index e3eb358090..8265cd0c7c 100644
--- a/apps/remix-ide/src/app/ui/universal-dapp-ui.js
+++ b/apps/remix-ide/src/app/ui/universal-dapp-ui.js
@@ -244,8 +244,12 @@ UniversalDAppUI.prototype.runTransaction = function (lookupOnly, args, valArr, i
       outputOverride.appendChild(decoded)
     }
   }
-  const info = `${lookupOnly ? 'call' : args.funABI.type !== 'fallback' ? 'lowLevelInteracions' : 'transact'}_${this.blockchain.executionContext.executionContext}`
-  _paq.push(['trackEvent', 'udapp', info])
+  let callinfo = ""
+  if (lookupOnly) callinfo = 'call'
+  else if (args.funABI.type === 'fallback' || args.funABI.type === 'receive') callinfo = 'lowLevelInteracions'
+  else callinfo = 'transact'
+   
+  _paq.push(['trackEvent', 'udapp', callinfo, this.blockchain.getCurrentNetworkStatus().network.name])
   const params = args.funABI.type !== 'fallback' ? inputsValues : ''
   this.blockchain.runOrCallContractMethod(
     args.contractName,
diff --git a/apps/remix-ide/src/blockchain/blockchain.js b/apps/remix-ide/src/blockchain/blockchain.js
index 973e267683..ec9579a1e8 100644
--- a/apps/remix-ide/src/blockchain/blockchain.js
+++ b/apps/remix-ide/src/blockchain/blockchain.js
@@ -41,6 +41,7 @@ class Blockchain {
     this.executionContext.event.register('contextChanged', this.resetEnvironment.bind(this))
 
     this.networkcallid = 0
+    this.networkStatus = { name: ' - ', id: ' - ' } 
     this.setupEvents()
     this.setupProviders()
   }
@@ -57,6 +58,17 @@ class Blockchain {
     this.executionContext.event.register('removeProvider', (name) => {
       this.event.trigger('removeProvider', [name])
     })
+
+    setInterval(() => {
+      this.detectNetwork((error, network) => {
+        this.networkStatus = { network, error }
+        this.event.trigger('networkStatus', [this.networkStatus])
+      })
+    }, 1000)
+  }
+
+  getCurrentNetworkStatus () {
+    return this.networkStatus
   }
 
   setupProviders () {
@@ -197,15 +209,6 @@ class Blockchain {
     return this.executionContext.setProviderFromEndpoint(target, context, cb)
   }
 
-  updateNetwork (cb) {
-    this.executionContext.detectNetwork((err, { id, name } = {}) => {
-      if (err) {
-        return cb(err)
-      }
-      cb(null, { id, name })
-    })
-  }
-
   detectNetwork (cb) {
     return this.executionContext.detectNetwork(cb)
   }

From f83010358a9610596ef2a22626bcbfed78dd2c90 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Tue, 18 May 2021 12:10:14 +0200
Subject: [PATCH 14/14] add startDebugging info to matomo

---
 apps/remix-ide/src/app/tabs/runTab/settings.js    | 2 +-
 apps/remix-ide/src/app/ui/universal-dapp-ui.js    | 4 ++--
 apps/remix-ide/src/blockchain/blockchain.js       | 2 +-
 libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx | 5 ++++-
 4 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/apps/remix-ide/src/app/tabs/runTab/settings.js b/apps/remix-ide/src/app/tabs/runTab/settings.js
index 551248000a..dd726c09be 100644
--- a/apps/remix-ide/src/app/tabs/runTab/settings.js
+++ b/apps/remix-ide/src/app/tabs/runTab/settings.js
@@ -198,7 +198,7 @@ class SettingsUI {
         return
       }
       const networkProvider = this._components.networkModule.getNetworkProvider.bind(this._components.networkModule)
-      this.netUI.innerHTML = (networkProvider() !== 'vm') ? `${network.name} (${network.id || '-'}) network` : ''    
+      this.netUI.innerHTML = (networkProvider() !== 'vm') ? `${network.name} (${network.id || '-'}) network` : ''
     })
 
     setInterval(() => {
diff --git a/apps/remix-ide/src/app/ui/universal-dapp-ui.js b/apps/remix-ide/src/app/ui/universal-dapp-ui.js
index 8265cd0c7c..0af660c010 100644
--- a/apps/remix-ide/src/app/ui/universal-dapp-ui.js
+++ b/apps/remix-ide/src/app/ui/universal-dapp-ui.js
@@ -244,11 +244,11 @@ UniversalDAppUI.prototype.runTransaction = function (lookupOnly, args, valArr, i
       outputOverride.appendChild(decoded)
     }
   }
-  let callinfo = ""
+  let callinfo = ''
   if (lookupOnly) callinfo = 'call'
   else if (args.funABI.type === 'fallback' || args.funABI.type === 'receive') callinfo = 'lowLevelInteracions'
   else callinfo = 'transact'
-   
+
   _paq.push(['trackEvent', 'udapp', callinfo, this.blockchain.getCurrentNetworkStatus().network.name])
   const params = args.funABI.type !== 'fallback' ? inputsValues : ''
   this.blockchain.runOrCallContractMethod(
diff --git a/apps/remix-ide/src/blockchain/blockchain.js b/apps/remix-ide/src/blockchain/blockchain.js
index ec9579a1e8..27f9be195d 100644
--- a/apps/remix-ide/src/blockchain/blockchain.js
+++ b/apps/remix-ide/src/blockchain/blockchain.js
@@ -41,7 +41,7 @@ class Blockchain {
     this.executionContext.event.register('contextChanged', this.resetEnvironment.bind(this))
 
     this.networkcallid = 0
-    this.networkStatus = { name: ' - ', id: ' - ' } 
+    this.networkStatus = { name: ' - ', id: ' - ' }
     this.setupEvents()
     this.setupProviders()
   }
diff --git a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx
index 9dfa0e2ade..6da377f0c4 100644
--- a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx
+++ b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx
@@ -9,6 +9,7 @@ import { Toaster } from '@remix-ui/toaster' // eslint-disable-line
 /* eslint-disable-next-line */
 import './debugger-ui.css'
 const helper = require('../../../../../apps/remix-ide/src/lib/helper')
+const _paq = (window as any)._paq = (window as any)._paq || []
 
 export const DebuggerUI = (props: DebuggerUIProps) => {
   const debuggerModule = props.debuggerAPI
@@ -167,7 +168,9 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
 
     const web3 = await debuggerModule.getDebugWeb3()
     try {
-      if (await web3.eth.net.getId() === 42) {
+      const networkId = await web3.eth.net.getId()
+      _paq.push(['trackEvent', 'debugger', 'startDebugging', networkId])
+      if (networkId === 42) {
         setState(prevState => {
           return {
             ...prevState,