From 10e4be9ef98dc7063c19e2f3ec6a485390964560 Mon Sep 17 00:00:00 2001 From: ahmed korim Date: Thu, 1 Jul 2021 13:53:21 +0200 Subject: [PATCH 1/2] App Events --- .../react-environment/src/WebbProvider.tsx | 7 +++++++ .../src/app-event/app-events.class.ts | 19 +++++++++++++++++++ .../react-environment/src/app-event/index.ts | 1 + .../src/NetworkManger/NetworkManager.tsx | 11 +++++++++++ 4 files changed, 38 insertions(+) create mode 100644 packages/react-environment/src/app-event/app-events.class.ts create mode 100644 packages/react-environment/src/app-event/index.ts diff --git a/packages/react-environment/src/WebbProvider.tsx b/packages/react-environment/src/WebbProvider.tsx index 7241a7b3a9..adf77334ae 100644 --- a/packages/react-environment/src/WebbProvider.tsx +++ b/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 = ({ 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 ( diff --git a/packages/react-environment/src/app-event/app-events.class.ts b/packages/react-environment/src/app-event/app-events.class.ts new file mode 100644 index 0000000000..0fc85a0f67 --- /dev/null +++ b/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 { + public readonly send: (event: E, data: AppEvents[E]) => void | Promise; + constructor() { + super(); + this.send = this.emit; + } +} + +export const appEvent = new AppEvent(); diff --git a/packages/react-environment/src/app-event/index.ts b/packages/react-environment/src/app-event/index.ts new file mode 100644 index 0000000000..b67604aa82 --- /dev/null +++ b/packages/react-environment/src/app-event/index.ts @@ -0,0 +1 @@ +export * from './app-events.class'; diff --git a/packages/ui-components/src/NetworkManger/NetworkManager.tsx b/packages/ui-components/src/NetworkManger/NetworkManager.tsx index ff2506d4bc..b8bb2f750c 100644 --- a/packages/ui-components/src/NetworkManger/NetworkManager.tsx +++ b/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 = () => { 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; From 872e662dfc55920e365afdd8c2501ead92ecf0c0 Mon Sep 17 00:00:00 2001 From: ahmed korim Date: Thu, 1 Jul 2021 13:53:57 +0200 Subject: [PATCH 2/2] switch networks onm insufficient interface --- .../src/error/interactive-errors/insufficient-api-interface.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/react-environment/src/error/interactive-errors/insufficient-api-interface.ts b/packages/react-environment/src/error/interactive-errors/insufficient-api-interface.ts index efd0e9be93..a46d7a3df3 100644 --- a/packages/react-environment/src/error/interactive-errors/insufficient-api-interface.ts +++ b/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' )