# ThirdWeb Contracts SDK Implementation Guide (v5) ## Introduction This guide explains how to integrate the ThirdWeb Contracts SDK (v5) into a Next.js + TypeScript application for creating, deploying, and managing smart contracts. ## Overview The ThirdWeb Contracts SDK provides tools to streamline Web3 development, including: - **Contract Deployment and Interaction**: Deploy and interact with smart contracts easily. - **Wallet Integration**: Connect and manage crypto wallets securely. - **Utilities**: Use hooks and functions for transaction management and contract handling. - **Contract Library**: Access pre-built, audited smart contracts. ## Critical Implementation Notes -**CRITICAL**: You are to make sure to always install the required packages first! -**CRITICAL**:You are to always implement components in this order: 1. Set up the providers and root layout first 2. Then implement other components that depend on it -**CRITICAL**: You are to create and environment variable (.env.local) to store sensitive credentials (e.g., NEXT_PUBLIC_THIRDWEB_CLIENT_ID and NEXT_PUBLIC_THIRDWEB_SECRET_KEY) in environment variables. -**CRITICAL**: Define wallet configurations directly in the ConnectButton component (see WalletConnect component). -**CRITICAL**: You are to use the provided TypeScript interfaces and error-handling patterns for consistency and type safety. -**CRITICAL**: You are to follow the UI implementation as closely as possible for consistency in rebuilding the app. -**CRITICAL**: You are to make sure to build the Home component (page.tsx) and ModularContractDeployer component (ModularContractDeployer.tsx) and all other components/modules with the provided interfaces/UI setup, making sure to include the coreType and subCategory options selections always within the ModularContractDeployer component and also alwaysshowing the ModularContratDepoloyer and PrebuiltContractDeployer components on the Home component. ## Environment Variables Make sure to create a '.env.local' file and store the following environment variables there. Add them to your `.env.local` file: ``` THIRDWEB_CLIENT_ID=2f654d0179741f6776fa108a9683038e ``` ## Provider Configuration ```tsx ``` ## Type Definitions ```typescript // app/types.ts import { Chain, Module, ContractEvent } from 'thirdweb'; // Type for the chains array in Home component export interface ChainOption { name: string; chain: Chain; } // Type for the activeComponent state in Home component export type ActiveComponent = 'modular' | 'prebuilt' | 'view' | null; export type CoreType = 'ERC20' | 'ERC721' | 'ERC1155'; export type Subcategory = | 'Token' | 'Token Drop' | 'NFT Collection' | 'NFT Drop' | 'Open Edition' | 'Edition' | 'Edition Drop'; export interface CoreSubcategories { ERC20: Subcategory[]; ERC721: Subcategory[]; ERC1155: Subcategory[]; } export interface ModularContractDeployerProps { prefilledCoreType?: CoreType; prefilledSubcategory?: Subcategory; prefilledModules?: Module[]; onBack?: () => void; isPrefilled?: boolean; // New prop to indicate prefilled mode } export interface PopularContract { name: string; description: string; coreType: CoreType; subcategory: Subcategory; modules: Module[]; } export interface PrebuiltContractDeployerProps { onBack?: () => void; } ``` ## Core Components/Modules ### Component/Module 1: Wallet Connection #### Overview Renders a button to connect a wallet using ThirdWeb’s `ConnectButton`. #### Basic Usage ```tsx // components/WalletConnect.tsx 'use client'; import { ConnectButton } from 'thirdweb/react'; import { inAppWallet, createWallet } from 'thirdweb/wallets'; import { createThirdwebClient } from 'thirdweb'; import { sepolia, baseSepolia, ethereum, polygon } from 'thirdweb/chains'; const client = createThirdwebClient({ clientId:process.env.THIRDWEB_CLIENT_ID || '2f654d0179741f6776fa108a9683038e' }); const wallets = [ createWallet('io.metamask'), createWallet('com.coinbase.wallet'), createWallet('me.rainbow'), createWallet('io.rabby'), createWallet('io.zerion.wallet'), ]; interface WalletConnectProps { onConnect?: () => void; // Optional callback for when wallet connects } export default function WalletConnect({ onConnect }: WalletConnectProps) { return ( ); } ``` #### Props/Configuration 1. **Required Props** - none required 2. **Optional Props** - none #### Implementation Notes - You are to ensure the NEXT_PUBLIC_THIRDWEB_CLIENT_ID environment variable is set correctly. - You are to ensure the NEXT_PUBLIC_THIRDWEB_SECRET_KEY environment variable is set correctly. ### Component/Module 2: Home (Welcome Page) #### Overview Displays the main page with options to deploy a modular contract, deploy a prebuilt contract, or view an existing contract. #### Basic Usage ```tsx // app/page.tsx 'use client'; import { useState } from 'react'; import { useActiveAccount } from 'thirdweb/react'; import { sepolia, baseSepolia, ethereum, polygon } from 'thirdweb/chains'; import WalletConnect from './components/WalletConnect'; import ModularContractDeployer from './components/ModularContractDeployer'; import PrebuiltContractDeployer from './components/PrebuiltContractDeployer'; import { ChainOption, ActiveComponent, } from '../app/types'; export default function Home() { const activeAccount = useActiveAccount(); const address = activeAccount?.address; const [activeComponent, setActiveComponent] = useState(null); const [viewContractAddress, setViewContractAddress] = useState(''); const [viewContractChain, setViewContractChain] = useState(sepolia); const [viewContractError, setViewContractError] = useState(''); const [showConnectModal, setShowConnectModal] = useState(false); const [modalContractType, setModalContractType] = useState(null); const chains = [ { name: 'Sepolia (Testnet)', chain: sepolia }, { name: 'Base Sepolia (Testnet)', chain: baseSepolia }, { name: 'Ethereum Mainnet', chain: ethereum }, { name: 'Polygon Mainnet', chain: polygon }, ]; // Function to reset back to card view const resetView = () => { setActiveComponent(null); setViewContractAddress(''); setViewContractChain(sepolia); setViewContractError(''); }; / Function to handle contract deployment const handleDeploy = (contractType:'string') => { if (!address) { setShowConnectModal(true); setModalContractType(contractType); } else { setActiveComponent(contractType as as ActiveComponent) } }; // Callback for when wallet connects const handleWalletConnect = (contractType?:'string') => { setShowConnectModal(false); // Close the modal if (contractType) { handleDeploy(contractType); // Trigger deployment only if contractType is provided } }; // Use useEffect to close the modal when address becomes available useEffect(() => { if (address && showConnectModal) { setShowConnectModal(false); // Close the modal if the user is connected if (modalContractType) { setActiveComponent(modalContractType as ActiveComponent); // Set the active component } } }, [address, showConnectModal, modalContractType]); // Use useEffect to reset to home page when wallet disconnects useEffect(() => { if (!address && activeComponent) { setActiveComponent(null); // Reset to home page if disconnected } }, [address, activeComponent]); return (

