create-stylus 0.1.5 → 0.1.7

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

@@ -0,0 +1,59 @@
+import { useRef } from "react";
+import { rainbowkitBurnerWallet } from "burner-connector";
+import { ShieldExclamationIcon } from "@heroicons/react/24/outline";
+import { useCopyToClipboard } from "~~/hooks/scaffold-eth";
+import { getParsedError, notification } from "~~/utils/scaffold-eth";
+
+const BURNER_WALLET_PK_KEY = "burnerWallet.pk";
+
+export const RevealBurnerPKModal = () => {
+  const { copyToClipboard, isCopiedToClipboard } = useCopyToClipboard();
+  const modalCheckboxRef = useRef<HTMLInputElement>(null);
+
+  const handleCopyPK = async () => {
+    try {
+      const storage = rainbowkitBurnerWallet.useSessionStorage ? sessionStorage : localStorage;
+      const burnerPK = storage?.getItem(BURNER_WALLET_PK_KEY);
+      if (!burnerPK) throw new Error("Burner wallet private key not found");
+      await copyToClipboard(burnerPK);
+      notification.success("Burner wallet private key copied to clipboard");
+    } catch (e) {
+      const parsedError = getParsedError(e);
+      notification.error(parsedError);
+      if (modalCheckboxRef.current) modalCheckboxRef.current.checked = false;
+    }
+  };
+
+  return (
+    <>
+      <div>
+        <input type="checkbox" id="reveal-burner-pk-modal" className="modal-toggle" ref={modalCheckboxRef} />
+        <label htmlFor="reveal-burner-pk-modal" className="modal cursor-pointer">
+          <label className="modal-box relative">
+            {/* dummy input to capture event onclick on modal box */}
+            <input className="h-0 w-0 absolute top-0 left-0" />
+            <label htmlFor="reveal-burner-pk-modal" className="btn btn-ghost btn-sm btn-circle absolute right-3 top-3">
+              ✕
+            </label>
+            <div>
+              <p className="text-lg font-semibold m-0 p-0">Copy Burner Wallet Private Key</p>
+              <div role="alert" className="alert alert-warning mt-4">
+                <ShieldExclamationIcon className="h-6 w-6" />
+                <span className="font-semibold">
+                  Burner wallets are intended for local development only and are not safe for storing real funds.
+                </span>
+              </div>
+              <p>
+                Your Private Key provides <strong>full access</strong> to your entire wallet and funds. This is
+                currently stored <strong>temporarily</strong> in your browser.
+              </p>
+              <button className="btn btn-outline btn-error" onClick={handleCopyPK} disabled={isCopiedToClipboard}>
+                Copy Private Key To Clipboard
+              </button>
+            </div>
+          </label>
+        </label>
+      </div>
+    </>
+  );
+};

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

@@ -4,9 +4,9 @@
 import { useState } from "react";
 import { Balance } from "../Balance";
 import { AddressInfoDropdown } from "./AddressInfoDropdown";
-import { AngularWalletAddress } from "./AngularWalletAddress";
 import { AddressQRCodeModal } from "./AddressQRCodeModal";
 import { BurnerWalletModal } from "./BurnerWalletModal";
+import { RevealBurnerPKModal } from "./RevealBurnerPKModal";
 import { WrongNetworkDropdown } from "./WrongNetworkDropdown";
 import { ConnectButton } from "@rainbow-me/rainbowkit";
 import { Address } from "viem";
@@ -65,13 +65,14 @@ export const RainbowKitCustomConnectButton = () => {
                         {chain.name}
                       </span>
                     </div>
-                    <AngularWalletAddress
+                    <AddressInfoDropdown
                       address={account.address as Address}
                       displayName={account.displayName}
                       ensAvatar={account.ensAvatar}
                       onSwitchAccount={() => setIsBurnerModalOpen(true)}
                     />
                     <AddressQRCodeModal address={account.address as Address} modalId="qrcode-modal" />
+                    <RevealBurnerPKModal />
                   </>
                 );
               })()}

