fix: add zk-custom-apps in new file structure

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

Hide file tree

Showing 13 changed files with 114 additions and 128 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: "custom",
+      type: "zkCustom",
       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,7 +29,6 @@ export const synapsConfigMain: SpaceConfig = {
         authRequests: [{ authType: 0 }],
       },
       templateConfig: {
-        path: "/synaps/proof-of-liveness",
         extraData: {
           api: "https://synaps-integration.vercel.app/api/proof-of-liveness",
           congratulationsMessage: {

diff --git a/space-config/synaps/proof-of-liveness/components/SynapsModal.tsx b/space-config/synaps/proof-of-liveness/components/SynapsModal.tsx
@@ -57,7 +57,6 @@ export default function SynapsModal({
             lang={"en"}
             onReady={() => setLoading(false)}
             onFinish={() => {
-              console.log("Finish")
               onFinish();
             }}
             color={{

diff --git a/space-config/synaps/proof-of-liveness/index.tsx b/space-config/synaps/proof-of-liveness/index.tsx
@@ -8,24 +8,11 @@ import ProveEligibility from "./components/ProveEligibility";
 import Button from "@/src/ui/Button";
 import SynapsModal from "./components/SynapsModal";
 import { synapsConfigMain } from "@/space-config/synaps/main";
-import CustomAppContainer from "@/src/components/CustomAppContainer";
 import { ZkCustomAppConfig } from "@/space-config/types";
 import Button3D from "@/src/ui/Button3D";
 import { useRouter } from "next/navigation";
+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;
-`
 
 const AlreadyRegistered = styled.div`
     color: ${props => props.theme.colors.neutral1};
@@ -40,10 +27,6 @@ const AlreadyRegistered = styled.div`
     border-radius: 4px;
 `
 
-const Content = styled.div`
-    max-width: 580px;
-`
-
 const Bottom = styled.div`
     width: 100%;
     display: flex;
@@ -57,7 +40,7 @@ const ErrorMsg = styled.div`
     font-family: ${props => props.theme.fonts.regular};
 `
 
-export default function ProofOfLivenessCustomApp(): JSX.Element {
+export default function SynapsProofOfLivenessCustomApp(): JSX.Element {
     const app = synapsConfigMain.apps[0] as ZkCustomAppConfig;
     const router = useRouter();
     const api = app.templateConfig.extraData.api;
@@ -119,17 +102,11 @@ export default function ProofOfLivenessCustomApp(): JSX.Element {
 
     if (!domReady) return;
 
-    return <CustomAppContainer>
+    return <>
         <SynapsModal sessionId={sessionId} isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} onFinish={() => onFinish()}/>
-        <Content>
+        <ZkCustomAppContainer>
             {
                 !finished && <>
-                    <Title>
-                        {app?.metadata?.name}
-                    </Title>
-                    <Description>
-                        {app?.metadata?.description}
-                    </Description>
                     <Section number={1} isOpen={!response} title="Sign in with Sismo" style={{marginBottom: 16}} success={Boolean(response)}>
                         <ProveEligibility app={app} onEligible={(_response) => setResponse(_response)}/>
                     </Section>
@@ -156,7 +133,7 @@ export default function ProofOfLivenessCustomApp(): JSX.Element {
                     {
                         alreadySubscribed && 
                         <Bottom>
-                            <Button3D onClick={() => router.push("/synaps")} secondary>
+                            <Button3D onClick={() => router.push(`/${synapsConfigMain.metadata.slug}`)} secondary>
                                 Back to the space
                             </Button3D>
                         </Bottom>
@@ -166,6 +143,6 @@ export default function ProofOfLivenessCustomApp(): JSX.Element {
             {
                 finished && <Congratulations app={app}/>
             }
-        </Content>
-    </CustomAppContainer>;
+        </ZkCustomAppContainer>
+    </>;
 }
diff --git a/space-config/types.ts b/space-config/types.ts
@@ -87,11 +87,9 @@ export type ZkDropAppConfig = AppCommonConfig & {
   };
 };
 
-
 export type ZkCustomAppConfig = AppCommonConfig & {
-  type: "custom";
+  type: "zkCustom";
   templateConfig: {
-    path: string;
     extraData: any;
   }
 };

diff --git a/space-config/worldcoin/main.ts b/space-config/worldcoin/main.ts
@@ -14,7 +14,7 @@ export const worldcoinConfigMain: SpaceConfig = {
   },
   apps: [
     {
-      type: "custom",
+      type: "zkCustom",
       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,7 +29,6 @@ export const worldcoinConfigMain: SpaceConfig = {
         authRequests: [{ authType: 0 }],
       },
       templateConfig: {
-        path: "/worldcoin/proof-of-personhood",
         extraData: {
           api: "https://worldcoin-app-backend.vercel.app/api/proof-of-personhood",
           congratulationsMessage: {

diff --git a/space-config/worldcoin/proof-of-personhood/components/ProveEligibility.tsx b/space-config/worldcoin/proof-of-personhood/components/ProveEligibility.tsx
@@ -73,7 +73,6 @@ export default function ProveEligibility({
           auths={[{ authType: AuthType.VAULT }]}
           callbackUrl={window.location.href}
           onResponse={(response) => {
-            console.log("response", response)
             response && onEligible(response);
           }}
         />

diff --git a/space-config/worldcoin/proof-of-personhood/index.tsx b/space-config/worldcoin/proof-of-personhood/index.tsx
@@ -6,12 +6,12 @@ import Congratulations from "./components/Congratulations";
 import Section from "./components/Section";
 import ProveEligibility from "./components/ProveEligibility";
 import Button from "@/src/ui/Button";
-import CustomAppContainer from "@/src/components/CustomAppContainer";
 import { ZkCustomAppConfig } 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;
@@ -57,7 +57,7 @@ const ErrorMsg = styled.div`
     font-family: ${props => props.theme.fonts.regular};
 `
 
-export default function ProofOfPersonhoodCustomApp(): JSX.Element {
+export default function WorldcoinProofOfPersonhoodCustomApp(): JSX.Element {
     const router = useRouter();
     const app = worldcoinConfigMain.apps[0] as ZkCustomAppConfig;
     const api = app.templateConfig.extraData.api;
@@ -67,6 +67,7 @@ export default function ProofOfPersonhoodCustomApp(): JSX.Element {
     const [finished, setFinished] = useState(false);
     const [error, setError] = useState(null);
     const [loading, setLoading] = useState(false);
+    const [redirect, setRedirect] = useState(null);
 
     const [sismoResponse, setSismoResponse] = useState(null);
 
@@ -117,30 +118,23 @@ export default function ProofOfPersonhoodCustomApp(): JSX.Element {
 
     useEffect(() => {
       setDomReady(true)
+      const getRedirectParam = () => {
+          if (!window) return null;
+          const url = new URL(window.location.href);
+          const params = new URLSearchParams(url.search);
+          const redirect = params.get('redirect');
+          if (!redirect) return null;
+          return decodeURIComponent(redirect);
+      }
+      const _redirect = getRedirectParam();
+      if (_redirect) setRedirect(_redirect)
     }, [])
 
-    const getRedirectParam = () => {
-        if (!window) return null;
-        const url = new URL(window.location.href);
-        const params = new URLSearchParams(url.search);
-        const redirect = params.get('redirect');
-        return decodeURIComponent(redirect);
-    }
-    const redirect = getRedirectParam();
-    console.log("redirect", redirect);
-
     if (!domReady) return;
 
-    return <CustomAppContainer>
-        <Content>
+    return <ZkCustomAppContainer>
             {
                 !finished && <>
-                    <Title>
-                        {app?.metadata?.name}
-                    </Title>
-                    <Description>
-                        {app?.metadata?.description}
-                    </Description>
                     <Section number={1} isOpen={!sismoResponse} title="Sign in with Sismo" style={{marginBottom: 16}} success={Boolean(sismoResponse)}>
                         <ProveEligibility app={app} onEligible={(_response) => setSismoResponse(_response)}/>
                     </Section>
@@ -172,19 +166,17 @@ export default function ProofOfPersonhoodCustomApp(): JSX.Element {
                             </>
                         }
                     </Section>
-                    {/* {
-                        alreadySubscribed &&  */}
+                    {Boolean(sismoResponse) && 
                         <Bottom>
-                            <Button3D onClick={() => redirect ? window.location.href = redirect : router.push("/synaps")} secondary>
+                            <Button3D onClick={() => redirect ? window.location.href : router.push(`/${worldcoinConfigMain.metadata.slug}`)} secondary>
                                 { redirect ? "Back to the Vault App" : "Back to the space" }
                             </Button3D>
                         </Bottom>
-                    {/* } */}
+                    }
                 </>
             }
             {
                 finished && <Congratulations app={app}/>
             }
-        </Content>
-    </CustomAppContainer>;
+    </ZkCustomAppContainer>;
 }
diff --git a/space-config/zk-custom-apps.tsx b/space-config/zk-custom-apps.tsx
@@ -0,0 +1,14 @@
+`use client`
+
+import SynapsProofOfLivenessCustomApp from "./synaps/proof-of-liveness"
+import WorldcoinProofOfPersonhoodCustomApp from "./worldcoin/proof-of-personhood"
+
+
+export const zkCustomApps = {
+    "worldcoin": {
+        "proof-of-personhood": <WorldcoinProofOfPersonhoodCustomApp />,
+    },
+    "synaps": {
+        "proof-of-liveness": <SynapsProofOfLivenessCustomApp />
+    }
+}
diff --git a/src/components/AppMain/index.tsx b/src/components/AppMain/index.tsx
@@ -12,6 +12,7 @@ import useRemainingTime from "@/src/utils/useRemainingTime";
 import { redirect } from "next/navigation";
 import Timer from "../Apps/components/Timer";
 import { useEffect } from "react";
+import { zkCustomApps } from "@/space-config/zk-custom-apps";
 
 const Container = styled.div`
   flex-grow: 1;
@@ -206,6 +207,11 @@ export default function AppMain({ app, groupSnapshotMetadataList }: Props) {
             )}
           </>
         )}
+        {
+          app?.type == "zkCustom" && (
+            zkCustomApps[app.spaceSlug][app.slug]
+          )
+        }
       </AppContainer>
     </Container>
   );

diff --git a/src/components/CustomAppContainer/index.tsx b/src/components/CustomAppContainer/index.tsx
diff --git a/src/components/ZkCustomAppContainer/index.tsx b/src/components/ZkCustomAppContainer/index.tsx
@@ -0,0 +1,11 @@
+"use client";
+
+import styled from "styled-components";
+
+export const ZkCustomAppContainer = styled.div`
+    width: 580px;
+
+    @media (max-width: 900px) {
+    width: 100%;
+    }
+`;