Deploy Smart Contracts

{!activeComponent && (

{/* Grid for Modular and Popular Contract cards */}

{/* Grid for Modular cards */}

Modular Contract

Customize and deploy a modular contract with flexible options.

{/* Grid for Popular contracts card */}

Popular Contract

Choose from pre-configured popular contracts for quick deployment.

)} {/* Show the selected component */} {address && activeComponent === 'modular' && (

)} {address && activeComponent === 'prebuilt' && (

)} {/* Connection modal */} {!address && showConnectModal && (

Connect Your Wallet

handleWalletConnect(modalContractType)}/>

)}

); } ``` #### Props/Configuration 1. **Required Props** - none required 2. **Optional Props** - none #### Implementation Notes - -**CRITICAL**: You are to make sure to build the Home component (page.tsx) with the provided interfaces/UI setup, making sure to always include the ModularContratDepoloyer and PrebuiltContractDeployer cards on the Home component as card selection options for users. - You are to ensure this component is a child of ThirdwebProvider (via Providers) to use ThirdWeb hooks like useActiveAccount. - You are to test the layout on different screen sizes to ensure responsiveness. ### Component/Module 3: Modular Contract Deployment #### Overview Deploys a modular token contract on the blockchain using ThirdWeb’s SDK, with a form to configure metadata and modules. #### Basic Usage ```tsx // app/components/ModularContractDeployer.tsx 'use client'; import { useState, useEffect } from 'react'; import { createThirdwebClient } from 'thirdweb'; import { deployModularContract } from 'thirdweb/modules'; import { upload, resolveScheme } from "thirdweb/storage"; import { useActiveAccount, useActiveWallet, useWalletBalance } from 'thirdweb/react'; import { sepolia, baseSepolia, ethereum, polygon } from 'thirdweb/chains'; import WalletConnect from './WalletConnect'; import { ClaimableERC721, ClaimableERC1155, RoyaltyERC721, RoyaltyERC1155, MintableERC20, MintableERC721, MintableERC1155, TransferableERC20, TransferableERC721, TransferableERC1155, BatchMetadataERC1155, BatchMetadataERC721, OpenEditionMetadataERC721, SequentialTokenIdERC1155, } from 'thirdweb/modules'; import { ChainOption, CoreType, Subcategory, ModularContractDeployerProps, } from '../app/types'; import ViewContract from './ViewContract'; // Import the new component export default function ModularContractDeployer({ prefilledCoreType, prefilledSubcategory, prefilledModules, prefilledPrimarySaleRecipient, prefilledRoyaltyRecipient, prefilledTransferValidatorAddress = '0x0000000000000000000000000000000000000000', prefilledOwnerAddress, onBack, isPrefilled = false }: ModularContractDeployerProps) { const activeAccount = useActiveAccount(); const activeWallet = useActiveWallet(); // Use active wallet for signing const address = activeAccount?.address; const { data: balanceData, isLoading: isBalanceLoading } = useWalletBalance({ client: createThirdwebClient({ clientId: process.env.THIRDWEB_CLIENT_ID || '2f654d0179741f6776fa108a9683038e, }), chain: sepolia, // Use selectedChain in production address, }); const [name, setName] = useState(''); const [symbol, setSymbol] = useState(''); const [description, setDescription] = useState(''); const [image, setImage] = useState(null); const [imageUrl, setImageUrl] = useState(''); // Store the uploaded image URL const [ownerAddress, setOwnerAddress] = useState(prefilledOwnerAddress || address); const [primarySaleRecipient, setPrimarySaleRecipient] = useState(address); const [royaltyRecipient, setRoyaltyRecipient] = useState(address); const [royaltyPercentage, setRoyaltyPercentage] = useState(0); const [transferValidatorAddress, setTransferValidatorAddress] = useState( '0x0000000000000000000000000000000000000000' ); const [startTokenId, setStartTokenId] = useState(0); const [tokenURI, setTokenURI] = useState(''); // For ERC721 const [selectedChain, setSelectedChain] = useState(sepolia); // Default to Sepolia const [contractAddress, setContractAddress] = useState(''); const [deployError, setDeployError] = useState(''); const [isDeploying, setIsDeploying] = useState(false); const [coreType, setCoreType] = useState( prefilledCoreType || 'ERC20' ); const [subcategory, setSubcategory] = useState( prefilledSubcategory || 'Token' ); const [showViewContract, setShowViewContract] = useState(false); // State to show ViewContract const[urlUploadMessage, setUrlUploadMessage] = useState(''); const client = createThirdwebClient({ clientId:process.env.THIRDWEB_CLIENT_ID || '2f654d0179741f6776fa108a9683038e', }); const coreSubcategories: Record = { ERC20: ['Token', 'Token Drop'], ERC721: ['NFT Collection', 'NFT Drop', 'Open Edition'], ERC1155: ['Edition', 'Edition Drop'], }; // Available chains for selection const chains: ChainOption[] = [ { name: 'Sepolia (Testnet)', chain: sepolia }, { name: 'Base Sepolia (Testnet)', chain: baseSepolia }, { name: 'Ethereum Mainnet', chain: ethereum }, { name: 'Polygon Mainnet', chain: polygon }, ]; useEffect(() => { if (address) { setOwnerAddress(address); setPrimarySaleRecipient(address); setRoyaltyRecipient(address); } }, [address, prefilledOwnerAddress, prefilledPrimarySaleRecipient, prefilledRoyaltyRecipient]); // Function to copy address to clipboard const copyToClipboard = (text: string) => { navigator.clipboard.writeText(text).then(() => { alert('Address copied to clipboard!'); }); }; const deployContract = async () => { if (!address) { setDeployError('Please connect your wallet first.'); return; } if (!activeWallet) { setDeployError('No active wallet found. Please ensure your wallet is connected.'); return; } if (!name || !symbol) { setDeployError('Name and Symbol are required.'); return; } // Check wallet balance if (isBalanceLoading) { setDeployError('Checking wallet balance, please wait...'); return; } setIsDeploying(true); // Start deployment, disable button setDeployError(''); setContractAddress(''); try { // Upload image using ThirdWeb storage let uploadedImageUrl = ''; if (image) { try { setUrlUploadMessage('Uploading image...', image); const uri = await upload({ client, files: [image] }); // Resolve the ipfs:// URI to an https:// URI const resolvedUri = await resolveScheme({ client, uri, }); uploadedImageUrl = resolvedUri; } catch (error) { setDeployError("Image upload failed. Check your network or Thirdweb setup and try again."); setIsDeploying(false); throw new Error("Image upload failed. Please try again."); } } setImageUrl(uploadedImageUrl); } const getParamsForSubcategory = (sub: Subcategory) => { const baseParams = { name, symbol, description: description || undefined,, image: uploadedImageUrl || undefined, owner: ownerAddress, primarySaleRecipient, }; if (coreType === 'ERC20') { if (sub === 'Token') return baseParams; if (sub === 'Token Drop') return { ...baseParams, claimRecipient: ownerAddress }; } if (coreType === 'ERC721') { if (sub === 'NFT Collection') return { ...baseParams, tokenURI }; if (sub === 'NFT Drop') return { ...baseParams, tokenURI, royaltyRecipient, royaltyBps: BigInt(royaltyPercentage * 100), transferValidatorAddress, }; } if (coreType === 'ERC1155') { if (sub === 'Edition') return { ...baseParams, startTokenId }; if (sub === 'Edition Drop') return { ...baseParams, startTokenId, royaltyRecipient, royaltyBps: BigInt(royaltyPercentage * 100), transferValidatorAddress, }; } return baseParams; // Default fallback }; const params = getParamsForSubcategory(subcategory); // Deploy without modules const deployedAddress = await deployModularContract({ chain: selectedChain, client, account: activeAccount, core: coreType, params: getParamsForSubcategory(subcategory), //modules ommitted for now }); setContractAddress(deployedAddress); setIsDeploying(false); // Deployment complete, re-enable button } catch (err) { setIsDeploying(false); // Error occurred, re-enable button setDeployError('Deployment failed: ' + err.message); } }; const resetForm = () => { setContractAddress(''); setName(''); setSymbol(''); setDescription(''); setImage(null); setImageUrl(''); setOwnerAddress(address || ''); setPrimarySaleRecipient(address || ''); setRoyaltyRecipient(address || ''); setRoyaltyPercentage(0); setTransferValidatorAddress('0x0000000000000000000000000000000000000000'); setStartTokenId(0); setTokenURI(''); setDeployError(''); setCoreType(prefilledCoreType || 'ERC20'); setSubcategory(prefilledSubcategory || 'Token'); setIsDeploying(false); }; return (

