@net-protocol/cli 0.1.24 → 0.1.26

package/dist/profile/index.mjs

@@ -1,7 +1,7 @@
 import { Command } from 'commander';
 import chalk3 from 'chalk';
 import { StorageClient, chunkDataForStorage, CHUNKED_STORAGE_CONTRACT } from '@net-protocol/storage';
-import { PROFILE_PICTURE_STORAGE_KEY, PROFILE_METADATA_STORAGE_KEY, parseProfileMetadata, PROFILE_CANVAS_STORAGE_KEY, isValidUrl, getProfilePictureStorageArgs, STORAGE_CONTRACT, isValidXUsername, getProfileMetadataStorageArgs, isValidBio, isValidDisplayName, isValidTokenAddress } from '@net-protocol/profiles';
+import { PROFILE_PICTURE_STORAGE_KEY, PROFILE_METADATA_STORAGE_KEY, parseProfileMetadata, PROFILE_CANVAS_STORAGE_KEY, PROFILE_CSS_STORAGE_KEY, isValidUrl, getProfilePictureStorageArgs, STORAGE_CONTRACT, isValidXUsername, getProfileMetadataStorageArgs, isValidBio, isValidDisplayName, isValidTokenAddress, DEMO_THEMES, MAX_CSS_SIZE, isValidCSS, getProfileCSSStorageArgs, buildCSSPrompt } from '@net-protocol/profiles';
 import { createWalletClient, http, publicActions, encodeFunctionData } from 'viem';
 import { privateKeyToAccount } from 'viem/accounts';
 import { base } from 'viem/chains';
@@ -131,7 +131,22 @@ async function executeProfileGet(options) {
         throw error;
       }
     }
