Merge pull request #6094 from ethereum/desktop-metamask-3

Desktop metamask 3

Author: yann300

.circleci/config.yml

@@ -28,6 +28,10 @@ function addFile(browser: NightwatchBrowser, name: string, content: NightwatchCo
         browser.clickLaunchIcon('filePanel')
       }
     })
+    .execute(function () {
+      const container = document.querySelector('[data-test-id="virtuoso-scroller"]');
+      container.scrollTop = container.scrollHeight;
+    })
     .scrollInto(readmeSelector)
     .waitForElementVisible(readmeSelector)
     .click(readmeSelector).pause(1000) // focus on root directory

apps/remix-ide-e2e/src/commands/addFile.ts

@@ -22,25 +22,7 @@ array-flatten@1.1.1:
   resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
   integrity sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==
 
-body-parser@1.20.3, body-parser@^1.20.2:
-  version "1.20.3"
-  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.20.3.tgz#1953431221c6fb5cd63c4b36d53fab0928e548c6"
-  integrity sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==
-  dependencies:
-    bytes "3.1.2"
-    content-type "~1.0.5"
-    debug "2.6.9"
-    depd "2.0.0"
-    destroy "1.2.0"
-    http-errors "2.0.0"
-    iconv-lite "0.4.24"
-    on-finished "2.4.1"
-    qs "6.13.0"
-    raw-body "2.5.2"
-    type-is "~1.6.18"
-    unpipe "1.0.0"
-
-body-parser@^1.20.3:
+body-parser@1.20.3, body-parser@^1.20.3:
   version "1.20.3"
   resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.20.3.tgz#1953431221c6fb5cd63c4b36d53fab0928e548c6"
   integrity sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==

apps/remix-ide-e2e/src/githttpbackend/yarn.lock

@@ -71,6 +71,8 @@ import { circomPlugin } from './app/plugins/electron/circomElectronPlugin'
 import { GitHubAuthHandler } from './app/plugins/electron/gitHubAuthHandler'
 import { GitPlugin } from './app/plugins/git'
 import { Matomo } from './app/plugins/matomo'
+import { DesktopClient } from './app/plugins/desktop-client'
+import { DesktopHost } from './app/plugins/electron/desktopHostPlugin'
 import { WalletConnect } from './app/plugins/walletconnect'
 
 import { TemplatesSelectionPlugin } from './app/plugins/templates-selection/templates-selection-plugin'
