feat: continue hooking up chain ID

apps/extension/src/background/approvals/handler.ts

@@ -135,11 +135,12 @@ const handleConnectInterfaceResponseMsg: (
 ) => InternalHandler<ConnectInterfaceResponseMsg> = (service) => {
   return async (
     { senderTabId: popupTabId },
-    { interfaceOrigin, allowConnection }
+    { interfaceOrigin, chainId, allowConnection }
   ) => {
     return await service.approveConnectionResponse(
       popupTabId,
       interfaceOrigin,
+      chainId,
       allowConnection
     );
   };

apps/extension/src/background/approvals/service.test.ts

@@ -303,6 +303,7 @@ describe("approvals service", () => {
   describe("approveConnectionResponse", () => {
     it("should approve connection response", async () => {
       const interfaceOrigin = "origin";
+      const chainId = "chainId";
       const popupTabId = 1;
       service["resolverMap"] = {
         [popupTabId]: {
@@ -315,6 +316,7 @@ describe("approvals service", () => {
       await service.approveConnectionResponse(
         popupTabId,
         interfaceOrigin,
+        chainId,
         true
       );
 
@@ -326,15 +328,22 @@ describe("approvals service", () => {
 
     it("should throw an error if resolvers are not found", async () => {
       const interfaceOrigin = "origin";
+      const chainId = "chainId";
       const popupTabId = 1;
 
       await expect(
-        service.approveConnectionResponse(popupTabId, interfaceOrigin, true)
+        service.approveConnectionResponse(
+          popupTabId,
+          interfaceOrigin,
+          chainId,
+          true
+        )
       ).rejects.toBeDefined();
     });
 
     it("should reject the connection if allowConnection is set to false", async () => {
       const interfaceOrigin = "origin";
+      const chainId = "chainId";
       const popupTabId = 1;
       service["resolverMap"] = {
         [popupTabId]: {
@@ -346,6 +355,7 @@ describe("approvals service", () => {
       await service.approveConnectionResponse(
         popupTabId,
         interfaceOrigin,
+        chainId,
         false
       );
 
@@ -416,6 +426,7 @@ describe("approvals service", () => {
 
     it("should reject the connection if revokeConnection is set to false", async () => {
       const interfaceOrigin = "origin";
+      const chainId = "chainId";
       const popupTabId = 1;
       service["resolverMap"] = {
         [popupTabId]: {
@@ -427,6 +438,7 @@ describe("approvals service", () => {
       await service.approveConnectionResponse(
         popupTabId,
         interfaceOrigin,
+        chainId,
         false
       );
 

apps/extension/src/background/approvals/service.ts

@@ -222,13 +222,16 @@ export class ApprovalsService {
   async approveConnectionResponse(
     popupTabId: number,
     interfaceOrigin: string,
+    chainId: string,
     allowConnection: boolean
   ): Promise<void> {
     const resolvers = this.getResolver(popupTabId);
 
     if (allowConnection) {
       try {
         await this.localStorage.addApprovedOrigin(interfaceOrigin);
+        // Enable signing for this chain
+        await this.chainService.updateChain(chainId);
       } catch (e) {
         resolvers.reject(e);
       }

apps/namadillo/src/App/Common/ConnectExtensionButton.tsx

@@ -1,18 +1,24 @@
 import { ActionButton } from "@namada/components";
 import { useUntilIntegrationAttached } from "@namada/integrations";
+import { chainParametersAtom } from "atoms/chain";
 import { namadaExtensionConnectedAtom } from "atoms/settings";
 import { useExtensionConnect } from "hooks/useExtensionConnect";
 import { useAtomValue } from "jotai";
 
 export const ConnectExtensionButton = (): JSX.Element => {
   const extensionAttachStatus = useUntilIntegrationAttached();
   const isExtensionConnected = useAtomValue(namadaExtensionConnectedAtom);
-  const { connect } = useExtensionConnect();
+  const chainParams = useAtomValue(chainParametersAtom);
+  const { connect } = useExtensionConnect("namada", chainParams.data?.chainId);
 
   return (
     <>
       {extensionAttachStatus === "attached" && !isExtensionConnected && (
-        <ActionButton backgroundColor="yellow" size="sm" onClick={connect}>
+        <ActionButton
+          backgroundColor="yellow"
+          size="sm"
+          onClick={() => connect()}
+        >
           Connect Keychain
         </ActionButton>
       )}

apps/namadillo/src/atoms/accounts/atoms.ts

@@ -1,11 +1,12 @@
 import { getIntegration } from "@namada/integrations";
 import { Account } from "@namada/types";
 import { indexerApiAtom } from "atoms/api";
-import { nativeTokenAddressAtom } from "atoms/chain";
+import { chainParametersAtom, nativeTokenAddressAtom } from "atoms/chain";
 import { shouldUpdateBalanceAtom } from "atoms/etc";
 import { namadaExtensionConnectedAtom } from "atoms/settings";
 import { queryDependentFn } from "atoms/utils";
 import BigNumber from "bignumber.js";
+import { getDefaultStore } from "jotai";
 import { atomWithMutation, atomWithQuery } from "jotai-tanstack-query";
 import { chainConfigByName } from "registry";
 import {
@@ -41,8 +42,10 @@ export const updateDefaultAccountAtom = atomWithMutation(() => {
 
 export const disconnectAccountAtom = atomWithMutation(() => {
   const integration = getIntegration("namada");
+  const store = getDefaultStore();
+  const { chainId } = store.get(chainParametersAtom).data!;
   return {
-    mutationFn: () => integration.disconnect(),
+    mutationFn: () => integration.disconnect(chainId),
   };
 });
 

apps/namadillo/src/hooks/useExtensionConnect.ts

@@ -11,14 +11,15 @@ type UseConnectOutput = {
 };
 
 export const useExtensionConnect = (
-  chainKey: ChainKey = "namada"
+  chainKey: ChainKey = "namada",
+  chainId: string = ""
 ): UseConnectOutput => {
   const [connectionStatus, setConnectionStatus] = useAtom(
     namadaExtensionConnectionStatus
   );
 
   const [_integration, isConnectingToExtension, withConnection] =
-    useIntegrationConnection(chainKey);
+    useIntegrationConnection(chainKey, chainId);
 
   useEffect(() => {
     if (isConnectingToExtension) {

apps/namadillo/src/hooks/useExtensionEvents.tsx

@@ -2,12 +2,14 @@ import { useEventListenerOnce } from "@namada/hooks";
 import { useIntegration } from "@namada/integrations";
 import { Events } from "@namada/types";
 import { accountBalanceAtom, defaultAccountAtom } from "atoms/accounts";
+import { chainParametersAtom } from "atoms/chain";
 import { namadaExtensionConnectionStatus } from "atoms/settings";
 import { useAtomValue, useSetAtom } from "jotai";
 
 export const useExtensionEvents = (): void => {
   const defaultAccount = useAtomValue(defaultAccountAtom);
   const balances = useAtomValue(accountBalanceAtom);
+  const chainParams = useAtomValue(chainParametersAtom);
   const integration = useIntegration("namada");
 
   const setNamadaExtensionConnected = useSetAtom(
@@ -22,7 +24,9 @@ export const useExtensionEvents = (): void => {
 
   useEventListenerOnce(Events.ConnectionRevoked, async () => {
     setNamadaExtensionConnected(
-      (await integration.isConnected()) ? "connected" : "idle"
+      (await integration.isConnected(chainParams.data!.chainId)) ?
+        "connected"
+      : "idle"
     );
   });
 };

apps/namadillo/src/hooks/useOnNamadaExtensionAttached.ts

@@ -4,18 +4,20 @@ import {
   useIntegration,
   useUntilIntegrationAttached,
 } from "@namada/integrations";
+import { chainParametersAtom } from "atoms/chain";
 import { namadaExtensionConnectionStatus } from "atoms/settings";
-import { useSetAtom } from "jotai";
+import { useAtomValue, useSetAtom } from "jotai";
 
 export const useOnNamadaExtensionAttached = (): void => {
   const setNamadExtensionStatus = useSetAtom(namadaExtensionConnectionStatus);
+  const chainParams = useAtomValue(chainParametersAtom);
   const attachStatus = useUntilIntegrationAttached();
   const integration = useIntegration("namada") as Namada;
 
   useEffectSkipFirstRender(() => {
     (async () => {
-      if (attachStatus === "attached") {
-        if (!!(await integration.isConnected())) {
+      if (attachStatus === "attached" && chainParams.data?.chainId) {
+        if (!!(await integration.isConnected(chainParams.data.chainId))) {
           setNamadExtensionStatus("connected");
         }
       }

packages/integrations/src/hooks/useIntegration.ts

@@ -60,7 +60,8 @@ export const useIntegration = <K extends ChainKey>(
  * Tuple of integration, connection status and connection function.
  */
 export const useIntegrationConnection = <TSuccess, TFail, K extends ChainKey>(
-  chainKey: K
+  chainKey: K,
+  chainId: string
 ): [
   IntegrationFromChainKey<K>,
   boolean,
@@ -74,7 +75,7 @@ export const useIntegrationConnection = <TSuccess, TFail, K extends ChainKey>(
       setIsConnectingToExtension(true);
       try {
         if (integration.detect()) {
-          await integration.connect();
+          await integration.connect(chainId);
           await onSuccess();
         }
       } catch {
@@ -84,7 +85,7 @@ export const useIntegrationConnection = <TSuccess, TFail, K extends ChainKey>(
       }
       setIsConnectingToExtension(false);
     },
-    [chainKey]
+    [chainKey, chainId]
   );
 
   return [integration, isConnectingToExtension, connect];