create-stylus 1.1.0

package/templates/base/packages/nextjs/utils/scaffold-eth/getMetadata.ts

@@ -0,0 +1,50 @@
+import type { Metadata } from "next";
+
+const baseUrl = process.env.VERCEL_PROJECT_PRODUCTION_URL
+  ? `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}`
+  : `http://localhost:${process.env.PORT || 3000}`;
+const titleTemplate = "%s | Scaffold-Stylus";
+
+export const getMetadata = ({
+  title,
+  description,
+  imageRelativePath = "/thumbnail.jpg",
+}: {
+  title: string;
+  description: string;
+  imageRelativePath?: string;
+}): Metadata => {
+  const imageUrl = `${baseUrl}${imageRelativePath}`;
+
+  return {
+    metadataBase: new URL(baseUrl),
+    title: {
+      default: title,
+      template: titleTemplate,
+    },
+    description: description,
+    openGraph: {
+      title: {
+        default: title,
+        template: titleTemplate,
+      },
+      description: description,
+      images: [
+        {
+          url: imageUrl,
+        },
+      ],
+    },
+    twitter: {
+      title: {
+        default: title,
+        template: titleTemplate,
+      },
+      description: description,
+      images: [imageUrl],
+    },
+    icons: {
+      icon: [{ url: "/favicon.png", sizes: "32x32", type: "image/png" }],
+    },
+  };
+};

package/templates/base/packages/nextjs/utils/scaffold-eth/getParsedError.ts

@@ -0,0 +1,35 @@
+import { BaseError as BaseViemError, ContractFunctionRevertedError } from "viem";
+
+/**
+ * Parses an viem/wagmi error to get a displayable string
+ * @param e - error object
+ * @returns parsed error string
+ */
+export const getParsedError = (error: any): string => {
+  const parsedError = error?.walk ? error.walk() : error;
+
+  if (parsedError instanceof BaseViemError) {
+    if (parsedError.details) {
+      return parsedError.details;
+    }
+
+    if (parsedError.shortMessage) {
+      if (
+        parsedError instanceof ContractFunctionRevertedError &&
+        parsedError.data &&
+        parsedError.data.errorName !== "Error"
+      ) {
+        const customErrorArgs = parsedError.data.args?.toString() ?? "";
+        return `${parsedError.shortMessage.replace(/reverted\.$/, "reverted with the following reason:")}\n${
+          parsedError.data.errorName
+        }(${customErrorArgs})`;
+      }
+
+      return parsedError.shortMessage;
+    }
+
+    return parsedError.message ?? parsedError.name ?? "An unknown error occurred";
+  }
+
+  return parsedError?.message ?? "An unknown error occurred";
+};

package/templates/base/packages/nextjs/utils/scaffold-eth/index.ts

@@ -0,0 +1,6 @@
+export * from "./fetchPriceFromUniswap";
+export * from "./notification";
+export * from "./block";
+export * from "./decodeTxData";
+export * from "./getParsedError";
+export * from "./contract";

package/templates/base/packages/nextjs/utils/scaffold-eth/notification.tsx