{/* Form for metadata and chain selection */} {!contractAddress && (

Configure Modular Contract

Contract Type

Contract Subcategory

{/* Common Fields */}

Name (required) * setName(e.target.value)} className='mt-1 block w-full py-2 px-2 rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-black' placeholder='My Token' required />

Symbol setSymbol(e.target.value)} className='mt-1 block w-full py-2 px-2 text-black rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-black' placeholder='SYMBL' />

Description

setDescription(e.target.value)}
                className='mt-1 block w-full py-2 px-2 rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-black'
                placeholder='Describe your token here'
              />
            </div>
            <div className='mb-4'>
              <label className='block text-sm font-medium text-black'>
                Image
              </label>
              <input
                type='file'
                accept='image/*'
                alt='Preview'
                onChange={(e) => setImage(e.target.files?.[0] || null)}
                className='mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100 '
              />
              {image && (
                <div className='mt-2'>
                  <img
                    src={URL.createObjectURL(image)}
                    alt='Preview'
                    className='max-w-[200px] h-auto'
                  />
                </div>
              )}
            </div>
            {/* Owner and Primary Sale Recipient (Common) */}
            <div className='mb-4'>
              <label className='block text-sm font-medium text-black'>
                Owner Address
              </label>
              <input
                type='text'
                value={ownerAddress}
                onChange={(e) => setOwnerAddress(e.target.value)}
                placeholder='Owner Address'
                className='mt-1 block w-full p-2 border rounded-md text-black'
                required
              />
            </div>
            <div className='mb-4'>
              <label className='block text-sm font-medium text-black'>
                Primary Sale Recipient
              </label>
              <input
                type='text'
                value={primarySaleRecipient}
                onChange={(e) => setPrimarySaleRecipient(e.target.value)}
                placeholder='Primary Sale Recipient'
                className='mt-1 block w-full p-2 border rounded-md text-black'
                required
              />
              <p className='text-xs text-gray-700 mt-1'>
                The address that will receive the primary sale proceeds.
              </p>
            </div>

