improve UX for network switching

balancer · Dec 17, 2024 · 07d9ee8 · 07d9ee8
1 parent d02a085
commit 07d9ee8
Show file tree

Hide file tree

Showing 17 changed files with 2,068 additions and 5,108 deletions.
diff --git a/packages/foundry/broadcast/Deploy.s.sol/1/run-1734391549.json b/packages/foundry/broadcast/Deploy.s.sol/1/run-1734391549.json
diff --git a/packages/foundry/broadcast/Deploy.s.sol/1/run-1734391821.json b/packages/foundry/broadcast/Deploy.s.sol/1/run-1734391821.json
diff --git a/packages/foundry/broadcast/Deploy.s.sol/1/run-latest.json b/packages/foundry/broadcast/Deploy.s.sol/1/run-latest.json
diff --git a/packages/foundry/deployments/1.json b/packages/foundry/deployments/1.json
@@ -0,0 +1,3 @@
+{
+  "networkName": "Mainnet"
+}
diff --git a/packages/foundry/package.json b/packages/foundry/package.json
@@ -5,7 +5,7 @@
     "account": "node script/ListAccount.js",
     "chain": "anvil --config-out localhost.json",
     "compile": "forge compile",
-    "deploy": "forge build --build-info --build-info-path out/build-info/ && forge script script/Deploy.s.sol --rpc-url ${1:-default_network} --broadcast --slow && node scripts-js/generateTsAbis.js",
+    "deploy": "forge build --build-info --build-info-path out/build-info/ && forge script script/Deploy.s.sol --rpc-url ${1:-localhost} --broadcast --slow && node scripts-js/generateTsAbis.js",
     "flatten": "forge flatten",
     "fork": "anvil --fork-url ${1:-default_network} --chain-id 31337 --config-out localhost.json",
     "format": "npx prettier --write --plugin=prettier-plugin-solidity 'contracts/**/*.sol' 'test/**/*.sol' 'script/*.sol' 'utils/*.sol'",

diff --git a/packages/nextjs/app/debug/_components/DebugContracts.tsx b/packages/nextjs/app/debug/_components/DebugContracts.tsx
@@ -4,14 +4,18 @@ import { useEffect } from "react";
 import { useLocalStorage } from "usehooks-ts";
 import { BarsArrowUpIcon } from "@heroicons/react/20/solid";
 import { ContractUI } from "~~/app/debug/_components/contract";
+import { useGetAllContracts } from "~~/hooks/scaffold-eth/useGetAllContracts";
 import { ContractName } from "~~/utils/scaffold-eth/contract";
-import { getAllContracts } from "~~/utils/scaffold-eth/contractsData";
 
 const selectedContractStorageKey = "scaffoldEth2.selectedContract";
