Skip to content

Commit e86e191

Browse files
committed
updated docs
1 parent e308cda commit e86e191

1 file changed

Lines changed: 54 additions & 5 deletions

File tree

docs/mini-apps/quickstart/migrate-to-standard-web-app.mdx

Lines changed: 54 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -46,15 +46,64 @@ Your app uses the Farcaster SDK. The migration replaces Farcaster-specific auth,
4646
npm uninstall @farcaster/frame-sdk @farcaster/frame-wagmi-connector
4747
```
4848

49-
Delete `/.well-known/farcaster.json` and any manifest-serving route if you have one. Remove `sdk.actions.*` calls — the [deprecated methods table](#deprecated-farcaster-sdk-methods-in-the-base-app) lists the standard web replacement for each one.
49+
Delete `/.well-known/farcaster.json` and any manifest-serving route if you have one. Remove `sdk.actions.*`.
5050
</Step>
5151

5252
<Step title="Add the standard web stack">
5353
Install wagmi, viem, and React Query if you don't have them already:
5454

5555
```bash Terminal
56-
npm install wagmi viem @tanstack/react-query
56+
npm install wagmi viem @tanstack/react-query @base-org/account
5757
```
58+
59+
Create a wagmi config for Base and wrap your app with `WagmiProvider` and `QueryClientProvider`:
60+
61+
```tsx config.ts lines expandable wrap
62+
import { http, createConfig, createStorage, cookieStorage } from 'wagmi';
63+
import { base } from 'wagmi/chains';
64+
import { baseAccount, injected } from 'wagmi/connectors';
65+
66+
export const config = createConfig({
67+
chains: [base],
68+
connectors: [
69+
injected(),
70+
baseAccount({
71+
appName: 'My App',
72+
}),
73+
],
74+
storage: createStorage({ storage: cookieStorage }),
75+
ssr: true,
76+
transports: {
77+
[base.id]: http(),
78+
},
79+
});
80+
81+
declare module 'wagmi' {
82+
interface Register {
83+
config: typeof config;
84+
}
85+
}
86+
```
87+
88+
```tsx App.tsx lines highlight={8-12}
89+
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
90+
import { WagmiProvider } from 'wagmi';
91+
import { config } from './config';
92+
93+
const queryClient = new QueryClient();
94+
95+
export default function App({ children }: { children: React.ReactNode }) {
96+
return (
97+
<WagmiProvider config={config}>
98+
<QueryClientProvider client={queryClient}>
99+
{children}
100+
</QueryClientProvider>
101+
</WagmiProvider>
102+
);
103+
}
104+
```
105+
106+
This replaces the Farcaster frame connector with standard wagmi providers that work in the Base app's in-app browser.
58107
</Step>
59108

60109
<Step title="Replace auth and identity">
@@ -185,13 +234,13 @@ The following Farcaster mini-app SDK methods are not invoked by the Base App aft
185234
| `openMiniApp` | `window.open(url)` |
186235
| `viewToken` | Deeplink: `https://base.app/coin/base-mainnet/TOKEN_ADDRESS` |
187236
| `viewProfile` | Deeplink: `https://base.app/profile/WALLET_ADDRESS` |
188-
| `swapToken` | No direct replacement in the Base App |
237+
| `swapToken` | Construct swap transactions with wagmi, viem, or your preferred onchain library. |
189238
| `requestCameraAndMicrophoneAccess` | No replacement |
190239
| `close` | No replacement |
191-
| `addMiniApp` | No replacement |
240+
| `addMiniApp` | the Base App handles mini app installation automatically. No SDK needed. |
192241
| `viewCast` | Not needed in the Base App |
193242
| `composeCast` | Not needed in the Base App |
194-
| `ready` | Not needed — remove it from the Base App path |
243+
| `ready` | Not needed. Your app is ready to display when it loads. |
195244
| User context and FID | Read the injected wallet address via wagmi (`useAccount`) |
196245

197246

0 commit comments

Comments
 (0)