Use connection provider instead of context

packages/keychain/src/components/connect/CreateController.tsx

@@ -2,44 +2,32 @@ import { useState } from "react";
 import { Signup } from "./Signup";
 import { Login } from "./Login";
 import { useConnection } from "hooks/connection";
-import { ConnectCtx } from "utils/connection";
 
 export function CreateController({ isSlot }: { isSlot?: boolean }) {
-  const { chainId, rpcUrl, context, setController, error } = useConnection();
+  const { error } = useConnection();
   const [showSignup, setShowSignup] = useState(false);
   const [prefilledUsername, setPrefilledUsername] = useState<string>();
-  const ctx = context as ConnectCtx;
 
   if (error) {
     return <>{error.message}</>;
   }
 
   return showSignup ? (
     <Signup
-      origin={ctx?.origin}
-      policies={ctx?.policies}
-      chainId={chainId}
-      rpcUrl={rpcUrl}
       prefilledName={prefilledUsername}
       onLogin={(username) => {
         setPrefilledUsername(username);
         setShowSignup(false);
       }}
-      onSuccess={setController}
       isSlot={isSlot}
     />
   ) : (
     <Login
-      origin={ctx?.origin}
-      policies={ctx?.policies}
-      chainId={chainId}
-      rpcUrl={rpcUrl}
       prefilledName={prefilledUsername}
       onSignup={(username) => {
         setPrefilledUsername(username);
         setShowSignup(true);
       }}
-      onSuccess={setController}
       isSlot={isSlot}
     />
   );

packages/keychain/src/components/connect/Login.tsx

@@ -16,17 +16,15 @@ import { RegistrationLink } from "./RegistrationLink";
 import { useControllerTheme } from "hooks/theme";
 import { doLogin } from "hooks/account";
 import { Error as ErrorComp } from "components/Error";
+import { useConnection } from "hooks/connection";
 
 export function Login({
-  chainId,
-  rpcUrl,
-  origin,
-  policies,
   prefilledName = "",
   isSlot,
   onSuccess,
   onSignup,
 }: LoginProps) {
+  const { origin, policies, chainId, rpcUrl, setController } = useConnection();
   const { event: log } = useAnalytics();
   const theme = useControllerTheme();
   const [isLoading, setIsLoading] = useState(false);
@@ -63,7 +61,11 @@ export function Login({
         }
 
         controller.store();
-        onSuccess(controller);
+        setController(controller);
+
+        if (onSuccess) {
+          onSuccess();
+        }
 
         log({ type: "webauthn_login", address });
       } catch (e) {
@@ -80,7 +82,7 @@ export function Login({
 
       setIsLoading(false);
     },
-    [chainId, rpcUrl, origin, policies, expiresAt, isSlot, log, onSuccess],
+    [chainId, rpcUrl, origin, policies, expiresAt, isSlot, log],
   );
 
   return (

packages/keychain/src/components/connect/Signup.tsx

@@ -25,14 +25,11 @@ import { doSignup } from "hooks/account";
 import { useControllerTheme } from "hooks/theme";
 import { Error as ErrorComp } from "components/Error";
 import { shortString } from "starknet";
+import { useConnection } from "hooks/connection";
 
 export function Signup({
   prefilledName = "",
-  origin,
-  policies,
   isSlot,
-  chainId,
-  rpcUrl,
   onSuccess,
   onLogin,
 }: SignupProps) {
@@ -78,15 +75,11 @@ export function Signup({
           validateOnBlur={false}
         >
           <Form
-            chainId={chainId}
-            rpcUrl={rpcUrl}
             onLogin={onLogin}
-            onSuccess={onSuccess}
             isRegistering={isRegistering}
             isLoading={isLoading}
+            onSuccess={onSuccess}
             setIsRegistering={setIsRegistering}
-            origin={origin}
-            policies={policies}
             isSlot={isSlot}
             error={error}
           />
@@ -97,10 +90,6 @@ export function Signup({
 }
 
 function Form({
-  origin,
-  policies,
-  chainId,
-  rpcUrl,
   isRegistering,
   isLoading,
   isSlot,
@@ -114,6 +103,7 @@ function Form({
   setIsRegistering: (val: boolean) => void;
   error: Error;
 }) {
+  const { origin, policies, chainId, rpcUrl, setController } = useConnection();
   const theme = useControllerTheme();
   const { values, isValidating } = useFormikContext<FormValues>();
 
@@ -160,7 +150,11 @@ function Form({
         controller.store();
         await controller.account.sync();
 
-        onSuccess(controller);
+        setController(controller);
+
+        if (onSuccess) {
+          onSuccess();
+        }
       },
     },
   );

packages/keychain/src/components/connect/types.ts

@@ -1,6 +1,3 @@
-import Controller from "utils/controller";
-import { Policy } from "@cartridge/controller";
-
 export type FormValues = {
   username: string;
 };
@@ -9,12 +6,8 @@ export type AuthProps = SignupProps | LoginProps;
 
 type AuthBaseProps = {
   prefilledName?: string;
-  origin?: string;
-  policies?: Policy[];
   isSlot?: boolean;
-  chainId: string;
-  rpcUrl: string;
-  onSuccess: (controller: Controller) => void;
+  onSuccess?: () => void;
 };
 
 export type SignupProps = AuthBaseProps & {

packages/keychain/src/hooks/connection.tsx

@@ -41,19 +41,23 @@ export function ConnectionProvider({ children }: PropsWithChildren) {
   const parsePolicies = (policiesStr: string | null): Policy[] => {
     if (!policiesStr) return [];
     return JSON.parse(policiesStr);
-  }
+  };
 
   useEffect(() => {
     if (!isIframe()) {
       const urlParams = new URLSearchParams(window.location.search);
       setOrigin(urlParams.get("origin") || process.env.NEXT_PUBLIC_ORIGIN);
-      setRpcUrl(urlParams.get("rpc_url") || process.env.NEXT_PUBLIC_RPC_SEPOLIA);
+      setRpcUrl(
+        urlParams.get("rpc_url") || process.env.NEXT_PUBLIC_RPC_SEPOLIA,
+      );
       setPolicies(parsePolicies(urlParams.get("policies")));
       return;
     }
 
     const connection = connectToController({
+      setOrigin,
       setRpcUrl,
+      setPolicies,
       setContext,
       setController,
     });

packages/keychain/src/pages/login.tsx

@@ -21,8 +21,6 @@ const Login: NextPage = () => {
 
   return (
     <LoginComponent
-      chainId={chainId}
-      rpcUrl={rpcUrl}
       onSignup={() => router.push({ pathname: "/signup", query: router.query })}
       onSuccess={async () => {
         router.replace(`${process.env.NEXT_PUBLIC_ADMIN_URL}/profile`);

packages/keychain/src/pages/signup.tsx

@@ -20,8 +20,6 @@ export default function Signup() {
 
   return (
     <SignupComponent
-      chainId={chainId}
-      rpcUrl={rpcUrl}
       onLogin={() => router.push({ pathname: "/login", query: router.query })}
       onSuccess={() => {
         router.replace(`${process.env.NEXT_PUBLIC_ADMIN_URL}/profile`);

packages/keychain/src/utils/connection/connect.ts

@@ -3,15 +3,21 @@ import { ConnectCtx, ConnectionCtx } from "./types";
 import Controller from "utils/controller";
 
 export function connectFactory({
+  setOrigin,
   setRpcUrl,
+  setPolicies,
   setContext,
 }: {
+  setOrigin: (origin: string) => void;
   setRpcUrl: (url: string) => void;
+  setPolicies: (policies: Policy[]) => void;
   setContext: (context: ConnectionCtx) => void;
 }) {
   return (origin: string) =>
     (policies: Policy[], rpcUrl: string): Promise<ConnectReply> => {
+      setOrigin(origin);
       setRpcUrl(rpcUrl);
+      setPolicies(policies);
 
       return new Promise((resolve, reject) => {
         setContext({

packages/keychain/src/utils/connection/index.ts

@@ -1,6 +1,6 @@
 export * from "./types";
 
-import { ConnectError, ResponseCodes } from "@cartridge/controller";
+import { ConnectError, Policy, ResponseCodes } from "@cartridge/controller";
 import { connectToParent } from "@cartridge/penpal";
 import { normalize as normalizeOrigin } from "utils/url";
 import Controller from "utils/controller";
@@ -15,17 +15,23 @@ import { username } from "./username";
 import { ConnectionCtx } from "./types";
 
 export function connectToController({
+  setOrigin,
   setRpcUrl,
+  setPolicies,
   setContext,
   setController,
 }: {
+  setOrigin: (origin: string) => void;
   setRpcUrl: (url: string) => void;
+  setPolicies: (policies: Policy[]) => void;
   setContext: (ctx: ConnectionCtx) => void;
   setController: (controller: Controller) => void;
 }) {
   return connectToParent({
     methods: {
-      connect: normalize(connectFactory({ setRpcUrl, setContext })),
+      connect: normalize(
+        connectFactory({ setOrigin, setRpcUrl, setPolicies, setContext }),
+      ),
       disconnect: normalize(validate(disconnectFactory(setController))),
       execute: normalize(validate(executeFactory({ setContext }))),
       estimateDeclareFee: normalize(validate(estimateDeclareFee)),