Merge pull request #2 from Scaffold-Stark/bu/test

Test & Fix wrongnetwork case
Scaffold-Stark · Sep 27, 2024 · a5c01df · a5c01df
2 parents 91b33a8 + c0cfe45
commit a5c01df
Show file tree

Hide file tree

Showing 53 changed files with 426 additions and 944 deletions.
diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx
@@ -56,8 +56,6 @@ const Home = () => {
     },
   });
 
-  console.log("eventHistoryData", eventHistoryData);
-
   const {
     isLoading: isGreetingLoading,
     data: greeting,

diff --git a/...tjs/components/Wallet/scaffold-eth/RainbowKitCustomConnectButton/WrongNetworkDropdown.tsx b/...tjs/components/Wallet/scaffold-eth/RainbowKitCustomConnectButton/WrongNetworkDropdown.tsx
@@ -15,7 +15,7 @@ export const WrongNetworkDropdown = () => {
         tabIndex={0}
         className="dropdown-content menu p-2 mt-1 shadow-center shadow-accent bg-base-200 rounded-box gap-1"
       >
-        <NetworkOptions />
+        {/* <NetworkOptions /> */}
         <li>
           <button
             className="menu-item text-error btn-sm !rounded-xl flex gap-3 py-3"

diff --git a/packages/nextjs/components/Wallet/scaffold-stark/BlockieAvatar.tsx b/packages/nextjs/components/Wallet/scaffold-stark/BlockieAvatar.tsx
@@ -9,11 +9,7 @@ interface BlockieAvatarProps {
 }
 
 // Custom Avatar for RainbowKit
-export const BlockieAvatar = ({
-  address,
-  ensImage,
-  size,
-}: BlockieAvatarProps) => (
+export const BlockieAvatar = ({ address, ensImage, size }: BlockieAvatarProps) => (
   // 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

diff --git a/packages/nextjs/components/Wallet/scaffold-stark/CustomConnectButton/AddressInfoDropdown.tsx b/packages/nextjs/components/Wallet/scaffold-stark/CustomConnectButton/AddressInfoDropdown.tsx
@@ -165,32 +165,37 @@ export const AddressInfoDropdown = ({
               <>
                 <div className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none">
                   <div className="relative w-auto my-6 mx-auto max-w-5xl">
-                    <div className="border border-[#4f4ab7] rounded-lg shadow-lg relative w-full mx-auto md:max-h-[30rem] md:max-w-[25rem] bg-base-100 outline-none focus:outline-none">
-                      <div className="flex items-start justify-between p-4 pt-8 rounded-t">
+                    <div
+                      style={{
+                        background: "#14161d",
+                      }}
+                      className="border border-gray-600 rounded-lg shadow-lg relative w-full mx-auto md:max-h-[30rem] md:max-w-[25rem] bg-base-100 outline-none focus:outline-none"
+                    >
+                      <div className="flex items-start justify-between px-4 pt-8 rounded-t">
                         <div className="flex justify-center items-center w-11/12">
-                          <h2 className="text-lg text-center text-neutral m-0">Choose Account</h2>
+                          <h2 className="text-lg text-center m-0 text-white">Choose Account</h2>
                         </div>
                         <button
                           className="w-8 h-8 place-content-end rounded-full justify-center items-center flex"
                           onClick={() => setShowBurnerAccounts(false)}
                         >
                           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                             <path
-                              fill="currentColor"
+                              fill="white"
                               d="m6.4 18.308l-.708-.708l5.6-5.6l-5.6-5.6l.708-.708l5.6 5.6l5.6-5.6l.708.708l-5.6 5.6l5.6 5.6l-.708.708l-5.6-5.6z"
                             />
                           </svg>
                         </button>
                       </div>
                       <div className="flex flex-col items-center justify-center gap-3 mx-8 pb-10 pt-8">
-                        <div className="h-[300px] overflow-y-auto flex w-full flex-col gap-2">
+                        <div className="h-[300px] overflow-y-auto flex w-full flex-col gap-4">
                           {burnerAccounts.map((burnerAcc, ix) => (
                             // eslint-disable-next-line react/jsx-key
                             <div key={burnerAcc.publicKey} className="w-full flex flex-col">
                               <button
-                                className={`${
-                                  isDarkMode ? "hover:bg-[#385183] border-[#385183]" : "hover:bg-gradient-light "
-                                } border rounded-md text-neutral py-[8px] pl-[10px] pr-16 flex items-center gap-4`}
+                                className={`text-white border border-gray-600 rounded-md  py-[8px] pl-[10px] pr-16 flex items-center gap-4 bg-[#14161d]
+                                  hover:text-black hover:bg-white
+                                  `}
                                 onClick={e => handleConnectBurner(e, ix)}
                               >
                                 <BlockieAvatar address={burnerAcc.accountAddress} size={35}></BlockieAvatar>

diff --git a/packages/nextjs/components/Wallet/scaffold-stark/CustomConnectButton/ConnectModal.tsx b/packages/nextjs/components/Wallet/scaffold-stark/CustomConnectButton/ConnectModal.tsx
@@ -82,8 +82,17 @@ const ConnectModal = ({ isOpen, onClose }: Props) => {
     return 0;
   });
   return (
-    <GenericModal isOpen={isOpen} onClose={closeModal} animate={animate} className={`mx-auto bg-modal-network`}>
-      <h2 className="text-white text-[24px]">{isBurnerWallet ? "Choose account" : "Connect Wallet"}</h2>
+    <GenericModal
+      isOpen={isOpen}
+      onClose={closeModal}
+      animate={animate}
+      className={`mx-auto border border-gray-600 p-[30px] bg-[#14161d]`}
+    >
+      {isBurnerWallet ? (
+        <h2 className="text-white text-[24px] text-center">Choose account</h2>
+      ) : (
+        <h2 className="text-white text-[24px] text-left mb-5">Connect Wallet</h2>
+      )}
       <div>
         <div className="flex items-center gap-3 flex-wrap">
           {!isBurnerWallet ? (
@@ -96,17 +105,17 @@ const ConnectModal = ({ isOpen, onClose }: Props) => {
               />
             ))
           ) : (
-            <div className="flex flex-col gap-3">
-              <div className="overflow-y-auto flex w-full flex-col gap-2">
+            <div className="flex flex-col items-center justify-center gap-3 mx-8 pb-10 pt-8">
+              <div className="h-[300px] overflow-y-auto flex w-full flex-col gap-4">
                 {burnerAccounts.map((burnerAcc, ix) => (
                   <div key={burnerAcc.publicKey} className="w-full flex flex-col">
                     <button
-                      className={`hover:bg-gradient-modal border rounded-md text-neutral flex items-center gap-4 ${
-                        isDarkMode ? "border-[#385183]" : ""
-                      } px-3 py-2`}
+                      className={`text-white border border-gray-600 rounded-md  py-[8px] pl-[10px] pr-16 flex items-center gap-4 bg-[#14161d]
+                                  hover:text-black hover:bg-white
+                                  `}
                       onClick={e => handleConnectBurner(e, ix)}
                     >
-                      <BlockieAvatar address={burnerAcc.accountAddress} size={35} />
+                      <BlockieAvatar address={burnerAcc.accountAddress} size={35}></BlockieAvatar>
                       {`${burnerAcc.accountAddress.slice(0, 6)}...${burnerAcc.accountAddress.slice(-4)}`}
                     </button>
                   </div>

diff --git a/packages/nextjs/components/Wallet/scaffold-stark/CustomConnectButton/Wallet.tsx b/packages/nextjs/components/Wallet/scaffold-stark/CustomConnectButton/Wallet.tsx
@@ -18,6 +18,8 @@ const Wallet = ({
   const { resolvedTheme } = useTheme();
   const isDarkMode = resolvedTheme === "dark";
 
+  console.log(connector);
+
   return (
     <button
       className="bg-modal-network network w-[145px] h-[145px]"

diff --git a/...ages/nextjs/components/Wallet/scaffold-stark/CustomConnectButton/WrongNetworkDropdown.tsx b/...ages/nextjs/components/Wallet/scaffold-stark/CustomConnectButton/WrongNetworkDropdown.tsx
@@ -21,7 +21,7 @@ export const WrongNetworkDropdown = () => {
         tabIndex={0}
         className="dropdown-content menu p-2 mt-1 shadow-center shadow-accent bg-base-200 rounded-box gap-1"
       >
-        <NetworkOptions />
+        {/* <NetworkOptions /> */}
         <li>
           <button
             className="menu-item text-error btn-sm !rounded-xl flex gap-3 py-3"

diff --git a/packages/nextjs/lib/scaffold-eth-2/app/debug/_components/contract/utilsContract.tsx b/packages/nextjs/lib/scaffold-eth-2/app/debug/_components/contract/utilsContract.tsx
@@ -1,5 +1,5 @@
-import { AbiFunction, AbiParameter } from "abitype";
 import { AbiParameterTuple } from "@scaffold-eth-2/utils/scaffold-eth/contract";
+import { AbiFunction, AbiParameter } from "abitype";
 
 /**
  * Generates a key based on function metadata

diff --git a/packages/nextjs/lib/scaffold-eth-2/components/scaffold-eth/Input/EtherInput.tsx b/packages/nextjs/lib/scaffold-eth-2/components/scaffold-eth/Input/EtherInput.tsx
@@ -1,8 +1,8 @@
 import { useMemo, useState } from "react";
-import { ArrowsRightLeftIcon } from "@heroicons/react/24/outline";
 import { CommonInputProps, InputBase, SIGNED_NUMBER_REGEX } from "@scaffold-eth-2/components/scaffold-eth";
 import { useDisplayUsdMode } from "@scaffold-eth-2/hooks/scaffold-eth/useDisplayUsdMode";
 import { useGlobalState } from "@scaffold-eth-2/services/store/store";
+import { ArrowsRightLeftIcon } from "@heroicons/react/24/outline";
 
 const MAX_DECIMALS_USD = 2;
 

diff --git a/...ffold-eth-2/components/scaffold-eth/RainbowKitCustomConnectButton/AddressInfoDropdown.tsx b/...ffold-eth-2/components/scaffold-eth/RainbowKitCustomConnectButton/AddressInfoDropdown.tsx
@@ -1,5 +1,8 @@
 import { useRef, useState } from "react";
 import { NetworkOptions } from "./NetworkOptions";
+import { BlockieAvatar, isENS } from "@scaffold-eth-2/components/scaffold-eth";
+import { useOutsideClick } from "@scaffold-eth-2/hooks/scaffold-eth";
+import { getTargetNetworks } from "@scaffold-eth-2/utils/scaffold-eth";
 import CopyToClipboard from "react-copy-to-clipboard";
 import { getAddress } from "viem";
 import { Address } from "viem";
@@ -13,9 +16,6 @@ import {
   DocumentDuplicateIcon,
   QrCodeIcon,
 } from "@heroicons/react/24/outline";
-import { BlockieAvatar, isENS } from "@scaffold-eth-2/components/scaffold-eth";
-import { useOutsideClick } from "@scaffold-eth-2/hooks/scaffold-eth";
-import { getTargetNetworks } from "@scaffold-eth-2/utils/scaffold-eth";
 
 const allowedNetworks = getTargetNetworks();
 

diff --git a/...b/scaffold-eth-2/components/scaffold-eth/RainbowKitCustomConnectButton/NetworkOptions.tsx b/...b/scaffold-eth-2/components/scaffold-eth/RainbowKitCustomConnectButton/NetworkOptions.tsx
@@ -1,8 +1,8 @@
+import { getNetworkColor } from "@scaffold-eth-2/hooks/scaffold-eth";
+import { getTargetNetworks } from "@scaffold-eth-2/utils/scaffold-eth";
 import { useTheme } from "next-themes";
 import { useAccount, useSwitchChain } from "wagmi";
 import { ArrowsRightLeftIcon } from "@heroicons/react/24/solid";
-import { getNetworkColor } from "@scaffold-eth-2/hooks/scaffold-eth";
-import { getTargetNetworks } from "@scaffold-eth-2/utils/scaffold-eth";
 
 const allowedNetworks = getTargetNetworks();
 

diff --git a/packages/nextjs/lib/scaffold-eth-2/hooks/scaffold-eth/useFetchBlocks.ts b/packages/nextjs/lib/scaffold-eth-2/hooks/scaffold-eth/useFetchBlocks.ts
@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useState } from "react";
+import { decodeTransactionData } from "@scaffold-eth-2/utils/scaffold-eth";
 import {
   Block,
   Hash,
@@ -10,7 +11,6 @@ import {
   webSocket,
 } from "viem";
 import { hardhat } from "viem/chains";
-import { decodeTransactionData } from "@scaffold-eth-2/utils/scaffold-eth";
 
 const BLOCKS_PER_PAGE = 20;
 

diff --git a/packages/nextjs/lib/scaffold-eth-2/utils/scaffold-eth/contract.ts b/packages/nextjs/lib/scaffold-eth-2/utils/scaffold-eth/contract.ts
@@ -1,3 +1,6 @@
+import deployedContractsData from "@scaffold-eth-2/contracts/deployedContracts";
+import externalContractsData from "@scaffold-eth-2/contracts/externalContracts";
+import scaffoldConfig from "@scaffold-eth-2/scaffold.config";
 import { MutateOptions } from "@tanstack/react-query";
 import {
   Abi,
@@ -24,9 +27,6 @@ import {
 import { Config, UseReadContractParameters, UseWatchContractEventParameters } from "wagmi";
 import { WriteContractParameters, WriteContractReturnType } from "wagmi/actions";
 import { WriteContractVariables } from "wagmi/query";
-import deployedContractsData from "@scaffold-eth-2/contracts/deployedContracts";
-import externalContractsData from "@scaffold-eth-2/contracts/externalContracts";
-import scaffoldConfig from "@scaffold-eth-2/scaffold.config";
 
 type AddExternalFlag<T> = {
   [ChainId in keyof T]: {

diff --git a/packages/nextjs/lib/scaffold-stark-2/app/debug/_components/contract/ContractReadMethods.tsx b/packages/nextjs/lib/scaffold-stark-2/app/debug/_components/contract/ContractReadMethods.tsx
@@ -1,4 +1,4 @@
-import { Abi } from "abi-wan-kanabi";
+import { ReadOnlyFunctionForm } from "./ReadOnlyFunctionForm";
 import {
   AbiFunction,
   Contract,
@@ -7,26 +7,19 @@ import {
   InheritedFunctions,
   getFunctionsByStateMutability,
 } from "@scaffold-stark-2/utils/scaffold-stark/contract";
-import { ReadOnlyFunctionForm } from "./ReadOnlyFunctionForm";
+import { Abi } from "abi-wan-kanabi";
 
-export const ContractReadMethods = ({
-  deployedContractData,
-}: {
-  deployedContractData: Contract<ContractName>;
-}) => {
+export const ContractReadMethods = ({ deployedContractData }: { deployedContractData: Contract<ContractName> }) => {
   if (!deployedContractData) {
     return null;
   }
 
-  const functionsToDisplay = getFunctionsByStateMutability(
-    (deployedContractData.abi || []) as Abi,
-    "view",
-  )
-    .filter((fn) => {
+  const functionsToDisplay = getFunctionsByStateMutability((deployedContractData.abi || []) as Abi, "view")
+    .filter(fn => {
       const isQueryableWithParams = fn.inputs.length > 0;
       return isQueryableWithParams;
     })
-    .map((fn) => {
+    .map(fn => {
       return {
         fn,
       };

diff --git a/packages/nextjs/lib/scaffold-stark-2/app/debug/_components/contract/ContractUI.tsx b/packages/nextjs/lib/scaffold-stark-2/app/debug/_components/contract/ContractUI.tsx
@@ -3,17 +3,14 @@
 // @refresh reset
 import { useReducer } from "react";
 import { ContractReadMethods } from "./ContractReadMethods";
+import { ContractVariables } from "./ContractVariables";
+import { ContractWriteMethods } from "./ContractWriteMethods";
 // import { ContractWriteMethods } from "./ContractWriteMethods";
 import { Address, Balance } from "@scaffold-stark-2/components/scaffold-stark";
-import {
-  useDeployedContractInfo,
-  useNetworkColor,
-} from "@scaffold-stark-2/hooks/scaffold-stark";
+import { ClassHash } from "@scaffold-stark-2/components/scaffold-stark/ClassHash";
+import { useDeployedContractInfo, useNetworkColor } from "@scaffold-stark-2/hooks/scaffold-stark";
 import { useTargetNetwork } from "@scaffold-stark-2/hooks/scaffold-stark/useTargetNetwork";
 import { ContractName } from "@scaffold-stark-2/utils/scaffold-stark/contract";
-import { ContractVariables } from "./ContractVariables";
-import { ContractWriteMethods } from "./ContractWriteMethods";
-import { ClassHash } from "@scaffold-stark-2/components/scaffold-stark/ClassHash";
 
 type ContractUIProps = {
   contractName: ContractName;
@@ -23,17 +20,10 @@ type ContractUIProps = {
 /**
  * UI component to interface with deployed contracts.
  **/
-export const ContractUI = ({
-  contractName,
-  className = "",
-}: ContractUIProps) => {
-  const [refreshDisplayVariables, triggerRefreshDisplayVariables] = useReducer(
-    (value) => !value,
-    false,
-  );
+export const ContractUI = ({ contractName, className = "" }: ContractUIProps) => {
+  const [refreshDisplayVariables, triggerRefreshDisplayVariables] = useReducer(value => !value, false);
   const { targetNetwork } = useTargetNetwork();
-  const { data: deployedContractData, isLoading: deployedContractLoading } =
-    useDeployedContractInfo(contractName);
+  const { data: deployedContractData, isLoading: deployedContractLoading } = useDeployedContractInfo(contractName);
 
   if (deployedContractLoading) {
     return (
@@ -52,20 +42,15 @@ export const ContractUI = ({
   }
 
   return (
-    <div
-      className={`grid grid-cols-1 lg:grid-cols-6 px-6 lg:px-10 lg:gap-12 w-full max-w-7xl my-0 ${className}`}
-    >
+    <div className={`grid grid-cols-1 lg:grid-cols-6 px-6 lg:px-10 lg:gap-12 w-full max-w-7xl my-0 ${className}`}>
       <div className="col-span-5 grid grid-cols-1 lg:grid-cols-3 gap-8 lg:gap-10">
         <div className="col-span-1 flex flex-col">
           <div className="bg-transparent border-gradient rounded-[5px] px-6 lg:px-8 mb-6 space-y-1 py-4">
             <div className="flex">
               <div className="flex flex-col gap-1">
                 <span className="font-bold">{contractName}</span>
                 <Address address={deployedContractData.address} />
-                <ClassHash
-                  classHash={deployedContractData.classHash}
-                  size="xs"
-                />
+                <ClassHash classHash={deployedContractData.classHash} size="xs" />
                 <div className="flex gap-1 items-center">
                   <span className="font-bold text-sm">Balance:</span>
                   <Balance
@@ -77,8 +62,7 @@ export const ContractUI = ({
             </div>
             {targetNetwork && (
               <p className="my-0 text-sm">
-                <span className="font-bold">Network</span>:{" "}
-                <span className="text-network">{targetNetwork.name}</span>
+                <span className="font-bold">Network</span>: <span className="text-network">{targetNetwork.name}</span>
               </p>
             )}
           </div>
@@ -98,9 +82,7 @@ export const ContractUI = ({
                 </div>
               </div>
               <div className="p-5 divide-y divide-secondary">
-                <ContractReadMethods
-                  deployedContractData={deployedContractData}
-                />
+                <ContractReadMethods deployedContractData={deployedContractData} />
               </div>
             </div>
           </div>

diff --git a/packages/nextjs/lib/scaffold-stark-2/app/debug/_components/contract/InheritanceTooltip.tsx b/packages/nextjs/lib/scaffold-stark-2/app/debug/_components/contract/InheritanceTooltip.tsx
@@ -1,10 +1,6 @@
 import { InformationCircleIcon } from "@heroicons/react/20/solid";
 
-export const InheritanceTooltip = ({
-  inheritedFrom,
-}: {
-  inheritedFrom?: string;
-}) => (
+export const InheritanceTooltip = ({ inheritedFrom }: { inheritedFrom?: string }) => (
   <>
     {inheritedFrom && (
       <span

diff --git a/packages/nextjs/lib/scaffold-stark-2/app/debug/page.tsx b/packages/nextjs/lib/scaffold-stark-2/app/debug/page.tsx
@@ -1,11 +1,10 @@
 import { DebugContracts } from "./_components/DebugContracts";
-import type { NextPage } from "next";
 import { getMetadata } from "@scaffold-stark-2/utils/scaffold-stark/getMetadata";
+import type { NextPage } from "next";
 
 export const metadata = getMetadata({
   title: "Debug Contracts",
-  description:
-    "Debug your deployed 🏗 Scaffold-Stark 2 contracts in an easy way",
+  description: "Debug your deployed 🏗 Scaffold-Stark 2 contracts in an easy way",
 });
 
 const Debug: NextPage = () => {

diff --git a/packages/nextjs/lib/scaffold-stark-2/components/FaucetMenu.tsx b/packages/nextjs/lib/scaffold-stark-2/components/FaucetMenu.tsx
@@ -1,6 +1,7 @@
 "use client";
-import { DropdownMenu, Button } from "@radix-ui/themes";
+
 import { CaretDownIcon } from "@radix-ui/react-icons";
+import { Button, DropdownMenu } from "@radix-ui/themes";
 
 export default function FaucetMenu() {
   return (
-Original file line number
+Diff line change
@@ Expand Up / @@ -56,8 +56,6 @@ const Home = () => { @@
         },
       });
-      console.log("eventHistoryData", eventHistoryData);
       const {
         isLoading: isGreetingLoading,
         data: greeting,
@@ Expand Down @@