Connection refactor

packages/keychain/src/components/connect/create/useCreateController.ts

@@ -1,8 +1,8 @@
-import { useState, useCallback, useEffect } from "react";
+import { useState, useCallback } from "react";
 import { useConnection } from "@/hooks/connection";
 import { LoginMode } from "../types";
 import { doLogin, doSignup } from "@/hooks/account";
-import { constants, RpcProvider } from "starknet";
+import { constants } from "starknet";
 import Controller from "@/utils/controller";
 import { fetchAccount } from "./utils";
 import { PopupCenter } from "@/utils/url";
@@ -19,25 +19,7 @@ export function useCreateController({
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<Error>();
   const [pendingUsername, setPendingUsername] = useState<string>();
-  const { origin, policies, rpcUrl, setController } = useConnection();
-
-  const [chainId, setChainId] = useState<string>();
-
-  useEffect(() => {
-    const fetchChainId = async () => {
-      try {
-        const provider = new RpcProvider({ nodeUrl: rpcUrl });
-        const id = await provider.getChainId();
-        setChainId(id);
-      } catch (e) {
-        console.error("Failed to fetch chain ID:", e);
-      }
-    };
-
-    if (rpcUrl) {
-      fetchChainId();
-    }
-  }, [rpcUrl]);
+  const { origin, policies, rpcUrl, chainId, setController } = useConnection();
 
   const handleAccountQuerySuccess = useCallback(
     async (data: AccountQuery) => {

packages/keychain/src/components/provider/connection.tsx

@@ -18,6 +18,7 @@ export type ConnectionContextValue = {
   controller?: Controller;
   origin?: string;
   rpcUrl?: string;
+  chainId?: string;
   policies?: ParsedSessionPolicies;
   theme: VerifiableControllerTheme;
   setContext: (context: ConnectionCtx) => void;

packages/keychain/src/hooks/connection.ts

@@ -26,6 +26,7 @@ import { defaultTheme, controllerConfigs } from "@cartridge/presets";
 import { ParsedSessionPolicies, parseSessionPolicies } from "./session";
 import { useThemeEffect } from "@cartridge/ui-next";
 import { shortString } from "starknet";
+import { RpcProvider } from "starknet";
 
 type ParentMethods = AsyncMethodReturns<{
   close: () => Promise<void>;
@@ -64,7 +65,7 @@ export function useConnectionValue() {
     ...defaultTheme,
   });
   const [controller, setController] = useState(window.controller);
-  const chainId = useMemo(() => controller?.chainId(), [controller]);
+  const [chainId, setChainId] = useState<string>();
 
   const urlParams = useMemo(() => {
     const urlParams = new URLSearchParams(window.location.search);
@@ -80,6 +81,23 @@ export function useConnectionValue() {
     return { theme, preset, policies };
   }, []);
 
+  // Fetch chain ID from RPC provider when rpcUrl changes
+  useEffect(() => {
+    const fetchChainId = async () => {
+      try {
+        const provider = new RpcProvider({ nodeUrl: rpcUrl });
+        const id = await provider.getChainId();
+        setChainId(id);
+      } catch (e) {
+        console.error("Failed to fetch chain ID:", e);
+      }
+    };
+
+    if (rpcUrl) {
+      fetchChainId();
+    }
+  }, [rpcUrl]);
+
   // Handle controller initialization
   useEffect(() => {
     // if we're not embedded (eg Slot auth/session) load controller from store and set origin/rpcUrl
@@ -157,13 +175,13 @@ export function useConnectionValue() {
       preset in controllerConfigs &&
       controllerConfigs[preset]?.chains
     ) {
-      const encodedChainId = shortString.encodeShortString(chainId);
-      if (encodedChainId in controllerConfigs[preset].chains) {
+      const decodedChainId = shortString.decodeShortString(chainId);
+      if (decodedChainId in controllerConfigs[preset].chains) {
         // Set policies from preset if no URL policies
         setPolicies(
           parseSessionPolicies({
             verified,
-            policies: controllerConfigs[preset].chains[encodedChainId].policies,
+            policies: controllerConfigs[preset].chains[decodedChainId].policies,
           }),
         );
       }
@@ -287,6 +305,7 @@ export function useConnectionValue() {
     policies,
     theme,
     verified,
+    chainId,
     setController,
     setContext,
     closeModal,

packages/keychain/src/test/mocks/connection.tsx

@@ -22,6 +22,7 @@ export const defaultMockConnection: ConnectionContextValue = {
   context: undefined,
   origin: "https://test.com",
   rpcUrl: "https://test.rpc.com",
+  chainId: "SN_MAIN",
   theme: {
     verified: true,
     name: "test",