create-stylus 0.1.4 → 0.1.6

package/templates/base/packages/nextjs/components/Header.tsx

@@ -1,11 +1,12 @@
 "use client";
 
-import React, { useCallback, useRef, useState } from "react";
+import React, { useCallback, useRef, useState, useMemo } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { useTheme } from "next-themes";
 import { SwitchTheme } from "./SwitchTheme";
-import { Bars3Icon, BugAntIcon } from "@heroicons/react/24/outline";
+import { Bars3Icon } from "@heroicons/react/24/outline";
 import { RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";
 import { useOutsideClick, useTargetNetwork } from "~~/hooks/scaffold-eth";
 import { arbitrumNitro } from "~~/utils/scaffold-stylus/supportedChains";
@@ -24,25 +25,46 @@ export const menuLinks: HeaderMenuLink[] = [
   {
     label: "Debug Contracts",
     href: "/debug",
-    icon: <BugAntIcon className="h-4 w-4" />,
+    // icon: <BugAntIcon className="h-4 w-4" />,
   },
 ];
 
 export const HeaderMenuLinks = () => {
   const pathname = usePathname();
+  const { resolvedTheme } = useTheme();
+  const isDarkMode = useMemo(() => resolvedTheme === "dark", [resolvedTheme]);
 
   return (
     <>
       {menuLinks.map(({ label, href, icon }) => {
         const isActive = pathname === href;
+
         return (
           <li key={href}>
             <Link
               href={href}
               passHref
               className={`${
-                isActive ? "bg-secondary shadow-md" : ""
+                isActive ? "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`}
+              style={{
+                color: isActive
+                  ? isDarkMode
+                    ? "#2B2B2B"
+                    : "black"
+                  : isDarkMode
+                    ? "var(--text-sub-600, rgba(255, 255, 255, 0.60))"
+                    : "black",
+                fontFamily: "Orbitron, sans-serif",
+                fontSize: "14px",
+                fontWeight: 700,
+                letterSpacing: "-0.28px",
+                textTransform: "uppercase",
+                background: isActive ? "linear-gradient(180deg, #FFF 18.79%, #D5D5D5 100%)" : undefined,
+                borderBottom: isActive ? "2px solid #ABABAB" : undefined,
+                borderRadius: isActive ? "8px" : undefined,
+                padding: isActive ? "8px 16px" : undefined,
+              }}
             >
               {icon}
               <span>{label}</span>
@@ -61,6 +83,8 @@ export const Header = () => {
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
   const burgerMenuRef = useRef<HTMLDivElement>(null);
   const { targetNetwork } = useTargetNetwork();
+  const { resolvedTheme } = useTheme();
+  const isDarkMode = useMemo(() => resolvedTheme === "dark", [resolvedTheme]);
   const isLocalNetwork = targetNetwork?.id === arbitrumNitro.id;
   useOutsideClick(
     burgerMenuRef,
@@ -68,7 +92,18 @@ export const Header = () => {
   );
 
   return (
-    <div className="sticky lg:static top-0 navbar min-h-0 flex-shrink-0 justify-between z-20 px-0 sm:px-2">
+    <div
+      className="sticky lg:static top-0 navbar min-h-0 flex-shrink-0 justify-between z-20 px-0 sm:px-2"
+      style={{
+        display: "flex",
+        // height: "46px",
+        padding: "12px var(--spacing-2xl, 16px)",
+        justifyContent: "center",
+        alignItems: "center",
+        gap: "var(--spacing-md, 8px)",
+        alignSelf: "stretch",
+      }}
+    >
       <div className="navbar-start w-auto lg:w-1/2">
         <div className="lg:hidden dropdown" ref={burgerMenuRef}>
           <label
@@ -93,20 +128,48 @@ export const Header = () => {
           )}
         </div>
         <Link href="/" passHref className="hidden lg:flex items-center gap-2 ml-4 mr-6 shrink-0">
-          <div className="flex relative w-10 h-10">
-            <Image alt="SE2 logo" className="cursor-pointer" fill src="/logo.svg" />
+          <div className="flex relative w-12 h-12">
+            <Image alt="Scaffold Stylus logo" className="cursor-pointer" fill src="/logo.svg" />
           </div>
           <div className="flex flex-col">
-            <span className="font-bold leading-tight">Scaffold Stylus</span>
-            <span className="text-xs">Arbitrum dev stack</span>
+            <span
+              style={{
+                color: isDarkMode ? "#FFF" : "black",
+                fontFamily: "Orbitron, sans-serif",
+                fontSize: "16px",
+                fontWeight: 700,
+                lineHeight: "normal",
+                letterSpacing: "-0.32px",
+                textTransform: "uppercase",
+              }}
+            >
+              SCAFFOLD STYLUS
+            </span>
+            <span
+              style={{
+                color: isDarkMode ? "#FFF" : "black",
+                fontFamily: "Inter, sans-serif",
+                fontSize: "12px",
+                fontWeight: 600,
+                lineHeight: "20px",
+              }}
+            >
+              Arbitrum dev stack
+            </span>
           </div>
         </Link>
         <ul className="hidden lg:flex lg:flex-nowrap menu menu-horizontal px-1 gap-2">
           <HeaderMenuLinks />
         </ul>
       </div>
-      <div className="flex gap-4 navbar-end flex-grow mr-4">
+      <div className="flex items-center gap-4 navbar-end flex-grow mr-4">
         <RainbowKitCustomConnectButton />
+        <div
+          className="h-6 w-px opacity-20"
+          style={{
+            backgroundColor: isDarkMode ? "white" : "black",
+          }}
+        ></div>
         <SwitchTheme className={`pointer-events-auto ${isLocalNetwork ? "self-end md:self-auto" : ""}`} />
       </div>
     </div>

package/templates/base/packages/nextjs/components/SwitchTheme.tsx

@@ -25,15 +25,46 @@ export const SwitchTheme = ({ className }: { className?: string }) => {
   if (!mounted) return null;
 
   return (
-    <div className={`flex space-x-2 h-5 items-center justify-center text-sm border-l border-neutral px-4 ${className}`}>
+    <div className={`flex space-x-2 h-5 items-center justify-center text-sm px-4 ${className}`}>
       {
         <label
           htmlFor="theme-toggle"
           className={`swap swap-rotate ${!isDarkMode ? "swap-active" : ""}`}
           onClick={handleToggle}
+          style={{
+            width: "44px",
+            height: "44px",
+            aspectRatio: "1/1",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            cursor: "pointer",
+            borderRadius: "50%",
+            background: isDarkMode ? "rgba(25, 144, 196, 0.30)" : "rgba(227, 6, 110, 0.30)",
+            border: isDarkMode ? "1px solid #30B4ED" : "1px solid rgba(227, 6, 110, 1)",
+            position: "relative",
+          }}
         >
-          <SunIcon className="swap-on h-5 w-5" />
-          <MoonIcon className="swap-off h-5 w-5" />
+          <SunIcon
+            className="swap-on h-5 w-5"
+            style={{
+              color: isDarkMode ? "#30B4ED" : "rgba(227, 6, 110, 1)",
+              position: "absolute",
+              top: "50%",
+              left: "50%",
+              transform: "translate(-50%, -50%)",
+            }}
+          />
+          <MoonIcon
+            className="swap-off h-5 w-5"
+            style={{
+              color: "#30B4ED",
+              position: "absolute",
+              top: "50%",
+              left: "50%",
+              transform: "translate(-50%, -50%)",
+            }}
+          />
         </label>
       }
     </div>

package/templates/base/packages/nextjs/components/scaffold-eth/Faucet.tsx

@@ -1,10 +1,12 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useState, useMemo } from "react";
 import { Address as AddressType, createWalletClient, http, parseEther } from "viem";
 import { privateKeyToAccount } from "viem/accounts";
 import { useAccount } from "wagmi";
+import { useTheme } from "next-themes";
 import { BanknotesIcon } from "@heroicons/react/24/outline";
+import { AngularBorder } from "~~/components/AngularBorder";
 import { Address, AddressInput, Balance, EtherInput } from "~~/components/scaffold-eth";
 import { useTransactor } from "~~/hooks/scaffold-eth";
 import { notification } from "~~/utils/scaffold-eth";
@@ -29,6 +31,11 @@ export const Faucet = () => {
   const [sendValue, setSendValue] = useState("");
 
   const { chain: ConnectedChain } = useAccount();
+  const { resolvedTheme } = useTheme();
+
+  const isDarkMode = useMemo(() => {
+    return resolvedTheme === "dark";
+  }, [resolvedTheme]);
 
   const faucetTxn = useTransactor(localWalletClient);
 
@@ -83,10 +90,38 @@ export const Faucet = () => {
 
   return (
     <div>
-      <label htmlFor="faucet-modal" className="btn btn-primary btn-sm font-normal gap-1">
-        <BanknotesIcon className="h-4 w-4" />
-        <span>Faucet</span>
-      </label>
+      <div className="relative">
+        <AngularBorder width={130} height={40} color="rgba(227, 6, 110, 1)" />
+        <label
+          htmlFor="faucet-modal"
+          className="flex items-center gap-2 px-4 py-2 cursor-pointer rounded-lg"
+          style={{
+            width: "130px",
+            height: "40px",
+            display: "flex",
+            alignItems: "flex-start",
+            paddingTop: "8px",
+            position: "relative",
+            zIndex: 1,
+          }}
+        >
+          <BanknotesIcon className="h-4 w-4" style={{ color: "rgba(227, 6, 110, 1)" }} />
+          <span
+            style={{
+              color: isDarkMode ? "#FFF" : "black",
+              fontFamily: "Orbitron, sans-serif",
+              fontSize: "14px",
+              fontWeight: 700,
+              textTransform: "uppercase",
+              whiteSpace: "nowrap",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+            }}
+          >
+            Faucet
+          </span>
+        </label>
+      </div>
       <input type="checkbox" id="faucet-modal" className="modal-toggle" />
       <label htmlFor="faucet-modal" className="modal cursor-pointer">
         <label className="modal-box relative">

package/templates/base/packages/nextjs/components/scaffold-eth/Input/AddressInput.tsx

@@ -23,7 +23,6 @@ export const AddressInput = ({ value, name, placeholder, onChange, disabled }: C
     data: ensAddress,
     isLoading: isEnsAddressLoading,
     isError: isEnsAddressError,
-    isSuccess: isEnsAddressSuccess,
   } = useEnsAddress({
     name: settledValue,
     chainId: 1,
@@ -38,7 +37,6 @@ export const AddressInput = ({ value, name, placeholder, onChange, disabled }: C
     data: ensName,
     isLoading: isEnsNameLoading,
     isError: isEnsNameError,
-    isSuccess: isEnsNameSuccess,
   } = useEnsName({
     address: settledValue as Address,
     chainId: 1,
@@ -70,13 +68,7 @@ export const AddressInput = ({ value, name, placeholder, onChange, disabled }: C
     setEnteredEnsName(undefined);
   }, [value]);
 
-  const reFocus =
-    isEnsAddressError ||
-    isEnsNameError ||
-    isEnsNameSuccess ||
-    isEnsAddressSuccess ||
-    ensName === null ||
-    ensAddress === null;
+  const reFocus = isEnsAddressError || isEnsNameError || ensName === null || ensAddress === null;
 
   return (
     <InputBase<Address>

package/templates/base/packages/nextjs/components/scaffold-eth/Input/InputBase.tsx

@@ -47,7 +47,7 @@ export const InputBase = <T extends { toString: () => string } | undefined = str
   }, [reFocus]);
 
   return (
-    <div className={`flex border-2 border-base-300 bg-base-200 rounded-full text-accent ${modifier}`}>
+    <div className={`flex text-accent ${modifier}`}>
       {prefix}
       <input
         className="input input-ghost focus-within:border-transparent focus:outline-hidden focus:bg-transparent h-[2.2rem] min-h-[2.2rem] px-4 border w-full font-medium placeholder:text-accent/70 text-base-content/70 focus:text-base-content/70"

package/templates/base/packages/nextjs/components/scaffold-eth/Input/IntegerInput.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useState } from "react";
 import { parseEther } from "viem";
+import { useTheme } from "next-themes";
 import { CommonInputProps, InputBase, IntegerVariant, isValidInteger } from "~~/components/scaffold-eth";
 
 type IntegerInputProps = CommonInputProps<string> & {
@@ -16,6 +17,8 @@ export const IntegerInput = ({
   variant = IntegerVariant.UINT256,
   disableMultiplyBy1e18 = false,
 }: IntegerInputProps) => {
+  const { resolvedTheme } = useTheme();
+  const isDarkMode = resolvedTheme === "dark";
   const [inputError, setInputError] = useState(false);
   const multiplyBy1e18 = useCallback(() => {
     if (!value) {
@@ -33,31 +36,38 @@ export const IntegerInput = ({
   }, [value, variant]);
 
   return (
-    <InputBase
-      name={name}
-      value={value}
-      placeholder={placeholder}
-      error={inputError}
-      onChange={onChange}
-      disabled={disabled}
-      suffix={
-        !inputError &&
-        !disableMultiplyBy1e18 && (
-          <div
-            className="space-x-4 flex tooltip tooltip-top tooltip-secondary before:content-[attr(data-tip)] before:right-[-10px] before:left-auto before:transform-none"
-            data-tip="Multiply by 1e18 (wei)"
-          >
-            <button
-              className={`${disabled ? "cursor-not-allowed" : "cursor-pointer"} font-semibold px-4 text-accent`}
-              onClick={multiplyBy1e18}
-              disabled={disabled}
-              type="button"
+    <div
+      className="integer-input-wrapper input-container"
+      style={{
+        padding: "12px 16px",
+      }}
+    >
+      <InputBase
+        name={name}
+        value={value}
+        placeholder={placeholder}
+        error={inputError}
+        onChange={onChange}
+        disabled={disabled}
+        suffix={
+          !inputError &&
+          !disableMultiplyBy1e18 && (
+            <div
+              className="space-x-4 flex tooltip tooltip-top tooltip-secondary before:content-[attr(data-tip)] before:right-[-10px] before:left-auto before:transform-none"
+              data-tip="Multiply by 1e18 (wei)"
             >
-              ∗
-            </button>
-          </div>
-        )
-      }
-    />
+              <button
+                className={`${disabled ? "cursor-not-allowed" : "cursor-pointer"} font-semibold px-4 text-accent`}
+                onClick={multiplyBy1e18}
+                disabled={disabled}
+                type="button"
+              >
+                ∗
+              </button>
+            </div>
+          )
+        }
+      />
+    </div>
   );
 };

package/templates/base/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressInfoDropdown.tsx

@@ -2,13 +2,14 @@ import { useRef, useState } from "react";
 import { NetworkOptions } from "./NetworkOptions";
 import { getAddress } from "viem";
 import { Address } from "viem";
-import { useDisconnect } from "wagmi";
+import { useAccount, useDisconnect } from "wagmi";
 import {
   ArrowLeftEndOnRectangleIcon,
   ArrowsRightLeftIcon,
   CheckCircleIcon,
   ChevronDownIcon,
   DocumentDuplicateIcon,
+  EyeIcon,
   QrCodeIcon,
   UserCircleIcon,
 } from "@heroicons/react/24/outline";
@@ -16,6 +17,9 @@ import { BlockieAvatar, isENS } from "~~/components/scaffold-eth";
 import { useCopyToClipboard, useOutsideClick } from "~~/hooks/scaffold-eth";
 import { getTargetNetworks } from "~~/utils/scaffold-stylus";
 import { arbitrumNitro } from "~~/utils/scaffold-stylus/supportedChains";
+import { useTheme } from "next-themes";
+
+const BURNER_WALLET_ID = "burnerWallet";
 
 const allowedNetworks = getTargetNetworks();
 
@@ -28,7 +32,10 @@ type AddressInfoDropdownProps = {
 
 export const AddressInfoDropdown = ({ address, ensAvatar, displayName, onSwitchAccount }: AddressInfoDropdownProps) => {
   const { disconnect } = useDisconnect();
+  const { connector } = useAccount();
   const checkSumAddress = getAddress(address);
+  const { resolvedTheme } = useTheme();
+  const isDarkMode = resolvedTheme === "dark";
 
   const { copyToClipboard: copyAddressToClipboard, isCopiedToClipboard: isAddressCopiedToClipboard } =
     useCopyToClipboard();
@@ -44,74 +51,181 @@ export const AddressInfoDropdown = ({ address, ensAvatar, displayName, onSwitchA
 
   return (
     <>
-      <details ref={dropdownRef} className="gradient-border rounded-full inline-block dropdown dropdown-end leading-3">
+      <details ref={dropdownRef} className="dropdown dropdown-end leading-3">
         <summary
           tabIndex={0}
-          className="bg-base-100 rounded-full flex items-center px-4 py-2 shadow-md dropdown-toggle gap-0 !h-auto"
+          className="dropdown-toggle gap-0 !h-auto"
+          style={{
+            position: "relative",
+            width: "220px",
+            height: "46px",
+            display: "flex",
+            alignItems: "center",
+            padding: "0 20px",
+            cursor: "pointer",
+            alignSelf: "center",
+          }}
         >
-          <BlockieAvatar address={checkSumAddress} size={30} 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" />
+          {/* Angular border SVG */}
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="220"
+            height="46"
+            viewBox="0 0 220 46"
+            fill="none"
+            style={{
+              position: "absolute",
+              top: "-7px",
+              left: 0,
+              pointerEvents: "none",
+            }}
+          >
+            <path
+              d="M196.132 0.5L219.5 23.2109V45.5H24.0811L0.5 22.7871V0.5H196.132Z"
+              stroke="#30B4ED"
+              strokeWidth="1"
+            />
+          </svg>
+
+          {/* Content */}
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: "8px",
+              width: "100%",
+              height: "100%",
+              zIndex: 1,
+              position: "relative",
+            }}
+          >
+            <BlockieAvatar address={checkSumAddress} size={30} ensImage={ensAvatar} />
+            <span
+              style={{
+                color: isDarkMode ? "#FFF" : "black",
+                fontFamily: "Orbitron, sans-serif",
+                fontSize: "14px",
+                fontWeight: 700,
+                lineHeight: "1",
+                textTransform: "uppercase",
+                display: "flex",
+                alignItems: "center",
+                height: "30px",
+                whiteSpace: "nowrap",
+                minWidth: 0,
+              }}
+            >
+              {isENS(displayName) ? displayName : checkSumAddress?.slice(0, 6) + "..." + checkSumAddress?.slice(-4)}
+            </span>
+            <ChevronDownIcon
+              className="h-4 w-4"
+              style={{
+                color: isDarkMode ? "#FFF" : "black",
+                height: "16px",
+                width: "16px",
+              }}
+            />
+          </div>
         </summary>
         <ul
           tabIndex={0}
-          className="dropdown-content menu z-[2] p-2 mt-2 shadow-center shadow-accent rounded-box gap-1 gradient-border"
+          className="dropdown-content menu z-[2] p-2 mt-4 gap-1"
+          style={{
+            borderRadius: "8px",
+            border: isDarkMode ? "1px solid rgba(255, 255, 255, 0.20)" : "1px solid rgba(0, 0, 0, 0.1)",
+            background: isDarkMode ? "rgba(2, 2, 2, 0.20)" : "rgba(255, 255, 255, 0.20)",
+            backdropFilter: "blur(25px)",
+          }}
         >
           <NetworkOptions hidden={!selectingNetwork} />
           <li className={selectingNetwork ? "hidden" : ""}>
             <div
-              className="h-8 btn-sm rounded-xl! flex gap-3 py-3 cursor-pointer"
+              className="flex gap-3 py-3 px-3 cursor-pointer rounded-lg transition-all duration-200 hover:bg-gradient-to-r hover:from-[rgba(48,180,237,0.16)] hover:to-[rgba(227,6,110,0.16)]"
               onClick={() => copyAddressToClipboard(checkSumAddress)}
             >
               {isAddressCopiedToClipboard ? (
                 <>
-                  <CheckCircleIcon className="text-xl font-normal h-6 w-4 ml-2 sm:ml-0" aria-hidden="true" />
-                  <span className="whitespace-nowrap">Copied!</span>
+                  <CheckCircleIcon
+                    className="h-5 w-5"
+                    style={{ color: isDarkMode ? "white" : "black" }}
+                    aria-hidden="true"
+                  />
+                  <span className="whitespace-nowrap" style={{ color: isDarkMode ? "white" : "black" }}>
+                    Copied!
+                  </span>
                 </>
               ) : (
                 <>
-                  <DocumentDuplicateIcon className="text-xl font-normal h-6 w-4 ml-2 sm:ml-0" aria-hidden="true" />
-                  <span className="whitespace-nowrap">Copy address</span>
+                  <DocumentDuplicateIcon
+                    className="h-5 w-5"
+                    style={{ color: isDarkMode ? "white" : "black" }}
+                    aria-hidden="true"
+                  />
+                  <span className="whitespace-nowrap" style={{ color: isDarkMode ? "white" : "black" }}>
+                    Copy address
+                  </span>
                 </>
               )}
             </div>
           </li>
           <li className={selectingNetwork ? "hidden" : ""}>
-            <label htmlFor="qrcode-modal" className="h-8 btn-sm 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
+              htmlFor="qrcode-modal"
+              className="flex gap-3 py-3 px-3 cursor-pointer rounded-lg transition-all duration-200 hover:bg-gradient-to-r hover:from-[rgba(48,180,237,0.16)] hover:to-[rgba(227,6,110,0.16)]"
+            >
+              <QrCodeIcon className="h-5 w-5" style={{ color: isDarkMode ? "white" : "black" }} />
+              <span className="whitespace-nowrap" style={{ color: isDarkMode ? "white" : "black" }}>
+                View QR Code
+              </span>
             </label>
           </li>
           {allowedNetworks.some(network => network.id === arbitrumNitro.id) && (
             <li className={selectingNetwork ? "hidden" : ""}>
-              <button className="menu-item btn-sm !rounded-xl flex gap-3 py-3" type="button" onClick={onSwitchAccount}>
-                <UserCircleIcon className="h-6 w-4 ml-2 sm:ml-0" />
-                <span className="whitespace-nowrap">Switch account</span>
+              <button
+                className="flex gap-3 py-3 px-3 cursor-pointer rounded-lg transition-all duration-200 hover:bg-gradient-to-r hover:from-[rgba(48,180,237,0.16)] hover:to-[rgba(227,6,110,0.16)] w-full text-left"
+                type="button"
+                onClick={onSwitchAccount}
+              >
+                <UserCircleIcon className="h-5 w-5" style={{ color: isDarkMode ? "white" : "black" }} />
+                <span className="whitespace-nowrap" style={{ color: isDarkMode ? "white" : "black" }}>
+                  Switch account
+                </span>
               </button>
             </li>
           )}
           {allowedNetworks.length > 1 ? (
             <li className={selectingNetwork ? "hidden" : ""}>
               <button
-                className="h-8 btn-sm rounded-xl! flex gap-3 py-3"
+                className="flex gap-3 py-3 px-3 cursor-pointer rounded-lg transition-all duration-200 hover:bg-gradient-to-r hover:from-[rgba(48,180,237,0.16)] hover:to-[rgba(227,6,110,0.16)] w-full text-left"
                 type="button"
                 onClick={() => {
                   setSelectingNetwork(true);
                 }}
               >
-                <ArrowsRightLeftIcon className="h-6 w-4 ml-2 sm:ml-0" /> <span>Switch Network</span>
+                <ArrowsRightLeftIcon className="h-5 w-5" style={{ color: isDarkMode ? "white" : "black" }} />
+                <span style={{ color: isDarkMode ? "white" : "black" }}>Switch Network</span>
               </button>
             </li>
           ) : null}
+          {connector?.id === BURNER_WALLET_ID ? (
+            <li>
+              <label
+                htmlFor="reveal-burner-pk-modal"
+                className="flex gap-3 py-3 px-3 cursor-pointer rounded-lg transition-all duration-200 hover:bg-gradient-to-r hover:from-[rgba(48,180,237,0.16)] hover:to-[rgba(227,6,110,0.16)]"
+              >
+                <EyeIcon className="h-5 w-5" style={{ color: isDarkMode ? "white" : "black" }} />
+                <span style={{ color: isDarkMode ? "white" : "black" }}>Reveal Private Key</span>
+              </label>
+            </li>
+          ) : null}
           <li className={selectingNetwork ? "hidden" : ""}>
             <button
-              className="menu-item text-error h-8 btn-sm rounded-xl! flex gap-3 py-3"
+              className="flex gap-3 py-3 px-3 cursor-pointer rounded-lg transition-all duration-200 hover:bg-gradient-to-r hover:from-[rgba(48,180,237,0.16)] hover:to-[rgba(227,6,110,0.16)] w-full text-left"
               type="button"
               onClick={() => disconnect()}
             >
-              <ArrowLeftEndOnRectangleIcon className="h-6 w-4 ml-2 sm:ml-0" /> <span>Disconnect</span>
+              <ArrowLeftEndOnRectangleIcon className="h-5 w-5" style={{ color: "#FB3748" }} />
+              <span style={{ color: "#FB3748" }}>Disconnect</span>
             </button>
           </li>
         </ul>