Enable event handling for Keplr account changes

apps/namada-interface/src/services/extensionEvents/handlers/keplr.ts

@@ -1,22 +1,16 @@
 import { Dispatch } from "react";
 
-import { chains } from "@anoma/chains";
 import { Keplr } from "@anoma/integrations";
 
 import { addAccounts, fetchBalances } from "slices/accounts";
 
 export const KeplrAccountChangedHandler =
-  (dispatch: Dispatch<unknown>, integration: Keplr) =>
-  async (event: CustomEventInit) => {
-    const chainId = event.detail?.chainId;
-    const chain = chains[chainId];
+  (dispatch: Dispatch<unknown>, integration: Keplr) => async () => {
+    const accounts = await integration.accounts();
+    console.log("KEPLR accounts", { accounts });
 
-    if (chain.extension.id === "keplr") {
-      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,8 @@
 import { createContext } from "react";
 
 import { Events } from "@anoma/types";
-import { defaultChainId } from "@anoma/chains";
-import { Anoma } from "@anoma/integrations";
+import { chains, defaultChainId } from "@anoma/chains";
+import { Anoma, Keplr } from "@anoma/integrations";
 import { useEventListenerOnce, useIntegration } from "@anoma/hooks";
 
 import { useAppDispatch } from "store";
@@ -12,12 +12,15 @@ import {
   AnomaTransferStartedHandler,
   AnomaUpdatedBalancesHandler,
 } from "./handlers/anoma";
+import { KeplrAccountChangedHandler } 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");
 
   // Instantiate handlers:
   const anomaAccountChangedHandler = AnomaAccountChangedHandler(
@@ -26,14 +29,20 @@ export const ExtensionEventsProvider: React.FC = (props): JSX.Element => {
   );
   const anomaTransferStartedHandler = AnomaTransferStartedHandler(dispatch);
   const anomaTransferCompletedHandler = AnomaTransferCompletedHandler(dispatch);
-
   const anomaUpdatedBalancesHandler = AnomaUpdatedBalancesHandler(dispatch);
 
+  // Keplr handlers
+  const keplrAccountChangedHandler = KeplrAccountChangedHandler(
+    dispatch,
+    keplrIntegration as Keplr
+  );
+
   // Register handlers:
   useEventListenerOnce(Events.AccountChanged, anomaAccountChangedHandler);
   useEventListenerOnce(Events.TransferStarted, anomaTransferStartedHandler);
   useEventListenerOnce(Events.TransferCompleted, anomaTransferCompletedHandler);
   useEventListenerOnce(Events.UpdatedBalances, anomaUpdatedBalancesHandler);
+  useEventListenerOnce("keplr_keystorechange", keplrAccountChangedHandler);
 
   return (
     <ExtensionEventsContext.Provider value={{}}>