create-stylus 1.1.0

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

@@ -0,0 +1,37 @@
+import React from "react";
+import { useTheme } from "next-themes";
+
+export const BackGround = () => {
+  const { resolvedTheme } = useTheme();
+  const isDarkMode = resolvedTheme === "dark";
+
+  if (!isDarkMode) {
+    return <></>;
+  }
+
+  return (
+    <>
+      <div
+        className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-[70vh] w-[70vh] rounded-full -z-50"
+        style={{
+          backgroundColor: "rgba(230, 15, 119, 0.33)",
+          filter: "blur(254.85px)",
+        }}
+      />
+      <div
+        className="absolute top-0 -right-2 -translate-y-1/2 w-[630px] h-[630px] rounded-full -z-50"
+        style={{
+          backgroundColor: "#224457",
+          filter: "blur(164.85px)",
+        }}
+      />
+      <div
+        className="absolute top-0 left-0 translate-x-2 -translate-y-1/2 w-[630px] h-[630px] rounded-full -z-50"
+        style={{
+          backgroundColor: "#252525",
+          filter: "blur(274.85px)",
+        }}
+      />
+    </>
+  );
+};

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

@@ -0,0 +1,40 @@
+import React from "react";
+import Link from "next/link";
+
+interface CardProps {
+  icon: React.ReactNode;
+  description: React.ReactNode;
+  linkHref: string;
+  linkText: string;
+  isDarkMode: boolean;
+}
+
+export const Card: React.FC<CardProps> = ({ icon, description, linkHref, linkText, isDarkMode }) => {
+  return (
+    <div
+      className={`relative h-full rounded-3xl border-2 border-transparent p-4 text-center flex flex-col items-center justify-evenly max-w-md ${
+        isDarkMode ? "gradient-border-red" : "gradient-border-light"
+      }`}
+      style={{
+        boxShadow: "0 0 0 3px transparent",
+      }}
+    >
+      <div className="absolute top-0 left-1/2 -translate-x-1/2">
+        <svg xmlns="http://www.w3.org/2000/svg" width="84" height="6" viewBox="0 0 84 6" fill="none">
+          <path d="M41.3071 6L15.6728 6L0 0L84 0L69.02 6L41.3071 6Z" fill="#E3066E" />
+        </svg>
+      </div>
+      <div>{icon}</div>
+      <p className="text-sm">
+        {description}
+        <br />
+        <Link href={linkHref} passHref className="underline underline-offset-4 font-semibold">
+          {linkText}
+        </Link>{" "}
+        tab.
+      </p>
+    </div>
+  );
+};
+
+export default Card;

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

