fix: add worldcoin biometric full flow

sismo-core · Jul 6, 2023 · 5da596a · 5da596a
1 parent 52777fe
commit 5da596a
Show file tree

Hide file tree

Showing 16 changed files with 253 additions and 131 deletions.
diff --git a/space-config/synaps/main.ts b/space-config/synaps/main.ts
@@ -6,21 +6,19 @@ export const synapsConfigMain: SpaceConfig = {
     slug: "synaps",
     name: "Synaps",
     description: "This Space is a tribute to users willing to prove their liveness with Synaps - a crypto-native identity verification provider. Proof of Liveness is performed through a liveness verification session, where a privacy-preserving encrypted vector graph is generated. It contains no biometric data and cannot be used to recreate your face.",
-    profileImage: "synaps_pfp.png",
-    coverImage: "synaps_cover.png",
+    image: "synaps_pfp.png",
   },
   options: {
     hidden: true
   },
   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.",
         tags: ["Liveness"],
         image: "synaps_liveness_img.png",
-        ctaText: "Prove your Liveness",
         slug: "proof-of-liveness",
         createdAt: new Date("2023-07-05T18:00")
       },
@@ -29,12 +27,11 @@ 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.",
-          }
+        step2CtaText: "Prove your Liveness",
+        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.",
         }
       }
     }

