fix: add worldcoin biometric full flow

sismo-core · Jul 5, 2023 · e4c0d3c · e4c0d3c
1 parent e13f86e
commit e4c0d3c
Show file tree

Hide file tree

Showing 15 changed files with 145 additions and 122 deletions.
diff --git a/space-config/synaps/main.ts b/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.",
         }
       }
     }

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,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>
     </>;
 }
diff --git a/space-config/types.ts b/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 & {

diff --git a/space-config/worldcoin/main.ts b/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.",
         }
       }
     }

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;
 `