Clean up, add placeholders for Metamask

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<unknown>, 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<unknown>, integration: Metamask) => async () => {
+    const accounts = await integration.accounts();
 
-      if (accounts) {
-        dispatch(addAccounts(accounts));
-        dispatch(fetchBalances());
-      }
+    if (accounts) {
+      dispatch(addAccounts(accounts));
+      dispatch(fetchBalances());
     }
   };

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 (
     <ExtensionEventsContext.Provider value={{}}>

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,

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",
+}