Session summary updates

packages/controller/src/types.ts

@@ -52,7 +52,7 @@ export type ControllerError = {
 export type ConnectReply = {
   code: ResponseCodes.SUCCESS;
   address: string;
-  policies: SessionPolicies;
+  policies?: SessionPolicies;
 };
 
 export type ExecuteReply =

packages/keychain/.env.development

@@ -4,7 +4,7 @@ NEXT_PUBLIC_ADMIN_URL="http://localhost:3002"
 NEXT_PUBLIC_CARTRIDGE_API_URL="http://localhost:8000"
 # NEXT_PUBLIC_ETH_RPC_MAINNET="https://eth-mainnet.g.alchemy.com/v2/OGPRMquXP3K7oTkLrmVZpjCd1DswtYz3"
 # NEXT_PUBLIC_ETH_RPC_SEPOLIA="https://eth-sepolia.g.alchemy.com/v2/mURnclB5pn5elDfyzgTN4W2GR-rOYevI"
-# NEXT_PUBLIC_RPC_MAINNET="http://localhost:8001/x/starknet/mainnet"
+NEXT_PUBLIC_RPC_MAINNET="http://localhost:8001/x/starknet/mainnet"
 NEXT_PUBLIC_RPC_SEPOLIA="http://localhost:8001/x/starknet/sepolia"
 NEXT_PUBLIC_STRIPE_PAYMENT="http://localhost:8000/stripe/payment-intent"
 NEXT_PUBLIC_POSTHOG_KEY=phc_UWaJajNQ00PjHhveZ81SJ2zVtBicKrzewdZHGiyavQQ

packages/keychain/.env.production

@@ -4,7 +4,7 @@ NEXT_PUBLIC_ADMIN_URL="https://cartridge.gg"
 NEXT_PUBLIC_CARTRIDGE_API_URL="https://api.cartridge.gg"
 # NEXT_PUBLIC_ETH_RPC_MAINNET="https://eth-mainnet.g.alchemy.com/v2/OGPRMquXP3K7oTkLrmVZpjCd1DswtYz3"
 # NEXT_PUBLIC_ETH_RPC_SEPOLIA="https://eth-sepolia.g.alchemy.com/v2/mURnclB5pn5elDfyzgTN4W2GR-rOYevI"
-# NEXT_PUBLIC_RPC_MAINNET="https://api.cartridge.gg/x/starknet/mainnet"
+NEXT_PUBLIC_RPC_MAINNET="https://api.cartridge.gg/x/starknet/mainnet"
 NEXT_PUBLIC_RPC_SEPOLIA="https://api.cartridge.gg/x/starknet/sepolia"
 NEXT_PUBLIC_STRIPE_PAYMENT="https://api.cartridge.gg/stripe/payment-intent"
 NEXT_PUBLIC_POSTHOG_KEY=phc_UWaJajNQ00PjHhveZ81SJ2zVtBicKrzewdZHGiyavQQ

packages/keychain/.storybook/preview.tsx

@@ -11,10 +11,16 @@ import {
 import { constants } from "starknet";
 import { getChainName } from "@cartridge/utils";
 import Script from "next/script";
-import { ETH_CONTRACT_ADDRESS } from "../src/utils/token";
 import { ConnectCtx, ConnectionCtx } from "../src/utils/connection/types";
 import { UpgradeInterface } from "../src/hooks/upgrade";
-import { defaultTheme, controllerConfigs } from "@cartridge/presets";
+import {
+  defaultTheme,
+  controllerConfigs,
+  SessionPolicies,
+  ControllerTheme,
+} from "@cartridge/presets";
+import { mainnet } from "@starknet-react/chains";
+import { StarknetConfig, publicProvider, voyager } from "@starknet-react/core";
 
 const inter = Inter({ subsets: ["latin"] });
 const ibmPlexMono = IBM_Plex_Mono({
@@ -77,16 +83,27 @@ function Provider({
   parameters,
 }: { parameters: StoryParameters } & PropsWithChildren) {
   const connection = useMockedConnection(parameters.connection);
-  const theme = parameters.preset || "cartridge";
+
+  if (parameters.preset) {
+    const config = controllerConfigs[parameters.preset];
+    connection.theme = config.theme || connection.theme;
+    connection.policies = config.policies || connection.policies;
+  }
 
   return (
-    <QueryClientProvider client={queryClient}>
-      <ConnectionContext.Provider value={connection}>
-        <ControllerThemeProvider theme={theme}>
-          {children}
-        </ControllerThemeProvider>
-      </ConnectionContext.Provider>
-    </QueryClientProvider>
+    <StarknetConfig
+      chains={[mainnet]}
+      explorer={voyager}
+      provider={publicProvider()}
+    >
+      <QueryClientProvider client={queryClient}>
+        <ConnectionContext.Provider value={connection}>
+          <ControllerThemeProvider theme={connection.theme}>
+            {children}
+          </ControllerThemeProvider>
+        </ConnectionContext.Provider>
+      </QueryClientProvider>
+    </StarknetConfig>
   );
 }
 
@@ -98,6 +115,7 @@ interface StoryParameters extends Parameters {
     upgrade?: UpgradeInterface;
   };
   preset?: string;
+  policies?: SessionPolicies;
 }
 
 export function useMockedConnection({
@@ -119,36 +137,8 @@ export function useMockedConnection({
     rpcUrl: "http://api.cartridge.gg/x/sepolia",
     chainId,
     chainName,
-    policies: {
-      contracts: {
-        [ETH_CONTRACT_ADDRESS]: {
-          methods: [
-            {
-              name: "Approve",
-              entrypoint: "approve",
-              description:
-                "Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
-            },
-            {
-              name: "Transfer",
-              entrypoint: "transfer",
-            },
-            {
-              name: "Mint",
-              entrypoint: "mint",
-            },
-            {
-              name: "Burn",
-              entrypoint: "burn",
-            },
-            {
-              name: "Allowance",
-              entrypoint: "allowance",
-            },
-          ],
-        },
-      },
-    },
+    policies: {},
+    theme: defaultTheme,
     prefunds: [],
     hasPrefundRequest: false,
     error: undefined,
@@ -170,30 +160,13 @@ export default preview;
 
 export function ControllerThemeProvider({
   children,
-  theme,
-}: PropsWithChildren<{ theme?: string }>) {
-  const preset = useMemo(() => {
-    if (!theme) return defaultTheme;
-    if (theme in controllerConfigs && controllerConfigs[theme].theme) {
-      return controllerConfigs[theme].theme;
-    }
-    return defaultTheme;
-  }, [theme]);
-
-  const controllerTheme = useMemo(
-    () => ({
-      name: preset.name,
-      icon: preset.icon,
-      cover: preset.cover,
-    }),
-    [preset],
-  );
-
-  useThemeEffect({ theme: preset, assetUrl: "" });
-  const chakraTheme = useChakraTheme(preset);
+  theme = defaultTheme,
+}: PropsWithChildren<{ theme?: ControllerTheme }>) {
+  useThemeEffect({ theme, assetUrl: "" });
+  const chakraTheme = useChakraTheme(theme);
 
   return (
-    <ControllerThemeContext.Provider value={controllerTheme}>
+    <ControllerThemeContext.Provider value={theme}>
       <ChakraProvider theme={chakraTheme}>{children}</ChakraProvider>
     </ControllerThemeContext.Provider>
   );

packages/keychain/src/components/ConfirmTransaction.tsx

@@ -51,7 +51,7 @@ export function ConfirmTransaction() {
 
     const entries = Object.entries(callPolicies.contracts || {});
     const txnsApproved = entries.every(([target, policy]) => {
-      const contract = policies.contracts?.[target];
+      const contract = policies?.contracts?.[target];
       if (!contract) return false;
       return policy.methods.every((method) =>
         contract.methods.some((m) => m.entrypoint === method.entrypoint),
@@ -63,9 +63,13 @@ export function ConfirmTransaction() {
     return txnsApproved && !account?.session(callPolicies);
   }, [callPolicies, policiesUpdated, policies, account]);
 
-  if (updateSession) {
+  if (updateSession && policies) {
     return (
-      <CreateSession isUpdate onConnect={() => setIsPoliciesUpdated(true)} />
+      <CreateSession
+        policies={policies}
+        isUpdate
+        onConnect={() => setIsPoliciesUpdated(true)}
+      />
     );
   }
 

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

@@ -3,7 +3,8 @@ import Controller from "utils/controller";
 import { ConnectionCtx } from "utils/connection";
 import { Prefund } from "@cartridge/controller";
 import { UpgradeInterface } from "hooks/upgrade";
-import { SessionPolicies } from "@cartridge/presets";
+import { ControllerTheme } from "@cartridge/presets";
+import { ParsedSessionPolicies } from "hooks/session";
 
 export const ConnectionContext = createContext<
   ConnectionContextValue | undefined
@@ -16,7 +17,8 @@ export type ConnectionContextValue = {
   rpcUrl?: string;
   chainId?: string;
   chainName?: string;
-  policies: SessionPolicies;
+  policies?: ParsedSessionPolicies;
+  theme: ControllerTheme;
   prefunds: Prefund[];
   hasPrefundRequest: boolean;
   error?: Error;

packages/keychain/src/components/Provider/index.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from "react";
+import { PropsWithChildren, useCallback } from "react";
 import { QueryClient, QueryClientProvider } from "react-query";
 import { useConnectionValue } from "hooks/connection";
 import { CartridgeAPIProvider } from "@cartridge/utils/api/cartridge";
@@ -7,16 +7,43 @@ import { PostHogProvider } from "posthog-js/react";
 import posthog from "posthog-js";
 import { ConnectionContext } from "./connection";
 import { ControllerThemeProvider } from "./theme";
+import { jsonRpcProvider, StarknetConfig, voyager } from "@starknet-react/core";
+import { sepolia, mainnet, Chain } from "@starknet-react/chains";
+import { constants, num } from "starknet";
 
 export function Provider({ children }: PropsWithChildren) {
   const connection = useConnectionValue();
+  const rpc = useCallback(
+    (chain: Chain) => {
+      let nodeUrl;
+      switch (num.toHex(chain.id)) {
+        case constants.StarknetChainId.SN_MAIN:
+          nodeUrl = process.env.NEXT_PUBLIC_RPC_MAINNET;
+          break;
+        case constants.StarknetChainId.SN_SEPOLIA:
+          nodeUrl = process.env.NEXT_PUBLIC_RPC_SEPOLIA;
+          break;
+        default:
+          nodeUrl = connection.rpcUrl;
+      }
+
+      return { nodeUrl };
+    },
+    [connection.rpcUrl],
+  );
 
   return (
     <CartridgeAPIProvider url={ENDPOINT}>
       <QueryClientProvider client={queryClient}>
         <ConnectionContext.Provider value={connection}>
           <ControllerThemeProvider>
-            <PostHogProvider client={posthog}>{children}</PostHogProvider>
+            <StarknetConfig
+              explorer={voyager}
+              chains={[sepolia, mainnet]}
+              provider={jsonRpcProvider({ rpc })}
+            >
+              <PostHogProvider client={posthog}>{children}</PostHogProvider>
+            </StarknetConfig>
           </ControllerThemeProvider>
         </ConnectionContext.Provider>
       </QueryClientProvider>

packages/keychain/src/components/Provider/theme.tsx

@@ -1,9 +1,4 @@
-import {
-  defaultTheme,
-  controllerConfigs,
-  ColorMode,
-  ControllerTheme,
-} from "@cartridge/presets";
+import { ColorMode } from "@cartridge/presets";
 import { useThemeEffect } from "@cartridge/ui-next";
 import { ChakraProvider, useColorMode } from "@chakra-ui/react";
 import { useConnection } from "hooks/connection";
@@ -12,21 +7,13 @@ import { useRouter } from "next/router";
 import { PropsWithChildren, useEffect, useMemo } from "react";
 
 export function ControllerThemeProvider({ children }: PropsWithChildren) {
-  const preset = useControllerThemePreset();
-  const controllerTheme = useMemo(
-    () => ({
-      name: preset.name,
-      icon: preset.icon,
-      cover: preset.cover,
-    }),
-    [preset],
-  );
+  const { theme } = useConnection();
 
-  useThemeEffect({ theme: preset, assetUrl: "" });
-  const chakraTheme = useChakraTheme(preset);
+  useThemeEffect({ theme, assetUrl: "" });
+  const chakraTheme = useChakraTheme(theme);
 
   return (
-    <ControllerThemeContext.Provider value={controllerTheme}>
+    <ControllerThemeContext.Provider value={theme}>
       <ChakraProvider theme={chakraTheme}>
         <ChakraTheme>{children}</ChakraTheme>
       </ChakraProvider>
@@ -45,36 +32,6 @@ function ChakraTheme({ children }: PropsWithChildren) {
   useEffect(() => {
     setColorMode(colorMode);
   }, [setColorMode, colorMode]);
-  return children;
-}
-
-export function useControllerThemePreset() {
-  const router = useRouter();
-  const { origin } = useConnection();
-
-  return useMemo(() => {
-    const themeParam = router.query.theme;
-    if (typeof themeParam === "undefined") {
-      return defaultTheme;
-    }
-    const val = decodeURIComponent(
-      Array.isArray(themeParam)
-        ? themeParam[themeParam.length - 1]
-        : themeParam,
-    );
 
-    if (
-      typeof val === "string" &&
-      val in controllerConfigs &&
-      controllerConfigs[val].theme
-    ) {
-      return controllerConfigs[val].theme;
-    }
-
-    try {
-      return JSON.parse(val) as ControllerTheme;
-    } catch {
-      return defaultTheme;
-    }
-  }, [router.query.theme, origin]);
+  return children;
 }