create-stylus 0.1.4 → 0.1.6

package/templates/base/packages/nextjs/app/debug/_components/contract/ReadOnlyFunctionForm.tsx

@@ -71,7 +71,7 @@ export const ReadOnlyFunctionForm = ({
 
   return (
     <div className="flex flex-col gap-3 py-5 first:pt-0 last:pb-1">
-      <p className="font-medium my-0 break-words">
+      <p className="font-medium my-0 break-words function-name">
         {abiFunction.name}
         <InheritanceTooltip inheritedFrom={inheritedFrom} />
       </p>
@@ -79,14 +79,21 @@ export const ReadOnlyFunctionForm = ({
       <div className="flex flex-col md:flex-row justify-between gap-2 flex-wrap">
         <div className="grow w-full md:max-w-[80%]">
           {result !== null && result !== undefined && (
-            <div className="bg-secondary rounded-3xl text-sm px-4 py-1.5 break-words overflow-auto">
+            <div
+              className="rounded-lg text-sm px-4 py-1.5 break-words overflow-auto"
+              style={{
+                background: "var(--bg-surface-input-20, rgba(255, 255, 255, 0.04))",
+                backdropFilter: "blur(25px)",
+                border: "none",
+              }}
+            >
               <p className="font-bold m-0 mb-1">Result:</p>
               <pre className="whitespace-pre-wrap break-words">{displayTxResult(result, "sm")}</pre>
             </div>
           )}
         </div>
         <button
-          className="btn btn-secondary btn-sm self-end md:self-start"
+          className="read-button"
           onClick={async () => {
             const { data } = await refetch();
             setResult(data);
@@ -94,7 +101,7 @@ export const ReadOnlyFunctionForm = ({
           disabled={isFetching}
         >
           {isFetching && <span className="loading loading-spinner loading-xs"></span>}
-          Read 📡
+          Read
         </button>
       </div>
     </div>

package/templates/base/packages/nextjs/app/debug/_components/contract/TxReceipt.tsx

@@ -1,42 +1,58 @@
+import { useState } from "react";
 import { TransactionReceipt } from "viem";
-import { CheckCircleIcon, DocumentDuplicateIcon } from "@heroicons/react/24/outline";
+import { CheckCircleIcon, DocumentDuplicateIcon, ChevronUpIcon, ChevronDownIcon } from "@heroicons/react/24/outline";
 import { ObjectFieldDisplay } from "~~/app/debug/_components/contract";
 import { useCopyToClipboard } from "~~/hooks/scaffold-eth/useCopyToClipboard";
 import { replacer } from "~~/utils/scaffold-eth/common";
 
 export const TxReceipt = ({ txResult }: { txResult: TransactionReceipt }) => {
+  const [isExpanded, setIsExpanded] = useState(false);
   const { copyToClipboard: copyTxResultToClipboard, isCopiedToClipboard: isTxResultCopiedToClipboard } =
     useCopyToClipboard();
 
   return (
-    <div className="flex text-sm rounded-3xl peer-checked:rounded-b-none min-h-0 bg-secondary py-0">
-      <div className="mt-1 pl-2">
-        {isTxResultCopiedToClipboard ? (
-          <CheckCircleIcon
-            className="ml-1.5 text-xl font-normal text-base-content h-5 w-5 cursor-pointer"
-            aria-hidden="true"
-          />
-        ) : (
-          <DocumentDuplicateIcon
-            className="ml-1.5 text-xl font-normal h-5 w-5 cursor-pointer"
-            aria-hidden="true"
-            onClick={() => copyTxResultToClipboard(JSON.stringify(txResult, replacer, 2))}
-          />
-        )}
-      </div>
-      <div tabIndex={0} className="flex-wrap collapse collapse-arrow">
-        <input type="checkbox" className="min-h-0! peer" />
-        <div className="collapse-title text-sm min-h-0! py-1.5 pl-1 after:top-4!">
+    <div
+      className="text-sm rounded-lg min-h-0 p-4"
+      style={{
+        background: "var(--bg-surface-input-20, rgba(255, 255, 255, 0.04))",
+        backdropFilter: "blur(25px)",
+        border: "none",
+      }}
+    >
+      {/* Fixed Header */}
+      <div className="flex items-center">
+        <div className="flex items-center">
+          {isTxResultCopiedToClipboard ? (
+            <CheckCircleIcon
+              className="text-xl font-normal text-base-content h-5 w-5 cursor-pointer"
+              aria-hidden="true"
+            />
+          ) : (
+            <DocumentDuplicateIcon
+              className="text-xl font-normal h-5 w-5 cursor-pointer"
+              aria-hidden="true"
+              onClick={() => copyTxResultToClipboard(JSON.stringify(txResult, replacer, 2))}
+            />
+          )}
+        </div>
+        <div className="flex-1 flex items-center pl-2">
           <strong>Transaction Receipt</strong>
         </div>
-        <div className="collapse-content overflow-auto bg-secondary rounded-t-none rounded-3xl pl-0!">
+        <div className="cursor-pointer" onClick={() => setIsExpanded(!isExpanded)}>
+          {isExpanded ? <ChevronUpIcon className="h-5 w-5" /> : <ChevronDownIcon className="h-5 w-5" />}
+        </div>
+      </div>
+
+      {/* Collapsible Content */}
+      {isExpanded && (
+        <div className="overflow-auto rounded-t-none mt-2">
           <pre className="text-xs">
             {Object.entries(txResult).map(([k, v]) => (
               <ObjectFieldDisplay name={k} value={v} size="xs" leftPad={false} key={k} />
             ))}
           </pre>
         </div>
-      </div>
+      )}
     </div>
   );
 };

package/templates/base/packages/nextjs/app/debug/_components/contract/WriteOnlyFunctionForm.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { InheritanceTooltip } from "./InheritanceTooltip";
 import { Abi, AbiFunction } from "abitype";
 import { Address, TransactionReceipt } from "viem";
@@ -16,6 +16,7 @@ import {
 import { IntegerInput } from "~~/components/scaffold-eth";
 import { useTransactor } from "~~/hooks/scaffold-eth";
 import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
+import { AllowedChainIds } from "~~/utils/scaffold-stylus";
 import { simulateContractWriteAndNotifyError } from "~~/utils/scaffold-eth/contract";
 
 type WriteOnlyFunctionFormProps = {
@@ -54,7 +55,11 @@ export const WriteOnlyFunctionForm = ({
           args: getParsedContractFunctionArgs(form),
           value: BigInt(txValue),
         };
-        await simulateContractWriteAndNotifyError({ wagmiConfig, writeContractParams: writeContractObj });
+        await simulateContractWriteAndNotifyError({
+          wagmiConfig,
+          writeContractParams: writeContractObj,
+          chainId: targetNetwork.id as AllowedChainIds,
+        });
 
         const makeWriteWithParams = () => writeContractAsync(writeContractObj);
         await writeTxn(makeWriteWithParams);
@@ -73,8 +78,7 @@ export const WriteOnlyFunctionForm = ({
     setDisplayedTxResult(txResult);
   }, [txResult]);
 
-  // TODO use `useMemo` to optimize also update in ReadOnlyFunctionForm
-  const transformedFunction = transformAbiFunction(abiFunction);
+  const transformedFunction = useMemo(() => transformAbiFunction(abiFunction), [abiFunction]);
   const inputs = transformedFunction.inputs.map((input, inputIndex) => {
     const key = getFunctionInputKey(abiFunction.name, input, inputIndex);
     return (
@@ -95,7 +99,7 @@ export const WriteOnlyFunctionForm = ({
   return (
     <div className="py-5 space-y-3 first:pt-0 last:pb-1">
       <div className={`flex gap-3 ${zeroInputs ? "flex-row justify-between items-center" : "flex-col"}`}>
-        <p className="font-medium my-0 break-words">
+        <p className="font-medium my-0 break-words function-name">
           {abiFunction.name}
           <InheritanceTooltip inheritedFrom={inheritedFrom} />
         </p>
@@ -104,7 +108,7 @@ export const WriteOnlyFunctionForm = ({
           <div className="flex flex-col gap-1.5 w-full">
             <div className="flex items-center ml-2">
               <span className="text-xs font-medium mr-2 leading-none">payable value</span>
-              <span className="block text-xs font-extralight leading-none">wei</span>
+              <span className="block text-xs font-extralight leading-none param-type">wei</span>
             </div>
             <IntegerInput
               value={txValue}
@@ -116,26 +120,28 @@ export const WriteOnlyFunctionForm = ({
             />
           </div>
         ) : null}
-        <div className="flex justify-between gap-2">
+        <div className="flex flex-col gap-2">
           {!zeroInputs && (
-            <div className="grow basis-0">{displayedTxResult ? <TxReceipt txResult={displayedTxResult} /> : null}</div>
+            <div className="w-full">{displayedTxResult ? <TxReceipt txResult={displayedTxResult} /> : null}</div>
           )}
-          <div
-            className={`flex ${
-              writeDisabled &&
-              "tooltip tooltip-bottom tooltip-secondary before:content-[attr(data-tip)] before:-translate-x-1/3 before:left-auto before:transform-none"
-            }`}
-            data-tip={`${writeDisabled && "Wallet not connected or in the wrong network"}`}
-          >
-            <button className="btn btn-secondary btn-sm" disabled={writeDisabled || isPending} onClick={handleWrite}>
-              {isPending && <span className="loading loading-spinner loading-xs"></span>}
-              Send 💸
-            </button>
+          <div className="flex justify-end">
+            <div
+              className={`flex ${
+                writeDisabled &&
+                "tooltip tooltip-bottom tooltip-secondary before:content-[attr(data-tip)] before:-translate-x-1/3 before:left-auto before:transform-none"
+              }`}
+              data-tip={`${writeDisabled && "Wallet not connected or in the wrong network"}`}
+            >
+              <button className="send-button" disabled={writeDisabled || isPending} onClick={handleWrite}>
+                {isPending && <span className="loading loading-spinner loading-xs"></span>}
+                Send
+              </button>
+            </div>
           </div>
         </div>
       </div>
       {zeroInputs && txResult ? (
-        <div className="grow basis-0">
+        <div className="w-full">
           <TxReceipt txResult={txResult} />
         </div>
       ) : null}

package/templates/base/packages/nextjs/app/layout.tsx

@@ -1,13 +1,19 @@
-import { DM_Sans } from "next/font/google";
+import { Inter, Orbitron } from "next/font/google";
 import "@rainbow-me/rainbowkit/styles.css";
 import { Metadata } from "next";
 import { ScaffoldEthAppWithProviders } from "~~/components/ScaffoldEthAppWithProviders";
 import { ThemeProvider } from "~~/components/ThemeProvider";
 import "~~/styles/globals.css";
 
-const dmSans = DM_Sans({
+const inter = Inter({
   subsets: ["latin"],
-  variable: "--font-dm-sans",
+  variable: "--font-inter",
+});
+
+const orbitron = Orbitron({
+  subsets: ["latin"],
+  variable: "--font-orbitron",
+  weight: ["400", "700", "900"],
 });
 
 const baseUrl = process.env.VERCEL_URL
@@ -55,7 +61,7 @@ export const metadata: Metadata = {
 const ScaffoldEthApp = ({ children }: { children: React.ReactNode }) => {
   return (
     <html suppressHydrationWarning>
-      <body className={`${dmSans.variable} font-sans`} suppressHydrationWarning>
+      <body className={`${inter.variable} ${orbitron.variable} font-sans`} suppressHydrationWarning>
         <ThemeProvider>
           <ScaffoldEthAppWithProviders>{children}</ScaffoldEthAppWithProviders>
         </ThemeProvider>

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

@@ -0,0 +1,41 @@
+import React from "react";
+
+interface AngularBorderProps {
+  width: number;
+  height: number;
+  color?: string;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export const AngularBorder: React.FC<AngularBorderProps> = ({
+  width,
+  height,
+  color = "#FD0077",
+  className = "",
+  style = {},
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      viewBox={`0 0 ${width} ${height}`}
+      fill="none"
+      className={className}
+      style={{
+        position: "absolute",
+        top: "-3px",
+        left: 0,
+        pointerEvents: "none",
+        ...style,
+      }}
+    >
+      <path
+        d={`M${width - 20}.132 0.5L${width - 1}.5 ${height / 2}.2109V${height - 1}.5H19.0811L0.5 ${height / 2}.7871V0.5H${width - 20}.132Z`}
+        stroke={color}
+        strokeWidth="1"
+      />
+    </svg>
+  );
+};

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

@@ -1,13 +1,15 @@
 import React, { useMemo } from "react";
 import Link from "next/link";
 import { useTheme } from "next-themes";
-import { CurrencyDollarIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
+import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 //import { HeartIcon } from "@heroicons/react/24/outline";
 //import { BuidlGuidlLogo } from "~~/components/assets/BuidlGuidlLogo";
+import { AngularBorder } from "~~/components/AngularBorder";
 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/supportedChains";
+import EthIcon from "~~/icons/EthIcon";
 
 /**
  * Site footer
@@ -33,60 +35,167 @@ export const Footer = () => {
         <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 className="relative">
+                <AngularBorder width={140} height={40} color="rgba(227, 6, 110, 1)" />
+                <div
+                  className="flex items-center gap-2 px-6 cursor-auto rounded-lg"
+                  style={{
+                    width: "140px",
+                    height: "40px",
+                    display: "flex",
+                    alignItems: "flex-start",
+                    paddingTop: "6px",
+                    position: "relative",
+                    zIndex: 1,
+                  }}
+                >
+                  <EthIcon width={20} height={20} />
+                  <span
+                    style={{
+                      fontFamily: "Orbitron, sans-serif",
+                      fontSize: "13px",
+                      fontWeight: 700,
+                      textTransform: "uppercase",
+                      whiteSpace: "nowrap",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                    }}
+                  >
+                    {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 className="relative">
+                  <AngularBorder width={210} height={40} color="rgba(227, 6, 110, 1)" />
+                  <Link
+                    href="/blockexplorer"
+                    passHref
+                    className="flex items-center gap-2 px-4 py-2 rounded-lg"
+                    style={{
+                      width: "210px",
+                      height: "40px",
+                      display: "flex",
+                      alignItems: "flex-start",
+                      paddingTop: "8px",
+                      position: "relative",
+                      zIndex: 1,
+                    }}
+                  >
+                    <MagnifyingGlassIcon 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",
+                      }}
+                    >
+                      Block Explorer
+                    </span>
+                  </Link>
+                </div>
               </>
             )}
           </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 className="w-full flex justify-end">
+        <div className="flex gap-2">
+          {/* Fork me button */}
+          <a
+            href="https://github.com/Arb-Stylus/scaffold-stylus"
+            target="_blank"
+            rel="noreferrer"
+            className="flex items-center gap-2 px-4 py-2 rounded-2xl border"
+            style={{
+              width: "120px",
+              height: "32px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              borderColor: isDarkMode ? "#353535" : "rgba(0, 0, 0, 0.1)",
+              backgroundColor: isDarkMode ? "transparent" : "rgba(0, 0, 0, 0.04)",
+            }}
+          >
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              style={{ color: isDarkMode ? "#FFF" : "rgba(227, 6, 110, 1)" }}
+            >
+              <path
+                d="M12 0C5.374 0 0 5.373 0 12 0 17.302 3.438 21.8 8.207 23.387c.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"
+                fill="currentColor"
+              />
+            </svg>
+            <span
+              style={{
+                color: isDarkMode ? "#FFF" : "black",
+                fontFamily: "Inter, sans-serif",
+                fontSize: "12px",
+                fontWeight: 500,
+                textTransform: "uppercase",
+                whiteSpace: "nowrap",
+              }}
+            >
+              Fork me
+            </span>
+          </a>
+
+          {/* Support button */}
+          <a
+            href="https://t.me/arbitrum_stylus"
+            target="_blank"
+            rel="noreferrer"
+            className="flex items-center gap-2 px-4 py-2 rounded-2xl border"
+            style={{
+              width: "120px",
+              height: "32px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              borderColor: isDarkMode ? "#353535" : "rgba(0, 0, 0, 0.1)",
+              backgroundColor: isDarkMode ? "transparent" : "rgba(0, 0, 0, 0.04)",
+            }}
+          >
+            <svg
+              width="18"
+              height="18"
+              viewBox="0 0 18 18"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              style={{ color: isDarkMode ? "#FFF" : "rgba(227, 6, 110, 1)" }}
+            >
+              <path
+                d="M8.99987 0.144531C5.52104 0.144531 2.58863 2.52009 2.01657 5.68428H1.50821C0.752731 5.68428 0.144531 6.2925 0.144531 7.048V10.9528C0.144531 11.7083 0.752731 12.3165 1.50821 12.3165H2.16195C2.91743 12.3165 3.52563 11.7083 3.52563 10.9528V6.8144C3.52563 4.02827 5.92511 1.75454 9.0005 1.75454C12.076 1.75454 14.4754 4.02827 14.4754 6.8144V11.1864C14.4754 13.9725 12.076 16.2454 9.0005 16.2454C8.55585 16.2454 8.19544 16.606 8.19551 17.0506C8.19556 17.4952 8.55592 17.8556 9.0005 17.8556C12.4794 17.8556 15.4117 15.4806 15.9838 12.3165H16.492C17.2475 12.3165 17.8556 11.7083 17.8556 10.9528V7.048C17.8556 6.2925 17.2475 5.68428 16.492 5.68428H15.9838C15.4117 2.52009 12.4794 0.144531 9.0005 0.144531H8.99987ZM7.47643 11.8637C7.02965 11.8637 6.65446 12.2387 6.80565 12.6568C7.13012 13.5546 7.98997 14.1963 8.99967 14.1963C10.0094 14.1963 10.8694 13.5546 11.1939 12.6568C11.345 12.2387 10.9699 11.8637 10.5231 11.8637H7.47643Z"
+                fill="currentColor"
+              />
+            </svg>
+
+            <span
+              style={{
+                color: isDarkMode ? "#FFF" : "black",
+                fontFamily: "Inter, sans-serif",
+                fontSize: "12px",
+                fontWeight: 500,
+                textTransform: "uppercase",
+                whiteSpace: "nowrap",
+              }}
+            >
+              Support
+            </span>
+          </a>
+        </div>
       </div>
     </div>
   );