diff --git a/docs/docs.json b/docs/docs.json index c14fa0d2..b45de55a 100644 --- a/docs/docs.json +++ b/docs/docs.json @@ -486,33 +486,6 @@ "mini-apps/troubleshooting/base-app-compatibility" ] }, - { - "group": "Technical Reference", - "pages": [ - { - "group": "MiniKit", - "pages": [ - "mini-apps/technical-reference/minikit/overview", - "mini-apps/technical-reference/minikit/provider-and-initialization", - { - "group": "Hooks", - "pages": [ - "mini-apps/technical-reference/minikit/hooks/useMiniKit", - "mini-apps/technical-reference/minikit/hooks/useOpenUrl", - "mini-apps/technical-reference/minikit/hooks/useClose", - "mini-apps/technical-reference/minikit/hooks/usePrimaryButton", - "mini-apps/technical-reference/minikit/hooks/useViewProfile", - "mini-apps/technical-reference/minikit/hooks/useComposeCast", - "mini-apps/technical-reference/minikit/hooks/useViewCast", - "mini-apps/technical-reference/minikit/hooks/useAuthenticate", - "mini-apps/technical-reference/minikit/hooks/useAddFrame", - "mini-apps/technical-reference/minikit/hooks/useNotification" - ] - } - ] - } - ] - }, { "group": "Resources", "pages": [ @@ -585,6 +558,28 @@ "group": "Mint", "pages": ["onchainkit/latest/components/mint/nft-card", "onchainkit/latest/components/mint/nft-mint-card"] }, + { + "group": "MiniKit", + "pages": [ + "onchainkit/latest/components/minikit/overview", + "onchainkit/latest/components/minikit/provider-and-initialization", + { + "group": "Hooks", + "pages": [ + "onchainkit/latest/components/minikit/hooks/useMiniKit", + "onchainkit/latest/components/minikit/hooks/useOpenUrl", + "onchainkit/latest/components/minikit/hooks/useClose", + "onchainkit/latest/components/minikit/hooks/usePrimaryButton", + "onchainkit/latest/components/minikit/hooks/useViewProfile", + "onchainkit/latest/components/minikit/hooks/useComposeCast", + "onchainkit/latest/components/minikit/hooks/useViewCast", + "onchainkit/latest/components/minikit/hooks/useAuthenticate", + "onchainkit/latest/components/minikit/hooks/useAddFrame", + "onchainkit/latest/components/minikit/hooks/useNotification" + ] + } + ] + }, { "group": "Signature", "pages": ["onchainkit/latest/components/signature/signature"] @@ -622,14 +617,6 @@ { "group": "Connected", "pages": ["onchainkit/latest/components/connected/connected"] - }, - { - "group": "MiniKit", - "pages": [ - "onchainkit/latest/components/minikit/autoconnect", - "onchainkit/latest/components/minikit/if-in-miniapp", - "onchainkit/latest/components/minikit/safe-area" - ] } ] }, @@ -2664,11 +2651,11 @@ }, { "source": "/base-app/miniapps/overview", - "destination": "/mini-apps/technical-reference/minikit/overview" + "destination": "/onchainkit/latest/components/minikit/overview" }, { "source": "/base-app/build-with-minikit/overview", - "destination": "/mini-apps/technical-reference/minikit/overview" + "destination": "/onchainkit/latest/components/minikit/overview" }, { "source": "/base-app/miniapps/existing-app-integration", @@ -2781,6 +2768,54 @@ { "source": "/mini-apps/quickstart/launch-checklist", "destination": "/mini-apps/quickstart/build-checklist" + }, + { + "source": "/mini-apps/technical-reference/minikit/overview", + "destination": "/onchainkit/latest/components/minikit/overview" + }, + { + "source": "/mini-apps/technical-reference/minikit/provider-and-initialization", + "destination": "/onchainkit/latest/components/minikit/provider-and-initialization" + }, + { + "source": "/mini-apps/technical-reference/minikit/hooks/useMiniKit", + "destination": "/onchainkit/latest/components/minikit/hooks/useMiniKit" + }, + { + "source": "/mini-apps/technical-reference/minikit/hooks/useOpenUrl", + "destination": "/onchainkit/latest/components/minikit/hooks/useOpenUrl" + }, + { + "source": "/mini-apps/technical-reference/minikit/hooks/useClose", + "destination": "/onchainkit/latest/components/minikit/hooks/useClose" + }, + { + "source": "/mini-apps/technical-reference/minikit/hooks/usePrimaryButton", + "destination": "/onchainkit/latest/components/minikit/hooks/usePrimaryButton" + }, + { + "source": "/mini-apps/technical-reference/minikit/hooks/useViewProfile", + "destination": "/onchainkit/latest/components/minikit/hooks/useViewProfile" + }, + { + "source": "/mini-apps/technical-reference/minikit/hooks/useComposeCast", + "destination": "/onchainkit/latest/components/minikit/hooks/useComposeCast" + }, + { + "source": "/mini-apps/technical-reference/minikit/hooks/useViewCast", + "destination": "/onchainkit/latest/components/minikit/hooks/useViewCast" + }, + { + "source": "/mini-apps/technical-reference/minikit/hooks/useAuthenticate", + "destination": "/onchainkit/latest/components/minikit/hooks/useAuthenticate" + }, + { + "source": "/mini-apps/technical-reference/minikit/hooks/useAddFrame", + "destination": "/onchainkit/latest/components/minikit/hooks/useAddFrame" + }, + { + "source": "/mini-apps/technical-reference/minikit/hooks/useNotification", + "destination": "/onchainkit/latest/components/minikit/hooks/useNotification" } ], "integrations": { diff --git a/docs/mini-apps/core-concepts/authentication.mdx b/docs/mini-apps/core-concepts/authentication.mdx index 6857d3cc..cd56072d 100644 --- a/docs/mini-apps/core-concepts/authentication.mdx +++ b/docs/mini-apps/core-concepts/authentication.mdx @@ -149,7 +149,7 @@ Your mini app's domain - + use Minikit's useAuthenticate hook to authenticate users. diff --git a/docs/mini-apps/core-concepts/navigation.mdx b/docs/mini-apps/core-concepts/navigation.mdx index 895d2b02..452965d5 100644 --- a/docs/mini-apps/core-concepts/navigation.mdx +++ b/docs/mini-apps/core-concepts/navigation.mdx @@ -101,7 +101,7 @@ composeCast({ - Use [`useOpenUrl()`](/mini-apps/technical-reference/minikit/hooks/useOpenUrl) to safely open external websites in the client's in-app browser: + Use [`useOpenUrl()`](/onchainkit/latest/components/minikit/hooks/useOpenUrl) to safely open external websites in the client's in-app browser: ```tsx components/ExternalLinks.tsx highlight={8 -10} import { useOpenUrl } from '@coinbase/onchainkit/minikit'; @@ -153,7 +153,7 @@ composeCast({ ``` - Use [`useComposeCast()`](/mini-apps/technical-reference/minikit/hooks/useComposeCast) to open the native composer with prefilled content: + Use [`useComposeCast()`](/onchainkit/latest/components/minikit/hooks/useComposeCast) to open the native composer with prefilled content: ```tsx components/ShareCast.tsx highlight={8-13} import { useComposeCast } from '@coinbase/onchainkit/minikit'; @@ -198,7 +198,7 @@ composeCast({ - Use [`useViewCast()`](/mini-apps/technical-reference/minikit/hooks/useViewCast) to open a specific cast by its hash: + Use [`useViewCast()`](/onchainkit/latest/components/minikit/hooks/useViewCast) to open a specific cast by its hash: ```tsx components/ViewCastButton.tsx highlight={4,7-9} import { useViewCast } from '@coinbase/onchainkit/minikit'; diff --git a/docs/mini-apps/growth/optimize-onboarding.mdx b/docs/mini-apps/growth/optimize-onboarding.mdx index b3b03a30..8fa43b69 100644 --- a/docs/mini-apps/growth/optimize-onboarding.mdx +++ b/docs/mini-apps/growth/optimize-onboarding.mdx @@ -20,7 +20,7 @@ Deliver value instantly and avoid blocking actions. - Show immediate value (demo content, sample state, or read-only mode) -- Personalize instantly with [`context`](/mini-apps/technical-reference/minikit/provider-and-initialization) of the user's profile to instantly personalize +- Personalize instantly with [`context`](/onchainkit/latest/components/minikit/provider-and-initialization) of the user's profile to instantly personalize - Display one clear CTA that leads to a meaningful action (e.g. "Post a message", "Buy a token", "Follow a user") @@ -108,8 +108,8 @@ Learn how to implement them with [SDK actions](/mini-apps/features/links). - - + + diff --git a/docs/mini-apps/llms-full.txt b/docs/mini-apps/llms-full.txt index 07ac91d2..4026123e 100644 --- a/docs/mini-apps/llms-full.txt +++ b/docs/mini-apps/llms-full.txt @@ -59,9 +59,9 @@ export function Providers(props: { children: React.ReactNode }) { - [Base App Compatibility](https://docs.base.org/mini-apps/troubleshooting/base-app-compatibility.md) — Client behavior ### Technical Reference -- [MiniKit Overview](https://docs.base.org/mini-apps/technical-reference/minikit/overview.md) — Overview -- [Provider & Initialization](https://docs.base.org/mini-apps/technical-reference/minikit/provider-and-initialization.md) — Provider -- [Hooks](https://docs.base.org/mini-apps/technical-reference/minikit/hooks/useMiniKit.md) — Hooks +- [MiniKit Overview](https://docs.base.org/onchainkit/latest/components/minikit/overview.md) — Overview +- [Provider & Initialization](https://docs.base.org/onchainkit/latest/components/minikit/provider-and-initialization.md) — Provider +- [Hooks](https://docs.base.org/onchainkit/latest/components/minikit/hooks/useMiniKit.md) — Hooks ## Quickstart (excerpts) @@ -128,7 +128,7 @@ Modes summary (from Authentication): Hook reference: - useAuthenticate — Returns verified user from SIWF or wallet auth. Use alongside `useMiniKit` context. - - Source: `https://docs.base.org/mini-apps/technical-reference/minikit/hooks/useAuthenticate.md` + - Source: `https://docs.base.org/onchainkit/latest/components/minikit/hooks/useAuthenticate.md` Example (hook usage): @@ -171,9 +171,9 @@ Prompt timing guidelines: ## API and Schemas (pruned) - MiniKit Provider and initialization props - - Source: `https://docs.base.org/mini-apps/technical-reference/minikit/provider-and-initialization.md` + - Source: `https://docs.base.org/onchainkit/latest/components/minikit/provider-and-initialization.md` - `useMiniKit` hook: access frame context, user, and client capabilities - - Source: `https://docs.base.org/mini-apps/technical-reference/minikit/hooks/useMiniKit.md` + - Source: `https://docs.base.org/onchainkit/latest/components/minikit/hooks/useMiniKit.md` Example manifest fields (conceptual): @@ -221,7 +221,7 @@ Example: Wire providers for OnchainKit + MiniKit Sources: - `https://docs.base.org/mini-apps/design-ux/onchainkit.md` -- `https://docs.base.org/mini-apps/technical-reference/minikit/provider-and-initialization.md` +- `https://docs.base.org/onchainkit/latest/components/minikit/provider-and-initialization.md` ```tsx import { OnchainKitProvider } from '@coinbase/onchainkit' @@ -238,7 +238,7 @@ export function Providers(props: { children: React.ReactNode }) { Example: Use `useMiniKit` to access client context -Source: `https://docs.base.org/mini-apps/technical-reference/minikit/hooks/useMiniKit.md` +Source: `https://docs.base.org/onchainkit/latest/components/minikit/hooks/useMiniKit.md` ```tsx import { useMiniKit } from '@coinbase/minikit' diff --git a/docs/mini-apps/llms.txt b/docs/mini-apps/llms.txt index 852e4b4d..1de2d10c 100644 --- a/docs/mini-apps/llms.txt +++ b/docs/mini-apps/llms.txt @@ -29,8 +29,8 @@ - [Base App Compatibility](https://docs.base.org/mini-apps/troubleshooting/base-app-compatibility.md) — Base App client-specific behaviors for issues where an app works in the Farcaster client but not Base App ## Technical Reference -- [MiniKit Overview](https://docs.base.org/mini-apps/technical-reference/minikit/overview.md) — Architecture, provider, CLI, and hooks -- [Hooks: useMiniKit](https://docs.base.org/mini-apps/technical-reference/minikit/hooks/useMiniKit.md) — Access frame context and client features +- [MiniKit Overview](https://docs.base.org/onchainkit/latest/components/minikit/overview.md) — Architecture, provider, CLI, and hooks +- [Hooks: useMiniKit](https://docs.base.org/onchainkit/latest/components/minikit/hooks/useMiniKit.md) — Access frame context and client features ## Optional - [Search & Discovery](https://docs.base.org/mini-apps/features/search-and-discovery.md) — Indexing and ranking signals in Base App diff --git a/docs/mini-apps/technical-guides/sharing-and-social-graph.mdx b/docs/mini-apps/technical-guides/sharing-and-social-graph.mdx index bea884e6..f24ea535 100644 --- a/docs/mini-apps/technical-guides/sharing-and-social-graph.mdx +++ b/docs/mini-apps/technical-guides/sharing-and-social-graph.mdx @@ -42,8 +42,8 @@ Strategic sharing moments include: post‑achievement, post‑mint, after beatin Link users into casts and profiles directly from your app via MiniKit hooks. - - + + ## Best Practices diff --git a/docs/onchainkit/latest/components/minikit/autoconnect.mdx b/docs/onchainkit/latest/components/minikit/autoconnect.mdx deleted file mode 100644 index 54cb7f00..00000000 --- a/docs/onchainkit/latest/components/minikit/autoconnect.mdx +++ /dev/null @@ -1,233 +0,0 @@ ---- -title: "AutoConnect" ---- - -The `AutoConnect` component automatically connects to the Farcaster connector when the user is inside a Farcaster Mini App. It provides a seamless wallet connection experience without requiring manual wallet selection. - -## Usage - -### Basic setup - -Wrap your app with `AutoConnect` to enable automatic wallet connection in Mini Apps: - -```tsx -import { AutoConnect } from '@coinbase/onchainkit/minikit'; - -export default function App() { - return ( - -
-

My Mini App

-

Wallet will connect automatically when in Farcaster!

-
-
- ); -} -``` - -### With manual control - -You can disable auto-connection when needed: - -```tsx -import { AutoConnect } from '@coinbase/onchainkit/minikit'; -import { useState } from 'react'; - -export default function App() { - const [autoConnectEnabled, setAutoConnectEnabled] = useState(true); - - return ( - -
-
- setAutoConnectEnabled(e.target.checked)} - /> - -
- -

Mini App with Auto-Connect Control

-
-
- ); -} -``` - -## Advanced Usage - -### Combining with connection status - -```tsx -import { AutoConnect } from '@coinbase/onchainkit/minikit'; -import { useAccount } from 'wagmi'; - -function ConnectionStatus() { - const { address, isConnected, isConnecting } = useAccount(); - - if (isConnecting) { - return ( -
-
- Connecting wallet... -
- ); - } - - if (isConnected) { - return ( -
- ✅ Connected: {address?.slice(0, 6)}...{address?.slice(-4)} -
- ); - } - - return
Not connected
; -} - -export default function MiniApp() { - return ( - -
-

My Mini App

- - -
-

When you open this in Farcaster, the wallet connects automatically!

-
-
-
- ); -} -``` - -### Layout integration - -```tsx -import { AutoConnect } from '@coinbase/onchainkit/minikit'; -import { IfInMiniApp, SafeArea } from '@coinbase/onchainkit/minikit'; -import { ConnectWallet } from '@coinbase/onchainkit/wallet'; -import { useAccount } from 'wagmi'; - -function WalletSection() { - const { isConnected } = useAccount(); - - return ( - - -
- } - > - {/* In Mini App, connection is automatic */} - {isConnected ? ( -
- 🎉 Auto-connected in Mini App! -
- ) : ( -
- 🔄 Auto-connecting... -
- )} - - ); -} - -export default function App() { - return ( - - -
-

Multi-Platform App

- - -
-

Your app content here...

-
-
-
-
- ); -} -``` - -### Handling connection errors - -```tsx -import { AutoConnect } from '@coinbase/onchainkit/minikit'; -import { useAccount } from 'wagmi'; -import { useEffect, useState } from 'react'; - -function ConnectionHandler() { - const { isConnected, isConnecting } = useAccount(); - const [connectionTimeout, setConnectionTimeout] = useState(false); - - useEffect(() => { - if (isConnecting) { - // Set a timeout to show help text if connection takes too long - const timer = setTimeout(() => { - setConnectionTimeout(true); - }, 5000); - - return () => clearTimeout(timer); - } else { - setConnectionTimeout(false); - } - }, [isConnecting]); - - if (connectionTimeout) { - return ( -
-

Connection taking longer than expected

-

- Make sure you're using a compatible Farcaster client. -

-
- ); - } - - return null; -} - -export default function MiniApp() { - return ( - -
-

Robust Mini App

- - {/* Rest of your app */} -
-
- ); -} -``` - -## Requirements - -- **Farcaster Mini App environment**: Must be running inside a Farcaster client -- **Compatible connector**: Requires a Farcaster connector (`farcasterFrame` or `farcasterMiniApp` type) -- **Wagmi setup**: Needs proper Wagmi configuration with Farcaster connector - -## Behavior - -- **Inside Mini App with Farcaster connector**: Automatically attempts connection once -- **Outside Mini App**: No connection attempt, renders children normally -- **Already connected**: Skips connection attempt -- **Connection in progress**: Skips additional connection attempts -- **Disabled**: When `enabled={false}`, behaves as a passthrough component - -## Props - -[`AutoConnectProps`](#autoconnectprops) - -```ts -type AutoConnectProps = { - /** React children to render */ - children?: ReactNode; - /** Whether to enable auto-connection (default: true) */ - enabled?: boolean; -}; -``` \ No newline at end of file diff --git a/docs/mini-apps/technical-reference/minikit/hooks/useAddFrame.mdx b/docs/onchainkit/latest/components/minikit/hooks/useAddFrame.mdx similarity index 100% rename from docs/mini-apps/technical-reference/minikit/hooks/useAddFrame.mdx rename to docs/onchainkit/latest/components/minikit/hooks/useAddFrame.mdx diff --git a/docs/mini-apps/technical-reference/minikit/hooks/useAuthenticate.mdx b/docs/onchainkit/latest/components/minikit/hooks/useAuthenticate.mdx similarity index 100% rename from docs/mini-apps/technical-reference/minikit/hooks/useAuthenticate.mdx rename to docs/onchainkit/latest/components/minikit/hooks/useAuthenticate.mdx diff --git a/docs/mini-apps/technical-reference/minikit/hooks/useClose.mdx b/docs/onchainkit/latest/components/minikit/hooks/useClose.mdx similarity index 100% rename from docs/mini-apps/technical-reference/minikit/hooks/useClose.mdx rename to docs/onchainkit/latest/components/minikit/hooks/useClose.mdx diff --git a/docs/mini-apps/technical-reference/minikit/hooks/useComposeCast.mdx b/docs/onchainkit/latest/components/minikit/hooks/useComposeCast.mdx similarity index 100% rename from docs/mini-apps/technical-reference/minikit/hooks/useComposeCast.mdx rename to docs/onchainkit/latest/components/minikit/hooks/useComposeCast.mdx diff --git a/docs/mini-apps/technical-reference/minikit/hooks/useMiniKit.mdx b/docs/onchainkit/latest/components/minikit/hooks/useMiniKit.mdx similarity index 100% rename from docs/mini-apps/technical-reference/minikit/hooks/useMiniKit.mdx rename to docs/onchainkit/latest/components/minikit/hooks/useMiniKit.mdx diff --git a/docs/mini-apps/technical-reference/minikit/hooks/useNotification.mdx b/docs/onchainkit/latest/components/minikit/hooks/useNotification.mdx similarity index 100% rename from docs/mini-apps/technical-reference/minikit/hooks/useNotification.mdx rename to docs/onchainkit/latest/components/minikit/hooks/useNotification.mdx diff --git a/docs/mini-apps/technical-reference/minikit/hooks/useOpenUrl.mdx b/docs/onchainkit/latest/components/minikit/hooks/useOpenUrl.mdx similarity index 100% rename from docs/mini-apps/technical-reference/minikit/hooks/useOpenUrl.mdx rename to docs/onchainkit/latest/components/minikit/hooks/useOpenUrl.mdx diff --git a/docs/mini-apps/technical-reference/minikit/hooks/usePrimaryButton.mdx b/docs/onchainkit/latest/components/minikit/hooks/usePrimaryButton.mdx similarity index 100% rename from docs/mini-apps/technical-reference/minikit/hooks/usePrimaryButton.mdx rename to docs/onchainkit/latest/components/minikit/hooks/usePrimaryButton.mdx diff --git a/docs/mini-apps/technical-reference/minikit/hooks/useViewCast.mdx b/docs/onchainkit/latest/components/minikit/hooks/useViewCast.mdx similarity index 100% rename from docs/mini-apps/technical-reference/minikit/hooks/useViewCast.mdx rename to docs/onchainkit/latest/components/minikit/hooks/useViewCast.mdx diff --git a/docs/mini-apps/technical-reference/minikit/hooks/useViewProfile.mdx b/docs/onchainkit/latest/components/minikit/hooks/useViewProfile.mdx similarity index 100% rename from docs/mini-apps/technical-reference/minikit/hooks/useViewProfile.mdx rename to docs/onchainkit/latest/components/minikit/hooks/useViewProfile.mdx diff --git a/docs/onchainkit/latest/components/minikit/if-in-miniapp.mdx b/docs/onchainkit/latest/components/minikit/if-in-miniapp.mdx deleted file mode 100644 index 6c026eeb..00000000 --- a/docs/onchainkit/latest/components/minikit/if-in-miniapp.mdx +++ /dev/null @@ -1,201 +0,0 @@ ---- -title: "IfInMiniApp" ---- - -The `IfInMiniApp` component provides conditional rendering based on whether the app is running inside a Farcaster Mini App. It renders children only when inside a Mini App, and optionally shows a fallback when outside. - -## Usage - -### Basic conditional rendering - -Show different content based on Mini App context: - -```tsx -import { IfInMiniApp } from '@coinbase/onchainkit/minikit'; - -export default function MyApp() { - return ( -
-

My App

- - -
-

🎉 Welcome to the Mini App!

-

You're experiencing this app inside Farcaster.

-
-
- -
-

This content shows everywhere.

-
-
- ); -} -``` - -### With fallback content - -Show alternative content when not in a Mini App: - -```tsx -import { IfInMiniApp } from '@coinbase/onchainkit/minikit'; - -export default function ResponsiveApp() { - return ( -
- -

👋 Web Version

-

Visit this on Farcaster for the full Mini App experience!

- - Get Farcaster - -
- } - > -
-

🚀 Mini App Experience

-

Enhanced features available in Farcaster!

-
- - - ); -} -``` - -## Advanced Usage - -### Mini App-specific navigation - -```tsx -import { IfInMiniApp } from '@coinbase/onchainkit/minikit'; -import { useOpenUrl } from '@coinbase/onchainkit/minikit'; - -function NavigationButtons() { - const openUrl = useOpenUrl(); - - return ( -
- - View Profile - - } - > - - -
- ); -} -``` - -### Feature-specific UI - -```tsx -import { IfInMiniApp } from '@coinbase/onchainkit/minikit'; -import { useAddFrame } from '@coinbase/onchainkit/minikit'; - -function ShareButtons() { - const addFrame = useAddFrame(); - - return ( -
- - - - - -
- ); -} -``` - -### Layout adaptation - -```tsx -import { IfInMiniApp } from '@coinbase/onchainkit/minikit'; -import { SafeArea } from '@coinbase/onchainkit/minikit'; - -export default function AdaptiveLayout({ children }) { - return ( - -
- -
-
{children}
- - } - > - {/* Mini App layout with safe area */} - -
-
-

Mini App

-
-
- {children} -
-
-
-
- ); -} -``` - -## Requirements - -The `IfInMiniApp` component requires: - -1. **MiniKit enabled** in `OnchainKitProvider`: - ```tsx - - - - ``` - -2. **Running inside a Farcaster Mini App context** - -## Behavior - -- **Inside Mini App + MiniKit enabled**: Renders `children` -- **Outside Mini App OR MiniKit disabled**: Renders `fallback` or `null` -- **No fallback provided**: Renders `null` when conditions aren't met - -## Props - -[`IfInMiniAppProps`](#ifinminiappprops) - -```ts -type IfInMiniAppProps = { - /** React children to render when inside a Mini App */ - children?: ReactNode; - /** Content to render when not inside a Mini App (optional) */ - fallback?: ReactNode; -}; -``` \ No newline at end of file diff --git a/docs/mini-apps/technical-reference/minikit/overview.mdx b/docs/onchainkit/latest/components/minikit/overview.mdx similarity index 92% rename from docs/mini-apps/technical-reference/minikit/overview.mdx rename to docs/onchainkit/latest/components/minikit/overview.mdx index 2ccc53f6..e1f7a308 100644 --- a/docs/mini-apps/technical-reference/minikit/overview.mdx +++ b/docs/onchainkit/latest/components/minikit/overview.mdx @@ -84,11 +84,11 @@ MiniKit automatically detects the client environment and adapts: ## Technical Reference - + Configure MiniKitProvider and initialize frame context. - + Complete reference for all MiniKit React hooks. \ No newline at end of file diff --git a/docs/mini-apps/technical-reference/minikit/provider-and-initialization.mdx b/docs/onchainkit/latest/components/minikit/provider-and-initialization.mdx similarity index 100% rename from docs/mini-apps/technical-reference/minikit/provider-and-initialization.mdx rename to docs/onchainkit/latest/components/minikit/provider-and-initialization.mdx diff --git a/docs/onchainkit/latest/components/minikit/safe-area.mdx b/docs/onchainkit/latest/components/minikit/safe-area.mdx deleted file mode 100644 index ed6e0b3a..00000000 --- a/docs/onchainkit/latest/components/minikit/safe-area.mdx +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: "SafeArea" ---- - -The `SafeArea` component automatically handles safe area insets when running inside a mini app. It ensures your app's content doesn't get obscured by device UI elements like status bars, home indicators, or navigation bars. - -When not inside a mini app, the component returns children unchanged without applying any safe area styles. - -## Usage - -### Basic usage - -Wrap your content with `SafeArea` to automatically apply safe area padding when inside a mini app: - -```tsx -import { SafeArea } from '@coinbase/onchainkit/minikit'; - -export default function MyMiniApp() { - return ( - -
-

My Mini App Content

-

This content will be properly inset from device edges.

-
-
- ); -} -``` - -### Using asChild prop - -Use the `asChild` prop to merge safe area padding directly into a single child element instead of wrapping it: - -```tsx -import { SafeArea } from '@coinbase/onchainkit/minikit'; - -export default function MyMiniApp() { - return ( - -
-
-

My Mini App

-

Safe area padding is applied directly to the main element.

-
-
-
- ); -} -``` - -### CSS custom properties - -The `SafeArea` component exposes safe area values as CSS custom properties on the `:root` element: - -- `--ock-minikit-safe-area-inset-top` -- `--ock-minikit-safe-area-inset-right` -- `--ock-minikit-safe-area-inset-bottom` -- `--ock-minikit-safe-area-inset-left` - -You can use these variables in your own CSS: - -```css -.my-header { - position: fixed; - top: var(--ock-minikit-safe-area-inset-top, 0px); - left: 0; - right: 0; - background: white; - z-index: 100; -} - -.my-footer { - position: fixed; - bottom: var(--ock-minikit-safe-area-inset-bottom, 0px); - left: 0; - right: 0; - background: white; -} -``` - -## Advanced Usage - -### Complex layout example - -```tsx -import { SafeArea } from '@coinbase/onchainkit/minikit'; - -export default function MiniAppLayout() { - return ( - -
-
-

Mini App Header

-
-
-

Main content area

-
- -
-
- ); -} -``` - -## Behavior - -- **Inside mini app**: Applies safe area padding and sets CSS custom properties -- **Outside mini app**: Returns children unchanged with no modifications -- **No children**: Still sets CSS custom properties if inside mini app, returns `null` -- **asChild with invalid element**: Logs warning and returns children as-is - -## Props - -[`SafeAreaProps`](#safeareaprops) - -```ts -type SafeAreaProps = { - /** React children to render */ - children?: ReactNode; - /** When true, merges safe-area padding into the single child's style instead of wrapping */ - asChild?: boolean; -}; -``` \ No newline at end of file