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/extension/src/provider/InjectedNamada.ts

@@ -14,16 +14,22 @@ import { Signer } from "./Signer";
 export class InjectedNamada implements INamada {
   constructor(private readonly _version: string) {}
 
-  public async connect(): Promise<void> {
-    return await InjectedProxy.requestMethod<string, void>("connect");
+  public async connect(chainId: string): Promise<void> {
+    return await InjectedProxy.requestMethod<string, void>("connect", chainId);
   }
 
-  public async disconnect(): Promise<void> {
-    return await InjectedProxy.requestMethod<string, void>("disconnect");
+  public async disconnect(chainId: string): Promise<void> {
+    return await InjectedProxy.requestMethod<string, void>(
+      "disconnect",
+      chainId
+    );
   }
 
-  public async isConnected(): Promise<boolean> {
-    return await InjectedProxy.requestMethod<string, boolean>("isConnected");
+  public async isConnected(chainId: string): Promise<boolean> {
+    return await InjectedProxy.requestMethod<string, boolean>(
+      "isConnected",
+      chainId
+    );
   }
 
   public async accounts(): Promise<DerivedAccount[]> {

apps/faucet/src/App/Faucet.tsx

@@ -242,7 +242,7 @@ export const FaucetForm: React.FC<Props> = ({ isTestnetLive }) => {
             throw new Error("Extension not installed!");
           }
 
-          await integration.connect();
+          await integration.connect("");
           const accounts = await integration.accounts();
           if (accounts) {
             setAccounts(accounts.filter((account) => !account.isShielded));

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 chainParams = useAtomValue(chainParametersAtom);
   const { connect } = useExtensionConnect();
 
   return (
     <>
       {extensionAttachStatus === "attached" && !isExtensionConnected && (
-        <ActionButton backgroundColor="yellow" size="sm" onClick={connect}>
+        <ActionButton
+          backgroundColor="yellow"
+          size="sm"
+          onClick={() => connect(chainParams.data!.chainId)}
+        >
           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

@@ -7,7 +7,7 @@ import { useEffect } from "react";
 type UseConnectOutput = {
   connectionStatus: ConnectStatus;
   isConnected: boolean;
-  connect: () => Promise<void>;
+  connect: (chainId: string) => Promise<void>;
 };
 
 export const useExtensionConnect = (
@@ -26,9 +26,12 @@ export const useExtensionConnect = (
     }
   }, [isConnectingToExtension]);
 
-  const handleConnectExtension = async (): Promise<void> => {
+  const handleConnectExtension = async (
+    chainId: string = ""
+  ): Promise<void> => {
     if (connectionStatus === "connected") return;
     withConnection(
+      chainId,
       () => setConnectionStatus("connected"),
       () => setConnectionStatus("error")
     );

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

@@ -12,6 +12,7 @@ import { Keplr, Metamask, Namada } from "@namada/integrations";
 import { ChainKey, ExtensionKey } from "@namada/types";
 
 type ExtensionConnection<T, U> = (
+  chainId: string,
   onSuccess: () => T,
   onFail?: () => U
 ) => Promise<void>;
@@ -70,11 +71,11 @@ export const useIntegrationConnection = <TSuccess, TFail, K extends ChainKey>(
   const [isConnectingToExtension, setIsConnectingToExtension] = useState(false);
 
   const connect: ExtensionConnection<TSuccess, TFail> = useCallback(
-    async (onSuccess, onFail) => {
+    async (chainId, onSuccess, onFail) => {
       setIsConnectingToExtension(true);
       try {
         if (integration.detect()) {
-          await integration.connect();
+          await integration.connect(chainId);
           await onSuccess();
         }
       } catch {
@@ -86,7 +87,6 @@ export const useIntegrationConnection = <TSuccess, TFail, K extends ChainKey>(
     },
     [chainKey]
   );
-
   return [integration, isConnectingToExtension, connect];
 };