feat: farcaster miniapp support

Author: elboletaire

.github/workflows/netlify.yml

@@ -42,6 +42,7 @@ jobs:
           CUSTOM_ORGANIZATION_DOMAINS: ${{ secrets.CUSTOM_ORGANIZATION_DOMAINS }}
           STRIPE_PUBLIC_KEY: ${{ secrets.STRIPE_PUBLIC_KEY }}
           CALCOM_EVENT_SLUG: ${{ secrets.CALCOM_EVENT_SLUG }}
+          APP_DOMAIN: vocdoni-app-dev.netlify.app
 
       - name: Deploy to Netlify (dev)
         uses: nwtgck/[email protected]

package.json

@@ -21,6 +21,8 @@
     "@ethersproject/abstract-signer": "^5.7.0",
     "@ethersproject/address": "^5.7.0",
     "@ethersproject/providers": "^5.7.0",
+    "@farcaster/miniapp-sdk": "^0.2.1",
+    "@farcaster/miniapp-wagmi-connector": "^1.1.0",
     "@fontsource/inter": "^5.2.5",
     "@gsap/react": "^2.1.2",
     "@lexical/code": "^0.34.0",

pnpm-lock.yaml

@@ -0,0 +1 @@
+.well-known

public/.gitignore

@@ -9,6 +9,7 @@ import { Link as ReactRouterLink } from 'react-router-dom'
 import { useAccount } from 'wagmi'
 import { CensusMeta, CensusTypes } from './Census/CensusType'
 import { CspAuth } from './CSP/CSPAuthModal'
+import { isFarcasterMiniapp } from './farcaster-utils'
 import LogoutButton from './LogoutButton'
 
 const results = (result: number, decimals?: number) =>
@@ -179,13 +180,25 @@ export const CensusConnectButton = () => {
   const isCSP = election.census.type === CensusType.CSP
   const isSpreadsheet = census?.type === CensusTypes.Spreadsheet
   const isWeb3 = census?.type === CensusTypes.Web3
+  const isInFarcaster = isFarcasterMiniapp()
 
   return (
     <>
       {isWeb3 && !connected && (
-        <Button colorScheme='black' onClick={openConnectModal} w='full'>
-          {t('menu.connect').toString()}
-        </Button>
+        <>
+          {isInFarcaster ? (
+            // In Farcaster miniapp: show status message
+            // The connection happens automatically in FarcasterAwareClientProvider
+            <Text fontSize='sm' textAlign='center' color='texts.subtle'>
+              {t('farcaster.connecting')}
+            </Text>
+          ) : (
+            // Not in Farcaster: show RainbowKit connect button
+            <Button colorScheme='black' onClick={openConnectModal} w='full'>
+              {t('menu.connect').toString()}
+            </Button>
+          )}
+        </>
       )}
       {isCSP && !connected && <CspAuth />}
       {isSpreadsheet && !connected && <SpreadsheetAccess />}

src/components/Process/Aside.tsx

@@ -0,0 +1,114 @@
+import type { Signer } from '@ethersproject/abstract-signer'
+import type { ExternalProvider } from '@ethersproject/providers'
+import { Web3Provider } from '@ethersproject/providers'
+import { sdk } from '@farcaster/miniapp-sdk'
+
+/**
+ * Check if the app is running inside a Farcaster miniapp context
+ */
+export const isFarcasterMiniapp = (): boolean => {
+  // Check if APP_DOMAIN is set (feature flag)
+  if (!import.meta.env.APP_DOMAIN) {
+    return false
+  }
+
+  // Check if running in browser (not SSR)
+  if (typeof window === 'undefined') {
+    return false
+  }
+
+  // Basic check - will be validated during SDK initialization
+  return true
+}
+
+/**
+ * Initialize the Farcaster SDK
+ * Must be called after the app loads to hide the splash screen
+ */
+export const initializeFarcasterSDK = async (): Promise<void> => {
+  if (!isFarcasterMiniapp()) {
+    return
+  }
+
+  try {
+    // Check if context is available
+    const context = await sdk.context
+    if (!context || !context.client) {
+      throw new Error('Not running in Farcaster miniapp context')
+    }
+
+    await sdk.actions.ready()
+    console.log('✅ Farcaster SDK initialized')
+  } catch (error) {
+    console.error('❌ Failed to initialize Farcaster SDK:', error)
+    throw error
+  }
+}
+
+/**
+ * Get the Ethereum provider from Farcaster wallet
+ * Returns an EIP-1193 compatible provider
+ */
+export const getFarcasterEthereumProvider = async () => {
+  if (!isFarcasterMiniapp()) {
+    throw new Error('Not running in Farcaster miniapp context')
+  }
+
+  try {
+    const provider = await sdk.wallet.getEthereumProvider()
+    if (!provider) {
+      throw new Error('Farcaster Ethereum provider not available')
+    }
+    return provider
+  } catch (error) {
+    console.error('❌ Failed to get Farcaster Ethereum provider:', error)
+    throw error
+  }
+}
+
+/**
+ * Convert Farcaster's Ethereum provider to an ethers.js Signer
+ * This is compatible with the Vocdoni SDK which expects an ethers v5 signer
+ */
+export const farcasterSignerAdapter = async (): Promise<Signer | null> => {
+  if (!isFarcasterMiniapp()) {
+    return null
+  }
+
+  try {
+    const provider = await getFarcasterEthereumProvider()
+    const web3Provider = new Web3Provider(provider as ExternalProvider)
+
+    // Request account access
+    const accounts = (await provider.request({ method: 'eth_requestAccounts' })) as string[]
+    if (!accounts || accounts.length === 0) {
+      throw new Error('No accounts found in Farcaster wallet')
+    }
+
+    const signer = web3Provider.getSigner(accounts[0])
+    console.log('✅ Farcaster signer created for account:', accounts[0])
+
+    return signer
+  } catch (error) {
+    console.error('❌ Failed to create Farcaster signer:', error)
+    return null
+  }
+}
+
+/**
+ * Get the connected wallet address from Farcaster
+ */
+export const getFarcasterAddress = async (): Promise<string | null> => {
+  if (!isFarcasterMiniapp()) {
+    return null
+  }
+
+  try {
+    const provider = await getFarcasterEthereumProvider()
+    const accounts = (await provider.request({ method: 'eth_accounts' })) as string[]
+    return accounts && accounts.length > 0 ? accounts[0] : null
+  } catch (error) {
+    console.error('❌ Failed to get Farcaster address:', error)
+    return null
+  }
+}