diff --git a/docs/cookbook/deploy-a-chain.mdx b/docs/cookbook/deploy-a-chain.mdx deleted file mode 100644 index aeeb299b..00000000 --- a/docs/cookbook/deploy-a-chain.mdx +++ /dev/null @@ -1,286 +0,0 @@ ---- -title: 'Deploy an Appchain' -keywords: ['deploy a chain', 'deploy a base chain', 'deploy a base appchain', 'deploy a base l3', 'l3'] ---- - -Transform your high-traffic application into a dedicated blockchain with **1-second block times**, **sub-cent transactions**, and **enterprise-grade infrastructure**. Base Appchains provide dedicated blockspace for mature applications that need to scale beyond shared network limitations. - - - -Get early access to Base Appchains and transform your scaling strategy - - - -Jump to our step-by-step onboarding process - - - -## What Are Base Appchains? - -Base Appchains are **app-specific Layer 3 rollups** built on Base that provide dedicated blockspace for individual applications. Instead of competing with thousands of other apps for network resources, you get your own high-performance blockchain that rolls up to Base and inherits Ethereum's security. - - -Layer 3 appchains roll up to Base (Layer 2), which settles on Ethereum, providing you with dedicated performance while maintaining the security guarantees of the Ethereum ecosystem. - - -Think of it as the difference between **sharing a highway during rush hour** versus **having your own dedicated express lane**. With shared blockspace, your app's performance depends on network-wide activity. With an Appchain, you get consistent, predictable performance regardless of what's happening elsewhere. - - - -Compete with other apps for network resources, leading to variable performance, unpredictable costs, and user experience issues during peak times. - - - -Your own infrastructure with predictable performance, custom gas tokens, full control over throughput, and consistent user experience. - - - -## Why Choose Base Appchains? - -### High-Speed Performance Built for Scale - -Stop letting network congestion impact your user experience. Base Appchains deliver **1-second block times** and **sub-10 second withdrawals**, making them 10x faster than typical blockchain interactions. - - -Gaming applications like Blocklords have processed over 80 million transactions across 1.8 million wallets using Base Appchains, achieving the scale needed for their gaming ecosystem without performance degradation. - - -### Predictable, Cost-Effective Operations - -Replace unpredictable gas costs with **fixed monthly pricing**. Process transactions for fractions of cents while eliminating the need to sponsor gas costs for your users. - - - -Variable gas costs, expensive user onboarding, unpredictable operational expenses, and complex gas sponsorship management. - - - -Fixed monthly pricing, sub-cent transactions, predictable budgeting, and no gas sponsorship complexity. - - - -### Enterprise-Grade Infrastructure - -With Base Appchains, you get: - - -Fully-managed sequencer and node infrastructure - - -Automated maintenance and upgrades - - -Real-time monitoring and performance alerts - - -Dedicated block explorer for your chain - - -### Seamless Base Ecosystem Integration - -Maintain access to Base's **users**, **liquidity**, and **developer tools** while getting dedicated performance. Your Appchain integrates seamlessly with Smart Wallet, Paymaster, OnchainKit, and other Base ecosystem tools. - - - -Enable seamless account abstraction across Base Mainnet and your Appchain with unified user experiences. - - - -Sponsor gas costs across multiple chains with unified billing and simplified user onboarding. - - - -Use the same familiar developer tools and components across the entire Base ecosystem. - - - -## Technical Architecture - -Base Appchains are built on the **OP Enclave framework**, providing fast withdrawals and seamless integration with Base Mainnet. This architecture enables near-instant bridging while maintaining security through innovative proving mechanisms. - - - -Built on Optimism's latest technology for **near-instant bridging** between your Appchain and Base Mainnet. Users can move funds in seconds rather than the typical 7-day withdrawal periods of traditional rollups. - - - -Uses **Amazon S3** for cost-efficient data storage while maintaining security through **AWS Nitro Enclave** verification. This approach significantly reduces costs while ensuring data integrity and availability. - - - -Control which contracts can be called on your chain, effectively managing blockspace allocation. Implement **custom gas tokens** and **permission systems** while protecting users from censorship through guaranteed deposit lanes. - - - -Unlike traditional rollups that rely on challenge periods, Base Appchains use **immediate state proving** through secure enclaves, enabling instant finality and faster user experiences. - - - -## Use Cases & Success Stories - -Base Appchains power applications across gaming, DeFi, and enterprise sectors that require high performance and predictable costs. - - - -Process millions of micro-transactions for in-game actions, NFT trades, and player interactions without network congestion affecting gameplay performance. - -**Success Story**: Super Champs chose Base Appchains for consistent throughput, comparing the experience to "gaming on iOS" - smooth, predictable, and reliable. - - - -Handle high-frequency trading, yield farming, and complex financial operations with consistent, low-cost transactions that don't fluctuate with network activity. - -**Success Story**: Applications processing high-volume trading data benefit from predictable costs and dedicated throughput for time-sensitive operations. - - - -Deploy compliance-ready solutions with dedicated infrastructure, custom permissions, and the ability to manage access controls while maintaining transparency. - -**Success Story**: Proof 8 uses blockchain technology for verifiable inventory ownership in warehouses and distilleries, where enterprise customers prioritize performance, security, and privacy. - - - - -Base Appchains are designed for **mature projects** with significant transaction volumes. If you're just starting out or have low transaction volumes, consider building on Base Mainnet first to establish product-market fit. - - -## When Should You Consider an Appchain? - -Base Appchains are ideal for applications that have outgrown shared blockspace limitations. Use this checklist to determine if an Appchain is right for your project: - - -**High Transaction Volume**: Your app generates thousands of transactions daily and performance is affected by network congestion - - - -**Significant Gas Sponsorship**: You're spending substantial amounts sponsoring gas costs for users through Paymaster or similar solutions - - - -**Performance-Critical Operations**: User experience is negatively impacted by variable transaction times or network congestion - - - -**Custom Requirements**: You need custom gas tokens, specialized permissions, or governance mechanisms not available on shared chains - - - -**Predictable Costs**: Fixed operational costs are important for your business model and budgeting - - - -If you're considering launching your own L1 or L2 blockchain, Base Appchains offer a compelling alternative with faster time-to-market, proven infrastructure, and immediate access to Base's ecosystem. - - - -## Getting Started - -Base Appchains are currently in **beta with a waitlist**. We're working with select partners to refine the platform before broader availability. - - - -Complete our application form to be considered for early access to Base Appchains. We prioritize applications from mature projects with clear scaling needs. - - -Join the Base Appchains beta program - - - - -Our team will review your application and schedule a consultation to understand your specific scaling requirements, transaction patterns, and technical needs. - - -During the consultation, we'll help you determine if an Appchain is the right solution and design the optimal configuration for your use case. - - - - -Once approved, you'll receive access to both testnet and mainnet features. Start with the **$1/month testnet** to validate your architecture and integration. - - -Use the testnet environment to test bridging, custom gas tokens, and permission systems before deploying to mainnet. - - - - -Deploy to production with full enterprise support, monitoring, and maintenance included. Our team provides ongoing support for your Appchain infrastructure. - - -Full technical support during launch and ongoing operations - - - - - -**Coming Soon**: Self-serve, one-click deployment will be available for approved projects, making it even easier to launch and manage your Appchain. - - -## Frequently Asked Questions - - - -Base Appchains offer significant advantages over launching independent blockchain infrastructure: - -- **Faster time-to-market**: Deploy in weeks, not months or years -- **Proven infrastructure**: Built on battle-tested Base and OP Stack technology -- **Immediate ecosystem access**: Users and liquidity from Base Mainnet -- **Lower operational overhead**: Fully managed infrastructure and maintenance -- **Ethereum alignment**: Inherit security without custom validator sets or consensus mechanisms - - - -Base Appchains provide **seamless onboarding** similar to Base Mainnet applications: - -- Users can bridge funds between Base and your Appchain in **seconds** -- Same wallet experience across Base ecosystem -- Smart Wallet integration for account abstraction -- Familiar transaction patterns and interfaces - - - -**Coinbase manages the core infrastructure** on your behalf, including: - -- Sequencer operation and maintenance -- Node infrastructure and upgrades -- Security key management -- Monitoring and alerting systems - -You maintain control over **application-level configurations** like gas tokens, permissions, and governance while benefiting from enterprise-grade infrastructure management. - - - -Base Appchains use the **OP Enclave framework** for **near-instant bridging**: - -- Move funds between Base and your Appchain in seconds -- No 7-day withdrawal periods like traditional rollups -- Maintains security through cryptographic proofs -- Seamless user experience across chains - - - -Base Appchains balance **operational efficiency** with **censorship resistance**: - -- Custom permissions control high-throughput operations -- **Guaranteed deposit lanes** prevent censorship through direct Base deposits -- Users always have recourse through the Base bridge -- Inherits Ethereum's long-term decentralization roadmap - - - -## Ready to Scale? - -Base Appchains represent the next evolution in blockchain scaling, providing dedicated infrastructure without sacrificing ecosystem benefits. Whether you're processing millions of gaming transactions, handling high-frequency DeFi operations, or building enterprise solutions, Appchains deliver the performance and predictability your users expect. - - - -Apply for early access to Base Appchains beta program - - - -Discover the full ecosystem of Base developer tools and integrations - - - - -**Next Steps**: After joining the waitlist, explore Base's developer documentation to understand how Appchains integrate with Smart Wallet, Paymaster, OnchainKit, and other ecosystem tools. - diff --git a/docs/docs.json b/docs/docs.json index 5a88a000..53c94b92 100644 --- a/docs/docs.json +++ b/docs/docs.json @@ -1,9 +1,9 @@ { "$schema": "https://mintlify.com/docs.json", - "theme": "mint", + "theme": "aspen", "name": "Base Documentation", "colors": { - "primary": "#578BFA", + "primary": "#0000ff", "light": "#578BFA", "dark": "#578BFA" }, @@ -28,16 +28,11 @@ "group": "Introduction", "pages": ["get-started/base"] }, - { - "group": "Browse by", - "pages": ["get-started/products", "get-started/use-cases"] - }, { "group": "Quickstart", "pages": [ "get-started/build-app", "get-started/launch-token", - "get-started/deploy-chain", "get-started/deploy-smart-contracts" ] }, @@ -537,10 +532,6 @@ { "group": "Components", "pages": [ - { - "group": "Appchain", - "pages": ["onchainkit/latest/components/appchain/bridge"] - }, { "group": "Buy", "pages": ["onchainkit/latest/components/buy/buy"] @@ -755,8 +746,7 @@ "onchainkit/guides/themes", "onchainkit/guides/use-basename-in-onchain-app", "onchainkit/guides/using-ai-powered-ides", - "onchainkit/guides/ai-prompting-guide", - "onchainkit/guides/testing-with-onchaintestkit" + "onchainkit/guides/ai-prompting-guide" ] }, { @@ -770,10 +760,6 @@ { "group": "Components", "pages": [ - { - "group": "Appchain", - "pages": ["onchainkit/appchain/bridge"] - }, { "group": "Buy", "pages": ["onchainkit/buy/buy"] @@ -944,7 +930,6 @@ "group": "Types", "pages": [ "onchainkit/api/types", - "onchainkit/appchain/types", "onchainkit/checkout/types", "onchainkit/config/types", "onchainkit/earn/types", @@ -999,7 +984,6 @@ "cookbook/spend-permissions-ai-agent", "cookbook/launch-ai-agents", "cookbook/launch-tokens", - "cookbook/deploy-a-chain", "cookbook/onchain-social", "cookbook/defi-your-app", "cookbook/go-gasless", @@ -1612,10 +1596,6 @@ "source": "/builderkits/onchainkit/:slug*", "destination": "/onchainkit/:slug*" }, - { - "source": "/builderkits/onchainkit/appchain/bridge", - "destination": "/onchainkit/appchain/bridge" - }, { "source": "/builderkits/onchainkit/buy/buy", "destination": "/onchainkit/buy/buy" diff --git a/docs/get-started/base.mdx b/docs/get-started/base.mdx index 3450c144..3a5da388 100644 --- a/docs/get-started/base.mdx +++ b/docs/get-started/base.mdx @@ -1,96 +1,61 @@ --- -title: Base +title: "Base" description: "The #1 Ethereum Layer 2, incubated by Coinbase" +mode: "wide" --- -Build on Base and choose the features that fits your needs — from sub-cent global payments to creator-first monetization and built-in distribution. - - -### Why Base? - - - - **Payments & Financial Services:** Move value globally with sub-second, - sub-cent payments and build on existing financial services for trading, - yield generation, and more. - - - **Creator Monetization:** Creators of all kinds are exploring new ways to - monetize their work. Innovate on the frontier of creator monetization with - the creator economy on Base. - - - **Comprehensive Builder Support:** Base provides developer tools, - infrastructure, and support. Plus, Base has one of the largest onchain - builder communities within which you can collaborate and grow. - - - **Launch to real users:** Tap Base activations, grants, and mini-app - channels that surface your project to millions. - - - -### Start Building - - - - Build and deploy your app in minutes. - - - Launch a new token. - - - Deploy your own chain on Base. +
+
+ ### Payments + [Accept Payments](/base-account/guides/accept-payments) + [Understand Network Fees](/base-chain/network-information/network-fees) + [Integrate Base Accounts](/base-account/quickstart/web) +
+
+ ### Apps + [Create a Mini App](/mini-apps/quickstart/create-new-miniapp) + [Sponsor Transactions](/base-account/improve-ux/sponsor-gas/paymasters) + [Accept Recurring Payments](/base-account/guides/accept-recurring-payments) +
+
+ ### Tokens + [Launch a Token](/get-started/launch-token) + [Bridge from Solana](/base-chain/quickstart/base-solana-bridge) + [Bridge from Ethereum](/base-chain/quickstart/bridge-token) +
+
+ +### Products + + + + Network, nodes, and infrastructure + + + Authentication, payments, Basenames + + + Build in-app social experiences + + + Cross-chain asset transfers -Explore [all products](/get-started/products) and [use cases](/get-started/use-cases). - -### Get Funded - - - - Get rewarded up to 2 ETH weekly through the Builder Rewards Program. - - - Apply for fast, retroactive, Base Builder Grants (~1-5 ETH). - - - A global program for builders creating the next wave of onchain apps. - - - Apply for OP Retro Funding for your contributions to the Base ecosystem. - - - -### Reach More Users - - - - Mini Apps run directly inside the social feed: Make your existing app a Mini - App or build a new one. - - - Showcase your project to the Base community and get discovered. - - +
+ ### Resources +
+
+

