From 30d9000770e215da9809f8954c55d4e61965736f Mon Sep 17 00:00:00 2001 From: "Shiv Bhonde | shivbhonde.eth" Date: Mon, 23 Oct 2023 14:41:39 +0530 Subject: [PATCH] backmerge latest change to cli (#582) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Tweak DaisyUI `link` (#560) * Improve ENS support (accept all TLDs) (#563) * fix: memo history events (#565) Co-authored-by: Carlos Sánchez * Extract header menu links (#570) * Move Block Explorer to footer (#574) * Remove ExampleUI (pages, components, assets, content) (#578) * update wagmi, viem, rainbowkit (#580) * add zkSync, scroll & polygonZkEvm to foundry.toml * add changeset --------- Co-authored-by: Filip Harald Co-authored-by: Greg <35093316+gskril@users.noreply.github.com> Co-authored-by: Rinat Co-authored-by: Carlos Sánchez --- .changeset/early-actors-tease.md | 9 ++ README.md | 2 +- templates/base/packages/nextjs/.eslintrc.json | 3 +- .../packages/nextjs/components/Footer.tsx | 29 +++- .../packages/nextjs/components/Header.tsx | 83 +++++----- .../blockexplorer/AddressStorageTab.tsx | 2 +- .../components/blockexplorer/SearchBar.tsx | 2 +- .../components/example-ui/ContractData.tsx | 148 ------------------ .../example-ui/ContractInteraction.tsx | 91 ----------- .../components/example-ui/assets/CopyIcon.tsx | 24 --- .../example-ui/assets/DiamondIcon.tsx | 40 ----- .../components/example-ui/assets/HareIcon.tsx | 33 ---- .../components/scaffold-eth/Address.tsx | 2 +- .../nextjs/components/scaffold-eth/Faucet.tsx | 4 +- .../components/scaffold-eth/FaucetButton.tsx | 2 +- .../hooks/scaffold-eth/useAutoConnect.ts | 2 +- .../hooks/scaffold-eth/useBurnerWallet.ts | 4 +- .../hooks/scaffold-eth/useFetchBlocks.ts | 2 +- .../hooks/scaffold-eth/useScaffoldContract.ts | 4 +- .../hooks/scaffold-eth/useTransactor.tsx | 2 +- templates/base/packages/nextjs/package.json | 7 +- .../pages/blockexplorer/address/[address].tsx | 2 +- .../nextjs/pages/blockexplorer/index.tsx | 2 +- .../blockexplorer/transaction/[txHash].tsx | 2 +- .../base/packages/nextjs/pages/example-ui.tsx | 25 --- .../base/packages/nextjs/pages/index.tsx | 12 +- .../nextjs/public/assets/gradient-bg.png | Bin 303379 -> 0 bytes .../public/assets/switch-button-off.png | Bin 3721 -> 0 bytes .../nextjs/public/assets/switch-button-on.png | Bin 3621 -> 0 bytes .../nextjs/scaffold.config.ts.template.mjs | 2 +- .../web3/wagmi-burner/BurnerConnector.ts | 4 +- .../web3/wagmi-burner/burnerWalletConfig.ts | 2 +- .../nextjs/services/web3/wagmiConnectors.tsx | 2 +- .../base/packages/nextjs/tailwind.config.js | 46 ------ .../nextjs/utils/scaffold-eth/decodeTxData.ts | 2 +- .../nextjs/utils/scaffold-eth/networks.ts | 6 +- .../foundry/packages/foundry/foundry.toml | 6 + .../packages/hardhat/hardhat.config.ts | 4 + 38 files changed, 114 insertions(+), 498 deletions(-) create mode 100644 .changeset/early-actors-tease.md delete mode 100644 templates/base/packages/nextjs/components/example-ui/ContractData.tsx delete mode 100644 templates/base/packages/nextjs/components/example-ui/ContractInteraction.tsx delete mode 100644 templates/base/packages/nextjs/components/example-ui/assets/CopyIcon.tsx delete mode 100644 templates/base/packages/nextjs/components/example-ui/assets/DiamondIcon.tsx delete mode 100644 templates/base/packages/nextjs/components/example-ui/assets/HareIcon.tsx delete mode 100644 templates/base/packages/nextjs/pages/example-ui.tsx delete mode 100644 templates/base/packages/nextjs/public/assets/gradient-bg.png delete mode 100644 templates/base/packages/nextjs/public/assets/switch-button-off.png delete mode 100644 templates/base/packages/nextjs/public/assets/switch-button-on.png diff --git a/.changeset/early-actors-tease.md b/.changeset/early-actors-tease.md new file mode 100644 index 000000000..ae9fbd31d --- /dev/null +++ b/.changeset/early-actors-tease.md @@ -0,0 +1,9 @@ +--- +"create-eth": patch +--- + +1. Extract header menu links (#570) +2. Move Block Explorer to footer (#574) +3. Remove ExampleUI (pages, components, assets, content) (#578) +4. update wagmi, viem, rainbowkit (#580) +5. add zkSync, scroll & polygonZkEvm to foundry.toml ([88b4218](https://github.com/scaffold-eth/scaffold-eth-2/pull/582/commits/88b421860a5260d2c8ad4877adaf07c1d667f2b6)) diff --git a/README.md b/README.md index 2efd90915..4bf6ecf19 100644 --- a/README.md +++ b/README.md @@ -71,7 +71,7 @@ The `yarn deploy` command uses a deploy script to deploy the contract to the net yarn start ``` -Visit your app on: `http://localhost:3000`. You can interact with your smart contract using the contract component or the example ui in the frontend. You can tweak the app config in `packages/nextjs/scaffold.config.ts`. +Visit your app on: `http://localhost:3000`. You can interact with your smart contract using the `Debug Contracts` page. You can tweak the app config in `packages/nextjs/scaffold.config.ts`. Run smart contract test with `yarn hardhat:test` or `yarn foundry:test` depending of your solidity framework. diff --git a/templates/base/packages/nextjs/.eslintrc.json b/templates/base/packages/nextjs/.eslintrc.json index f7b14d463..c120c8c87 100644 --- a/templates/base/packages/nextjs/.eslintrc.json +++ b/templates/base/packages/nextjs/.eslintrc.json @@ -10,7 +10,6 @@ { "endOfLine": "auto" } - ], - "@next/next/no-page-custom-font": ["off"] + ] } } diff --git a/templates/base/packages/nextjs/components/Footer.tsx b/templates/base/packages/nextjs/components/Footer.tsx index 7abe70ad7..b0bd90484 100644 --- a/templates/base/packages/nextjs/components/Footer.tsx +++ b/templates/base/packages/nextjs/components/Footer.tsx @@ -1,5 +1,7 @@ -import { hardhat } from "wagmi/chains"; -import { CurrencyDollarIcon } from "@heroicons/react/24/outline"; +import React from "react"; +import Link from "next/link"; +import { hardhat } from "viem/chains"; +import { CurrencyDollarIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline"; import { HeartIcon } from "@heroicons/react/24/outline"; import { SwitchTheme } from "~~/components/SwitchTheme"; import { BuidlGuidlLogo } from "~~/components/assets/BuidlGuidlLogo"; @@ -12,21 +14,32 @@ import { getTargetNetwork } from "~~/utils/scaffold-eth"; */ export const Footer = () => { const nativeCurrencyPrice = useGlobalState(state => state.nativeCurrencyPrice); + const isLocalNetwork = getTargetNetwork().id === hardhat.id; return (
-
+
{nativeCurrencyPrice > 0 && ( -
- - {nativeCurrencyPrice} +
+
+ + {nativeCurrencyPrice} +
)} - {getTargetNetwork().id === hardhat.id && } + {isLocalNetwork && ( + <> + + + + Block Explorer + + + )}
- +
diff --git a/templates/base/packages/nextjs/components/Header.tsx b/templates/base/packages/nextjs/components/Header.tsx index af3349b28..13fa47a04 100644 --- a/templates/base/packages/nextjs/components/Header.tsx +++ b/templates/base/packages/nextjs/components/Header.tsx @@ -2,24 +2,51 @@ import React, { useCallback, useRef, useState } from "react"; import Image from "next/image"; import Link from "next/link"; import { useRouter } from "next/router"; -import { Bars3Icon, BugAntIcon, MagnifyingGlassIcon, SparklesIcon } from "@heroicons/react/24/outline"; +import { Bars3Icon, BugAntIcon } from "@heroicons/react/24/outline"; import { FaucetButton, RainbowKitCustomConnectButton } from "~~/components/scaffold-eth"; import { useOutsideClick } from "~~/hooks/scaffold-eth"; -const NavLink = ({ href, children }: { href: string; children: React.ReactNode }) => { +interface HeaderMenuLink { + label: string; + href: string; + icon?: React.ReactNode; +} + +export const menuLinks: HeaderMenuLink[] = [ + { + label: "Home", + href: "/", + }, + { + label: "Debug Contracts", + href: "/debug", + icon: , + }, +]; + +export const HeaderMenuLinks = () => { const router = useRouter(); - const isActive = router.pathname === href; return ( - - {children} - + <> + {menuLinks.map(({ label, href, icon }) => { + const isActive = router.pathname === href; + return ( +
  • + + {icon} + {label} + +
    • + ); + })} + ); }; @@ -34,32 +61,6 @@ export const Header = () => { useCallback(() => setIsDrawerOpen(false), []), ); - const navLinks = ( - <> -
  • - Home -
    • -
  • - - - Debug Contracts - -
    • -
  • - - - Example UI - -
    • -
  • - - - Block Explorer - -
    • - - ); - return (
    @@ -81,7 +82,7 @@ export const Header = () => { setIsDrawerOpen(false); }} > - {navLinks} + )}
    @@ -94,7 +95,9 @@ export const Header = () => { Ethereum dev stack
    -
      {navLinks}
    +
      + +
    diff --git a/templates/base/packages/nextjs/components/blockexplorer/AddressStorageTab.tsx b/templates/base/packages/nextjs/components/blockexplorer/AddressStorageTab.tsx index 046dd908e..f9f4d4fe3 100644 --- a/templates/base/packages/nextjs/components/blockexplorer/AddressStorageTab.tsx +++ b/templates/base/packages/nextjs/components/blockexplorer/AddressStorageTab.tsx @@ -1,6 +1,6 @@ import { useEffect, useState } from "react"; import { createPublicClient, http, toHex } from "viem"; -import { hardhat } from "wagmi/chains"; +import { hardhat } from "viem/chains"; const publicClient = createPublicClient({ chain: hardhat, diff --git a/templates/base/packages/nextjs/components/blockexplorer/SearchBar.tsx b/templates/base/packages/nextjs/components/blockexplorer/SearchBar.tsx index 9e275966a..abbf69190 100644 --- a/templates/base/packages/nextjs/components/blockexplorer/SearchBar.tsx +++ b/templates/base/packages/nextjs/components/blockexplorer/SearchBar.tsx @@ -1,8 +1,8 @@ import { useState } from "react"; import { useRouter } from "next/router"; import { isAddress, isHex } from "viem"; +import { hardhat } from "viem/chains"; import { usePublicClient } from "wagmi"; -import { hardhat } from "wagmi/chains"; export const SearchBar = () => { const [searchInput, setSearchInput] = useState(""); diff --git a/templates/base/packages/nextjs/components/example-ui/ContractData.tsx b/templates/base/packages/nextjs/components/example-ui/ContractData.tsx deleted file mode 100644 index 98786141c..000000000 --- a/templates/base/packages/nextjs/components/example-ui/ContractData.tsx +++ /dev/null @@ -1,148 +0,0 @@ -import { useEffect, useRef, useState } from "react"; -import Marquee from "react-fast-marquee"; -import { useAccount } from "wagmi"; -import { - useAnimationConfig, - useScaffoldContract, - useScaffoldContractRead, - useScaffoldEventHistory, - useScaffoldEventSubscriber, -} from "~~/hooks/scaffold-eth"; - -const MARQUEE_PERIOD_IN_SEC = 5; - -export const ContractData = () => { - const { address } = useAccount(); - const [transitionEnabled, setTransitionEnabled] = useState(true); - const [isRightDirection, setIsRightDirection] = useState(false); - const [marqueeSpeed, setMarqueeSpeed] = useState(0); - - const containerRef = useRef(null); - const greetingRef = useRef(null); - - const { data: totalCounter } = useScaffoldContractRead({ - contractName: "YourContract", - functionName: "totalCounter", - }); - - const { data: currentGreeting, isLoading: isGreetingLoading } = useScaffoldContractRead({ - contractName: "YourContract", - functionName: "greeting", - }); - - useScaffoldEventSubscriber({ - contractName: "YourContract", - eventName: "GreetingChange", - listener: logs => { - logs.map(log => { - const { greetingSetter, value, premium, newGreeting } = log.args; - console.log("📡 GreetingChange event", greetingSetter, value, premium, newGreeting); - }); - }, - }); - - const { - data: myGreetingChangeEvents, - isLoading: isLoadingEvents, - error: errorReadingEvents, - } = useScaffoldEventHistory({ - contractName: "YourContract", - eventName: "GreetingChange", - fromBlock: process.env.NEXT_PUBLIC_DEPLOY_BLOCK ? BigInt(process.env.NEXT_PUBLIC_DEPLOY_BLOCK) : 0n, - filters: { greetingSetter: address }, - blockData: true, - }); - - console.log("Events:", isLoadingEvents, errorReadingEvents, myGreetingChangeEvents); - - const { data: yourContract } = useScaffoldContract({ contractName: "YourContract" }); - console.log("yourContract: ", yourContract); - - const { showAnimation } = useAnimationConfig(totalCounter); - - const showTransition = transitionEnabled && !!currentGreeting && !isGreetingLoading; - - useEffect(() => { - if (transitionEnabled && containerRef.current && greetingRef.current) { - setMarqueeSpeed( - Math.max(greetingRef.current.clientWidth, containerRef.current.clientWidth) / MARQUEE_PERIOD_IN_SEC, - ); - } - }, [transitionEnabled, containerRef, greetingRef]); - - return ( -
    -
    -
    - -
    -
    Total count
    -
    - {totalCounter?.toString() || "0"} -
    -
    -
    - -
    -
    - {/* for speed calculating purposes */} -
    -
    {currentGreeting}
    -
    - {new Array(3).fill("").map((_, i) => { - const isLineRightDirection = i % 2 ? isRightDirection : !isRightDirection; - return ( - -
    {currentGreeting || " "}
    -     - ); - })} -
    -
    - -
    - -
    -
    -
    -
    -
    -
    - ); -}; diff --git a/templates/base/packages/nextjs/components/example-ui/ContractInteraction.tsx b/templates/base/packages/nextjs/components/example-ui/ContractInteraction.tsx deleted file mode 100644 index d541ecd69..000000000 --- a/templates/base/packages/nextjs/components/example-ui/ContractInteraction.tsx +++ /dev/null @@ -1,91 +0,0 @@ -import { useState } from "react"; -import { CopyIcon } from "./assets/CopyIcon"; -import { DiamondIcon } from "./assets/DiamondIcon"; -import { HareIcon } from "./assets/HareIcon"; -import { parseEther } from "viem"; -import { ArrowSmallRightIcon, XMarkIcon } from "@heroicons/react/24/outline"; -import { useScaffoldContractWrite } from "~~/hooks/scaffold-eth"; - -export const ContractInteraction = () => { - const [visible, setVisible] = useState(true); - const [newGreeting, setNewGreeting] = useState(""); - - const { writeAsync, isLoading } = useScaffoldContractWrite({ - contractName: "YourContract", - functionName: "setGreeting", - args: [newGreeting], - value: parseEther("0.01"), - onBlockConfirmation: txnReceipt => { - console.log("📦 Transaction blockHash", txnReceipt.blockHash); - }, - }); - - return ( -
    - - - -
    -
    -
    - 👋🏻 -
    -
    - In this page you can see how some of our hooks & components work, and how you can bring - them to life with your own design! Have fun and try it out! -
    -
    - Check out{" "} - - packages / nextjs/pages / example-ui.tsx - {" "} - and its underlying components. -
    -
    -
    - -
    - -
    - Set a Greeting_ - -
    - setNewGreeting(e.target.value)} - /> -
    -
    - -
    -
    -
    - -
    - Price: -
    0.01 ETH + Gas
    -
    -
    -
    -
    - ); -}; diff --git a/templates/base/packages/nextjs/components/example-ui/assets/CopyIcon.tsx b/templates/base/packages/nextjs/components/example-ui/assets/CopyIcon.tsx deleted file mode 100644 index 7733b845f..000000000 --- a/templates/base/packages/nextjs/components/example-ui/assets/CopyIcon.tsx +++ /dev/null @@ -1,24 +0,0 @@ -export const CopyIcon = ({ className }: { className: string }) => { - return ( - - - - - - - - - - - ); -}; diff --git a/templates/base/packages/nextjs/components/example-ui/assets/DiamondIcon.tsx b/templates/base/packages/nextjs/components/example-ui/assets/DiamondIcon.tsx deleted file mode 100644 index b33e9b2fa..000000000 --- a/templates/base/packages/nextjs/components/example-ui/assets/DiamondIcon.tsx +++ /dev/null @@ -1,40 +0,0 @@ -export const DiamondIcon = ({ className }: { className: string }) => { - return ( - - - - - - - - - - - - - - - - - - - - - - - - ); -}; diff --git a/templates/base/packages/nextjs/components/example-ui/assets/HareIcon.tsx b/templates/base/packages/nextjs/components/example-ui/assets/HareIcon.tsx deleted file mode 100644 index d3e8f1bd3..000000000 --- a/templates/base/packages/nextjs/components/example-ui/assets/HareIcon.tsx +++ /dev/null @@ -1,33 +0,0 @@ -export const HareIcon = ({ className }: { className: string }) => { - return ( - - - - - - - - - - - - - - - - - - - - ); -}; diff --git a/templates/base/packages/nextjs/components/scaffold-eth/Address.tsx b/templates/base/packages/nextjs/components/scaffold-eth/Address.tsx index c8af261db..67eb512a1 100644 --- a/templates/base/packages/nextjs/components/scaffold-eth/Address.tsx +++ b/templates/base/packages/nextjs/components/scaffold-eth/Address.tsx @@ -2,8 +2,8 @@ import { useEffect, useState } from "react"; import Link from "next/link"; import { CopyToClipboard } from "react-copy-to-clipboard"; import { isAddress } from "viem"; +import { hardhat } from "viem/chains"; 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"; diff --git a/templates/base/packages/nextjs/components/scaffold-eth/Faucet.tsx b/templates/base/packages/nextjs/components/scaffold-eth/Faucet.tsx index bfa896dc4..a21c9fa2e 100644 --- a/templates/base/packages/nextjs/components/scaffold-eth/Faucet.tsx +++ b/templates/base/packages/nextjs/components/scaffold-eth/Faucet.tsx @@ -1,7 +1,7 @@ import { useEffect, useState } from "react"; import { Address as AddressType, createWalletClient, http, parseEther } from "viem"; +import { hardhat } from "viem/chains"; import { useNetwork } from "wagmi"; -import { hardhat } from "wagmi/chains"; import { BanknotesIcon } from "@heroicons/react/24/outline"; import { Address, AddressInput, Balance, EtherInput, getParsedError } from "~~/components/scaffold-eth"; import { useTransactor } from "~~/hooks/scaffold-eth"; @@ -82,7 +82,7 @@ export const Faucet = () => { return (
    -