Challenge 5 backmerge v2 (#103)

* Ignore typescript/eslint errors on build (#39) * fix: sepolia and wc2 (#47) * fix: theme toggle styles (#46) * migration to wagmi V1, Viem and daisyUI v3 (#73) * remove vercel:yolo from root pacakge.json (#77) * Update useScaffoldContractWrite.ts - Error message typos * fix 0 price on sepolia network (#85) * fix: side quest heading (#87) * Pre-app-router se-2 backmerge (#96) * fix: remove vercel:yolo * fix: new interval api * remove use of custom light blue color for copy icon (#104) * Delete light blue color on txhash copy icons * Increase placeholder readability in dark mode * fix: infinite useEffect * fix: two rubes received bug * fix: last event emitting bug * fix: double setChannels bug 🤯 * Comment Checkpoint 5 code --------- Co-authored-by: Carlos Sánchez <oceanrdn@gmail.com> Co-authored-by: Shiv Bhonde | shivbhonde.eth <shivbhonde04@gmail.com> Co-authored-by: Zak G <zakgriffith@gmail.com> Co-authored-by: Pankaj Kumar <pkmahan786@gmail.com> Co-authored-by: tokodev <pablo@asdloop.com>
scaffold-eth · Oct 15, 2023 · dbc2325 · dbc2325
1 parent e6e3747
commit dbc2325
Show file tree

Hide file tree

Showing 27 changed files with 829 additions and 544 deletions.
diff --git a/package.json b/package.json
@@ -26,8 +26,7 @@
     "next:check-types": "yarn workspace @se-2/nextjs check-types",
     "postinstall": "husky install",
     "precommit": "lint-staged",
-    "vercel": "yarn workspace @se-2/nextjs vercel",
-    "vercel:yolo": "yarn workspace @se-2/nextjs vercel:yolo"
+    "vercel": "yarn workspace @se-2/nextjs vercel"
   },
   "packageManager": "yarn@3.2.3",
   "devDependencies": {

diff --git a/packages/hardhat/hardhat.config.ts b/packages/hardhat/hardhat.config.ts
@@ -16,7 +16,16 @@ const deployerPrivateKey =
 const etherscanApiKey = process.env.ETHERSCAN_API_KEY || "DNXJA8RX2Q3VZ4URQIWP7Z68CJXQZSC6AW";
 
 const config: HardhatUserConfig = {
-  solidity: "0.8.4",
+  solidity: {
+    version: "0.8.4",
+    settings: {
+      optimizer: {
+        enabled: true,
+        // https://docs.soliditylang.org/en/latest/using-the-compiler.html#optimizer-options
+        runs: 200,
+      },
+    },
+  },
   defaultNetwork: "localhost",
   namedAccounts: {
     deployer: {
@@ -69,6 +78,14 @@ const config: HardhatUserConfig = {
       url: `https://polygon-mumbai.g.alchemy.com/v2/${providerApiKey}`,
       accounts: [deployerPrivateKey],
     },
+    polygonZkEvm: {
+      url: `https://polygonzkevm-mainnet.g.alchemy.com/v2/${providerApiKey}`,
+      accounts: [deployerPrivateKey],
+    },
+    polygonZkEvmTestnet: {
+      url: `https://polygonzkevm-testnet.g.alchemy.com/v2/${providerApiKey}`,
+      accounts: [deployerPrivateKey],
+    },
     zkSyncTestnet: {
       url: "https://testnet.era.zksync.dev",
       zksync: true,

diff --git a/packages/hardhat/package.json b/packages/hardhat/package.json
@@ -36,14 +36,14 @@
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",
     "ethers": "^5.7.1",
-    "hardhat": "^2.11.2",
+    "hardhat": "^2.17.3",
     "hardhat-deploy": "^0.11.26",
     "hardhat-gas-reporter": "^1.0.9",
     "prettier": "^2.8.4",
     "solidity-coverage": "^0.8.2",
     "ts-node": "^10.9.1",
     "typechain": "^8.1.0",
-    "typescript": "^4.9.5"
+    "typescript": "^5.1.6"
   },
   "dependencies": {
     "@openzeppelin/contracts": "^4.8.1",

diff --git a/packages/nextjs/.env.example b/packages/nextjs/.env.example
@@ -0,0 +1,13 @@
+# Template for NextJS environment variables.
+
+# For local development, copy this file, rename it to .env.local, and fill in the values.
+# When deploying live, you'll need to store the vars in Vercel/System config.
+
+# If not set, we provide default values (check `scaffold.config.ts`) so developers can start prototyping out of the box,
+# but we recommend getting your own API Keys for Production Apps.
+
+# To access the values stored in this env file you can use: process.env.VARIABLENAME
+# You'll need to prefix the variables names with NEXT_PUBLIC_ if you want to access them on the client side.
+# More info: https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables
+NEXT_PUBLIC_ALCHEMY_API_KEY=
+NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=
diff --git a/packages/nextjs/components/Footer.tsx b/packages/nextjs/components/Footer.tsx
@@ -1,5 +1,6 @@
 import { hardhat } from "wagmi/chains";
 import { CurrencyDollarIcon } from "@heroicons/react/24/outline";
+import { HeartIcon } from "@heroicons/react/24/outline";
 import { SwitchTheme } from "~~/components/SwitchTheme";
 import { Faucet } from "~~/components/scaffold-eth";
 import { useGlobalState } from "~~/services/store/store";
@@ -12,7 +13,7 @@ export const Footer = () => {
   const nativeCurrencyPrice = useGlobalState(state => state.nativeCurrencyPrice);
 
   return (
-    <div className="min-h-0 p-5 mb-11 lg:mb-0">
+    <div className="min-h-0 py-5 px-1 mb-11 lg:mb-0">
       <div>
         <div className="fixed flex justify-between items-center w-full z-10 p-4 bottom-0 left-0 pointer-events-none">
           <div className="flex space-x-2 pointer-events-auto">
@@ -30,28 +31,32 @@ export const Footer = () => {
       <div className="w-full">
         <ul className="menu menu-horizontal w-full">
           <div className="flex justify-center items-center gap-2 text-sm w-full">
-            <div>
-              Built with 🏗{" "}
+            <div className="text-center">
               <a
                 href="https://github.com/scaffold-eth/scaffold-eth-2/"
                 target="_blank"
                 rel="noreferrer"
                 className="underline underline-offset-2"
               >
                 Scaffold-ETH 2
-              </a>{" "}
-              at 🏰{" "}
-              <a
-                href="https://buidlguidl.com/"
-                target="_blank"
-                rel="noreferrer"
-                className="underline underline-offset-2"
-              >
-                BuidlGuidl
               </a>
             </div>
             <span>·</span>
             <div>
+              <p className="m-0 text-center">
+                Built with <HeartIcon className="inline-block h-4 w-4" /> at 🏰{" "}
+                <a
+                  href="https://buidlguidl.com/"
+                  target="_blank"
+                  rel="noreferrer"
+                  className="underline underline-offset-2"
+                >
+                  BuidlGuidl
+                </a>
+              </p>
+            </div>
+            <span>·</span>
+            <div className="text-center">
               <a
                 href="https://t.me/joinchat/KByvmRe5wkR-8F_zz6AjpA"
                 target="_blank"

diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
@@ -16,7 +16,7 @@ const NavLink = ({ href, children }: { href: string; children: React.ReactNode }
       passHref
       className={`${
         isActive ? "bg-secondary shadow-md" : ""
-      } hover:bg-secondary hover:shadow-md focus:!bg-secondary active:!text-neutral py-1.5 px-3 text-sm rounded-full gap-2 grid grid-flow-col`}
+      } hover:bg-secondary hover:shadow-md focus:!bg-secondary py-1.5 px-3 text-sm rounded-full gap-2`}
     >
       {children}
     </Link>

diff --git a/packages/nextjs/components/blockexplorer/SearchBar.tsx b/packages/nextjs/components/blockexplorer/SearchBar.tsx
@@ -33,7 +33,7 @@ export const SearchBar = () => {
   return (
     <form onSubmit={handleSearch} className="flex items-center justify-end mb-5 space-x-3 mx-5">
       <input
-        className="border-primary bg-base-100 text-base-content p-2 mr-2 w-full md:w-1/2 lg:w-1/3 rounded-md shadow-md focus:outline-none focus:ring-2 focus:ring-accent"
+        className="border-primary bg-base-100 text-base-content placeholder-base-content p-2 mr-2 w-full md:w-1/2 lg:w-1/3 rounded-md shadow-md focus:outline-none focus:ring-2 focus:ring-accent"
         type="text"
         value={searchInput}
         placeholder="Search by hash or address"

diff --git a/packages/nextjs/components/blockexplorer/TransactionHash.tsx b/packages/nextjs/components/blockexplorer/TransactionHash.tsx
@@ -12,10 +12,7 @@ export const TransactionHash = ({ hash }: { hash: string }) => {
         {hash?.substring(0, 6)}...{hash?.substring(hash.length - 4)}
       </Link>
       {addressCopied ? (
-        <CheckCircleIcon
-          className="ml-1.5 text-xl font-normal text-sky-600 h-5 w-5 cursor-pointer"
-          aria-hidden="true"
-        />
+        <CheckCircleIcon className="ml-1.5 text-xl font-normal h-5 w-5 cursor-pointer" aria-hidden="true" />
       ) : (
         <CopyToClipboard
           text={hash as string}
@@ -26,10 +23,7 @@ export const TransactionHash = ({ hash }: { hash: string }) => {
             }, 800);
           }}
         >
-          <DocumentDuplicateIcon
-            className="ml-1.5 text-xl font-normal text-sky-600 h-5 w-5 cursor-pointer"
-            aria-hidden="true"
-          />
+          <DocumentDuplicateIcon className="ml-1.5 text-xl font-normal h-5 w-5 cursor-pointer" aria-hidden="true" />
         </CopyToClipboard>
       )}
     </div>

diff --git a/packages/nextjs/components/blockexplorer/TransactionsTable.tsx b/packages/nextjs/components/blockexplorer/TransactionsTable.tsx
@@ -4,7 +4,7 @@ import { Address } from "~~/components/scaffold-eth";
 import { TransactionWithFunction, getTargetNetwork } from "~~/utils/scaffold-eth";
 import { TransactionsTableProps } from "~~/utils/scaffold-eth/";
 
-export const TransactionsTable = ({ blocks, transactionReceipts, isLoading }: TransactionsTableProps) => {
+export const TransactionsTable = ({ blocks, transactionReceipts }: TransactionsTableProps) => {
   const targetNetwork = getTargetNetwork();
 
   return (
@@ -22,64 +22,47 @@ export const TransactionsTable = ({ blocks, transactionReceipts, isLoading }: Tr
               <th className="bg-primary text-end">Value ({targetNetwork.nativeCurrency.symbol})</th>
             </tr>
           </thead>
-          {isLoading ? (
-            <tbody>
-              {[...Array(20)].map((_, rowIndex) => (
-                <tr
-                  key={rowIndex}
-                  className="bg-base-200 hover:bg-base-300 transition-colors duration-200 h-12 text-sm"
-                >
-                  {[...Array(7)].map((_, colIndex) => (
-                    <td className="w-1/12 md:py-4" key={colIndex}>
-                      <div className="h-2 bg-gray-200 rounded-full animate-pulse"></div>
-                    </td>
-                  ))}
-                </tr>
-              ))}
-            </tbody>
-          ) : (
-            <tbody>
-              {blocks.map(block =>
-                (block.transactions as TransactionWithFunction[]).map(tx => {
-                  const receipt = transactionReceipts[tx.hash];
-                  const timeMined = new Date(Number(block.timestamp) * 1000).toLocaleString();
-                  const functionCalled = tx.input.substring(0, 10);
+          <tbody>
+            {blocks.map(block =>
+              (block.transactions as TransactionWithFunction[]).map(tx => {
+                const receipt = transactionReceipts[tx.hash];
+                const timeMined = new Date(Number(block.timestamp) * 1000).toLocaleString();
+                const functionCalled = tx.input.substring(0, 10);
 
-                  return (
-                    <tr key={tx.hash} className="hover text-sm">
-                      <td className="w-1/12 md:py-4">
-                        <TransactionHash hash={tx.hash} />
-                      </td>
-                      <td className="w-2/12 md:py-4">
-                        {tx.functionName === "0x" ? "" : <span className="mr-1">{tx.functionName}</span>}
-                        {functionCalled !== "0x" && (
-                          <span className="badge badge-primary font-bold text-xs">{functionCalled}</span>
-                        )}
-                      </td>
-                      <td className="w-1/12 md:py-4">{block.number?.toString()}</td>
-                      <td className="w-2/1 md:py-4">{timeMined}</td>
-                      <td className="w-2/12 md:py-4">
-                        <Address address={tx.from} size="sm" />
-                      </td>
-                      <td className="w-2/12 md:py-4">
-                        {!receipt?.contractAddress ? (
-                          tx.to && <Address address={tx.to} size="sm" />
-                        ) : (
-                          <div className="relative">
-                            <Address address={receipt.contractAddress} size="sm" />
-                            <small className="absolute top-4 left-4">(Contract Creation)</small>
-                          </div>
-                        )}
-                      </td>
-                      <td className="text-right md:py-4">
-                        {formatEther(tx.value)} {targetNetwork.nativeCurrency.symbol}
-                      </td>
-                    </tr>
-                  );
-                }),
-              )}
-            </tbody>
-          )}
+                return (
+                  <tr key={tx.hash} className="hover text-sm">
+                    <td className="w-1/12 md:py-4">
+                      <TransactionHash hash={tx.hash} />
+                    </td>
+                    <td className="w-2/12 md:py-4">
+                      {tx.functionName === "0x" ? "" : <span className="mr-1">{tx.functionName}</span>}
+                      {functionCalled !== "0x" && (
+                        <span className="badge badge-primary font-bold text-xs">{functionCalled}</span>
+                      )}
+                    </td>
+                    <td className="w-1/12 md:py-4">{block.number?.toString()}</td>
+                    <td className="w-2/1 md:py-4">{timeMined}</td>
+                    <td className="w-2/12 md:py-4">
+                      <Address address={tx.from} size="sm" />
+                    </td>
+                    <td className="w-2/12 md:py-4">
+                      {!receipt?.contractAddress ? (
+                        tx.to && <Address address={tx.to} size="sm" />
+                      ) : (
+                        <div className="relative">
+                          <Address address={receipt.contractAddress} size="sm" />
+                          <small className="absolute top-4 left-4">(Contract Creation)</small>
+                        </div>
+                      )}
+                    </td>
+                    <td className="text-right md:py-4">
+                      {formatEther(tx.value)} {targetNetwork.nativeCurrency.symbol}
+                    </td>
+                  </tr>
+                );
+              }),
+            )}
+          </tbody>
         </table>
       </div>
     </div>

diff --git a/packages/nextjs/components/scaffold-eth/Address.tsx b/packages/nextjs/components/scaffold-eth/Address.tsx
@@ -1,11 +1,11 @@
 import { useEffect, useState } from "react";
 import Link from "next/link";
-import Blockies from "react-blockies";
 import { CopyToClipboard } from "react-copy-to-clipboard";
 import { isAddress } from "viem";
 import { useEnsAvatar, useEnsName } from "wagmi";
 import { hardhat } from "wagmi/chains";
 import { CheckCircleIcon, DocumentDuplicateIcon } from "@heroicons/react/24/outline";
+import { BlockieAvatar } from "~~/components/scaffold-eth";
 import { getBlockExplorerAddressLink, getTargetNetwork } from "~~/utils/scaffold-eth";
 
 type TAddressProps = {
@@ -78,24 +78,11 @@ export const Address = ({ address, disableAddressLink, format, size = "base" }:
   return (
     <div className="flex items-center">
       <div className="flex-shrink-0">
-        {ensAvatar ? (
-          // Don't want to use nextJS Image here (and adding remote patterns for the URL)
-          // eslint-disable-next-line
-          <img
-            className="rounded-full"
-            src={ensAvatar}
-            width={(blockieSizeMap[size] * 24) / blockieSizeMap["base"]}
-            height={(blockieSizeMap[size] * 24) / blockieSizeMap["base"]}
-            alt={`${address} avatar`}
-          />
-        ) : (
-          <Blockies
-            className="mx-auto rounded-full"
-            size={blockieSizeMap[size]}
-            seed={address.toLowerCase()}
-            scale={3}
-          />
-        )}
+        <BlockieAvatar
+          address={address}
+          ensImage={ensAvatar}
+          size={(blockieSizeMap[size] * 24) / blockieSizeMap["base"]}
+        />
       </div>
       {disableAddressLink ? (
         <span className={`ml-1.5 text-${size} font-normal`}>{displayAddress}</span>
@@ -114,10 +101,7 @@ export const Address = ({ address, disableAddressLink, format, size = "base" }:
         </a>
       )}
       {addressCopied ? (
-        <CheckCircleIcon
-          className="ml-1.5 text-xl font-normal text-sky-600 h-5 w-5 cursor-pointer"
-          aria-hidden="true"
-        />
+        <CheckCircleIcon className="ml-1.5 text-xl font-normal h-5 w-5 cursor-pointer" aria-hidden="true" />
       ) : (
         <CopyToClipboard
           text={address}
@@ -128,10 +112,7 @@ export const Address = ({ address, disableAddressLink, format, size = "base" }:
             }, 800);
           }}
         >
-          <DocumentDuplicateIcon
-            className="ml-1.5 text-xl font-normal text-sky-600 h-5 w-5 cursor-pointer"
-            aria-hidden="true"
-          />
+          <DocumentDuplicateIcon className="ml-1.5 text-xl font-normal h-5 w-5 cursor-pointer" aria-hidden="true" />
         </CopyToClipboard>
       )}
     </div>

diff --git a/packages/nextjs/components/scaffold-eth/BlockieAvatar.tsx b/packages/nextjs/components/scaffold-eth/BlockieAvatar.tsx
@@ -1,12 +1,15 @@
 import { AvatarComponent } from "@rainbow-me/rainbowkit";
-import Blockies from "react-blockies";
+import { blo } from "blo";
 
 // Custom Avatar for RainbowKit
-export const BlockieAvatar: AvatarComponent = ({ address, ensImage, size }) =>
-  ensImage ? (
-    // Don't want to use nextJS Image here (and adding remote patterns for the URL)
-    // eslint-disable-next-line
-    <img className="rounded-full" src={ensImage} width={size} height={size} alt={`${address} avatar`} />
-  ) : (
-    <Blockies className="rounded-full" seed={address?.toLowerCase() as string} scale={size > 30 ? 10 : 3.75} />
-  );
+export const BlockieAvatar: AvatarComponent = ({ address, ensImage, size }) => (
+  // Don't want to use nextJS Image here (and adding remote patterns for the URL)
+  // eslint-disable-next-line @next/next/no-img-element
+  <img
+    className="rounded-full"
+    src={ensImage || blo(address as `0x${string}`)}
+    width={size}
+    height={size}
+    alt={`${address} avatar`}
+  />
+);