make the component more intuitive to use while maintaining all

functionality. The network prop is now used consistently across
components.

- Replace chainId prop with network prop
- Add network name to chain ID resolution
- Remove manual provider selection in favor of auto-detection
- Update documentation and examples to reflect new API
- Simplify preset builders to use network names
- Add fallback to Ethereum mainnet for unknown networks

Author: hellno

components/nft-mint-examples.tsx

@@ -10,7 +10,7 @@ interface NFTMintExample {
   instanceId: string;
   tokenId: string;
   buttonText?: string;
-  chainId?: number;
+  network?: string;
 }
 
 const nftExamples: NFTMintExample[] = [
@@ -21,7 +21,7 @@ const nftExamples: NFTMintExample[] = [
     instanceId: "",
     tokenId: "",
     buttonText: "Mint Thirdweb NFT",
-    chainId: 42220, // Celo
+    network: "celo"
   },
   {
     title: "Test NFT - No Image",
@@ -78,7 +78,7 @@ const nftExamples: NFTMintExample[] = [
     instanceId: "3763024112",
     tokenId: "1",
     buttonText: "Mint Video NFT",
-    chainId: 8453, // Base
+    network: "base"
   },
 ];
 
@@ -120,19 +120,14 @@ export function NFTMintExamples({
                 {example.instanceId && (
                   <div>Instance: {example.instanceId}</div>
                 )}
-                {example.chainId && example.chainId !== 8453 && (
-                  <div>Chain: {example.chainId === 42220 ? "Celo" : `ID ${example.chainId}`}</div>
+                {example.network && example.network !== "base" && (
+                  <div>Network: {example.network}</div>
                 )}
               </div>
 
               <NFTMintButton
                 contractAddress={example.contractAddress}
-                chainId={example.chainId || 8453} // Use example chainId or default to Base
-                forceProvider={
-                  example.instanceId 
-                    ? "manifold" 
-                    : undefined
-                }
+                network={example.network || "base"} // Use example network or default to Base
                 manifoldParams={
                   example.instanceId
                     ? {

public/r/nft-mint-flow.json

@@ -34,7 +34,7 @@ import {
   validateParameters,
   getClientForChain,
 } from "@/registry/mini-app/blocks/nft-mint-flow/lib/provider-detector";
-import { getChainById } from "@/registry/mini-app/lib/chains";
+import { getChainById, findChainByName } from "@/registry/mini-app/lib/chains";
 import { getProviderConfig } from "@/registry/mini-app/blocks/nft-mint-flow/lib/provider-configs";
 import { fetchPriceData } from "@/registry/mini-app/blocks/nft-mint-flow/lib/price-optimizer";
 import {
@@ -52,36 +52,27 @@ import {
  * NFTMintButton - Universal NFT minting button with automatic provider detection and ERC20 approval handling
  *
  * The button automatically detects the NFT provider (Manifold, OpenSea, Zora, etc.) by analyzing
- * the contract. You only need to specify the provider if auto-detection fails or you want to
- * override the detection.
+ * the contract. Provider detection is fully automatic - no need to specify the provider manually.
  *
  * @example
  * ```tsx
  * // Basic mint - auto-detects provider and handles everything
  * <NFTMintButton
  *   contractAddress="0x5b97886E4e1fC0F7d19146DEC03C917994b3c3a4"
- *   chainId={1}
+ *   network="ethereum"
  * />
  *
  * // Manifold NFT - auto-detected, just provide the required params
  * <NFTMintButton
  *   contractAddress="0x32dd0a7190b5bba94549a0d04659a9258f5b1387"
- *   chainId={8453}
+ *   network="base"
  *   manifoldParams={{ instanceId: "4293509360" }}
  * />
  *
- * // Force specific provider (only if auto-detection is wrong)
- * <NFTMintButton
- *   contractAddress="0x..."
- *   chainId={8453}
- *   forceProvider="manifold"
- *   manifoldParams={{ instanceId: "123" }}
- * />
- *
  * // Multiple NFTs with success callback
  * <NFTMintButton
  *   contractAddress="0x..."
- *   chainId={8453}
+ *   network="base"
  *   amount={5}
  *   buttonText="Mint 5 NFTs"
  *   onMintSuccess={(txHash) => console.log("Minted!", txHash)}
@@ -96,25 +87,11 @@ type NFTMintFlowProps = {
   contractAddress: Address;
 
   /**
-   * Blockchain network ID
-   * Supports any valid chain ID
-   */
-  chainId: number;
-
-  /**
-   * Force a specific NFT provider instead of auto-detection
-   * 
-   * By default, the component auto-detects the provider by analyzing the contract.
-   * Only use this prop if:
-   * - Auto-detection is returning the wrong provider
-   * - You need to test a specific provider's flow
-   * - The contract has non-standard implementation
-   * 
-   * Note: "generic" is not an option here - it's used internally as a fallback.
-   * 
-   * @default undefined (auto-detect)
+   * Blockchain network name (e.g., "ethereum", "base", "arbitrum", "optimism", "polygon", "zora")
+   * This matches the network prop used by NFTCard for consistency.
+   * @default "ethereum"
    */
-  forceProvider?: "manifold" | "opensea" | "zora";
+  network?: string;
 
   /**
    * Number of NFTs to mint. Defaults to 1.
@@ -125,8 +102,8 @@ type NFTMintFlowProps = {
   /**
    * Manifold-specific parameters
    * 
-   * Required when minting Manifold NFTs (auto-detected or forced).
-   * The component will show an error if these are missing for Manifold contracts.
+   * These are auto-detected when possible, but can be provided if known.
+   * The component will show helpful error messages if required params are missing.
    * 
    * @example
    * // For claim-based mints (most common)
@@ -176,8 +153,7 @@ type NFTMintFlowProps = {
 
 export function NFTMintButton({
   contractAddress,
-  chainId,
-  forceProvider,
+  network = "ethereum",
   amount = 1,
   manifoldParams,
   className,
@@ -194,32 +170,26 @@ export function NFTMintButton({
     null,
   );
 
-  // Prop validation with helpful errors
-  React.useEffect(() => {
-    if (
-      forceProvider === "manifold" &&
-      !manifoldParams?.instanceId &&
-      !manifoldParams?.tokenId
-    ) {
-      console.error(
-        "NFTMintButton: When forceProvider=\"manifold\", you must provide manifoldParams with either instanceId or tokenId. " +
-          "Example: manifoldParams={{ instanceId: \"4293509360\" }}",
-      );
+  // Convert network name to chainId
+  const chain = React.useMemo(() => {
+    const foundChain = findChainByName(network);
+    if (!foundChain) {
+      console.warn(`NFTMintButton: Network "${network}" not recognized, defaulting to Ethereum mainnet`);
+      return getChainById(1); // Default to Ethereum mainnet
     }
+    return foundChain;
+  }, [network]);
 
-    if (manifoldParams && forceProvider && forceProvider !== "manifold") {
-      console.warn(
-        "NFTMintButton: manifoldParams provided but forceProvider is not \"manifold\". " +
-          "These params will be ignored for non-Manifold providers.",
-      );
-    }
+  const chainId = chain.id;
 
+  // Prop validation with helpful errors
+  React.useEffect(() => {
     if (!contractAddress || !contractAddress.match(/^0x[a-fA-F0-9]{40}$/)) {
       console.error(
         "NFTMintButton: Invalid contract address. Must be a valid Ethereum address (0x...)",
       );
     }
-  }, [forceProvider, manifoldParams, chainId, contractAddress]);
+  }, [contractAddress]);
 
   // Destructure commonly used values
   const {
@@ -250,13 +220,13 @@ export function NFTMintButton({
     () => ({
       contractAddress,
       chainId,
-      provider: forceProvider,
+      provider: undefined, // Let auto-detection handle this
       amount,
       instanceId: manifoldParams?.instanceId,
       tokenId: manifoldParams?.tokenId,
       recipient: address,
     }),
-    [contractAddress, chainId, forceProvider, amount, manifoldParams, address],
+    [contractAddress, chainId, amount, manifoldParams, address],
   );
 
   // Watch for transaction completion
@@ -1069,13 +1039,13 @@ NFTMintButton.presets = {
    * ```tsx
    * <NFTMintButton {...NFTMintButton.presets.auto({
    *   contractAddress: "0x5b97886E4e1fC0F7d19146DEC03C917994b3c3a4",
-   *   chainId: 1
+   *   network: "ethereum"
    * })} />
    * ```
    */
   auto: (props: {
     contractAddress: Address;
-    chainId: number;
+    network: string;
     amount?: number;
     buttonText?: string;
     manifoldParams?: { instanceId?: string; tokenId?: string };
@@ -1092,14 +1062,14 @@ NFTMintButton.presets = {
    * ```tsx
    * <NFTMintButton {...NFTMintButton.presets.manifold({
    *   contractAddress: "0x32dd0a7190b5bba94549a0d04659a9258f5b1387",
-   *   chainId: 8453,
+   *   network: "base",
    *   instanceId: "4293509360"
    * })} />
    * ```
    */
   manifold: (props: {
     contractAddress: Address;
-    chainId: number;
+    network: string;
     instanceId: string;
     tokenId?: string;
     amount?: number;
@@ -1108,8 +1078,7 @@ NFTMintButton.presets = {
     onMintError?: (error: string) => void;
   }): NFTMintFlowProps => ({
     contractAddress: props.contractAddress,
-    chainId: props.chainId,
-    forceProvider: "manifold",
+    network: props.network,
     manifoldParams: {
       instanceId: props.instanceId,
       tokenId: props.tokenId,
@@ -1119,35 +1088,4 @@ NFTMintButton.presets = {
     onMintSuccess: props.onMintSuccess,
     onMintError: props.onMintError,
   }),
-
-  /**
-   * Force a specific provider (only use if auto-detection fails)
-   * @example
-   * ```tsx
-   * <NFTMintButton {...NFTMintButton.presets.forceProvider({
-   *   contractAddress: "0x...",
-   *   chainId: 8453,
-   *   provider: "opensea"
-   * })} />
-   * ```
-   */
-  forceProvider: (props: {
-    contractAddress: Address;
-    chainId: number;
-    provider: "manifold" | "opensea" | "zora";
-    amount?: number;
-    buttonText?: string;
-    manifoldParams?: { instanceId?: string; tokenId?: string };
-    onMintSuccess?: (txHash: string) => void;
-    onMintError?: (error: string) => void;
-  }): NFTMintFlowProps => ({
-    contractAddress: props.contractAddress,
-    chainId: props.chainId,
-    forceProvider: props.provider,
-    amount: props.amount || 1,
-    buttonText: props.buttonText,
-    manifoldParams: props.manifoldParams,
-    onMintSuccess: props.onMintSuccess,
-    onMintError: props.onMintError,
-  }),
 };

registry/mini-app/blocks/nft-mint-flow/nft-mint-button.tsx

@@ -28,28 +28,12 @@ interface NFTMintPageProps {
   tokenId: string;
 
   /**
-   * Network name for display purposes (e.g., "base", "ethereum")
+   * Network name (e.g., "base", "ethereum", "arbitrum")
+   * Used for both NFTCard display and NFTMintButton chain resolution
    * @default "ethereum"
    */
   network?: string;
 
-  /**
-   * Chain ID for the blockchain network
-   * Note: Supports any chain ID, not limited to specific values
-   * @example 1 (Ethereum), 8453 (Base), 42220 (Celo)
-   */
-  chainId: number;
-  
-  /**
-   * Force a specific NFT provider instead of auto-detection
-   * 
-   * Leave undefined for automatic provider detection (recommended).
-   * Only use this if auto-detection fails or you need to override it.
-   * 
-   * @default undefined (auto-detect)
-   */
-  forceProvider?: "manifold" | "opensea" | "zora";
-  
   /**
    * Parameters specific to Manifold NFTs
    * Required when forceProvider="manifold" or when minting Manifold contracts
@@ -85,36 +69,23 @@ interface NFTMintPageProps {
  *   contractAddress="0x5b97886E4e1fC0F7d19146DEC03C917994b3c3a4"
  *   tokenId="1"
  *   network="ethereum"
- *   chainId={1}
  * />
  * 
  * // Manifold NFT - just provide the required params
  * <NFTMintFlow
  *   contractAddress="0x32dd0a7190b5bba94549a0d04659a9258f5b1387"
  *   tokenId="2"
  *   network="base"
- *   chainId={8453}
  *   manifoldParams={{
  *     instanceId: "4293509360"
  *   }}
  * />
- * 
- * // Force specific provider (rarely needed)
- * <NFTMintFlow
- *   contractAddress="0x..."
- *   tokenId="1"
- *   chainId={8453}
- *   forceProvider="manifold"
- *   manifoldParams={{ instanceId: "123" }}
- * />
  * ```
  */
 export function NFTMintFlow({
   contractAddress,
   tokenId,
   network = "ethereum",
-  chainId,
-  forceProvider,
   manifoldParams,
   buttonText = "Mint NFT",
 }: NFTMintPageProps) {
@@ -151,8 +122,7 @@ export function NFTMintFlow({
 
       <NFTMintButton
         contractAddress={contractAddress}
-        chainId={chainId}
-        forceProvider={forceProvider}
+        network={network}
         manifoldParams={manifoldParams}
         buttonText={buttonText}
         variant="default"