Conditionally select theme and update wallet balance

apps/remix-ide/src/blockchain/blockchain.tsx

@@ -125,6 +125,7 @@ export class Blockchain extends Plugin {
     this.off('injected', 'chainChanged')
     this.off('injected-trustwallet', 'chainChanged')
     this.off('walletconnect', 'chainChanged')
+    this.off('walletconnect', 'accountsChanged')
   }
 
   setupEvents () {

apps/walletconnect/src/app/app.tsx

@@ -10,10 +10,14 @@ const remix = new RemixClient()
 function App() {
   const [ethereumClient, setEthereumClient] = useState<EthereumClient>(null)
   const [wagmiClient, setWagmiClient] = useState(null)
+  const [theme, setTheme] = useState<string>('dark')
 
   useEffect(() => {
     (async () => {
       await remix.initClient()
+      remix.internalEvents.on('themeChanged', (theme: string) => {
+        setTheme(theme)
+      })
       const ethereumClient = new EthereumClient(remix.wagmiClient, remix.chains)
       
       setWagmiClient(remix.wagmiClient)
@@ -24,7 +28,7 @@ function App() {
   return (
     <div className="App">
       <h4 className='mt-1'>WalletConnect</h4>
-      { ethereumClient && wagmiClient && <WalletConnectUI wagmiClient={wagmiClient} ethereumClient={ethereumClient} /> }
+      { ethereumClient && wagmiClient && <WalletConnectUI wagmiClient={wagmiClient} ethereumClient={ethereumClient} theme={theme} /> }
     </div>
   )
 }

apps/walletconnect/src/app/walletConnectUI.tsx

@@ -2,7 +2,7 @@ import { Web3Button, Web3Modal } from "@web3modal/react"
 import { WagmiConfig } from "wagmi"
 import { PROJECT_ID } from "../services/constant"
 
-export function WalletConnectUI ({ ethereumClient, wagmiClient }) {
+export function WalletConnectUI ({ ethereumClient, wagmiClient, theme }) {
 
     return (
         <div>
@@ -11,7 +11,7 @@ export function WalletConnectUI ({ ethereumClient, wagmiClient }) {
                     <Web3Button label='Connect to a wallet' />
                 </WagmiConfig>
             </div>
-            <Web3Modal projectId={PROJECT_ID} ethereumClient={ethereumClient} themeMode={'dark'} />
+            <Web3Modal projectId={PROJECT_ID} ethereumClient={ethereumClient} themeMode={theme} />
         </div>
     )
 }

apps/walletconnect/src/services/RemixClient.ts

@@ -3,21 +3,27 @@ import { createClient } from '@remixproject/plugin-webview'
 import { w3mConnectors, w3mProvider } from '@web3modal/ethereum'
 import { configureChains, createClient as wagmiCreateClient } from 'wagmi'
 import { arbitrum, mainnet, polygon, optimism, Chain, goerli, sepolia } from 'wagmi/chains'
+import EventManager from "events"
 import { PROJECT_ID } from './constant'
 
 export class RemixClient extends PluginClient {
     wagmiClient
     chains: Chain[]
+    internalEvents: EventManager
 
     constructor() {
         super()
         createClient(this)
+        this.internalEvents = new EventManager()
         this.methods = ["sendAsync", "init"]
         this.onload()
     }
 
     onActivation () {
         this.subscribeToEvents()
+        this.call('theme', 'currentTheme').then((theme: any) => {
+            this.internalEvents.emit('themeChanged', theme.quality.toLowerCase())
+        })
     }
 
     init () {
@@ -30,7 +36,7 @@ export class RemixClient extends PluginClient {
             const { provider } = configureChains(this.chains, [w3mProvider({ projectId: PROJECT_ID })])
             
             this.wagmiClient = wagmiCreateClient({
-              autoConnect: true,
+              autoConnect: false,
               connectors: w3mConnectors({ projectId: PROJECT_ID, version: 1, chains: this.chains }),
               provider
             })
@@ -49,6 +55,9 @@ export class RemixClient extends PluginClient {
                 this.emit('chainChanged', 0)
             }
         })
+        this.on('theme', 'themeChanged', (theme: any) => {
+            this.internalEvents.emit('themeChanged', theme.quality)
+        })
     }
 
     sendAsync = (data: { method: string, params: string, id: string }) => {

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

@@ -28,6 +28,7 @@ export const setupEvents = (plugin: RunTab, dispatch: React.Dispatch<any>) => {
   plugin.blockchain.event.register('contextChanged', (context) => {
     dispatch(resetProxyDeployments())
     if (!context.startsWith('vm')) getNetworkProxyAddresses(plugin, dispatch)
+    if (context !== 'walletconnect') plugin.call('manager', 'deactivatePlugin', 'walletconnect')
     setFinalContext(plugin, dispatch)
     fillAccountsList(plugin, dispatch)
     updateAccountBalances(plugin, dispatch)
@@ -135,9 +136,15 @@ export const setupEvents = (plugin: RunTab, dispatch: React.Dispatch<any>) => {
     dispatch(fetchAccountsListSuccess(accountsMap))
   })
 
-  plugin.on('walletconnect', 'accountsChanged', (accounts: Array<string>) => {
+  plugin.on('walletconnect', 'accountsChanged', async (accounts: Array<string>) => {
     const accountsMap = {}
-    accounts.map(account => { accountsMap[account] = shortenAddress(account, '0')})
+
+    await Promise.all(accounts.map(async (account) => {
+      const balance = await plugin.blockchain.getBalanceInEther(account)
+      const updated = shortenAddress(account, balance)
+
+      accountsMap[account] = updated
+    }))
     dispatch(fetchAccountsListSuccess(accountsMap))
   })