Added features from PunkSOciety and improved README

Author: luloxi

README.md

@@ -15,6 +15,7 @@ E-commerce dApp to sell products without intermediaries 💰
 
 ## 🐣 Phase 1 (MVP)
 
+- ✅ **Integrate OnchainKit for Basenames and FundButton** (Reference: [OnchainKit](https://onchainkit.xyz/) | [OnchainKit extension for Scaffold-ETH 2](https://github.com/scaffold-eth/create-eth-extensions/tree/onchainkit))
 - ✅ **BasedArticles contract:** To register articles info
 - ✅ **BasedProfile contract:** To register users bio and email
 - ✅ **BasedShop contract:** To manage products and sales
@@ -23,11 +24,10 @@ E-commerce dApp to sell products without intermediaries 💰
 - ✅ Enable options for sharing on other platforms
 - ✅ Enable bookmarking articles
 - ✅ **Search**: By address, ENS or basename
-- ✅ **Integrate OnchainKit** (Reference: [OnchainKit](https://onchainkit.xyz/)
-- **Individual article viewer**
 
 ## 💰 Phase 2 (Shop features)
 
+- **Individual article viewer**
 - **Escrow system**: Hold funds until the buyer confirms the purchase
 - **Dashboard Insights**: Track and analyze revenue
 - **Stablecoin payment methods:** Pay with native gas or with `$USDC`. (Reference: [Easy2Pay](https://github.com/luloxi/Easy2Pay))
@@ -66,11 +66,15 @@ E-commerce dApp to sell products without intermediaries 💰
 
 ## 🛠️ Technical details
 
-⚙️ Built using Foundry, NextJS, RainbowKit, Wagmi, Viem, and Typescript,
+⚙️ Currently built using [Scaffold-ETH 2](https://scaffoldeth.io/), [Foundry](https://book.getfoundry.sh/), [OnchainKit](https://onchainkit.xyz/), [Pinata](https://pinata.cloud/), [Vercel](https://vercel.com/), [NextJS](https://nextjs.org/), [RainbowKit](https://rainbowkit.com/), [Wagmi](https://wagmi.sh/), [Viem](https://viem.sh/), and [Typescript](https://www.typescriptlang.org/).
+
+🏦 Considering using protocols: [Circle USDC](https://www.circle.com/) as preferredd ERC20 payment method, [The Graph](https://thegraph.com/) for indexing events, [Chainlink](https://chain.link/) for price oracles, [Push Protocol](https://push.org/) for notifications and messages.
+
+📜 Considering using contracts: [ERC20](https://ethereum.org/en/developers/docs/standards/tokens/erc-20/) and [ERC721](https://ethereum.org/en/developers/docs/standards/tokens/erc-721/), [Ownable](https://docs.openzeppelin.com/contracts/2.x/access-control) and [Upgradeable](https://docs.openzeppelin.com/upgrades-plugins/1.x/writing-upgradeable) from [OpenZeppelin](https://www.openzeppelin.com/) or [Solady](https://github.com/Vectorized/solady) for contract ownership. [EIP712 Signatures](https://eips.ethereum.org/EIPS/eip-712) for gasless stuff.
 
-🔗 To be deployed on Base and/or EVM compatible chains
+🔗 To be deployed on Base
 
-📥 To see current development tasks, [see here](https://lulox.notion.site/BasedShop-11e13362a5748056b5bfe8bc5d4ff260?pvs=4)
+📥 To see current development tasks, [see here](https://trello.com/b/j1HVwxL7/basedshop)
 
 ## 📚 Prerequisites
 

packages/nextjs/app/search/Search.tsx

@@ -21,7 +21,7 @@ export const Search = () => {
 
   const handleSearch = async () => {
     if (!searchQuery) {
-      setError("Please enter an address or username.");
+      setError("Please enter an address, ENS or basename.");
       return;
     }
 
@@ -45,13 +45,21 @@ export const Search = () => {
     }
   };
 
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === "Enter") {
+      handleSearch();
+    }
+  };
+
   return (
     <div className="flex flex-col items-center justify-center min-h-screen gap-3">
-      <AddressInput
-        value={searchQuery}
-        onChange={value => setSearchQuery(value.toLowerCase())}
-        placeholder="username, ENS or address"
-      />
+      <div onKeyDown={handleKeyDown}>
+        <AddressInput
+          value={searchQuery}
+          onChange={value => setSearchQuery(value.toLowerCase())}
+          placeholder="basename, ENS or address"
+        />
+      </div>
       <button onClick={handleSearch} disabled={loading} className="btn btn-primary px-6">
         {loading ? <LoadingBars /> : "Go"}
       </button>

packages/nextjs/components/Header.tsx

@@ -4,19 +4,16 @@ import React from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { SwitchTheme } from "./SwitchTheme";
-import { PunkBalance } from "./punk-society/PunkBalance";
-import { PunkConnectButton } from "./punk-society/PunkConnectButton";
+import { PunkConnectButton } from "./punk-society/BasedConnectButton";
+import { ConfigMenu } from "./punk-society/ConfigMenu";
 import { FaucetButton } from "./scaffold-eth";
-import { useAccount } from "wagmi";
 import { ShoppingCartIcon } from "@heroicons/react/24/outline";
-import { BellIcon, HomeIcon, MagnifyingGlassIcon } from "@heroicons/react/24/solid";
+import { BellIcon, EnvelopeIcon, HomeIcon, MagnifyingGlassIcon } from "@heroicons/react/24/solid";
 
 /**
  * Site header
  */
 export const Header = () => {
-  const { address: connectedAddress } = useAccount();
-
   const pathname = usePathname();
 
   return (
@@ -38,36 +35,48 @@ export const Header = () => {
         <div className="flex flex-row gap-3 ">
           <Link href="/" passHref>
             <button
-              className={`bg-transparent hover:bg-base-200 border-none hidden lg:flex flex-row items-center justify-center text-xl ${
+              className={`bg-transparent hover:bg-transparent border-none hidden lg:flex flex-row items-center justify-center text-xl ${
                 pathname === "/" ? "text-blue-600" : ""
               }`}
             >
               <div className="flex flex-row items-center justify-center gap-2">
-                <HomeIcon className="h-6 w-6" />
+                <HomeIcon className="h-6 w-6" /> Home
               </div>
             </button>
           </Link>
 
           <Link href="/search" passHref>
             <button
-              className={`bg-transparent hover:bg-base-200 border-none hidden lg:flex flex-row items-center justify-center text-xl ${
+              className={`bg-transparent hover:bg-bg-transparent border-none hidden lg:flex flex-row items-center justify-center text-xl ${
                 pathname === "/search" ? "text-blue-600" : ""
               }`}
             >
               <div className="flex flex-row items-center justify-center gap-2">
-                <MagnifyingGlassIcon className="h-6 w-6" />
+                <MagnifyingGlassIcon className="h-6 w-6" /> Search
               </div>
             </button>
           </Link>
 
           <Link href="/not-found" passHref>
             <button
-              className={`bg-transparent text-red-600 hover:bg-base-200 border-none hidden lg:flex flex-row items-center justify-center text-xl ${
+              className={`bg-transparent text-red-600 hover:bg-transparent border-none hidden lg:flex flex-row items-center justify-center text-xl ${
                 pathname === "/notifications" ? "text-blue-600" : ""
               }`}
             >
               <div className="flex flex-row items-center justify-center gap-2">
-                <BellIcon className="h-6 w-6" />
+                <BellIcon className="h-6 w-6" /> Notifications
+              </div>
+            </button>
+          </Link>
+
+          <Link href="/not-found" passHref>
+            <button
+              className={`bg-transparent text-red-600 hover:bg-transparent border-none hidden lg:flex flex-row items-center justify-center text-xl ${
+                pathname === "/messages" ? "text-blue-600" : ""
+              }`}
+            >
+              <div className="flex flex-row items-center justify-center gap-2">
+                <EnvelopeIcon className="h-6 w-6" /> Messages
               </div>
             </button>
           </Link>
@@ -105,9 +114,9 @@ export const Header = () => {
               </button>
             </Link>
           </div>
-          <div className="hidden md:flex">
+          {/* <div className="hidden md:flex">
             <PunkBalance address={connectedAddress} />
-          </div>
+          </div> */}
 
           <div className="flex items-center justify-center">
             <PunkConnectButton />
@@ -118,6 +127,9 @@ export const Header = () => {
           </div>
         </div>
         <div className="flex flex-row items-center justify-center gap-3">
+          <div className="">
+            <ConfigMenu />
+          </div>
           <div className="hidden lg:flex ">
             <SwitchTheme />
           </div>

packages/nextjs/components/punk-society/PunkConnectButton/AddressInfoDropdown.tsx renamed to packages/nextjs/components/punk-society/BasedConnectButton/AddressInfoDropdown.tsx

@@ -1,20 +1,16 @@
 import { useRef, useState } from "react";
 import Link from "next/link";
+import { PunkBalance } from "../PunkBalance";
 import { NetworkOptions } from "./NetworkOptions";
 import { FundButton, getOnrampBuyUrl } from "@coinbase/onchainkit/fund";
 import { Avatar, Badge, Identity, Name } from "@coinbase/onchainkit/identity";
-import CopyToClipboard from "react-copy-to-clipboard";
-import { getAddress } from "viem";
 import { Address } from "viem";
 import { useAccount, useDisconnect } from "wagmi";
 import {
   ArrowDownLeftIcon,
   ArrowLeftOnRectangleIcon,
-  ArrowTopRightOnSquareIcon,
   ArrowUpRightIcon,
   ArrowsRightLeftIcon,
-  CheckCircleIcon,
-  DocumentDuplicateIcon,
   UserIcon,
 } from "@heroicons/react/24/outline";
 import { useOutsideClick } from "~~/hooks/scaffold-eth";
@@ -29,12 +25,9 @@ type AddressInfoDropdownProps = {
   ensAvatar?: string;
 };
 
-export const AddressInfoDropdown = ({ address, blockExplorerAddressLink }: AddressInfoDropdownProps) => {
+export const AddressInfoDropdown = ({ address }: AddressInfoDropdownProps) => {
   const { disconnect } = useDisconnect();
   const { address: connectedAddress } = useAccount();
-  const checkSumAddress = getAddress(address);
-
-  const [addressCopied, setAddressCopied] = useState(false);
 
   const [selectingNetwork, setSelectingNetwork] = useState(false);
 
@@ -86,6 +79,9 @@ export const AddressInfoDropdown = ({ address, blockExplorerAddressLink }: Addre
           className="dropdown-content menu z-[2] p-2 mt-2 shadow-center shadow-accent bg-base-200 rounded-box gap-1"
         >
           <NetworkOptions hidden={!selectingNetwork} />
+          <div className={selectingNetwork ? "hidden" : ""}>
+            <PunkBalance address={connectedAddress} />
+          </div>
           <li className={selectingNetwork ? "hidden" : ""}>
             <Link className="p-0 flex items-center justify-center" href={`/profile/${connectedAddress}`} passHref>
               <div className="btn-sm w-full !rounded-xl flex items-center justify-start gap-2 py-3 text-white bg-orange-600 hover:bg-orange-500 active:bg-orange-500">
@@ -97,10 +93,15 @@ export const AddressInfoDropdown = ({ address, blockExplorerAddressLink }: Addre
               </div>
             </Link>
           </li>
+
           <FundButton
             text="Add funds"
             fundingUrl={onrampBuyUrl}
-            className="py-1 px-6 md:px-3.5 gap-0.5 md:gap-1 text-md rounded-xl bg-[#4338CA] hover:bg-[#4f46e5] active:bg-[#4f46e5] justify-start font-normal "
+            className={
+              selectingNetwork
+                ? "hidden"
+                : "py-1 px-6 md:px-3.5 gap-0.5 md:gap-1 text-md rounded-xl bg-[#4338CA] hover:bg-[#4f46e5] active:bg-[#4f46e5] justify-start font-normal "
+            }
           />
           <li className={selectingNetwork ? "hidden" : ""}>
             <button
@@ -133,49 +134,6 @@ export const AddressInfoDropdown = ({ address, blockExplorerAddressLink }: Addre
             </button>
           </li>
 
-          <li className={selectingNetwork ? "hidden" : ""}>
-            {addressCopied ? (
-              <div className="btn-sm !rounded-xl flex gap-3 py-3">
-                <CheckCircleIcon
-                  className="text-xl font-normal h-6 w-4 cursor-pointer ml-2 sm:ml-0"
-                  aria-hidden="true"
-                />
-                <span className=" whitespace-nowrap">Copy address</span>
-              </div>
-            ) : (
-              <CopyToClipboard
-                text={checkSumAddress}
-                onCopy={() => {
-                  setAddressCopied(true);
-                  setTimeout(() => {
-                    setAddressCopied(false);
-                  }, 800);
-                }}
-              >
-                <div className="btn-sm !rounded-xl flex gap-3 py-3">
-                  <DocumentDuplicateIcon
-                    className="text-xl font-normal h-6 w-4 cursor-pointer ml-2 sm:ml-0"
-                    aria-hidden="true"
-                  />
-                  <span className=" whitespace-nowrap">Copy address</span>
-                </div>
-              </CopyToClipboard>
-            )}
-          </li>
-
-          <li className={selectingNetwork ? "hidden" : ""}>
-            <button className="menu-item btn-sm !rounded-xl flex gap-3 py-3" type="button">
-              <ArrowTopRightOnSquareIcon className="h-6 w-4 ml-2 sm:ml-0" />
-              <a
-                target="_blank"
-                href={blockExplorerAddressLink}
-                rel="noopener noreferrer"
-                className="whitespace-nowrap"
-              >
-                View on Block Explorer
-              </a>
-            </button>
-          </li>
           {allowedNetworks.length > 1 ? (
             <li className={selectingNetwork ? "hidden" : ""}>
               <button

packages/nextjs/components/punk-society/PunkConnectButton/AddressQRCodeModal.tsx renamed to packages/nextjs/components/punk-society/BasedConnectButton/AddressQRCodeModal.tsx

@@ -0,0 +1,109 @@
+import { useRef, useState } from "react";
+import { NetworkOptions } from "./NetworkOptions";
+import { Address } from "viem";
+import { useDisconnect } from "wagmi";
+import { Cog6ToothIcon } from "@heroicons/react/20/solid";
+import {
+  ArrowLeftOnRectangleIcon,
+  ArrowTopRightOnSquareIcon,
+  ArrowsRightLeftIcon,
+  QrCodeIcon,
+} from "@heroicons/react/24/outline";
+import { LanguageIcon } from "@heroicons/react/24/solid";
+import { useOutsideClick } from "~~/hooks/scaffold-eth";
+import { getTargetNetworks } from "~~/utils/scaffold-eth";
+
+const allowedNetworks = getTargetNetworks();
+
+type AddressInfoDropdownProps = {
+  address: Address;
+  blockExplorerAddressLink: string | undefined;
+  displayName: string;
+  ensAvatar?: string;
+};
+
+export const AddressInfoDropdown = ({ blockExplorerAddressLink }: AddressInfoDropdownProps) => {
+  const [selectingNetwork, setSelectingNetwork] = useState(false);
+
+  const { disconnect } = useDisconnect();
+
+  const dropdownRef = useRef<HTMLDetailsElement>(null);
+  const closeDropdown = () => {
+    setSelectingNetwork(false);
+    dropdownRef.current?.removeAttribute("open");
+  };
+  useOutsideClick(dropdownRef, closeDropdown);
+
+  return (
+    <>
+      <details ref={dropdownRef} className="dropdown dropdown-end leading-3">
+        <summary
+          tabIndex={0}
+          className="flex items-center justify-center hover:cursor-pointer p-2 shadow-none bg-transparent border-0 btn-sm  dropdown-toggle gap-0 !h-auto"
+        >
+          <Cog6ToothIcon className="h-5 w-5 ml-2 sm:ml-0" />
+        </summary>
+        <ul
+          tabIndex={0}
+          className="dropdown-content menu z-[2] p-2 mt-2 shadow-center shadow-accent bg-base-200 rounded-box gap-1"
+        >
+          <NetworkOptions hidden={!selectingNetwork} />
+
+          <li className={selectingNetwork ? "hidden" : ""}>
+            <label
+              htmlFor="qrcode-modal"
+              className="text-white bg-orange-600 hover:bg-orange-500 active:bg-orange-500 btn-sm !rounded-xl flex gap-3 py-3"
+            >
+              <QrCodeIcon className="h-6 w-4 ml-2 sm:ml-0" />
+              <span className="whitespace-nowrap">View your address</span>
+            </label>
+          </li>
+
+          {allowedNetworks.length > 1 ? (
+            <li className={selectingNetwork ? "hidden" : ""}>
+              <button
+                className="btn-sm !rounded-xl flex gap-3 py-3"
+                type="button"
+                onClick={() => {
+                  setSelectingNetwork(true);
+                }}
+              >
+                <ArrowsRightLeftIcon className="h-4 w-4 ml-2 sm:ml-0" /> <span>Switch Network</span>
+              </button>
+            </li>
+          ) : null}
+          <li className={selectingNetwork ? "hidden" : ""}>
+            <label htmlFor="switch-language-modal" className="btn-sm !rounded-xl flex gap-3 py-3">
+              <LanguageIcon className="h-6 w-4 ml-2 sm:ml-0" />
+              <span className="whitespace-nowrap">Switch languages</span>
+            </label>
+          </li>
+
+          <li className={selectingNetwork ? "hidden" : ""}>
+            <button className="menu-item btn-sm !rounded-xl flex gap-3 py-3" type="button">
+              <ArrowTopRightOnSquareIcon className="h-6 w-4 ml-2 sm:ml-0" />
+              <a
+                target="_blank"
+                href={blockExplorerAddressLink}
+                rel="noopener noreferrer"
+                className="whitespace-nowrap"
+              >
+                View on Block Explorer
+              </a>
+            </button>
+          </li>
+
+          <li className={selectingNetwork ? "hidden" : ""}>
+            <button
+              className="menu-item text-red-600 dark:text-red-500 btn-sm !rounded-xl flex gap-3 py-3"
+              type="button"
+              onClick={() => disconnect()}
+            >
+              <ArrowLeftOnRectangleIcon className="h-6 w-4 ml-2 sm:ml-0" /> <span>Disconnect</span>
+            </button>
+          </li>
+        </ul>
+      </details>
+    </>
+  );
+};