Flinks

Flinks is a browser extension that bridges the gap between traditional social media and Web3 technologies across multiple platforms including Twitter, Discord, Reddit, Telegram, and other social media websites. Upon installation, it automatically detects the user's social media ID and creates an embedded wallet using Web3Auth, linked to their profile. The extension then mints a unique ENS subname NFT for the user, providing them with a blockchain-based identity tied to their social media presence.

The core feature of Flinks is its ability to render Farcaster frames directly within various social media interfaces. It replaces standard link previews with interactive Farcaster frames, allowing users to engage with Web3 content, participate in polls, and perform blockchain actions without leaving their preferred platform.

Flinks follows the original Farcaster frame spec, enabling support for existing frames. However, as it aims to be a universal frame system, there are some limitations when dealing with frames that implement Farcaster-specific validations. To address this, Flinks proposes the development of a new standard that uses its embedded wallet method for identity purposes, aiming to standardize cross-platform interactions.

The extension stores wallet details and ENS information locally, ensuring quick access for frame interactions and other blockchain operations. This seamless integration of Web3 functionality into various social media platforms creates a more interactive and blockchain-aware social experience, effectively bridging the gap between Web2 and Web3 platforms.

Flinks is built using a combination of web technologies and blockchain integrations:

1. Chrome Extension Framework: The core of the project is built as a Chrome extension, using JavaScript/TypeScript for functionality and HTML/CSS for UI.

2. Web3Auth Integration: We leverage Web3Auth to create embedded wallets for users, simplifying the onboarding process for blockchain interactions and providing a novel approach to identity management across platforms.

3. ENS Integration: We use the ENS Namewrapper contract to mint ERC1155 NFT subnames for users, providing them with a unique blockchain identity.

4. Farcaster Frame Rendering: We implemented a custom parser and renderer for Farcaster frames, allowing them to be displayed natively within Twitter's interface.

5. Twitter API Integration: We use Twitter's API to fetch user profile information and integrate it with the Web3 functionality.

6. Local Storage: Chrome's local storage API is used to securely store wallet and ENS information for quick access.

7. Blockchain Interactions: Ethereum Web3 libraries are used for blockchain interactions, including minting NFTs and interacting with smart contracts.

The most challenging and innovative aspect of our project was the integration of frames. We accomplished this by:

1. Intercepting Twitter's link preview mechanism.
2. Fetching and parsing Farcaster frame metadata from linked pages.
3. Dynamically rendering interactive frame content in place of standard link previews.

This approach required careful manipulation of the DOM and a deep understanding of both Twitter's frontend structure and Farcaster's frame specifications.

We also implemented user onboarding by automatically creating Web3 wallets and ENS subnames for users without requiring any manual input, significantly lowering the barrier to entry for Web3 interactions on social media.

Limitations

• The extension is unable to support mint & transaction type actions from the frame due to extension compatibility issues with necessary libraries.
• The frame POST actions can't be validated as the spec is defined specifically for farcaster based frames ,which is unavailable right now.