create-stylus 0.1.3 → 0.1.5

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

@@ -24,11 +24,11 @@ p {
 }
 
 .btn {
-  @apply shadow-md;
+  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 {
-  @apply shadow-none;
+  box-shadow: none;
 }
 
 .border-color {
@@ -87,3 +87,334 @@ p {
     linear-gradient(270deg, #e3066e 0%, #203147 108.63%) padding-box,
     linear-gradient(90deg, var(--gradient-start) 0%, var(--gradient-end) 100%) border-box;
 }
+
+/* Figma Design Variables */
+:root {
+  --spacing-md: 8px;
+  --spacing-lg: 12px;
+  --spacing-xl: 16px;
+  --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);
+  --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;
+}
+
+/* Contract Card Styles */
+.contract-card {
+  display: flex;
+  padding: var(--spacing-4xl, 24px);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  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));
+  backdrop-filter: blur(25px);
+}
+
+.contract-title {
+  color: var(--figma-sky-blue);
+  font-size: 1.25rem;
+  font-weight: bold;
+}
+
+.contract-address {
+  color: white;
+  font-size: 0.875rem;
+}
+
+.contract-label {
+  color: white;
+  font-weight: bold;
+  font-size: 0.875rem;
+}
+
+.contract-value {
+  color: var(--figma-pink);
+  font-size: 0.875rem;
+}
+
+.variable-name {
+  color: var(--figma-sky-blue);
+}
+
+[data-theme="light"] .variable-name {
+  color: rgba(24, 24, 24, 1);
+}
+
+/* Reusable Typography */
+.typography-uppercase {
+  color: var(--text-sub-600, rgba(255, 255, 255, 0.60));
+  text-align: center;
+  font-family: var(--font-orbitron), sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  letter-spacing: -0.28px;
+  text-transform: uppercase;
+}
+
+/* Tab Container */
+.tab-container {
+  border-radius: var(--spacing-md, 8px);
+  background: var(--bg-surface-input-20, rgba(255, 255, 255, 0.04));
+  backdrop-filter: blur(25px);
+  padding: 4px;
+  display: flex;
+  gap: 4px;
+}
+
+/* Tab Button */
+.tab-button {
+  flex: 1;
+  padding: 8px 16px;
+  border-radius: var(--spacing-md, 8px);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.tab-button.active {
+  background: white;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+[data-theme="light"] .tab-button.active {
+  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(213, 213, 213, 1) 100%);
+  box-shadow: 0 2px 4px rgba(171, 171, 171, 1);
+}
+
+.tab-button.active .tab-text {
+  color: #333;
+}
+
+.tab-button:not(.active) .tab-text {
+  color: var(--text-sub-600, rgba(255, 255, 255, 0.60));
+}
+
+/* Function Styling */
+.function-name {
+  color: var(--figma-sky-blue);
+}
+
+.param-type {
+  color: var(--text-sub-600, rgba(255, 255, 255, 0.60));
+}
+
+[data-theme="light"] .param-name {
+  color: rgba(24, 24, 24, 1);
+}
+
+/* Input Styling */
+.input-container {
+  padding: var(--spacing-lg, 12px) var(--spacing-xl, 16px);
+  align-items: center;
+  gap: 8px;
+  align-self: stretch;
+  border-radius: var(--spacing-md, 8px);
+  background: var(--bg-surface-input-20, rgba(255, 255, 255, 0.04));
+  backdrop-filter: blur(25px);
+}
+
+/* Light mode input styling */
+[data-theme="light"] .input-container {
+  background: rgba(0, 0, 0, 0.04);
+  backdrop-filter: none;
+}
+
+.input-text {
+  color: var(--text-soft-400, rgba(255, 255, 255, 0.40));
+  text-align: center;
+  font-family: Inter, sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 20px;
+  letter-spacing: -0.14px;
+}
+
+/* Light mode input text styling */
+[data-theme="light"] .input-text {
+  color: rgba(24, 24, 24, 0.4);
+}
+
+/* Input field overrides */
+.input-container .flex.border-2.border-base-300.bg-base-200.rounded-full {
+  border-radius: var(--spacing-md, 8px) !important;
+  background: var(--bg-surface-input-20, rgba(255, 255, 255, 0.04)) !important;
+  backdrop-filter: blur(25px) !important;
+  border: none !important;
+  padding: var(--spacing-lg, 12px) var(--spacing-xl, 16px) !important;
+  gap: 8px !important;
+  align-items: center !important;
+  align-self: stretch !important;
+}
+
+/* Light mode input field overrides */
+[data-theme="light"] .input-container .flex.border-2.border-base-300.bg-base-200.rounded-full {
+  background: rgba(0, 0, 0, 0.04) !important;
+  backdrop-filter: none !important;
+}
+
+.input-container .input.input-ghost {
+  background: transparent !important;
+  border: none !important;
+  color: white !important;
+  font-family: Inter, sans-serif !important;
+  font-size: 14px !important;
+  font-weight: 500 !important;
+  line-height: 20px !important;
+  letter-spacing: -0.14px !important;
+  text-align: left !important;
+  padding: 0 !important;
+  height: auto !important;
+  min-height: auto !important;
+  flex: 1 !important;
+  box-shadow: none !important;
+  outline: none !important;
+}
+
+/* Light mode input text color */
+[data-theme="light"] .input-container .input.input-ghost {
+  color: rgba(24, 24, 24, 0.4) !important;
+}
+
+.input-container .input.input-ghost:focus,
+.input-container .input.input-ghost::placeholder {
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+  outline: none !important;
+  color: var(--text-soft-400, rgba(255, 255, 255, 0.40)) !important;
+  font-family: Inter, sans-serif !important;
+  font-size: 14px !important;
+  font-weight: 500 !important;
+  line-height: 20px !important;
+  letter-spacing: -0.14px !important;
+}
+
+/* Light mode input placeholder and focus color */
+[data-theme="light"] .input-container .input.input-ghost::placeholder {
+  color: rgba(24, 24, 24, 0.4) !important;
+}
+
+/* Input text color when typing - light mode */
+[data-theme="light"] .input-container .input.input-ghost:focus,
+[data-theme="light"] .input-container .input.input-ghost:not(:placeholder-shown) {
+  color: rgba(24, 24, 24, 1) !important;
+}
+
+/* Input text color when typing - dark mode */
+[data-theme="dark"] .input-container .input.input-ghost:focus,
+[data-theme="dark"] .input-container .input.input-ghost:not(:placeholder-shown) {
+  color: white !important;
+}
+
+/* Button Styles */
+.send-button {
+  display: flex;
+  padding: 8px var(--spacing-7xl, 40px);
+  justify-content: center;
+  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);
+  text-align: center;
+  font-family: var(--font-orbitron), sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  letter-spacing: -0.28px;
+  text-transform: uppercase;
+  border: none;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  position: relative;
+  box-shadow: 0 2px 0 #FF9CCB, 0 4px 8px rgba(255, 156, 203, 0.3);
+}
+
+.send-button:hover {
+  opacity: 0.9;
+  transform: translateY(-1px);
+}
+
+.send-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.read-button {
+  display: flex;
+  padding: 8px var(--spacing-7xl, 40px);
+  justify-content: center;
+  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);
+  text-align: center;
+  font-family: var(--font-orbitron), sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  letter-spacing: -0.28px;
+  text-transform: uppercase;
+  border: none;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  position: relative;
+  box-shadow: 0 2px 0 #FF9CCB, 0 4px 8px rgba(255, 156, 203, 0.3);
+  margin-left: auto;
+}
+
+.read-button:hover {
+  opacity: 0.9;
+  transform: translateY(-1px);
+}
+
+.read-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none;
+}
+
+/* Typography Utilities */
+.text-inter {
+  font-family: Inter, sans-serif;
+}
+
+.text-inter-14 {
+  font-family: Inter, sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  letter-spacing: -0.14px;
+}
+
+/* Contract Tab Button Styles */
+.contract-tab-button {
+  padding: 8px 16px;
+  border-radius: 9999px;
+  font-family: Inter, sans-serif;
+  font-weight: 500;
+  transition: all 0.2s ease;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}

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

