From 46b20235ffc0fbfa1b1a760b61ccbf68bf66562e Mon Sep 17 00:00:00 2001 From: Ian-Bright Date: Wed, 10 Apr 2024 08:17:03 +0300 Subject: [PATCH 1/6] fix: Removed fixed position --- src/components/cards/FoldedCard.tsx | 186 ++++++++++++++-------------- src/pages/proofs/index.tsx | 28 ++--- 2 files changed, 107 insertions(+), 107 deletions(-) diff --git a/src/components/cards/FoldedCard.tsx b/src/components/cards/FoldedCard.tsx index 3751275b..d940cfd0 100644 --- a/src/components/cards/FoldedCard.tsx +++ b/src/components/cards/FoldedCard.tsx @@ -1,15 +1,15 @@ -import dayjs from "dayjs"; -import duration from "dayjs/plugin/duration"; -import { Swiper, SwiperSlide } from "swiper/react"; -import { Controller, EffectFade, Pagination, Autoplay } from "swiper/modules"; -import "swiper/css"; -import "swiper/css/effect-fade"; -import "swiper/css/pagination"; -import { classed } from "@tw-classed/react"; -import { Card } from "./Card"; -import { ReactNode, useEffect, useState } from "react"; -import { cn } from "@/lib/client/utils"; -import { Icons } from "../Icons"; +import dayjs from 'dayjs'; +import duration from 'dayjs/plugin/duration'; +import { Swiper, SwiperSlide } from 'swiper/react'; +import { Controller, EffectFade, Pagination, Autoplay } from 'swiper/modules'; +import 'swiper/css'; +import 'swiper/css/effect-fade'; +import 'swiper/css/pagination'; +import { classed } from '@tw-classed/react'; +import { Card } from './Card'; +import { ReactNode, useEffect, useState } from 'react'; +import { cn } from '@/lib/client/utils'; +import { Icons } from '../Icons'; import { getAuthToken, getFoldedProof, @@ -17,22 +17,22 @@ import { getLocationSignatures, getProfile, getUsers, -} from "@/lib/client/localStorage"; -import { Button } from "../Button"; -import Link from "next/link"; -import { logClientEvent } from "@/lib/client/metrics"; -import { toast } from "sonner"; -import { type PutBlobResult } from "@vercel/blob"; -import { upload } from "@vercel/blob/client"; -import { encryptFoldedProofMessage } from "@/lib/client/jubSignal"; -import { loadMessages } from "@/lib/client/jubSignalClient"; -import { useWorker } from "@/hooks/useWorker"; -import { IndexDBWrapper, TreeType } from "@/lib/client/indexDB"; -import { Spinner } from "../Spinner"; +} from '@/lib/client/localStorage'; +import { Button } from '../Button'; +import Link from 'next/link'; +import { logClientEvent } from '@/lib/client/metrics'; +import { toast } from 'sonner'; +import { type PutBlobResult } from '@vercel/blob'; +import { upload } from '@vercel/blob/client'; +import { encryptFoldedProofMessage } from '@/lib/client/jubSignal'; +import { loadMessages } from '@/lib/client/jubSignalClient'; +import { useWorker } from '@/hooks/useWorker'; +import { IndexDBWrapper, TreeType } from '@/lib/client/indexDB'; +import { Spinner } from '../Spinner'; dayjs.extend(duration); -const UNFOLDED_DATE = "2024-03-10 15:59:59"; -const CountdownLabel = classed.span("text-primary font-semibold text-xs"); +const UNFOLDED_DATE = '2024-03-10 15:59:59'; +const CountdownLabel = classed.span('text-primary font-semibold text-xs'); interface FoldedItemProps { image?: string; @@ -58,13 +58,13 @@ export type ProofPost = { talks: ProofData | undefined; }; -export const FOLDED_MOCKS: FolderCardProps["items"] = [ +export const FOLDED_MOCKS: FolderCardProps['items'] = [ { - image: "/bg-gradient-card.png", + image: '/bg-gradient-card.png', children: ( <> @@ -73,23 +73,23 @@ export const FOLDED_MOCKS: FolderCardProps["items"] = [ }, { subtitle: "We're so happy you joined us at ZK Summit 11!", - description: () => "Ready to review your memories?", + description: () => 'Ready to review your memories?', }, { - title: "ZK11 - a symposium for brilliant minds.", + title: 'ZK11 - a symposium for brilliant minds.', description: (param: number) => `You connected with ${param} other attendees`, }, { - title: "47 speakers filled the academy for a full day of talks.", + title: '47 speakers filled the academy for a full day of talks.', description: (param: number) => `You attended ${param} talks`, }, { - title: "Dialogue catalyzed the evolution of zk research.", + title: 'Dialogue catalyzed the evolution of zk research.', description: (param: number) => `You met ${param} speakers`, }, { - title: "Knowledge blossomed through interaction.", + title: 'Knowledge blossomed through interaction.', description: () => `You were 1 of 500 at ZK11!`, }, ]; @@ -124,14 +124,14 @@ const FoldedCardSteps = ({ items = [], onClose }: FolderCardProps) => { const pagination = { clickable: true, - bulletActiveClass: "folded-dot-active", + bulletActiveClass: 'folded-dot-active', renderBullet: (index: number, className: string) => { return `
`; }, }; const getTwitterShareUrl = () => { - if (!proofId) return ""; + if (!proofId) return ''; return `https://twitter.com/intent/tweet?text=${encodeURIComponent( `🧺 zkSummit 11 FOLDED 🧺: I made a Nova folding proof attesting to my zkSummit Athens experience, built by @cursive_team and @mach34_. Go verify it yourself!` @@ -153,8 +153,8 @@ const FoldedCardSteps = ({ items = [], onClose }: FolderCardProps) => { ): Promise => { const name = `${treeType}Proof`; const newBlob: PutBlobResult = await upload(name, proof, { - access: "public", - handleUploadUrl: "/api/folding/upload", + access: 'public', + handleUploadUrl: '/api/folding/upload', }); return newBlob.url; }; @@ -164,19 +164,19 @@ const FoldedCardSteps = ({ items = [], onClose }: FolderCardProps) => { const keys = getKeys(); const profile = getProfile(); if (!token || token.expiresAt < new Date() || !keys || !profile) { - throw new Error("Please sign in to save your proof."); + throw new Error('Please sign in to save your proof.'); } - const response = await fetch("/api/folding/proof", { - method: "POST", + const response = await fetch('/api/folding/proof', { + method: 'POST', headers: { - "Content-Type": "application/json", + 'Content-Type': 'application/json', }, body: JSON.stringify({ authToken: token.value, data }), }); if (!response.ok) { - throw new Error("Failed to save proof"); + throw new Error('Failed to save proof'); } const { proofUuid } = await response.json(); @@ -204,20 +204,20 @@ const FoldedCardSteps = ({ items = [], onClose }: FolderCardProps) => { }); } catch (error) { console.error( - "Error sending encrypted folded proof info to server: ", + 'Error sending encrypted folded proof info to server: ', error ); - toast.error("An error occured while saving the proof. Please try again."); + toast.error('An error occured while saving the proof. Please try again.'); } return proofUuid; }; const beginProving = async () => { - logClientEvent("foldedProvingStarted", {}); + logClientEvent('foldedProvingStarted', {}); if (numAttendees === 0 && numTalks === 0 && numSpeakers === 0) { - toast.error("Nothing to prove! Tap some cards to get started."); + toast.error('Nothing to prove! Tap some cards to get started.'); return; } @@ -240,7 +240,7 @@ const FoldedCardSteps = ({ items = [], onClose }: FolderCardProps) => { return; } setFinalizedProgress((prev) => prev + 1); - console.log("Finalized proof for treeType: ", treeType); + console.log('Finalized proof for treeType: ', treeType); // get the proof from the db const proofData = await db.getFold(treeType); if (proofData === undefined) { @@ -275,32 +275,32 @@ const FoldedCardSteps = ({ items = [], onClose }: FolderCardProps) => { }; return ( -
+
-
+
{ @@ -317,35 +317,35 @@ const FoldedCardSteps = ({ items = [], onClose }: FolderCardProps) => {
{itemIndex !== items.length - 1 && ( <> {children} {title && ( -

+

{title}

)} {subtitle && ( - + {subtitle} )} {description && ( - + {itemIndex === 2 && description(numAttendees)} {itemIndex === 3 && description(numTalks)} {itemIndex === 4 && description(numSpeakers)} @@ -358,35 +358,35 @@ const FoldedCardSteps = ({ items = [], onClose }: FolderCardProps) => { <> {proofId && ( <> -

- {"Proof is ready"} +

+ {'Proof is ready'}

- + { - "Allow anyone to verify your ZK Summit experience." + 'Allow anyone to verify your ZK Summit experience.' } - + )} {!proofId && provingStarted && ( <> -

- {"Generating your proof..."} +

+ {'Generating your proof...'}

- - {"This may take a minute. Please be patient!"} + + {'This may take a minute. Please be patient!'} @@ -395,17 +395,17 @@ const FoldedCardSteps = ({ items = [], onClose }: FolderCardProps) => { <> {children} {title && ( -

+

{title}

)} {subtitle && ( - + {subtitle} )} {description && ( - + {itemIndex === 2 && description(numAttendees)} {itemIndex === 3 && description(numTalks)} {itemIndex === 4 && description(numSpeakers)} @@ -464,8 +464,8 @@ export const FolderCard = ({ items }: FolderCardProps) => {
@@ -477,34 +477,34 @@ export const FolderCard = ({ items }: FolderCardProps) => { />
setIsOpened(!isOpened)} className={cn({ - "pointer-events-none": hasCountdown, - "py-4": !hasCountdown, + 'pointer-events-none': hasCountdown, + 'py-4': !hasCountdown, })} style={{ backgroundImage: "url('/bg-glitter.png')", }} > -
+
{hasCountdown && ( - Available in:{" "} + Available in:{' '} {days === 1 ? `${days} day, ` : days === 0 - ? "" + ? '' : `${days} days, `} - {hours.toString().padStart(2, "0")}: - {minutes.toString().padStart(2, "0")}: - {seconds.toString().padStart(2, "0")} + {hours.toString().padStart(2, '0')}: + {minutes.toString().padStart(2, '0')}: + {seconds.toString().padStart(2, '0')} )} -

+

ZK11 Folded

- + Using client-side Nova folding proofs, create and share a Spotify Wrapped-like summary of your zkSummit11! diff --git a/src/pages/proofs/index.tsx b/src/pages/proofs/index.tsx index c8cd5c11..7dc468e7 100644 --- a/src/pages/proofs/index.tsx +++ b/src/pages/proofs/index.tsx @@ -1,15 +1,15 @@ -import { Placeholder } from "@/components/placeholders/Placeholder"; -import { QuestCard } from "@/components/cards/QuestCard"; -import { LoadingWrapper } from "@/components/wrappers/LoadingWrapper"; -import { useFetchQuests } from "@/hooks/useFetchQuests"; +import { Placeholder } from '@/components/placeholders/Placeholder'; +import { QuestCard } from '@/components/cards/QuestCard'; +import { LoadingWrapper } from '@/components/wrappers/LoadingWrapper'; +import { useFetchQuests } from '@/hooks/useFetchQuests'; -import Link from "next/link"; -import React, { useMemo, useRef, useState } from "react"; +import Link from 'next/link'; +import React, { useMemo, useRef, useState } from 'react'; -import { QuestWithCompletion } from "@/types"; -import { getPinnedQuest } from "@/lib/client/localStorage/questPinned"; -import { useQuestRequirements } from "@/hooks/useQuestRequirements"; -import { FOLDED_MOCKS, FolderCard } from "@/components/cards/FoldedCard"; +import { QuestWithCompletion } from '@/types'; +import { getPinnedQuest } from '@/lib/client/localStorage/questPinned'; +import { useQuestRequirements } from '@/hooks/useQuestRequirements'; +import { FOLDED_MOCKS, FolderCard } from '@/components/cards/FoldedCard'; export default function QuestsPage() { const pinnedQuests = useRef>(getPinnedQuest()); @@ -40,17 +40,17 @@ export default function QuestsPage() { const { numRequirementsSatisfied } = useQuestRequirements(displayQuests); return ( -
- +
+ Post proofs about your ZK11 experience on Twitter, while preserving privacy over the people you met and talks you attended. } - noResultsLabel="No proofs found" + noResultsLabel='No proofs found' > <> From c874ef92a23dc88ae7c6228e1a52e76e00c076fd Mon Sep 17 00:00:00 2001 From: Ian-Bright Date: Wed, 10 Apr 2024 08:19:36 +0300 Subject: [PATCH 2/6] feat: Remove top and right position --- src/components/cards/FoldedCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/cards/FoldedCard.tsx b/src/components/cards/FoldedCard.tsx index d940cfd0..dcd8530f 100644 --- a/src/components/cards/FoldedCard.tsx +++ b/src/components/cards/FoldedCard.tsx @@ -281,7 +281,7 @@ const FoldedCardSteps = ({ items = [], onClose }: FolderCardProps) => { height={19} width={63} /> -
+
- + Test swiper sizing issue +
+ {/* { ); } )} - + */}
); }; From 22e77a40d98011715d65d8a14502f186f269aa26 Mon Sep 17 00:00:00 2001 From: Ian-Bright Date: Wed, 10 Apr 2024 13:19:46 +0300 Subject: [PATCH 6/6] feat: Assign height to inner contents of swiper slide instead of slide itself --- src/components/cards/FoldedCard.tsx | 17 ++++++----------- 1 file changed, 6 insertions(+), 11 deletions(-) diff --git a/src/components/cards/FoldedCard.tsx b/src/components/cards/FoldedCard.tsx index bef0124f..d24e1b8f 100644 --- a/src/components/cards/FoldedCard.tsx +++ b/src/components/cards/FoldedCard.tsx @@ -291,10 +291,7 @@ const FoldedCardSteps = ({ items = [], onClose }: FolderCardProps) => { -
- Test swiper sizing issue -
- {/* { disableOnInteraction: false, stopOnLastSlide: true, }} - className='h-screen' + // className='h-screen' + style={{ height: '100vh' }} spaceBetween={0} slidesPerView={1} onSlideChange={(swiper: any) => { @@ -319,16 +317,13 @@ const FoldedCardSteps = ({ items = [], onClose }: FolderCardProps) => { return ( -
+
{itemIndex !== items.length - 1 && ( <> {children} @@ -421,7 +416,7 @@ const FoldedCardSteps = ({ items = [], onClose }: FolderCardProps) => { ); } )} - */} +
); };