-const contractsData = getAllContracts();
-const contractNames = Object.keys(contractsData) as ContractName[];
+// const contractsData = getAllContracts();
 
 export function DebugContracts() {
+  const contractsData = useGetAllContracts();
+  const contractNames = Object.keys(contractsData) as ContractName[];
+
+  console.log(contractsData);
+
   const [selectedContract, setSelectedContract] = useLocalStorage<ContractName>(
     selectedContractStorageKey,
     contractNames[0],
@@ -22,7 +26,7 @@ export function DebugContracts() {
     if (!contractNames.includes(selectedContract)) {
       setSelectedContract(contractNames[0]);
     }
-  }, [selectedContract, setSelectedContract]);
+  }, [selectedContract, setSelectedContract, contractNames]);
 
   return (
     <div className="flex flex-col gap-y-6 lg:gap-y-8 py-8 lg:py-12 justify-center items-center">

diff --git a/packages/nextjs/app/pools/page.tsx b/packages/nextjs/app/pools/page.tsx
@@ -8,6 +8,7 @@ import { type NextPage } from "next";
 import { type Address } from "viem";
 import { Alert } from "~~/components/common";
 import { type Pool, type RefetchPool, useReadPool } from "~~/hooks/balancer/";
+import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
 
 /**
  * 1. Search by pool address or select from dropdown
@@ -19,9 +20,7 @@ const Pools: NextPage = () => {
     <div className="flex items-center flex-col flex-grow py-10 px-5 md:px-10 xl:px-20">
       <div className="">
         <h1 className="text-3xl md:text-5xl font-semibold mb-7 text-center">Custom Pools</h1>
-        <div className="text-xl mb-7">
-          Select one of the pools deployed to your local fork or search by pool contract address
-        </div>
+        <div className="text-xl mb-7">Select one of the example custom pools or search by pool contract address</div>
       </div>
 
       <Suspense fallback={<PoolPageSkeleton />}>
@@ -37,6 +36,7 @@ const PoolPageContent = () => {
   const [selectedPoolAddress, setSelectedPoolAddress] = useState<Address | null>(null);
 
   const { data: pool, refetch: refetchPool, isLoading, isError, isSuccess } = useReadPool(selectedPoolAddress);
+  const { targetNetwork } = useTargetNetwork();
 
   const searchParams = useSearchParams();
   const poolAddress = searchParams.get("address");
@@ -53,7 +53,9 @@ const PoolPageContent = () => {
       {isLoading ? (
         <PoolPageSkeleton />
       ) : isError ? (
-        <Alert type="error">Error attempting to fetch pool data for {selectedPoolAddress}</Alert>
+        <Alert type="error">
+          Error attempting to fetch pool data for {selectedPoolAddress} on the {targetNetwork.name} network
+        </Alert>
       ) : (
         isSuccess && pool && <PoolDashboard pool={pool} refetchPool={refetchPool} />
       )}

diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
@@ -31,16 +31,6 @@ export const menuLinks: HeaderMenuLink[] = [
     href: "/hooks",
     icon: <ArrowUturnUpIcon className="h-5 w-5" />,
   },
-  // {
-  //   label: "Router",
-  //   href: "/router",
-  //   icon: <ArrowsRightLeftIcon className="h-5 w-5" />,
-  // },
-  // {
-  //   label: "Subgraph",
-  //   href: "/subgraph",
-  //   icon: <CircleStackIcon className="h-5 w-5" />,
-  // },
   {
     label: "Debug Contracts",
     href: "/debug",
@@ -62,7 +52,7 @@ export const HeaderMenuLinks = () => {
               passHref
               className={`${
                 isActive ? "" : ""
-              } text-xl hover:bg-secondary hover:shadow-md focus:!bg-secondary active:!text-neutral py-1.5 px-3 rounded-full gap-2 grid grid-flow-col`}
+              } hover:bg-secondary hover:shadow-md focus:!bg-secondary active:!text-neutral py-1.5 px-3 text-xl rounded-full gap-2 grid grid-flow-col`}
             >
               {icon}
               <span>{label}</span>
@@ -121,11 +111,13 @@ export const Header = () => {
           <HeaderMenuLinks />
         </ul>
       </div>
-      <div className="navbar-end flex-grow mr-4">
+      <div className="navbar-end flex-grow flex gap-4">
         <SwitchTheme className={`pointer-events-auto`} />
 
         <RainbowKitCustomConnectButton />
-        <FaucetButton />
+        <div className="hidden sm:flex">
+          <FaucetButton />
+        </div>
       </div>
     </div>
   );

diff --git a/packages/nextjs/components/SwitchTheme.tsx b/packages/nextjs/components/SwitchTheme.tsx
@@ -37,7 +37,7 @@ export const SwitchTheme = ({ className }: { className?: string }) => {
         <label
           onClick={handleToggle}
           htmlFor="theme-toggle"
-          className={`mr-2 swap swap-rotate ${!isDarkMode ? "swap-active" : ""}`}
+          className={`btn btn-secondary rounded-xl swap swap-rotate ${!isDarkMode ? "swap-active" : ""}`}
         >
           <SunIcon className="swap-on h-7 w-7" />
           <MoonIcon className="swap-off h-7 w-7" />

diff --git a/packages/nextjs/components/scaffold-eth/FaucetButton.tsx b/packages/nextjs/components/scaffold-eth/FaucetButton.tsx
@@ -54,14 +54,14 @@ export const FaucetButton = () => {
     <div
       className={
         balance
-          ? "ml-1"
-          : "ml-1 tooltip tooltip-bottom tooltip-primary tooltip-open font-bold before:left-auto before:transform-none before:content-[attr(data-tip)] before:right-0"
+          ? ""
+          : "tooltip tooltip-bottom tooltip-secondary tooltip-open font-bold before:left-auto before:transform-none before:content-[attr(data-tip)] before:right-0"
       }
       data-tip="Grab funds from faucet"
     >
-      <button className="btn btn-secondary btn-sm px-2 rounded-full" onClick={sendETH} disabled={loading}>
+      <button className="btn btn-secondary px-4 rounded-xl" onClick={sendETH} disabled={loading}>
         {!loading ? (
-          <BanknotesIcon className="h-4 w-4" />
+          <BanknotesIcon className="h-5 w-5" />
         ) : (
           <span className="loading loading-spinner loading-xs"></span>
         )}

diff --git a/...ages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressInfoDropdown.tsx b/...ages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressInfoDropdown.tsx
@@ -47,21 +47,18 @@ export const AddressInfoDropdown = ({
   return (
     <>
       <details ref={dropdownRef} className="dropdown dropdown-end leading-3">
-        <summary tabIndex={0} className="btn btn-secondary btn-sm pl-0 pr-2 shadow-md dropdown-toggle gap-0 !h-auto">
-          <BlockieAvatar address={checkSumAddress} size={30} ensImage={ensAvatar} />
+        <summary tabIndex={0} className="btn btn-secondary rounded-xl shadow-md dropdown-toggle gap-0 !h-auto">
+          <BlockieAvatar address={checkSumAddress} size={25} ensImage={ensAvatar} />
           <span className="ml-2 mr-1">
             {isENS(displayName) ? displayName : checkSumAddress?.slice(0, 6) + "..." + checkSumAddress?.slice(-4)}
           </span>
           <ChevronDownIcon className="h-6 w-4 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"
-        >
+        <ul tabIndex={0} className="dropdown-content menu z-[2] p-2 mt-2 bg-base-200 rounded-box gap-1">
           <NetworkOptions hidden={!selectingNetwork} />
           <li className={selectingNetwork ? "hidden" : ""}>
             {addressCopied ? (
-              <div className="btn-sm !rounded-xl flex gap-3 py-3">
+              <div className="text-lg !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"
@@ -78,7 +75,7 @@ export const AddressInfoDropdown = ({
                   }, 800);
                 }}
               >
-                <div className="btn-sm !rounded-xl flex gap-3 py-3">
+                <div className="text-lg !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"
@@ -89,13 +86,13 @@ export const AddressInfoDropdown = ({
             )}
           </li>
           <li className={selectingNetwork ? "hidden" : ""}>
-            <label htmlFor="qrcode-modal" className="btn-sm !rounded-xl flex gap-3 py-3">
+            <label htmlFor="qrcode-modal" className="text-lg !rounded-xl flex gap-3 py-3">
               <QrCodeIcon className="h-6 w-4 ml-2 sm:ml-0" />
               <span className="whitespace-nowrap">View QR Code</span>
             </label>
           </li>
           <li className={selectingNetwork ? "hidden" : ""}>
-            <button className="menu-item btn-sm !rounded-xl flex gap-3 py-3" type="button">
+            <button className="menu-item text-lg !rounded-xl flex gap-3 py-3" type="button">
               <ArrowTopRightOnSquareIcon className="h-6 w-4 ml-2 sm:ml-0" />
               <a
                 target="_blank"
@@ -110,7 +107,7 @@ export const AddressInfoDropdown = ({
           {allowedNetworks.length > 1 ? (
             <li className={selectingNetwork ? "hidden" : ""}>
               <button
-                className="btn-sm !rounded-xl flex gap-3 py-3"
+                className="text-lg !rounded-xl flex gap-3 py-3"
                 type="button"
                 onClick={() => {
                   setSelectingNetwork(true);
@@ -122,7 +119,7 @@ export const AddressInfoDropdown = ({
           ) : null}
           <li className={selectingNetwork ? "hidden" : ""}>
             <button
-              className="menu-item text-error btn-sm !rounded-xl flex gap-3 py-3"
+              className="menu-item text-error text-lg !rounded-xl flex gap-3 py-3"
               type="button"
               onClick={() => disconnect()}
             >

diff --git a/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/NetworkOptions.tsx b/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/NetworkOptions.tsx
@@ -23,7 +23,7 @@ export const NetworkOptions = ({ hidden = false }: NetworkOptionsProps) => {
         .map(allowedNetwork => (
           <li key={allowedNetwork.id} className={hidden ? "hidden" : ""}>
             <button
-              className="menu-item btn-sm !rounded-xl flex gap-3 py-3 whitespace-nowrap"
+              className="menu-item btn-md !rounded-xl flex gap-3 py-3 whitespace-nowrap text-lg"
               type="button"
               onClick={() => {
                 switchNetwork?.(allowedNetwork.id);

diff --git a/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/index.tsx b/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/index.tsx
@@ -1,23 +1,34 @@
 "use client";
 
 // @refresh reset
-import { Balance } from "../Balance";
+import { useRef, useState } from "react";
+// import { Balance } from "../Balance";
 import { AddressInfoDropdown } from "./AddressInfoDropdown";
 import { AddressQRCodeModal } from "./AddressQRCodeModal";
+import { NetworkOptions } from "./NetworkOptions";
 import { WrongNetworkDropdown } from "./WrongNetworkDropdown";
 import { ConnectButton } from "@rainbow-me/rainbowkit";
 import { Address } from "viem";
 import { useAutoConnect, useNetworkColor } from "~~/hooks/scaffold-eth";
+import { useOutsideClick } from "~~/hooks/scaffold-eth/useOutsideClick";
 import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
 import { getBlockExplorerAddressLink } from "~~/utils/scaffold-eth";
 
 /**
  * Custom Wagmi Connect Button (watch balance + custom design)
  */
 export const RainbowKitCustomConnectButton = () => {
+  const [selectingNetwork, setSelectingNetwork] = useState(false);
   useAutoConnect();
   const networkColor = useNetworkColor();
   const { targetNetwork } = useTargetNetwork();
+  const dropdownRef = useRef<HTMLDetailsElement>(null);
+
+  const closeDropdown = () => {
+    setSelectingNetwork(false);
+    dropdownRef.current?.removeAttribute("open");
+  };
+  useOutsideClick(dropdownRef, closeDropdown);
 
   return (
     <ConnectButton.Custom>
@@ -32,7 +43,7 @@ export const RainbowKitCustomConnectButton = () => {
             {(() => {
               if (!connected) {
                 return (
-                  <button className="btn btn-primary btn-sm" onClick={openConnectModal} type="button">
+                  <button className="btn btn-secondary rounded-xl" onClick={openConnectModal} type="button">
                     Connect Wallet
                   </button>
                 );
@@ -44,11 +55,23 @@ export const RainbowKitCustomConnectButton = () => {
 
               return (
                 <>
-                  <div className="flex flex-col items-center mr-1">
-                    <Balance address={account.address as Address} className="min-h-0 h-auto" />
-                    <span className="text-xs" style={{ color: networkColor }}>
-                      {chain.name}
-                    </span>
+                  <div className="flex-col items-center hidden sm:flex">
+                    <details ref={dropdownRef} className="dropdown dropdown-end leading-3">
+                      <summary
+                        onClick={() => setSelectingNetwork(true)}
+                        tabIndex={0}
+                        className="btn btn-secondary rounded-xl text-lg shadow-md dropdown-toggle gap-0 !h-auto"
+                        style={{ color: networkColor }}
+                      >
+                        {chain.name}
+                      </summary>
+                      <ul
+                        tabIndex={0}
+                        className="dropdown-content menu z-[2] p-2 mt-2 bg-base-200 rounded-box gap-1 text-xl"
+                      >
+                        <NetworkOptions hidden={!selectingNetwork} />
+                      </ul>
+                    </details>
                   </div>
                   <AddressInfoDropdown
                     address={account.address as Address}