diff --git a/space-config/synaps/proof-of-liveness/components/Congratulations.tsx b/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,18 +28,18 @@ const Subtitle = styled.div`
 `
 
 type Props = {
-    app: ZkCustomAppConfig
+    app: CustomAppConfig
 }
 
 export default function Congratulations({ app }: Props): JSX.Element {
     const router = useRouter();
 
     return <Container>
         <Title style={{marginBottom: 16}}>
-            {app?.templateConfig?.extraData?.congratulationsMessage?.title}
+            {app?.templateConfig?.congratulationsMessage?.title}
         </Title>
         <Subtitle>
-            {app?.templateConfig?.extraData?.congratulationsMessage?.description}
+            {app?.templateConfig?.congratulationsMessage?.description}
         </Subtitle>
         <Button3D onClick={() => router.push("/synaps")} secondary>
             Back to the space

diff --git a/space-config/synaps/proof-of-liveness/components/ProveEligibility.tsx b/space-config/synaps/proof-of-liveness/components/ProveEligibility.tsx
@@ -4,9 +4,9 @@ import { AuthType, SismoConnectButton } from "@sismo-core/sismo-connect-react";
 import React from "react";
 import { styled } from "styled-components";
 import HoverTooltip from "@/src/ui/HoverTooltip";
-import { Info } from "phosphor-react";
+import { Info, LockSimpleOpen } 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``;
 
@@ -33,12 +33,24 @@ const AuthItem = styled.div`
   white-space: nowrap;
 `;
 
+const RequirementTitle = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+  color: ${(props) => props.theme.colors.neutral4};
+  font-size: 14px;
+  font-family: ${(props) => props.theme.fonts.medium};
+  line-height: 20px;
+  margin-top: 24px;
+`;
+
 const Bold = styled.span`
   font-family: ${(props) => props.theme.fonts.bold};
 `;
 
 type Props = {
-  app: ZkCustomAppConfig;
+  app: CustomAppConfig;
   onEligible: (response) => void;
 };
 
@@ -53,12 +65,16 @@ export default function ProveEligibility({
 
   return (
     <Container>
+      <RequirementTitle>
+        <LockSimpleOpen size={16} />
+        Requirements
+      </RequirementTitle>
       <Eligibility style={{ marginBottom: 24 }}>
         <AuthItem>
-          Share: <Bold>Vault Id</Bold>
+          <Bold>User Id</Bold>
           <HoverTooltip
             text={
-              "Vault Id is an anonymous identifier that indicates a unique user on a specific app. Sharing your Vault ID only reveals that you are a unique user and authenticates that you own a Data Vault."
+              "User Id is an anonymous identifier that indicates a unique user on a specific app. Sharing your User Id only reveals that you are a unique user and authenticates that you own a Data Vault."
             }
             width={300}
             style={{ marginLeft: -4 }}

diff --git a/space-config/synaps/proof-of-liveness/index.tsx b/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,13 +104,13 @@ 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)}>
                         <ProveEligibility app={app} onEligible={(_response) => setResponse(_response)}/>
                     </Section>
-                    <Section number={2} isOpen={Boolean(response)} title={app?.metadata?.ctaText} success={alreadySubscribed}>
+                    <Section number={2} isOpen={Boolean(response)} title={app?.templateConfig?.step2CtaText} success={alreadySubscribed}>
                         {
                             alreadySubscribed ?
                             <AlreadyRegistered style={{marginTop: 24}}>
@@ -143,6 +143,6 @@ export default function SynapsProofOfLivenessCustomApp(): JSX.Element {
             {
                 finished && <Congratulations app={app}/>
             }
-        </ZkCustomAppContainer>
+        </CustomAppContainer>
     </>;
 }
diff --git a/space-config/types.ts b/space-config/types.ts
@@ -25,7 +25,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 & {

diff --git a/space-config/worldcoin/main.ts b/space-config/worldcoin/main.ts
@@ -6,21 +6,19 @@ export const worldcoinConfigMain: SpaceConfig = {
     slug: "worldcoin",
     name: "Worldcoin",
     description: "Worldcoin is building the world's largest identity and financial network as a public utility, giving ownership to everyone.",
-    profileImage: "worldcoin_pfp.jpeg",
-    coverImage: "worldcoin_cover.jpeg",
+    image: "worldcoin_pfp.jpeg",
   },
   options: {
     hidden: false,
   },
   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.",
         tags: ["Proof of personhood"],
         image: "proof-of-personhood.png",
-        ctaText: "Prove your are unique",
         slug: "proof-of-personhood",
         createdAt: new Date("2023-07-05T18:00")
       },
@@ -29,12 +27,11 @@ 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.",
-          }
+        step2CtaText: "Prove your are unique",
+        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.",
         }
       }
     }

diff --git a/space-config/worldcoin/proof-of-personhood/components/Congratulations.tsx b/space-config/worldcoin/proof-of-personhood/components/Congratulations.tsx
@@ -1,8 +1,6 @@
 'use client'
 
-import { ZkCustomAppConfig } from "@/space-config/types";
-import Button3D from "@/src/ui/Button3D";
-import { useRouter } from "next/navigation";
+import { CustomAppConfig } from "@/space-config/types";
 import React from "react";
 import { styled } from "styled-components";
 
@@ -28,21 +26,16 @@ const Subtitle = styled.div`
 `
 
 type Props = {
-    app: ZkCustomAppConfig
+    app: CustomAppConfig;
 }
 
 export default function Congratulations({ app }: Props): JSX.Element {
-    const router = useRouter();
-
     return <Container>
         <Title style={{marginBottom: 16}}>
-            {app?.templateConfig?.extraData?.congratulationsMessage?.title}
+            {app?.templateConfig?.congratulationsMessage?.title}
         </Title>
         <Subtitle>
-            {app?.templateConfig?.extraData?.congratulationsMessage?.description}
+            {app?.templateConfig?.congratulationsMessage?.description}
         </Subtitle>
-        <Button3D onClick={() => router.push("/synaps")} secondary>
-            Back to the space
-        </Button3D>
     </Container>;
 }
diff --git a/space-config/worldcoin/proof-of-personhood/components/ProveEligibility.tsx b/space-config/worldcoin/proof-of-personhood/components/ProveEligibility.tsx
@@ -4,19 +4,31 @@ import { AuthType, SismoConnectButton } from "@sismo-core/sismo-connect-react";
 import React from "react";
 import { styled } from "styled-components";
 import HoverTooltip from "@/src/ui/HoverTooltip";
-import { Info } from "phosphor-react";
+import { Info, LockSimpleOpen } 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``;
 
 const Eligibility = styled.div`
-  margin-top: 22px;
-  border-top: 1px solid #262e45;
-  border-bottom: 1px solid #262e45;
+  margin-top: 7px;
+  border-top: 1px solid ${(props) => props.theme.colors.neutral7};
+  border-bottom: 1px solid ${(props) => props.theme.colors.neutral7};
   padding: 10px 0px;
 `;
 
+const RequirementTitle = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+  color: ${(props) => props.theme.colors.neutral4};
+  font-size: 14px;
+  font-family: ${(props) => props.theme.fonts.medium};
+  line-height: 20px;
+  margin-top: 24px;
+`;
+
 const ButtonContainer = styled.div`
   display: flex;
   justify-content: center;
@@ -31,14 +43,15 @@ const AuthItem = styled.div`
   font-family: ${(props) => props.theme.fonts.regular};
   gap: 8px;
   white-space: nowrap;
+  padding: 0px 16px;
 `;
 
 const Bold = styled.span`
   font-family: ${(props) => props.theme.fonts.bold};
 `;
 
 type Props = {
-  app: ZkCustomAppConfig;
+  app: CustomAppConfig;
   onEligible: (response) => void;
 };
 
@@ -53,12 +66,16 @@ export default function ProveEligibility({
 
   return (
     <Container>
+      <RequirementTitle>
+        <LockSimpleOpen size={16} />
+        Requirements
+      </RequirementTitle>
       <Eligibility style={{ marginBottom: 24 }}>
         <AuthItem>
-          Share: <Bold>Vault Id</Bold>
+          <Bold>User Id</Bold>
           <HoverTooltip
             text={
-              "Vault Id is an anonymous identifier that indicates a unique user on a specific app. Sharing your Vault ID only reveals that you are a unique user and authenticates that you own a Data Vault."
+              "User Id is an anonymous identifier that indicates a unique user on a specific app. Sharing your User Id only reveals that you are a unique user and authenticates that you own a Data Vault."
             }
             width={300}
             style={{ marginLeft: -4 }}

diff --git a/space-config/worldcoin/proof-of-personhood/components/Section.tsx b/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;
 `