diff --git a/content/contracts-ui-builder/building-adapters.mdx b/content/contracts-ui-builder/building-adapters.mdx index c39251da..6d634662 100644 --- a/content/contracts-ui-builder/building-adapters.mdx +++ b/content/contracts-ui-builder/building-adapters.mdx @@ -18,14 +18,6 @@ This decoupling is achieved through the `ContractAdapter` interface, defined in * **Network-Aware Adapters**: An adapter instance is not generic; it is **instantiated with a specific `NetworkConfig` object**. This makes the instance aware of its target network (e.g., Ethereum Mainnet vs. Sepolia Testnet), including its RPC endpoints, explorer URLs, and chain identifiers. The adapter stores this `networkConfig` internally and uses it for all network-dependent operations. ```mermaid -%%init: { - 'theme': 'base', - 'themeVariables': { - 'background': '#ffffff', - 'mainBkg': '#ffffff', - 'primaryBorderColor': '#cccccc' - -}}%% graph TB subgraph "Chain-Agnostic Core" Builder["Builder Package
(Main Application)"] @@ -245,16 +237,8 @@ The functions `resolveRpcUrl` and `resolveExplorerConfig` in the EVM adapter pro 6. **Build and Test**: Build your new package and the main builder app. Add unit and integration tests to ensure your adapter functions correctly within the larger system. ```mermaid -%%init: { - 'theme': 'base', - 'themeVariables': { - 'background': '#ffffff', - 'mainBkg': '#ffffff', - 'primaryBorderColor': '#cccccc' - -}}%% graph TD - A[Start: Add Support for New Chain] --> BCreate New Package: packages/adapter-name + A[Start: Add Support for New Chain] --> B[Create New Package: packages/adapter-name] B --> C[Define NetworkConfig Objects in src/networks] C --> D[Implement the ContractAdapter Interface in src/adapter.ts] @@ -272,13 +256,10 @@ graph TD D --> D4 D --> D5 - D5 --> ERegister Adapter in Builder: packages/builder/src/core/ecosystemManager.ts + D5 --> E[Register Adapter in Builder: packages/builder/src/core/ecosystemManager.ts] E --> F[Add to ecosystemRegistry] E --> G[Add dynamic import to loadAdapterPackageModule] G --> H[Build and Test] H --> I[End: New Adapter Integrated] - - style A fill:#000,stroke:#333,stroke-width:2px - style I fill:#000,stroke:#333,stroke-width:2px ``` diff --git a/src/app/global.css b/src/app/global.css index e317592e..80fd28a1 100644 --- a/src/app/global.css +++ b/src/app/global.css @@ -121,3 +121,12 @@ @apply bg-background text-foreground; } } + +@keyframes shimmer { + 0% { + background-position: -100% 0; + } + 100% { + background-position: 100% 0; + } +} diff --git a/src/app/layout.config.tsx b/src/app/layout.config.tsx index a9c2b105..16a69a2a 100644 --- a/src/app/layout.config.tsx +++ b/src/app/layout.config.tsx @@ -1,5 +1,5 @@ import type { BaseLayoutProps } from "fumadocs-ui/layouts/shared"; -import { GlobeIcon, HomeIcon, MessagesSquareIcon } from "lucide-react"; +import { GlobeIcon, HomeIcon, MessageSquareMoreIcon } from "lucide-react"; /** * Shared layout configurations @@ -13,73 +13,79 @@ export const baseOptions: BaseLayoutProps = { title: ( <> OpenZeppelin Logo + @@ -98,7 +104,7 @@ export const baseOptions: BaseLayoutProps = { { text: "Forum", url: "https://forum.openzeppelin.com", - icon: , + icon: , }, { text: "Website", diff --git a/src/app/page.tsx b/src/app/page.tsx index 0b740ca1..a4aa089c 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,26 +1,29 @@ -import { Card } from "fumadocs-ui/components/card"; import { HomeLayout } from "fumadocs-ui/layouts/home"; +import { SendIcon, ShieldIcon, WrenchIcon } from "lucide-react"; +import { Footer } from "@/components/footer"; import { - ActivityIcon, - ArrowUpIcon, - ExternalLinkIcon, - GamepadIcon, - LibraryIcon, - MessageCircleIcon, - SatelliteDishIcon, - SendIcon, - ShieldIcon, - WallpaperIcon, - WandSparklesIcon, - WrenchIcon, -} from "lucide-react"; + BannerCard, + CommunityCard, + EcosystemCard, + FeatureCard, + HeroCard, +} from "@/components/home-cards"; import { + AnnotationDotsIcon, ArbitrumIcon, + ContractsLibraryIcon, + ContractsMcpIcon, + ContractsUpgradesIcon, + ContractsWizardIcon, EthereumIcon, + EthernautIcon, MidnightIcon, + MonitorIcon, PolkadotIcon, + RelayersIcon, StarknetIcon, StellarIcon, + TransactionProposalIcon, UniswapIcon, ZamaIcon, } from "@/components/icons"; @@ -29,7 +32,7 @@ import { baseOptions } from "./layout.config"; export default function HomePage() { return ( -
+
{/* Hero Section */}

