Added load key functionality and technologies to About

packages/nextjs/app/about/About.tsx

@@ -13,7 +13,7 @@ export interface Post extends Partial<NFTMetaData> {
 }
 
 export const About = () => {
-  const [usdcPrice, setUsdcPrice] = useState<number>();
+  const [usdcPrice, setUsdcPrice] = useState<number>(1);
   // const [averageUsdcPrice, setAverageUsdcPrice] = useState<number>();
   const averageUsdcPrice = "";
 
@@ -270,6 +270,78 @@ export const About = () => {
         )}
       </div>
 
+      <div className="w-full pt-6 bg-base-100">
+        <h1 className="text-4xl font-bold font-mono text-center">Tech stack! 🤘</h1>
+      </div>
+
+      <div className="hero bg-base-100 flex flex-wrap justify-around gap-3 py-4 lg:p-4">
+        <div className="card lg:h-[280px] max-w-[400px] flex flex-col justify-between bg-base-300 shadow-xl">
+          <div className="card-body items-center text-center flex-grow overflow-hidden">
+            <Image src="/usdc-logo.png" alt="USDC logo" width={70} height={70} />
+            <h2 className="card-title text-2xl font-mono">Circle USDC</h2>
+            <p>
+              Payment for likes and comments is done with{" "}
+              <Link href="https://circle.com/" target="_blank">
+                <span className="pr-1 text-blue-600 font-bold underline underline-offset-2">USDC</span>
+                <Image src="/usdc-logo.png" alt="USDC logo" width={20} height={20} className="inline-block" />
+              </Link>{" "}
+              for easy accountability.
+            </p>
+          </div>
+        </div>
+
+        <div className="card lg:h-[280px] max-w-[400px] flex flex-col justify-between bg-base-300 shadow-xl">
+          <div className="card-body items-center text-center flex-grow overflow-hidden">
+            <Image src="/chainlink-logo.png" alt="Chainlink logo" width={70} height={70} />
+            <h2 className="card-title text-2xl font-mono">Chainlink CCIP</h2>
+            <p>
+              Bridge NFTs and USDC to other blockchains using{" "}
+              <Link href="https://chain.link/cross-chain" target="_blank">
+                <span className="pr-1 text-blue-600 font-bold underline underline-offset-2">Chainlink CCIP</span>
+                <Image src="/chainlink-logo.png" alt="Chainlink logo" width={20} height={20} className="inline-block" />
+              </Link>
+              .
+            </p>
+          </div>
+        </div>
+
+        <div className="card lg:h-[280px] max-w-[400px] flex flex-col justify-between bg-base-300 shadow-xl">
+          <div className="card-body items-center text-center flex-grow overflow-hidden">
+            <Image src="/thegraph-logo.png" alt="The Graph logo" width={70} height={70} />
+            <h2 className="card-title text-2xl font-mono">The Graph</h2>
+            <p>
+              Using{" "}
+              <Link href="https://thegraph.com/" target="_blank">
+                <span className="pr-1 text-blue-600 font-bold underline underline-offset-2">The Graph</span>
+                <Image src="/thegraph-logo.png" alt="The Graph logo" width={20} height={20} className="inline-block" />
+              </Link>{" "}
+              provides efficient, scalable, and real-time querying of blockchain data for Web3 dApps.
+            </p>
+          </div>
+        </div>
+
+        <div className="card lg:h-[280px] max-w-[400px] flex flex-col justify-between bg-base-300 shadow-xl">
+          <div className="card-body items-center text-center flex-grow overflow-hidden">
+            <Image src="/scaffold-eth.svg" alt="Scaffold-ETH 2 logo" width={70} height={70} />
+            <h2 className="card-title text-2xl font-mono">Scaffold-ETH 2</h2>
+            <p>
+              Built with{" "}
+              <Link href="https://scaffoldeth.io/" target="_blank">
+                <span className="pr-1 text-blue-600 font-bold underline underline-offset-2">Scaffold-ETH 2</span>
+                <Image
+                  src="/scaffold-eth.svg"
+                  alt="Scaffold-ETH 2 logo"
+                  width={20}
+                  height={20}
+                  className="inline-block"
+                />
+              </Link>{" "}
+              , using the latest tech stack to build web3 dApps.
+            </p>
+          </div>
+        </div>
+      </div>
+
       <div className="w-full  bg-yellow-500">
         <div className="flex flex-col p-6 justify-center items-center  bg-yellow-500 text-black">
           <h1 className="text-4xl font-mono text-center">Wanna know how we&apos;re doing?</h1>

packages/nextjs/components/punk-society/ConfigMenu/LoadPrivateKeyModal.tsx

@@ -1,27 +1,30 @@
-import Image from "next/image";
+import { useState } from "react";
+import { InputBase } from "~~/components/scaffold-eth";
 
 type LoadPrivateKeyModalProps = {
   modalId: string;
 };
 
 export const LoadPrivateKeyModal = ({ modalId }: LoadPrivateKeyModalProps) => {
+  const [privateKey, setPrivateKey] = useState("");
+
   const handleLoadPrivateKeyClick = () => {
-    window.open("https://core.app/es/", "_blank");
+    localStorage.setItem("burnerWallet.pk", privateKey);
+    window.location.reload();
   };
   return (
     <>
       <div>
         <input type="checkbox" id={`${modalId}`} className="modal-toggle" />
         <label htmlFor={`${modalId}`} className="modal cursor-pointer">
           <label className="modal-box relative" htmlFor="">
-            <div className="flex flex-col justify-center items-center text-center">
-              <h2 className="text-xl font-bold mb-4 text-red-600">Sorry, we can&apos;t load private keys yet.</h2>
-              <button
-                onClick={handleLoadPrivateKeyClick}
-                className="btn btn-primary border-0 flex items-center bg-black hover:bg-green-600 active:bg-green-600"
-              >
-                <Image src="/corewallet.png" alt="Import your key in Core!" width={40} height={40} className="mr-2" />
-                Import your key in Core!
+            <div className="flex flex-col justify-center items-center gap-3 text-center">
+              <h2 className="text-xl font-bold  text-green-600 text-wrap">
+                Enter your private key to load your account
+              </h2>
+              <InputBase value={privateKey} onChange={setPrivateKey} placeholder="Enter your private key" />
+              <button onClick={handleLoadPrivateKeyClick} className="btn btn-success border-0 flex items-center ">
+                Load account!
               </button>
               <label
                 htmlFor={`${modalId}`}