@@ -153,6 +155,8 @@ class AppComponent {
   popupPanel: PopupPanel
   statusBar: StatusBar
   settings: SettingsTab
+  params: any
+  desktopClientMode: boolean
   constructor() {
     const PlatFormAPi = new platformApi()
     Registry.getInstance().put({
@@ -161,6 +165,8 @@ class AppComponent {
     })
     this.appManager = new RemixAppManager()
     this.queryParams = new QueryParams()
+    this.params = this.queryParams.get()
+    this.desktopClientMode = this.params && this.params.activate && this.params.activate.split(',').includes('desktopClient')
     this._components = {} as Components
     // setup storage
     const configStorage = new Storage('config-v0.8:')
@@ -473,8 +479,14 @@ class AppComponent {
       this.engine.register([appUpdater])
       const remixAIDesktop = new remixAIDesktopPlugin()
       this.engine.register([remixAIDesktop])
+      const desktopHost = new DesktopHost()
+      this.engine.register([desktopHost])
       const githubAuthHandler = new GitHubAuthHandler()
       this.engine.register([githubAuthHandler])
+    } else {
+      //---- desktop client
+      const desktopClient = new DesktopClient(blockchain)
+      this.engine.register([desktopClient])
     }
 
     const compilerloader = isElectron() ? new compilerLoaderPluginDesktop() : new compilerLoaderPlugin()
@@ -563,8 +575,6 @@ class AppComponent {
   }
 
   async activate() {
-    const queryParams = new QueryParams()
-    const params: any = queryParams.get()
 
     try {
       this.engine.register(await this.appManager.registeredPlugins())
@@ -642,13 +652,13 @@ class AppComponent {
           .activatePlugin(this.workspace)
           .then(async () => {
             try {
-              if (params.deactivate) {
-                await this.appManager.deactivatePlugin(params.deactivate.split(','))
+              if (this.params.deactivate) {
+                await this.appManager.deactivatePlugin(this.params.deactivate.split(','))
               }
             } catch (e) {
               console.log(e)
             }
-            if (params.code && (!params.activate || params.activate.split(',').includes('solidity'))) {
+            if (this.params.code && (!this.params.activate || this.params.activate.split(',').includes('solidity'))) {
               // if code is given in url we focus on solidity plugin
               this.menuicons.select('solidity')
             } else {
@@ -660,19 +670,19 @@ class AppComponent {
               }
             }
 
-            if (params.call) {
-              const callDetails: any = params.call.split('//')
+            if (this.params.call) {
+              const callDetails = this.params.call.split('//')
               if (callDetails.length > 1) {
                 this.appManager.call('notification', 'toast', `initiating ${callDetails[0]} and calling "${callDetails[1]}" ...`)
                 // @todo(remove the timeout when activatePlugin is on 0.3.0)
-                _paq.push(['trackEvent', 'App', 'queryParams-calls', params.call])
+                _paq.push(['trackEvent', 'App', 'queryParams-calls', this.params.call])
                 //@ts-ignore
                 await this.appManager.call(...callDetails).catch(console.error)
               }
             }
 
-            if (params.calls) {
-              const calls = params.calls.split('///')
+            if (this.params.calls) {
+              const calls = this.params.calls.split('///')
 
               // call all functions in the list, one after the other
               for (const call of calls) {
@@ -717,6 +727,10 @@ class AppComponent {
 
     // activate solidity plugin
     this.appManager.activatePlugin(['solidity', 'udapp', 'deploy-libraries', 'link-libraries', 'openzeppelin-proxy', 'scriptRunnerBridge'])
+
+    if (isElectron()){
+      this.appManager.activatePlugin(['desktopHost'])
+    }
   }
 }
 

apps/remix-ide/src/app.ts

@@ -0,0 +1,117 @@
+import React, { useContext, useEffect } from 'react'
+import { AppContext, appActionTypes } from '@remix-ui/app'
+import { Provider } from '@remix-ui/environment-explorer'
+import { providerLogos } from '../udapp/run-tab'
+import { desktopConnection } from '@remix-api'
+
+interface DesktopClientState {
+  connected: desktopConnection
+  providers: Provider[]
+  disableconnect: boolean
+  currentContext: string
+}
+
+const DesktopClientUI = (props: DesktopClientState & { openDesktopApp: () => void } & { onConnect: (providerName: Provider) => void }) => {
+  const appContext = useContext(AppContext)
+  const { connected, providers, onConnect, disableconnect, currentContext } = props
+  const [title, setTitle] = React.useState('Connecting...')
+  const [disabled, setDisabled] = React.useState(false)
+  const [hasInjected, setHasInjected] = React.useState(false)
+  const [hasBrave, setHasBrave] = React.useState(false)
+  const [filteredList, setFilteredList] = React.useState<Provider[]>([])
+
+  useEffect(() => {
+    console.log('connected', props.connected)
+    appContext.appStateDispatch({
+      type: appActionTypes.setConnectedToDesktop,
+      payload: props.connected,
+    })
+    appContext.appStateDispatch({
+      type: appActionTypes.setShowPopupPanel,
+      payload: false,
+    })
+  }, [props.connected])
+
+  useEffect(() => {
+    console.log('providers', props.providers)
+    const injectedProviders = providers.find((provider) => provider.config.isInjected)
+    const braveProvider = providers.find((provider) => provider.name.toLowerCase().includes('brave'))
+    setHasInjected(!!injectedProviders)
+    setHasBrave(!!braveProvider)
+
+    setFilteredList(providers.filter((provider) => provider.config.isInjected == true && !provider.name.toLocaleLowerCase().includes('brave')))
+
+  }, [providers])
+
+  useEffect(() => {
+    if (hasInjected) {
+      setTitle('Connect to Browser Wallet')
+      setDisabled(false)
+    } else if (hasBrave && !hasInjected) {
+      setTitle('Brave Wallet is not supported')
+      setDisabled(true)
+    } else {
+      setTitle('Connecting...')
+    }
+
+  }, [hasInjected, hasBrave])
+
+  if (disabled) {
+    return (
+      <div>
+        <div className="d-flex p-4 bg-light flex-column">
+          <h3>{title}</h3>
+          <p>
+            The Brave Wallet is not supported at this time.
+          </p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      <div className="d-flex p-4 bg-light flex-column">
+        <h3>{title}</h3>
+        <p>
+          1. Connect to your favorite Ethereum wallet provider
+          <br></br>2. Go back to the Remix Desktop application
+          <br></br>3. Deploy using 'Browser Wallet'
+          {hasBrave && <div className='text-warning'>
+            Note: Brave Wallet is not supported.
+          </div>}
+        </p>
+      </div>
+
+      <div>
+        <div className="row">
+          {filteredList && filteredList.length > 0 ? (
+            filteredList
+              .map((provider, index) => (
+                <div key={index} className="col-md-4 mb-4">
+                  <div className="provider-item card h-100">
+                    <div className="card-body d-flex flex-column align-items-center">
+                      <div className="d-flex mb-2">{providerLogos[provider.name] && providerLogos[provider.name].map((logo, index) => <img key={index} src={logo} style={{ width: '2rem', height: '2rem', marginRight: '0.5rem' }} />)}</div>
+                      <h5 className="card-title">{provider.displayName}</h5>
+                      <p className="card-text">{provider.description}</p>
+                      <button data-id={`connection-btn-${provider.name}`} disabled={disableconnect || currentContext === provider.name} className="btn btn-primary mt-auto" onClick={() => onConnect(provider)}>
+                        {disableconnect ? 'please wait  ...' : currentContext === provider.name ? 'Connected' : 'Connect'}
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              ))
+          ) : (
+            <div className="col-12">
+              <div className="alert alert-warning" role="alert">
+                No injected providers found. Please install MetaMask or another browser wallet.
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default DesktopClientUI

apps/remix-ide/src/app/components/DesktopClientUI.tsx

@@ -8,6 +8,7 @@ import { RemixUIStatusBar } from '@remix-ui/statusbar'
 import { FilePanelType } from '@remix-ui/workspace'
 import { VerticalIcons } from './vertical-icons'
 import { CustomRemixApi } from '@remix-api'
+import { AppAction } from '@remix-ui/app'
 
 const statusBarProfile: PluginProfile = {
   name: 'statusBar',
@@ -22,7 +23,8 @@ export class StatusBar extends Plugin<any, CustomRemixApi> implements StatusBarI
   events: EventEmitter
   filePanelPlugin: FilePanelType
   verticalIcons: VerticalIcons
-  dispatch: React.Dispatch<any> = () => {}
+  dispatch: React.Dispatch<any> = () => { }
+  appStateDispatch: React.Dispatch<AppAction> = () => { }
   currentWorkspaceName: string = ''
   isGitRepo: boolean = false
   isAiActive: boolean = false
@@ -86,6 +88,10 @@ export class StatusBar extends Plugin<any, CustomRemixApi> implements StatusBarI
     this.dispatch = dispatch
   }
 
+  setAppStateDispatch(appStateDispatch: React.Dispatch<AppAction>) {
+    this.appStateDispatch = appStateDispatch
+  }
+
   renderComponent() {
     this.dispatch({
       plugins: this,
@@ -99,7 +105,7 @@ export class StatusBar extends Plugin<any, CustomRemixApi> implements StatusBarI
   render() {
     return (
       <div data-id="status-bar-container">
-        <PluginViewWrapper plugin={this} />
+        <PluginViewWrapper useAppContext={true} plugin={this} />
       </div>
     )
   }

apps/remix-ide/src/app/components/status-bar.tsx

@@ -73,6 +73,44 @@ export class ElectronProvider extends FileProvider {
     }
   }
 
+  /**
+   * copy the folder recursively (internal use)
+   * @param {string} path is the folder to be copied over
+   * @param {Function} visitFile is a function called for each visited files
+   * @param {Function} visitFolder is a function called for each visited folders
+   */
+  async _copyFolderToJsonInternal (path, visitFile, visitFolder) {
+    visitFile = visitFile || function () { /* do nothing. */ }
+    visitFolder = visitFolder || function () { /* do nothing. */ }
+
+    const json = {}
+    path = this.removePrefix(path)
+    if (await window.remixFileSystem.exists(path)) {
+      try {
+        const items = await window.remixFileSystem.readdir(path)
+        visitFolder({ path })
+        if (items.length !== 0) {
+          for (const item of items) {
+            const file: any = {}
+            const curPath = `${path}${path.endsWith('/') ? '' : '/'}${item.file}`
+            if (item.isDirectory) {
+              file.children = await this._copyFolderToJsonInternal(curPath, visitFile, visitFolder)
+            } else {
+              file.content = await window.remixFileSystem.readFile(curPath, 'utf8')
+              visitFile({ path: curPath, content: file.content })
+            }
+            json[curPath] = file
+          }
+        }
+      } catch (e) {
+        console.log(e)
+        throw new Error(e)
+      }
+    }
+    console.log('json', json)
+    return json
+  }
+
   /**
  * Removes the folder recursively
  * @param {*} path is the folder to be removed

apps/remix-ide/src/app/files/electronProvider.ts

@@ -6,7 +6,7 @@ import { QueryParams } from '@remix-project/remix-lib'
 const profile: Profile = {
   name: 'layout',
   description: 'layout',
-  methods: ['minimize', 'maximiseSidePanel', 'resetSidePanel', 'maximizeTerminal', 'maximisePinnedPanel', 'resetPinnedPanel']
+  methods: ['minimize', 'minimizeSidePanel', 'maximiseSidePanel', 'resetSidePanel', 'maximizeTerminal', 'maximisePinnedPanel', 'resetPinnedPanel']
 }
 
 interface panelState {
@@ -144,6 +144,10 @@ export class Layout extends Plugin {
     this.emit('change', this.panels)
   }
 
+  async minimizeSidePanel () {
+    this.event.emit('minimizesidepanel')
+  }
+
   async maximiseSidePanel () {
     const current = await this.call('sidePanel', 'currentFocus')
     this.maximized[current] = true