Merge pull request WalletConnect#1661 from WalletConnect/feat/farcaster-2

Add farcaster references

Author: svenvoskamp

docs/appkit/features/socials.mdx

@@ -11,10 +11,11 @@ import flutterLogo from '../../../static/assets/home/flutterLogo.png'
 
 # Email & Socials
 
-Bring your app to a world of new users in minutes with Email and Social login, giving both new and existing users the ability to seamlessly connect to your app using just an email address or social account.  Set up with just one line of code and enable Smart Account functionality in minutes.
+Bring your app to a world of new users in minutes with Email and Social login, giving both new and existing users the ability to seamlessly connect to your app using just an email address or social account. Set up with just one line of code and enable Smart Account functionality in minutes.
 
-AppKit supports the following providers: 
-- **Email**, **Google**, **X**, **GitHub**, **Discord** and **Apple**.
+AppKit supports the following providers:
+
+- **Email**, **Google**, **X**, **GitHub**, **Discord**, **Apple**, **Facebook** and **Farcaster**.
 
 <Button name="Try Demo" url="https://lab.web3modal.com/library/wagmi/" />
 
@@ -68,4 +69,4 @@ AppKit supports the following providers:
       href: '../flutter/onboarding/email'
     }
   ]}
-/>
+/>

docs/appkit/react/core/custom-connectors.mdx

@@ -2,7 +2,9 @@ import PlatformTabs from '../../../components/PlatformTabs'
 import PlatformTabItem from '../../../components/PlatformTabItem'
 
 # Custom connectors
+
 Custom connectors, such as social logins, WalletConnect QR, Coinbasewallet, etc., can be integrated into your Modal. A simple example of how to incorporate them for Wagmi or Ethers library.
+
 <PlatformTabs groupId="eth-lib" activeOptions={["wagmi", "ethers"]}>
 <PlatformTabItem value="wagmi">
 
@@ -27,20 +29,24 @@ const metadata = {
 
 // create the connectors (delete the ones you don't need)
 const connectors: CreateConnectorFn[] = []
-connectors.push(walletConnect({ projectId, metadata, showQrModal: false })); // showQrModal must be false
-connectors.push(injected({ shimDisconnect: true }));
-connectors.push(coinbaseWallet({
-  appName: metadata.name,
-  appLogoUrl: metadata.icons[0],
-}));
-
-connectors.push(authConnector({ 
-  options: { projectId },
-  socials: ['google', 'x', 'github', 'discord', 'apple'], // add Social logins
-  showWallets: true,
-  email: true,
-  walletFeatures: false,
-}));
+connectors.push(walletConnect({ projectId, metadata, showQrModal: false })) // showQrModal must be false
+connectors.push(injected({ shimDisconnect: true }))
+connectors.push(
+  coinbaseWallet({
+    appName: metadata.name,
+    appLogoUrl: metadata.icons[0]
+  })
+)
+
+connectors.push(
+  authConnector({
+    options: { projectId },
+    socials: ['google', 'x', 'github', 'discord', 'apple', 'facebook', 'farcaster'], // add Social logins
+    showWallets: true,
+    email: true,
+    walletFeatures: false
+  })
+)
 
 const config = createConfig({
   chains: [sepolia],
@@ -52,7 +58,7 @@ const config = createConfig({
 
 createWeb3Modal({
   wagmiConfig: config,
-  projectId,
+  projectId
 })
 
 export function ContextProvider({ children }) {
@@ -62,10 +68,9 @@ export function ContextProvider({ children }) {
     </WagmiProvider>
   )
 }
-
 ```
-Check our React Wagmi demo in [Github](https://github.com/WalletConnect/web-examples/tree/main/dapps/web3modal/react)
 
+Check our React Wagmi demo in [Github](https://github.com/WalletConnect/web-examples/tree/main/dapps/web3modal/react)
 
 </PlatformTabItem>
 <PlatformTabItem value="ethers">
@@ -102,7 +107,7 @@ const ethersConfig = defaultConfig({
   defaultChainId: 1, // used for the Coinbase SDK
   auth: {
     email: true,
-    socials: ['google', 'x', 'github', 'discord', 'apple'], // add social logins 
+    socials: ['google', 'x', 'github', 'discord', 'apple', 'facebook', 'farcaster'], // add social logins
     showWallets: true,
     walletFeatures: false
   }
@@ -113,19 +118,18 @@ createWeb3Modal({
   ethersConfig,
   chains: [mainnet],
   projectId,
-  enableAnalytics: true, // Optional - defaults to your Cloud configuration
+  enableAnalytics: true // Optional - defaults to your Cloud configuration
 })
 
-
-// Now, you can render connect button 
-ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+// Now, you can render connect button
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
-          <w3m-button />
+    <w3m-button />
   </React.StrictMode>
-);
+)
 ```
 
 Check our React ethers demo in [Github](https://github.com/WalletConnect/web-examples/tree/main/dapps/web3modal/react-ethers)
 
 </PlatformTabItem>
-</PlatformTabs>
+</PlatformTabs>

docs/appkit/shared/socials.mdx

@@ -14,7 +14,7 @@ const wagmiConfig = defaultWagmiConfig({
   /* highlight-add-start */
   auth: {
     email: true, // default to true
-    socials: ['google', 'x', 'github', 'discord', 'apple'],
+    socials: ['google', 'x', 'github', 'discord', 'apple', 'facebook', 'farcaster'],
     showWallets: true, // default to true
     walletFeatures: true // default to true
   }
@@ -43,7 +43,7 @@ const wagmiConfig = createConfig({
       options: { projectId },
       /* highlight-add-start */
       email: true, // default to true
-      socials: ['google', 'x', 'github', 'discord', 'apple'],
+      socials: ['google', 'x', 'github', 'discord', 'apple', 'facebook', 'farcaster'],
       showWallets: true, // default to true
       walletFeatures: true // default to true
       /* highlight-add-end */
@@ -63,7 +63,7 @@ const modal = createWeb3Modal({
     /* highlight-add-start */
     auth: {
       email: true, // default to true
-      socials: ['google', 'x', 'github', 'discord', 'apple'],
+      socials: ['google', 'x', 'github', 'discord', 'apple', 'facebook', 'farcaster'],
       showWallets: true, // default to true
       walletFeatures: true // default to true
     }
@@ -79,7 +79,7 @@ const modal = createWeb3Modal({
 ## Options
 
 - email [boolean]: This boolean defines whether you want to enable email login. Default `true`
-- socials [array]: This array contains the list of social platforms that you want to enable for user authentication. The platforms in the example include Google, X, GitHub, Discord, Apple and Facebook (coming soon). Default `undefined`
+- socials [array]: This array contains the list of social platforms that you want to enable for user authentication. The platforms in the example include Google, X, GitHub, Discord, Apple, Facebook and Farcaster. Default `undefined`
 - showWallets [boolean]: This boolean defines whether you want to show the wallet options on the first connect screen. If this is false and `socials` are enabled, it will show a button that directs you to a new screen displaying the wallet options. Default `true`
 - walletFeatures [boolean]: This boolean defines whether you want to enable wallet features. Wallet features allow users to view their balance, send, receive, and buy funds through a clear user interface. Default `true`