Added event busing for dApp events, and implemented showing the network switcher for insufficient api interface

packages/react-environment/src/WebbProvider.tsx

@@ -18,6 +18,7 @@ import { WebbPolkadot } from './api-providers/polkadot';
 import { extensionNotInstalled, unsupportedChain } from './error';
 import { SettingProvider } from './SettingProvider';
 import { Chain, netStorageFactory, NetworkStorage, Wallet, WebbApiProvider, WebbContext } from './webb-context';
+import { appEvent } from '@webb-dapp/react-environment/app-event';
 
 interface WebbProviderProps extends BareProps {
   applicationName: string;
@@ -322,6 +323,12 @@ export const WebbProvider: FC<WebbProviderProps> = ({ applicationName = 'Webb Da
     init().finally(() => {
       setIsInit(false);
     });
+    appEvent.on('switchNetwork', ([chain, wallet]) => {
+      switchChainAndStore(chain, wallet);
+    });
+    appEvent.on('setActiveAccount', (nextAccount) => {
+      setActiveAccount(nextAccount);
+    });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return (

packages/react-environment/src/app-event/app-events.class.ts

@@ -0,0 +1,19 @@
+import { Chain, Wallet } from '@webb-dapp/react-environment';
+import { Account } from '@webb-dapp/wallet/account/Accounts.adapter';
+import { EventBus } from '@webb-tools/app-util';
+
+export type AppEvents = {
+  changeNetworkSwitcherVisibility: boolean;
+  switchNetwork: [Chain, Wallet];
+  setActiveAccount: Account;
+};
+
+class AppEvent extends EventBus<AppEvents> {
+  public readonly send: <E extends keyof AppEvents>(event: E, data: AppEvents[E]) => void | Promise<void>;
+  constructor() {
+    super();
+    this.send = this.emit;
+  }
+}
+
+export const appEvent = new AppEvent();

packages/react-environment/src/app-event/index.ts

@@ -0,0 +1 @@
+export * from './app-events.class';

packages/react-environment/src/error/interactive-errors/insufficient-api-interface.ts

@@ -1,4 +1,5 @@
 import { InteractiveFeedback, WebbErrorCodes } from '@webb-dapp/utils/webb-error';
+import { appEvent } from '@webb-dapp/react-environment/app-event';
 
 export function insufficientApiInterface(): InteractiveFeedback {
   let interactiveFeedback: InteractiveFeedback;
@@ -15,6 +16,7 @@ export function insufficientApiInterface(): InteractiveFeedback {
       'Switch',
       () => {
         interactiveFeedback?.cancel();
+        appEvent.send('changeNetworkSwitcherVisibility', true);
       },
       'success'
     )

packages/ui-components/src/NetworkManger/NetworkManager.tsx

@@ -24,6 +24,7 @@ import { Padding } from '@webb-dapp/ui-components/Padding/Padding';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import styled from 'styled-components';
 import { Pallet } from '@webb-dapp/ui-components/styling/colors';
+import { appEvent } from '@webb-dapp/react-environment/app-event';
 
 const NetworkManagerWrapper = styled.div`
   padding: 1rem;
@@ -96,6 +97,13 @@ export const NetworkManager: React.FC<NetworkManagerProps> = () => {
       setConnectionStep(ConnectionStep.SelectChain);
     }
   }, [connectionStep]);
+
+  useEffect(() => {
+    const off = appEvent.on('changeNetworkSwitcherVisibility', (next) => {
+      setOpen(next);
+    });
+    return () => off && off();
+  }, []);
   const content = useMemo(() => {
     switch (connectionStep) {
       case ConnectionStep.SelectChain:
@@ -406,6 +414,7 @@ const NetworkIndecatorWrapper = styled.button`
     padding: 0 0.3rem;
     //background: ${({ theme }: { theme: Pallet }) => theme.background};
     position: relative;
+
     &:before {
       position: absolute;
       content: '';
@@ -417,6 +426,7 @@ const NetworkIndecatorWrapper = styled.button`
       background: ${({ theme }: { theme: Pallet }) => (theme.type === 'light' ? 'white' : 'rgba(51, 81, 242, 0.28)')};
       border-radius: 32px;
     }
+
     &:after {
       z-index: 2;
       position: absolute;
@@ -428,6 +438,7 @@ const NetworkIndecatorWrapper = styled.button`
       background: ${({ theme }: { theme: Pallet }) => (theme.type === 'light' ? 'rgba(71, 69, 83, 0.1)' : 'black')};
       border-radius: 32px;
     }
+
     *:first-child {
       position: relative;
       z-index: 3;