{/* Conditional Fields */}
            {(coreType === 'ERC721' || coreType === 'ERC1155') && (
              <div className='mb-4'>
                <label className='block text-sm font-medium text-black'>
                  Royalty Recipient
                </label>
                <input
                  type='text'
                  value={royaltyRecipient}
                  onChange={(e) => setRoyaltyRecipient(e.target.value)}
                  className='mt-1 block w-full p-2 border rounded-md text-black'
                  placeholder='Royalty Recipient'
                  required
                />
                <p className='text-xs text-gray-700 mt-1'>
                  The address that will receive royalties from secondary sales.
                </p>
              </div>
            )}
            {coreType === 'ERC721' && (
              <div className='mb-4'>
                <label className='block text-sm font-medium text-black'>
                  Token URI
                </label>
                <input
                  type='text'
                  value={tokenURI}
                  onChange={(e) => setTokenURI(e.target.value)}
                  className='mt-1 block w-full p-2 border rounded-md text-black'
                  placeholder='Token URI'
                />
              </div>
            )}
            {coreType === 'ERC1155' && (
              <div className='mb-4'>
                <label className='block text-sm font-medium text-black'>
                  Start Token ID
                </label>
                <input
                  type='number'
                  value={startTokenId}
                  onChange={(e) => setStartTokenId(Number(e.target.value))}
                  className='mt-1 block w-full p-2 border rounded-md text-black'
                  placeholder='Start Token ID'
                />
              </div>
            )}

