diff --git a/space-config/synaps/main.ts b/space-config/synaps/main.ts index bc687746..667efe18 100644 --- 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 index 11d4e2f2..b747f732 100644 --- 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,7 +28,7 @@ const Subtitle = styled.div` ` type Props = { - app: ZkCustomAppConfig + app: CustomAppConfig } export default function Congratulations({ app }: Props): JSX.Element { @@ -36,10 +36,10 @@ export default function Congratulations({ app }: Props): JSX.Element { return - {app?.templateConfig?.extraData?.congratulationsMessage?.title} + {app?.templateConfig?.congratulationsMessage?.title} - {app?.templateConfig?.extraData?.congratulationsMessage?.description} + {app?.templateConfig?.congratulationsMessage?.description} 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 index d4566909..9cfb8052 100644 --- 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 ( + + + Requirements + - Share: Vault Id + User Id setIsModalOpen(false)} onFinish={() => onFinish()}/> - + { !finished && <>
@@ -143,6 +143,6 @@ export default function SynapsProofOfLivenessCustomApp(): JSX.Element { { finished && } - + ; } \ No newline at end of file diff --git a/space-config/types.ts b/space-config/types.ts index d2af9a04..76a214a8 100644 --- 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 index e4fc291f..fdceff24 100644 --- 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 index 11d4e2f2..f63fef1f 100644 --- 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 - {app?.templateConfig?.extraData?.congratulationsMessage?.title} + {app?.templateConfig?.congratulationsMessage?.title} - {app?.templateConfig?.extraData?.congratulationsMessage?.description} + {app?.templateConfig?.congratulationsMessage?.description} - router.push("/synaps")} secondary> - Back to the space - ; } \ No newline at end of file diff --git a/space-config/worldcoin/proof-of-personhood/components/ProveEligibility.tsx b/space-config/worldcoin/proof-of-personhood/components/ProveEligibility.tsx index d4566909..9d8f20b8 100644 --- 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,6 +43,7 @@ const AuthItem = styled.div` font-family: ${(props) => props.theme.fonts.regular}; gap: 8px; white-space: nowrap; + padding: 0px 16px; `; const Bold = styled.span` @@ -38,7 +51,7 @@ const Bold = styled.span` `; type Props = { - app: ZkCustomAppConfig; + app: CustomAppConfig; onEligible: (response) => void; }; @@ -53,12 +66,16 @@ export default function ProveEligibility({ return ( + + + Requirements + - Share: Vault Id + User Id 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; -` +import { CustomAppContainer } from "@/src/components/CustomAppContainer"; +import ProveEligibility from "./components/ProveEligibility"; const AlreadyRegistered = styled.div` color: ${props => props.theme.colors.neutral1}; @@ -40,10 +26,6 @@ const AlreadyRegistered = styled.div` border-radius: 4px; ` -const Content = styled.div` - max-width: 580px; -` - const Bottom = styled.div` width: 100%; display: flex; @@ -55,25 +37,35 @@ const Bottom = styled.div` const ErrorMsg = styled.div` color: ${props => props.theme.colors.error}; font-family: ${props => props.theme.fonts.regular}; + position: absolute; + bottom: -35px; + left: 0px; +` + +const Verifications = styled.div` + display: flex; + gap: 10px; + align-items: center; + margin-top: 24px; ` export default function WorldcoinProofOfPersonhoodCustomApp(): JSX.Element { const router = useRouter(); - const app = worldcoinConfigMain.apps[0] as ZkCustomAppConfig; - const api = app.templateConfig.extraData.api; + const app = worldcoinConfigMain.apps[0] as CustomAppConfig; + const api = app.templateConfig.api; const [alreadySubscribed, setAlreadySubscribed] = useState(false); const [domReady, setDomReady] = React.useState(false); - const [verifying, setVerifying] = useState(false); const [finished, setFinished] = useState(false); const [error, setError] = useState(null); - const [loading, setLoading] = useState(false); const [redirect, setRedirect] = useState(null); + const [verifyingOrb, setVerifyingOrb] = useState(false); + const [verifyingPhone, setVerifyingPhone] = useState(false); const [sismoResponse, setSismoResponse] = useState(null); - const onFinish = async (worldcoinResult) => { - setVerifying(true); - setLoading(true); + const onFinish = async (worldcoinResult, type: "orb" | "phone") => { + if (type === "orb") setVerifyingOrb(true); + if (type === "phone") setVerifyingPhone(true); const body = JSON.stringify({ result: worldcoinResult, response: sismoResponse @@ -82,21 +74,20 @@ export default function WorldcoinProofOfPersonhoodCustomApp(): JSX.Element { method: "POST", body }); - setVerifying(false); - if (!res.ok) { - throw new Error("Error while verifying Worldcoin proof"); - } + setVerifyingOrb(false); + setVerifyingPhone(false); const data = await res.json(); + if (data.success) { setFinished(true); } switch (data.code) { case "sismo-response-invalid": - setError("Server error [Sismo response invalid]. Please contact us or retry later."); + setError("Server error: Sismo response invalid. Please contact us or retry later."); break; case "worldcoin-result-invalid": - setError("Server error [Worldcoin result invalid]. Please contact us or retry later."); + setError("Server error: Worldcoin result invalid. Please contact us or retry later."); break; case "worldcoin-proof-already-verified": setAlreadySubscribed(true); @@ -132,7 +123,7 @@ export default function WorldcoinProofOfPersonhoodCustomApp(): JSX.Element { if (!domReady) return; - return + return { !finished && <>
@@ -145,38 +136,49 @@ export default function WorldcoinProofOfPersonhoodCustomApp(): JSX.Element { You already registered. : - <> + onFinish(result)} + credential_types={[CredentialType.Orb]} + onSuccess={(result) => onFinish(result, "orb")} > - {({ open }) => } - { - error && - - {error} - - } - + {/* onFinish(result, "phone")} + > + {({ open }) => } + */} + + } + { + error && + + {error} + }
- {Boolean(sismoResponse) && - - redirect ? window.location.href : router.push(`/${worldcoinConfigMain.metadata.slug}`)} secondary> - { redirect ? "Back to the Vault App" : "Back to the space" } - - - } } { finished && } - ; + {alreadySubscribed || finished && + + redirect ? window.location.href : router.push(`/${worldcoinConfigMain.metadata.slug}`)} secondary> + { redirect ? "Back to the Vault App" : "Back to the space" } + + + } + ; } \ No newline at end of file diff --git a/space-config/zk-custom-apps.tsx b/space-config/zk-custom-apps.tsx index 879cdd55..ff90e77c 100644 --- a/space-config/zk-custom-apps.tsx +++ b/space-config/zk-custom-apps.tsx @@ -4,7 +4,7 @@ import SynapsProofOfLivenessCustomApp from "./synaps/proof-of-liveness" import WorldcoinProofOfPersonhoodCustomApp from "./worldcoin/proof-of-personhood" -export const zkCustomApps = { +export const customApps = { "worldcoin": { "proof-of-personhood": , }, diff --git a/src/components/AppMain/index.tsx b/src/components/AppMain/index.tsx index 60795302..45f7f689 100644 --- a/src/components/AppMain/index.tsx +++ b/src/components/AppMain/index.tsx @@ -8,7 +8,7 @@ import Image from "next/image"; import SpaceTag from "../SpaceTag"; import Default from "@/src/assets/default.svg"; import ZkBotApp from "@/src/components/Apps/ZkTelegramBotApp"; -import { zkCustomApps } from "@/space-config/zk-custom-apps"; +import { customApps } from "@/space-config/zk-custom-apps"; const Container = styled.div` flex-grow: 1; @@ -167,8 +167,8 @@ export default function AppMain({ app, groupMetadataList }: Props) { )} { - app?.type == "zkCustom" && ( - zkCustomApps[app.spaceSlug][app.slug] + app?.type == "custom" && ( + customApps[app.spaceSlug][app.slug] ) } diff --git a/src/components/ZkCustomAppContainer/index.tsx b/src/components/CustomAppContainer/index.tsx similarity index 73% rename from src/components/ZkCustomAppContainer/index.tsx rename to src/components/CustomAppContainer/index.tsx index 689fe2af..2446ba77 100644 --- a/src/components/ZkCustomAppContainer/index.tsx +++ b/src/components/CustomAppContainer/index.tsx @@ -2,7 +2,7 @@ import styled from "styled-components"; -export const ZkCustomAppContainer = styled.div` +export const CustomAppContainer = styled.div` width: 580px; @media (max-width: 900px) { diff --git a/src/libs/spaces/getSpaces.ts b/src/libs/spaces/getSpaces.ts index 7d0eb51a..1a8a23f4 100644 --- a/src/libs/spaces/getSpaces.ts +++ b/src/libs/spaces/getSpaces.ts @@ -6,7 +6,7 @@ import { SpaceType, ZkFormAppType, ZkTelegramBotAppType, - ZkCustomAppType, + CustomAppType, } from "./types"; import { AuthType } from "@sismo-core/sismo-connect-server"; @@ -66,15 +66,15 @@ export function getSpaces(): SpaceType[] { telegramInviteLink: appConfig.templateConfig.telegramInviteLink, } as ZkTelegramBotAppType); break; - case "zkCustom": + case "custom": apps.push({ type: appConfig.type, ...appCommon, authRequests: appConfig.sismoConnectRequest.authRequests ?? [ { authType: AuthType.VAULT }, ], - extraData: appConfig.templateConfig.extraData, - } as ZkCustomAppType); + extraData: appConfig.templateConfig, + } as CustomAppType); break; } } diff --git a/src/libs/spaces/types.ts b/src/libs/spaces/types.ts index 534d9b43..9fd7f277 100644 --- a/src/libs/spaces/types.ts +++ b/src/libs/spaces/types.ts @@ -24,7 +24,7 @@ export type ZkAppType = | ZkTelegramBotAppType | ZkDropAppType | ZkBadgeAppType - | ZkCustomAppType; + | CustomAppType; type SocialType = "twitter" | "discord" | "link" | "github" | "telegram"; @@ -109,8 +109,8 @@ export type ZkTelegramBotAppType = AppCommonType & { telegramInviteLink: string; }; -export type ZkCustomAppType = AppCommonType & { - type: "zkCustom"; +export type CustomAppType = AppCommonType & { + type: "custom"; extraData: any; }