-    const hasProfile = profilePicture || xUsername || bio || tokenAddress || canvasSize;
+    let cssSize;
+    try {
+      const cssResult = await client.readStorageData({
+        key: PROFILE_CSS_STORAGE_KEY,
+        operator: options.address
+      });
+      if (cssResult.data) {
+        cssSize = cssResult.data.length;
+      }
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : String(error);
+      if (errorMessage !== "StoredDataNotFound") {
+        throw error;
+      }
+    }
+    const hasProfile = profilePicture || xUsername || bio || tokenAddress || canvasSize || cssSize;
     if (options.json) {
       const output = {
         address: options.address,
@@ -141,6 +156,7 @@ async function executeProfileGet(options) {
         bio: bio || null,
         tokenAddress: tokenAddress || null,
         canvas: canvasSize ? { size: canvasSize, isDataUri: canvasIsDataUri } : null,
+        css: cssSize ? { size: cssSize } : null,
         hasProfile
       };
       console.log(JSON.stringify(output, null, 2));
@@ -164,6 +180,9 @@ async function executeProfileGet(options) {
     console.log(
       `  ${chalk3.cyan("Canvas:")} ${canvasSize ? `${canvasSize} bytes${canvasIsDataUri ? " (data URI)" : ""}` : chalk3.gray("(not set)")}`
     );
+    console.log(
+      `  ${chalk3.cyan("Custom CSS:")} ${cssSize ? `${cssSize} bytes` : chalk3.gray("(not set)")}`
+    );
     if (!hasProfile) {
       console.log(chalk3.yellow("\n  No profile data found for this address."));
     }
@@ -940,6 +959,197 @@ async function executeProfileGetCanvas(options) {
     );
   }
 }
+async function executeProfileSetCSS(options) {
+  const sourceCount = [options.file, options.content, options.theme].filter(
+    Boolean
+  ).length;
+  if (sourceCount === 0) {
+    exitWithError(
+      "Must provide one of --file, --content, or --theme to set CSS."
+    );
+  }
+  if (sourceCount > 1) {
+    exitWithError("Cannot provide more than one of --file, --content, --theme.");
+  }
+  let cssContent;
+  if (options.theme) {
+    const theme = DEMO_THEMES[options.theme];
+    if (!theme) {
+      const available = Object.entries(DEMO_THEMES).map(([key, val]) => `  ${key} \u2014 ${val.name}`).join("\n");
+      exitWithError(
+        `Unknown theme: "${options.theme}"
+
+Available themes:
+${available}`
+      );
+    }
+    cssContent = theme.css;
+    console.log(chalk3.gray(`   Using theme: ${theme.name}`));
+  } else if (options.file) {
+    const filePath = path.resolve(options.file);
+    if (!fs.existsSync(filePath)) {
+      exitWithError(`File not found: ${filePath}`);
+    }
+    const buffer = fs.readFileSync(filePath);
+    if (buffer.length > MAX_CSS_SIZE) {
+      exitWithError(
+        `File too large: ${buffer.length} bytes exceeds maximum of ${MAX_CSS_SIZE} bytes (10KB).`
+      );
+    }
+    cssContent = buffer.toString("utf-8");
+  } else {
+    cssContent = options.content;
+    const contentSize = Buffer.byteLength(cssContent, "utf-8");
+    if (contentSize > MAX_CSS_SIZE) {
+      exitWithError(
+        `Content too large: ${contentSize} bytes exceeds maximum of ${MAX_CSS_SIZE} bytes (10KB).`
+      );
+    }
+  }
+  if (!isValidCSS(cssContent)) {
+    exitWithError(
+      "Invalid CSS: content is empty, too large, or contains disallowed patterns (script injection)."
+    );
+  }
+  const storageArgs = getProfileCSSStorageArgs(cssContent);
+  if (options.encodeOnly) {
+    const readOnlyOptions = parseReadOnlyOptions({
+      chainId: options.chainId,
+      rpcUrl: options.rpcUrl
+    });
+    const encoded = encodeTransaction(
+      {
+        to: STORAGE_CONTRACT.address,
+        abi: STORAGE_CONTRACT.abi,
+        functionName: "put",
+        args: [storageArgs.bytesKey, storageArgs.topic, storageArgs.bytesValue]
+      },
+      readOnlyOptions.chainId
+    );
+    console.log(JSON.stringify(encoded, null, 2));
+    return;
+  }
+  const commonOptions = parseCommonOptions(
+    {
+      privateKey: options.privateKey,
+      chainId: options.chainId,
+      rpcUrl: options.rpcUrl
+    },
+    true
+  );
+  try {
+    const account = privateKeyToAccount(commonOptions.privateKey);
+    const rpcUrls = getChainRpcUrls({
+      chainId: commonOptions.chainId,
+      rpcUrl: commonOptions.rpcUrl
+    });
+    const client = createWalletClient({
+      account,
+      chain: base,
+      transport: http(rpcUrls[0])
+    }).extend(publicActions);
+    console.log(chalk3.blue(`Setting profile CSS...`));
+    console.log(
+      chalk3.gray(
+        `   Content size: ${Buffer.byteLength(cssContent, "utf-8")} bytes`
+      )
+    );
+    console.log(chalk3.gray(`   Address: ${account.address}`));
+    const hash = await client.writeContract({
+      address: STORAGE_CONTRACT.address,
+      abi: STORAGE_CONTRACT.abi,
+      functionName: "put",
+      args: [storageArgs.bytesKey, storageArgs.topic, storageArgs.bytesValue]
+    });
+    console.log(chalk3.blue(`Waiting for confirmation...`));
+    const receipt = await client.waitForTransactionReceipt({ hash });
+    if (receipt.status === "success") {
+      console.log(
+        chalk3.green(
+          `
+CSS updated successfully!
+  Transaction: ${hash}
+  Content size: ${Buffer.byteLength(cssContent, "utf-8")} bytes`
+        )
+      );
+    } else {
+      exitWithError(`Transaction failed: ${hash}`);
+    }
+  } catch (error) {
+    exitWithError(
+      `Failed to set CSS: ${error instanceof Error ? error.message : String(error)}`
+    );
+  }
+}
+async function executeProfileGetCSS(options) {
+  const readOnlyOptions = parseReadOnlyOptions({
+    chainId: options.chainId,
+    rpcUrl: options.rpcUrl
+  });
+  const client = new StorageClient({
+    chainId: readOnlyOptions.chainId,
+    overrides: options.rpcUrl ? { rpcUrls: [options.rpcUrl] } : void 0
+  });
+  try {
+    let cssContent;
+    try {
+      const result = await client.readStorageData({
+        key: PROFILE_CSS_STORAGE_KEY,
+        operator: options.address
+      });
+      if (result.data) {
+        cssContent = result.data;
+      }
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : String(error);
+      if (errorMessage !== "StoredDataNotFound") {
+        throw error;
+      }
+    }
+    if (options.json) {
+      const output = {
+        address: options.address,
+        chainId: readOnlyOptions.chainId,
+        css: cssContent || null,
+        hasCSS: !!cssContent,
+        contentLength: cssContent ? cssContent.length : 0
+      };
+      console.log(JSON.stringify(output, null, 2));
+      return;
+    }
+    if (!cssContent) {
+      exitWithError(`No custom CSS found for address: ${options.address}`);
+    }
+    if (options.output) {
+      const outputPath = path.resolve(options.output);
+      fs.writeFileSync(outputPath, cssContent, "utf-8");
+      console.log(
+        chalk3.green(
+          `CSS written to: ${outputPath} (${cssContent.length} bytes)`
+        )
+      );
+      return;
+    }
+    console.log(cssContent);
+  } catch (error) {
+    exitWithError(
+      `Failed to read CSS: ${error instanceof Error ? error.message : String(error)}`
+    );
+  }
+}
+async function executeProfileCSSPrompt(options) {
+  if (options.listThemes) {
+    console.log("Available demo themes:\n");
+    for (const [key, theme] of Object.entries(DEMO_THEMES)) {
+      console.log(`  ${key} \u2014 ${theme.name}`);
+    }
+    console.log(
+      "\nUse with: net profile set-css --theme <name>"
+    );
+    return;
+  }
+  console.log(buildCSSPrompt());
+}
 
 // src/commands/profile/index.ts
 function registerProfileCommand(program) {
@@ -1130,6 +1340,51 @@ function registerProfileCommand(program) {
       json: options.json
     });
   });