@@ -0,0 +1,90 @@
+import React from "react";
+import { Toast, ToastPosition, toast } from "react-hot-toast";
+import { XMarkIcon } from "@heroicons/react/20/solid";
+import {
+  CheckCircleIcon,
+  ExclamationCircleIcon,
+  ExclamationTriangleIcon,
+  InformationCircleIcon,
+} from "@heroicons/react/24/solid";
+
+type NotificationProps = {
+  content: React.ReactNode;
+  status: "success" | "info" | "loading" | "error" | "warning";
+  duration?: number;
+  icon?: string;
+  position?: ToastPosition;
+};
+
+type NotificationOptions = {
+  duration?: number;
+  icon?: string;
+  position?: ToastPosition;
+};
+
+const ENUM_STATUSES = {
+  success: <CheckCircleIcon className="w-7 text-success" />,
+  loading: <span className="w-6 loading loading-spinner"></span>,
+  error: <ExclamationCircleIcon className="w-7 text-error" />,
+  info: <InformationCircleIcon className="w-7 text-info" />,
+  warning: <ExclamationTriangleIcon className="w-7 text-warning" />,
+};
+
+const DEFAULT_DURATION = 3000;
+const DEFAULT_POSITION: ToastPosition = "top-center";
+
+/**
+ * Custom Notification
+ */
+const Notification = ({
+  content,
+  status,
+  duration = DEFAULT_DURATION,
+  icon,
+  position = DEFAULT_POSITION,
+}: NotificationProps) => {
+  return toast.custom(
+    (t: Toast) => (
+      <div
+        className={`flex flex-row items-start justify-between max-w-sm rounded-xl shadow-center shadow-accent bg-base-200 p-4 transform-gpu relative transition-all duration-500 ease-in-out space-x-2
+        ${
+          position.substring(0, 3) == "top"
+            ? `hover:translate-y-1 ${t.visible ? "top-0" : "-top-96"}`
+            : `hover:-translate-y-1 ${t.visible ? "bottom-0" : "-bottom-96"}`
+        }`}
+      >
+        <div className="leading-[0] self-center">{icon ? icon : ENUM_STATUSES[status]}</div>
+        <div className={`overflow-x-hidden break-words whitespace-pre-line ${icon ? "mt-1" : ""}`}>{content}</div>
+
+        <div className={`cursor-pointer text-lg ${icon ? "mt-1" : ""}`} onClick={() => toast.dismiss(t.id)}>
+          <XMarkIcon className="w-6 cursor-pointer" onClick={() => toast.remove(t.id)} />
+        </div>
+      </div>
+    ),
+    {
+      duration: status === "loading" ? Infinity : duration,
+      position,
+    },
+  );
+};
+
+export const notification = {
+  success: (content: React.ReactNode, options?: NotificationOptions) => {
+    return Notification({ content, status: "success", ...options });
+  },
+  info: (content: React.ReactNode, options?: NotificationOptions) => {
+    return Notification({ content, status: "info", ...options });
+  },
+  warning: (content: React.ReactNode, options?: NotificationOptions) => {
+    return Notification({ content, status: "warning", ...options });
+  },
+  error: (content: React.ReactNode, options?: NotificationOptions) => {
+    return Notification({ content, status: "error", ...options });
+  },
+  loading: (content: React.ReactNode, options?: NotificationOptions) => {
+    return Notification({ content, status: "loading", ...options });
+  },
+  remove: (toastId: string) => {
+    toast.remove(toastId);
+  },
+};

package/templates/base/packages/nextjs/utils/scaffold-stylus/burner.ts

@@ -0,0 +1,59 @@
+import type { Hex } from "viem";
+import { generatePrivateKey } from "viem/accounts";
+import { arbitrumNitro } from "./chain";
+
+const burnerStorageKey = "burnerWallet.pk";
+export const burnerWalletId = "burnerWallet" as const;
+export const burnerWalletName = "Burner Wallet" as const;
+
+/**
+ * Checks if the private key is valid
+ */
+const isValidPK = (pk: Hex | string | undefined | null): boolean => {
+  return pk?.length === 64 || pk?.length === 66;
+};
+
+/**
+ * Save the current burner private key to storage
+ */
+export const saveBurnerPK = ({
+  privateKey,
+  useSessionStorage = false,
+}: {
+  privateKey: Hex;
+  useSessionStorage?: boolean;
+}): void => {
+  if (typeof window !== "undefined" && window != null) {
+    const storage = useSessionStorage ? window.sessionStorage : window.localStorage;
+    storage?.setItem(burnerStorageKey, privateKey);
+  }
+};
+
+/**
+ * Gets the current burner private key from local/session storage
+ */
+export const loadBurnerPK = ({ useSessionStorage = false }: { useSessionStorage?: boolean } = {}): Hex => {
+  let currentSk: Hex = "0x";
+  if (typeof window !== "undefined" && window != null) {
+    const storage = useSessionStorage ? window.sessionStorage : window.localStorage;
+    currentSk = (storage?.getItem?.(burnerStorageKey)?.replaceAll('"', "") ?? "0x") as Hex;
+  }
+
+  if (!!currentSk && isValidPK(currentSk)) {
+    return currentSk;
+  }
+  // If no burner is found in storage, we will generate a random private key
+  const newDefaultPrivateKey = generatePrivateKey();
+  saveBurnerPK({ privateKey: newDefaultPrivateKey, useSessionStorage });
+  return newDefaultPrivateKey;
+};
+
+/**
+ * Initializes the burner private key if it is not already set
+ */
+export const initBurnerPK = () => {
+  const currentPK = loadBurnerPK();
+  if (!arbitrumNitro.accounts.find(account => account.privateKey === currentPK)) {
+    saveBurnerPK({ privateKey: arbitrumNitro.accounts[0].privateKey });
+  }
+};

