mocked keychain to test mobile integration

packages/keychain/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "tsc -b && vite build",
     "build:compat": "tsc -b && vite build",
     "preview": "vite preview --port 3001",

packages/keychain/src/components/app.tsx

@@ -45,11 +45,53 @@ import { useNavigation } from "@/context";
 import { Purchase } from "./purchase";
 import { PurchaseType } from "@/hooks/payments/crypto";
 
+import { Mocked } from "./mocked";
+import { constants } from "starknet";
+
 export function App() {
   const { navigate } = useNavigation();
   return (
     <Routes>
       <Route path="/" element={<Home />}>
+        <Route
+          path="mocked"
+          element={
+            <Mocked
+              title="Log in"
+              setSearchParams={(p) => {
+                p.set(
+                  "address",
+                  "0x0000000000000000000000000000000000000000000000000000000000000000",
+                );
+                p.set("chain_id", constants.StarknetChainId.SN_MAIN);
+                p.set(
+                  "rpc_url",
+                  encodeURIComponent(
+                    "https://api.cartridge.gg/x/starknet/mainnet",
+                  ),
+                );
+              }}
+            />
+          }
+        />
+        <Route
+          path="mocked/sign-message"
+          element={
+            <Mocked
+              title="Sign message"
+              setSearchParams={(p) => {
+                const sig = [
+                  "0x0000000000000000000000000000000000000000000000000000000000000000",
+                  "0x0000000000000000000000000000000000000000000000000000000000000000",
+                  "0x0000000000000000000000000000000000000000000000000000000000000000",
+                ];
+                for (const s of sig) {
+                  p.append("signature", s);
+                }
+              }}
+            />
+          }
+        />
         <Route path="/settings" element={<Settings />} />
         <Route path="/settings/recovery" element={<Recovery />} />
         <Route path="/settings/delegate" element={<Delegate />} />

packages/keychain/src/components/home.tsx

@@ -28,7 +28,10 @@ export function Home() {
     }
   }, [context?.type, posthog]);
 
-  // Popup flow authentication
+  if (pathname.startsWith("/mocked")) {
+    return <Outlet />;
+  }
+
   if (pathname.startsWith("/authenticate")) {
     return <Authenticate />;
   }

packages/keychain/src/components/mocked.tsx

@@ -0,0 +1,45 @@
+import { Button } from "@cartridge/ui";
+import { useCallback, useMemo } from "react";
+import { useSearchParams } from "react-router-dom";
+
+export function Mocked({
+  title,
+  setSearchParams,
+}: {
+  title: string;
+  setSearchParams: (searchParams: URLSearchParams) => void;
+}) {
+  const [searchParams] = useSearchParams();
+
+  const searchParamsObj = useMemo(() => {
+    const p: Record<string, string> = {};
+    for (const [key, val] of searchParams.entries()) {
+      p[key] = decodeURIComponent(val);
+    }
+    return p;
+  }, [searchParams]);
+
+  const onClick = useCallback(() => {
+    const callbackUrl = decodeURIComponent(searchParams.get("callback_uri")!);
+    if (!callbackUrl) {
+      throw new Error("callback_uri is required");
+    }
+    const url = new URL(callbackUrl);
+    setSearchParams(url.searchParams);
+
+    window.location.href = url.toString();
+  }, [searchParams, setSearchParams]);
+
+  return (
+    <div className="flex flex-col items-center justify-center h-screen p-4 gap-2">
+      <div className="w-full flex flex-col gap-2">
+        <div className="text-sm font-bold">Search params:</div>
+        <pre className="w-full overflow-x-auto border border-foreground-400 rounded p-2">
+          <code>{JSON.stringify(searchParamsObj, null, 2)}</code>
+        </pre>
+      </div>
+
+      <Button onClick={onClick}>{title}</Button>
+    </div>
+  );
+}

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

@@ -2,7 +2,7 @@ import { UpgradeProvider } from "@/components/provider/upgrade";
 import { useConnectionValue } from "@/hooks/connection";
 import { WalletsProvider } from "@/hooks/wallets";
 import { ENDPOINT } from "@/utils/graphql";
-import { Auth0Provider, Auth0ProviderOptions } from "@auth0/auth0-react";
+// import { Auth0Provider, Auth0ProviderOptions, } from "@auth0/auth0-react";
 import { CartridgeAPIProvider } from "@cartridge/ui/utils/api/cartridge";
 import { mainnet, sepolia } from "@starknet-react/chains";
 import {
@@ -54,34 +54,34 @@ export function Provider({ children }: PropsWithChildren) {
           <QueryClientProvider client={queryClient}>
             <ConnectionContext.Provider value={connection}>
               <TurnkeyProvider config={turnkeyConfig}>
-                <Auth0Provider {...auth0Config}>
-                  <WalletsProvider>
-                    <PostHogProvider>
-                      <ErrorBoundary>
-                        <UpgradeProvider controller={connection.controller}>
-                          <UIProvider>
-                            <StarknetConfig
-                              explorer={cartridge}
-                              chains={[sepolia, mainnet]}
-                              defaultChainId={defaultChainId}
-                              provider={jsonRpcProvider({ rpc })}
-                            >
-                              <TokensProvider>
-                                <ProfileMarketplaceProvider>
-                                  <ProfileArcadeProvider>
-                                    <ProfileDataProvider>
-                                      {children}
-                                    </ProfileDataProvider>
-                                  </ProfileArcadeProvider>
-                                </ProfileMarketplaceProvider>
-                              </TokensProvider>
-                            </StarknetConfig>
-                          </UIProvider>
-                        </UpgradeProvider>
-                      </ErrorBoundary>
-                    </PostHogProvider>
-                  </WalletsProvider>
-                </Auth0Provider>
+                {/* <Auth0Provider {...auth0Config}> */}
+                <WalletsProvider>
+                  <PostHogProvider>
+                    <ErrorBoundary>
+                      <UpgradeProvider controller={connection.controller}>
+                        <UIProvider>
+                          <StarknetConfig
+                            explorer={cartridge}
+                            chains={[sepolia, mainnet]}
+                            defaultChainId={defaultChainId}
+                            provider={jsonRpcProvider({ rpc })}
+                          >
+                            <TokensProvider>
+                              <ProfileMarketplaceProvider>
+                                <ProfileArcadeProvider>
+                                  <ProfileDataProvider>
+                                    {children}
+                                  </ProfileDataProvider>
+                                </ProfileArcadeProvider>
+                              </ProfileMarketplaceProvider>
+                            </TokensProvider>
+                          </StarknetConfig>
+                        </UIProvider>
+                      </UpgradeProvider>
+                    </ErrorBoundary>
+                  </PostHogProvider>
+                </WalletsProvider>
+                {/* </Auth0Provider> */}
               </TurnkeyProvider>
             </ConnectionContext.Provider>
           </QueryClientProvider>
@@ -107,10 +107,10 @@ const turnkeyConfig = {
   iframeUrl: import.meta.env.VITE_TURNKEY_IFRAME_URL,
 };
 
-const auth0Config: Auth0ProviderOptions = {
-  domain: import.meta.env.VITE_AUTH0_DOMAIN!,
-  clientId: import.meta.env.VITE_AUTH0_CLIENT_ID!,
-  authorizationParams: {
-    redirect_uri: window.location.origin,
-  },
-};
+// const auth0Config: Auth0ProviderOptions = {
+//   domain: import.meta.env.VITE_AUTH0_DOMAIN!,
+//   clientId: import.meta.env.VITE_AUTH0_CLIENT_ID!,
+//   authorizationParams: {
+//     redirect_uri: window.location.origin,
+//   },
+// };