Farcaster operates as the most significant blockchain-based social network, delivering a structured, open, and permissionless social data infrastructure.
This architecture enables developers to construct applications around user connections, including follows, post interactions (casts), connected wallets, and additional social signals. The primary Farcaster client provides users with integrated wallet functionality that executes cross-chain swaps by default and enables seamless interaction with in-feed applications called "Mini Apps."
These capabilities have catalyzed development of applications that integrate social interaction, DeFi, and trading—all within the post feed environment. Farcaster operates primarily on EVM chains, making Arbitrum natively supported and ready for developer implementation.
While the protocol maintains an open data network, accessing and utilizing this data presents significant complexity.
Hubs and Snapchain nodes that power the network require substantial resources and address only portions of the dataset construction challenge. Developers need not navigate this alone.
This guide demonstrates how we constructed ArbSwap using social data from Quotient and Farcaster's native capabilities, creating an application that enables token exploration and swapping on Arbitrum directly within the feed.
Converting a standard web application into a Mini App requires three steps.
To signal to the Farcaster client that your application functions as a Mini App, install the Mini App SDK and transmit a "ready" signal. This process requires two lines of code:
import { sdk } from '@farcaster/miniapp-sdk'
await sdk.actions.ready()
This functionality works within script tags in HTML, enabling even basic web applications to become Mini Apps.
<script type="module">
import { sdk } from 'https://esm.sh/@farcaster/miniapp-sdk';
window.onload = async () => {
try {
await sdk.actions.ready();
} catch (error) {
console.error(error);
}
};
</script>
The Mini App requires only this ready call to function properly.
Farcaster's Mini App ecosystem requires a comprehensive catalog with creator information and additional metadata. Since every Farcaster account operates as an EOA, signature verification can confirm domain associations with Mini Apps, ownership, and related information. This data resides in your website's public folder at .well-known/farcaster.json as the Manifest. The ArbSwap manifest demonstrates this structure:
{
"accountAssociation": {
"header": "eyJmaWQiOjYwMjMsInR5cGUiOiJjdXN0b2R5Iiwia2V5IjoiMHg0NTYxMzExNjFmODNDN0Q3ZkRBMTViMzJhNWY3QzIxRkQ0RTI3RTk2In0",
"payload": "eyJkb21haW4iOiJhcmJzd2FwLnRyYWRpbmcifQ",
"signature": "MHg0ODQ4MjljYWZiNmY5YjU0ZjUyMjUzOTRjNmJiYTFiNDc3Y2JlYjI0MjQ2OThkZTNlNjY2YTZmNWFjN2E0ZWY5NzA0ZTA5OTE0MDA2Njg4YWI3ZjI1NDNhOTA2MTQwM2NlNDE2MWIzOGE4OWIwMGNkNWM5OTkzZjE3MGJhOTkwMjFi"
},
"miniapp": {
"version": "1",
"name": "ArbSwap",
"iconUrl": "https://arbswap.trading/icon.png",
"homeUrl": "https://arbswap.trading",
"imageUrl": "https://arbswap.trading/image.png",
"buttonTitle": "Swap",
"splashImageUrl": "https://arbswap.trading/splash.png",
"splashBackgroundColor": "#213147",
"requiredChains": ["eip155:42161"]
}
}
The accountAssociation verifies owner and domain authenticity, while the miniapp object contains essential metadata including image previews, loading phase background colors, and requiredChains to indicate Arbitrum deployment.
Social feed website and application sharing typically utilizes Open Graph previews containing site names, descriptions, images, and links. Mini Apps employ an embed meta tag containing information similar to the manifest.
<meta name='fc:frame' content='
{
"version":"next",
"imageUrl":"https://arbswap.trading/image.png",
"aspectRatio":"3:2",
"button":
{
"title":"Swap",
"action":
{
"type":"launch_frame",
"name":"Swap",
"url":"https://arbswap.trading",
"splashImageUrl":"https://arbswap.trading/splash.png",
"splashBackgroundColor":"#213147"
}
}
}' />
This requires only the stringified JSON object with complete information, placed alongside other meta tags. These three steps complete the web application to Mini App conversion.
Rendering applications within social feeds provides immediate value, but accessing the Farcaster social graph delivers significant additional capabilities. The Mini App SDK provides essential features, including access to information about users accessing the Mini App. Running sdk.context returns the following data:
export type MiniAppPlatformType = 'web' | 'mobile';
export type MiniAppContext = {
user: {
fid: number;
username?: string;
displayName?: string;
pfpUrl?: string;
};
location?: MiniAppLocationContext;
client: {
platformType?: MiniAppPlatformType;
clientFid: number;
added: boolean;
safeAreaInsets?: SafeAreaInsets;
notificationDetails?: MiniAppNotificationDetails;
};
};
This information extends beyond basic user data to include application opening location and notification subscription status (Mini Apps can send programmatic user notifications). The critical data point is user.fid. The FID (Farcaster ID) serves as the Farcaster user identifier, enabling access to comprehensive user data:
Followers
Casts
Likes or Recasts
Connected Wallets
ArbSwap implements a distinctive approach by indexing tokens launched natively on Farcaster through AI agents called "Clankers." Clanker operates as a bot that converts tagged commands into tokens and initiates fund distribution. This requires extensive indexing capabilities, which Quotient provides. To display these tokens and identify trending options among mutual followers for a given user, Quotient delivers the necessary data. With this information, we construct an API endpoint as follows:
app.get("/tokens/:fid", async (c) => {
const fid = c.req.param("fid");
const followerRes = await fetch(
`https://api.quotient.social/v1/farcaster-users/mutuals`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
fid: Number(fid),
api_key: c.env.QUOTIENT_API_KEY,
}),
},
);
if (!followerRes.ok) {
return c.json({ error: "Problem fetching follower data" }, 500);
}
const followerData = (await followerRes.json()) as FollowerResponse;
const followers: number[] = [];
for (const follower of followerData.mutual_followers) {
followers.push(follower.fid);
}
const tokenRes = await fetch(
"https://api.quotient.social/v1/holds-clankers",
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
fids: followers,
api_key: c.env.QUOTIENT_API_KEY,
chain: "arbitrum",
}),
},
);
if (!tokenRes.ok) {
return c.json({ error: "Problem fetching token data" }, 500);
}
const tokens = (await tokenRes.json()) as TokenResponse;
return c.json(tokens);
});
This API accepts a user's FID as a path parameter, retrieves mutual followers, constructs an FID array from results, and passes this data to /holds-clankers to obtain token information. The client requires only FID retrieval and API invocation:
const fetchTopClankers = async (): Promise<ClankerResponse> => {
const context = await sdk.context;
const fid = context.user.fid;
const response = await fetch(
`${import.meta.env.VITE_SERVER_URL}/tokens/${fid}`,
);
if (!response.ok) {
throw new Error("Failed to fetch clankers");
}
return response.json();
};
These components enable construction of sophisticated social data applications with significant functionality potential.
Beyond token display, we enable users to swap tokens using their integrated Farcaster wallet. This requires wallet connection within the sandboxed environment, which the Mini App SDK addresses through a Wagmi connector for your Wagmi configuration file. We designate Arbitrum as our target chain.
import { http, createConfig } from "wagmi";
import { arbitrum } from "wagmi/chains";
import { farcasterMiniApp as miniAppConnector } from "@farcaster/miniapp-wagmi-connector";
export const config = createConfig({
chains: [arbitrum],
transports: {
[arbitrum.id]: http(),
},
connectors: [miniAppConnector()],
});
User wallet connection requires calling connect and specifying the connector:
connect({ connector: connectors[0] });
Wagmi functions identically to standard applications. The Farcaster wallet provides direct access to integrated swap functionality without requiring additional widget setup or packages. Execute await sdk.actions.swapTokens() with arguments in CAIP-19 format:
// Convert token addresses to CAIP-19 format
const sellToken = `eip155:42161/erc20:${USDC_ADDRESS}`;
const buyToken = `eip155:42161/erc20:${token.address}`;
// Default amount of USDC to swap (1 USDC)
const sellAmount = (1 * Math.pow(10, USDC_DECIMALS)).toString();
const result = await sdk.actions.swapToken({
sellToken,
buyToken,
sellAmount,
});
This action automatically opens the user's Farcaster Wallet with preconfigured token amounts and addresses, then identifies an optimal route.
All ArbSwap code demonstrated here operates as open source and remains available in the repository below.
Mini Apps function as web applications with integrated blockchain and cryptocurrency capabilities. They access rich social graph data, integrate this information into user experiences, and provide seamless wallet access.
Mini Apps support custom authentication flows, notification sending, and cross-application page linking. The development potential remains substantial, particularly for Arbitrum applications.
Arbitrum delivers adequate decentralization, minimal fees, and rapid transaction processing as one of the few L2 chains meeting these criteria.
Despite this success, insufficient Arbitrum applications exist on Farcaster. This represents your opportunity.
Consider Farcaster, Arbitrum, and Quotient for your next application launch when requiring comprehensive data infrastructure.
Steve
<100 subscribers
Support dialog