diff --git a/docs/mini-apps/quickstart/migrate-to-standard-web-app.mdx b/docs/mini-apps/quickstart/migrate-to-standard-web-app.mdx index 0c8e5ca68..dcc8dd09d 100644 --- a/docs/mini-apps/quickstart/migrate-to-standard-web-app.mdx +++ b/docs/mini-apps/quickstart/migrate-to-standard-web-app.mdx @@ -12,6 +12,21 @@ After April 9, 2026, the Base App treats all apps as standard web apps regardles **Using an AI coding agent?** Install the [Migration Skill](https://github.com/base/skills) to let your agent handle this migration automatically. Run `npx skills add base/skills` and ask your agent to migrate your Farcaster mini app to a standard web app. +## Which flow should I use? + +Choose your migration path based on your app's current state and goals: + +| If your app is... | Use this flow | Farcaster manifest required? | +| --- | --- | --- | +| Already a Farcaster mini app using the SDK | [Convert mini app to standard web app](#im-converting-a-mini-app) | No (migrate away from it) | +| A standard web app NOT currently in the Base App | [Add to Base App](#im-adding-a-standard-web-app) | No | +| Already verified on Base.dev as a standard web app | No migration needed | No | +| Want Farcaster-specific features (frames, casts) | [Import as Mini App](/mini-apps/quickstart/migrate-existing-apps) | Yes | + + +The **Farcaster manifest** (`/.well-known/farcaster.json`) is only required if you want your app to be discoverable and usable within the Farcaster ecosystem (e.g., as a frame in casts). For apps that only need to work in the Base App, standard web app registration on Base.dev is sufficient. + + ## What's changing The Base App is moving from the Farcaster mini-app spec to a single model: **standard web app + wallet**, powered by Base.dev. @@ -34,230 +49,142 @@ The Base App is moving from the Farcaster mini-app spec to a single model: **sta **Let your agent handle this.** Install the [Migration Skill](https://github.com/base/skills) with `npx skills add base/skills` and ask your agent to migrate your Farcaster mini app to a standard web app. The skill maps deprecated SDK methods, replaces auth and wallet logic, and wires up the Base App path automatically. -Your app uses the Farcaster SDK. The migration replaces Farcaster-specific auth, identity, and actions with standard web equivalents. - - +Your app uses the Farcaster SDK. The migration replaces Farcaster-specific auth, identity, and actions with wagmi, viem, and Sign-In with Ethereum (SIWE). - - - Install wagmi, viem, and React Query if you don't have them already: - - ```bash Terminal - npm install wagmi viem @tanstack/react-query @base-org/account - ``` - - Create a wagmi config for Base and wrap your app with `WagmiProvider` and `QueryClientProvider`: - - ```tsx config.ts lines expandable wrap - import { http, createConfig, createStorage, cookieStorage } from 'wagmi'; - import { base } from 'wagmi/chains'; - import { baseAccount, injected } from 'wagmi/connectors'; - - export const config = createConfig({ - chains: [base], - connectors: [ - injected(), - baseAccount({ - appName: 'My App', - }), - ], - storage: createStorage({ storage: cookieStorage }), - ssr: true, - transports: { - [base.id]: http(), - }, - }); - - declare module 'wagmi' { - interface Register { - config: typeof config; - } - } - ``` - - ```tsx App.tsx lines highlight={8-12} - import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; - import { WagmiProvider } from 'wagmi'; - import { config } from './config'; - - const queryClient = new QueryClient(); - - export default function App({ children }: { children: React.ReactNode }) { - return ( - - - {children} - - - ); - } - ``` - - This replaces the Farcaster frame connector with standard wagmi providers that work in the Base app's in-app browser. + +Uninstall the Farcaster SDK and remove all `sdk` imports and calls. + + +```bash npm +npm uninstall @farcaster/miniapp-sdk +``` + +```bash pnpm +pnpm remove @farcaster/miniapp-sdk +``` + +```bash yarn +yarn remove @farcaster/miniapp-sdk +``` + - - Farcaster sign-in and FID-based identity are not available in the Base App. Replace them with [SIWE](https://viem.sh/docs/siwe/utilities/createSiweMessage) for authentication and the connected wallet address for user identity. - - Build, sign, and verify the SIWE message: - - ```tsx SignIn.tsx lines expandable wrap highlight={1,9,14-18,33-34} - 'use client'; - - import { useState } from 'react'; - import { createSiweMessage, generateSiweNonce } from 'viem/siwe'; - import { useAccount, usePublicClient, useSignMessage } from 'wagmi'; - - export function SignIn() { - const { address, chainId, isConnected } = useAccount(); - const [isSigningIn, setIsSigningIn] = useState(false); - const { signMessageAsync } = useSignMessage(); - const publicClient = usePublicClient(); - - async function handleSignIn() { - if (!isConnected || !address || !chainId || !publicClient) { - throw new Error('Connect your wallet before signing in'); - } - - setIsSigningIn(true); - const nonce = generateSiweNonce(); - - try { - const message = createSiweMessage({ - address, - chainId, - domain: window.location.host, - nonce, - uri: window.location.origin, - version: '1', - }); - - const signature = await signMessageAsync({ message }); - - const valid = await publicClient.verifySiweMessage({ message, signature }); - if (!valid) throw new Error('SIWE verification failed'); - } finally { - setIsSigningIn(false); - } - } - - return ( - - ); - } - ``` - - - This example verifies the signature client-side. If your app needs server-side sessions or replay protection, see the [Authenticate users](/base-account/guides/authenticate-users) guide for the full pattern with server-issued nonces, backend verification. - - - Use `useAccount` from wagmi to read the connected wallet address as the user's identity and guard SIWE execution until the wallet and chain are available. - + +Install the standard Ethereum libraries. - - See the [compatibility table](#deprecated-farcaster-sdk-methods-in-the-base-app) for what will and won't work in the Base app, along with standard web alternatives. - + +```bash npm +npm install wagmi viem +``` - - - Notifications migration will be available in Base.dev soon. - - Farcaster-based notifications (via Neynar, FIDs, or tokens) will not reach Base App users. Replace them with the Base.dev notifications API, which sends by wallet address. +```bash pnpm +pnpm add wagmi viem +``` + +```bash yarn +yarn add wagmi viem +``` + - - If you haven't registered yet, create a project at [Base.dev](https://www.base.dev) and complete your app metadata: name, icon, tagline, description, screenshots, category, primary URL, and [builder code](/base-chain/builder-codes/builder-codes). Already registered apps do not need to re-register or update metadata. + +Replace Farcaster auth with Sign-In with Ethereum. + +**Before:** +```typescript +import { sdk } from '@farcaster/miniapp-sdk'; + +const result = await sdk.actions.signIn({ + nonce: generateNonce(), +}); +``` + +**After:** +```typescript +import { signMessage } from 'wagmi/actions'; +import { createSiweMessage } from 'viem/siwe'; + +const message = createSiweMessage({ + address: account.address, + chainId: base.id, + nonce: generateNonce(), + domain: window.location.host, + uri: window.location.origin, +}); + +const signature = await signMessage(config, { message }); +``` - + +Replace Farcaster wallet actions with wagmi hooks. +**Before:** +```typescript +import { sdk } from '@farcaster/miniapp-sdk'; - +await sdk.actions.requestPayment({ + amount: 1000, + token: 'USDC', +}); +``` - +**After:** +```typescript +import { useSendTransaction } from 'wagmi'; +import { parseUnits } from 'viem'; -Your app is already a standard web app. You're mostly done — just verify your stack and register on Base.dev. +const { sendTransaction } = useSendTransaction(); - - - - Loads in a mobile browser (the Base App uses a standard in-app browser) - - Uses wagmi/viem for wallet connection and contract interactions - - Uses [SIWE](https://viem.sh/docs/siwe/utilities/createSiweMessage) for authentication where needed +sendTransaction({ + to: recipientAddress, + value: parseUnits('10', 6), // USDC has 6 decimals +}); +``` - - If you haven't registered yet, create a project at [Base.dev](https://www.base.dev) and complete your app metadata: name, icon, tagline, description, screenshots, category, primary URL, and [builder code](/base-chain/builder-codes/builder-codes). Already registered apps do not need to re-register or update metadata. - - - - - Notifications migration will be available in Base.dev soon. - - Use the Base.dev notifications API to send wallet-address notifications to users who installed your app and opted in. + +Ensure your app is registered on [Base.dev](https://www.base.dev). If you previously imported your app as a Mini App, no action is needed—the same project works for standard web apps. - -Your app is ready for the Base App — no Farcaster manifest required. - - - - ---- -## Deprecated Farcaster SDK methods in the Base App + -The following Farcaster mini-app SDK methods are not invoked by the Base App after April 9, 2026. Migrate to the alternatives listed. - -| SDK method | Alternative in the Base App | -| --- | --- | -| `signIn` | [Sign-In with Ethereum](https://viem.sh/docs/siwe/utilities/createSiweMessage) using wagmi (`useSignMessage`) | -| `sendToken` | Standard ERC-20 transfer with wagmi (`useWriteContract`) | -| `openUrl` | `window.open(url)` | -| `openMiniApp` | `window.open(url)` | -| `viewToken` | Deeplink: `https://base.app/coin/base-mainnet/TOKEN_ADDRESS` | -| `viewProfile` | Deeplink: `https://base.app/profile/WALLET_ADDRESS` | -| `swapToken` | Construct swap transactions with wagmi, viem, or your preferred onchain library. | -| `requestCameraAndMicrophoneAccess` | No replacement | -| `close` | No replacement | -| `addMiniApp` | the Base App handles mini app installation automatically. No SDK needed. | -| `viewCast` | Not needed in the Base App | -| `composeCast` | Not needed in the Base App | -| `ready` | Not needed. Your app is ready to display when it loads. | -| User context and FID | Read the injected wallet address via wagmi (`useAccount`) | - - -## Pre-flight checklist - -Before considering your app migrated, verify the following: +Your app is already a standard web app using wagmi/viem or another Ethereum library. You just need to register it on Base.dev. - - - Wallet connection and contract interactions use wagmi + viem. Authentication uses [SIWE](https://viem.sh/docs/siwe/utilities/createSiweMessage) where needed. + +Go to [Base.dev](https://www.base.dev) and create a new project for your app. - - Project is registered on [Base.dev](https://www.base.dev) with primary URL set. Name, icon, tagline, screenshots, category, description, and [builder code](/base-chain/builder-codes/builder-codes) are all filled in. + +Fill in your app's name, description, icon, and URLs in the project settings. - - - Notifications migration will be available in Base.dev soon. - - Notifications are sent via the Base.dev notifications API by wallet address — not via Neynar, FIDs, or tokens. + +Verify domain ownership by adding the provided DNS record or meta tag to your website. + +Submit your app for review to be listed in the Base App. + - -If all steps above are complete, your app is ready for the Base App as a standard web app. - + + + +## Testing your migration + +After migrating, test your app thoroughly: + +1. **Open in Base App** - Verify your app loads correctly in the Base App environment +2. **Test wallet connection** - Ensure users can connect their wallet via the Base App +3. **Test transactions** - Verify all payment and transaction flows work +4. **Test on mobile** - Ensure the experience works well on mobile devices + +## Need Farcaster-specific features? + +If your app needs to work as a Farcaster frame or use Farcaster-specific features, you should follow the [Import as Mini App](/mini-apps/quickstart/migrate-existing-apps) flow instead, which requires hosting a Farcaster manifest.