Signup only polls if popup (#609)

cartridge-gg · Aug 26, 2024 · a07a134 · a07a134
1 parent 8e5a29c
commit a07a134
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 25 deletions.
diff --git a/packages/keychain/src/components/connect/Signup.tsx b/packages/keychain/src/components/connect/Signup.tsx
@@ -2,7 +2,10 @@ import { Field } from "@cartridge/ui";
 import { Button } from "@chakra-ui/react";
 import { Container, Footer, Content } from "components/layout";
 import { useCallback, useEffect, useState } from "react";
-import { useAccountQuery } from "generated/graphql";
+import {
+  FinalizeRegistrationMutation,
+  useAccountQuery,
+} from "generated/graphql";
 import Controller from "utils/controller";
 import { PopupCenter } from "utils/url";
 import { SignupProps } from "./types";
@@ -27,6 +30,7 @@ export function Signup({
   const { deployRequest } = useDeploy();
   const [error, setError] = useState<Error>();
   const [isRegistering, setIsRegistering] = useState(false);
+  const [isPopup, setIsPopup] = useState(false);
   const [usernameField, setUsernameField] = useState({
     value: prefilledName,
     error: undefined,
@@ -60,6 +64,37 @@ export function Signup({
     }
   }, [username]);
 
+  const initController = useCallback(
+    async (
+      username: string,
+      address: string,
+      credentialId: string,
+      publicKey: string,
+    ) => {
+      if (chainId !== constants.StarknetChainId.SN_MAIN && !hasPrefundRequest) {
+        await deployRequest(username);
+      }
+
+      const controller = new Controller({
+        appId: origin,
+        chainId,
+        rpcUrl,
+        address,
+        username,
+        publicKey,
+        credentialId,
+      });
+
+      controller.store();
+      setController(controller);
+
+      if (onSuccess) {
+        onSuccess();
+      }
+    },
+    [origin, chainId, rpcUrl, onSuccess],
+  );
+
   const doPopup = useCallback(() => {
     const searchParams = new URLSearchParams(window.location.search);
     searchParams.set("name", encodeURIComponent(usernameField.value));
@@ -71,9 +106,11 @@ export function Signup({
       480,
       640,
     );
+
+    setIsPopup(true);
   }, [usernameField]);
 
-  const onSubmit = useCallback(() => {
+  const onSubmit = useCallback(async () => {
     setError(undefined);
     setIsRegistering(true);
 
@@ -85,7 +122,22 @@ export function Signup({
       return;
     }
 
-    doSignup(usernameField.value).catch((e) => {
+    try {
+      const data: FinalizeRegistrationMutation = await doSignup(
+        usernameField.value,
+      );
+      const {
+        finalizeRegistration: {
+          id: username,
+          contractAddress: address,
+          credentials: { webauthn },
+        },
+      } = data;
+
+      const { id: credentialId, publicKey } = webauthn[0];
+
+      initController(username, address, credentialId, publicKey);
+    } catch (e) {
       // Backward compat with iframes without this permission-policy
       if (e.message.includes("publickey-credentials-create")) {
         doPopup();
@@ -94,14 +146,14 @@ export function Signup({
 
       setIsRegistering(false);
       setUsernameField((u) => ({ ...u, error: e.message }));
-    });
+    }
   }, [usernameField, doPopup]);
 
-  // for polling approach when iframe
+  // for polling approach when popup
   useAccountQuery(
     { id: usernameField.value },
     {
-      enabled: isRegistering,
+      enabled: isPopup,
       refetchIntervalInBackground: true,
       refetchOnWindowFocus: false,
       staleTime: 10000000,
@@ -125,22 +177,7 @@ export function Signup({
             },
           } = data;
 
-          const controller = new Controller({
-            appId: origin,
-            chainId,
-            rpcUrl,
-            address,
-            username: usernameField.value,
-            publicKey,
-            credentialId,
-          });
-
-          controller.store();
-          setController(controller);
-
-          if (onSuccess) {
-            onSuccess();
-          }
+          initController(username, address, credentialId, publicKey);
         } catch (e) {
           setError(e);
         }

diff --git a/packages/keychain/src/generated/graphql.ts b/packages/keychain/src/generated/graphql.ts
@@ -1472,6 +1472,7 @@ export type Deployment = Node & {
   logs: Logs;
   project: Scalars["String"];
   region: Scalars["String"];
+  regions: Array<Scalars["String"]>;
   service: Service;
   serviceID: Scalars["ID"];
   spinDownAt?: Maybe<Scalars["Time"]>;
@@ -2501,6 +2502,7 @@ export type MutationCreateAchievementArgs = {
 
 export type MutationCreateDeploymentArgs = {
   name: Scalars["String"];
+  regions?: InputMaybe<Array<Scalars["String"]>>;
   service: CreateServiceInput;
   tier?: InputMaybe<DeploymentTier>;
   wait?: InputMaybe<Scalars["Boolean"]>;
@@ -4667,6 +4669,14 @@ export type FinalizeRegistrationMutation = {
     __typename?: "Account";
     id: string;
     contractAddress?: string | null;
+    credentials: {
+      __typename?: "Credentials";
+      webauthn?: Array<{
+        __typename?: "WebauthnCredential";
+        id: string;
+        publicKey: string;
+      }> | null;
+    };
   };
 };
 
@@ -4857,6 +4867,12 @@ export const FinalizeRegistrationDocument = `
   finalizeRegistration(credentials: $credentials) {
     id
     contractAddress
+    credentials {
+      webauthn {
+        id
+        publicKey
+      }
+    }
   }
 }
     `;

diff --git a/packages/keychain/src/hooks/account.ts b/packages/keychain/src/hooks/account.ts
@@ -4,6 +4,7 @@ import {
   FinalizeLoginDocument,
   FinalizeRegistrationDocument,
   FinalizeLoginMutation,
+  FinalizeRegistrationMutation,
 } from "generated/graphql";
 
 import { client, ENDPOINT } from "utils/graphql";
@@ -61,7 +62,9 @@ export const onCreateBegin = async (name: string): Promise<Credentials> => {
   return credentials;
 };
 
-export const onCreateFinalize = (credentials: Credentials) => {
+export const onCreateFinalize = (
+  credentials: Credentials,
+): Promise<FinalizeRegistrationMutation> => {
   return client.request(FinalizeRegistrationDocument, {
     credentials: JSON.stringify({
       id: credentials.id,
@@ -146,9 +149,11 @@ export const doXHR = async (json: string): Promise<any> => {
   });
 };
 
-export async function doSignup(name: string) {
+export async function doSignup(
+  name: string,
+): Promise<FinalizeRegistrationMutation> {
   const credentials: Credentials = await onCreateBegin(name);
-  await onCreateFinalize(credentials);
+  return onCreateFinalize(credentials);
 }
 
 export async function doLogin(name: string, credentialId: string) {

diff --git a/packages/keychain/src/pages/create.graphql b/packages/keychain/src/pages/create.graphql
@@ -6,6 +6,12 @@ mutation FinalizeRegistration($credentials: String!) {
   finalizeRegistration(credentials: $credentials) {
     id
     contractAddress
+    credentials {
+      webauthn {
+        id
+        publicKey
+      }
+    }
   }
 }