{(subcategory === 'NFT Drop' || subcategory === 'Edition Drop') && (
              <>
                <div className='mb-4'>
                  <label className='block text-sm font-medium text-black'>
                    Royalty Percentage
                  </label>
                  <input
                    type='number'
                    value={royaltyPercentage}
                    onChange={(e) =>
                      setRoyaltyPercentage(Number(e.target.value))
                    }
                    className='mt-1 block w-full p-2 border rounded-md text-black'
                    placeholder='Royalty Percentage'
                  />
                </div>
                <div className='mb-4'>
                  <label className='block text-sm font-medium text-black'>
                    Transfer Validator Address
                  </label>
                  <input
                    type='text'
                    value={transferValidatorAddress}
                    onChange={(e) =>
                      setTransferValidatorAddress(e.target.value)
                    }
                    className='mt-1 block w-full p-2 border rounded-md text-black'
                    placeholder='Transfer Validator Address'
                    required
                  />
                  <p className='text-xs text-gray-700 mt-1'>
                    The contract address to enforce royalties. Use the zero
                    address to disable validation.
                  </p>
                </div>
              </>
            )}
            <div className='mb-4'>
              <label className='block text-sm font-medium text-black'>
                Chain *
              </label>
              <p className='text-xs text-gray-700 mt-1'>
                Select a network to deploy this contract on. We recommend
                starting with a testnet
              </p>
              <select
                required
                value={selectedChain.id}
                onChange={(e) => {
                  const chain = chains.find(
                    (c) => c.chain.id === Number(e.target.value)
                  )?.chain;
                  if (chain) setSelectedChain(chain);
                }}
                className='mt-1 block w-full py-2 px-2 rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-black'
              >
                {chains.map((chain) => (
                  <option key={chain.chain.id} value={chain.chain.id}>
                    {chain.name}
                  </option>
                ))}
              </select>
            </div>

{/* Deploy Button */}
            <button
              onClick={deployContract}
              disabled={!address || !name || isDeploying }
              className={`px-4 py-2 rounded-lg ${
                !address || !name || isDeploying
                  ? 'bg-gray-300 cursor-not-allowed'
                  : 'bg-blue-600 hover:bg-blue-700'
              } text-white font-medium`}
            >
              {isDeploying ? <>Deploying...</> : 'Deploy Contract'}
            </button>
          </div>
        </div>
      )}