package/templates/base/packages/nextjs/eslint.config.mjs

@@ -29,4 +29,10 @@ export default defineConfig([
       ],
     },
   },
+  {
+    files: ["next-env.d.ts"],
+    rules: {
+      "@typescript-eslint/triple-slash-reference": "off",
+    },
+  },
 ]);

package/templates/base/packages/nextjs/hooks/scaffold-eth/useScaffoldEventHistory.ts

@@ -1,7 +1,8 @@
 import { useEffect, useState } from "react";
-import { useInfiniteQuery } from "@tanstack/react-query";
+import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
 import { Abi, AbiEvent, ExtractAbiEventNames } from "abitype";
 import { BlockNumber, GetLogsParameters } from "viem";
+import { arbitrumNitro } from "~~/utils/scaffold-stylus/supportedChains";
 import { Config, UsePublicClientReturnType, useBlockNumber, usePublicClient } from "wagmi";
 import { useSelectedNetwork } from "~~/hooks/scaffold-eth";
 import { useDeployedContractInfo } from "~~/hooks/scaffold-eth";
@@ -54,11 +55,15 @@ const getEvents = async (
 };
 
 /**
- * Reads events from a deployed contract
+ * @deprecated **Recommended only for local (arbitrum nitro) chains and development.**
+ * It uses getLogs which can overload RPC endpoints (especially on L2s with short block times).
+ * For production, use an indexer such as ponder.sh or similar to query contract events efficiently.
+ *
+ * Reads events from a deployed contract.
  * @param config - The config settings
  * @param config.contractName - deployed contract name
  * @param config.eventName - name of the event to listen for
- * @param config.fromBlock - the block number to start reading events from
+ * @param config.fromBlock - optional block number to start reading events from (defaults to `deployedOnBlock` in deployedContracts.ts if set for contract, otherwise defaults to 0)
  * @param config.toBlock - optional block number to stop reading events at (if not provided, reads until current block)
  * @param config.chainId - optional chainId that is configured with the scaffold project to make use for multi-chain interactions.
  * @param config.filters - filters to be applied to the event (parameterName: value)
@@ -91,10 +96,21 @@ export const useScaffoldEventHistory = <
 }: UseScaffoldEventHistoryConfig<TContractName, TEventName, TBlockData, TTransactionData, TReceiptData>) => {
   const selectedNetwork = useSelectedNetwork(chainId);
 
+  // Runtime warning for non-local chains
+  useEffect(() => {
+    if (selectedNetwork.id !== arbitrumNitro.id) {
+      console.log(
+        "⚠️ useScaffoldEventHistory is not optimized for production use. It can overload RPC endpoints (especially on L2s)",
+      );
+    }
+  }, [selectedNetwork.id]);
+
   const publicClient = usePublicClient({
     chainId: selectedNetwork.id,
   });
-  const [isFirstRender, setIsFirstRender] = useState(true);
+  const [liveEvents, setLiveEvents] = useState<any[]>([]);
+  const [lastFetchedBlock, setLastFetchedBlock] = useState<bigint | null>(null);
+  const [isPollingActive, setIsPollingActive] = useState(false);
 
   const { data: blockNumber } = useBlockNumber({ watch: watch, chainId: selectedNetwork.id });
 
@@ -109,6 +125,15 @@ export const useScaffoldEventHistory = <
 
   const isContractAddressAndClientReady = Boolean(deployedContractData?.address) && Boolean(publicClient);
 
+  const fromBlockValue =
+    fromBlock !== undefined
+      ? fromBlock
+      : BigInt(
+          deployedContractData && "deployedOnBlock" in deployedContractData
+            ? (deployedContractData.deployedOnBlock as any) || 0
+            : 0,
+        );
+
   const query = useInfiniteQuery({
     queryKey: [
       "eventHistory",
@@ -116,7 +141,7 @@ export const useScaffoldEventHistory = <
         contractName,
         address: deployedContractData?.address,
         eventName,
-        fromBlock: fromBlock.toString(),
+        fromBlock: fromBlockValue?.toString(),
         toBlock: toBlock?.toString(),
         chainId: selectedNetwork.id,
         filters: JSON.stringify(filters, replacer),
@@ -146,18 +171,16 @@ export const useScaffoldEventHistory = <
         { blockData, transactionData, receiptData },
       );
 
+      setLastFetchedBlock(batchToBlock || blockNumber || 0n);
+
       return data;
     },
-    enabled: enabled && isContractAddressAndClientReady,
-    initialPageParam: fromBlock,
+    enabled: enabled && isContractAddressAndClientReady && !isPollingActive, // Disable when polling starts
+    initialPageParam: fromBlockValue,
     getNextPageParam: (lastPage, allPages, lastPageParam) => {
-      if (!blockNumber || fromBlock >= blockNumber) return undefined;
+      if (!blockNumber || fromBlockValue >= blockNumber) return undefined;
 
-      const lastPageHighestBlock = Math.max(
-        Number(lastPageParam),
-        ...(lastPage || []).map(event => Number(event.blockNumber || 0)),
-      );
-      const nextBlock = BigInt(Math.max(Number(lastPageParam), lastPageHighestBlock) + 1);
+      const nextBlock = lastPageParam + BigInt(blocksBatchSize);
 
       // Don't go beyond the specified toBlock or current block
       const maxBlock = toBlock && toBlock < blockNumber ? toBlock : blockNumber;
@@ -182,28 +205,84 @@ export const useScaffoldEventHistory = <
     },
   });
 
-  useEffect(() => {
-    const shouldSkipEffect = !blockNumber || !watch || isFirstRender;
-    if (shouldSkipEffect) {
-      // skipping on first render, since on first render we should call queryFn with
-      // fromBlock value, not blockNumber
-      if (isFirstRender) setIsFirstRender(false);
-      return;
-    }
+  // Check if we're caught up and should start polling
+  const shouldStartPolling = () => {
+    if (!watch || !blockNumber || isPollingActive) return false;
 
-    query.fetchNextPage();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [blockNumber, watch]);
+    return !query.hasNextPage && query.status === "success";
+  };
+
+  // Poll for new events when watch mode is enabled
+  useQuery({
+    queryKey: ["liveEvents", contractName, eventName, blockNumber?.toString(), lastFetchedBlock?.toString()],
+    enabled: Boolean(
+      watch && enabled && isContractAddressAndClientReady && blockNumber && (shouldStartPolling() || isPollingActive),
+    ),
+    queryFn: async () => {
+      if (!isContractAddressAndClientReady || !blockNumber) return null;
+
+      if (!isPollingActive && shouldStartPolling()) {
+        setIsPollingActive(true);
+      }
 
-  // Manual trigger to fetch next page when previous page completes
+      const maxBlock = toBlock && toBlock < blockNumber ? toBlock : blockNumber;
+      const startBlock = lastFetchedBlock || maxBlock;
+
+      // Only fetch if there are new blocks to check
+      if (startBlock >= maxBlock) return null;
+
+      const newEvents = await getEvents(
+        {
+          address: deployedContractData?.address,
+          event,
+          fromBlock: startBlock + 1n,
+          toBlock: maxBlock,
+          args: filters,
+        },
+        publicClient,
+        { blockData, transactionData, receiptData },
+      );
+
+      if (newEvents && newEvents.length > 0) {
+        setLiveEvents(prev => [...newEvents, ...prev]);
+      }
+
+      setLastFetchedBlock(maxBlock);
+      return newEvents;
+    },
+    refetchInterval: false,
+  });
+
+  // Manual trigger to fetch next page when previous page completes (only when not polling)
   useEffect(() => {
-    if (query.status === "success" && query.hasNextPage && !query.isFetchingNextPage && !query.error) {
+    if (
+      !isPollingActive &&
+      query.status === "success" &&
+      query.hasNextPage &&
+      !query.isFetchingNextPage &&
+      !query.error
+    ) {
       query.fetchNextPage();
     }
-  }, [query]);
+  }, [query, isPollingActive]);
+
+  // Combine historical data from infinite query with live events from watch hook
+  const historicalEvents = query.data?.pages || [];
+  const allEvents = [...liveEvents, ...historicalEvents] as typeof historicalEvents;
+
+  // remove duplicates
+  const seenEvents = new Set<string>();
+  const combinedEvents = allEvents.filter(event => {
+    const eventKey = `${event?.transactionHash}-${event?.logIndex}-${event?.blockHash}`;
+    if (seenEvents.has(eventKey)) {
+      return false;
+    }
+    seenEvents.add(eventKey);
+    return true;
+  }) as typeof historicalEvents;
 
   return {
-    data: query.data?.pages,
+    data: combinedEvents,
     status: query.status,
     error: query.error,
     isLoading: query.isLoading,

package/templates/base/packages/nextjs/hooks/scaffold-eth/useScaffoldWriteContract.ts

@@ -117,7 +117,11 @@ export function useScaffoldWriteContract<TContractName extends ContractName>(
       } as WriteContractVariables<Abi, string, any[], Config, number>;
 
       if (!finalConfig?.disableSimulate) {
-        await simulateContractWriteAndNotifyError({ wagmiConfig, writeContractParams: writeContractObject });
+        await simulateContractWriteAndNotifyError({
+          wagmiConfig,
+          writeContractParams: writeContractObject,
+          chainId: selectedNetwork.id as AllowedChainIds,
+        });
       }
 
       const makeWriteWithParams = () =>

package/templates/base/packages/nextjs/hooks/scaffold-eth/useTransactor.tsx

@@ -2,9 +2,10 @@ import { Hash, SendTransactionParameters, TransactionReceipt, WalletClient } fro
 import { Config, useWalletClient } from "wagmi";
 import { getPublicClient } from "wagmi/actions";
 import { SendTransactionMutate } from "wagmi/query";
+import scaffoldConfig from "~~/scaffold.config";
 import { wagmiConfig } from "~~/services/web3/wagmiConfig";
-import { getParsedError, notification } from "~~/utils/scaffold-eth";
-import { getBlockExplorerTxLink } from "~~/utils/scaffold-stylus";
+import { getParsedErrorWithAllAbis, notification } from "~~/utils/scaffold-eth";
+import { AllowedChainIds, getBlockExplorerTxLink } from "~~/utils/scaffold-stylus";
 import { TransactorFuncOptions } from "~~/utils/scaffold-eth/contract";
 
 type TransactionFunc = (
@@ -51,8 +52,9 @@ export const useTransactor = (_walletClient?: WalletClient): TransactionFunc =>
     let transactionHash: Hash | undefined = undefined;
     let transactionReceipt: TransactionReceipt | undefined;
     let blockExplorerTxURL = "";
+    let chainId: number = scaffoldConfig.targetNetworks[0].id;
     try {
-      const network = await walletClient.getChainId();
+      chainId = await walletClient.getChainId();
       // Get full transaction from public client
       const publicClient = getPublicClient(wagmiConfig);
 
@@ -68,7 +70,7 @@ export const useTransactor = (_walletClient?: WalletClient): TransactionFunc =>
       }
       notification.remove(notificationId);
 
-      blockExplorerTxURL = network ? getBlockExplorerTxLink(network, transactionHash) : "";
+      blockExplorerTxURL = chainId ? getBlockExplorerTxLink(chainId, transactionHash) : "";
 
       notificationId = notification.loading(
         <TxnNotification message="Waiting for transaction to complete." blockExplorerLink={blockExplorerTxURL} />,
@@ -95,7 +97,7 @@ export const useTransactor = (_walletClient?: WalletClient): TransactionFunc =>
         notification.remove(notificationId);
       }
       console.error("⚡️ ~ file: useTransactor.ts ~ error", error);
-      const message = getParsedError(error);
+      const message = getParsedErrorWithAllAbis(error, chainId as AllowedChainIds);
 
       // if receipt was reverted, show notification with block explorer link and return error
       if (transactionReceipt?.status === "reverted") {

package/templates/base/packages/nextjs/icons/LightBugAntIcon.tsx

@@ -17,9 +17,9 @@ const LightBugAntIcon = ({ width = 26, height = 30, className = "" }) => {
       <path
         d="M13.0007 16.0776C14.6792 16.0776 16.3313 16.1925 17.9469 16.4179C19.4631 16.6275 20.6752 17.8049 20.6752 19.3082C20.6752 24.6609 17.2393 29 12.9993 29C8.75924 29 5.32482 24.6609 5.32482 19.3082C5.32482 17.8063 6.53835 16.6275 8.05306 16.4179C9.69215 16.1909 11.3454 16.0772 13.0007 16.0776ZM13.0007 16.0776C17.2159 16.0776 21.2571 16.807 25 18.1452C24.8235 21.1048 24.2573 24.0295 23.3157 26.8463M13.0007 16.0776C8.78556 16.0776 4.74438 16.807 1 18.1452C1.18276 21.1661 1.76028 24.0837 2.68578 26.8463M13.0007 16.0776C13.4456 16.0777 13.8858 15.9891 14.2949 15.8174C14.7039 15.6456 15.0732 15.3941 15.3804 15.0782C15.6877 14.7622 15.9264 14.3884 16.0824 13.9792C16.2383 13.57 16.308 13.1341 16.2875 12.6977M13.0007 16.0776C12.5559 16.0777 12.1156 15.9891 11.7066 15.8174C11.2976 15.6456 10.9283 15.3941 10.621 15.0782C10.3138 14.7622 10.075 14.3884 9.91911 13.9792C9.7632 13.57 9.69342 13.1341 9.71398 12.6977M16.2875 12.6977C16.2484 11.8675 15.885 11.0841 15.2729 10.5102C14.6607 9.93635 13.847 9.61623 13.0007 9.61638M16.2875 12.6977C18.884 12.4615 21.447 11.9404 23.9254 11.1441C23.845 9.52592 23.652 7.93646 23.3522 6.38578M9.71398 12.6977C9.7531 11.8675 10.1165 11.0841 10.7286 10.5102C11.3407 9.93635 12.1545 9.61623 13.0007 9.61638M9.71398 12.6977C7.07201 12.4564 4.5163 11.9281 2.07755 11.1441C2.15617 9.54687 2.34767 7.95693 2.65069 6.38578M13.0007 9.61638C14.4555 9.61638 15.8825 9.50151 17.2729 9.27752C17.8621 9.18276 18.3549 8.7635 18.4353 8.18343C18.5851 7.07324 18.3813 5.94474 17.8519 4.95282M13.0007 9.61638C11.546 9.61638 10.1204 9.50151 8.72854 9.27752C8.14079 9.18276 7.6466 8.7635 7.56619 8.18343C7.4116 7.07159 7.61615 5.94014 8.15102 4.94852M8.15102 4.94852C7.52825 4.54124 6.9608 4.05923 6.46232 3.51126C6.56467 2.60669 6.85708 1.75668 7.30155 1.00287M8.15102 4.94852C8.61646 4.08119 9.31421 3.35657 10.169 2.85008C11.0238 2.3436 12.0031 2.07592 13.0015 2.07592C13.9998 2.07592 14.9792 2.3436 15.8339 2.85008C16.6887 3.35657 17.3865 4.08263 17.8519 4.94995C18.4762 4.54361 19.0435 4.05974 19.5406 3.51556C19.4414 2.62879 19.1551 1.77205 18.6999 1"
         stroke="url(#paint1_linear_2148_348)"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
       <defs>
         <linearGradient
@@ -30,8 +30,8 @@ const LightBugAntIcon = ({ width = 26, height = 30, className = "" }) => {
           y2="15"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stop-color="#E3066E" />
-          <stop offset="1" stop-color="#203147" />
+          <stop stopColor="#E3066E" />
+          <stop offset="1" stopColor="#203147" />
         </linearGradient>
         <linearGradient
           id="paint1_linear_2148_348"
@@ -41,8 +41,8 @@ const LightBugAntIcon = ({ width = 26, height = 30, className = "" }) => {
           y2="15"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stop-color="#E3066E" />
-          <stop offset="1" stop-color="#203147" />
+          <stop stopColor="#E3066E" />
+          <stop offset="1" stopColor="#203147" />
         </linearGradient>
       </defs>
     </svg>

package/templates/base/packages/nextjs/next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/templates/base/packages/nextjs/package.json

@@ -23,14 +23,13 @@
     "has-ansi": "5.0.1"
   },
   "dependencies": {
-    "@ethersproject/providers": "^5.7.2",
     "@heroicons/react": "^2.1.5",
-    "@rainbow-me/rainbowkit": "2.2.7",
+    "@rainbow-me/rainbowkit": "2.2.8",
     "@tanstack/react-query": "^5.59.15",
     "@uniswap/sdk-core": "^5.8.2",
     "@uniswap/v2-sdk": "^4.6.1",
     "blo": "^1.2.0",
-    "burner-connector": "0.0.16",
+    "burner-connector": "0.0.18",
     "daisyui": "4.5.0",
     "kubo-rpc-client": "^5.0.2",
     "next": "^15.2.3",
@@ -41,8 +40,8 @@
     "react-dom": "^19.0.0",
     "react-hot-toast": "^2.4.0",
     "usehooks-ts": "^3.1.0",
-    "viem": "2.31.1",
-    "wagmi": "2.15.6",
+    "viem": "2.34.0",
+    "wagmi": "2.16.4",
     "zustand": "^5.0.0"
   },
   "devDependencies": {

package/templates/base/packages/nextjs/services/web3/wagmiConnectors.tsx

@@ -38,6 +38,7 @@ const wallets = [
  */
 export const wagmiConnectors = () => {
   // Only create connectors on client-side to avoid SSR issues
+  // TODO: update when https://github.com/rainbow-me/rainbowkit/issues/2476 is resolved
   if (typeof window === "undefined") {
     return [];
   }

package/templates/base/packages/nextjs/styles/globals.css

@@ -24,7 +24,9 @@ p {
 }
 
 .btn {
-  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  box-shadow:
+    0 4px 6px -1px rgb(0 0 0 / 0.1),
+    0 2px 4px -2px rgb(0 0 0 / 0.1);
 }
 
 .btn.btn-ghost {
@@ -96,14 +98,14 @@ p {
   --spacing-2xl: 16px;
   --spacing-4xl: 24px;
   --spacing-7xl: 40px;
-  --stroke-sub-20: rgba(255, 255, 255, 0.20);
-  --bg-surface-surface-40: rgba(2, 2, 2, 0.40);
+  --stroke-sub-20: rgba(255, 255, 255, 0.2);
+  --bg-surface-surface-40: rgba(2, 2, 2, 0.4);
   --bg-surface-input-20: rgba(255, 255, 255, 0.04);
-  --text-sub-600: rgba(255, 255, 255, 0.60);
-  --text-soft-400: rgba(255, 255, 255, 0.40);
-  --text-strong-950: #FFFFFF;
-  --figma-pink: #FF50A2;
-  --figma-sky-blue: #30B4ED;
+  --text-sub-600: rgba(255, 255, 255, 0.6);
+  --text-soft-400: rgba(255, 255, 255, 0.4);
+  --text-strong-950: #ffffff;
+  --figma-pink: #ff50a2;
+  --figma-sky-blue: #30b4ed;
 }
 
 /* Contract Card Styles */
@@ -116,8 +118,8 @@ p {
   gap: var(--spacing-4xl, 24px);
   align-self: stretch;
   border-radius: var(--spacing-2xl, 16px);
-  border: 1px solid var(--stroke-sub-20, rgba(255, 255, 255, 0.20));
-  background: var(--bg-surface-surface-40, rgba(2, 2, 2, 0.40));
+  border: 1px solid var(--stroke-sub-20, rgba(255, 255, 255, 0.2));
+  background: var(--bg-surface-surface-40, rgba(2, 2, 2, 0.4));
   backdrop-filter: blur(25px);
 }
 
@@ -153,7 +155,7 @@ p {
 
 /* Reusable Typography */
 .typography-uppercase {
-  color: var(--text-sub-600, rgba(255, 255, 255, 0.60));
+  color: var(--text-sub-600, rgba(255, 255, 255, 0.6));
   text-align: center;
   font-family: var(--font-orbitron), sans-serif;
   font-size: 14px;
@@ -200,7 +202,7 @@ p {
 }
 
 .tab-button:not(.active) .tab-text {
-  color: var(--text-sub-600, rgba(255, 255, 255, 0.60));
+  color: var(--text-sub-600, rgba(255, 255, 255, 0.6));
 }
 
 /* Function Styling */
@@ -209,7 +211,7 @@ p {
 }
 
 .param-type {
-  color: var(--text-sub-600, rgba(255, 255, 255, 0.60));
+  color: var(--text-sub-600, rgba(255, 255, 255, 0.6));
 }
 
 [data-theme="light"] .param-name {
@@ -234,7 +236,7 @@ p {
 }
 
 .input-text {
-  color: var(--text-soft-400, rgba(255, 255, 255, 0.40));
+  color: var(--text-soft-400, rgba(255, 255, 255, 0.4));
   text-align: center;
   font-family: Inter, sans-serif;
   font-size: 14px;
@@ -296,7 +298,7 @@ p {
   border: none !important;
   box-shadow: none !important;
   outline: none !important;
-  color: var(--text-soft-400, rgba(255, 255, 255, 0.40)) !important;
+  color: var(--text-soft-400, rgba(255, 255, 255, 0.4)) !important;
   font-family: Inter, sans-serif !important;
   font-size: 14px !important;
   font-weight: 500 !important;
@@ -329,8 +331,8 @@ p {
   align-items: center;
   gap: 10px;
   border-radius: var(--spacing-md, 8px);
-  background: linear-gradient(180deg, #FC3592 0%, #E3066E 100%);
-  color: var(--text-strong-950, #FFF);
+  background: linear-gradient(180deg, #fc3592 0%, #e3066e 100%);
+  color: var(--text-strong-950, #fff);
   text-align: center;
   font-family: var(--font-orbitron), sans-serif;
   font-size: 14px;
@@ -343,7 +345,9 @@ p {
   cursor: pointer;
   transition: all 0.2s ease;
   position: relative;
-  box-shadow: 0 2px 0 #FF9CCB, 0 4px 8px rgba(255, 156, 203, 0.3);
+  box-shadow:
+    0 2px 0 #ff9ccb,
+    0 4px 8px rgba(255, 156, 203, 0.3);
 }
 
 .send-button:hover {
@@ -364,8 +368,8 @@ p {
   align-items: center;
   gap: 10px;
   border-radius: var(--spacing-md, 8px);
-  background: linear-gradient(180deg, #FC3592 0%, #E3066E 100%);
-  color: var(--text-strong-950, #FFF);
+  background: linear-gradient(180deg, #fc3592 0%, #e3066e 100%);
+  color: var(--text-strong-950, #fff);
   text-align: center;
   font-family: var(--font-orbitron), sans-serif;
   font-size: 14px;
@@ -378,7 +382,9 @@ p {
   cursor: pointer;
   transition: all 0.2s ease;
   position: relative;
-  box-shadow: 0 2px 0 #FF9CCB, 0 4px 8px rgba(255, 156, 203, 0.3);
+  box-shadow:
+    0 2px 0 #ff9ccb,
+    0 4px 8px rgba(255, 156, 203, 0.3);
   margin-left: auto;
 }
 
@@ -417,4 +423,4 @@ p {
   display: flex;
   align-items: center;
   gap: 8px;
-}
+}

package/templates/base/packages/nextjs/tailwind.config.js

@@ -99,4 +99,4 @@ module.exports = {
       },
     },
   },
-};
+};