fix: minor improvements to links and text (#42)

Kryha · Sep 8, 2023 · 70550a3 · 70550a3
1 parent bdfce31
commit 70550a3
Show file tree

Hide file tree

Showing 8 changed files with 64 additions and 43 deletions.
diff --git a/packages/nextjs/components/Footer.tsx b/packages/nextjs/components/Footer.tsx
@@ -33,7 +33,7 @@ export const Footer = () => {
           <div className="flex justify-center items-center gap-2 text-sm w-full">
             <div className="text-center">
               <a
-                href="https://github.com/scaffold-eth/se-2"
+                href="https://github.com/Kryha/scaffold-eth-2-noir"
                 target="_blank"
                 rel="noreferrer"
                 className="underline underline-offset-2"
@@ -44,28 +44,27 @@ export const Footer = () => {
             <span>·</span>
             <div>
               <p className="m-0 text-center">
-                Built with <HeartIcon className="inline-block h-4 w-4" /> at 🏰{" "}
+                Built with <HeartIcon className="inline-block h-4 w-4" /> at{" "}
+                <a href="https://kryha.io/" target="_blank" rel="noreferrer" className="underline underline-offset-2">
+                  Kryha
+                </a>
+              </p>
+            </div>
+            <span>·</span>
+            <div>
+              <p className="m-0 text-center">
+                Template from{" "}
                 <a
-                  href="https://buidlguidl.com/"
+                  href="https://scaffoldeth.io"
                   target="_blank"
                   rel="noreferrer"
                   className="underline underline-offset-2"
                 >
-                  BuidlGuidl
-                </a>
+                  scaffold-eth
+                </a>{" "}
+                🏗
               </p>
             </div>
-            <span>·</span>
-            <div className="text-center">
-              <a
-                href="https://t.me/joinchat/KByvmRe5wkR-8F_zz6AjpA"
-                target="_blank"
-                rel="noreferrer"
-                className="underline underline-offset-2"
-              >
-                Support
-              </a>
-            </div>
           </div>
         </ul>
       </div>

diff --git a/packages/nextjs/pages/age-restricted-example/AgeRestrictedContractExecutor.tsx b/packages/nextjs/pages/age-restricted-example/AgeRestrictedContractExecutor.tsx
@@ -1,24 +1,45 @@
+import { useState } from "react";
 import { CodeText } from "./CodeText";
-import { useScaffoldContractWrite } from "~~/hooks/scaffold-eth";
+import { useScaffoldContractRead, useScaffoldContractWrite } from "~~/hooks/scaffold-eth";
 import { useBirthYearProofsStore } from "~~/services/store/birth-year-proofs";
 
+export const BalloonCount = (props: { count: string | undefined }) => {
+  if (props.count) {
+    return <p>Balloon count: {props.count}</p>;
+  }
+
+  return <></>;
+};
+
 export const AgeRestrictedContractExecutor = () => {
   const proof = useBirthYearProofsStore(state => state.proof);
   const setProof = useBirthYearProofsStore(state => state.setProof);
+  const [sender, setSender] = useState("");
+
+  const { data, refetch } = useScaffoldContractRead({
+    contractName: "BalloonToken",
+    functionName: "balanceOf",
+    args: [sender],
+  });
 
   const { writeAsync, isLoading } = useScaffoldContractWrite({
     contractName: "BalloonVendor",
     functionName: "getFreeToken",
     args: [proof],
     onBlockConfirmation: txnReceipt => {
+      if (sender) {
+        refetch();
+      }
+
+      setSender(txnReceipt.from);
       console.log("📦 Transaction blockHash", txnReceipt.blockHash);
     },
   });
 
   return (
     <div className="grid grid-cols-2 gap-6 max-w-7xl">
       <div>
-        <h1 className="text-3xl font-bold">Step 3: Getting the balloon🎈 NFT</h1>
+        <h1 className="text-3xl font-bold">Step 3: Getting the balloon 🎈</h1>
         <p>
           The <strong>Ballon Store</strong> is using the same <CodeText text="TokenVendor.sol" /> contract as the{" "}
           <a className="link" href="https://speedrunethereum.com/challenge/token-vendor">
@@ -45,8 +66,9 @@ export const AgeRestrictedContractExecutor = () => {
         </p>
       </div>
       <div>
-        <div className="card w-full shadow-2xl bg-base-100">
+        <div className="card w-full shadow-2xl bg-base-300">
           <div className="card-body">
+            <BalloonCount count={data?.toString()} />
             <div className="form-control">
               <label className="label">
                 <span className="label-text">Your proof of having the required birth year ✅</span>
@@ -59,8 +81,8 @@ export const AgeRestrictedContractExecutor = () => {
                 onChange={e => setProof(e.target.value as `0x${string}`)}
               />
             </div>
-            <button className="btn btn-secondary mt-6" onClick={() => writeAsync()} disabled={isLoading}>
-              Get free balloon 🎈
+            <button className="btn btn-primary mt-6" onClick={() => writeAsync()} disabled={isLoading}>
+              Get balloon 🎈
             </button>
           </div>
         </div>

diff --git a/packages/nextjs/pages/age-restricted-example/BirthDateSignature.tsx b/packages/nextjs/pages/age-restricted-example/BirthDateSignature.tsx
@@ -88,7 +88,7 @@ export const BirthDateSignature = ({ aliceDefaultAge }: { aliceDefaultAge: numbe
         </p>
       </div>
       <div>
-        <div className="card w-full shadow-2xl bg-base-100">
+        <div className="card w-full shadow-2xl bg-base-300">
           <div className="card-body">
             <div className="form-control">
               <label className="label">
@@ -115,7 +115,7 @@ export const BirthDateSignature = ({ aliceDefaultAge }: { aliceDefaultAge: numbe
             </div>
             <div className="form-control">
               <label className="label">
-                <span className="label-text">Third party&apos;s🏛 private key for signing</span>
+                <span className="label-text">Third party&apos;s 🏛 private key for signing</span>
               </label>
               <input
                 type="text"
@@ -126,7 +126,7 @@ export const BirthDateSignature = ({ aliceDefaultAge }: { aliceDefaultAge: numbe
               />
             </div>
             <div className="form-control">
-              <button className="btn btn-secondary mt-6" onClick={handleSubmission}>
+              <button className="btn btn-primary mt-6" onClick={handleSubmission}>
                 Sign birth year 📜
               </button>
             </div>

diff --git a/packages/nextjs/pages/age-restricted-example/GenerateProof.tsx b/packages/nextjs/pages/age-restricted-example/GenerateProof.tsx
@@ -142,7 +142,7 @@ export const GenerateProof = ({ requiredBirthYear }: { requiredBirthYear: number
         </p>
       </div>
       <div>
-        <div className="card w-full shadow-2xl bg-base-100">
+        <div className="card w-full shadow-2xl bg-base-300">
           <div className="card-body">
             <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 sm:gap-8">
               <div className="form-control">
@@ -208,7 +208,7 @@ export const GenerateProof = ({ requiredBirthYear }: { requiredBirthYear: number
               />
             </div>
             <div className="form-control mt-6">
-              <button className="btn btn-secondary" onClick={handleSubmission} disabled={isProofRunning}>
+              <button className="btn btn-primary" onClick={handleSubmission} disabled={isProofRunning}>
                 Generate proof ✅
               </button>
             </div>

diff --git a/packages/nextjs/pages/age-restricted-example/ZkSteps.tsx b/packages/nextjs/pages/age-restricted-example/ZkSteps.tsx
@@ -43,7 +43,7 @@ const ZkSteps: NextPage = () => {
           <ul className="steps pt-12 steps-vertical md:steps-horizontal">
             <li className="step step-primary">Third party signature 🏛📜</li>
             <li className={`step ${step2ClassName}`}>Generate proof ✅</li>
-            <li className={`step ${step3ClassName}`}>Call contract🎈</li>
+            <li className={`step ${step3ClassName}`}>Call contract 🎈</li>
           </ul>
           <div className="join grid grid-cols-2 mt-8 gap-8">
             <>

diff --git a/packages/nextjs/pages/age-restricted-example/ZkStepsIntro.tsx b/packages/nextjs/pages/age-restricted-example/ZkStepsIntro.tsx
@@ -10,26 +10,26 @@ export const ZkStepsIntro = ({ setCurrentStep, yearTenYearsAgo }: ZkStepsIntroPr
         <div className="max-w-3xl">
           <div className="flex flex-col justify-center items-center">
             <h1 className="text-5xl font-bold">ZK Age Restriction</h1>
-            <p className="py-6">
-              Alice has heard that balloon store in town is handing out balloons🎈 to anyone who is 10 years old or
+            <p className="py-6 text-left">
+              Alice has heard that balloon store in town is handing out balloons 🎈 to anyone who is 10 years old or
               younger. However, Alice does not want to share her age with anyone. Lucky for her, the balloon store has a
-              zero knowledge proof solution. This means she can claim her balloon🎈 and only share as little information
-              as necessary publicly. Here is how she would go about it...
+              zero knowledge proof solution. This means she can claim her balloon 🎈 and only share as little
+              information as necessary publicly. Here is how she would go about it...
               <br />
             </p>
             <ol className="list-decimal list-inside text-left">
               {/* When the list is centered it looks weird, but perhaps there is another solution than `text-left`?*/}
               <li>
-                First, she needs to find a trusted third party🏛 that can give her an official signature📜 that she is
+                First, she needs to find a trusted third party 🏛 that can give her an official signature 📜 that she is
                 born in a specific year.
               </li>
               <li>
-                Then, she needs to generate a zero knowledge proof✅. It should prove that the signed birth year is
-                greater than or equal to {yearTenYearsAgo} and that the signature📜 is done by a known public key.
+                Then, she needs to generate a zero knowledge proof ✅. It should prove that the signed birth year is
+                greater than or equal to {yearTenYearsAgo} and that the signature 📜 is done by a known public key.
               </li>
               <li>
-                Finally, Alice can call the balloon store&apos;s age restricted contract with her proof✅ and get a
-                balloon🎈.
+                Finally, Alice can call the balloon store&apos;s age restricted contract with her proof ✅ and get a
+                balloon 🎈.
               </li>
             </ol>
           </div>

diff --git a/packages/nextjs/tailwind.config.js b/packages/nextjs/tailwind.config.js
@@ -36,15 +36,15 @@ module.exports = {
         darkTheme: {
           primary: "#231735",
           "primary-content": "#F0F0F0",
-          secondary: "#2F1F49",
+          secondary: "#523B78",
           "secondary-content": "#F0F0F0",
           accent: "#99A5EE",
           "accent-content": "#231735",
           neutral: "#F0F0F0",
           "neutral-content": "#231735",
           "base-100": "#231735",
           "base-200": "#231735",
-          "base-300": "#2F1F49",
+          "base-300": "#523B78",
           "base-content": "#F0F0F0",
           info: "#231735",
           success: "#34EEB6",

diff --git a/yarn.lock b/yarn.lock
@@ -2988,7 +2988,7 @@ __metadata:
 "@noir-lang/acvm_js@git+https://[email protected]/noir-lang/acvm-js-wasm.git#b9d9ca9dfc5140839f23998d9466307215607c42":
   version: 0.0.0-d576736
   resolution: "@noir-lang/acvm_js@https://[email protected]/noir-lang/acvm-js-wasm.git#commit=b9d9ca9dfc5140839f23998d9466307215607c42"
-  checksum: cdb9a389ba07a3ea05fdf3676448bf8ff058f9e30c6ad0cac7fde9738963a19f4a871f48f4656c5a26ef485e0a8872ac0b37d10c65a899fb0be8ae0a8f47e4df
+  checksum: 2c7f8ccd48d66533bfc7e0d13418f5d1130e0bdbd3484dd1bc62b45a61d15bb3571036cf17931eca36e57cac319bf130d01614ea7c2dc3bd50ca681d3b60e81b
   languageName: node
   linkType: hard
 
@@ -16144,9 +16144,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"se-2@workspace:.":
+"se-2-noir@workspace:.":
   version: 0.0.0-use.local
-  resolution: "se-2@workspace:."
+  resolution: "se-2-noir@workspace:."
   dependencies:
     husky: ^8.0.1
     lint-staged: ^13.0.3
@@ -18162,9 +18162,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"usehooks-ts@patch:usehooks-ts@npm:^2.7.2#./.yarn/patches/usehooks-ts-npm-2.7.2-fceffe0e43.patch::locator=se-2%40workspace%3A.":
+"usehooks-ts@patch:usehooks-ts@npm:^2.7.2#./.yarn/patches/usehooks-ts-npm-2.7.2-fceffe0e43.patch::locator=se-2-noir%40workspace%3A.":
   version: 2.9.1
-  resolution: "usehooks-ts@patch:usehooks-ts@npm%3A2.9.1#./.yarn/patches/usehooks-ts-npm-2.7.2-fceffe0e43.patch::version=2.9.1&hash=68bde7&locator=se-2%40workspace%3A."
+  resolution: "usehooks-ts@patch:usehooks-ts@npm%3A2.9.1#./.yarn/patches/usehooks-ts-npm-2.7.2-fceffe0e43.patch::version=2.9.1&hash=68bde7&locator=se-2-noir%40workspace%3A."
   peerDependencies:
     react: ^16.8.0  || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0  || ^17.0.0 || ^18.0.0