@@ -88,7 +88,8 @@ module.exports = {
   theme: {
     extend: {
       fontFamily: {
-        sans: ["var(--font-dm-sans)", "system-ui", "sans-serif"],
+        sans: ["var(--font-inter)", "system-ui", "sans-serif"],
+        orbitron: ["var(--font-orbitron)", "sans-serif"],
       },
       boxShadow: {
         center: "0 0 12px -2px rgb(0 0 0 / 0.05)",
@@ -98,4 +99,4 @@ module.exports = {
       },
     },
   },
-};
+};

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

@@ -3,7 +3,7 @@ import { arbitrum, arbitrumSepolia, arbitrumNova, eduChainTestnet, eduChain, sup
 
 const arbitrumNitro = defineChain({
   id: 412346,
-  name: "Arbitrum Nitro DevNode",
+  name: "Nitro DevNode",
   network: "arbitrum-nitro",
   nativeCurrency: {
     name: "Ether",

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

@@ -25,6 +25,15 @@
   ],
   "author": "",
   "license": "MIT",
+  "overrides": {
+    "chalk": "5.3.0",
+    "strip-ansi": "7.1.0",
+    "color-convert": "2.0.1",
+    "color-name": "1.1.4",
+    "is-core-module": "2.13.1",
+    "error-ex": "1.3.2",
+    "has-ansi": "5.0.1"
+  },
   "devDependencies": {
     "@types/node": "^20.0.0",
     "@types/yargs": "^17.0.32",

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

@@ -110,6 +110,7 @@ export default async function deployStylusContract(
         address: deploymentInfo.address,
         abi: contractData.abi as Abi,
         functionName: "initialize",
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         args: deployOptions.constructorArgs as any[],
       });
 

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

@@ -1,4 +1,4 @@
-import { getChain, getRpcUrlFromChain } from "./utils/";
+import { getChain, getRpcUrlFromChain, ALIASES } from "./utils/";
 import { SUPPORTED_NETWORKS } from "./utils/";
 
 function testNetworkFunctionality() {
@@ -18,14 +18,13 @@ function testNetworkFunctionality() {
   console.log("\n📝 Usage examples:");
   Object.keys(SUPPORTED_NETWORKS).forEach((network) => {
     const chain = getChain(network);
+    // Find the alias for this network (reverse lookup)
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const alias = Object.entries(ALIASES).find(([_, value]) => value === network)?.[0];
+    const networkName = alias || network;
     console.log(
-      `  yarn deploy --network ${chain?.name}\t# Deploy to ${chain?.name}`,
+      `  yarn deploy --network ${networkName}\t# Deploy to ${chain?.name}`,
     );
-
-    // TODO: determine which one to use later, for now we use all original names
-    // console.log(
-    //   `  yarn deploy --network ${chain?.alias}\t\t# Deploy to ${chain?.name} (alias)`,
-    // );
   });
 }
 

package/templates/base/packages/stylus/scripts/utils/contract.ts

@@ -27,6 +27,7 @@ export function getContractNameFromCargoToml(contractFolder: string): string {
     );
   }
   const tomlContent = fs.readFileSync(cargoTomlPath, "utf8");
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   let parsed: any;
   try {
     parsed = toml.parse(tomlContent);
@@ -163,6 +164,7 @@ export async function generateTsAbi(
     abi: abiJson,
   };
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   let deployedContractsObj: any = {};
   const fileHeader = generatedContractComment + "\n\n";
 
@@ -240,7 +242,7 @@ export function handleSolcError(
  * This is useful when the file has been updated during runtime
  * @returns The deployed contracts object
  */
-export function loadDeployedContracts(): any {
+export function loadDeployedContracts() {
   const deployedContractsPath = "../nextjs/contracts/deployedContracts.ts";
 
   if (!fs.existsSync(deployedContractsPath)) {
@@ -266,7 +268,7 @@ export function loadDeployedContracts(): any {
  * @param contractName - The contract name
  * @returns The contract data with address, txHash, and abi
  */
-export function getContractData(chainId: string, contractName: string): any {
+export function getContractData(chainId: string, contractName: string) {
   const deployedContracts = loadDeployedContracts();
 
   if (
@@ -289,6 +291,8 @@ export function getContractData(chainId: string, contractName: string): any {
   return contractData;
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function contractHasInitializeFunction(contractData: any): boolean {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   return contractData.abi.some((abi: any) => abi.name === "initialize");
 }

package/templates/base/packages/stylus/scripts/utils/deployment.ts

@@ -104,6 +104,7 @@ export function saveDeployment(
     }
 
     // Read existing deployments or start fresh
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     let deployments: Record<string, any> = {};
     if (fs.existsSync(networkPath)) {
       const content = fs.readFileSync(networkPath, "utf8");

package/templates/base/packages/stylus/scripts/utils/network.ts

@@ -32,10 +32,10 @@ export const ALIASES: Record<string, string> = {
   sepolia: "arbitrumSepolia",
   devnet: "arbitrumNitro",
   nova: "arbitrumNova",
-  educhain_testnet: "educhainTestnet",
+  educhainTesnet: "eduChainTestnet",
   educhain: "eduChain",
   superposition: "superposition",
-  superposition_testnet: "superpositionTestnet",
+  superpositionTestnet: "superpositionTestnet",
 };
 
 // TODO: add more compatible Orbit Chains here
@@ -48,7 +48,13 @@ export const ORBIT_CHAINS: Chain[] = [
 
 export function getChain(networkName: string): Chain | null {
   try {
-    const actualNetworkName = ALIASES[networkName.toLowerCase()] || networkName;
+    // First try exact match (for camelCase aliases)
+    let actualNetworkName = ALIASES[networkName] || networkName;
+    
+    // If no exact match, try lowercase match (for backward compatibility)
+    if (actualNetworkName === networkName) {
+      actualNetworkName = ALIASES[networkName.toLowerCase()] || networkName;
+    }
 
     const chainEntry = Object.entries(SUPPORTED_NETWORKS).find(
       ([key]) => key.toLowerCase() === actualNetworkName.toLowerCase(),
@@ -68,7 +74,13 @@ export function getChain(networkName: string): Chain | null {
 }
 
 export function getPrivateKey(networkName: string): string {
-  const actualNetworkName = ALIASES[networkName.toLowerCase()] || networkName;
+  // First try exact match (for camelCase aliases)
+  let actualNetworkName = ALIASES[networkName] || networkName;
+  
+  // If no exact match, try lowercase match (for backward compatibility)
+  if (actualNetworkName === networkName) {
+    actualNetworkName = ALIASES[networkName.toLowerCase()] || networkName;
+  }
 
   switch (actualNetworkName.toLowerCase()) {
     case "arbitrum":
@@ -122,7 +134,13 @@ export function getPrivateKey(networkName: string): string {
 }
 
 export const getAccountAddress = (networkName: string): Address | undefined => {
-  const actualNetworkName = ALIASES[networkName.toLowerCase()] || networkName;
+  // First try exact match (for camelCase aliases)
+  let actualNetworkName = ALIASES[networkName] || networkName;
+  
+  // If no exact match, try lowercase match (for backward compatibility)
+  if (actualNetworkName === networkName) {
+    actualNetworkName = ALIASES[networkName.toLowerCase()] || networkName;
+  }
 
   switch (actualNetworkName.toLowerCase()) {
     case "arbitrum":