Create custom app

custom-apps/index.tsx

@@ -0,0 +1,13 @@
+`use client`;
+
+import SynapsProofOfLivenessCustomApp from "./synaps-proof-of-liveness";
+import WorldcoinProofOfPersonhoodCustomApp from "./wordlcoin-proof-of-personhood";
+
+export const customApps = {
+  worldcoin: {
+    "proof-of-personhood": <WorldcoinProofOfPersonhoodCustomApp />,
+  },
+  synaps: {
+    "proof-of-liveness": <SynapsProofOfLivenessCustomApp />,
+  },
+};

custom-apps/synaps-proof-of-liveness/components/Congratulations.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { CustomAppConfig } from "@/space-configs/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: CustomAppConfig;
+};
+
+export default function Congratulations({ app }: Props): JSX.Element {
+  const router = useRouter();
+
+  return (
+    <Container>
+      <Title style={{ marginBottom: 16 }}>
+        {app?.templateConfig?.congratulationsMessage?.title}
+      </Title>
+      <Subtitle>{app?.templateConfig?.congratulationsMessage?.description}</Subtitle>
+      <Button3D onClick={() => router.push("/synaps")} secondary>
+        Back to the space
+      </Button3D>
+    </Container>
+  );
+}

custom-apps/synaps-proof-of-liveness/components/ProveEligibility.tsx

@@ -0,0 +1,94 @@
+"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, LockSimpleOpen } from "phosphor-react";
+import colors from "@/src/themes/colors";
+import { CustomAppConfig } from "@/space-configs/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 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: CustomAppConfig;
+  onEligible: (response) => void;
+};
+
+export default function ProveEligibility({ app, onEligible }: Props): JSX.Element {
+  const config = {
+    appId: app.sismoConnectRequest.appId,
+  };
+
+  return (
+    <Container>
+      <RequirementTitle>
+        <LockSimpleOpen size={16} />
+        Requirements
+      </RequirementTitle>
+      <Eligibility style={{ marginBottom: 24 }}>
+        <AuthItem>
+          <Bold>User Id</Bold>
+          <HoverTooltip
+            text={
+              "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 }}
+          >
+            <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>
+  );
+}

custom-apps/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>;
+}

custom-apps/synaps-proof-of-liveness/components/SynapsModal.tsx

@@ -0,0 +1,77 @@
+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={() => {
+              onFinish();
+            }}
+            color={{
+              primary: "212b39",
+              secondary: "ffffff",
+            }}
+          />
+        )}
+        {loading && (
+          <LoadingMessage>
+            <Loader style={{ marginRight: 7 }} color={"#6771A9"} /> Charging
+            liveness module...
+          </LoadingMessage>
+        )}
+      </Content>
+    </Modal>
+  );
+}