Update best practices and SIWF info for mini apps in Base App (#116)

* update mini app best practices and add new Base App name

* add wagmi and window.ethereum guides for wallet interactions

Author: dylsteck

docs/cookbook/onchain-social.mdx

@@ -350,7 +350,7 @@ Building successful Mini Apps requires understanding social-specific patterns an
     Optimize loading times and user experience for mobile social environments
   </Card>
   <Card title="Coinbase Wallet Integration" icon="wallet" href="/wallet-app/introduction/mini-apps">
-    Specific guidance for optimizing Mini Apps in Coinbase Wallet
+    Specific guidance for optimizing Mini Apps in Base App
   </Card>
 </CardGroup>
 

docs/wallet-app/introduction/getting-started.mdx

@@ -1,11 +1,11 @@
 ---
 title: Getting Started with Mini Apps
-description: Overview and implementation guide for Mini Apps in Coinbase Wallet
+description: Overview and implementation guide for Mini Apps in Base App
 ---
 
 
 
-Mini Apps are lightweight web applications that run natively within clients like Coinbase Wallet. Users instantly access mini apps without downloads, benefit from seamless wallet interactions, and discover apps directly in the social feed. This benefits app developers by creating viral loops for user acquisition and engagement.
+Mini Apps are lightweight web applications that run natively within clients like Base App. Users instantly access mini apps without downloads, benefit from seamless wallet interactions, and discover apps directly in the social feed. This benefits app developers by creating viral loops for user acquisition and engagement.
 
 ## What is a Mini App?
 

docs/wallet-app/introduction/mini-apps.mdx

@@ -1,40 +1,52 @@
 ---
-title: Mini Apps in Coinbase Wallet
-description: Guide for building and optimizing mini apps for Coinbase Wallet
+title: Mini Apps in Base App
+description: Guide for building and optimizing mini apps for Base App
 ---
 
 
-We're so excited that mini apps are coming to Coinbase Wallet! The purpose of this guide is to go over how to build or update your mini app so it works as well as possible in Coinbase Wallet.
+We're so excited that mini apps are supported in Base App! The purpose of this guide is to go over how to build or update your mini app so it works as well as possible in Base App.
 
 ## Using MiniKit
 
+For reference, MiniKit is easiest way to build mini apps on Base, allowing developers to easily build mini apps without needing to know the details of the SDK implementation. It integrates seamlessly with OnchainKit components and provides Base App-specific hooks.
+
 <Card title="Quick Start with MiniKit" icon="rocket" href="/wallet-app/build-with-minikit/quickstart">
-If you use MiniKit and/or follow the MiniKit quickstart guide, your mini app will work out of the box in Coinbase Wallet!
+If you use MiniKit and/or follow the MiniKit quickstart guide, your mini app will work out of the box in Base App!
 </Card>
 
-For reference, MiniKit is easiest way to build mini apps on Base, allowing developers to easily build mini apps without needing to know the details of the SDK implementation. It integrates seamlessly with OnchainKit components and provides Coinbase Wallet-specific hooks.
-
 <Card title="Debugging Guide" icon="bug" href="/wallet-app/build-with-minikit/debugging">
 If you're already using MiniKit and experiencing issues, you can refer to our debugging guide
 </Card>
 
 ## Authentication
 
 <Warning>
-As a general rule of thumb for building any mini app, we recommend that you do not automatically request that the user logs in/signs a message and instead that authentication is only used when it's needed (e.g. signing up for an event, viewing authenticated resources, etc).
+As a general rule of thumb, we recommend that you save authentication that requires an interaction for interactions that require it(eg. buying something, viewing personalized pages etc)
 </Warning>
 
-Below we will quickly cover the different methods of authentication offered for mini apps and how well each of them work in Coinbase Wallet:
+Below we will quickly cover the different methods of authentication offered for mini apps and how well each of them work in Base App:
 
 <Tabs>
-<Tab title="Wallet Authentication (Recommended)">
-Because users in Coinbase Wallet have an in-app smart wallet that doesn't require any app switching, we recommend wallet authentication as the primary method of authentication for developers looking to create a persisted session for the mini app user.
+<Tab title="Sign In with Farcaster/Quick Auth">
+Base App natively supports [Sign In with Farcaster](https://github.com/farcasterxyz/protocol/discussions/110)(SIWF) in-app, so you can sign users in and get their social identity all without leaving Base App. 
+
+We also support [Quick Auth](https://miniapps.farcaster.xyz/docs/sdk/quick-auth), which uses Sign In with Farcaster to issue developers a  [JWT](https://jwt.io/introduction) that can be used to persist the user's session in the mini app.
+
+This is the expected flow for end-users to Sign In with Farcaster in your mini app:
+- **Create Account Users**: Users who created a net-new Farcaster account during Base App onboarding
+  - When signing into a mini app, the user will be prompted to see a "Login request" tray showing the SIWF message and can sign it right their with their passkey
+- **Connect Account Users**: Users who connected an existing Farcaster account during Base App onboarding
+  - When signing into a mini app for the first time, the user will be prompted to deeplink to Farcaster(one-time only) and register their wallet as an auth address, which will then enable seamless in-app sign in -- just like the above create account flow
+</Tab>
+
+<Tab title="Wallet Auth">
+Because users in Base App have an in-app smart wallet that doesn't require any app switching, we recommend wallet authentication as the primary method of authentication for developers looking to create a persisted session for the mini app user.
 
 As described below, we don't think it's the best practice to prompt the user to log in before that authentication will allow them to do something else in your mini app, but for cases where do you want a secure, persisted session, using a wallet connection is a great option.
 </Tab>
 
 <Tab title="Context Data">
-All mini app host apps (including Coinbase Wallet) return [context data](https://miniapps.farcaster.xyz/docs/sdk/context), which tells developers about the app/mini app host the user is accessing their mini app in, as well as **which user** is interacting with their mini app.
+All mini app host apps (including Base App) return [context data](https://miniapps.farcaster.xyz/docs/sdk/context), which tells developers about the app/mini app host the user is accessing their mini app in, as well as **which user** is interacting with their mini app.
 
 A common flow that other mini app developers follow is using the context data to either track analytics metrics or create an authentication session via a [JWT](https://jwt.io/introduction). This allows you to still track analytics/offer certain authenticated services to your users without the extra friction of signing a message or deeplinking to another app.
 
@@ -43,34 +55,23 @@ Something important to note is that because of how the current mini app spec is
 </Warning>
 </Tab>
 
-<Tab title="Sign In with Farcaster">
-Currently, using Sign In with Farcaster inside of Coinbase Wallet is **not recommended as the primary method of authentication**. This is because, for Farcaster accounts that were created in Farcaster (which many current accounts were), using Sign In with Farcaster will require deeplinking the user to Farcaster and then back to Coinbase Wallet. While this flow still works inside of Coinbase Wallet, we recommend either wallet auth or creating an auth strategy around the context data (eg. a custom JWT with context data) for a more optimal UX.
-
-<Info>
-Note: The Sign In with Farcaster flow will no longer require a deeplink to Farcaster when the [auth addresses FIP](https://github.com/farcasterxyz/protocol/discussions/225) lands, which will allow a set of delegated wallets to take actions on behalf of a Farcaster account's custody wallet.
-</Info>
-</Tab>
 </Tabs>
 
 ## Deeplinks and SDK Actions
 
-The official mini apps SDK offers a [set of actions](https://miniapps.farcaster.xyz/docs/specification#actions) (which MiniKit offers as well) so that users of your mini app can be led to do things back in clients like Coinbase Wallet (e.g. compose a cast, view a profile, etc).
+The official mini apps SDK offers a [set of actions](https://miniapps.farcaster.xyz/docs/specification#actions) (which MiniKit offers as well) so that users of your mini app can be led to do things back in clients like Base App (e.g. compose a cast, view a profile, etc).
 
 <Warning>
 **Always use official SDK functions instead of Farcaster-specific deeplinks in your mini app.**
 </Warning>
 
-While some developers have used Farcaster-specific deeplinks in the `openUrl` function as a workaround, this approach can create problems. Farcaster-specific deeplinks might not match Coinbase Wallet-specific deeplinks, **potentially leaving users dead-ended and unable to take further action in your mini app**.
-
-Using the official SDK functions ensures your users have the best viewing experience possible across all supported clients, including Coinbase Wallet.
+While some developers have used Farcaster-specific deeplinks in the `openUrl` function as a workaround, this approach can create problems. Farcaster-specific deeplinks might not match Base App-specific deeplinks, **potentially leaving users dead-ended and unable to take further action in your mini app**.
 
-<Info>
-Note: For developers who include a "Share" button in their miniapp, we recommend that you move over to the new `composeCast` function in the miniapps SDK instead of using a Farcaster-specific deeplink.
-</Info>
+Using the official SDK functions ensures your users have the best viewing experience possible across all supported clients, including Base App.
 
 ## Wallet Interactions
 
-Wallet interactions are a core part of the miniapp experience. We want to ensure both that building wallet interactions on top of the Coinbase Wallet is smooth for developers and that users can choose/have funds sent to their Coinbase Wallet when interacting with mini apps.
+Wallet interactions are a core part of the miniapp experience. We want to ensure both that building wallet interactions on top of the Base App is smooth for developers and that users can choose/have funds sent to their Base App when interacting with mini apps.
 
 As a mini app host, we expose an [EIP-1193 Ethereum Provider](https://eips.ethereum.org/EIPS/eip-1193) that can be accessed in two primary ways:
 
@@ -83,19 +84,96 @@ If you run `npm create onchain --mini`, your mini app will have a "Connect Walle
 </Note>
 </Tab>
 
-<Tab title="Frame SDK">
-By using either `sdk.wallet.getEthereumProvider()` from [@farcaster/frame-sdk](https://www.npmjs.com/package/@farcaster/frame-sdk) or by using [@farcaster/frame-wagmi-connector](https://www.npmjs.com/package/@farcaster/frame-wagmi-connector) with your Wagmi config
+<Tab title="Wagmi">
+[Wagmi](https://wagmi.sh) is a powerful JavaScript library for building Ethereum applications, and using it alongside any other onchain logic you have configured is very simple. 
+It only takes the two steps below to auto-connect to the user's wallet with Wagmi:
+
+1) Set up your WagmiProvider to use the Farcaster mini app connector
+```javascript
+import { createConfig, http, WagmiProvider } from "wagmi";
+import { base } from "wagmi/chains";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { farcasterFrame } from "@farcaster/frame-wagmi-connector";
+
+export const config = createConfig({
+  chains: [base],
+  transports: {
+    [base.id]: http()
+  },
+  connectors: [farcasterFrame()],
+});
+
+const queryClient = new QueryClient();
+
+export default function Provider({ children }: { children: React.ReactNode }) {
+  return (
+    <WagmiProvider config={config}>
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </WagmiProvider>
+  );
+}
+```
+
+2) Listen for and use the auto-connected wallet session, if not connect the user
+
+```javascript
+"use client";
+
+import { useAccount, useConnect, useDisconnect } from "wagmi";
+import { config } from "~/components/providers/WagmiProvider";
+
+export function WalletConnectMinimal() {
+  const { address, isConnected } = useAccount();
+  const { connect } = useConnect();
+  const { disconnect } = useDisconnect();
+
+  return (
+    <button onClick={() => 
+      isConnected 
+        ? disconnect() 
+        : connect({ connector: config.connectors[0] })}>
+      {isConnected ? "Disconnect" : "Connect"}
+    </button>
+  );
+}
+```
+</Tab>
+
+<Tab title="Browser Window">
+Because of the open standards this is built on top of, you can both listen for and connect to our injected wallet provider without installing any new package, directly from the browser window's DOM! There are two ways to do this that are both highlighted below:
+
+Connect directly with `window.ethereum`
+```javascript
+// Check if provider exists  
+if (window.ethereum) {  
+  // Use the provider directly  
+  const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });  
+  const chainId = await window.ethereum.request({ method: 'eth_chainId' });  
+}
+```
+
+Use EIP-6963 discovery to listen for the provider's injection
+```javascript
+// Listen for provider announcements  
+window.addEventListener('eip6963:announceProvider', (event) => {  
+  const provider = event.detail.provider;  
+  // Use the provider  
+});  
+  
+// Request providers  
+window.dispatchEvent(new Event('eip6963:requestProvider'));
+```
 </Tab>
 </Tabs>
 
 ## Metadata
 
-Farcaster has recently [extended the metadata spec for mini apps](https://github.com/farcasterxyz/miniapps/discussions/191), which allows developers to add screenshot links, categories, and more to their manifest (farcaster.json) file. Making use of these new metadata fields is highly recommended for increasing the chance that your mini app could be featured throughout Coinbase Wallet.
+Farcaster has recently [extended the metadata spec for mini apps](https://github.com/farcasterxyz/miniapps/discussions/191), which allows developers to add screenshot links, categories, and more to their manifest (farcaster.json) file. Making use of these new metadata fields is highly recommended for increasing the chance that your mini app could be featured throughout Base App.
 
 Below is a table of the new metadata fields introduced, what they mean/could potentially be used for, and an example of what a manifest file could look like with these new fields (all taken from the [official spec](https://github.com/farcasterxyz/miniapps/discussions/191))
 
 <Info>
-Note: Only ~30 of the hundreds of mini apps we've seen have set this data, we **highly recommend** that you set this metadata as it will give your mini app a better shot at being featured.
+Note: We **highly recommend** that you set this metadata as it will give your mini app a better shot at being featured throughout Base App.
 </Info>
 
 <AccordionGroup>
@@ -165,7 +243,7 @@ Note: Only ~30 of the hundreds of mini apps we've seen have set this data, we **
     "tags": [
       "example",
       "mini app",
-      "coinbase wallet"
+      "Base App"
     ],
     "heroImageUrl": "https://example.com/og.png",
     "tagline": "Example Mini App tagline",
@@ -178,7 +256,7 @@ Note: Only ~30 of the hundreds of mini apps we've seen have set this data, we **
 
 ## Notifications
 
-You will soon be able to send notifications from your Mini App that will appear in Coinbase Wallet. These notifications help re-engage users when something important happens, like a new drop, an update, or a reminder to complete an action. There are two ways to integrate:
+You will soon be able to send notifications from your Mini App that will appear in Base App. These notifications help re-engage users when something important happens, like a new drop, an update, or a reminder to complete an action. There are two ways to integrate:
 
 <Tabs>
 <Tab title="Use Neynar (Recommended)">
@@ -202,48 +280,54 @@ You can self-host your own backend as long as it follows the [Farcaster Mini App
 </Tab>
 </Tabs>
 
-## Mini Apps Compatibility in Coinbase Wallet
+## Mini Apps Compatibility in Base App
 
-Coinbase Wallet is working towards full compatibility with the Farcaster Mini App SDK. While we continue to enhance support during the beta phase, there are currently some features that are not yet supported.
+Base App is working towards full compatibility with the Farcaster Mini App SDK. While we continue to enhance support during the beta phase, there are currently some features that are not yet supported.
 
 ### AI-Powered Compatibility Checking
-We provide a [validate.txt](https://raw.githubusercontent.com/base/demos/refs/heads/master/minikit/mini-app-help/validate.txt) file that can be used with AI tools to automatically check your codebase for Coinbase Wallet compatibility issues. Similar to llms.txt files, you can provide this validation file to language models to scan your Mini App code and receive a detailed compatibility report highlighting any unsupported features or patterns.
+We provide a [validate.txt](https://raw.githubusercontent.com/base/demos/refs/heads/master/minikit/mini-app-help/validate.txt) file that can be used with AI tools to automatically check your codebase for Base App compatibility issues. Similar to llms.txt files, you can provide this validation file to language models to scan your Mini App code and receive a detailed compatibility report highlighting any unsupported features or patterns.
 
 <Warning>
 This AI validation is experimental and should only be used in a read-only capacity for analysis and reporting purposes.
 </Warning>
 
 ### Currently Unsupported Features
 
-The following Mini App SDK features are **not currently supported** in Coinbase Wallet:
+The following Mini App SDK features are **not currently supported** in Base App:
 
 #### Environment Detection
-
 * `sdk.isInMiniApp()`
 
 #### Haptic Feedback
-
-* All haptic-related SDK methods
+* All haptic related SDK methods
+  * `sdk.haptics.impactOccurred()`
+  * `sdk.haptics.notificationOccurred()`
+  * `sdk.haptics.selectionChanged()`
 
 #### Token Actions
+* `sdk.actions.swapToken()`
+* `sdk.actions.sendToken()` 
 
-* `sdk.actions.swapToken` \- Token swapping functionality  
-* `sdk.actions.sendToken` \- Token sending functionality  
-* `sdk.actions.viewToken` \- Token viewing functionality
+### Wallet Interactions
+* `sdk.actions.getEthereumProvider()`
+  * Note: We still expose an [EIP-1193 Ethereum Provider](https://eips.ethereum.org/EIPS/eip-1193) that you can auto-detect or use in a package such as MiniKit/Wagmi 
 
 #### Navigation & Links
 
-* Direct HTML links (`<a href=`, `<Link href=`)  
-* Warpcast composer URLs (`warpcast.com/~/compose`, `farcaster.com/~/compose`)
+* Direct HTML links to third-party websites (`<a href=`, `<Link href=`)  
+  * Note: You can instead use `sdk.actions.openUrl()` to safely open a third-party website in our in-app browser
+* Warpcast/Farcaster composer intent URLs (`warpcast.com/~/compose`, `farcaster.com/~/compose`)
+  * Note: You can instead use `sdk.actions.composeCast()` to compose a cast directly in Base App
 
 #### Context Features
 
-* `Share extensions` \-  Because share extensions heavily rely on context this will not work in CBW.
-* `sdk.context.location` \- Share link detection and embed context
+* Share extensions
+* `sdk.context.location`
 
 #### Supported Chains
 
 * Base
+* Mainnet
 * Optimism
 * Arbitrum
 * Polygon
@@ -258,7 +342,7 @@ The following Mini App SDK features are **not currently supported** in Coinbase
 * Use `sdk.actions.composeCast()` instead of Warpcast composer URLs  
 * Implement visual feedback alternatives for haptic feedback  
 * Avoid relying on location context for core functionality
-* To conditionally render functionality based on the user's client, check context.client.clientFid (Coinbase Wallet returns 309857)
+* To conditionally render functionality based on the user's client, check `context.client.clientFid` (Base App returns `309857`)
 
 We are actively working to expand compatibility and expect to support additional features in future releases.