Funding

+ Builder Rewards + Grants + Base Batches + Retroactive Funding +
+
+

Growth

+ Join the Base Ecosystem + Find a Base Mentor +
+
+
diff --git a/docs/get-started/deploy-chain.mdx b/docs/get-started/deploy-chain.mdx deleted file mode 100644 index 04c221a8..00000000 --- a/docs/get-started/deploy-chain.mdx +++ /dev/null @@ -1,286 +0,0 @@ ---- -title: 'Deploy an Appchain' -keywords: ['deploy a chain', 'deploy a base chain', 'deploy a base appchain', 'deploy a base l3', 'l3'] ---- - -Transform your high-traffic application into a dedicated blockchain with **1-second block times**, **sub-cent transactions**, and **enterprise-grade infrastructure**. Base Appchains provide dedicated blockspace for mature applications that need to scale beyond shared network limitations. - - - -Get early access to Base Appchains and transform your scaling strategy - - - -Jump to our step-by-step onboarding process - - - -## What Are Base Appchains? - -Base Appchains are **app-specific Layer 3 rollups** built on Base that provide dedicated blockspace for individual applications. Instead of competing with thousands of other apps for network resources, you get your own high-performance blockchain that rolls up to Base and inherits Ethereum's security. - - -Layer 3 appchains roll up to Base (Layer 2), which settles on Ethereum, providing you with dedicated performance while maintaining the security guarantees of the Ethereum ecosystem. - - -Think of it as the difference between **sharing a highway during rush hour** versus **having your own dedicated express lane**. With shared blockspace, your app's performance depends on network-wide activity. With an Appchain, you get consistent, predictable performance regardless of what's happening elsewhere. - - - -Compete with other apps for network resources, leading to variable performance, unpredictable costs, and user experience issues during peak times. - - - -Your own infrastructure with predictable performance, custom gas tokens, full control over throughput, and consistent user experience. - - - -## Why Choose Base Appchains? - -### High-Speed Performance Built for Scale - -Stop letting network congestion impact your user experience. Base Appchains deliver **1-second block times** and **sub-10 second withdrawals**, making them 10x faster than typical blockchain interactions. - - -Gaming applications like Blocklords have processed over 80 million transactions across 1.8 million wallets using Base Appchains, achieving the scale needed for their gaming ecosystem without performance degradation. - - -### Predictable, Cost-Effective Operations - -Replace unpredictable gas costs with **fixed monthly pricing**. Process transactions for fractions of cents while eliminating the need to sponsor gas costs for your users. - - - -Variable gas costs, expensive user onboarding, unpredictable operational expenses, and complex gas sponsorship management. - - - -Fixed monthly pricing, sub-cent transactions, predictable budgeting, and no gas sponsorship complexity. - - - -### Enterprise-Grade Infrastructure - -With Base Appchains, you get: - - -Fully-managed sequencer and node infrastructure - - -Automated maintenance and upgrades - - -Real-time monitoring and performance alerts - - -Dedicated block explorer for your chain - - -### Seamless Base Ecosystem Integration - -Maintain access to Base's **users**, **liquidity**, and **developer tools** while getting dedicated performance. Your Appchain integrates seamlessly with Smart Wallet, Paymaster, OnchainKit, and other Base ecosystem tools. - - - -Enable seamless account abstraction across Base Mainnet and your Appchain with unified user experiences. - - - -Sponsor gas costs across multiple chains with unified billing and simplified user onboarding. - - - -Use the same familiar developer tools and components across the entire Base ecosystem. - - - -## Technical Architecture - -Base Appchains are built on the **OP Enclave framework**, providing fast withdrawals and seamless integration with Base Mainnet. This architecture enables near-instant bridging while maintaining security through innovative proving mechanisms. - - - -Built on Optimism's latest technology for **near-instant bridging** between your Appchain and Base Mainnet. Users can move funds in seconds rather than the typical 7-day withdrawal periods of traditional rollups. - - - -Uses **Amazon S3** for cost-efficient data storage while maintaining security through **AWS Nitro Enclave** verification. This approach significantly reduces costs while ensuring data integrity and availability. - - - -Control which contracts can be called on your chain, effectively managing blockspace allocation. Implement **custom gas tokens** and **permission systems** while protecting users from censorship through guaranteed deposit lanes. - - - -Unlike traditional rollups that rely on challenge periods, Base Appchains use **immediate state proving** through secure enclaves, enabling instant finality and faster user experiences. - - - -## Use Cases & Success Stories - -Base Appchains power applications across gaming, DeFi, and enterprise sectors that require high performance and predictable costs. - - - -Process millions of micro-transactions for in-game actions, NFT trades, and player interactions without network congestion affecting gameplay performance. - -**Success Story**: Super Champs chose Base Appchains for consistent throughput, comparing the experience to "gaming on iOS" - smooth, predictable, and reliable. - - - -Handle high-frequency trading, yield farming, and complex financial operations with consistent, low-cost transactions that don't fluctuate with network activity. - -**Success Story**: Applications processing high-volume trading data benefit from predictable costs and dedicated throughput for time-sensitive operations. - - - -Deploy compliance-ready solutions with dedicated infrastructure, custom permissions, and the ability to manage access controls while maintaining transparency. - -**Success Story**: Proof 8 uses blockchain technology for verifiable inventory ownership in warehouses and distilleries, where enterprise customers prioritize performance, security, and privacy. - - - - -Base Appchains are designed for **mature projects** with significant transaction volumes. If you're just starting out or have low transaction volumes, consider building on Base Mainnet first to establish product-market fit. - - -## When Should You Consider an Appchain? - -Base Appchains are ideal for applications that have outgrown shared blockspace limitations. Use this checklist to determine if an Appchain is right for your project: - - -**High Transaction Volume**: Your app generates thousands of transactions daily and performance is affected by network congestion - - - -**Significant Gas Sponsorship**: You're spending substantial amounts sponsoring gas costs for users through Paymaster or similar solutions - - - -**Performance-Critical Operations**: User experience is negatively impacted by variable transaction times or network congestion - - - -**Custom Requirements**: You need custom gas tokens, specialized permissions, or governance mechanisms not available on shared chains - - - -**Predictable Costs**: Fixed operational costs are important for your business model and budgeting - - - -If you're considering launching your own L1 or L2 blockchain, Base Appchains offer a compelling alternative with faster time-to-market, proven infrastructure, and immediate access to Base's ecosystem. - - - -## Getting Started - -Base Appchains are currently in **beta with a waitlist**. We're working with select partners to refine the platform before broader availability. - - - -Complete our application form to be considered for early access to Base Appchains. We prioritize applications from mature projects with clear scaling needs. - - -Join the Base Appchains beta program - - - - -Our team will review your application and schedule a consultation to understand your specific scaling requirements, transaction patterns, and technical needs. - - -During the consultation, we'll help you determine if an Appchain is the right solution and design the optimal configuration for your use case. - - - - -Once approved, you'll receive access to both testnet and mainnet features. Start with the **$1/month testnet** to validate your architecture and integration. - - -Use the testnet environment to test bridging, custom gas tokens, and permission systems before deploying to mainnet. - - - - -Deploy to production with full enterprise support, monitoring, and maintenance included. Our team provides ongoing support for your Appchain infrastructure. - - -Full technical support during launch and ongoing operations - - - - - -**Coming Soon**: Self-serve, one-click deployment will be available for approved projects, making it even easier to launch and manage your Appchain. - - -## Frequently Asked Questions - - - -Base Appchains offer significant advantages over launching independent blockchain infrastructure: - -- **Faster time-to-market**: Deploy in weeks, not months or years -- **Proven infrastructure**: Built on battle-tested Base and OP Stack technology -- **Immediate ecosystem access**: Users and liquidity from Base Mainnet -- **Lower operational overhead**: Fully managed infrastructure and maintenance -- **Ethereum alignment**: Inherit security without custom validator sets or consensus mechanisms - - - -Base Appchains provide **seamless onboarding** similar to Base Mainnet applications: - -- Users can bridge funds between Base and your Appchain in **seconds** -- Same wallet experience across Base ecosystem -- Smart Wallet integration for account abstraction -- Familiar transaction patterns and interfaces - - - -**Coinbase manages the core infrastructure** on your behalf, including: - -- Sequencer operation and maintenance -- Node infrastructure and upgrades -- Security key management -- Monitoring and alerting systems - -You maintain control over **application-level configurations** like gas tokens, permissions, and governance while benefiting from enterprise-grade infrastructure management. - - - -Base Appchains use the **OP Enclave framework** for **near-instant bridging**: - -- Move funds between Base and your Appchain in seconds -- No 7-day withdrawal periods like traditional rollups -- Maintains security through cryptographic proofs -- Seamless user experience across chains - - - -Base Appchains balance **operational efficiency** with **censorship resistance**: - -- Custom permissions control high-throughput operations -- **Guaranteed deposit lanes** prevent censorship through direct Base deposits -- Users always have recourse through the Base bridge -- Inherits Ethereum's long-term decentralization roadmap - - - -## Ready to Scale? - -Base Appchains represent the next evolution in blockchain scaling, providing dedicated infrastructure without sacrificing ecosystem benefits. Whether you're processing millions of gaming transactions, handling high-frequency DeFi operations, or building enterprise solutions, Appchains deliver the performance and predictability your users expect. - - - -Apply for early access to Base Appchains beta program - - - -Discover the full ecosystem of Base developer tools and integrations - - - - -**Next Steps**: After joining the waitlist, explore Base's developer documentation to understand how Appchains integrate with Smart Wallet, Paymaster, OnchainKit, and other ecosystem tools. - diff --git a/docs/get-started/products.mdx b/docs/get-started/products.mdx deleted file mode 100644 index 8faca3f3..00000000 --- a/docs/get-started/products.mdx +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: 'Products' -keywords: ['onchainkit', 'minikit', 'agentkit', 'base account', 'appchains', 'paymaster','l3','deploy a chain','smart wallet', 'onchaintestkit', 'testing'] ---- - - - - All-in-one toolkit and ready-to-use, full-stack components. - - - Feature your mini app on decentralized social platforms with a few lines of code. - - - A passkey-based universal account to connect with the onchain world. - - - Launch a chain with dedicated blockspace on Base, in minutes. - - - End-to-end testing framework for blockchain applications. - - diff --git a/docs/get-started/use-cases.mdx b/docs/get-started/use-cases.mdx deleted file mode 100644 index 80a8cfb0..00000000 --- a/docs/get-started/use-cases.mdx +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: 'Use Cases' ---- - - - - Unlock the power of DeFi protocols and services directly in your app.  - - - Deploy AI agents that can interact with onchain data and smart contracts. - - - Integrate secure and efficient crypto payment solutions for your apps. - - - Let users sign up and sign in with Smart Wallet — the universal account for the onchain world. - - - Use decentralized social graphs to grow your app and find users — wherever they are. - - - Enable gasless transactions and simplify user onboarding. - - diff --git a/docs/onchainkit/appchain/bridge.mdx b/docs/onchainkit/appchain/bridge.mdx deleted file mode 100644 index 75365506..00000000 --- a/docs/onchainkit/appchain/bridge.mdx +++ /dev/null @@ -1,394 +0,0 @@ ---- -title: · OnchainKit -sidebarTitle: -description: Bridge to appchains with OnchainKit ---- - -import { Danger } from "/snippets/danger.mdx"; - - -**⚠️ NOTE** - -The `AppchainBridge` component is alpha release software and is provided AS-IS. Use at your own risk. - - - -The `AppchainBridge` component provides a simple interface for implementing bridging to appchains with OnchainKit. - -## Prerequisites - -Before using the `AppchainBridge` component, ensure you've completed the [Getting Started](/onchainkit/getting-started) steps. - -### Starting a new project - -If you're starting a new project, we recommend using `create onchain` to scaffold your project. - -```bash -npm create onchain@latest -``` - -### Adding to an existing project - -If you're adding `AppchainBridge` to an existing project, simply install OnchainKit. - - -```bash npm -npm install @coinbase/onchainkit -``` - -```bash yarn -yarn add @coinbase/onchainkit -``` - -```bash pnpm -pnpm add @coinbase/onchainkit -``` - -```bash bun -bun add @coinbase/onchainkit -``` - - -Wrap the `` around your app, following the steps in [Getting Started](/onchainkit/installation/nextjs#add-providers). - -## Quickstart - -To use `AppchainBridge`, you'll need to create a custom chain for your network using Viem's [defineChain](https://viem.sh/docs/chains/introduction#custom-chains). - -You can retrieve the chain ID and your RPC URL from your appchain's dashboard in Coinbase Developer Platform. - -Once successfully created, add the custom chain to your Wagmi configuration, and provide it as a child component to `OnchainKitProvider`. - - -```tsx chain.ts -// @noErrors: 2554 -import { defineChain } from 'viem'; - -export const EXAMPLE_CHAIN = defineChain({ - id: 8453200000, // [!code ++] - name: 'Your Appchain Network', - nativeCurrency: { - name: 'Ethereum', - symbol: 'ETH', - decimals: 18, - }, - rpcUrls: { - default: { - http: ['https://your-rpc.appchain.base.org'], // [!code ++] - }, - }, -}); -``` - -```tsx providers.tsx -// @noErrors: 2554 -import { defineChain } from 'viem'; - -const EXAMPLE_CHAIN = defineChain({ - id: 8453200000, - name: 'Your Appchain Network', - nativeCurrency: { - name: 'Ethereum', - symbol: 'ETH', - decimals: 18, - }, - rpcUrls: { - default: { - http: ['https://your-rpc.appchain.base.org'], - }, - }, -}); -// ---cut-before--- -'use client'; - -import { baseSepolia } from 'wagmi/chains'; -import { OnchainKitProvider } from '@coinbase/onchainkit'; -import type { ReactNode } from 'react'; -import { createConfig, http, WagmiProvider } from 'wagmi'; -import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; - -const wagmiConfig = createConfig({ - chains: [baseSepolia, EXAMPLE_CHAIN], // [!code ++] - transports: { - [baseSepolia.id]: http(), - [EXAMPLE_CHAIN.id]: http(), // [!code ++] - } -}); - -const queryClient = new QueryClient(); - -export function Providers(props: { children: ReactNode }) { - return ( - - - - {props.children} - - - - ); -} -``` - - -Use the custom chain to create an `Appchain` object. You can also render an icon in the UI using the `icon` prop. - -```tsx -// @noErrors: 2554 -import { defineChain } from 'viem'; -const EXAMPLE_CHAIN = defineChain({ - id: 8453200000, // [!code ++] - name: 'Your Appchain Network', - nativeCurrency: { - name: 'Ethereum', - symbol: 'ETH', - decimals: 18, - }, - rpcUrls: { - default: { - http: ['https://your-rpc.appchain.base.org'], // [!code ++] - }, - }, -}); -// ---cut-before--- -import type { Appchain } from '@coinbase/onchainkit/appchain'; - -const EXAMPLE_APPCHAIN: Appchain = { - chain: EXAMPLE_CHAIN, - - icon: Your Appchain Network, - -}; -``` - -Now, you can render the `AppchainBridge` component with the `chain` and `appchain` props. - -```tsx -// @noErrors: 2554 -import { defineChain } from 'viem'; -const EXAMPLE_CHAIN = defineChain({ - id: 8453200000, // [!code ++] - name: 'Your Appchain Network', - nativeCurrency: { - name: 'Ethereum', - symbol: 'ETH', - decimals: 18, - }, - rpcUrls: { - default: { - http: ['https://your-rpc.appchain.base.org'], // [!code ++] - }, - }, -}); -import type { Appchain } from '@coinbase/onchainkit/appchain'; - -const EXAMPLE_APPCHAIN: Appchain = { - chain: EXAMPLE_CHAIN, - - icon: Your Appchain Network, - -}; -// ---cut-before--- -import { AppchainBridge } from '@coinbase/onchainkit/appchain'; -import { baseSepolia } from 'viem/chains'; - - -``` - -## Custom bridgeable tokens - -By default, the bridgeable token is only native ETH. You can customize the bridgeable tokens by providing a `bridgeableTokens` prop to the `AppchainBridge` component. - -Let's add a custom "Appchain Token" to the bridgeable tokens array. - -```tsx -// @noErrors: 2554 -import { defineChain } from 'viem'; -const EXAMPLE_CHAIN = defineChain({ - id: 8453200000, // [!code ++] - name: 'Your Appchain Network', - nativeCurrency: { - name: 'Ethereum', - symbol: 'ETH', - decimals: 18, - }, - rpcUrls: { - default: { - http: ['https://your-rpc.appchain.base.org'], // [!code ++] - }, - }, -}); -import type { Appchain } from '@coinbase/onchainkit/appchain'; - -const EXAMPLE_APPCHAIN: Appchain = { - chain: EXAMPLE_CHAIN, - - icon: Your Appchain Network, - -}; -// ---cut-before--- -import type { BridgeableToken } from '@coinbase/onchainkit/appchain'; - -const customBridgeableTokens: BridgeableToken[] = [ - { - name: 'ETH', - address: '', - symbol: 'ETH', - decimals: 18, - image: - 'https://wallet-api-production.s3.amazonaws.com/uploads/tokens/eth_288.png', - chainId: 8453200000, - }, - { - address: '0x...', - remoteToken: '0x...', - name: 'Appchain Token', - symbol: 'ATKN', - decimals: 18, - chainId: 8453200000, - image: 'https://some-icon.com/icon.png', - }, -]; -``` - - -**⚠️ What is remoteToken?** - -The `remoteToken` field represents the token address on the appchain you're bridging to. - -ERC-20 tokens on the appchain must comply to the `IOptimismMintableERC20` interface to be bridgeable. - -Follow the [Optimism documentation](https://docs.optimism.io/app-developers/tutorials/bridging/standard-bridge-standard-token#create-an-l2-erc-20-token) to retrieve the `remoteToken` address for your ERC-20 token. - - - -You can then plug the `customBridgeableTokens` into the `AppchainBridge` component with the `bridgeableTokens` prop. - -```tsx -// @noErrors: 2554 -// @noErrors: 2304 -import type { BridgeableToken } from '@coinbase/onchainkit/appchain'; - -const customBridgeableTokens: BridgeableToken[] = [ - { - name: 'ETH', - address: '', - symbol: 'ETH', - decimals: 18, - image: - 'https://wallet-api-production.s3.amazonaws.com/uploads/tokens/eth_288.png', - chainId: 84532, - }, - { - address: '0x...', - remoteToken: '0x...', - name: 'Sandbox Token', - symbol: 'SBOX', - decimals: 18, - chainId: 8453200058, - image: 'https://img.cryptorank.io/coins/blocklords1670492311588.png', - }, -]; -// ---cut-before--- -import { AppchainBridge } from '@coinbase/onchainkit/appchain'; -import { baseSepolia } from 'viem/chains'; - - -``` - -### Chains with custom gas tokens - -For chains that use custom gas tokens, simply set the `isCustomGasToken` field to `true` on the custom gas token for your bridgeable token. - -```tsx -// @noErrors: 2554 -import type { BridgeableToken } from '@coinbase/onchainkit/appchain'; - -const customGasToken: BridgeableToken[] = [ - { - address: '0x...', - remoteToken: '0x...', - name: 'Appchain Token', - symbol: 'ATKN', - decimals: 18, - chainId: 8453200000, - image: 'https://some-icon.com/icon.png', - isCustomGasToken: true, // [!code ++] - }, -]; -``` - -### Fetching price for custom tokens - -By default, we provide a price feed for ETH and USDC. - -To fetch the price of custom ERC-20 tokens, you can override the `handleFetchPrice` function in the `AppchainBridge` component. This callback is run everytime the user changes the input amount. - -The function must match the following signature: - -```ts -(amount: string, token: Token) => Promise; -``` - -```tsx -// @noErrors: 2554 -// @noErrors: 2362 2363 2304 -import { AppchainBridge } from '@coinbase/onchainkit/appchain'; -import { baseSepolia } from 'viem/chains'; - -const handleFetchPrice = async (amount: string, token: Token) => { - // Example of fetching price - const price = await fetch(`https://api.example.com/price/${token.address}`); - return price * amount; -}; - - -``` - -## Components - -The `AppchainBridge` component includes the following subcomponents: - -- `` - A fully built bridge component that handles deposits and withdrawals. Also includes a `children` prop to render custom components. -- `` - A headless provider that provides the bridge context to child components. -- `` - A component that handles the amount input for bridging tokens. -- `` - A component that displays network information and allows network selection. -- `` - A component that triggers bridge transactions. -- `` - A component that handles the withdrawal interface. -- `` - A button component for toggling between networks. -- `` - A component that displays transaction success states. -- `` - A component that handles resuming interrupted bridge transactions. - -## Props - -- [`Appchain`](/onchainkit/appchain/types#appchain) -- [`AppchainBridgeReact`](/onchainkit/appchain/types#appchainbridgereact) -- [`AppchainBridgeProviderReact`](/onchainkit/appchain/types#appchainbridgeproviderreact) -- [`AppchainBridgeContextType`](/onchainkit/appchain/types#appchainbridgecontexttype) -- [`BridgeableToken`](/onchainkit/appchain/types#bridgeabletoken) -- [`ChainWithIcon`](/onchainkit/appchain/types#chainwithicon) -- [`AppchainConfig`](/onchainkit/appchain/types#appchainconfig) -- [`AppchainBridgeSuccessReact`](/onchainkit/appchain/types#appchainbridgesuccessreact) -- [`BridgeParams`](/onchainkit/appchain/types#bridgeparams) -- [`ChainConfigParams`](/onchainkit/appchain/types#chainconfigparams) -- [`UseDepositParams`](/onchainkit/appchain/types#usedepositparams) -- [`UseWithdrawParams`](/onchainkit/appchain/types#usewithdrawparams) -- [`UseDepositButtonParams`](/onchainkit/appchain/types#usedepositbuttonparams) -- [`UseWithdrawButtonParams`](/onchainkit/appchain/types#usewithdrawbuttonparams) - diff --git a/docs/onchainkit/appchain/types.mdx b/docs/onchainkit/appchain/types.mdx deleted file mode 100644 index 17045034..00000000 --- a/docs/onchainkit/appchain/types.mdx +++ /dev/null @@ -1,200 +0,0 @@ ---- -title: Appchain components & utilities Types -sidebarTitle: Appchain -description: Glossary of Types in Appchain components & utilities. ---- - -## `Appchain` - -```ts -export type Appchain = { - /** The chain to bridge to. */ - chain: Chain; - /** Optional icon to display for the appchain. */ - icon?: React.ReactNode; -}; -``` - -## `AppchainBridgeReact` - -```ts -export type AppchainBridgeReact = { - /** The source chain to bridge from. This should be Base or Base Sepolia. */ - chain: Chain; - /** The appchain to bridge to. */ - appchain: Appchain; - /** Optional children to render within the component. */ - children?: React.ReactNode; - /** Optional className override for the component. */ - className?: string; - /** Optional title for the component. */ - title?: string; - /** Optional array of bridgeable tokens. */ - bridgeableTokens?: BridgeableToken[]; - /** Optional function to implement fetching the price of the token. */ - handleFetchPrice?: (amount: string, token: Token) => Promise; -}; -``` - -## `AppchainBridgeProviderReact` - -```ts -export type AppchainBridgeProviderReact = { - children: ReactNode; - chain: Chain; - appchain: Appchain; - bridgeableTokens?: BridgeableToken[]; - handleFetchPrice?: (amount: string, token: Token) => Promise; -}; -``` - -## `AppchainBridgeContextType` - -```ts -export type AppchainBridgeContextType = { - // Configuration - config: AppchainConfig; - from: ChainWithIcon; - to: ChainWithIcon; - bridgeParams: BridgeParams; - bridgeableTokens: BridgeableToken[]; - - // UI State - isPriceLoading: boolean; - isAddressModalOpen: boolean; - isWithdrawModalOpen: boolean; - isSuccessModalOpen: boolean; - isResumeTransactionModalOpen: boolean; - balance: string; - depositStatus: string; - withdrawStatus: string; - direction: string; - depositTransactionHash?: Hex; - finalizedWithdrawalTxHash?: Hex; - resumeWithdrawalTxHash?: Hex; - - // Handler Functions - handleToggle: () => void; - handleAmountChange: (params: { amount: string; token: Token }) => void; - handleAddressSelect: (address: Address) => void; - handleResumeTransaction: (txHash: Hex) => void; - handleDeposit: () => void; - handleWithdraw: () => void; - handleOpenExplorer: () => void; - handleResetState: () => void; - waitForWithdrawal: (txHash?: Hex) => Promise; - proveAndFinalizeWithdrawal: () => Promise; - setIsAddressModalOpen: (open: boolean) => void; - setIsWithdrawModalOpen: (open: boolean) => void; - setIsSuccessModalOpen: (open: boolean) => void; - resetDepositStatus: () => void; - setResumeWithdrawalTxHash: (txHash: Hex) => void; - setIsResumeTransactionModalOpen: (open: boolean) => void; -}; -``` - -## `BridgeableToken` - -```ts -export type BridgeableToken = Token & { - /** The address of the remote token on the appchain. */ - remoteToken?: Address; - /** Optional boolean to indicate if the chain uses a custom gas token */ - isCustomGasToken?: boolean; -}; -``` - -## `ChainWithIcon` - -```ts -export type ChainWithIcon = Chain & { - icon: React.ReactNode; -}; -``` - -## `AppchainConfig` - -```ts -export type AppchainConfig = { - chainId: number; - /** The OP Bedrock contract addresses for an appchain. These are on Base and retrieved from DeployContract. */ - contracts: { - l2OutputOracle: Address; - systemConfig: Address; - optimismPortal: Address; - l1CrossDomainMessenger: Address; - l1StandardBridge: Address; - l1ERC721Bridge: Address; - optimismMintableERC20Factory: Address; - }; -}; -``` - -## `AppchainBridgeSuccessReact` - -```ts -export type AppchainBridgeSuccessReact = { - title?: string; - primaryButtonLabel?: string; - secondaryButtonLabel?: string; -}; -``` - -## `BridgeParams` - -```ts -export type BridgeParams = { - amount: string; - amountUSD: string; - token: BridgeableToken; - recipient?: Address; -}; -``` - -## `ChainConfigParams` - -```ts -export type ChainConfigParams = { - config: AppchainConfig; - chain: Chain; -}; -``` - -## `UseDepositParams` - -```ts -export type UseDepositParams = { - config: AppchainConfig; - from: Chain; - bridgeParams: BridgeParams; -}; -``` - -## `UseWithdrawParams` - -```ts -export type UseWithdrawParams = { - config: AppchainConfig; - chain: Chain; - bridgeParams: BridgeParams; -}; -``` - -## `UseDepositButtonParams` - -```ts -export type UseDepositButtonParams = { - depositStatus: string; - withdrawStatus: string; - bridgeParams: BridgeParams; -}; -``` - -## `UseWithdrawButtonParams` - -```ts -export type UseWithdrawButtonParams = { - withdrawStatus: string; -}; -``` - diff --git a/docs/onchainkit/guides/testing-with-onchaintestkit.mdx b/docs/onchainkit/guides/testing-with-onchaintestkit.mdx deleted file mode 100644 index cb38d74d..00000000 --- a/docs/onchainkit/guides/testing-with-onchaintestkit.mdx +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: "Testing with OnchainTestKit" -description: "Learn how to write end-to-end tests for your OnchainKit applications" ---- - -Building reliable onchain applications requires comprehensive testing. OnchainTestKit is a type-safe framework designed specifically for testing blockchain applications built with OnchainKit, providing seamless integration with Playwright for browser automation and wallet interactions. - -## What is OnchainTestKit? - -[OnchainTestKit](https://github.com/coinbase/onchaintestkit) is an end-to-end testing framework that automates: - -- Wallet connections (MetaMask, Coinbase Wallet) -- Transaction flows and approvals -- Network switching -- Smart contract interactions -- Token swaps and minting -- Gas sponsorship testing - -## Why Use OnchainTestKit? - -Testing blockchain applications manually is time-consuming and error-prone. OnchainTestKit provides: - -- **Type Safety**: Full TypeScript support with compile-time error checking -- **Wallet Automation**: Programmatic control over wallet interactions -- **Parallel Testing**: Run multiple tests simultaneously with isolated environments -- **Network Management**: Built-in support for local Anvil nodes and fork testing -- **OnchainKit Integration**: Designed to work seamlessly with OnchainKit components - - -## Want to learn more? - -Check out [the full documentation](https://onchaintestkit.xyz/) for detailed guides on installation, configuration, and writing tests! - -## Architecture - - -```mermaid -flowchart TD - subgraph "Test Runner" - A[Playwright Test] - B[Onchain Test Kit] - end - subgraph Blockchain - C["LocalNodeManager
(Anvil Node)"] - D["Wallet Extension
(MetaMask/Coinbase/Etc...)"] - end - A --> B - B -- manages --> D - B -- manages --> C - D -- interacts --> C - B -- configures --> C - B -- automates --> D -``` - - - -```mermaid -flowchart TD - subgraph Test Environment - A[Playwright Test] - B[LocalNodeManager] - C[SmartContractManager] - D[ProxyDeployer] - E[Anvil Node] - end - A -->|uses| B - A -->|uses| C - C -->|uses| D - B -->|manages| E - C -->|deploys contracts| E - D -->|deploys proxy| E -``` - - -## Key Features - - - - Automate browser-based wallet and dApp interactions with the power of Playwright's testing framework. - - - - Built-in support for MetaMask and Coinbase Wallet, with an extensible architecture for adding more wallets. - - - - Automate connect, transaction, signature, approval, and network switching flows with simple APIs. - - - - Use local Anvil nodes or remote RPC endpoints, with dynamic port allocation for parallel test execution. - - - - Full TypeScript support for all configuration and test APIs, catching errors at compile time. - - - - Builder pattern for intuitive wallet and node setup, making configuration readable and maintainable. - - - -## Next Steps - -- Install OnchainTestKit: `yarn add -D @coinbase/onchaintestkit` -- Check out the [OnchainTestKit repository](https://github.com/coinbase/onchaintestkit) -- See [example tests](https://github.com/coinbase/onchaintestkit/tree/master/example/frontend/e2e) -- Read the [Cookbook examples](/cookbook/testing-onchain-apps) for more test scenarios -- Access the [full docs here](https://onchaintestkit.xyz/) \ No newline at end of file diff --git a/docs/style.css b/docs/style.css index f86d1ebb..b133483c 100644 --- a/docs/style.css +++ b/docs/style.css @@ -11,7 +11,7 @@ } .assistant-entry { - background-color: #3c8aff !important; + background-color: #0000ff !important; color: #ffffff !important; border: 1px solid rgba(0, 0, 0, 0.15) !important; box-shadow: none !important; @@ -29,7 +29,7 @@ } .dark .assistant-entry { - background-color: #3c8aff !important; + background-color: #0000ff !important; border-color: rgba(0, 0, 0, 0.55) !important; } @@ -56,27 +56,82 @@ padding-bottom: 0 !important; } -.navbar-link { - background-color: rgba(156, 163, 175, 0.1); - padding: 6px 12px; - border-radius: 9999px; - transition: background-color 0.2s ease; +.home_header h1 { + margin-bottom: 24px; } -.navbar-link:hover { - background-color: rgba(156, 163, 175, 0.2); +.use-cases { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 2rem; + padding-bottom: 2rem; } -.dark .navbar-link { - background-color: rgba(75, 85, 99, 0.1); /* Reduced opacity for dark mode */ +.use-cases-links a { + font-weight: normal; + display: block; + width: fit-content; + margin-bottom: 0.25rem; + color: #0000ff; + text-decoration: none; + border-bottom: none; } -.dark .navbar-link:hover { - background-color: rgba(75, 85, 99, 0.2); /* Increased opacity on hover for better visibility */ +.use-cases-links a:hover { + color: #000000; } -.home_header h1 { - margin-bottom: 24px; +.dark .use-cases-links a { + color: #ffffff; +} + +.dark .use-cases-links a:hover { + color: #0000ff; +} + +.resources-section { + padding-top: 2rem; +} + +.resources-section h3 { + margin-bottom: 0; +} + +.resources-row { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 2rem; +} + +.resources-row h4 { + margin-top: 0.75rem; + margin-bottom: 0.5rem; + opacity: 0.7; +} + +.resource-link { + display: block; + margin-bottom: 0.25rem; +} + +.resource-link a { + font-weight: normal; + color: #0000ff; + margin-left: 0.25rem; + text-decoration: none; + border-bottom: none; +} + +.resource-link a:hover { + color: #000000; +} + +.dark .resource-link a { + color: #ffffff; +} + +.dark .resource-link a:hover { + color: #0000ff; } .home_header div p {