Merge branch 'main' into hero-extensions

scaffold-eth · Nov 29, 2024 · aa03798 · aa03798
2 parents 5f50764 + b58165f
commit aa03798
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 65 deletions.
diff --git a/packages/nextjs/components/Footer.tsx b/packages/nextjs/components/Footer.tsx
@@ -11,7 +11,7 @@ export const Footer = () => {
           <div className="flex justify-center items-center gap-2 text-sm w-full text-white">
             <div>
               <a
-                href="https://github.com/scaffold-eth/scaffold-eth-2"
+                href="https://github.com/scaffold-eth/scaffoldeth.io"
                 target="_blank"
                 rel="noreferrer"
                 className="underline underline-offset-2 hover:opacity-80 transition-opacity"

diff --git a/packages/nextjs/components/HooksExample.tsx b/packages/nextjs/components/HooksExample.tsx
@@ -10,57 +10,34 @@ const Purple = ({ children }: { children: ReactNode }) => <span className="text-
 
 export const HooksExample = () => {
   return (
-    <div className="w-full flex-grow  bg-white rounded-2xl p-6 drop-shadow-[0px_0px_10px_rgba(139,178,241,0.50)]">
+    <div className="mt-0 lg:mt-16 w-full flex-grow  bg-white rounded-2xl p-6 drop-shadow-[0px_0px_10px_rgba(139,178,241,0.50)]">
       <div className="bg-base-300/40 w-full h-full border border-primary rounded-3xl p-4 lg:p-6 text-xs lg:text-sm  font-mono overflow-x-scroll whitespace-nowrap  lg:overflow-auto lg:whitespace-normal">
         <p className="my-3">
-          <Red>import</Red>
-          {" { "} useScaffoldContractWrite {" } "}
+          <Red>import</Red> {"{ "} useScaffoldReadContract {" } "}
           <Red>from</Red> <Cyan>&quot;~~/hooks/scaffold-eth&quot;</Cyan>;
         </p>
+        <p className="my-3">
+          <Red>import</Red> {"{ "} Address {" } "}
+          <Red>from</Red> <Cyan>&quot;~~/components/scaffold-eth&quot;</Cyan>;
+        </p>
 
         <p className="my-3">
-          <Red>const</Red>
-          {" { "}writeAsync, isLoading, isMining{" } "}
+          <Red>const</Red> {"{ "}data: yourContractOwner{" } "}
           <Cyan> = </Cyan>
-          <br />
-          <Purple>useScaffoldContractWrite</Purple>({"{"}
+          <Purple>useScaffoldReadContract</Purple>({"{"}
           <br />
           <span className="inline-block ml-4">
-            <Cyan>contractName</Cyan>: <Cyan dark>&quot;YourContract&quot;</Cyan>,
-            <br />
-            <Cyan>functionName</Cyan>: <Cyan dark>&quot;setPurpose&quot;</Cyan>,
-            <br />
-            <Cyan>args</Cyan>: [<Cyan dark>&quot;The value to set&quot;</Cyan>],
-            <br />
-            <Cyan>blockConfirmation</Cyan>: <Cyan dark>1</Cyan>,
-            <br />
-            <Purple>onBlockConfirmation</Purple>: (txnReceipt) =&gt; {"{"}
-            <br />
-            <span className="inline-block ml-4">
-              console.<Purple>log</Purple>(<Cyan>&quot;Transaction blockHash&quot;</Cyan>, &nbsp;txnReceipt.
-              <Cyan>blockHash</Cyan>
-              );
-            </span>
-            <br />
-            {"}"}
+            <Cyan>contractName</Cyan>: <Cyan dark>&quot;YourContract&quot;</Cyan>,<br />
+            <Cyan>functionName</Cyan>: <Cyan dark>&quot;owner&quot;</Cyan>,<br />
           </span>
           <br />
-          {"}"});
-        </p>
-        <p className="text-gray-400 my-3">
-          {"//"} To send the transaction, you can call the writeAsync function <br className="lg:hidden" /> returned by
-          the hook. Here&apos;s an example usage:
+          {"});"}
+          <br />
         </p>
+
         <p className="my-3">
-          <Red>{"<"}button</Red> className<Cyan>=&quot;btn btn-primary&quot;</Cyan> onClick<Cyan>=</Cyan>
-          {"{"}() <Cyan>=&gt;</Cyan> writeAsync(){"}"}
-          <Red>{">"}</Red>
-          <br />
-          <span className="inline-block ml-4">Send Tx</span>
-          <br />
-          <Red>
-            {"<"}/button{">"}
-          </Red>
+          <Red>{"<"}Address</Red> address<Cyan>=</Cyan>
+          {"{"}yourContractOwner{"}"} <Red>/{">"}</Red>
         </p>
       </div>
     </div>

diff --git a/packages/nextjs/pages/index.tsx b/packages/nextjs/pages/index.tsx
@@ -58,30 +58,32 @@ const Home: NextPage = () => {
             Foundry.
           </p>
           <div className="flex flex-col gap-5 items-center mb-2">
-            <CopyToClipboard
-              text={"npx create-eth@latest"}
-              onCopy={() => {
-                setNpxCommandCopied(true);
-                setTimeout(() => {
-                  setNpxCommandCopied(false);
-                }, 800);
-              }}
-            >
-              <div className="mx-2 flex border-2 border-gray-300 rounded-xl px-3 sm:px-5 py-1 gap-2">
-                <p className="m-0 text-center text-sm sm:text-base">npx create-eth@latest</p>
-                {npxCommandCopied ? (
-                  <CheckCircleIcon
-                    className="text-xl font-normal h-6 w-4 flex-shrink-0 cursor-pointer"
-                    aria-hidden="true"
-                  />
-                ) : (
-                  <DocumentDuplicateIcon
-                    className="text-xl font-normal h-6 w-4 flex-shrink-0 cursor-pointer"
-                    aria-hidden="true"
-                  />
-                )}
-              </div>
-            </CopyToClipboard>
+            <div className="flex items-center gap-2 mx-2">
+              <CopyToClipboard
+                text={"npx create-eth@latest"}
+                onCopy={() => {
+                  setNpxCommandCopied(true);
+                  setTimeout(() => {
+                    setNpxCommandCopied(false);
+                  }, 800);
+                }}
+              >
+                <div className="max-w-sm flex border-2 border-primary rounded-xl px-3 sm:px-5 py-1 gap-2">
+                  <p className="m-0 text-center text-sm sm:text-base font-bold">npx create-eth@latest</p>
+                  {npxCommandCopied ? (
+                    <CheckCircleIcon
+                      className="text-xl font-normal h-6 w-4 cursor-pointer flex-shrink-0"
+                      aria-hidden="true"
+                    />
+                  ) : (
+                    <DocumentDuplicateIcon
+                      className="text-xl font-normal h-6 w-4 cursor-pointer flex-shrink-0"
+                      aria-hidden="true"
+                    />
+                  )}
+                </div>
+              </CopyToClipboard>
+            </div>
             <div className="divider px-6 sm:px-20 my-3">OR</div>
             <div className="flex items-center gap-2 mx-2 mb-1">
               <div className="badge badge-success">New</div>
@@ -232,7 +234,7 @@ const Home: NextPage = () => {
                   }, 800);
                 }}
               >
-                <div className="flex items-center justify-between border-2 border-gray-300 rounded-xl px-3 py-2 text-xs sm:text-sm">
+                <div className="flex items-center justify-between border-2 border-primary rounded-xl px-3 py-2 text-xs sm:text-sm">
                   <p className="m-0 mr-2">npx create-eth@latest -e gitHubUsername/repoName</p>
                   {extensionCommandCopied ? (
                     <CheckCircleIcon

diff --git a/packages/nextjs/public/assets/se2Components.png b/packages/nextjs/public/assets/se2Components.png
diff --git a/packages/nextjs/public/extensions.json b/packages/nextjs/public/extensions.json
@@ -39,6 +39,22 @@
       "installCommand": "npx create-eth@latest -e erc-20",
       "builder": "0x5dCb5f4F39Caa6Ca25380cfc42280330b49d3c93",
       "coBuilders": ["0x60583563D5879C2E59973E5718c7DE2147971807"]
+    },
+    {
+      "name": "eip-5792",
+      "description": "This extension demonstrates on how to use EIP-5792 wallet capabilities. This EIP introduces new JSON-RPC methods for sending multiple calls from the user wallet, and checking their status",
+      "github": "https://github.com/scaffold-eth/create-eth-extensions/tree/eip-5792",
+      "installCommand": "npx create-eth@latest -e eip-5792",
+      "builder": "0x1A2d838c4bbd1e73d162d0777d142c1d783Cb831",
+      "coBuilders": []
+    },
+    {
+      "name": "randao",
+      "description": "This extension shows how to use on-chain randomness using RANDAO for truly on-chain unpredictable random sources.",
+      "github": "https://github.com/scaffold-eth/create-eth-extensions/tree/randao",
+      "installCommand": "npx create-eth@latest -e randao",
+      "builder": "0x5dCb5f4F39Caa6Ca25380cfc42280330b49d3c93",
+      "coBuilders": []
     }
   ]
-}
+}