Pre-app-router se-2 backmerge (#96)

scaffold-eth · Oct 1, 2023 · 81a204a · 81a204a
1 parent d961e93
commit 81a204a
Show file tree

Hide file tree

Showing 23 changed files with 796 additions and 501 deletions.
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.17",
+  solidity: {
+    version: "0.8.17",
+    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/hardhat/test/ChallengeN.ts b/packages/hardhat/test/ChallengeN.ts
@@ -0,0 +1 @@
+// Your tests
diff --git a/packages/hardhat/test/YouContract.ts b/packages/hardhat/test/YouContract.ts
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/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>

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`}
+  />
+);
diff --git a/packages/nextjs/components/scaffold-eth/Input/AddressInput.tsx b/packages/nextjs/components/scaffold-eth/Input/AddressInput.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useState } from "react";
-import Blockies from "react-blockies";
+import { blo } from "blo";
 import { isAddress } from "viem";
 import { Address } from "viem";
 import { useEnsAddress, useEnsAvatar, useEnsName } from "wagmi";
@@ -74,7 +74,11 @@ export const AddressInput = ({ value, name, placeholder, onChange, disabled }: C
           </div>
         )
       }
-      suffix={value && <Blockies className="!rounded-full" seed={value?.toLowerCase() as string} size={7} scale={5} />}
+      suffix={
+        // Don't want to use nextJS Image here (and adding remote patterns for the URL)
+        // eslint-disable-next-line @next/next/no-img-element
+        value && <img alt="" className="!rounded-full" src={blo(value as `0x${string}`)} width="35" height="35" />
+      }
     />
   );
 };
diff --git a/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton.tsx b/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton.tsx
@@ -96,7 +96,7 @@ export const RainbowKitCustomConnectButton = () => {
                       tabIndex={0}
                       className="btn btn-secondary btn-sm pl-0 pr-2 shadow-md dropdown-toggle gap-0 !h-auto"
                     >
-                      <BlockieAvatar address={account.address} size={24} ensImage={account.ensAvatar} />
+                      <BlockieAvatar address={account.address} size={30} ensImage={account.ensAvatar} />
                       <span className="ml-2 mr-1">{account.displayName}</span>
                       <ChevronDownIcon className="h-6 w-4 ml-2 sm:ml-0" />
                     </label>