create-stylus 0.0.5

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,16 @@
+DEPLOYMENT_DIR=
+
+## devnet
+# ACCOUNT_ADDRESS=
+# RPC_URL=
+# PRIVATE_KEY=
+
+## sepolia
+ACCOUNT_ADDRESS_SEPOLIA=
+RPC_URL_SEPOLIA=
+PRIVATE_KEY_SEPOLIA=
+
+## mainnet
+ACCOUNT_ADDRESS_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;

package/templates/base/packages/stylus/jest.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+  roots: ['<rootDir>/scripts'],
+  testMatch: ['**/__tests__/**/*.ts', '**/?(*.)+(spec|test).ts'],
+  transform: {
+    '^.+\\.ts$': 'ts-jest',
+  },
+  collectCoverageFrom: [
+    'scripts/**/*.ts',
+    '!scripts/**/*.d.ts',
+  ],
+  coverageDirectory: 'coverage',
+  coverageReporters: ['text', 'lcov', 'html'],
+}; 

package/templates/base/packages/stylus/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@ss/stylus",
+  "version": "1.0.0",
+  "description": "TypeScript project for Stylus dApp",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "start": "node dist/index.js",
+    "deploy": "ts-node scripts/deploy_wrapper.ts",
+    "test:networks": "ts-node scripts/test_network.ts",
+    "export-abi": "ts-node scripts/export_abi.ts",
+    "clean": "rm -rf dist",
+    "test": "cargo test",
+    "lint": "eslint scripts --ext .ts",
+    "lint:fix": "eslint scripts --ext .ts --fix",
+    "new-module": "bash scripts/new_module.sh"
+  },
+  "keywords": [
+    "stylus",
+    "typescript",
+    "arbitrum",
+    "blockchain"
+  ],
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@types/yargs": "^17.0.32",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "eslint": "^8.0.0",
+    "jest": "^29.0.0",
+    "ts-jest": "^29.0.0",
+    "typescript": "^5.3.0",
+    "yargs": "^17.7.2"
+  },
+  "dependencies": {
+    "abitype": "^1.0.8",
+    "dotenv": "^16.0.0",
+    "ethers": "^6.15.0",
+    "prettier": "^3.6.2",
+    "toml": "^3.0.0",
+    "ts-node": "^10.9.2",
+    "viem": "^1.19.9"
+  }
+}

package/templates/base/packages/stylus/scripts/deploy.ts

@@ -0,0 +1,46 @@
+import deployStylusContract from "./deploy_contract";
+import { getDeploymentConfig, printDeployedAddresses } from "./utils/";
+import { DeployOptions } from "./utils/type";
+import { config as dotenvConfig } from "dotenv";
+import * as path from "path";
+import * as fs from "fs";
+
+const envPath = path.resolve(__dirname, "../.env");
+if (fs.existsSync(envPath)) {
+  dotenvConfig({ path: envPath });
+}
+
+/**
+ * Define your deployment logic here
+ */
+export default async function deployScript(deployOptions: DeployOptions) {
+  const config = getDeploymentConfig(deployOptions);
+
+  console.log(`📡 Using endpoint: ${config.chain?.rpcUrl}`);
+  if (config.chain) {
+    console.log(`🌐 Network: ${config.chain?.name}`);
+    console.log(`🔗 Chain ID: ${config.chain?.id}`);
+  }
+  console.log(`🔑 Using private key: ${config.privateKey.substring(0, 10)}...`);
+  console.log(`📁 Deployment directory: ${config.deploymentDir}`);
+  console.log(`\n`);
+
+  // Deploy a single contract
+  await deployStylusContract({
+    contract: "your-contract",
+    constructorArgs: [config.deployerAddress!],
+    ...deployOptions,
+  });
+
+  /// Deploy your contract with a custom name
+  // await deployStylusContract({
+  //   contract: "your-contract",
+  //   constructorArgs: [config.deployerAddress],
+  //   name: "my-contract",
+  //   ...deployOptions,
+  // });
+
+  // Print the deployed addresses
+  console.log("\n\n");
+  printDeployedAddresses(config.deploymentDir, config.chain?.id);
+}

package/templates/base/packages/stylus/scripts/deploy_contract.ts

