Use wallet icon to manage modal

Author: ioedeveloper

apps/remix-ide/src/app/plugins/walletconnect/index.ts

@@ -29,17 +29,19 @@ export class WalletConnect extends Plugin {
 
   constructor () {
     super(profile)
-    this.appkit = createAppKit({
-      adapters: [new Ethers5Adapter()],
-      projectId: constants.PROJECT_ID,
-      metadata: constants.METADATA,
-      networks: [mainnet, sepolia, arbitrum, arbitrumSepolia, optimism, optimismSepolia, solana, solanaTestnet, bitcoin, bitcoinTestnet, bsc, bscTestnet, polygon]
-    })
-    this.chains = constants.chains
   }
 
   onActivation() {
-    this.subscribeToEvents()
+    if (!this.appkit) {
+      this.appkit = createAppKit({
+        adapters: [new Ethers5Adapter()],
+        projectId: constants.PROJECT_ID,
+        metadata: constants.METADATA,
+        networks: [mainnet, sepolia, arbitrum, arbitrumSepolia, optimism, optimismSepolia, solana, solanaTestnet, bitcoin, bitcoinTestnet, bsc, bscTestnet, polygon]
+      })
+      this.chains = constants.chains
+      this.subscribeToEvents()
+    }
   }
 
   async init() {
@@ -115,7 +117,7 @@ export class WalletConnect extends Plugin {
       return this.sendWalletConnectRequest(data)
     } else {
       const err = `Cannot make ${data.method} request. Remix client is not connected to walletconnect client`
-      console.error(err)
+
       return { jsonrpc: '2.0', error: { message: err, code: -32603 }, id: data.id }
     }
 

apps/remix-ide/src/blockchain/execution-context.js

@@ -148,7 +148,7 @@ export class ExecutionContext {
     if (!infoCb) infoCb = () => { /* Do nothing. */ }
     if (this.customNetWorks[context]) {
       var network = this.customNetWorks[context]
-      if (context !== 'walletconnect') await network.init()
+      await network.init()
       this.currentFork = network.config.fork
       this.executionContext = context
       // injected

libs/remix-ui/run-tab/src/lib/actions/account.ts

@@ -76,14 +76,16 @@ const _getProviderDropdownValue = (plugin: RunTab): string => {
 }
 
 export const setExecutionContext = (plugin: RunTab, dispatch: React.Dispatch<any>, executionContext: { context: string, fork: string }) => {
-  if (executionContext.context === 'walletconnect') {
-    setWalletConnectExecutionContext(plugin, dispatch, executionContext)
-  } else {
-    plugin.blockchain.changeExecutionContext(executionContext, null, (alertMsg) => {
-      plugin.call('notification', 'toast', alertMsg)
-    }, async () => {
-      setFinalContext(plugin, dispatch)
-    })
+  if (executionContext.context && executionContext.context !== plugin.REACT_API.selectExEnv) {
+    if (executionContext.context === 'walletconnect') {
+      setWalletConnectExecutionContext(plugin, dispatch, executionContext)
+    } else {
+      plugin.blockchain.changeExecutionContext(executionContext, null, (alertMsg) => {
+        plugin.call('notification', 'toast', alertMsg)
+      }, async () => {
+        setFinalContext(plugin, dispatch)
+      })
+    }
   }
 }
 
@@ -313,33 +315,27 @@ export const addFileInternal = async (plugin: RunTab, path: string, content: str
 }
 
 const setWalletConnectExecutionContext = (plugin: RunTab, dispatch: React.Dispatch<any>, executionContext: { context: string, fork: string }) => {
-  plugin.call('walletconnect', 'isWalletConnected').then((isConnected) => {
-    if (isConnected) {
-      plugin.call('walletconnect', 'openModal').then(() => {
-        plugin.blockchain.changeExecutionContext(executionContext, null, (alertMsg) => {
-          plugin.call('notification', 'toast', alertMsg)
-        }, async () => {
-          setFinalContext(plugin, dispatch)
-        })
-      })
-    } else {
-      plugin.call('walletconnect', 'openModal').then(() => {
-        plugin.on('walletconnect', 'connectionSuccessful', () => {
-          plugin.blockchain.changeExecutionContext(executionContext, null, (alertMsg) => {
-            plugin.call('notification', 'toast', alertMsg)
-          }, async () => {
-            setFinalContext(plugin, dispatch)
-          })
-        })
-        plugin.on('walletconnect', 'connectionFailed', (msg) => {
-          plugin.call('notification', 'toast', msg)
-        })
-        plugin.on('walletconnect', 'connectionDisconnected', (msg) => {
-          plugin.call('notification', 'toast', msg)
-          // reset to default provider if connection fails
-          setExecutionContext(plugin, dispatch, { context: plugin.blockchain.defaultPinnedProviders[0], fork: null })
-        })
+  plugin.call('walletconnect', 'openModal').then(() => {
+    plugin.on('walletconnect', 'connectionSuccessful', () => {
+      plugin.blockchain.changeExecutionContext(executionContext, null, (alertMsg) => {
+        plugin.call('notification', 'toast', alertMsg)
+      }, async () => {
+        setFinalContext(plugin, dispatch)
       })
-    }
+    })
+    plugin.on('walletconnect', 'connectionFailed', (msg) => {
+      plugin.call('notification', 'toast', msg)
+      cleanupWalletConnectEvents(plugin)
+    })
+    plugin.on('walletconnect', 'connectionDisconnected', (msg) => {
+      plugin.call('notification', 'toast', msg)
+      cleanupWalletConnectEvents(plugin)
+    })
   })
 }
+
+const cleanupWalletConnectEvents = (plugin: RunTab) => {
+  plugin.off('walletconnect', 'connectionFailed')
+  plugin.off('walletconnect', 'connectionDisconnected')
+  plugin.off('walletconnect', 'connectionSuccessful')
+}

libs/remix-ui/run-tab/src/lib/actions/events.ts

@@ -40,9 +40,6 @@ export const setupEvents = (plugin: RunTab) => {
   plugin.blockchain.event.register('contextChanged', async (context) => {
     dispatch(resetProxyDeployments())
     getNetworkProxyAddresses(plugin, dispatch)
-    if (context !== 'walletconnect') {
-      (await plugin.call('manager', 'isActive', 'walletconnect')) && plugin.call('manager', 'deactivatePlugin', 'walletconnect')
-    }
     setFinalContext(plugin, dispatch)
     fillAccountsList(plugin, dispatch)
     // 'contextChanged' & 'networkStatus' both are triggered on workspace & network change

libs/remix-ui/run-tab/src/lib/components/dropdownLabel.tsx

@@ -1,4 +1,4 @@
-import { CustomTooltip } from '@remix-ui/helper'
+import { CustomTooltip, RenderIf } from '@remix-ui/helper'
 import React, { useEffect, useState } from 'react'
 import { FormattedMessage } from 'react-intl'
 import { RunTabState } from '../types'
@@ -37,7 +37,7 @@ export function DropdownLabel({ label, bridges, currentProvider, chainId, runTab
   return (
     <>
       <span>{renderLabel}</span>
-      {isL2(renderLabel) && bridges[renderLabel.substring(0, 13)] && (
+      <RenderIf condition={isL2(renderLabel) && bridges[renderLabel.substring(0, 13)]}>
         <CustomTooltip placement={'auto-end'} tooltipClasses="text-nowrap" tooltipId="info-recorder" tooltipText={<FormattedMessage id="udapp.tooltipText3" />}>
           <i
             style={{ fontSize: 'medium' }}
@@ -48,7 +48,21 @@ export function DropdownLabel({ label, bridges, currentProvider, chainId, runTab
             }}
           ></i>
         </CustomTooltip>
-      )}
+      </RenderIf>
+      <RenderIf condition={runTabState.selectExEnv === 'walletconnect'}>
+        <CustomTooltip placement={'auto-end'} tooltipClasses="text-nowrap" tooltipId="info-recorder" tooltipText={<FormattedMessage id="udapp.tooltipText3" />}>
+          <i
+            style={{ fontSize: 'medium' }}
+            className={'ml-1 fa fa-wallet'}
+            aria-hidden="true"
+            onClick={(e) => {
+              e.preventDefault()
+              e.stopPropagation()
+              plugin.call('walletconnect', 'openModal')
+            }}
+          ></i>
+        </CustomTooltip>
+      </RenderIf>
     </>
   )
 }