diff --git a/apps/namada-interface/src/services/extensionEvents/handlers/metamask.ts b/apps/namada-interface/src/services/extensionEvents/handlers/metamask.ts index e026b1f9ba..7d60dae736 100644 --- a/apps/namada-interface/src/services/extensionEvents/handlers/metamask.ts +++ b/apps/namada-interface/src/services/extensionEvents/handlers/metamask.ts @@ -1,22 +1,13 @@ import { Dispatch } from "react"; - -import { chains } from "@anoma/chains"; import { Metamask } from "@anoma/integrations"; - import { addAccounts, fetchBalances } from "slices/accounts"; export const MetamaskAccountChangedHandler = - (dispatch: Dispatch, integration: Metamask) => - async (event: CustomEventInit) => { - const chainId = event.detail?.chainId; - const chain = chains[chainId]; - - if (chain.extension.id === "metamask") { - const accounts = await integration.accounts(); + (dispatch: Dispatch, integration: Metamask) => async () => { + const accounts = await integration.accounts(); - if (accounts) { - dispatch(addAccounts(accounts)); - dispatch(fetchBalances()); - } + if (accounts) { + dispatch(addAccounts(accounts)); + dispatch(fetchBalances()); } }; diff --git a/apps/namada-interface/src/services/extensionEvents/provider.tsx b/apps/namada-interface/src/services/extensionEvents/provider.tsx index dd38338c04..e1ed1c4ad6 100644 --- a/apps/namada-interface/src/services/extensionEvents/provider.tsx +++ b/apps/namada-interface/src/services/extensionEvents/provider.tsx @@ -1,8 +1,12 @@ import { createContext } from "react"; -import { Events } from "@anoma/types"; -import { chains, defaultChainId } from "@anoma/chains"; -import { Anoma, Keplr } from "@anoma/integrations"; +import { Events, KeplrEvents, MetamaskEvents } from "@anoma/types"; +import { + defaultChainId, + defaultCosmosChainId, + defaultEthereumChainId, +} from "@anoma/chains"; +import { Anoma, Keplr, Metamask } from "@anoma/integrations"; import { useEventListenerOnce, useIntegration } from "@anoma/hooks"; import { useAppDispatch } from "store"; @@ -11,16 +15,17 @@ import { AnomaTransferCompletedHandler, AnomaTransferStartedHandler, AnomaUpdatedBalancesHandler, -} from "./handlers/anoma"; -import { KeplrAccountChangedHandler } from "./handlers"; + KeplrAccountChangedHandler, + MetamaskAccountChangedHandler, +} from "./handlers"; export const ExtensionEventsContext = createContext({}); export const ExtensionEventsProvider: React.FC = (props): JSX.Element => { const dispatch = useAppDispatch(); const anomaIntegration = useIntegration(defaultChainId); - // TODO: Don't hardcode chain id here! - const keplrIntegration = useIntegration("cosmoshub-4"); + const keplrIntegration = useIntegration(defaultCosmosChainId); + const metamaskIntegration = useIntegration(defaultEthereumChainId); // Instantiate handlers: const anomaAccountChangedHandler = AnomaAccountChangedHandler( @@ -37,12 +42,23 @@ export const ExtensionEventsProvider: React.FC = (props): JSX.Element => { keplrIntegration as Keplr ); + // Metamask handlers + const metamaskAccountChangedHandler = MetamaskAccountChangedHandler( + dispatch, + metamaskIntegration as Metamask + ); + // Register handlers: useEventListenerOnce(Events.AccountChanged, anomaAccountChangedHandler); useEventListenerOnce(Events.TransferStarted, anomaTransferStartedHandler); useEventListenerOnce(Events.TransferCompleted, anomaTransferCompletedHandler); useEventListenerOnce(Events.UpdatedBalances, anomaUpdatedBalancesHandler); - useEventListenerOnce("keplr_keystorechange", keplrAccountChangedHandler); + useEventListenerOnce(KeplrEvents.AccountChanged, keplrAccountChangedHandler); + // TODO: This should be bound to window.ethereum: + useEventListenerOnce( + MetamaskEvents.AccountChanged, + metamaskAccountChangedHandler + ); return ( diff --git a/packages/chains/src/index.ts b/packages/chains/src/index.ts index 51a602794d..2106ad332c 100644 --- a/packages/chains/src/index.ts +++ b/packages/chains/src/index.ts @@ -3,6 +3,8 @@ import namada from "./chains/namada"; import ethereum from "./chains/ethereum"; export const defaultChainId = namada.chainId; +export const defaultCosmosChainId = cosmos.chainId; +export const defaultEthereumChainId = ethereum.chainId; export const chains = { [cosmos.chainId]: cosmos, diff --git a/packages/types/src/events.ts b/packages/types/src/events.ts index b54c4d15ba..8f814656e8 100644 --- a/packages/types/src/events.ts +++ b/packages/types/src/events.ts @@ -1,8 +1,20 @@ // Constants defining events which may be subscribed to +// Anoma extension events export enum Events { AccountChanged = "anoma-account-changed", TransferStarted = "anoma-transfer-started", TransferCompleted = "anoma-transfer-completed", UpdatedBalances = "anoma-updated-balances", } + +// Keplr extension events +export enum KeplrEvents { + AccountChanged = "keplr_keystorechange", +} + +// Metamask extension window.ethereum events +export enum MetamaskEvents { + AccountChanged = "accountsChanged", + NetworkChanged = "networkChanged", +}