@@ -0,0 +1,84 @@
+import {
+  getDeploymentConfig,
+  ensureDeploymentDirectory,
+  executeCommand,
+  extractDeploymentInfo,
+  saveDeployment,
+  // estimateGasPrice,
+} from "./utils/";
+import { exportStylusAbi } from "./export_abi";
+import { DeployOptions } from "./utils/type";
+import { buildDeployCommand } from "./utils/command";
+
+/**
+ * Deploy a single contract using cargo stylus
+ * @param deployOptions - The deploy options
+ * @param additionalOptions - The additional options
+ * @returns void
+ */
+export default async function deployStylusContract(
+  deployOptions: DeployOptions,
+) {
+  console.log(`\n🚀 Deploying contract in: ${deployOptions.contract}`);
+
+  const config = getDeploymentConfig(deployOptions);
+  ensureDeploymentDirectory(config.deploymentDir);
+
+  console.log(`📄 Contract name: ${config.contractName}`);
+
+  try {
+    // Step 1: Deploy the contract using cargo stylus with contract address
+    // --contract-address='${config.contractAddress}' deactivated for now as it's not working. Issue https://github.com/OffchainLabs/cargo-stylus/issues/171
+    const deployCommand = await buildDeployCommand(config, deployOptions);
+    const deployOutput = await executeCommand(
+      deployCommand,
+      deployOptions.contract!,
+      "Deploying contract with cargo stylus",
+    );
+
+    if (deployOptions.estimateGas) {
+      console.log(deployOutput);
+      return;
+    }
+
+    // Extract the actual deployed address from the output
+    const deploymentInfo = extractDeploymentInfo(deployOutput);
+    if (deploymentInfo) {
+      console.log(`📋 Contract deployed at address: ${deploymentInfo.address}`);
+      console.log("Transaction hash: ", deploymentInfo.txHash);
+    } else {
+      throw new Error("Failed to extract deployed address");
+    }
+
+    // Save the deployed address to chain-specific deployment file
+    saveDeployment(config, deploymentInfo);
+
+    // Step 2: Export ABI using the shared function
+    await exportStylusAbi(
+      config.contractFolder,
+      config.contractName,
+      false,
+      config.chain?.id,
+    );
+
+    // Step 3: Verify the contract
+    if (deployOptions.verify) {
+      try {
+        const output = await executeCommand(
+          `cargo stylus verify --endpoint=${config.chain?.rpcUrl} --deployment-tx=${deploymentInfo.txHash}`,
+          deployOptions.contract!,
+          "Verifying contract with cargo stylus",
+        );
+        console.log(output);
+      } catch (error) {
+        console.error(
+          `❌ Verification failed in: ${deployOptions.contract}`,
+          error,
+        );
+      }
+    }
+  } catch (error) {
+    console.error(`❌ Deployment failed in: ${deployOptions.contract}`, error);
+    process.exit(1);
+  }
+}

package/templates/base/packages/stylus/scripts/deploy_wrapper.ts

@@ -0,0 +1,39 @@
+import { hideBin } from "yargs/helpers";
+import yargs from "yargs";
+import { DeployCommandOptions, DeployOptions } from "./utils/type";
+import deployScript from "./deploy";
+
+/**
+ * Entry point for the deploy script
+ * This script is used to deploy a single contract or all contracts in the stylus folder
+ */
+if (require.main === module) {
+  // Use yargs for argument parsing
+  const argv = yargs(hideBin(process.argv))
+    .usage("Usage: yarn deploy --name <contractName> --network <network>")
+    .option("network", {
+      alias: "net",
+      describe: "Network to deploy to",
+      type: "string",
+      demandOption: false,
+    })
+    .option("estimate-gas", {
+      alias: "eg",
+      describe: "Estimate gas for the deployment",
+      type: "boolean",
+      demandOption: false,
+    })
+    .option("max-fee", {
+      alias: "mf",
+      describe: "Max fee per gas gwei",
+      type: "string",
+      demandOption: false,
+    })
+    .help()
+    .parseSync() as DeployCommandOptions;
+
+  deployScript(argv as DeployOptions).catch((error) => {
+    console.error("Fatal error:", error);
+    process.exit(1);
+  });
+}