{/* Deployment in Progress Message */}
      {isDeploying && (
        <div className='p-4 bg-blue-50 rounded-lg mt-4'>
          <h4 className='text-blue-700 font-semibold'>Deploying contract... Please wait... This may take a few minutes.</h4>
          <p className='text-blue-600'>
            Your wallet will prompt you to sign the transaction.
          </p>
        </div>
      )}
      {/* Success Message */}
      {contractAddress && !isDeploying && (
        <div className='p-4 bg-green-50 rounded-lg'>
          <p className='text-green-700'>
            Contract deployed at:{' '}
            <code className='bg-green-100 px-2 py-1 rounded'>
              {contractAddress}
            </code>
            <button
                onClick={() => copyToClipboard(contractAddress)}
                className="ml-2 text-green-700 hover:text-green-900"
                title="Copy address"
              >
                📋
              </button>
            </p>
          </p>
          <div className='mt-2 flex space-x-2 gap-4'>
          <button
                onClick={() => setShowViewContract(true)}
                className="mt-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium"
              >
                View Contract
              </button>
            <button
              onClick={resetForm}
              className='mt-2 px-4 py-2 bg-black hover:bg-grey-600 text-white rounded-lg font-medium'
            >
              Exit
            </button>
          </div>
        </div>
      )}
      {deployError && (
        <div className='p-4 bg-red-50 rounded-lg mt-4'>
          <p className='text-red-700'>{deployError}</p>
        </div>
      )}
      {showViewContract && (
        <ViewContract
          contractAddress={contractAddress}
          chain={selectedChain}
          name={name}
          imageUrl={imageUrl}
          creator={ownerAddress}
          onBack={() => setShowViewContract(false)}
        />
      )}
    </div>
  );
}
```

#### Props/Configuration

1. **Required Props**
   - none
2. **Optional Props**

- `preflledCoreType` (CoreType): Preselects the contract type (ERC20, ERC721, ERC1155). Defaults to 'ERC20'
- `prefilledSubcategory` (Subcategory): Preselects the contract subcategory. Defaults to 'Token'
- `prefilledModules` (Module[]): Preselects the modules to include. Defaults to undefined.
- `onBack` (() => void): Callback to navigate back to the previous view. Defaults to undefined

#### Implementation Notes

- **CRITICAL**: You are to make sure to build the ModularContractDeployer component (ModularContractDeployer.tsx) with the provided interfaces/UI setup, making sure to include the coreType and subCategory options selections and all other input options as indicated in the UI part of the code always 
- Test deployment on different chains, especially testnets like Sepolia, to avoid high gas costs.
- Validate addresses (e.g., ownerAddress, royaltyRecipient) to ensure they are valid Ethereum addresses.

### Component/Module 4: Prebuilt Contract Deployment

#### Overview

Deploys prebuilt popular contracts using a simple selection interface.

#### Basic Usage

```tsx
// components/PrebuiltContractDeployer.tsx
'use client';

import { useState } from 'react';
import {
  ClaimableERC20,
  ClaimableERC721,
  ClaimableERC1155,
  RoyaltyERC721,
  RoyaltyERC1155,
  MintableERC20,
} from 'thirdweb/modules';
import ModularContractDeployer from './ModularContractDeployer';
import {
  PopularContract,
  PrebuiltContractDeployerProps,
  CoreType,
  Subcategory,
} from '../app/types';
import { useActiveAccount } from 'thirdweb/react';