@@ -40,155 +43,89 @@ export default function HomePage() {

- {/* Two Column Tool Boxes */} -
- {/* Smart Contracts Box */} -
-
-

- OpenZeppelin Smart Contracts -

-

- Battle-tested libraries and tools for smart contract development -

-
- + {/* Smart Contracts Section */} +
+
+ Smart Contracts
- {/* Open Source Tools Box */} -
-
-

Open Source Tools

-

- Tools for building, testing, and managing contracts in - production -

-
- + {/* Primary Hero: OpenZeppelin Contracts */} + } + title="OpenZeppelin Solidity Contracts" + description="The world's most popular library of Solidity contracts for Ethereum and EVM blockchains. Battle-tested, community-reviewed, and trusted by thousands of projects worldwide." + /> + + {/* Supporting Cards */} +
+ } + title="Upgrades Plugins" + description="Deploy and manage upgradeable contracts with built-in safety checks and best practices" + /> + + } + title="Contracts Wizard" + description="Interactive smart contract generator with security best practices built-in" + /> + + } + title="Contracts MCP" + description="AI-powered assistant for smart contract development and security analysis" + /> +
+
+ + {/* Divider */} +
+ + {/* Open Source Tools Section */} +
+
+ + Open Source Tools +
+ + {/* Dual Heroes: Monitor and Relayer */} +
+ } + title="Relayer" + description="Enable gasless transactions and automate smart contract operations. Build better user experiences with meta-transactions and scheduled executions." + glowColor="tools" + /> + + } + title="Monitor" + description="Real-time monitoring and alerting for your smart contracts. Get notified about important events, transactions, and state changes across multiple chains." + glowColor="tools" + /> +
+ + {/* Minor Tools */} +
+ } + title="UI Builder" + description="Create user interfaces for deployed contracts" + /> + + } + title="Defender" + description="Secure operations platform" + />
@@ -196,7 +133,7 @@ export default function HomePage() {
{/* Blockchains and Developer Ecosystems */} -
+

Blockchains and Developer Ecosystems @@ -208,263 +145,120 @@ export default function HomePage() {

- } title="Ethereum & EVM" description="Solidity smart contracts for Ethereum and EVM-compatible chains" - icon={} - className="relative overflow-hidden hover:border-blue-500 transition-colors before:absolute before:top-0 before:left-0 before:right-0 before:h-0.5 before:bg-gradient-to-r before:from-blue-600 before:to-blue-400 before:opacity-0 hover:before:opacity-100 before:transition-opacity" + glowColor="evm" /> - } title="Starknet" description="Essential contracts library written in Cairo for Starknet" - icon={} - className="relative overflow-hidden hover:border-orange-500 transition-colors before:absolute before:top-0 before:left-0 before:right-0 before:h-0.5 before:bg-gradient-to-r before:from-orange-600 before:to-orange-400 before:opacity-0 hover:before:opacity-100 before:transition-opacity" + glowColor="starknet" /> - } title="Arbitrum Stylus" description="Essential contracts library for Arbitrum Stylus written in Rust" - icon={} - className="relative overflow-hidden hover:border-red-500 transition-colors before:absolute before:top-0 before:left-0 before:right-0 before:h-0.5 before:bg-gradient-to-r before:from-red-600 before:to-red-400 before:opacity-0 hover:before:opacity-100 before:transition-opacity" + glowColor="rust" /> - } title="Uniswap Hooks" description="Advanced Uniswap V4 hooks in Solidity" - icon={} - className="relative overflow-hidden hover:border-blue-500 transition-colors before:absolute before:top-0 before:left-0 before:right-0 before:h-0.5 before:bg-gradient-to-r before:from-blue-600 before:to-blue-400 before:opacity-0 hover:before:opacity-100 before:transition-opacity" - /> - } - className="relative overflow-hidden hover:border-yellow-500 transition-colors before:absolute before:top-0 before:left-0 before:right-0 before:h-0.5 before:bg-gradient-to-r before:from-yellow-600 before:to-yellow-400 before:opacity-0 hover:before:opacity-100 before:transition-opacity" + glowColor="uniswap" /> - } title="Stellar" description="Soroban contracts library for Stellar" - icon={} - className="relative overflow-hidden hover:border-cyan-500 transition-colors before:absolute before:top-0 before:left-0 before:right-0 before:h-0.5 before:bg-gradient-to-r before:from-cyan-600 before:to-cyan-400 before:opacity-0 hover:before:opacity-100 before:transition-opacity" + glowColor="stellar" /> - } title="Midnight" description="Privacy-preserving smart contracts for Midnight blockchain" - icon={} - className="relative overflow-hidden hover:border-purple-500 transition-colors before:absolute before:top-0 before:left-0 before:right-0 before:h-0.5 before:bg-gradient-to-r before:from-purple-600 before:to-purple-400 before:opacity-0 hover:before:opacity-100 before:transition-opacity" + glowColor="midnight" /> - } title="Polkadot" description="ink! smart contracts for Polkadot and Substrate chains" - icon={} - className="relative overflow-hidden hover:border-pink-500 transition-colors before:absolute before:top-0 before:left-0 before:right-0 before:h-0.5 before:bg-gradient-to-r before:from-pink-600 before:to-pink-400 before:opacity-0 hover:before:opacity-100 before:transition-opacity" + glowColor="polkadot" + /> + + } + title="Zama FHEVM" + description="Fully homomorphic encryption contracts for confidential smart contracts" + glowColor="zama" />
- {/* Learn Section */} -
+ {/* Learn & Play Section */} +
-

