feat: farcaster miniapp support

Author: elboletaire

.github/workflows/netlify.yml

@@ -42,6 +42,8 @@ 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
+          FC_ACCOUNT_ASSOCIATION: ${{ secrets.FC_ACCOUNT_ASSOCIATION }}
 
       - name: Deploy to Netlify (dev)
         uses: nwtgck/[email protected]
@@ -93,6 +95,8 @@ jobs:
           STRIPE_PUBLIC_KEY: ${{ secrets.STRIPE_PUBLIC_KEY }}
           CALCOM_EVENT_SLUG: ${{ secrets.CALCOM_EVENT_SLUG }}
           SAAS_URL: https://saas-api-stg.vocdoni.net
+          APP_DOMAIN: vocdoni-app-stg.netlify.app
+          FC_ACCOUNT_ASSOCIATION: ${{ secrets.FC_ACCOUNT_ASSOCIATION }}
 
       - name: Deploy to Netlify (stg)
         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

@@ -13,6 +13,7 @@ import { AuthProvider } from '~components/Auth/AuthContext'
 import { SubscriptionProvider } from '~components/Auth/Subscription'
 import { CookieConsent } from '~components/shared/CookieConsent'
 import { walletClientToSigner } from '~constants/wagmi-adapters'
+import { useFarcasterSDK } from '~utils/farcaster'
 import { VocdoniEnvironment } from './constants'
 import { wagmiConfig } from './constants/rainbow'
 import { translations } from './i18n/components'
@@ -59,6 +60,9 @@ export const AppProviders = () => {
   const { address } = useAccount()
   const { t, i18n } = useTranslation()
 
+  // Initialize Farcaster SDK early (if in Farcaster miniapp)
+  useFarcasterSDK()
+
   let signer = null
   if (data && address && data.account.address === address) {
     signer = walletClientToSigner(data)

src/Providers.tsx

@@ -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 '~utils/farcaster'
 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

@@ -1,8 +1,17 @@
+import { Signer } from '@ethersproject/abstract-signer'
 import { ConnectButton } from '@rainbow-me/rainbowkit'
-import { ElectionProvider, OrganizationProvider, useElection } from '@vocdoni/react-providers'
-import { PublishedElection } from '@vocdoni/sdk'
+import { ClientProvider, ElectionProvider, OrganizationProvider, useElection } from '@vocdoni/react-providers'
+import { EnvOptions, PublishedElection } from '@vocdoni/sdk'
+import { PropsWithChildren, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { useLoaderData } from 'react-router-dom'
+import { useAccount, useWalletClient } from 'wagmi'
 import { ProcessView as ProcessViewComponent } from '~components/Process/View'
+import { farcasterSignerAdapter, isFarcasterMiniapp } from '~utils/farcaster'
+import { VocdoniEnvironment } from '~src/constants'
+import { walletClientToSigner } from '~src/constants/wagmi-adapters'
+import { translations } from '~src/i18n/components'
+import { datesLocale } from '~src/i18n/locales'
 import { useDocumentTitle } from '~src/use-document-title'
 
 const ProcessView = () => {
@@ -15,14 +24,74 @@ const ProcessView = () => {
   return <ProcessViewComponent />
 }
 
+/**
+ * Farcaster-aware ClientProvider wrapper
+ * Automatically uses Farcaster wallet when running in Farcaster miniapp context,
+ * otherwise falls back to Wagmi wallet
+ */
+const FarcasterAwareClientProvider = ({ children }: PropsWithChildren) => {
+  const { data: wagmiWalletClient } = useWalletClient()
+  const { address } = useAccount()
+  const { t, i18n } = useTranslation()
+  const [farcasterSigner, setFarcasterSigner] = useState<Signer | null>(null)
+  const [isInitialized, setIsInitialized] = useState(false)
+
+  // Get Farcaster signer if in miniapp
+  useEffect(() => {
+    const initFarcaster = async () => {
+      if (isFarcasterMiniapp()) {
+        try {
+          // Get Farcaster signer (SDK already initialized in AppProviders)
+          const signer = await farcasterSignerAdapter()
+          setFarcasterSigner(signer)
+          console.log('✅ Using Farcaster wallet for voting')
+        } catch (error) {
+          console.error('❌ Farcaster signer creation failed, falling back to Wagmi:', error)
+        }
+      }
+      setIsInitialized(true)
+    }
+
+    initFarcaster()
+  }, [])
+
+  // Determine which signer to use
+  let signer: Signer | null = null
+  if (farcasterSigner) {
+    // Use Farcaster signer if available
+    signer = farcasterSigner
+  } else if (wagmiWalletClient && address && wagmiWalletClient.account.address === address) {
+    // Fall back to Wagmi wallet
+    signer = walletClientToSigner(wagmiWalletClient)
+  }
+
+  // Don't render until Farcaster initialization is complete
+  if (!isInitialized) {
+    return null
+  }
+
+  return (
+    <ClientProvider
+      env={VocdoniEnvironment as EnvOptions}
+      signer={signer as Signer}
+      locale={translations(t)}
+      datesLocale={datesLocale(i18n.language)}
+    >
+      {children}
+    </ClientProvider>
+  )
+}
+
 const Process = () => {
   const election = useLoaderData() as PublishedElection
 
   return (
     <OrganizationProvider id={election.organizationId}>
-      <ElectionProvider election={election} ConnectButton={ConnectButton} fetchCensus autoUpdate>
-        <ProcessView />
-      </ElectionProvider>
+      <FarcasterAwareClientProvider>
+        <ElectionProvider election={election} ConnectButton={ConnectButton} fetchCensus autoUpdate>
+          <ProcessView />
+        </ElectionProvider>
+      </FarcasterAwareClientProvider>
     </OrganizationProvider>
   )
 }

src/elements/processes/view.tsx

@@ -315,6 +315,9 @@
   },
   "error_removing_code": "Hi ha hagut un error eliminant el codi",
   "error_text": "Ho sentim, no s'ha trobat la pàgina que cerqueu",
+  "farcaster": {
+    "connecting": "Connectant amb la cartera de Farcaster..."
+  },
   "features": {
     "anonymous": "Votacions anònimes",
     "anonymous_voting": "Votació anònima",

src/i18n/locales/ca.json

@@ -312,6 +312,9 @@
   },
   "error_removing_code": "Error removing code",
   "error_text": "Sorry, the page you were looking for was not found",
+  "farcaster": {
+    "connecting": "Connecting with Farcaster wallet..."
+  },
   "features": {
     "anonymous": "Anonymous voting",
     "anonymous_voting": "Anonymous voting",

src/i18n/locales/en.json

@@ -315,6 +315,9 @@
   },
   "error_removing_code": "Error eliminando el código",
   "error_text": "Lo sentimos, la página que buscabas no se ha encontrado",
+  "farcaster": {
+    "connecting": "Conectando con la cartera de Farcaster..."
+  },
   "features": {
     "anonymous": "Votación anónima",
     "anonymous_voting": "Votación anónima",