package/templates/base/packages/nextjs/utils/scaffold-stylus/chain.ts

@@ -0,0 +1,42 @@
+import { defineChain } from "viem";
+
+export const arbitrumNitro = defineChain({
+  id: 412346,
+  name: "Arbitrum Nitro",
+  network: "arbitrum-nitro",
+  nativeCurrency: {
+    name: "Ether",
+    symbol: "ETH",
+    decimals: 18,
+  },
+  rpcUrls: {
+    default: {
+      http: ["http://localhost:8547"],
+    },
+    public: {
+      http: ["http://localhost:8547"],
+    },
+  },
+  accounts: [
+    {
+      privateKey: "0xb6b15c8cb491557369f3c7d2c287b053eb229daa9c22138887752191c9520659",
+      address: "0x3f1Eae7D46d88F08fc2F8ed27FCb2AB183EB2d0E",
+    },
+    {
+      privateKey: "0x64cf8b4376aca8e153f2aca74b7f5f59e19b8bbb2da594a98095729ba12a9f6c",
+      address: "0xDD09b55496EaA3cFAe23137ABDeA52a9a979B70e",
+    },
+    {
+      privateKey: "0x7a56d99de9eb0977d6dfab1f8465b2705a4c3ca9342ad4fc8cc97aa6f42056c4",
+      address: "0xE9cB1563bE49002383D08386ee287aF7BAD08c3b",
+    },
+    {
+      privateKey: "0xc011740e64cd1bcefb4b5b869ac1169f79e8524cd7c6d409b3fe5b7dfd92afa6",
+      address: "0x838d568Ffb16BC74083e88fd769df85E8d3afcE6",
+    },
+    {
+      privateKey: "0xf2e04103742c7623c6019ca2b7e4710c1bad9bde003383d29f92c6be026fa29c",
+      address: "0xA491d1134388c78AeEDf6b1Ca3F21657015Ff8E1",
+    },
+  ],
+});

package/templates/base/packages/nextjs/utils/scaffold-stylus/index.ts

@@ -0,0 +1,3 @@
+export * from "./burner";
+export * from "./chain";
+export * from "./networks";

package/templates/base/packages/nextjs/utils/scaffold-stylus/networks.ts