+  const setCSSCommand = new Command("set-css").description("Set your profile custom CSS theme").option("--file <path>", "Path to CSS file").option("--content <css>", "CSS content (inline)").option("--theme <name>", "Use a built-in demo theme (e.g. hotPink, midnightGrunge, ocean)").option(
+    "--private-key <key>",
+    "Private key (0x-prefixed hex, 66 characters). Can also be set via NET_PRIVATE_KEY env var"
+  ).option(
+    "--chain-id <id>",
+    "Chain ID. Can also be set via NET_CHAIN_ID env var",
+    (value) => parseInt(value, 10)
+  ).option(
+    "--rpc-url <url>",
+    "Custom RPC URL. Can also be set via NET_RPC_URL env var"
+  ).option(
+    "--encode-only",
+    "Output transaction data as JSON instead of executing"
+  ).action(async (options) => {
+    await executeProfileSetCSS({
+      file: options.file,
+      content: options.content,
+      theme: options.theme,
+      privateKey: options.privateKey,
+      chainId: options.chainId,
+      rpcUrl: options.rpcUrl,
+      encodeOnly: options.encodeOnly
+    });
+  });
+  const getCSSCommand = new Command("get-css").description("Get profile custom CSS for an address").requiredOption("--address <address>", "Wallet address to get CSS for").option("--output <path>", "Write CSS content to file instead of stdout").option(
+    "--chain-id <id>",
+    "Chain ID. Can also be set via NET_CHAIN_ID env var",
+    (value) => parseInt(value, 10)
+  ).option(
+    "--rpc-url <url>",
+    "Custom RPC URL. Can also be set via NET_RPC_URL env var"
+  ).option("--json", "Output in JSON format").action(async (options) => {
+    await executeProfileGetCSS({
+      address: options.address,
+      output: options.output,
+      chainId: options.chainId,
+      rpcUrl: options.rpcUrl,
+      json: options.json
+    });
+  });
+  const cssPromptCommand = new Command("css-prompt").description("Print the AI prompt for generating profile CSS themes").option("--list-themes", "List available demo themes instead of the prompt").action(async (options) => {
+    await executeProfileCSSPrompt({
+      listThemes: options.listThemes
+    });
+  });
   profileCommand.addCommand(getCommand);
   profileCommand.addCommand(setPictureCommand);
   profileCommand.addCommand(setUsernameCommand);
@@ -1138,6 +1393,9 @@ function registerProfileCommand(program) {
   profileCommand.addCommand(setTokenAddressCommand);
   profileCommand.addCommand(setCanvasCommand);
   profileCommand.addCommand(getCanvasCommand);
+  profileCommand.addCommand(setCSSCommand);
+  profileCommand.addCommand(getCSSCommand);
+  profileCommand.addCommand(cssPromptCommand);
 }
 
 export { registerProfileCommand };