feat: add zk custom app

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev -p 3003",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
@@ -14,10 +14,13 @@
     "@google-cloud/local-auth": "^2.1.1",
     "@sismo-core/sismo-connect-react": "^0.0.16",
     "@sismo-core/sismo-connect-server": "^0.0.16",
+    "@synaps-io/react-verify": "^1.0.3",
     "@types/luxon": "^3.3.0",
-    "@types/node": "18.16.1",
+    "@types/node": "^20.3.3",
     "@types/react": "18.2.0",
     "@types/react-dom": "18.2.1",
+    "@worldcoin/id": "^0.9.2",
+    "@worldcoin/idkit": "^0.5.1",
     "axios": "^1.4.0",
     "bufferutil": "^4.0.7",
     "classnames": "^2.3.2",

space-config/index.ts

@@ -9,13 +9,17 @@ import { sismoConfigDemo } from "@/space-config/sismo/demo";
 import { privacyIsNormalConfigDemo } from "@/space-config/privacy-is-normal/demo";
 import { aaveChanInitiativeConfigDemo } from "@/space-config/aave-chan-initiative/demo";
 import { cowSwapConfigDemo } from "@/space-config/cow-swap/demo";
+import { synapsConfigMain } from "./synaps/main";
+import { worldcoinConfigMain } from "./worldcoin/main";
 
 export const configsMain: SpaceConfig[] = [
   theMergeContributorsConfigMain,
   privacyIsNormalConfigMain,
   aaveChanInitiativeConfigMain,
   sismoConfigMain,
   cowSwapConfigMain,
+  synapsConfigMain,
+  worldcoinConfigMain
 ];
 
 export const configsDemo: SpaceConfig[] = [

space-config/synaps/main.ts

@@ -0,0 +1,43 @@
+// add an images folder in your space folder if you would like Sismo to host your images
+import { SpaceConfig } from "../types";
+
+export const synapsConfigMain: SpaceConfig = {
+  metadata: {
+    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",
+  },
+  options: {
+    hidden: true
+  },
+  apps: [
+    {
+      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")
+      },
+      sismoConnectRequest: {
+        appId: "0x5b379992e5da74bfa4aaff4d3e52d6a8",
+        authRequests: [{ authType: 0 }],
+      },
+      templateConfig: {
+        path: "/synaps/proof-of-liveness",
+        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.",
+          }
+        }
+      }
+    }
+  ],
+};

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