export default function PrebuiltContractDeployer({
  onBack,
}: PrebuiltContractDeployerProps) {
  const [selectedContract, setSelectedContract] =
    useState<PopularContract | null>(null);

if (selectedContract) {
    return (
      <ModularContractDeployer
        prefilledCoreType={selectedContract.coreType}
        prefilledSubcategory={selectedContract.subcategory}
        prefilledModules={selectedContract.modules}
        onBack={() => setSelectedContract(null)}
        isPrefilled={true} // Pass isPrefilled to disable select boxes
      />
    );
  }

return (
    <div className='max-w-4xl mx-auto px-4 py-8'>
      <div className='flex justify-between items-center mb-8'>
        <h2 className='text-2xl font-bold text-black mb-4'>
          Popular Contracts
        </h2>
        <button
          onClick={onBack}
          className='mb-4 px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded-lg font-medium'
        >
          Back to Options
        </button>
      </div>
      <p className='text-gray-500 mb-6'>
        Select any of these commonly deployed contracts for quick deployment.
      </p>
      <div className='grid grid-cols-1 md:grid-cols-3 gap-6'>
        {popularContracts.map((contract) => (
          <div
            key={contract.name}
            className='bg-gray-700 rounded-lg p-4 cursor-pointer hover:bg-gray-600 transition'
            onClick={() => setSelectedContract(contract)}
          >
            <h3 className='text-lg font-semibold text-white'>
              {contract.name}
            </h3>
            <p className='text-gray-400 text-sm mt-1'>{contract.description}</p>
            <div className='flex justify-end items-center mb-2'>
              <button className='text-white hover:text-blue-500'>
                🚀 Deploy
              </button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
```

#### Props/Configuration

1. **Required Props**
   - none
2. **Optional Props**
   - `onBack` (() => void): Callback to navigate back to the previous view. Defaults to undefined

#### Implementation Notes

- - **CRITICAL**: You are to make sure to build the PrebuiltContractDeployer component (PrebuiltContractDeployer.tsx) with the provided interfaces/UI setup, making sure to include the coreType and subCategory options selections and all other input options as indicated in the UI part of the code always 
- Aligns styling with other components (light theme: bg-gray-100, text-black).
- The modules in popularContracts have placeholder values (e.g., primarySaleRecipient: ''). These are set dynamically in ModularContractDeployer.

### Component/Module 5: View Contract

#### Overview

Displays deployed contract details

#### Basic Usage

```tsx
import { Chain } from 'thirdweb/chains';

interface ViewContractProps {
  contractAddress: string;
  chain: Chain;
  name: string;
  imageUrl: string;
  creator: string;
  onBack: () => void;
}

export default function ViewContract({
  contractAddress,
  chain,
  name,
  imageUrl,
  creator,
  onBack,
}: ViewContractProps) {
  // Function to copy address to clipboard
  const copyToClipboard = (text: string) => {
    navigator.clipboard.writeText(text).then(() => {
      alert('Address copied to clipboard!');
    });
  };
  // Function to get Etherscan link based on chain
  const getEtherscanLink = () => {
    const chainId = chain.id;
    let baseUrl = '';
    if (chainId === 11155111) {
      // Sepolia
      baseUrl = 'https://sepolia.etherscan.io';
    } else if (chainId === 1) {
      // Ethereum Mainnet
      baseUrl = 'https://etherscan.io';
    } else {
      // Default to Etherscan mainnet if chain is unknown
      baseUrl = 'https://etherscan.io';
    }
    return `${baseUrl}/address/${contractAddress}`;
  };

return (
    <div className="max-w-4xl mx-auto px-4 py-8">
      <div className="bg-white rounded-xl shadow-sm p-8">
        <div className="flex justify-between items-center mb-8">
          <h2 className="text-2xl font-bold text-black">{name}</h2>
          <button
            onClick={onBack}
            className="px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded-lg font-medium"
          >
            Close
          </button>
        </div>
        <div className="flex space-x-6">
          {/* Contract Image */}
          {imageUrl ? (
            <img
              src={imageUrl}
              alt={name}
              className="w-32 h-32 object-cover rounded-lg"
            />
          ) : (
            <div className="w-32 h-32 bg-gray-200 rounded-lg flex items-center justify-center text-gray-500">
              No Image
            </div>
          )}
          {/* Contract Details */}
          <div className="flex-1">
            <div className="mb-4">
              <h3 className="text-lg font-semibold text-black">Contract Address</h3>
              <p
                className="text-gray-600 cursor-pointer hover:underline"
                onClick={() => copyToClipboard(contractAddress)}
                title="Click to copy"
              >
                {contractAddress}
              </p>
            </div>
            <div className="mb-4">
              <h3 className="text-lg font-semibold text-black">Chain</h3>
              <p className="text-gray-600">{chain.name}</p>
            </div>
            <div className="mb-4">
              <h3 className="text-lg font-semibold text-black">Creator</h3>
              <p className="text-gray-600">{creator}</p>
            </div>
            <div className="mb-4">
              <h3 className="text-lg font-semibold text-black">View on Etherscan</h3>
              <a
                href={getEtherscanLink()}
                target="_blank"
                rel="noopener noreferrer"
                className="text-blue-600 hover:underline"
              >
                {chain.name === 'Sepolia' ? 'Etherscan-Sepolia' : 'Etherscan'}
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
```
### Props/Configuration

1. **Required Props**
 - `contractAddress` (string): The address of the deployed contract.
 - `chain` (Chain): The chain on which the contract is deployed (from thirdweb/chains).
 - `name` (string): The name of the contract.
 - `imageUrl` (string): URL of the contract's image.
 - `creator` (string): The address of the contract creator.
 - `onBack` (function): Callback to navigate back to the previous view.
2. **Optional Props**
   - none
#### Implementation Notes

- The contract address is clickable to copy to the clipboard, with a confirmation alert.
- The Etherscan link is dynamically generated based on the chain (e.g., Sepolia uses sepolia.etherscan.io).
- If no image is provided, a placeholder is shown.
- Ensure the chain prop matches the chain used for deployment to generate the correct Etherscan link.
- Best practice: Test the Etherscan link generation for all supported chains.
- Common pitfall: Ensure the imageUrl is a valid URL to avoid broken images.

## Hooks

This section documents the ThirdWeb React hooks used in the application to manage wallet connections and contract interactions.

### Hook 1: useActiveAccount

This hook provides the currently connected wallet account and its details.

#### Usage

```typescript
import { useActiveAccount } from 'thirdweb/react';

export default function WalletStatus() {
  const activeAccount = useActiveAccount();
  const address = activeAccount?.address;
  if (!address) {
    return <div>No wallet connected.</div>;
  }
  return <div>Connected wallet: {address}</div>;
}
```

#### Parameters

- none

#### Returns

- `activeAccount` (object | undefined ): The connected wallet account object, or undefined if no wallet is connected.
  - `address` (string): The wallet address.
  - Other properties may be available depending on the wallet provider.

## Root Layout Integration

Show how to integrate the SDK at the root level:

```tsx
// app/layout.tsx
import './globals.css';
import { ThirdwebProvider } from 'thirdweb/react';
import { createThirdwebClient } from 'thirdweb';
import { sepolia, baseSepolia, ethereum, polygon } from 'thirdweb/chains';

const client = createThirdwebClient({
  clientId:'process.env.THIRDWEB_CLIENT_ID || '2f654d0179741f6776fa108a9683038e',
});

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang='en'>
      <body>
        <ThirdwebProvider
          client={client}
          activeChain={sepolia}
          supportedChains={[sepolia, baseSepolia, ethereum, polygon]}
        >
          {children}
        </ThirdwebProvider>
      </body>
    </html>
  );
}
```

## Type Safety and Error Handling

### Type Guards

Use type guards to safely handle responses from ThirdWeb SDK functions, which may return error objects.

```typescript
export function isErrorResponse(
  response: unknown
): response is { error: string } {
  return (
    response !== null && typeof response === 'object' && 'error' in response
  );
}
```

### Error Handling Pattern

```typescript
try {
  const result = await sdkFunction(params);
  if (isErrorResponse(result)) {
    throw new Error(result.error);
  }
  // Process successful result
} catch (error) {
  // Handle error appropriately
  console.error('SDK Error:', error);
}
```

## Best Practices

- You are to always validate contract addresses and parameters before making calls.
- You are to maintain a clear separation between UI components and contract logic.
- You are to use environment variables for all sensitive configurations.
- You are to implement robust error handling to manage blockchain transaction failures and network issues.

## Advanced Usage

### Custom Configurations

```typescript
const customConfig = {
  gasLimit: 'auto',
  pollingInterval: 15000,
 };
```

### Integration Patterns

- Decoupled Architecture: Separate contract logic from UI components.
- Hook-based Interactions: Use custom hooks to manage state and side effects.
- Dynamic Wallet Integration: Configure wallet options directly within UI components

## Utilities and Helpers

The SDK provides several utility functions to ease common tasks:

```typescript
import { parseUnits, formatUnits } from '@thirdweb-dev/contracts/utils';

// Example: Convert tokens to the correct units
const formatted = parseUnits('1.0', 18);
```

## Common Workflows

Provide examples of common implementation workflows:

1. Connect Wallet and Deploy a Prebuilt Contract
   - Click "Deploy" on the "Popular Contract" card.
   - Connect your wallet via the modal.
   - Select a contract (e.g., "Token").
   - The ModularContractDeployer form opens with coreType and subcategory disabled.
   - Fill in the form and deploy the contract.
2. Deploy a Modular Contract
   - Click "Deploy" on the "Modular Contract" card.
   - Connect your wallet if not already connected.
   - Configure the contract type, subcategory, and other settings.
   - Deploy the contract and view the deployed address.
3. Error Handling
   - If deployment fails (e.g., invalid input, network error), an error message is displayed.
   - Example: "Valid owner address is required" if the owner address is invalid.

## Testing Considerations

- You are to write unit tests for each component and hook.
- You are to use mocking libraries to simulate SDK responses.
- You are to include itesting on a testnet (e.g., Sepolia)
</article></body></html>

Secret Scroll Quest -