Desktop metamask

apps/remix-ide/src/app.js

@@ -69,6 +69,8 @@ import { HardhatHandleDesktop } from './app/plugins/electron/hardhatPlugin'
 import { circomPlugin } from './app/plugins/electron/circomElectronPlugin'
 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 { TemplatesSelectionPlugin } from './app/plugins/templates-selection/templates-selection-plugin'
 
@@ -124,6 +126,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 = {}
     // setup storage
     const configStorage = new Storage('config-v0.8:')
@@ -425,6 +429,12 @@ class AppComponent {
       this.engine.register([appUpdater])
       const remixAIDesktop = new remixAIDesktopPlugin()
       this.engine.register([remixAIDesktop])
+      const desktopHost = new DesktopHost()
+      this.engine.register([desktopHost])
+    } else{
+      //---- desktop client
+      const desktopClient = new DesktopClient(blockchain)
+      this.engine.register([desktopClient])
     }
 
     const compilerloader = isElectron() ? new compilerLoaderPluginDesktop() : new compilerLoaderPlugin()
@@ -513,8 +523,7 @@ class AppComponent {
   }
 
   async activate() {
-    const queryParams = new QueryParams()
-    const params = queryParams.get()
+
 
     try {
       this.engine.register(await this.appManager.registeredPlugins())
@@ -591,13 +600,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 {
@@ -609,17 +618,17 @@ class AppComponent {
               }
             }
 
-            if (params.call) {
-              const callDetails = 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)
                 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) {
@@ -660,6 +669,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/components/DesktopClientUI.tsx

@@ -0,0 +1,115 @@
+import React, { useContext, useEffect } from 'react'
+import { AppContext, appActionTypes } from '@remix-ui/app'
+import { Provider } from '../../blockchain/blockchain'
+import { providerLogos } from '../udapp/run-tab'
+import { desktopConnection } from '@remix-api'
+import { set } from 'lodash'
+
+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 [hasMetamask, setHasMetamask] = React.useState(false)
+  const [hasBrave, setHasBrave] = React.useState(false)
+
+  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 metamaskProvider = providers.find((provider) => provider.name.toLowerCase().includes('metamask'))
+    const braveProvider = providers.find((provider) => provider.name.toLowerCase().includes('brave'))
+    setHasMetamask(!!metamaskProvider)
+    setHasBrave(!!braveProvider)
+
+  }, [providers])
+
+  useEffect(() => {
+    if (hasMetamask) {
+      setTitle('Connect to MetaMask')
+      setDisabled(false)
+    } else if (hasBrave && !hasMetamask) {
+      setTitle('Brave Wallet is not supported')
+      setDisabled(true)
+    } else {
+      setTitle('Connecting...')
+    }
+  },[hasMetamask, 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 'MetaMask Wallet'
+          {hasBrave && <div className='text-warning'>
+            Note: Brave Wallet is not supported.
+          </div>}
+        </p>
+      </div>
+
+      <div>
+        <div className="row">
+          {providers && providers.length > 0 ? (
+            providers
+              .filter((provider) => provider.isInjected && provider.name.toLocaleLowerCase().includes('metamask'))
+              .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/status-bar.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/panels/layout.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 {
@@ -141,6 +141,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