@@ -0,0 +1,48 @@
+'use client'
+
+import { ZkCustomAppConfig } from "@/space-config/types";
+import Button3D from "@/src/ui/Button3D";
+import { useRouter } from "next/navigation";
+import React from "react";
+import { styled } from "styled-components";
+
+const Container = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+`
+
+const Title = styled.div`
+    font-family: ${props => props.theme.fonts.semibold};
+    color: ${props => props.theme.colors.neutral1};
+    font-size: 32px;
+    margin-top: 63px;
+`
+
+const Subtitle = styled.div`
+    font-family: ${props => props.theme.fonts.regular};
+    color: ${props => props.theme.colors.neutral3};
+    font-size: 16px;
+    margin-bottom: 63px;
+    text-align: center;
+`
+
+type Props = {
+    app: ZkCustomAppConfig
+}
+
+export default function Congratulations({ app }: Props): JSX.Element {
+    const router = useRouter();
+
+    return <Container>
+        <Title style={{marginBottom: 16}}>
+            {app?.templateConfig?.extraData?.congratulationsMessage?.title}
+        </Title>
+        <Subtitle>
+            {app?.templateConfig?.extraData?.congratulationsMessage?.description}
+        </Subtitle>
+        <Button3D onClick={() => router.push("/synaps")} secondary>
+            Back to the space
+        </Button3D>
+    </Container>;
+}

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

@@ -0,0 +1,82 @@
+"use client";
+
+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 colors from "@/src/themes/colors";
+import { ZkCustomAppConfig } 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;
+  padding: 10px 0px;
+`;
+
+const ButtonContainer = styled.div`
+  display: flex;
+  justify-content: center;
+`;
+
+const AuthItem = styled.div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  font-size: 14px;
+  line-height: 20px;
+  font-family: ${(props) => props.theme.fonts.regular};
+  gap: 8px;
+  white-space: nowrap;
+`;
+
+const Bold = styled.span`
+  font-family: ${(props) => props.theme.fonts.bold};
+`;
+
+type Props = {
+  app: ZkCustomAppConfig;
+  onEligible: (response) => void;
+};
+
+export default function ProveEligibility({
+  app,
+  onEligible,
+}: Props): JSX.Element {
+
+  const config = {
+    appId: app.sismoConnectRequest.appId
+  };
+
+  return (
+    <Container>
+      <Eligibility style={{ marginBottom: 24 }}>
+        <AuthItem>
+          Share: <Bold>Vault 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."
+            }
+            width={300}
+            style={{ marginLeft: -4 }}
+          >
+            <Info size={18} color={colors.neutral1} />
+          </HoverTooltip>
+        </AuthItem>
+      </Eligibility>
+      <ButtonContainer>
+        <SismoConnectButton
+          config={config}
+          auths={[{ authType: AuthType.VAULT }]}
+          callbackUrl={window.location.href}
+          onResponse={(response) => {
+            response && onEligible(response);
+          }}
+        />
+      </ButtonContainer>
+    </Container>
+  );
+}

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

@@ -0,0 +1,71 @@
+'use client'
+
+import React from "react";
+import { styled } from "styled-components";
+
+const Container = styled.div`
+    border: 1px solid #4F5B7E;
+    border-radius: 4px;
+    padding: 16px;
+`
+
+
+const Title = styled.div<{disabled: boolean, success: boolean}>`
+    display: flex;
+    font-family: ${props => props.theme.fonts.semibold};
+    color: ${props => props.disabled ? props.theme.colors.neutral7 : props.theme.colors.neutral1};
+
+    ${props => props.success && `
+        color: ${props.theme.colors.green1};
+    `}
+`
+
+const Number = styled.div<{disabled: boolean, success: boolean, number: number}>`
+    font-family: ${props => props.theme.fonts.medium};
+    margin-right: 12px;
+    font-size: 14px;
+    width: 20px;
+    height: 20px;
+    color: ${props => props.theme.colors.neutral11};
+    background-color: ${props => props.disabled ? props.theme.colors.neutral7 : props.theme.colors.neutral1};
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 100%;
+    line-height: 20px;
+    ${props => props.success && `
+        background-color: ${props.theme.colors.green1};
+    `}
+
+    ${props => props.number === 1 && `
+        padding-right: 1px;
+    `}
+    ${props => props.number === 2 && `
+        padding-right: 0px;
+    `}
+`
+
+
+type Props = {
+    title: string;
+    number: number;
+    children: React.ReactNode;
+    isOpen: boolean;
+    success?: boolean
+    style?: React.CSSProperties;
+}
+
+export default function Section({ number, children, title, isOpen, success, style }: Props): JSX.Element {
+
+    return <Container style={style}>
+        <Title disabled={!isOpen} success={success}>
+            <Number disabled={!isOpen} success={success} number={number}>
+                {number}
+            </Number>
+            {title}
+        </Title>
+        {
+            isOpen && children
+        }
+    </Container>;
+}

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

@@ -0,0 +1,78 @@
+import styled from "styled-components";
+import Synaps from "@synaps-io/react-verify";
+import { useEffect, useState } from "react";
+import Modal from "@/src/ui/Modal";
+import Loader from "@/src/ui/Loader";
+
+const Content = styled.div`
+  border-radius: 10px;
+  overflow: hidden;
+  height: 685px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const LoadingMessage = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #6771a9;
+  position: absolute;
+  background-color: ${(props) => props.theme.colors.neutral11};
+  height: 100%;
+  width: 100%;
+`;
+
+type SynapsModalProps = {
+  sessionId: string;
+  onClose: () => void;
+  onFinish: () => void;
+  isOpen: boolean;
+};
+
+export default function SynapsModal({
+  sessionId,
+  isOpen,
+  onClose,
+  onFinish,
+}: SynapsModalProps): JSX.Element {
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (!isOpen) {
+      setTimeout(() => {
+        setLoading(true);
+      }, 300)
+    }
+  }, [isOpen]);
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} outsideClosable animated>
+      <Content>
+        {sessionId && (
+          <Synaps
+            sessionId={sessionId}
+            service={"individual"}
+            lang={"en"}
+            onReady={() => setLoading(false)}
+            onFinish={() => {
+              console.log("Finish")
+              onFinish();
+            }}
+            color={{
+              primary: "212b39",
+              secondary: "ffffff",
+            }}
+          />
+        )}
+        {loading && (
+          <LoadingMessage>
+            <Loader style={{ marginRight: 7 }} color={"#6771A9"} /> Charging
+            liveness module...
+          </LoadingMessage>
+        )}
+      </Content>
+    </Modal>
+  );
+}