Learn

+

Learn & Play

- Comprehensive guides for every step of your development journey + Master smart contract security through interactive challenges

- {/* First row: 4 foundational guides */} - - - {/* Second row: 3 advanced guides */} - - - {/* Ethernaut CTF Banner */} - -
- -
-
-
- Interactive Learning -
-

Ethernaut CTF

-

- Learn smart contract security by hacking! A Web3/Solidity based - capture-the-flag game where each level is a smart contract that - needs to be 'hacked'. Perfect for learning vulnerabilities and - security best practices through hands-on challenges. -

-
-
-
+ icon={} + title="Ethernaut CTF" + description="Learn smart contract security by hacking! A Web3/Solidity based capture-the-flag game where each level is a smart contract that needs to be 'hacked'. Perfect for learning vulnerabilities and security best practices through hands-on challenges." + badge="Interactive Learning" + />
{/* Community & Support */} -
+
-

Community & Support

+

+ Community & Support +

Connect with the community for technical discussions and support

- -
-
- -
-

Forum

-
-

- Deep technical discussions, architectural questions, and - detailed support. Best place for in-depth conversations about - smart contract development, security patterns, and - implementation details. -

-
+ icon={} + title="Forum" + description="Deep technical discussions, architectural questions, and detailed support. Best place for in-depth conversations about smart contract development, security patterns, and implementation details." + /> - -
-
- -
-

Telegram

-
-

- Quick questions, community support, and real-time chat. Join our - active community for faster responses, general help, - announcements, and casual discussions about OpenZeppelin tools. -

-
+ } + title="Telegram" + description="Quick questions, community support, and real-time chat. Join our active community for faster responses, general help, announcements, and casual discussions about OpenZeppelin tools." + />
+