@@ -0,0 +1,94 @@
+import * as chains from "viem/chains";
+import scaffoldConfig from "~~/scaffold.config";
+import { arbitrumNitro } from "~~/utils/scaffold-stylus/chain";
+
+type ChainAttributes = {
+  // color | [lightThemeColor, darkThemeColor]
+  color: string | [string, string];
+  // Used to fetch price by providing mainnet token address
+  // for networks having native currency other than ETH
+  nativeCurrencyTokenAddress?: string;
+};
+
+export type ChainWithAttributes = chains.Chain & Partial<ChainAttributes>;
+export type AllowedChainIds = (typeof scaffoldConfig.targetNetworks)[number]["id"];
+
+// Mapping of chainId to RPC chain name an format followed by alchemy and infura
+export const RPC_CHAIN_NAMES: Record<number, string> = {
+  [chains.mainnet.id]: "eth-mainnet",
+  [chains.arbitrum.id]: "arb-mainnet",
+  [chains.arbitrumSepolia.id]: "arb-sepolia",
+};
+
+export const getAlchemyHttpUrl = (chainId: number) => {
+  return scaffoldConfig.alchemyApiKey && RPC_CHAIN_NAMES[chainId]
+    ? `https://${RPC_CHAIN_NAMES[chainId]}.g.alchemy.com/v2/${scaffoldConfig.alchemyApiKey}`
+    : undefined;
+};
+
+export const NETWORKS_EXTRA_DATA: Record<string, ChainAttributes> = {
+  [arbitrumNitro.id]: {
+    color: "#b8af0c",
+  },
+  [chains.mainnet.id]: {
+    color: "#ff8b9e",
+  },
+  [chains.arbitrum.id]: {
+    color: "#28a0f0",
+  },
+  [chains.arbitrumSepolia.id]: {
+    color: "#28a0f0",
+  },
+};
+
+/**
+ * Gives the block explorer transaction URL, returns empty string if the network is a local chain
+ */
+export function getBlockExplorerTxLink(chainId: number, txnHash: string) {
+  const chainNames = Object.keys(chains);
+
+  const targetChainArr = chainNames.filter(chainName => {
+    const wagmiChain = chains[chainName as keyof typeof chains];
+    return wagmiChain.id === chainId;
+  });
+
+  if (targetChainArr.length === 0) {
+    return "";
+  }
+
+  const targetChain = targetChainArr[0] as keyof typeof chains;
+  const blockExplorerTxURL = chains[targetChain]?.blockExplorers?.default?.url;
+
+  if (!blockExplorerTxURL) {
+    return "";
+  }
+
+  return `${blockExplorerTxURL}/tx/${txnHash}`;
+}
+
+/**
+ * Gives the block explorer URL for a given address.
+ * Defaults to Arbiscan if no (wagmi) block explorer is configured for the network.
+ */
+export function getBlockExplorerAddressLink(network: chains.Chain, address: string) {
+  const blockExplorerBaseURL = network.blockExplorers?.default?.url;
+  if (network.id === arbitrumNitro.id) {
+    return `/blockexplorer/address/${address}`;
+  }
+
+  if (!blockExplorerBaseURL) {
+    return `https://arbiscan.io/address/${address}`;
+  }
+
+  return `${blockExplorerBaseURL}/address/${address}`;
+}
+
+/**
+ * @returns targetNetworks array containing networks configured in scaffold.config including extra network metadata
+ */
+export function getTargetNetworks(): ChainWithAttributes[] {
+  return scaffoldConfig.targetNetworks.map(targetNetwork => ({
+    ...targetNetwork,
+    ...NETWORKS_EXTRA_DATA[targetNetwork.id],
+  }));
+}

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

@@ -0,0 +1,3 @@
+{
+  "installCommand": "yarn install"
+}

package/templates/base/packages/stylus/.env.example

@@ -0,0 +1,13 @@
+DEPLOYMENT_DIR=
+
+## devnet
+RPC_URL=
+PRIVATE_KEY=
+
+## sepolia
+RPC_URL_SEPOLIA=
+PRIVATE_KEY_SEPOLIA=
+
+## mainnet
+RPC_URL_MAINNET=
+PRIVATE_KEY_MAINNET=

package/templates/base/packages/stylus/.eslintrc.js

@@ -0,0 +1,23 @@
+module.exports = {
+  parser: '@typescript-eslint/parser',
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+  ],
+  plugins: ['@typescript-eslint'],
+  env: {
+    node: true,
+    es2022: true,
+  },
+  parserOptions: {
+    ecmaVersion: 2022,
+    sourceType: 'module',
+  },
+  rules: {
+    '@typescript-eslint/no-unused-vars': 'error',
+    '@typescript-eslint/no-explicit-any': 'warn',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-inferrable-types': 'off',
+  },
+}; 

package/templates/base/packages/stylus/.gitignore.template.mjs

@@ -0,0 +1,7 @@
+const contents = () =>
+`target
+.env
+node_modules
+deployments`;
+
+export default contents;