@@ -0,0 +1,93 @@
+import React, { useMemo } from "react";
+import Link from "next/link";
+import { useTheme } from "next-themes";
+import { CurrencyDollarIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
+//import { HeartIcon } from "@heroicons/react/24/outline";
+//import { BuidlGuidlLogo } from "~~/components/assets/BuidlGuidlLogo";
+import { Faucet } from "~~/components/scaffold-eth";
+import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
+import { useGlobalState } from "~~/services/store/store";
+import { arbitrumNitro } from "~~/utils/scaffold-stylus/chain";
+
+/**
+ * Site footer
+ */
+export const Footer = () => {
+  const nativeCurrencyPrice = useGlobalState(state => state.nativeCurrency.price);
+  const { targetNetwork } = useTargetNetwork();
+  const { resolvedTheme } = useTheme();
+  const isLocalNetwork = targetNetwork.id === arbitrumNitro.id;
+
+  const isDarkMode = useMemo(() => {
+    return resolvedTheme === "dark";
+  }, [resolvedTheme]);
+
+  return (
+    <div
+      className="min-h-0 py-5 px-1 mb-11 lg:mb-0"
+      style={{
+        backgroundColor: isDarkMode ? "black" : "white",
+      }}
+    >
+      <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 flex-col md:flex-row gap-2 pointer-events-auto">
+            {nativeCurrencyPrice > 0 && (
+              <div>
+                <div className="btn btn-sm font-normal gap-1 cursor-auto border-round-color bg-base-100">
+                  <CurrencyDollarIcon className="h-4 w-4 stroke-[#E3066E]" />
+                  <span>{nativeCurrencyPrice.toFixed(2)}</span>
+                </div>
+              </div>
+            )}
+            {isLocalNetwork && (
+              <>
+                <Faucet />
+                <Link
+                  href="/blockexplorer"
+                  passHref
+                  className="btn btn-sm font-normal gap-1 border-round-color bg-base-100"
+                >
+                  <MagnifyingGlassIcon className="h-4 w-4 stroke-[#E3066E]" />
+                  <span>Block Explorer</span>
+                </Link>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+      <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 className="text-center">
+              <a href="https://github.com/Arb-Stylus/scaffold-stylus" target="_blank" rel="noreferrer" className="link">
+                Fork me
+              </a>
+            </div>
+            <span>·</span>
+            {/*<div className="flex justify-center items-center gap-2">
+              <p className="m-0 text-center">
+                Built with <HeartIcon className="inline-block h-4 w-4" /> at
+              </p>
+              <a
+                className="flex justify-center items-center gap-1"
+                href="https://buidlguidl.com/"
+                target="_blank"
+                rel="noreferrer"
+              >
+                <BuidlGuidlLogo className="w-3 h-5 pb-1" />
+                <span className="link">BuidlGuidl</span>
+              </a>
+            </div>
+            <span>·</span>*/}
+            <div className="text-center">
+              <a href="https://t.me/joinchat/KByvmRe5wkR-8F_zz6AjpA" target="_blank" rel="noreferrer" className="link">
+                Support
+              </a>
+            </div>
+          </div>
+        </ul>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,114 @@
+"use client";
+
+import React, { useCallback, useRef, useState } from "react";
+import Image from "next/image";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { SwitchTheme } from "./SwitchTheme";
+import { Bars3Icon, BugAntIcon } from "@heroicons/react/24/outline";
+import { RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";
+import { useOutsideClick, useTargetNetwork } from "~~/hooks/scaffold-eth";
+import { arbitrumNitro } from "~~/utils/scaffold-stylus/chain";
+
+type HeaderMenuLink = {
+  label: string;
+  href: string;
+  icon?: React.ReactNode;
+};
+
+export const menuLinks: HeaderMenuLink[] = [
+  {
+    label: "Home",
+    href: "/",
+  },
+  {
+    label: "Debug Contracts",
+    href: "/debug",
+    icon: <BugAntIcon className="h-4 w-4" />,
+  },
+];
+
+export const HeaderMenuLinks = () => {
+  const pathname = usePathname();
+
+  return (
+    <>
+      {menuLinks.map(({ label, href, icon }) => {
+        const isActive = pathname === href;
+        return (
+          <li key={href}>
+            <Link
+              href={href}
+              passHref
+              className={`${
+                isActive ? "bg-secondary 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`}
+            >
+              {icon}
+              <span>{label}</span>
+            </Link>
+          </li>
+        );
+      })}
+    </>
+  );
+};
+
+/**
+ * Site header
+ */
+export const Header = () => {
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+  const burgerMenuRef = useRef<HTMLDivElement>(null);
+  const { targetNetwork } = useTargetNetwork();
+  const isLocalNetwork = targetNetwork?.id === arbitrumNitro.id;
+  useOutsideClick(
+    burgerMenuRef,
+    useCallback(() => setIsDrawerOpen(false), []),
+  );
+
+  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="navbar-start w-auto lg:w-1/2">
+        <div className="lg:hidden dropdown" ref={burgerMenuRef}>
+          <label
+            tabIndex={0}
+            className={`ml-1 btn btn-ghost ${isDrawerOpen ? "hover:bg-secondary" : "hover:bg-transparent"}`}
+            onClick={() => {
+              setIsDrawerOpen(prevIsOpenState => !prevIsOpenState);
+            }}
+          >
+            <Bars3Icon className="h-1/2" />
+          </label>
+          {isDrawerOpen && (
+            <ul
+              tabIndex={0}
+              className="menu menu-compact dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-52"
+              onClick={() => {
+                setIsDrawerOpen(false);
+              }}
+            >
+              <HeaderMenuLinks />
+            </ul>
+          )}
+        </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>
+          <div className="flex flex-col">
+            <span className="font-bold leading-tight">Scaffold Stylus</span>
+            <span className="text-xs">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">
+        <RainbowKitCustomConnectButton />
+        <SwitchTheme className={`pointer-events-auto ${isLocalNetwork ? "self-end md:self-auto" : ""}`} />
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,77 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { BackGround } from "./Background";
+import { RainbowKitProvider, darkTheme, lightTheme } from "@rainbow-me/rainbowkit";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { AppProgressBar as ProgressBar } from "next-nprogress-bar";
+import { useTheme } from "next-themes";
+import { Toaster } from "react-hot-toast";
+import { WagmiProvider } from "wagmi";
+import { Footer } from "~~/components/Footer";
+import { Header } from "~~/components/Header";
+import { BlockieAvatar } from "~~/components/scaffold-eth";
+import { useInitializeNativeCurrencyPrice, useTargetNetwork } from "~~/hooks/scaffold-eth";
+import { wagmiConfig } from "~~/services/web3/wagmiConfig";
+import { arbitrumNitro, initBurnerPK } from "~~/utils/scaffold-stylus";
+
+const ScaffoldEthApp = ({ children }: { children: React.ReactNode }) => {
+  useInitializeNativeCurrencyPrice();
+  const { targetNetwork } = useTargetNetwork();
+
+  useEffect(() => {
+    if (targetNetwork.id === arbitrumNitro.id) {
+      initBurnerPK();
+    }
+  }, [targetNetwork]);
+
+  return (
+    <>
+      <div className="flex flex-col min-h-screen">
+        <Header />
+        <main className="relative flex flex-col flex-1">
+          <BackGround />
+          {children}
+        </main>
+        <Footer />
+      </div>
+      <Toaster />
+    </>
+  );
+};
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+    },
+  },
+});
+
+export const ScaffoldEthAppWithProviders = ({ children }: { children: React.ReactNode }) => {
+  const { resolvedTheme } = useTheme();
+  const isDarkMode = resolvedTheme === "dark";
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return null;
+  }
+
+  return (
+    <WagmiProvider config={wagmiConfig}>
+      <QueryClientProvider client={queryClient}>
+        <ProgressBar height="3px" color="#2299dd" />
+        <RainbowKitProvider
+          avatar={BlockieAvatar}
+          theme={mounted ? (isDarkMode ? darkTheme() : lightTheme()) : lightTheme()}
+        >
+          <ScaffoldEthApp>{children}</ScaffoldEthApp>
+        </RainbowKitProvider>
+      </QueryClientProvider>
+    </WagmiProvider>
+  );
+};

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

@@ -0,0 +1,41 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useTheme } from "next-themes";
+import { MoonIcon, SunIcon } from "@heroicons/react/24/outline";
+
+export const SwitchTheme = ({ className }: { className?: string }) => {
+  const { setTheme, resolvedTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  const isDarkMode = resolvedTheme === "dark";
+
+  const handleToggle = () => {
+    if (isDarkMode) {
+      setTheme("light");
+      return;
+    }
+    setTheme("dark");
+  };
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  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}`}>
+      {
+        <label
+          htmlFor="theme-toggle"
+          className={`swap swap-rotate ${!isDarkMode ? "swap-active" : ""}`}
+          onClick={handleToggle}
+        >
+          <SunIcon className="swap-on h-5 w-5" />
+          <MoonIcon className="swap-off h-5 w-5" />
+        </label>
+      }
+    </div>
+  );
+};

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

@@ -0,0 +1,13 @@
+"use client";
+
+import * as React from "react";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { type ThemeProviderProps } from "next-themes/dist/types";
+
+export const ThemeProvider = ({ children, ...props }: ThemeProviderProps) => {
+  return (
+    <NextThemesProvider attribute="data-theme" defaultTheme="dark" enableSystem disableTransitionOnChange {...props}>
+      {children}
+    </NextThemesProvider>
+  );
+};

package/templates/base/packages/nextjs/components/assets/BuidlGuidlLogo.tsx

@@ -0,0 +1,18 @@
+export const BuidlGuidlLogo = ({ className }: { className: string }) => {
+  return (
+    <svg
+      className={className}
+      width="53"
+      height="72"
+      viewBox="0 0 53 72"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        d="M25.9 17.434v15.638h3.927v9.04h9.718v-9.04h6.745v18.08l-10.607 19.88-12.11-.182-12.11.183L.856 51.152v-18.08h6.713v9.04h9.75v-9.04h4.329V2.46a2.126 2.126 0 0 1 4.047-.914c1.074.412 2.157 1.5 3.276 2.626 1.33 1.337 2.711 2.726 4.193 3.095 1.496.373 2.605-.026 3.855-.475 1.31-.47 2.776-.997 5.005-.747 1.67.197 2.557 1.289 3.548 2.509 1.317 1.623 2.82 3.473 6.599 3.752l-.024.017c-2.42 1.709-5.726 4.043-10.86 3.587-1.605-.139-2.736-.656-3.82-1.153-1.546-.707-2.997-1.37-5.59-.832-2.809.563-4.227 1.892-5.306 2.903-.236.221-.456.427-.67.606Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+};

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

@@ -0,0 +1,187 @@
+"use client";
+
+import { AddressCopyIcon } from "./AddressCopyIcon";
+import { AddressLinkWrapper } from "./AddressLinkWrapper";
+import { Address as AddressType, getAddress, isAddress } from "viem";
+import { normalize } from "viem/ens";
+import { useEnsAvatar, useEnsName } from "wagmi";
+import { BlockieAvatar } from "~~/components/scaffold-eth";
+import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
+import { getBlockExplorerAddressLink } from "~~/utils/scaffold-stylus";
+
+const textSizeMap = {
+  "3xs": "text-[10px]",
+  "2xs": "text-[11px]",
+  xs: "text-xs",
+  sm: "text-sm",
+  base: "text-base",
+  lg: "text-lg",
+  xl: "text-xl",
+  "2xl": "text-2xl",
+  "3xl": "text-3xl",
+  "4xl": "text-4xl",
+} as const;
+
+const blockieSizeMap = {
+  "3xs": 4,
+  "2xs": 5,
+  xs: 6,
+  sm: 7,
+  base: 8,
+  lg: 9,
+  xl: 10,
+  "2xl": 12,
+  "3xl": 15,
+  "4xl": 17,
+  "5xl": 19,
+  "6xl": 21,
+  "7xl": 23,
+} as const;
+
+const copyIconSizeMap = {
+  "3xs": "h-2.5 w-2.5",
+  "2xs": "h-3 w-3",
+  xs: "h-3.5 w-3.5",
+  sm: "h-4 w-4",
+  base: "h-[18px] w-[18px]",
+  lg: "h-5 w-5",
+  xl: "h-[22px] w-[22px]",
+  "2xl": "h-6 w-6",
+  "3xl": "h-[26px] w-[26px]",
+  "4xl": "h-7 w-7",
+} as const;
+
+type SizeMap = typeof textSizeMap | typeof blockieSizeMap;
+
+const getNextSize = <T extends SizeMap>(sizeMap: T, currentSize: keyof T, step = 1): keyof T => {
+  const sizes = Object.keys(sizeMap) as Array<keyof T>;
+  const currentIndex = sizes.indexOf(currentSize);
+  const nextIndex = Math.min(currentIndex + step, sizes.length - 1);
+  return sizes[nextIndex];
+};
+
+const getPrevSize = <T extends SizeMap>(sizeMap: T, currentSize: keyof T, step = 1): keyof T => {
+  const sizes = Object.keys(sizeMap) as Array<keyof T>;
+  const currentIndex = sizes.indexOf(currentSize);
+  const prevIndex = Math.max(currentIndex - step, 0);
+  return sizes[prevIndex];
+};
+
+type AddressProps = {
+  address?: AddressType;
+  disableAddressLink?: boolean;
+  format?: "short" | "long";
+  size?: "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl";
+  onlyEnsOrAddress?: boolean;
+};
+
+export const Address = ({
+  address,
+  disableAddressLink,
+  format,
+  size = "base",
+  onlyEnsOrAddress = false,
+}: AddressProps) => {
+  const checkSumAddress = address ? getAddress(address) : undefined;
+
+  const { targetNetwork } = useTargetNetwork();
+
+  const { data: ens, isLoading: isEnsNameLoading } = useEnsName({
+    address: checkSumAddress,
+    chainId: 1,
+    query: {
+      enabled: isAddress(checkSumAddress ?? ""),
+    },
+  });
+  const { data: ensAvatar } = useEnsAvatar({
+    name: ens ? normalize(ens) : undefined,
+    chainId: 1,
+    query: {
+      enabled: Boolean(ens),
+      gcTime: 30_000,
+    },
+  });
+
+  const shortAddress = checkSumAddress?.slice(0, 6) + "..." + checkSumAddress?.slice(-4);
+  const displayAddress = format === "long" ? checkSumAddress : shortAddress;
+  const displayEnsOrAddress = ens || displayAddress;
+
+  const showSkeleton = !checkSumAddress || (!onlyEnsOrAddress && (ens || isEnsNameLoading));
+
+  const addressSize = showSkeleton && !onlyEnsOrAddress ? getPrevSize(textSizeMap, size, 2) : size;
+  const ensSize = getNextSize(textSizeMap, addressSize);
+  const blockieSize = showSkeleton && !onlyEnsOrAddress ? getNextSize(blockieSizeMap, addressSize, 4) : addressSize;
+
+  if (!checkSumAddress) {
+    return (
+      <div className="flex items-center">
+        <div
+          className="shrink-0 skeleton rounded-full"
+          style={{
+            width: (blockieSizeMap[blockieSize] * 24) / blockieSizeMap["base"],
+            height: (blockieSizeMap[blockieSize] * 24) / blockieSizeMap["base"],
+          }}
+        ></div>
+        <div className="flex flex-col space-y-1">
+          {!onlyEnsOrAddress && (
+            <div className={`ml-1.5 skeleton rounded-lg font-bold ${textSizeMap[ensSize]}`}>
+              <span className="invisible">0x1234...56789</span>
+            </div>
+          )}
+          <div className={`ml-1.5 skeleton rounded-lg ${textSizeMap[addressSize]}`}>
+            <span className="invisible">0x1234...56789</span>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (!isAddress(checkSumAddress)) {
+    return <span className="text-error">Wrong address</span>;
+  }
+
+  const blockExplorerAddressLink = getBlockExplorerAddressLink(targetNetwork, checkSumAddress);
+
+  return (
+    <div className="flex items-center shrink-0">
+      <div className="shrink-0">
+        <BlockieAvatar
+          address={checkSumAddress}
+          ensImage={ensAvatar}
+          size={(blockieSizeMap[blockieSize] * 24) / blockieSizeMap["base"]}
+        />
+      </div>
+      <div className="flex flex-col">
+        {showSkeleton &&
+          (isEnsNameLoading ? (
+            <div className={`ml-1.5 skeleton rounded-lg font-bold ${textSizeMap[ensSize]}`}>
+              <span className="invisible">{shortAddress}</span>
+            </div>
+          ) : (
+            <span className={`ml-1.5 ${textSizeMap[ensSize]} font-bold`}>
+              <AddressLinkWrapper
+                disableAddressLink={disableAddressLink}
+                blockExplorerAddressLink={blockExplorerAddressLink}
+              >
+                {ens}
+              </AddressLinkWrapper>
+            </span>
+          ))}
+        <div className="flex">
+          <span className={`ml-1.5 ${textSizeMap[addressSize]} font-normal`}>
+            <AddressLinkWrapper
+              disableAddressLink={disableAddressLink}
+              blockExplorerAddressLink={blockExplorerAddressLink}
+            >
+              {onlyEnsOrAddress ? displayEnsOrAddress : displayAddress}
+            </AddressLinkWrapper>
+          </span>
+          <AddressCopyIcon
+            className={`ml-1 ${copyIconSizeMap[addressSize]} cursor-pointer`}
+            address={checkSumAddress}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,23 @@
+import { CheckCircleIcon, DocumentDuplicateIcon } from "@heroicons/react/24/outline";
+import { useCopyToClipboard } from "~~/hooks/scaffold-eth/useCopyToClipboard";
+
+export const AddressCopyIcon = ({ className, address }: { className?: string; address: string }) => {
+  const { copyToClipboard: copyAddressToClipboard, isCopiedToClipboard: isAddressCopiedToClipboard } =
+    useCopyToClipboard();
+
+  return (
+    <button
+      onClick={e => {
+        e.stopPropagation();
+        copyAddressToClipboard(address);
+      }}
+      type="button"
+    >
+      {isAddressCopiedToClipboard ? (
+        <CheckCircleIcon className={className} aria-hidden="true" />
+      ) : (
+        <DocumentDuplicateIcon className={className} aria-hidden="true" />
+      )}
+    </button>
+  );
+};

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

@@ -0,0 +1,29 @@
+import Link from "next/link";
+import { useTargetNetwork } from "~~/hooks/scaffold-eth";
+import { arbitrumNitro } from "~~/utils/scaffold-stylus/chain";
+
+type AddressLinkWrapperProps = {
+  children: React.ReactNode;
+  disableAddressLink?: boolean;
+  blockExplorerAddressLink: string;
+};
+
+export const AddressLinkWrapper = ({
+  children,
+  disableAddressLink,
+  blockExplorerAddressLink,
+}: AddressLinkWrapperProps) => {
+  const { targetNetwork } = useTargetNetwork();
+
+  return disableAddressLink ? (
+    <>{children}</>
+  ) : (
+    <Link
+      href={blockExplorerAddressLink}
+      target={targetNetwork.id === arbitrumNitro.id ? undefined : "_blank"}
+      rel={targetNetwork.id === arbitrumNitro.id ? undefined : "noopener noreferrer"}
+    >
+      {children}
+    </Link>
+  );
+};