Skip to content

Commit

Permalink
ui: restructure and improvements (#29)
Browse files Browse the repository at this point in the history
  • Loading branch information
@urbbru
urbbru authored Sep 4, 2023
1 parent 7a0e682 commit 3633661
Show file tree
Hide file tree
Showing 6 changed files with 143 additions and 151 deletions.
42 changes: 22 additions & 20 deletions packages/nextjs/pages/example-zk/AgeRestrictedContractExecutor.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { CodeText } from "./CodeText";
import SignedStats from "./SignedStats";
import { useScaffoldContractWrite } from "~~/hooks/scaffold-eth";
import { useBirthYearProofsStore } from "~~/services/store/birth-year-proofs";

export const AgeRestrictedContractExecutor = () => {
const proof = useBirthYearProofsStore(state => state.proof);
const setProof = useBirthYearProofsStore(state => state.setProof);

const { writeAsync, isLoading } = useScaffoldContractWrite({
contractName: "BalloonVendor",
Expand All @@ -16,8 +16,8 @@ export const AgeRestrictedContractExecutor = () => {
});

return (
<>
<div className="flex-shrink-0 w-full max-w-5xl px-6 pb-6">
<div className="grid grid-cols-2 gap-6 max-w-7xl">
<div>
<p>
The ballon store is using the same <CodeText text="TokenVendor.sol" /> as the{" "}
<a className="link" href="https://speedrunethereum.com/challenge/token-vendor">
Expand All @@ -36,25 +36,27 @@ export const AgeRestrictedContractExecutor = () => {
Now Alice gets a balloon🎈 <strong>token</strong>, that she can redeem at the store to get an actual ballloon.
</p>
</div>
<div className="card flex-shrink-0 w-full max-w-lg shadow-2xl bg-base-100">
<SignedStats />
<div className="card-body">
<div className="form-control">
<label className="label">
<span className="label-text">Your proof of having the required birth year ✅</span>
</label>
<input
type="text"
placeholder="Proof of required birthyear"
value={proof}
className="input input-bordered"
/>
<div>
<div className="card w-full shadow-2xl bg-base-100">
<div className="card-body">
<div className="form-control">
<label className="label">
<span className="label-text">Your proof of having the required birth year ✅</span>
</label>
<input
type="text"
placeholder="Proof of required birthyear"
value={proof}
className="input input-bordered"
onChange={e => setProof(e.target.value as `0x${string}`)}
/>
</div>
<button className="btn btn-primary mt-6" onClick={() => writeAsync()} disabled={isLoading}>
Get free balloon 🎈
</button>
</div>
<button className="btn btn-primary mt-6" onClick={() => writeAsync()} disabled={isLoading}>
Get free balloon 🎈
</button>
</div>
</div>
</>
</div>
);
};
92 changes: 46 additions & 46 deletions packages/nextjs/pages/example-zk/BirthDateSignature.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { useState } from "react";
import { CodeText } from "./CodeText";
import SignedStats from "./SignedStats";
import { ethers } from "ethers";
import secp256k1 from "secp256k1";
import { AddressInput } from "~~/components/scaffold-eth/Input/AddressInput";
Expand Down Expand Up @@ -61,8 +60,8 @@ export const BirthDateSignature = ({ aliceDefaultAge }: { aliceDefaultAge: numbe
};

return (
<>
<div className="flex-shrink-0 w-full max-w-5xl px-6 pb-6">
<div className="grid grid-cols-2 gap-6 max-w-7xl">
<div>
<p>
Alice recognizes that, in order for her to not having to share her age with the balloon store, she at least
has to share her age with a third party that the balloon store also can trust. In this case, the balloon store
Expand Down Expand Up @@ -91,51 +90,52 @@ export const BirthDateSignature = ({ aliceDefaultAge }: { aliceDefaultAge: numbe
This can be improved in many ways, but at a minium it should be provided to the UI by a Town Hall employee.
</p>
</div>
<div className="card flex-shrink-0 w-full max-w-lg shadow-2xl bg-base-100">
<SignedStats />
<div className="card-body">
<div className="form-control">
<label className="label">
<span className="label-text">Enter your Ethereum address</span>
</label>
<AddressInput
value={ethereumAddress}
name="personEthereumAddress"
placeholder="Ethereum address"
onChange={(value: string) => setEthereumAddress(value)}
/>
</div>
<div className="form-control">
<label className="label">
<span className="label-text">Enter your birth year</span>
</label>
<input
type="number"
placeholder="Birth year"
className="input input-bordered"
value={birthYear}
onChange={e => setBirthYear(e.target.value)}
/>
</div>
<div className="form-control">
<label className="label">
<span className="label-text">Third party&apos;s🏛 private key for signing</span>
</label>
<input
type="text"
placeholder="Super secret key"
value={form.thirdPartyPrivateKey}
className="input input-bordered"
onChange={e => setForm({ ...form, thirdPartyPrivateKey: e.target.value })}
/>
</div>
<div className="form-control">
<button className="btn btn-primary mt-6" onClick={handleSubmission}>
Sign birth year 📜
</button>
<div>
<div className="card w-full shadow-2xl bg-base-100">
<div className="card-body">
<div className="form-control">
<label className="label">
<span className="label-text">Enter your Ethereum address</span>
</label>
<AddressInput
value={ethereumAddress}
name="personEthereumAddress"
placeholder="Ethereum address"
onChange={(value: string) => setEthereumAddress(value)}
/>
</div>
<div className="form-control">
<label className="label">
<span className="label-text">Enter your birth year</span>
</label>
<input
type="number"
placeholder="Birth year"
className="input input-bordered"
value={birthYear}
onChange={e => setBirthYear(e.target.value)}
/>
</div>
<div className="form-control">
<label className="label">
<span className="label-text">Third party&apos;s🏛 private key for signing</span>
</label>
<input
type="text"
placeholder="Super secret key"
value={form.thirdPartyPrivateKey}
className="input input-bordered"
onChange={e => setForm({ ...form, thirdPartyPrivateKey: e.target.value })}
/>
</div>
<div className="form-control">
<button className="btn btn-primary mt-6" onClick={handleSubmission}>
Sign birth year 📜
</button>
</div>
</div>
</div>
</div>
</>
</div>
);
};
132 changes: 66 additions & 66 deletions packages/nextjs/pages/example-zk/GenerateProof.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { useState } from "react";
import { CodeText } from "./CodeText";
import SignedStats from "./SignedStats";
import { ethers } from "ethers";
import { AddressInput } from "~~/components/scaffold-eth/Input/AddressInput";
import { ParsedArgs, generateProof } from "~~/hooks/noir/useProofGenerator";
Expand Down Expand Up @@ -91,8 +90,8 @@ export const GenerateProof = ({ requiredBirthYear }: { requiredBirthYear: number
};

return (
<>
<div className="flex-shrink-0 w-full max-w-5xl px-6 pb-6">
<div className="grid grid-cols-2 gap-6 max-w-7xl">
<div>
<p>
One of the reasons that Alice knows that she is not sharing her birth year with anyone is that the proof
generation is open source, and she herself can double check the code. Furthermore she can even generate the
Expand All @@ -116,79 +115,80 @@ export const GenerateProof = ({ requiredBirthYear }: { requiredBirthYear: number
to generate the signed message.
</p>
</div>
<div className="card flex-shrink-0 w-full max-w-lg shadow-2xl bg-base-100">
<SignedStats />
<div className="card-body">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2 sm:gap-8">
<div className="form-control">
<label className="label">
<span className="label-text">*Signed birth year</span>
</label>
<input
type="number"
placeholder="Signed birth year"
className="input input-bordered"
value={birthYear}
onChange={e => setBirthYear(e.target.value)}
/>
<div>
<div className="card w-full shadow-2xl bg-base-100">
<div className="card-body">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2 sm:gap-8">
<div className="form-control">
<label className="label">
<span className="label-text">*Signed birth year</span>
</label>
<input
type="number"
placeholder="Signed birth year"
className="input input-bordered"
value={birthYear}
onChange={e => setBirthYear(e.target.value)}
/>
</div>
<div className="form-control">
<label className="label">
<span className="label-text">Required birth year</span>
</label>
<input
type="number"
placeholder="Required birth year"
className="input input-bordered"
value={form.requiredBirthYear}
onChange={e => setForm({ ...form, requiredBirthYear: Number(e.target.value) })}
/>
</div>
</div>
<div className="form-control">
<label className="label">
<span className="label-text">Required birth year</span>
</label>
<input
type="number"
placeholder="Required birth year"
className="input input-bordered"
value={form.requiredBirthYear}
onChange={e => setForm({ ...form, requiredBirthYear: Number(e.target.value) })}
/>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2 sm:gap-8">
<div className="form-control">
<label className="label">
<span className="label-text">Birth year signature 📜</span>
</label>
<input
type="text"
placeholder="Birth year signature"
className="input input-bordered"
value={form.proofOfBirthYearSignedMessage}
onChange={e => setForm({ ...form, proofOfBirthYearSignedMessage: e.target.value })}
/>
</div>
<div className="form-control">
<label className="label">
<span className="label-text">Public key of signer 🏛</span>
</label>
<input
type="text"
placeholder="Public key of signer"
className="input input-bordered"
value={form.proofOfBirthYearPublicKey}
onChange={e => setForm({ ...form, proofOfBirthYearPublicKey: e.target.value })}
/>
</div>
</div>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2 sm:gap-8">
<div className="form-control">
<label className="label">
<span className="label-text">Birth year signature 📜</span>
<span className="label-text">*Ethereum address signature</span>
</label>
<input
type="text"
placeholder="Birth year signature"
className="input input-bordered"
value={form.proofOfBirthYearSignedMessage}
onChange={e => setForm({ ...form, proofOfBirthYearSignedMessage: e.target.value })}
<AddressInput
value={ethereumAddress}
name="personEthereumAddress"
placeholder="Ethereum address in signature"
onChange={(value: string) => setEthereumAddress(value)}
/>
</div>
<div className="form-control">
<label className="label">
<span className="label-text">Public key of signer 🏛</span>
</label>
<input
type="text"
placeholder="Public key of signer"
className="input input-bordered"
value={form.proofOfBirthYearPublicKey}
onChange={e => setForm({ ...form, proofOfBirthYearPublicKey: e.target.value })}
/>
<div className="form-control mt-6">
<button className="btn btn-primary" onClick={handleSubmission} disabled={isProofRunning}>
Generate proof ✅
</button>
</div>
</div>
<div className="form-control">
<label className="label">
<span className="label-text">*Ethereum address signature</span>
</label>
<AddressInput
value={ethereumAddress}
name="personEthereumAddress"
placeholder="Ethereum address in signature"
onChange={(value: string) => setEthereumAddress(value)}
/>
</div>
<div className="form-control mt-6">
<button className="btn btn-primary" onClick={handleSubmission} disabled={isProofRunning}>
Generate proof ✅
</button>
</div>
</div>
</div>
</>
</div>
);
};
23 changes: 6 additions & 17 deletions packages/nextjs/pages/example-zk/Stat.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import CopyToClipboard from "react-copy-to-clipboard";
import { DocumentDuplicateIcon } from "@heroicons/react/24/outline";
import { shortenHashString } from "~~/utils/example-zk/short-hash-string";

type StatProps = {
Expand All @@ -12,26 +13,14 @@ const Stat = (props: StatProps) => {
<div className="stat">
<div className="stat-figure text-secondary">
<CopyToClipboard text={props.stat}>
<button className="btn btn-circle btn-outline">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
className="w-6 h-6 cursor-pointer"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75"
/>
</svg>
</button>
<DocumentDuplicateIcon
className="ml-1.5 text-xl font-normal h-5 w-5 text-slate-50 cursor-pointer"
aria-hidden="true"
/>
</CopyToClipboard>
</div>
<div className="stat-title">{props.title}</div>
<div className="stat-value">{shortenHashString(props.stat)}</div>
<div className="stat-value text-base">{shortenHashString(props.stat)}</div>
<div className="stat-desc">{props.description}</div>
</div>
);
Expand Down
2 changes: 2 additions & 0 deletions packages/nextjs/pages/example-zk/ZkSteps.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { Dispatch, SetStateAction, useState } from "react";
import { AgeRestrictedContractExecutor } from "./AgeRestrictedContractExecutor";
import { BirthDateSignature } from "./BirthDateSignature";
import { GenerateProof } from "./GenerateProof";
import SignedStats from "./SignedStats";
import { ZkStepsIntro } from "./ZkStepsIntro";
import type { NextPage } from "next";

Expand Down Expand Up @@ -30,6 +31,7 @@ const ZkSteps: NextPage = () => {

return (
<>
<SignedStats />
{renderZkSteps(currentStep, setCurrentStep)}
<div className="join grid grid-cols-2 mt-8 gap-8">
{currentStep !== FIRST_STEP && (
Expand Down
Loading

0 comments on commit 3633661

Please sign in to comment.