fix: add worldcoin biometric full flow

Author: gabin54

space-config/synaps/main.ts

@@ -14,7 +14,7 @@ export const synapsConfigMain: SpaceConfig = {
   },
   apps: [
     {
-      type: "zkCustom",
+      type: "custom",
       metadata: {
         name: "Liveness Verification",
         description: "Perform liveness verification with Synaps to join the 'Proof of Liveness' Data Group and access Sismo Apps that request to be part of it. This liveness session stores no personal data.",
@@ -29,12 +29,10 @@ export const synapsConfigMain: SpaceConfig = {
         authRequests: [{ authType: 0 }],
       },
       templateConfig: {
-        extraData: {
-          api: "https://synaps-integration.vercel.app/api/proof-of-liveness",
-          congratulationsMessage: {
-            title: "Congratulations",
-            description: "You have successfully proven your liveliness. Your proof of liveliness will be available in your Sismo Vault within 24 hours.",
-          }
+        api: "https://synaps-integration.vercel.app/api/proof-of-liveness",
+        congratulationsMessage: {
+          title: "Congratulations",
+          description: "You have successfully proven your liveliness. Your proof of liveliness will be available in your Sismo Vault within 24 hours.",
         }
       }
     }

space-config/synaps/proof-of-liveness/components/Congratulations.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { ZkCustomAppConfig } from "@/space-config/types";
+import { CustomAppConfig } from "@/space-config/types";
 import Button3D from "@/src/ui/Button3D";
 import { useRouter } from "next/navigation";
 import React from "react";
@@ -28,7 +28,7 @@ const Subtitle = styled.div`
 `
 
 type Props = {
-    app: ZkCustomAppConfig
+    app: CustomAppConfig
 }
 
 export default function Congratulations({ app }: Props): JSX.Element {

space-config/synaps/proof-of-liveness/components/ProveEligibility.tsx

@@ -6,7 +6,7 @@ import { styled } from "styled-components";
 import HoverTooltip from "@/src/ui/HoverTooltip";
 import { Info } from "phosphor-react";
 import colors from "@/src/themes/colors";
-import { ZkCustomAppConfig } from "@/space-config/types";
+import { CustomAppConfig } from "@/space-config/types";
 
 const Container = styled.div``;
 
@@ -38,7 +38,7 @@ const Bold = styled.span`
 `;
 
 type Props = {
-  app: ZkCustomAppConfig;
+  app: CustomAppConfig;
   onEligible: (response) => void;
 };
 

space-config/synaps/proof-of-liveness/index.tsx

@@ -8,10 +8,10 @@ import ProveEligibility from "./components/ProveEligibility";
 import Button from "@/src/ui/Button";
 import SynapsModal from "./components/SynapsModal";
 import { synapsConfigMain } from "@/space-config/synaps/main";
-import { ZkCustomAppConfig } from "@/space-config/types";
+import { CustomAppConfig } from "@/space-config/types";
 import Button3D from "@/src/ui/Button3D";
 import { useRouter } from "next/navigation";
-import { ZkCustomAppContainer } from "@/src/components/ZkCustomAppContainer";
+import { CustomAppContainer } from "@/src/components/CustomAppContainer";
 
 
 const AlreadyRegistered = styled.div`
@@ -41,9 +41,9 @@ const ErrorMsg = styled.div`
 `
 
 export default function SynapsProofOfLivenessCustomApp(): JSX.Element {
-    const app = synapsConfigMain.apps[0] as ZkCustomAppConfig;
+    const app = synapsConfigMain.apps[0] as CustomAppConfig;
     const router = useRouter();
-    const api = app.templateConfig.extraData.api;
+    const api = app.templateConfig.api;
     const [response, setResponse] = useState();
     const [alreadySubscribed, setAlreadySubscribed] = useState(false);
     const [domReady, setDomReady] = React.useState(false);
@@ -104,7 +104,7 @@ export default function SynapsProofOfLivenessCustomApp(): JSX.Element {
 
     return <>
         <SynapsModal sessionId={sessionId} isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} onFinish={() => onFinish()}/>
-        <ZkCustomAppContainer>
+        <CustomAppContainer>
             {
                 !finished && <>
                     <Section number={1} isOpen={!response} title="Sign in with Sismo" style={{marginBottom: 16}} success={Boolean(response)}>
@@ -143,6 +143,6 @@ export default function SynapsProofOfLivenessCustomApp(): JSX.Element {
             {
                 finished && <Congratulations app={app}/>
             }
-        </ZkCustomAppContainer>
+        </CustomAppContainer>
     </>;
 }

space-config/types.ts

@@ -26,7 +26,7 @@ export type AppConfig =
   | ExternalAppConfig
   | ZkBadgeAppConfig
   | ZkTelegramBotAppConfig
-  | ZkCustomAppConfig
+  | CustomAppConfig
 
 type SocialType = "twitter" | "discord" | "link" | "github" | "telegram";
 
@@ -87,11 +87,9 @@ export type ZkDropAppConfig = AppCommonConfig & {
   };
 };
 
-export type ZkCustomAppConfig = AppCommonConfig & {
-  type: "zkCustom";
-  templateConfig: {
-    extraData: any;
-  }
+export type CustomAppConfig = AppCommonConfig & {
+  type: "custom";
+  templateConfig: any
 };
 
 export type ZkBadgeAppConfig = AppCommonConfig & {

space-config/worldcoin/main.ts

@@ -14,7 +14,7 @@ export const worldcoinConfigMain: SpaceConfig = {
   },
   apps: [
     {
-      type: "zkCustom",
+      type: "custom",
       metadata: {
         name: "Proof of personhood",
         description: "World ID is a digital passport that lets you prove you are a unique and real person while remaining anonymous.",
@@ -29,12 +29,10 @@ export const worldcoinConfigMain: SpaceConfig = {
         authRequests: [{ authType: 0 }],
       },
       templateConfig: {
-        extraData: {
-          api: "https://worldcoin-app-backend.vercel.app/api/proof-of-personhood",
-          congratulationsMessage: {
-            title: "Congratulations",
-            description: "You have successfully proven your personhood. Your proof of personhood will be available in your Sismo Vault within 24 hours.",
-          }
+        api: "https://worldcoin-app-backend.vercel.app/api/proof-of-personhood",
+        congratulationsMessage: {
+          title: "Congratulations",
+          description: "You have successfully proven your personhood. Your proof of personhood will be available in your Sismo Vault within 24 hours.",
         }
       }
     }

space-config/worldcoin/proof-of-personhood/components/Congratulations.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { ZkCustomAppConfig } from "@/space-config/types";
+import { CustomAppConfig } from "@/space-config/types";
 import Button3D from "@/src/ui/Button3D";
 import { useRouter } from "next/navigation";
 import React from "react";
@@ -28,7 +28,7 @@ const Subtitle = styled.div`
 `
 
 type Props = {
-    app: ZkCustomAppConfig
+    app: CustomAppConfig
 }
 
 export default function Congratulations({ app }: Props): JSX.Element {

space-config/worldcoin/proof-of-personhood/components/ProveEligibility.tsx

@@ -6,7 +6,7 @@ import { styled } from "styled-components";
 import HoverTooltip from "@/src/ui/HoverTooltip";
 import { Info } from "phosphor-react";
 import colors from "@/src/themes/colors";
-import { ZkCustomAppConfig } from "@/space-config/types";
+import { CustomAppConfig } from "@/space-config/types";
 
 const Container = styled.div``;
 
@@ -38,7 +38,7 @@ const Bold = styled.span`
 `;
 
 type Props = {
-  app: ZkCustomAppConfig;
+  app: CustomAppConfig;
   onEligible: (response) => void;
 };
 

space-config/worldcoin/proof-of-personhood/components/Section.tsx

@@ -7,6 +7,7 @@ const Container = styled.div`
     border: 1px solid #4F5B7E;
     border-radius: 4px;
     padding: 16px;
+    position: relative;
 `
 
 

space-config/worldcoin/proof-of-personhood/index.tsx

@@ -6,26 +6,12 @@ import Congratulations from "./components/Congratulations";
 import Section from "./components/Section";
 import ProveEligibility from "./components/ProveEligibility";
 import Button from "@/src/ui/Button";
-import { ZkCustomAppConfig } from "@/space-config/types";
+import { CustomAppConfig } from "@/space-config/types";
 import Button3D from "@/src/ui/Button3D";
 import { useRouter } from "next/navigation";
 import { worldcoinConfigMain } from "../main";
 import { CredentialType, IDKitWidget } from "@worldcoin/idkit";
-import { ZkCustomAppContainer } from "@/src/components/ZkCustomAppContainer";
-
-const Title = styled.div`
-    margin-bottom: 16px;
-    font-family: ${props => props.theme.fonts.semibold};
-    color: ${props => props.theme.colors.neutral1};
-    font-size: 32px;
-`
-
-const Description = styled.div`
-    margin-bottom: 32px;
-    font-family: ${props => props.theme.fonts.regular};
-    color: ${props => props.theme.colors.neutral3};
-    font-size: 16px;
-`
+import { CustomAppContainer } from "@/src/components/CustomAppContainer";
 
 const AlreadyRegistered = styled.div`
     color: ${props => props.theme.colors.neutral1};
@@ -40,10 +26,6 @@ const AlreadyRegistered = styled.div`
     border-radius: 4px;
 `
 
-const Content = styled.div`
-    max-width: 580px;
-`
-
 const Bottom = styled.div`
     width: 100%;
     display: flex;
@@ -55,25 +37,35 @@ const Bottom = styled.div`
 const ErrorMsg = styled.div`
     color: ${props => props.theme.colors.error};
     font-family: ${props => props.theme.fonts.regular};
+    position: absolute;
+    bottom: -35px;
+    left: 0px;
+`
+
+const Verifications = styled.div`
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    margin-top: 24px;
 `
 
 export default function WorldcoinProofOfPersonhoodCustomApp(): JSX.Element {
     const router = useRouter();
-    const app = worldcoinConfigMain.apps[0] as ZkCustomAppConfig;
-    const api = app.templateConfig.extraData.api;
+    const app = worldcoinConfigMain.apps[0] as CustomAppConfig;
+    const api = app.templateConfig.api;
     const [alreadySubscribed, setAlreadySubscribed] = useState(false);
     const [domReady, setDomReady] = React.useState(false);
-    const [verifying, setVerifying] = useState(false);
     const [finished, setFinished] = useState(false);
     const [error, setError] = useState(null);
-    const [loading, setLoading] = useState(false);
     const [redirect, setRedirect] = useState(null);
+    const [verifyingOrb, setVerifyingOrb] = useState(false);
+    const [verifyingPhone, setVerifyingPhone] = useState(false);
 
     const [sismoResponse, setSismoResponse] = useState(null);
 
-    const onFinish = async (worldcoinResult) => {
-        setVerifying(true);
-        setLoading(true);
+    const onFinish = async (worldcoinResult, type: "orb" | "phone") => {
+        if (type === "orb") setVerifyingOrb(true);
+        if (type === "phone") setVerifyingPhone(true);
         const body = JSON.stringify({
             result: worldcoinResult,
             response: sismoResponse
@@ -82,21 +74,20 @@ export default function WorldcoinProofOfPersonhoodCustomApp(): JSX.Element {
             method: "POST",
             body
         });
-        setVerifying(false);
-        if (!res.ok) {
-            throw new Error("Error while verifying Worldcoin proof");
-        }
+        setVerifyingOrb(false);
+        setVerifyingPhone(false);
         const data = await res.json();
+        
         if (data.success) {
             setFinished(true);
         }
 
         switch (data.code) {
             case "sismo-response-invalid":
-                setError("Server error [Sismo response invalid]. Please contact us or retry later.");
+                setError("Server error: Sismo response invalid. Please contact us or retry later.");
                 break;
             case "worldcoin-result-invalid":
-                setError("Server error [Worldcoin result invalid]. Please contact us or retry later.");
+                setError("Server error: Worldcoin result invalid. Please contact us or retry later.");
                 break;
             case "worldcoin-proof-already-verified":
                 setAlreadySubscribed(true);
@@ -132,7 +123,7 @@ export default function WorldcoinProofOfPersonhoodCustomApp(): JSX.Element {
 
     if (!domReady) return;
 
-    return <ZkCustomAppContainer>
+    return <CustomAppContainer>
             {
                 !finished && <>
                     <Section number={1} isOpen={!sismoResponse} title="Sign in with Sismo" style={{marginBottom: 16}} success={Boolean(sismoResponse)}>
@@ -145,28 +136,39 @@ export default function WorldcoinProofOfPersonhoodCustomApp(): JSX.Element {
                                 You already registered.
                             </AlreadyRegistered>
                             :
-                            <>
+                            <Verifications>
                                 <IDKitWidget
                                     app_id="app_staging_9aa79aedb09dc9224e0b85c36133278b"
-                                    action="proof-of-personhood"
+                                    action="proof-of-personhood-orb"
                                     signal="main"
-                                    credential_types={[CredentialType.Phone, CredentialType.Orb]}
-                                    onSuccess={(result) => onFinish(result)}
+                                    credential_types={[CredentialType.Orb]}
+                                    onSuccess={(result) => onFinish(result, "orb")}
                                 >
-                                    {({ open }) => <Button onClick={open} loading={verifying || loading} style={{ width: "100%", marginTop: 16}}>
-                                        {verifying ? "Verifying..." : "Prove you are unique" }
+                                    {({ open }) => <Button onClick={open} loading={verifyingOrb} style={{ width: "100%" }}>
+                                        {verifyingOrb ? "Verifying Biometric..." : "Biometric verification" }
                                     </Button>}
                                 </IDKitWidget>
-                                {
-                                    error &&
-                                    <ErrorMsg>
-                                        {error}
-                                    </ErrorMsg>
-                                }
-                            </>
+                                {/* <IDKitWidget
+                                    app_id="app_staging_9aa79aedb09dc9224e0b85c36133278b"
+                                    action="proof-of-personhood-phone"
+                                    signal="main"
+                                    credential_types={[CredentialType.Phone]}
+                                    onSuccess={(result) => onFinish(result, "phone")}
+                                >
+                                    {({ open }) => <Button onClick={open} loading={verifyingPhone} style={{ width: "100%" }}>
+                                        {verifyingPhone ? "Verifying Biometric..." : "Phone verification" }
+                                    </Button>}
+                                </IDKitWidget> */}
+                            </Verifications>
+                        }
+                        {
+                            error &&
+                            <ErrorMsg>
+                                {error}
+                            </ErrorMsg>
                         }
                     </Section>
-                    {Boolean(sismoResponse) && 
+                    {alreadySubscribed && 
                         <Bottom>
                             <Button3D onClick={() => redirect ? window.location.href : router.push(`/${worldcoinConfigMain.metadata.slug}`)} secondary>
                                 { redirect ? "Back to the Vault App" : "Back to the space" }
@@ -178,5 +180,5 @@ export default function WorldcoinProofOfPersonhoodCustomApp(): JSX.Element {
             {
                 finished && <Congratulations app={app}/>
             }
-    </ZkCustomAppContainer>;
+    </CustomAppContainer>;
 }